@wix/zero-config-implementation 1.55.0 → 1.57.0

package/package.json

@@ -4,7 +4,7 @@
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
-  "version": "1.55.0",
+  "version": "1.57.0",
   "description": "Core library for extracting component manifests from JS and CSS files",
   "type": "module",
   "main": "dist/index.js",
@@ -44,7 +44,7 @@
     }
   },
   "dependencies": {
-    "@wix/react-component-schema": "1.3.0"
+    "@wix/react-component-schema": "1.4.0"
   },
   "devDependencies": {
     "@faker-js/faker": "^10.2.0",
@@ -85,5 +85,5 @@
       ]
     }
   },
-  "falconPackageHash": "c126e4444503e4c9964e0cc024f257ef35ce557a7de53b5e282ed85a"
+  "falconPackageHash": "4bf67c86fbcf48e852357c95257847e893cf3fac4b102da995bb8c5c"
 }

package/src/component-renderer.ts

@@ -30,8 +30,11 @@
  *    location on disk — a separate React module instance. To cover this case,
  *    the renderer also calls `createRequire(compiledEntryPath)` to obtain the
  *    user-bundle's React (and `react/jsx-runtime` / `react/jsx-dev-runtime`)
- *    and applies the same interceptors to those modules' exports. Identity
- *    guards keep the single-React case a no-op.
+ *    and applies the same interceptors to those modules' exports. It also
+ *    drives SSR with the user-bundle's `react-dom/server` so the dispatcher
+ *    lands on the user React's internals — the same instance the user
+ *    component reads from — and hooks like `useState` work naturally.
+ *    Identity guards keep the single-React case a no-op.
  *
  * ## Intercepted Functions
  *
@@ -134,8 +137,9 @@ function createInterceptor(
  * @param store - Shared ExtractorStore, included in each CreateElementEvent
  * @param compiledEntryPath - Optional path to the user's compiled bundle. When
  *        provided, the renderer additionally patches the React module instance
- *        that the bundle resolves from its own `node_modules` (covers cases
- *        where the host bundles its own React separately from the user's).
+ *        that the bundle resolves from its own `node_modules` and drives SSR
+ *        with the user-bundle's `react-dom/server` (required when the host
+ *        bundles its own React; otherwise hooks crash).
  * @returns Static HTML string with trace IDs on DOM elements
  *
  * @example
@@ -174,9 +178,11 @@ export function renderWithExtractors(
   // Resolve the user-bundle's React (and jsx-runtime variants) from the bundle's
   // own location on disk. When the host (e.g. a CLI) bundled its own React, this
   // resolves to a different module instance and must be patched separately.
-  // Identity guards below skip patching when the resolved modules are the same
-  // objects already covered by the host-side patches.
+  // When the user's React is distinct, also resolve its `react-dom/server` and
+  // drive SSR with that — the dispatcher then lands on the same React instance
+  // the user component reads from, so hooks like `useState` work naturally.
   let userReact: { createElement: ElementCreator } | undefined
+  let userRenderToStaticMarkup: typeof renderToStaticMarkup | undefined
   let userJsxRuntime: Record<string, unknown> | undefined
   let userJsxDevRuntime: Record<string, unknown> | undefined
   let origUserCreateElement: ElementCreator | undefined
@@ -191,6 +197,16 @@ export function renderWithExtractors(
       if (candidateReact !== (React as unknown as typeof candidateReact)) {
         userReact = candidateReact
         origUserCreateElement = candidateReact.createElement
+        try {
+          userRenderToStaticMarkup = (
+            userRequire('react-dom/server') as { renderToStaticMarkup: typeof renderToStaticMarkup }
+          ).renderToStaticMarkup
+        } catch (cause) {
+          throw new Error(
+            `Component bundle at "${compiledEntryPath}" resolves a different React than the host; install "react-dom" alongside "react" so SSR can run against the user's React.`,
+            { cause: cause as Error },
+          )
+        }
       }
       const candidateJsx = userRequire('react/jsx-runtime') as Record<string, unknown>
       if (candidateJsx !== cjsRuntime) {
@@ -203,8 +219,10 @@ export function renderWithExtractors(
         userJsxDevRuntime = candidateJsxDev
         origUserJsxDEV = candidateJsxDev.jsxDEV
       }
-    } catch {
-      // user bundle path doesn't resolve react locally — nothing to patch
+    } catch (error) {
+      // The wrapped react-dom error has userReact set; rethrow it.
+      // Otherwise the user bundle path doesn't resolve react locally — nothing to patch.
+      if (userReact) throw error
     }
   }
 
@@ -245,8 +263,9 @@ export function renderWithExtractors(
       userJsxDevRuntime.jsxDEV = interceptedJsxDEV
     }
 
-    const element = React.createElement(Component, componentProps as Record<string, unknown>)
-    return renderToStaticMarkup(element)
+    const renderingReact = userReact ?? React
+    const element = renderingReact.createElement(Component, componentProps as Record<string, unknown>)
+    return (userRenderToStaticMarkup ?? renderToStaticMarkup)(element)
   } finally {
     // Restore originals
     React.createElement = originalCreateElement