@wix/zero-config-implementation 1.49.0 → 1.50.0

package/package.json

@@ -4,7 +4,7 @@
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
-  "version": "1.49.0",
+  "version": "1.50.0",
   "description": "Core library for extracting component manifests from JS and CSS files",
   "type": "module",
   "main": "dist/index.js",
@@ -85,5 +85,5 @@
       ]
     }
   },
-  "falconPackageHash": "54ff02d476b1c16a5fa7e9f8dbb1eb74a6011ac62dcee23ecc6301be"
+  "falconPackageHash": "15350286a134883c84b7fb2738d2553d8eedbec024f0d1cb444a40ca"
 }

package/src/component-renderer.ts

@@ -7,7 +7,8 @@
  *
  * ## Interception Strategy
  *
- * Three complementary layers ensure interception regardless of how JSX is compiled:
+ * Four complementary layers ensure interception regardless of how JSX is compiled
+ * AND regardless of how many React module instances are loaded in the process:
  *
  * 1. **Vite alias** — `react/jsx-runtime` is aliased to `jsx-runtime-interceptor.ts`
  *    in vite.config.ts. This handles ESM imports resolved at build time.
@@ -22,12 +23,24 @@
  *    their `jsx`/`jsxs`/`jsxDEV` exports during rendering. This is safe because
  *    CJS module exports are mutable (`writable: true`).
  *
+ * 4. **User-bundle React patch** — When the renderer is hosted inside a process
+ *    that bundled its own React (e.g. `@wix/cli` ships a baked-in copy of
+ *    `react.production.min.js`), the user's compiled component bundle still does
+ *    its own `import j from "react"` and Node resolves that from the bundle's
+ *    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.
+ *
  * ## Intercepted Functions
  *
  * - `React.createElement` - Classic JSX transform (monkey-patched)
  * - `jsx` / `jsxs` from `react/jsx-runtime` - New JSX transform via interceptor module
  * - `jsx` / `jsxs` / `jsxDEV` on the real CJS `react/jsx-runtime` and
  *   `react/jsx-dev-runtime` module objects (monkey-patched for CJS consumers)
+ * - The same exports on the React modules resolved from the user component
+ *   bundle's own location (when a different module instance from the host's)
  *
  * ## Known Limitations
  *
@@ -119,6 +132,10 @@ function createInterceptor(
  * @param componentProps - Props to pass to the component
  * @param listeners - Listeners to notify on each DOM element creation
  * @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).
  * @returns Static HTML string with trace IDs on DOM elements
  *
  * @example
