@spree/dashboard-core 6.0.3 → 6.0.4

package/src/tables/stock-locations.tsx

@@ -1,10 +1,22 @@
-import { STOCK_LOCATION_KINDS } from '@spree/core'
+import { intlDisplayName, STOCK_LOCATION_KINDS } from '@spree/core'
 import { ActiveBadge, ResourceNameCell } from '@spree/dashboard-ui'
 import { WarehouseIcon } from '@spree/dashboard-ui/icons'
 import i18n from 'i18next'
 import type { PanelStockLocation } from '../api-client'
 import { defineTable } from '../lib/table-registry'
 
+/**
+ * Where a location is, on one line: street, city, state and country. Sits
+ * under the name rather than in a column of its own, since it is what tells
+ * two warehouses of a similar name apart.
+ */
+function addressLine(sl: PanelStockLocation): string {
+  const country = sl.country_code
+    ? (intlDisplayName('region', i18n.language, sl.country_code) ?? sl.country_code)
+    : null
+  return [sl.address1, sl.city, sl.state_text || sl.state_code, country].filter(Boolean).join(', ')
+}
+
 defineTable<PanelStockLocation>('stock-locations', {
   docsPath: 'settings/locations',
   description: i18n.t('admin.stock_locations.description'),
@@ -17,7 +29,7 @@ defineTable<PanelStockLocation>('stock-locations', {
   columns: [
     {
       key: 'name',
-      label: i18n.t('admin.fields.name.label'),
+      label: i18n.t('admin.stock_locations.columns.location'),
       sortable: true,
       default: true,
       render: (sl) => (
@@ -25,7 +37,7 @@ defineTable<PanelStockLocation>('stock-locations', {
           id={sl.id}
           dataAttr="data-stock-location-id"
           name={sl.name}
-          secondary={sl.admin_name}
+          secondary={[sl.admin_name, addressLine(sl)].filter(Boolean).join(' · ')}
         />
       ),
     },
@@ -47,17 +59,6 @@ defineTable<PanelStockLocation>('stock-locations', {
         return <span className="capitalize">{label}</span>
       },
     },
-    {
-      key: 'city',
-      label: i18n.t('admin.stock_locations.columns.location'),
-      default: true,
-      render: (sl) => {
-        const parts = [sl.city, sl.state_text || sl.state_code, sl.country_code]
-          .filter(Boolean)
-          .join(', ')
-        return parts || '—'
-      },
-    },
     {
       key: 'pickup_enabled',
       label: i18n.t('admin.stock_locations.columns.pickup'),

package/src/virtual.d.ts

@@ -3,3 +3,7 @@
 // imports @spree/dashboard-core can `import 'virtual:spree-dashboard-plugins'`
 // without its own shim.
 declare module 'virtual:spree-dashboard-plugins'
+
+// The host's installed `@spree/*` versions, defined by `spreeDashboardPlugin()`.
+// Undefined in a build without the plugin, so read it behind a typeof check.
+declare const __SPREE_PACKAGES__: Record<string, string> | undefined

package/src/vite/index.ts

@@ -98,7 +98,103 @@ export interface SpreeDashboardPluginOptions {
  *     })
  */
 export function spreeDashboardPlugin(options: SpreeDashboardPluginOptions = {}): PluginOption[] {
-  return [dashboardProseMirrorDedupePlugin(), dashboardTailwindSourcePlugin(options), tailwindcss()]
+  return [
+    dashboardProseMirrorDedupePlugin(),
+    dashboardTailwindSourcePlugin(options),
+    tailwindcss(),
+    dashboardFontPreloadPlugin(),
+    dashboardPackagesPlugin(),
+  ]
+}
+
+/**
+ * Bakes the host's installed `@spree/*` package versions into the build as
+ * `__SPREE_PACKAGES__`, so the diagnostics report can name the dashboard a
+ * merchant actually deployed, which the server has no way to know.
+ */
+function dashboardPackagesPlugin(): Plugin {
+  return {
+    name: 'spree:dashboard-packages',
+    config(config) {
+      const root = path.resolve(config.root ?? process.cwd())
+      return { define: { __SPREE_PACKAGES__: JSON.stringify(installedSpreePackages(root)) } }
+    },
+  }
+}
+
+/**
+ * `@spree/*` packages the host installs, directly or through another Spree
+ * package (`@spree/core` comes in with the dashboard), by installed version.
+ * Exported for tests.
+ */
+export function installedSpreePackages(root: string): Record<string, string> {
+  const versions: Record<string, string> = {}
+  const visit = (packageRoot: string, includeDev: boolean) => {
+    const manifest = readJson(path.join(packageRoot, 'package.json'))
+    const dependencies = {
+      ...manifest?.dependencies,
+      ...manifest?.peerDependencies,
+      ...(includeDev ? manifest?.devDependencies : {}),
+    }
+    const require = createRequire(path.join(packageRoot, 'package.json'))
+    for (const name of Object.keys(dependencies)) {
+      if (!name.startsWith('@spree/') || name in versions) continue
+      const dependencyRoot = resolvePackageRoot(name, require)
+      const dependency = dependencyRoot && readJson(path.join(dependencyRoot, 'package.json'))
+      if (!dependencyRoot || !dependency || dependency.private) continue
+      versions[name] = dependency.version
+      visit(dependencyRoot, false)
+    }
+  }
+  visit(root, true)
+  return Object.fromEntries(Object.entries(versions).sort(([a], [b]) => a.localeCompare(b)))
+}
+
+function readJson(file: string): Record<string, any> | null {
+  try {
+    return JSON.parse(fs.readFileSync(file, 'utf-8'))
+  } catch {
+    return null
+  }
+}
+
+/** The Latin subset of the dashboard's sans font, which nearly every page renders. */
+const PRELOADED_FONT_FILE = 'inter-latin-opsz-normal.woff2'
+
+/**
+ * Preloads the Latin sans font in production builds. The font is otherwise
+ * discovered only after the CSS is downloaded and parsed, so the first paint
+ * falls back to the system font. Hosts that replace the font emit no such
+ * file and get no tag.
+ */
+function dashboardFontPreloadPlugin(): Plugin {
+  let base = '/'
+  return {
+    name: 'spree:dashboard-font-preload',
+    apply: 'build',
+    configResolved(config) {
+      base = config.base
+    },
+    transformIndexHtml(_html, ctx) {
+      const font = Object.values(ctx.bundle ?? {}).find(
+        (file) => file.type === 'asset' && file.names.includes(PRELOADED_FONT_FILE),
+      )
+      if (!font) return
+      return [
+        {
+          tag: 'link',
+          attrs: {
+            rel: 'preload',
+            href: `${base}${font.fileName}`,
+            as: 'font',
+            type: 'font/woff2',
+            crossorigin: '',
+          },
+          injectTo: 'head',
+        },
+      ]
+    },
+  }
 }
 
 /**
@@ -280,12 +376,14 @@ function formatPluginErrorOverlay(errors: PluginError[]): string {
  * including ours, don't list it there.
  */
 function resolvePackageSourceDir(pkg: string, require: NodeJS.Require): string | null {
+  const packageRoot = resolvePackageRoot(pkg, require)
+  return packageRoot && path.join(packageRoot, 'src')
+}
+
+function resolvePackageRoot(pkg: string, require: NodeJS.Require): string | null {
   try {
     const entryPath = require.resolve(pkg)
-    const entryFile = entryPath.startsWith('file:') ? fileURLToPath(entryPath) : entryPath
-    const packageRoot = findPackageRoot(entryFile)
-    if (!packageRoot) return null
-    return path.join(packageRoot, 'src')
+    return findPackageRoot(entryPath.startsWith('file:') ? fileURLToPath(entryPath) : entryPath)
   } catch {
     return null
   }