@wix/zero-config-implementation 1.59.0 → 1.60.0

package/package.json

@@ -4,7 +4,7 @@
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
-  "version": "1.59.0",
+  "version": "1.60.0",
   "description": "Core library for extracting component manifests from JS and CSS files",
   "type": "module",
   "main": "dist/index.js",
@@ -13,12 +13,6 @@
     ".": {
       "import": "./dist/index.js",
       "types": "./dist/index.d.ts"
-    },
-    "./jsx-runtime-loader": {
-      "import": "./dist/jsx-runtime-loader.js"
-    },
-    "./jsx-runtime-interceptor": {
-      "import": "./dist/jsx-runtime-interceptor.js"
     }
   },
   "scripts": {
@@ -85,5 +79,5 @@
       ]
     }
   },
-  "falconPackageHash": "3762cf48efbed240f0744fc678539dd9e70ea2021dc6171c70fb714b"
+  "falconPackageHash": "773d13f574bda240374a4a8e8347af42c6022e40e7d842e98c15a6cf"
 }

package/src/component-renderer.ts

@@ -10,18 +10,22 @@
  * 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.
+ * 1. **Node.js ESM loader hook** — registered by `registerJsxLoaderHook()` in
+ *    `module-loader.ts` before any user bundle is imported. Redirects
+ *    `react/jsx-runtime` and `react/jsx-dev-runtime` bare-specifier imports to
+ *    an in-memory `data:` URL interceptor that reads mutable state from
+ *    `globalThis`. This handles pre-built ESM bundles with static
+ *    `import ... from 'react/jsx-runtime'` at the top.
  *
  * 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.
  *
- * 3. **CJS module export patch** — Pre-built CJS bundles call
- *    `require('react/jsx-runtime')` at runtime, bypassing the Vite alias. We use
- *    `createRequire` to obtain the real CJS module objects and temporarily replace
- *    their `jsx`/`jsxs`/`jsxDEV` exports during rendering. This is safe because
- *    CJS module exports are mutable (`writable: true`).
+ * 3. **CJS module export patch** — Pre-built CJS bundles that call
+ *    `require('react/jsx-runtime')` at runtime. We use `createRequire` to obtain
+ *    the real CJS module objects and temporarily replace 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
@@ -38,20 +42,19 @@
  *
  * ## 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)
+ * - `React.createElement` — classic JSX transform (monkey-patched)
+ * - `jsx` / `jsxs` / `jsxDEV` from `react/jsx-runtime` and `react/jsx-dev-runtime` —
+ *   new JSX transform, intercepted via the ESM loader hook's `data:` URL interceptor
+ * - `jsx` / `jsxs` / `jsxDEV` on the real CJS module objects (monkey-patched for
+ *   CJS consumers)
  *
  * ## Known Limitations
  *
- * 1. **Global state** - During render, we temporarily replace element creation
+ * 1. **Global state** — During render, we temporarily replace element creation
  *    functions globally. This is not thread-safe and could cause issues if multiple
  *    renders happen concurrently. Interceptors are restored in a finally block.
  *
- * 2. **React version compatibility** - This approach may break with future React versions
+ * 2. **React version compatibility** — This approach may break with future React versions
  *    if the internal rendering pipeline changes. Tested with React 18.x.
  *
  * @module component-renderer

package/src/jsx-runtime-interceptor.ts

@@ -1,42 +1,29 @@
 /**
- * Interceptable JSX Runtime
+ * JSX Interception
  *
- * This module wraps React's jsx-runtime and allows dynamic interception
- * of jsx/jsxs/jsxDEV calls. This is necessary because ESM imports are immutable,
- * so we can't monkey-patch react/jsx-runtime directly.
+ * Provides mutable interception of React's jsx-runtime functions and registers
+ * the Node.js ESM loader hook that redirects `react/jsx-runtime` and
+ * `react/jsx-dev-runtime` imports to an in-memory data: URL interceptor.
  *
- * ## Usage contexts
- *
- * This module runs in two contexts that must share mutable state:
- *
- * 1. **Vite alias (tests)** — aliased to `react/jsx-runtime` in vite.config.ts
- * 2. **Node.js ESM loader hook (CLI)** — redirected via `module.register()` in cli.ts
- *
- * In both cases the interceptor may be loaded as a separate module instance from
- * the copy bundled into the main dist files. To ensure `setJsxInterceptors()`
- * (called from component-renderer.ts) affects the `jsx`/`jsxs` that user
- * components call, mutable state lives on `globalThis` via `Symbol.for()`.
+ * Mutable state lives on `globalThis` via `Symbol.for()` so that the bundled
+ * copy of this module and the data: URL interceptor module share the same state.
  */
 
