@open-mercato/ui 0.6.8-develop.6930.1.1e5976efc3 → 0.6.8-develop.6940.1.177ea30c6e

package/src/backend/injection/__tests__/useRegisteredComponent.remount.test.tsx

@@ -0,0 +1,96 @@
+/** @jest-environment jsdom */
+
+import * as React from 'react'
+import { fireEvent, render } from '@testing-library/react'
+import type { ComponentOverride } from '@open-mercato/shared/modules/widgets/component-registry'
+import { ComponentOverrideProvider } from '../ComponentOverrideProvider'
+import { useRegisteredComponent } from '../useRegisteredComponent'
+
+const COMPONENT_ID = 'section:test.host.form'
+
+function Section({ children }: { children: React.ReactNode }) {
+  return <>{children}</>
+}
+
+function Host() {
+  const Resolved = useRegisteredComponent<{ children: React.ReactNode }>(COMPONENT_ID, Section)
+  return (
+    <Resolved>
+      <form>
+        <input id="email" name="email" defaultValue="" />
+      </form>
+    </Resolved>
+  )
+}
+
+/**
+ * `overrides` arrives as a brand-new array once the async override bundle
+ * resolves, exactly the way ComponentOverridesBootstrap hands it over after its
+ * dynamic import settles.
+ */
+function App({ overrides }: { overrides: ComponentOverride[] }) {
+  return (
+    <ComponentOverrideProvider overrides={overrides}>
+      <Host />
+    </ComponentOverrideProvider>
+  )
+}
+
+function readEmail(): HTMLInputElement {
+  return document.querySelector('#email') as HTMLInputElement
+}
+
+function typeEmail(value: string): HTMLInputElement {
+  const email = readEmail()
+  fireEvent.change(email, { target: { value } })
+  expect(email.value).toBe(value)
+  return email
+}
+
+describe('useRegisteredComponent — a late override registry must not discard host state', () => {
+  it('keeps typed input when the override bundle resolves with no override for this id', () => {
+    const { rerender } = render(<App overrides={[]} />)
+    const email = typeEmail('admin@acme.com')
+
+    // Same (empty) override set, fresh array identity — the registry revision bumps.
+    rerender(<App overrides={[]} />)
+
+    expect(readEmail()).toBe(email)
+    expect(readEmail().value).toBe('admin@acme.com')
+  })
+
+  it('keeps typed input when unrelated overrides register', () => {
+    const { rerender } = render(<App overrides={[]} />)
+    const email = typeEmail('admin@acme.com')
+
+    const unrelated: ComponentOverride[] = [{
+      target: { componentId: 'section:some.other.component' },
+      priority: 0,
+      metadata: { module: 'other' },
+      wrapper: (Original) => Original,
+    }]
+    rerender(<App overrides={unrelated} />)
+
+    expect(readEmail()).toBe(email)
+    expect(readEmail().value).toBe('admin@acme.com')
+  })
+
+  it('still applies a wrapper registered for this id', () => {
+    const withBanner: ComponentOverride[] = [{
+      target: { componentId: COMPONENT_ID },
+      priority: 0,
+      metadata: { module: 'other' },
+      wrapper: (Original) => {
+        const Wrapped = (props: Record<string, unknown>) => (
+          <div data-testid="wrapper-banner">{React.createElement(Original as React.ComponentType<Record<string, unknown>>, props)}</div>
+        )
+        return Wrapped as typeof Original
+      },
+    }]
+
+    const { getByTestId } = render(<App overrides={withBanner} />)
+
+    expect(getByTestId('wrapper-banner')).toBeTruthy()
+    expect(readEmail()).toBeTruthy()
+  })
+})

package/src/backend/injection/useRegisteredComponent.tsx

@@ -2,6 +2,7 @@
 
 import * as React from 'react'
 import type { ComponentType } from 'react'
+import type { ComponentOverride } from '@open-mercato/shared/modules/widgets/component-registry'
 import { getComponentEntry, getComponentOverrides } from '@open-mercato/shared/modules/widgets/component-registry'
 import { useOverrideRegistryRevision, useOverrideUserFeatures } from './ComponentOverrideProvider'
 import { createLogger } from '@open-mercato/shared/lib/logger'
@@ -31,46 +32,93 @@ class ReplacementErrorBoundary extends React.Component<
   }
 }
 
