@wix/zero-config-implementation 1.68.0 → 1.70.0

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-BewAGOQY.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-DnxDZx90.js";
 import "react";
 export {
   t as BaseError,

package/package.json

@@ -4,7 +4,7 @@
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
-  "version": "1.68.0",
+  "version": "1.70.0",
   "description": "Core library for extracting component manifests from JS and CSS files",
   "type": "module",
   "main": "dist/index.js",
@@ -81,5 +81,5 @@
       ]
     }
   },
-  "falconPackageHash": "5848ef0051ff536666dd46c6264f765b40f280afa13b5d120028a1a2"
+  "falconPackageHash": "f7f9d07ab6659b53c4a239fd98c2c3f0e24345cb528a5f5108c7e6ba"
 }

package/src/component-renderer.ts

@@ -19,7 +19,10 @@
  *
  * 2. **`React.createElement` monkey-patch** — Classic JSX transform and explicit
  *    `React.createElement()` calls are intercepted by temporarily replacing the
- *    function on the React module object.
+ *    function on the React module object. The ESM loader hook (point 1) also
+ *    intercepts the `react` bare specifier itself, so Rspack/webpack bundles that
+ *    use `import * as React from 'react'` and call `React.createElement` are also
+ *    covered via the data: URL shim's state-aware wrapper.
  *
  * 3. **CJS module export patch** — Pre-built CJS bundles that call
  *    `require('react/jsx-runtime')` at runtime. We use `createRequire` to obtain
@@ -67,9 +70,12 @@ import { renderToStaticMarkup } from 'react-dom/server'
 
 import type { ExtractorStore } from './information-extractors/react/extractors/core/store'
 import type { CreateElementEvent } from './information-extractors/react/extractors/core/types'
-
-// Import the interceptor API - use direct path since vite alias doesn't apply to all packages
-import { getOriginals, setJsxInterceptors } from './jsx-runtime-interceptor'
+import {
+  getOriginalCreateElement,
+  getOriginals,
+  setCreateElementInterceptor,
+  setJsxInterceptors,
+} from './jsx-runtime-interceptor'
 
 export const TRACE_ATTR = 'data-trace-id'
 