-import { createRequire } from 'node:module'
+import { createRequire, register } from 'node:module'
 
 // Use require() to load the real React modules, bypassing Vite alias / ESM loader hook
 const require = createRequire(import.meta.url)
 const originalRuntime = require('react/jsx-runtime') as typeof import('react/jsx-runtime')
 const originalDevRuntime = require('react/jsx-dev-runtime') as typeof import('react/jsx-dev-runtime')
 
-// Re-export Fragment unchanged
-export const Fragment = originalRuntime.Fragment
-
 // Type for jsxDEV function
 type JsxDevFn = typeof originalDevRuntime.jsxDEV
 
 // ─────────────────────────────────────────────────────────────────────────────
 // Shared state via globalThis
 //
-// The bundled copy (inside cli.js / index.js) and the standalone copy (loaded
-// by the ESM loader hook or Vite alias) must share the same mutable state.
-// Symbol.for() guarantees a process-wide singleton key.
+// The bundled copy (inside index.js) and the data: URL interceptor module share
+// mutable state via globalThis. Symbol.for() guarantees a process-wide key.
 // ─────────────────────────────────────────────────────────────────────────────
 
 const STATE_KEY = Symbol.for('zero-config:jsx-interceptor')
@@ -87,60 +74,94 @@ export function getOriginals() {
   }
 }
 