-export function useRegisteredComponent<TProps>(
+type Resolution<TProps> = {
+  original: ComponentType<TProps> | null
+  wrapped: ComponentType<TProps> | null
+  transforms: Array<(props: TProps) => TProps>
+  replacementOverride: ComponentOverride | null
+  replacementModule: string
+}
+
+function resolveComponent<TProps>(
   componentId: string,
-  fallback?: ComponentType<TProps>,
-): ComponentType<TProps> {
-  const userFeatures = useOverrideUserFeatures()
-  const overrideRevision = useOverrideRegistryRevision()
-  return React.useMemo(() => {
-    const entry = getComponentEntry(componentId)
-    const original = (entry?.component as ComponentType<TProps> | undefined) ?? fallback ?? null
-    if (!original) {
-      if (process.env.NODE_ENV !== 'production' && !fallback) {
-        logger.warn('Component is not registered', { componentId })
-      }
-      const Missing = () => null
-      return Missing as ComponentType<TProps>
-    }
-    const overrides = getComponentOverrides(componentId, userFeatures)
-    const replacementOverrides = overrides.filter((override) => 'replacement' in override)
-    if (process.env.NODE_ENV !== 'production' && replacementOverrides.length > 1) {
-      logger.warn('Multiple replacements registered; highest-priority replacement is applied', { componentId })
+  fallback: ComponentType<TProps> | undefined,
+  userFeatures: readonly string[],
+): Resolution<TProps> {
+  const entry = getComponentEntry(componentId)
+  const original = (entry?.component as ComponentType<TProps> | undefined) ?? fallback ?? null
+  if (!original) {
+    if (process.env.NODE_ENV !== 'production' && !fallback) {
+      logger.warn('Component is not registered', { componentId })
     }
+    return { original: null, wrapped: null, transforms: [], replacementOverride: null, replacementModule: 'unknown' }
+  }
 
-    let replacement: ComponentType<TProps> | null = null
-    let replacementOverride: (typeof overrides)[number] | null = null
-    const wrappers: Array<(Original: ComponentType<TProps>) => ComponentType<TProps>> = []
-    const transforms: Array<(props: TProps) => TProps> = []
+  const overrides = getComponentOverrides(componentId, userFeatures)
+  const replacementOverrides = overrides.filter((override) => 'replacement' in override)
+  if (process.env.NODE_ENV !== 'production' && replacementOverrides.length > 1) {
+    logger.warn('Multiple replacements registered; highest-priority replacement is applied', { componentId })
+  }
 
-    for (const override of overrides) {
-      if ('replacement' in override) {
-        replacement = override.replacement as ComponentType<TProps>
-        replacementOverride = override
-      }
-      if ('wrapper' in override) wrappers.push(override.wrapper as (Original: ComponentType<TProps>) => ComponentType<TProps>)
-      if ('propsTransform' in override) transforms.push(override.propsTransform as (props: TProps) => TProps)
+  let replacement: ComponentType<TProps> | null = null
+  let replacementOverride: ComponentOverride | null = null
+  const wrappers: Array<(Original: ComponentType<TProps>) => ComponentType<TProps>> = []
+  const transforms: Array<(props: TProps) => TProps> = []
+
+  for (const override of overrides) {
+    if ('replacement' in override) {
+      replacement = override.replacement as ComponentType<TProps>
+      replacementOverride = override
     }
+    if ('wrapper' in override) wrappers.push(override.wrapper as (Original: ComponentType<TProps>) => ComponentType<TProps>)
+    if ('propsTransform' in override) transforms.push(override.propsTransform as (props: TProps) => TProps)
+  }
+
+  const base = replacement ?? original
+  const wrapped = wrappers.reduce<ComponentType<TProps>>((acc, wrapper) => wrapper(acc), base)
+
+  return {
+    original,
+    wrapped,
+    transforms,
+    replacementOverride,
+    replacementModule: replacementOverride?.metadata?.module ?? 'unknown',
+  }
+}
+
+/**
+ * The returned component's identity must depend only on `componentId` and
+ * `fallback` — never on the override registry.
+ *
+ * Overrides arrive asynchronously: `ComponentOverridesBootstrap` dynamically
+ * imports the generated override module and hands the provider a fresh array,
+ * which bumps the registry revision some time after first paint. Resolving the
+ * component in a `useMemo` keyed on that revision handed callers a brand-new
+ * function on every bump, so React saw a different element type at that
+ * position and unmounted the whole subtree — discarding its DOM and state. On
+ * the login form that threw away credentials the user had already typed
+ * (#5037), and the same hazard applied to every host of a registered section.
+ *
+ * Resolution therefore happens *inside* a stable component. When the revision
+ * carries no override for this id, `wrapped` keeps its previous identity and
+ * React reconciles in place; only a genuine replacement or wrapper swaps the
+ * rendered type, where a remount is the correct behaviour.
+ */
+export function useRegisteredComponent<TProps>(
+  componentId: string,
+  fallback?: ComponentType<TProps>,
+): ComponentType<TProps> {
+  return React.useMemo(() => {
+    const Registered = (props: TProps) => {
+      const userFeatures = useOverrideUserFeatures()
+      const overrideRevision = useOverrideRegistryRevision()
+      const { original, wrapped, transforms, replacementOverride, replacementModule } = React.useMemo(
+        () => resolveComponent<TProps>(componentId, fallback, userFeatures),
+        [overrideRevision, userFeatures],
+      )
 
-    const base = replacement ?? original
-    const wrapped = wrappers.reduce<ComponentType<TProps>>((acc, wrapper) => wrapper(acc), base)
+      if (!original || !wrapped) return null
 
-    const Resolved = (props: TProps) => {
       const transformed = transforms.reduce((current, transform) => transform(current), props)
       const Fallback = React.createElement(original as React.ComponentType<Record<string, unknown>>, transformed as Record<string, unknown>)
       if (
@@ -80,7 +128,7 @@ export function useRegisteredComponent<TProps>(
       ) {
         const validation = replacementOverride.propsSchema.safeParse(transformed)
         if (!validation.success) {
-          logger.error('Props schema validation failed for replacement', { componentId, module: replacementOverride.metadata?.module ?? 'unknown', issues: validation.error.format() })
+          logger.error('Props schema validation failed for replacement', { componentId, module: replacementModule, issues: validation.error.format() })
           return Fallback
         }
       }
@@ -88,7 +136,6 @@ export function useRegisteredComponent<TProps>(
         <ReplacementErrorBoundary
           fallback={Fallback}
           onError={(error) => {
-            const replacementModule = overrides.find((override) => 'replacement' in override)?.metadata?.module ?? 'unknown'
             logger.error('Component replacement failed', { componentId, module: replacementModule, err: error })
           }}
         >
@@ -97,9 +144,9 @@ export function useRegisteredComponent<TProps>(
       )
     }
 
-    Resolved.displayName = `RegisteredComponent(${componentId})`
-    return Resolved
-  }, [componentId, fallback, overrideRevision, userFeatures])
+    Registered.displayName = `RegisteredComponent(${componentId})`
+    return Registered
+  }, [componentId, fallback])
 }
 
 export default useRegisteredComponent