@wix/zero-config-implementation 1.77.0 → 1.78.0

package/dist/{index-CuKmaUAA.js → index-DAAmOM1c.js}

@@ -1,4 +1,4 @@
-import { g as x } from "./index-DRWoSsTZ.js";
+import { g as x } from "./index--6I20lGB.js";
 function h(r, a) {
   for (var i = 0; i < a.length; i++) {
     const o = a[i];

package/dist/index.js

@@ -1,4 +1,4 @@
-import { B as t, D as e, E as o, I as n, N as c, P as l, R as i, a as p, V as E, b as m, c as x, d as f, e as d, f as u, h as C, i as I, j as k, k as y, l as A, m as D, n as P, o as R, p as h, q as B, r as M, s as T, t as b, w } from "./index-DRWoSsTZ.js";
+import { B as t, D as e, E as o, I as n, N as c, P as l, R as i, a as p, V as E, b as m, c as x, d as f, e as d, f as u, h as C, i as I, j as k, k as y, l as A, m as D, n as P, o as R, p as h, q as B, r as M, s as T, t as b, w } from "./index--6I20lGB.js";
 import "react";
 export {
   t as BaseError,

package/package.json

@@ -4,7 +4,7 @@
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
-  "version": "1.77.0",
+  "version": "1.78.0",
   "description": "Core library for extracting component manifests from JS and CSS files",
   "type": "module",
   "main": "dist/index.js",
@@ -39,7 +39,7 @@
     }
   },
   "dependencies": {
-    "@wix/builder-services-wrapper": "^1.42.0",
+    "@wix/builder-services-wrapper": "^1.56.0",
     "@wix/react-component-schema": "1.7.0"
   },
   "devDependencies": {
@@ -82,5 +82,5 @@
       ]
     }
   },
-  "falconPackageHash": "29046e5eac674ef42dc21f8449f7f0b5c99691e835215a1133464500"
+  "falconPackageHash": "7ea33e17604c8d13038271d43e3350d8bb9d9531ec0110efca2a7144"
 }

package/src/component-renderer.ts

@@ -76,6 +76,7 @@ import {
   setCreateElementInterceptor,
   setJsxInterceptors,
 } from './react-runtime-interceptor'
+import { getActiveReactModule, setActiveReactModule } from './react-runtime-loader'
 
 export const TRACE_ATTR = 'data-trace-id'
 
@@ -132,6 +133,84 @@ function createInterceptor(
   }
 }
 
+// ─────────────────────────────────────────────────────────────────────────────
+// Dispatcher bridge
+// ─────────────────────────────────────────────────────────────────────────────
+
+const REACT_18_INTERNALS_KEY = '__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED'
+const REACT_19_INTERNALS_KEY = '__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE'
+
+function readReactInternals(reactModule: unknown): Record<string, unknown> | undefined {
+  if (typeof reactModule !== 'object' || reactModule === null) {
+    return undefined
+  }
+
+  const reactRecord = reactModule as Record<string, unknown>
+  const internals = reactRecord[REACT_18_INTERNALS_KEY] ?? reactRecord[REACT_19_INTERNALS_KEY]
+  return typeof internals === 'object' && internals !== null ? (internals as Record<string, unknown>) : undefined
+}
+
+/**
+ * Forwards the host React's hook dispatcher to the user React so host-bound hook
+ * callers (e.g. WixServicesWrapper) resolve the dispatcher the user's react-dom
+ * installs during SSR. Returns a function that restores the host React.
+ */
+function bridgeHostDispatcherToUserReact(hostReact: unknown, userReact: unknown): () => void {
+  const hostInternals = readReactInternals(hostReact)
+  const userInternals = readReactInternals(userReact)
+  if (!hostInternals || !userInternals) {
+    return () => {}
+  }
+
+  // React 18 exposes a `{ current }` holder captured by reference at load time, so
+  // forward its `current` to the user holder rather than swapping the holder itself.
+  if (hostInternals.ReactCurrentDispatcher && userInternals.ReactCurrentDispatcher) {
+    const hostDispatcherHolder = hostInternals.ReactCurrentDispatcher as Record<string, unknown>
+    const userDispatcherHolder = userInternals.ReactCurrentDispatcher as Record<string, unknown>
+    if (hostDispatcherHolder === userDispatcherHolder) {
+      return () => {}
+    }
+
+    const previousDescriptor = Object.getOwnPropertyDescriptor(hostDispatcherHolder, 'current')
+    Object.defineProperty(hostDispatcherHolder, 'current', {
+      configurable: true,
+      get: () => userDispatcherHolder.current,
+      set: (dispatcher) => {
+        userDispatcherHolder.current = dispatcher
+      },
+    })
+    return () => {
+      Object.defineProperty(
+        hostDispatcherHolder,
+        'current',
+        previousDescriptor ?? { configurable: true, enumerable: true, value: null, writable: true },
+      )
+    }
+  }
+
+  // React 19 keeps the dispatcher directly on the internals object as `H`, so
+  // forward that property to the user internals.
+  if ('H' in userInternals) {
+    const previousDescriptor = Object.getOwnPropertyDescriptor(hostInternals, 'H')
+    Object.defineProperty(hostInternals, 'H', {
+      configurable: true,
+      get: () => userInternals.H,
+      set: (dispatcher) => {
+        userInternals.H = dispatcher
+      },
+    })
+    return () => {
+      Object.defineProperty(
+        hostInternals,
+        'H',
+        previousDescriptor ?? { configurable: true, enumerable: true, value: undefined, writable: true },
+      )
+    }
+  }
+
+  return () => {}
+}
+
 // ─────────────────────────────────────────────────────────────────────────────
 // Renderer
 // ─────────────────────────────────────────────────────────────────────────────