@@ -135,6 +152,7 @@ export function renderWithExtractors(
   componentProps: unknown,
   listeners: CreateElementListener[],
   store: ExtractorStore,
+  compiledEntryPath?: string,
 ): string {
   let nextId = 0
   const getNextId = () => `t${++nextId}`
@@ -153,6 +171,43 @@ export function renderWithExtractors(
   const origCjsJsxs = cjsRuntime.jsxs
   const origCjsJsxDEV = cjsDevRuntime.jsxDEV
 
+  // 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.
+  let userReact: { createElement: ElementCreator } | undefined
+  let userJsxRuntime: Record<string, unknown> | undefined
+  let userJsxDevRuntime: Record<string, unknown> | undefined
+  let origUserCreateElement: ElementCreator | undefined
+  let origUserJsx: unknown
+  let origUserJsxs: unknown
+  let origUserJsxDEV: unknown
+
+  if (compiledEntryPath) {
+    try {
+      const userRequire = createRequire(compiledEntryPath)
+      const candidateReact = userRequire('react') as { createElement: ElementCreator }
+      if (candidateReact !== (React as unknown as typeof candidateReact)) {
+        userReact = candidateReact
+        origUserCreateElement = candidateReact.createElement
+      }
+      const candidateJsx = userRequire('react/jsx-runtime') as Record<string, unknown>
+      if (candidateJsx !== cjsRuntime) {
+        userJsxRuntime = candidateJsx
+        origUserJsx = candidateJsx.jsx
+        origUserJsxs = candidateJsx.jsxs
+      }
+      const candidateJsxDev = userRequire('react/jsx-dev-runtime') as Record<string, unknown>
+      if (candidateJsxDev !== cjsDevRuntime) {
+        userJsxDevRuntime = candidateJsxDev
+        origUserJsxDEV = candidateJsxDev.jsxDEV
+      }
+    } catch {
+      // user bundle path doesn't resolve react locally — nothing to patch
+    }
+  }
+
   // Create interceptors
   const interceptedCreateElement = createInterceptor(
     originalCreateElement as ElementCreator,
@@ -178,6 +233,18 @@ export function renderWithExtractors(
     cjsRuntime.jsxs = interceptedJsxs
     cjsDevRuntime.jsxDEV = interceptedJsxDEV
 
+    // Patch user-bundle React modules when they are distinct instances
+    if (userReact) {
+      userReact.createElement = interceptedCreateElement
+    }
+    if (userJsxRuntime) {
+      userJsxRuntime.jsx = interceptedJsx
+      userJsxRuntime.jsxs = interceptedJsxs
+    }
+    if (userJsxDevRuntime) {
+      userJsxDevRuntime.jsxDEV = interceptedJsxDEV
+    }
+
     const element = React.createElement(Component, componentProps as Record<string, unknown>)
     return renderToStaticMarkup(element)
   } finally {
@@ -188,5 +255,16 @@ export function renderWithExtractors(
     cjsRuntime.jsx = origCjsJsx
     cjsRuntime.jsxs = origCjsJsxs
     cjsDevRuntime.jsxDEV = origCjsJsxDEV
+    // Restore user-bundle React modules if they were patched
+    if (userReact && origUserCreateElement) {
+      userReact.createElement = origUserCreateElement
+    }
+    if (userJsxRuntime) {
+      userJsxRuntime.jsx = origUserJsx
+      userJsxRuntime.jsxs = origUserJsxs
+    }
+    if (userJsxDevRuntime) {
+      userJsxDevRuntime.jsxDEV = origUserJsxDEV
+    }
   }
 }

package/src/index.ts

@@ -126,6 +126,7 @@ export function extractComponentManifestResult(
             !!failure,
             report,
             options,
+            compiledEntryPath,
           )
           if (!processResult.ok) {
             return errAsync(processResult.error)

package/src/information-extractors/react/extractors/core/runner.ts

@@ -41,6 +41,11 @@ export interface RunExtractorsOptions {
  * @param componentInfo - TypeScript-extracted component information
  * @param component - The React component to render
  * @param extractors - Array of extractors to run
+ * @param options - Optional caller-provided options (e.g. wrapper HOC)
+ * @param compiledEntryPath - Optional path to the user's compiled bundle. When
+ *        provided, the renderer also patches the React module that the bundle
+ *        resolves from its own `node_modules`, so duplicate React instances
+ *        (e.g. when the host bundles its own React) still get intercepted.
  * @returns Extraction results including HTML, store, and element tree
  */
 export function runExtractors(
@@ -48,6 +53,7 @@ export function runExtractors(
   component: ComponentType<unknown>,
   extractors: ReactExtractor[],
   options?: RunExtractorsOptions,
+  compiledEntryPath?: string,
 ): ExtractionResult {
   // Create shared store
   const store = new ExtractorStore()
@@ -80,7 +86,7 @@ export function runExtractors(
   const renderComponent = options?.wrapper ? options.wrapper(context.component) : context.component
 
   // Phase 2: Render with element creation interception
-  const html = renderWithExtractors(renderComponent, context.props, listeners, store)
+  const html = renderWithExtractors(renderComponent, context.props, listeners, store, compiledEntryPath)
 
   // Phase 3: renderComplete - extractors can post-process
   for (const ext of extractors) {

package/src/manifest-pipeline.ts

@@ -59,6 +59,10 @@ export type ProcessComponentResult =
  *
  * When the component was loaded but render/extractors throw, returns `ok: false`
  * with an {@link IoError} — Tier-1 callers should turn that into a failed `Result`.
+ *
+ * @param compiledEntryPath - Optional path to the user's compiled JS entry. When
+ *        provided, the renderer also patches the React module resolved from the
+ *        bundle's location on disk to handle duplicate React instances.
  */
 export function processComponent(
   componentInfo: ComponentInfo,
@@ -67,6 +71,7 @@ export function processComponent(
   loaderHasError: boolean,
   report: (error: ExtractionError) => void,
   options?: RunExtractorsOptions,
+  compiledEntryPath?: string,
 ): ProcessComponentResult {
   const { componentName } = componentInfo
 
@@ -107,7 +112,7 @@ export function processComponent(
       const { extractor: propTracker, state } = createPropTrackerExtractor()
       const cssExtractor = createCssPropertiesExtractor()
 
-      const result = runExtractors(componentInfo, Component, [propTracker, cssExtractor], options)
+      const result = runExtractors(componentInfo, Component, [propTracker, cssExtractor], options, compiledEntryPath)
       html = result.html
       extractedElements = result.elements