@open-mercato/ui 0.6.4-develop.3944.1.4100aa7fbe → 0.6.4-develop.3962.1.70f30e284c

package/src/backend/dashboard/__tests__/widgetRegistry.test.ts

@@ -0,0 +1,60 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import type { ModuleDashboardWidgetEntry } from '@open-mercato/shared/modules/registry'
+
+function createEntry(loader = jest.fn().mockResolvedValue({ Widget: () => null })): ModuleDashboardWidgetEntry {
+  return {
+    moduleId: 'example',
+    key: 'example.dashboard.widget',
+    source: 'app',
+    loader,
+  }
+}
+
+describe('dashboard widget registry', () => {
+  beforeEach(() => {
+    jest.resetModules()
+  })
+
+  it('waits for client bootstrap registration before resolving widget modules', async () => {
+    const { loadDashboardWidgetModule, registerDashboardWidgets } = await import('../widgetRegistry')
+    const loader = jest.fn().mockResolvedValue({ Widget: () => null })
+    const pending = loadDashboardWidgetModule('example.dashboard.widget')
+    let resolved = false
+    pending.then(() => {
+      resolved = true
+    })
+
+    await Promise.resolve()
+    expect(resolved).toBe(false)
+    expect(loader).not.toHaveBeenCalled()
+
+    registerDashboardWidgets([createEntry(loader)])
+
+    await expect(pending).resolves.toEqual({ Widget: expect.any(Function) })
+    expect(loader).toHaveBeenCalledTimes(1)
+  })
+
+  it('uses the latest entries after dashboard widgets are re-registered', async () => {
+    const { loadDashboardWidgetModule, registerDashboardWidgets } = await import('../widgetRegistry')
+    const firstLoader = jest.fn().mockResolvedValue({ Widget: () => null })
+    const secondLoader = jest.fn().mockResolvedValue({ Widget: () => null })
+
+    registerDashboardWidgets([createEntry(firstLoader)])
+    await loadDashboardWidgetModule('example.dashboard.widget')
+
+    registerDashboardWidgets([
+      {
+        ...createEntry(secondLoader),
+        key: 'example.dashboard.other',
+      },
+    ])
+
+    await loadDashboardWidgetModule('example.dashboard.other')
+
+    expect(firstLoader).toHaveBeenCalledTimes(1)
+    expect(secondLoader).toHaveBeenCalledTimes(1)
+  })
+})

package/src/backend/dashboard/widgetRegistry.ts

@@ -3,15 +3,30 @@ import type { DashboardWidgetModule } from '@open-mercato/shared/modules/dashboa
 import { applyDashboardWidgetOverridesToEntries } from '@open-mercato/shared/modules/overrides'
 
 type Entry = ModuleDashboardWidgetEntry
+type LoadedWidgetModule = DashboardWidgetModule<any>
+
+const cache = new Map<string, Promise<LoadedWidgetModule>>()
 
 // Registration pattern for publishable packages
 let _dashboardWidgetEntries: Entry[] | null = null
+let registrationWaiters: Array<(entries: Entry[]) => void> = []
+
+function resolveRegistrationWaiters(entries: Entry[]) {
+  const waiters = registrationWaiters
+  registrationWaiters = []
+  for (const resolve of waiters) {
+    resolve(entries)
+  }
+}
 
 export function registerDashboardWidgets(entries: Entry[]) {
   if (_dashboardWidgetEntries !== null && process.env.NODE_ENV === 'development') {
     console.debug('[Bootstrap] Dashboard widgets re-registered (this may occur during HMR)')
   }
   _dashboardWidgetEntries = applyDashboardWidgetOverridesToEntries(entries)
+  entriesPromise = Promise.resolve(_dashboardWidgetEntries)
+  cache.clear()
+  resolveRegistrationWaiters(_dashboardWidgetEntries)
 }
 
 export function getDashboardWidgets(): Entry[] {
@@ -28,8 +43,15 @@ export function getDashboardWidgets(): Entry[] {
 let entriesPromise: Promise<Entry[]> | null = null
 
 async function getEntries(): Promise<Entry[]> {
+  if (_dashboardWidgetEntries) {
+    return _dashboardWidgetEntries
+  }
   if (!entriesPromise) {
-    const promise = Promise.resolve().then(() => getDashboardWidgets())
+    const promise = typeof window !== 'undefined'
+      ? new Promise<Entry[]>((resolve) => {
+        registrationWaiters.push(resolve)
+      })
+      : Promise.resolve().then(() => getDashboardWidgets())
     entriesPromise = promise.catch((err) => {
       // Clear cache on error so next call can retry after registration
       if (entriesPromise === promise) {
@@ -41,10 +63,6 @@ async function getEntries(): Promise<Entry[]> {
   return entriesPromise
 }
 
-type LoadedWidgetModule = DashboardWidgetModule<any>
-
-const cache = new Map<string, Promise<LoadedWidgetModule>>()
-
 async function findEntry(loaderKey: string): Promise<Entry | undefined> {
   const entries = await getEntries()
   return entries.find((entry) => entry.key === loaderKey)

package/src/backend/injection/useInjectionDataWidgets.ts

@@ -2,7 +2,12 @@
 
 import * as React from 'react'
 import type { InjectionSpotId } from '@open-mercato/shared/modules/widgets/injection'
-import { loadInjectionDataWidgetsForSpot, type LoadedInjectionDataWidget } from '@open-mercato/shared/modules/widgets/injection-loader'
+import {
+  loadInjectionDataWidgetsForSpot,
+  getInjectionRegistryVersion,
+  subscribeToInjectionRegistryChanges,
+  type LoadedInjectionDataWidget,
+} from '@open-mercato/shared/modules/widgets/injection-loader'
 
 export function useInjectionDataWidgets(spotId: InjectionSpotId): {
   widgets: LoadedInjectionDataWidget[]
@@ -12,6 +17,17 @@ export function useInjectionDataWidgets(spotId: InjectionSpotId): {
   const [widgets, setWidgets] = React.useState<LoadedInjectionDataWidget[]>([])
   const [isLoading, setIsLoading] = React.useState(true)
   const [error, setError] = React.useState<string | null>(null)
+  // Re-load when the injection registry is (re-)populated. With the async
+  // ClientBootstrap, registration can land after this hook first runs; the
+  // version bump triggers a reload so injected menus/columns/fields appear
+  // without requiring an unrelated re-render.
+  const [registryVersion, setRegistryVersion] = React.useState(() => getInjectionRegistryVersion())
+
+  React.useEffect(() => {
+    return subscribeToInjectionRegistryChanges(() => {
+      setRegistryVersion(getInjectionRegistryVersion())
+    })
+  }, [])
 
   React.useEffect(() => {
     let mounted = true
@@ -35,7 +51,7 @@ export function useInjectionDataWidgets(spotId: InjectionSpotId): {
     return () => {
       mounted = false
     }
-  }, [spotId])
+  }, [spotId, registryVersion])
 
   return { widgets, isLoading, error }
 }