@@ -165,7 +171,7 @@ export function renderWithExtractors(
   const getNextId = () => `t${++nextId}`
 
   // Store originals
-  const originalCreateElement = React.createElement
+  const originalCreateElement = getOriginalCreateElement() as ElementCreator
   const { jsx: originalJsx, jsxs: originalJsxs, jsxDEV: originalJsxDEV } = getOriginals()
 
   // Obtain real CJS module objects so we can patch them for pre-built CJS consumers
@@ -240,8 +246,11 @@ export function renderWithExtractors(
   const interceptedJsxDEV = createInterceptor(originalJsxDEV as ElementCreator, listeners, getNextId, store)
 
   try {
-    // @ts-expect-error Monkey-patch createElement
+    // @ts-expect-error Monkey-patch createElement for default-import callers
     React.createElement = interceptedCreateElement
+    // The data: URL react shim (registered by registerJsxLoaderHook) reads this state on every
+    // createElement call, covering Rspack/webpack bundles that use `import * as React from 'react'`.
+    setCreateElementInterceptor(interceptedCreateElement)
     // Use the interceptor API for jsx-runtime (includes jsxDEV for dev mode)
     setJsxInterceptors(
       interceptedJsx as typeof originalJsx,
@@ -270,7 +279,9 @@ export function renderWithExtractors(
     return (userRenderToStaticMarkup ?? renderToStaticMarkup)(element)
   } finally {
     // Restore originals
+    // @ts-expect-error Restore monkey-patched createElement
     React.createElement = originalCreateElement
+    setCreateElementInterceptor(null)
     setJsxInterceptors() // Restores to originals
     // Restore CJS module exports
     cjsRuntime.jsx = origCjsJsx

package/src/jsx-runtime-interceptor.ts

@@ -19,6 +19,14 @@ const originalDevRuntime = require('react/jsx-dev-runtime') as typeof import('re
 // Type for jsxDEV function
 type JsxDevFn = typeof originalDevRuntime.jsxDEV
 
+// biome-ignore lint/suspicious/noExplicitAny: broad function type matching React.createElement's signature
+type CreateElementFn = (...args: any[]) => unknown
+
+// Captured at module-init time for getOriginalCreateElement(); also reused in
+// registerJsxLoaderHook() to stash the full exports for the react data: URL shim.
+const cjsReact = require('react') as { createElement: CreateElementFn }
+const originalCreateElement: CreateElementFn = cjsReact.createElement
+
 // ─────────────────────────────────────────────────────────────────────────────
 // Shared state via globalThis
 //
@@ -33,6 +41,8 @@ interface JsxInterceptorState {
   currentJsxs: typeof originalRuntime.jsxs
   currentJsxDEV: JsxDevFn
   isInsideOriginal: boolean
+  /** Interceptor for React.createElement set during render; null when not intercepting. */
+  currentCreateElement: CreateElementFn | null
 }
 
 function getState(): JsxInterceptorState {
@@ -43,6 +53,7 @@ function getState(): JsxInterceptorState {
       currentJsxs: originalRuntime.jsxs,
       currentJsxDEV: originalDevRuntime.jsxDEV,
       isInsideOriginal: false,
+      currentCreateElement: null,
     }
   }
   return g[STATE_KEY]!
@@ -74,6 +85,27 @@ export function getOriginals() {
   }
 }
 
+/**
+ * Sets (or clears) the React.createElement interceptor used by the wrapper
+ * installed on the CJS react module by registerJsxLoaderHook.
+ *
+ * This handles ESM namespace imports (`import * as React from 'react'`) which
+ * snapshot the createElement reference at module-load time. Those snapshots
+ * point to the wrapper, which reads from this state on every call.
+ *
+ * Pass null to restore pass-through behaviour (wrapper delegates to original).
+ */
+export function setCreateElementInterceptor(fn: CreateElementFn | null): void {
+  getState().currentCreateElement = fn
+}
+
+/**
+ * Returns the pre-wrapper React.createElement captured at module-init time.
+ */
+export function getOriginalCreateElement(): CreateElementFn {
+  return originalCreateElement
+}
+
 // ─────────────────────────────────────────────────────────────────────────────
 // Hook Registration
 // ─────────────────────────────────────────────────────────────────────────────
@@ -88,10 +120,22 @@ interface JsxOriginals {
   jsxDEV: JsxDevFn
 }
 
+const REACT_ORIGINALS_KEY = Symbol.for('zero-config:react-originals')
+
 /**
- * Registers a Node.js ESM loader hook that redirects `react/jsx-runtime` and
- * `react/jsx-dev-runtime` imports to an in-memory interceptor built from
- * `data:` URLs — no separate files required, safe for bundled consumers.
+ * Registers a Node.js ESM loader hook that redirects `react/jsx-runtime`,
+ * `react/jsx-dev-runtime`, and `react` imports to in-memory `data:` URL
+ * interceptors — no separate files required, safe for bundled consumers.
+ *
+ * Intercepting `react` itself is necessary for bundled components (e.g. from
+ * @wix/site-ui) that use `import * as React from 'react'` (Rspack/webpack style)
+ * and call `React.createElement` through the namespace object. Node.js snapshots
+ * named CJS exports into the namespace at first-load time; since Vitest loads
+ * react before our module runs, the snapshot always contains the unwrapped
+ * original. The loader hook fires for NEWLY-loaded modules (i.e., the user bundle
+ * and its dependencies), redirecting `react` to a data: shim that wraps
+ * `createElement` with our state-based interceptor while delegating everything
+ * else to the real react instance.
  *
  * Must be called before any dynamic `import()` of user components.
  * Safe to call multiple times; subsequent calls are no-ops.
@@ -105,8 +149,8 @@ export function registerJsxLoaderHook(): void {
   const realRuntime = cjsRequire('react/jsx-runtime') as typeof originalRuntime
   const realDevRuntime = cjsRequire('react/jsx-dev-runtime') as typeof originalDevRuntime
 
-  // Stash originals so the data: interceptor module can read them without needing
-  // createRequire (data: modules have no filesystem context for CJS resolution)
+  // Stash jsx-runtime originals so the data: interceptor module can read them
+  // without needing createRequire (data: modules have no filesystem context)
   globalRecord[ORIGINALS_KEY] = {
     Fragment: realRuntime.Fragment,
     jsx: realRuntime.jsx,
@@ -114,6 +158,36 @@ export function registerJsxLoaderHook(): void {
     jsxDEV: realDevRuntime.jsxDEV,
   } satisfies JsxOriginals
 
+  // Stash the full react module so the react data: shim can re-export everything
+  const cjsReactExports = cjsRequire('react') as Record<string, unknown>
+  globalRecord[REACT_ORIGINALS_KEY] = cjsReactExports
+
+  // Generate named re-export lines for every enumerable property of react.
+  // `createElement` gets a state-aware wrapper; everything else is a direct
+  // delegation to the real react so hooks and other internals work correctly.
+  const reactExportLines = Object.keys(cjsReactExports)
+    .map((key) => {
+      if (key === 'createElement') {
+        return `export function createElement() {
+  var state = globalThis[STATE_KEY];
+  if (state && state.currentCreateElement) return state.currentCreateElement.apply(null, arguments);
+  return r.createElement.apply(null, arguments);
+}`
+      }
+      return `export var ${key} = r.${key};`
+    })
+    .join('\n')
+
+  const reactShimSource = `
+var REACT_KEY = Symbol.for('zero-config:react-originals');
+var STATE_KEY = Symbol.for('zero-config:jsx-interceptor');
+var r = globalThis[REACT_KEY];
+export default r;
+${reactExportLines}
+`
+
+  const reactShimUrl = `data:text/javascript,${encodeURIComponent(reactShimSource)}`
+
   const interceptorSource = `
 const ORIGINALS_KEY = Symbol.for('zero-config:jsx-originals');
 const STATE_KEY = Symbol.for('zero-config:jsx-interceptor');
@@ -155,10 +229,14 @@ export function jsxDEV(type, props, key, isStaticChildren, source, self) {
 
   const loaderSource = `
 const INTERCEPTOR_URL = ${JSON.stringify(interceptorDataUrl)};
+const REACT_SHIM_URL = ${JSON.stringify(reactShimUrl)};
 export async function resolve(specifier, context, nextResolve) {
   if (specifier === 'react/jsx-runtime' || specifier === 'react/jsx-dev-runtime') {
     return { shortCircuit: true, url: INTERCEPTOR_URL };
   }
+  if (specifier === 'react') {
+    return { shortCircuit: true, url: REACT_SHIM_URL };
+  }
   return nextResolve(specifier, context);
 }
 `