-// Export interceptable jsx/jsxs - these delegate to the shared state
-export function jsx(
-  type: Parameters<typeof originalRuntime.jsx>[0],
-  props: Parameters<typeof originalRuntime.jsx>[1],
-  key?: Parameters<typeof originalRuntime.jsx>[2],
-) {
-  const state = getState()
-  if (state.isInsideOriginal) {
-    return originalRuntime.jsx(type, props, key)
-  }
-  state.isInsideOriginal = true
-  try {
-    return state.currentJsx(type, props, key)
-  } finally {
-    state.isInsideOriginal = false
-  }
+// ─────────────────────────────────────────────────────────────────────────────
+// Hook Registration
+// ─────────────────────────────────────────────────────────────────────────────
+
+const LOADER_REGISTERED_KEY = Symbol.for('zero-config:jsx-loader-registered')
+const ORIGINALS_KEY = Symbol.for('zero-config:jsx-originals')
+
+interface JsxOriginals {
+  Fragment: typeof originalRuntime.Fragment
+  jsx: typeof originalRuntime.jsx
+  jsxs: typeof originalRuntime.jsxs
+  jsxDEV: JsxDevFn
 }
 
-export function jsxs(
-  type: Parameters<typeof originalRuntime.jsxs>[0],
-  props: Parameters<typeof originalRuntime.jsxs>[1],
-  key?: Parameters<typeof originalRuntime.jsxs>[2],
-) {
-  const state = getState()
-  if (state.isInsideOriginal) {
-    return originalRuntime.jsxs(type, props, key)
-  }
-  state.isInsideOriginal = true
-  try {
-    return state.currentJsxs(type, props, key)
-  } finally {
-    state.isInsideOriginal = false
+/**
+ * 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.
+ *
+ * Must be called before any dynamic `import()` of user components.
+ * Safe to call multiple times; subsequent calls are no-ops.
+ */
+export function registerJsxLoaderHook(): void {
+  const globalRecord = globalThis as unknown as Record<symbol, unknown>
+  if (globalRecord[LOADER_REGISTERED_KEY]) return
+  globalRecord[LOADER_REGISTERED_KEY] = true
+
+  const cjsRequire = createRequire(import.meta.url)
+  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)
+  globalRecord[ORIGINALS_KEY] = {
+    Fragment: realRuntime.Fragment,
+    jsx: realRuntime.jsx,
+    jsxs: realRuntime.jsxs,
+    jsxDEV: realDevRuntime.jsxDEV,
+  } satisfies JsxOriginals
+
+  const interceptorSource = `
+const ORIGINALS_KEY = Symbol.for('zero-config:jsx-originals');
+const STATE_KEY = Symbol.for('zero-config:jsx-interceptor');
+const originals = globalThis[ORIGINALS_KEY];
+function getState() {
+  if (!globalThis[STATE_KEY]) {
+    globalThis[STATE_KEY] = {
+      currentJsx: originals.jsx, currentJsxs: originals.jsxs,
+      currentJsxDEV: originals.jsxDEV, isInsideOriginal: false,
+    };
   }
+  return globalThis[STATE_KEY];
+}
+export const Fragment = originals.Fragment;
+export function jsx(type, props, key) {
+  const state = getState();
+  if (state.isInsideOriginal) return originals.jsx(type, props, key);
+  state.isInsideOriginal = true;
+  try { return state.currentJsx(type, props, key); }
+  finally { state.isInsideOriginal = false; }
 }
+export function jsxs(type, props, key) {
+  const state = getState();
+  if (state.isInsideOriginal) return originals.jsxs(type, props, key);
+  state.isInsideOriginal = true;
+  try { return state.currentJsxs(type, props, key); }
+  finally { state.isInsideOriginal = false; }
+}
+export function jsxDEV(type, props, key, isStaticChildren, source, self) {
+  const state = getState();
+  if (state.isInsideOriginal) return originals.jsxDEV(type, props, key, isStaticChildren, source, self);
+  state.isInsideOriginal = true;
+  try { return state.currentJsxDEV(type, props, key, isStaticChildren, source, self); }
+  finally { state.isInsideOriginal = false; }
+}
+`
 
-// Export interceptable jsxDEV for development mode
-export function jsxDEV(
-  type: Parameters<JsxDevFn>[0],
-  props: Parameters<JsxDevFn>[1],
-  key: Parameters<JsxDevFn>[2],
-  isStaticChildren: Parameters<JsxDevFn>[3],
-  source: Parameters<JsxDevFn>[4],
-  self: Parameters<JsxDevFn>[5],
-) {
-  const state = getState()
-  // Prevent recursion when React's internal jsxDEV calls other jsx functions
-  if (state.isInsideOriginal) {
-    return originalDevRuntime.jsxDEV(type, props, key, isStaticChildren, source, self)
-  }
+  const interceptorDataUrl = `data:text/javascript,${encodeURIComponent(interceptorSource)}`
 
-  state.isInsideOriginal = true
-  try {
-    return state.currentJsxDEV(type, props, key, isStaticChildren, source, self)
-  } finally {
-    state.isInsideOriginal = false
+  const loaderSource = `
+const INTERCEPTOR_URL = ${JSON.stringify(interceptorDataUrl)};
+export async function resolve(specifier, context, nextResolve) {
+  if (specifier === 'react/jsx-runtime' || specifier === 'react/jsx-dev-runtime') {
+    return { shortCircuit: true, url: INTERCEPTOR_URL };
   }
+  return nextResolve(specifier, context);
+}
+`
+
+  register(`data:text/javascript,${encodeURIComponent(loaderSource)}`)
 }

package/src/module-loader.ts

@@ -5,6 +5,8 @@ import React from 'react'
 import type { ComponentType } from 'react'
 import ReactDOM from 'react-dom'
 
+import { registerJsxLoaderHook } from './jsx-runtime-interceptor'
+
 /**
  * Structured failure from `loadModule` when both ESM import and CJS require fail.
  * Carries each error separately so callers can report them independently.
@@ -38,10 +40,10 @@ function setupWindowGlobals(): void {
  * Attempts to load a module, first via ESM `import()`, then via CJS `require`.
  *
  * ESM `import()` is preferred because it participates in the ESM loader hook
- * pipeline (registered via `module.register()` in the CLI). This is required
- * for JSX interception to work — the loader hook redirects `react/jsx-runtime`
- * to the interceptable version. CJS `require()` bypasses ESM hooks even when
- * loading ESM modules (Node 22+), so it's only used as a fallback.
+ * pipeline. The hook is registered here before the import, redirecting
+ * `react/jsx-runtime` to the interceptable version. CJS `require()` bypasses
+ * ESM hooks even when loading ESM modules (Node 22+), so it's only used as a
+ * fallback.
  *
  * @param entryPath - Absolute path to the module entry point.
  * @returns A `ResultAsync` containing the module exports on success.
@@ -53,6 +55,8 @@ export function loadModule(entryPath: string): ResultAsync<Record<string, unknow
   }
 
   setupWindowGlobals()
+  registerJsxLoaderHook()
+
   return ResultAsync.fromPromise(
     import(entryPath) as Promise<Record<string, unknown>>,
     (esmErr): Error => (esmErr instanceof Error ? esmErr : new Error(String(esmErr))),

package/vite.config.ts

@@ -27,8 +27,6 @@ export default defineConfig(({ mode }) => ({
     lib: {
       entry: {
         index: resolve(__dirname, 'src/index.ts'),
-        'jsx-runtime-interceptor': resolve(__dirname, 'src/jsx-runtime-interceptor.ts'),
-        'jsx-runtime-loader': resolve(__dirname, 'src/jsx-runtime-loader.ts'),
       },
       formats: ['es'],
     },
@@ -52,11 +50,6 @@ export default defineConfig(({ mode }) => ({
   resolve: {
     // Ensure Node.js-specific export conditions are used when bundling for Node
     conditions: ['node', 'import', 'module', 'default'],
-    alias: {
-      // Alias jsx-runtime to our interceptable version for tests
-      'react/jsx-runtime': resolve(__dirname, 'src/jsx-runtime-interceptor.ts'),
-      'react/jsx-dev-runtime': resolve(__dirname, 'src/jsx-runtime-interceptor.ts'),
-    },
   },
   test: {
     globals: true,

package/dist/jsx-runtime-interceptor.d.ts

@@ -1,58 +0,0 @@
-import { ExoticComponent } from 'react';
-import { JSXElementConstructor } from 'react';
-import { ReactElement } from 'react';
-import { reactJsxDevRuntime } from 'react/jsx-dev-runtime';
-import { reactJsxRuntime } from 'react/jsx-runtime';
-import { ReactNode } from 'react';
-
-export declare const Fragment: ExoticComponent<    {
-children?: ReactNode | undefined;
-}>;
-
-/**
- * Gets the original jsx/jsxs/jsxDEV functions.
- */
-export declare function getOriginals(): {
-    jsx: jsx;
-    jsxs: jsxs;
-    jsxDEV: jsxDEV;
-};
-
-export declare function jsx(type: Parameters<typeof originalRuntime.jsx>[0], props: Parameters<typeof originalRuntime.jsx>[1], key?: Parameters<typeof originalRuntime.jsx>[2]): ReactElement<any, string | JSXElementConstructor<any>>;
-
-export declare function jsxDEV(type: Parameters<JsxDevFn>[0], props: Parameters<JsxDevFn>[1], key: Parameters<JsxDevFn>[2], isStaticChildren: Parameters<JsxDevFn>[3], source: Parameters<JsxDevFn>[4], self: Parameters<JsxDevFn>[5]): ReactElement<any, string | JSXElementConstructor<any>>;
-
-declare type JsxDevFn = typeof originalDevRuntime.jsxDEV;
-
-export declare function jsxs(type: Parameters<typeof originalRuntime.jsxs>[0], props: Parameters<typeof originalRuntime.jsxs>[1], key?: Parameters<typeof originalRuntime.jsxs>[2]): ReactElement<any, string | JSXElementConstructor<any>>;
-
-declare const originalDevRuntime: reactJsxDevRuntime;
-
-/**
- * Interceptable JSX Runtime
- *
- * This module wraps React's jsx-runtime and allows dynamic interception
- * of jsx/jsxs/jsxDEV calls. This is necessary because ESM imports are immutable,
- * so we can't monkey-patch react/jsx-runtime directly.
- *
- * ## Usage contexts
- *
- * This module runs in two contexts that must share mutable state:
- *
- * 1. **Vite alias (tests)** — aliased to `react/jsx-runtime` in vite.config.ts
- * 2. **Node.js ESM loader hook (CLI)** — redirected via `module.register()` in cli.ts
- *
- * In both cases the interceptor may be loaded as a separate module instance from
- * the copy bundled into the main dist files. To ensure `setJsxInterceptors()`
- * (called from component-renderer.ts) affects the `jsx`/`jsxs` that user
- * components call, mutable state lives on `globalThis` via `Symbol.for()`.
- */
-declare const originalRuntime: reactJsxRuntime;
-
-/**
- * Sets custom jsx/jsxs/jsxDEV implementations for interception.
- * Call with no arguments to restore originals.
- */
-export declare function setJsxInterceptors(jsx?: typeof originalRuntime.jsx, jsxs?: typeof originalRuntime.jsxs, jsxDEV?: JsxDevFn): void;
-
-export { }

package/dist/jsx-runtime-interceptor.js

@@ -1,63 +0,0 @@
-import { createRequire as j } from "node:module";
-const o = j(import.meta.url), t = o("react/jsx-runtime"), u = o("react/jsx-dev-runtime"), f = t.Fragment, a = /* @__PURE__ */ Symbol.for("zero-config:jsx-interceptor");
-function x() {
-  const n = globalThis;
-  return n[a] || (n[a] = {
-    currentJsx: t.jsx,
-    currentJsxs: t.jsxs,
-    currentJsxDEV: u.jsxDEV,
-    isInsideOriginal: !1
-  }), n[a];
-}
-function m(n, r, i) {
-  const s = x();
-  s.currentJsx = n ?? t.jsx, s.currentJsxs = r ?? t.jsxs, s.currentJsxDEV = i ?? u.jsxDEV;
-}
-function E() {
-  return {
-    jsx: t.jsx,
-    jsxs: t.jsxs,
-    jsxDEV: u.jsxDEV
-  };
-}
-function I(n, r, i) {
-  const s = x();
-  if (s.isInsideOriginal)
-    return t.jsx(n, r, i);
-  s.isInsideOriginal = !0;
-  try {
-    return s.currentJsx(n, r, i);
-  } finally {
-    s.isInsideOriginal = !1;
-  }
-}
-function O(n, r, i) {
-  const s = x();
-  if (s.isInsideOriginal)
-    return t.jsxs(n, r, i);
-  s.isInsideOriginal = !0;
-  try {
-    return s.currentJsxs(n, r, i);
-  } finally {
-    s.isInsideOriginal = !1;
-  }
-}
-function d(n, r, i, s, c, l) {
-  const e = x();
-  if (e.isInsideOriginal)
-    return u.jsxDEV(n, r, i, s, c, l);
-  e.isInsideOriginal = !0;
-  try {
-    return e.currentJsxDEV(n, r, i, s, c, l);
-  } finally {
-    e.isInsideOriginal = !1;
-  }
-}
-export {
-  f as Fragment,
-  E as getOriginals,
-  I as jsx,
-  d as jsxDEV,
-  O as jsxs,
-  m as setJsxInterceptors
-};

package/dist/jsx-runtime-loader.d.ts

@@ -1,27 +0,0 @@
-declare type NextResolve = (specifier: string, context: ResolveContext) => Promise<ResolveResult>;
-
-export declare function resolve(specifier: string, context: ResolveContext, nextResolve: NextResolve): Promise<ResolveResult>;
-
-declare interface ResolveContext {
-    parentURL?: string;
-}
-
-/**
- * Node.js ESM Customization Hook
- *
- * Redirects ESM `import 'react/jsx-runtime'` and `import 'react/jsx-dev-runtime'`
- * to the interceptable jsx-runtime-interceptor module.
- *
- * Registered via `module.register()` in the CLI before loading user components.
- * This ensures that dynamically imported user components use the interceptable
- * jsx-runtime, enabling prop tracking and element tracing.
- *
- * CJS `require()` calls are not affected by this hook — the interceptor uses
- * `createRequire` internally, so it always loads the real React runtime.
- */
-declare interface ResolveResult {
-    url: string;
-    shortCircuit?: boolean;
-}
-
-export { }

package/dist/jsx-runtime-loader.js

@@ -1,7 +0,0 @@
-const n = import.meta.url.replace(/jsx-runtime-loader\.js$/, "jsx-runtime-interceptor.js");
-async function u(r, t, e) {
-  return r === "react/jsx-runtime" || r === "react/jsx-dev-runtime" ? { shortCircuit: !0, url: n } : e(r, t);
-}
-export {
-  u as resolve
-};

package/src/jsx-runtime-loader.ts

@@ -1,38 +0,0 @@
-/**
- * Node.js ESM Customization Hook
- *
- * Redirects ESM `import 'react/jsx-runtime'` and `import 'react/jsx-dev-runtime'`
- * to the interceptable jsx-runtime-interceptor module.
- *
- * Registered via `module.register()` in the CLI before loading user components.
- * This ensures that dynamically imported user components use the interceptable
- * jsx-runtime, enabling prop tracking and element tracing.
- *
- * CJS `require()` calls are not affected by this hook — the interceptor uses
- * `createRequire` internally, so it always loads the real React runtime.
- */
-
-// Compute sibling file URL at runtime — avoids Vite's static `new URL()` asset transform
-const INTERCEPTOR_URL = import.meta.url.replace(/jsx-runtime-loader\.js$/, 'jsx-runtime-interceptor.js')
-
-interface ResolveResult {
-  url: string
-  shortCircuit?: boolean
-}
-
-interface ResolveContext {
-  parentURL?: string
-}
-
-type NextResolve = (specifier: string, context: ResolveContext) => Promise<ResolveResult>
-
-export async function resolve(
-  specifier: string,
-  context: ResolveContext,
-  nextResolve: NextResolve,
-): Promise<ResolveResult> {
-  if (specifier === 'react/jsx-runtime' || specifier === 'react/jsx-dev-runtime') {
-    return { shortCircuit: true, url: INTERCEPTOR_URL }
-  }
-  return nextResolve(specifier, context)
-}