@@ -248,6 +327,12 @@ export function renderWithExtractors(
   const interceptedJsxs = createInterceptor(originalJsxs as ElementCreator, listeners, getNextId, store)
   const interceptedJsxDEV = createInterceptor(originalJsxDEV as ElementCreator, listeners, getNextId, store)
 
+  // The shim reads globalThis[REACT_KEY] on every hook call, so pointing it at
+  // userReact ensures ESM hooks use the same dispatcher that SSR drives.
+  const previousActiveReactModule = getActiveReactModule()
+  // Restores the host React's hook dispatcher, bridged to the user React below.
+  let restoreHostDispatcher: () => void = () => {}
+
   try {
     // @ts-expect-error Monkey-patch createElement for default-import callers
     React.createElement = interceptedCreateElement
@@ -268,6 +353,9 @@ export function renderWithExtractors(
     // Patch user-bundle React modules when they are distinct instances
     if (userReact) {
       userReact.createElement = interceptedCreateElement
+      setActiveReactModule(userReact)
+      // Host-bound hook callers (e.g. WixServicesWrapper) need the user React's dispatcher too.
+      restoreHostDispatcher = bridgeHostDispatcherToUserReact(React, userReact)
     }
     if (userJsxRuntime) {
       userJsxRuntime.jsx = interceptedJsx
@@ -281,6 +369,8 @@ export function renderWithExtractors(
     const element = renderingReact.createElement(Component, componentProps as Record<string, unknown>)
     return (userRenderToStaticMarkup ?? renderToStaticMarkup)(element)
   } finally {
+    restoreHostDispatcher()
+    setActiveReactModule(previousActiveReactModule)
     // Restore originals
     // @ts-expect-error Restore monkey-patched createElement
     React.createElement = originalCreateElement

package/src/react-runtime-loader.ts

@@ -8,6 +8,7 @@ import type { RefElementModule } from './ref-elements/types'
 const JSX_INTERCEPTOR_STATE_KEY = 'zero-config:jsx-interceptor'
 const JSX_ORIGINALS_KEY = 'zero-config:jsx-originals'
 const REACT_ORIGINALS_KEY = 'zero-config:react-originals'
+const REACT_ORIGINALS_SYMBOL = Symbol.for(REACT_ORIGINALS_KEY)
 const LOADER_REGISTERED_KEY = Symbol.for('zero-config:jsx-loader-registered')
 const RUNTIME_STATE_KEY = Symbol.for('zero-config:ref-element-runtime-state')
 const REF_ELEMENT_LOADER_REQUEST_TIMEOUT_MS = 1_000
@@ -128,9 +129,9 @@ export function ensureReactRuntimeLoader(): void {
       jsxDEV: reactDevRuntime.jsxDEV,
       jsxs: reactRuntime.jsxs,
     }
-    ;(globalThis as Record<PropertyKey, unknown>)[Symbol.for(REACT_ORIGINALS_KEY)] = reactModule
+    ;(globalThis as Record<PropertyKey, unknown>)[REACT_ORIGINALS_SYMBOL] = reactModule
 
-    const reactModuleUrl = `data:text/javascript,${encodeURIComponent(buildReactModuleShimSource(Object.keys(reactModule)))}`
+    const reactModuleUrl = `data:text/javascript,${encodeURIComponent(buildReactModuleShimSource(reactModule))}`
     const interceptorModuleUrl = `data:text/javascript,${encodeURIComponent(buildJsxRuntimeInterceptorSource())}`
     const loaderSource = buildReactRuntimeLoaderSource({
       interceptorModuleUrl,
@@ -151,6 +152,14 @@ export function ensureReactRuntimeLoader(): void {
   }
 }
 
+export function getActiveReactModule(): unknown {
+  return (globalThis as Record<symbol, unknown>)[REACT_ORIGINALS_SYMBOL]
+}
+
+export function setActiveReactModule(reactModule: unknown): void {
+  ;(globalThis as Record<symbol, unknown>)[REACT_ORIGINALS_SYMBOL] = reactModule
+}
+
 export function readRegisteredRefElementModuleUrlsForTests(): string[] {
   return [...readRefElementRuntimeState().registeredEsmModulesByResolvedUrl.keys()]
 }
@@ -483,14 +492,20 @@ function isComponent(value: unknown): boolean {
   return typeof value === 'object' && value !== null && '$$typeof' in value
 }
 
-function buildReactModuleShimSource(reactExportNames: string[]): string {
-  const reactExportLines = reactExportNames
+function buildReactModuleShimSource(reactModule: Record<string, unknown>): string {
+  const reactExportLines = Object.keys(reactModule)
     .map((exportName) => {
       if (exportName === 'createElement') {
         return `export function createElement() {
   var state = globalThis[STATE_KEY];
   if (state && state.currentCreateElement) return state.currentCreateElement.apply(null, arguments);
-  return reactModule.createElement.apply(null, arguments);
+  return globalThis[REACT_KEY].createElement.apply(null, arguments);
+}`
+      }
+
+      if (exportName.startsWith('use') && typeof reactModule[exportName] === 'function') {
+        return `export function ${exportName}() {
+  return globalThis[REACT_KEY].${exportName}.apply(null, arguments);
 }`
       }
 
@@ -502,7 +517,7 @@ function buildReactModuleShimSource(reactExportNames: string[]): string {
 var REACT_KEY = Symbol.for(${JSON.stringify(REACT_ORIGINALS_KEY)});
 var STATE_KEY = Symbol.for(${JSON.stringify(JSX_INTERCEPTOR_STATE_KEY)});
 var reactModule = globalThis[REACT_KEY];
-export default reactModule;
+export default new Proxy({}, { get: function(_, prop) { return globalThis[REACT_KEY][prop]; } });
 ${reactExportLines}
 `
 }