@wix/zero-config-implementation 1.67.0 → 1.69.0

package/dist/{index-BfHROU60.js → index-YRNaMIzt.js}

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

package/dist/index.d.ts

@@ -2364,6 +2364,7 @@ export declare interface PropInfo {
     resolvedType: ResolvedType;
     description?: string;
     deprecated?: boolean;
+    isStateTrigger?: boolean;
 }
 
 export declare interface PropSpyMeta {

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

package/package.json

@@ -4,7 +4,7 @@
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
-  "version": "1.67.0",
+  "version": "1.69.0",
   "description": "Core library for extracting component manifests from JS and CSS files",
   "type": "module",
   "main": "dist/index.js",
@@ -81,5 +81,5 @@
       ]
     }
   },
-  "falconPackageHash": "98b2efba108de51cc5bc3678f7b32253ba1a26e9b875964b6a8e725e"
+  "falconPackageHash": "8bdff6ff3fe92e412898e57920456ab68a81029f0885fed3b9a41283"
 }

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/converters/custom-states-builder.test.ts

@@ -1,11 +1,16 @@
 import { describe, expect, it } from 'vitest'
 import type { ExtractedElement } from '../information-extractors/react'
+import type { CoupledProp } from '../information-extractors/react/types'
 import { type CustomClassTrigger, buildCustomStatesBlock } from './custom-states-builder'
 
 function elementWithClass(classAttribute: string): ExtractedElement {
   return { attributes: { class: classAttribute } } as unknown as ExtractedElement
 }
 
+function booleanStateProp(name: string): CoupledProp {
+  return { name, type: 'boolean', isStateTrigger: true } as unknown as CoupledProp
+}
+
 function classTrigger(baseSelector: string, modifier: string, isCssModule = false): CustomClassTrigger {
   return { baseSelector, modifier, isCssModule }
 }
@@ -14,6 +19,7 @@ describe('buildCustomStatesBlock', () => {
   it('emits a custom-class state with className only (no props, no pseudoClass)', () => {
     const states = buildCustomStatesBlock({
       element: elementWithClass('custom-states'),
+      propTriggers: [],
       classTriggers: [classTrigger('.custom-states', 'custom-states--featured')],
     })
 
@@ -23,6 +29,7 @@ describe('buildCustomStatesBlock', () => {
   it('derives a multi-word state name from the modifier and capital-cases the displayName', () => {
     const states = buildCustomStatesBlock({
       element: elementWithClass('widget'),
+      propTriggers: [],
       classTriggers: [classTrigger('.widget', 'widget--in-progress')],
     })
 
@@ -35,6 +42,7 @@ describe('buildCustomStatesBlock', () => {
   it('does not apply a block-base class trigger to a BEM child element (plain CSS, exact match)', () => {
     const states = buildCustomStatesBlock({
       element: elementWithClass('custom-states__label'),
+      propTriggers: [],
       classTriggers: [classTrigger('.custom-states', 'custom-states--featured')],
     })
 
@@ -46,6 +54,7 @@ describe('buildCustomStatesBlock', () => {
     // base element — not a BEM child. (Regression: this used to be dropped as a child.)
     const states = buildCustomStatesBlock({
       element: elementWithClass('root__IWjkn wixui-test-comp-card test-comp-card'),
+      propTriggers: [],
       classTriggers: [classTrigger('.root', 'test-comp-card--featured', true)],
     })
 
@@ -55,15 +64,71 @@ describe('buildCustomStatesBlock', () => {
   it('still excludes a genuine BEM child (`root__label`) from a block-base trigger in a module', () => {
     const states = buildCustomStatesBlock({
       element: elementWithClass('root__label'),
+      propTriggers: [],
       classTriggers: [classTrigger('.root', 'test-comp-card--featured', true)],
     })
 
     expect(states).toBeUndefined()
   })
 
-  it('returns undefined when no class trigger targets the element', () => {
+  it('returns undefined when no trigger targets the element', () => {
+    const states = buildCustomStatesBlock({
+      element: elementWithClass('custom-states'),
+      propTriggers: [],
+      classTriggers: [],
+    })
+
+    expect(states).toBeUndefined()
+  })
+
+  it('emits a props-only state for a prop trigger with no matching class (no className synthesized)', () => {
+    const states = buildCustomStatesBlock({
+      element: elementWithClass('panel'),
+      propTriggers: [booleanStateProp('isExpanded')],
+      classTriggers: [],
+    })
+
+    expect(states).toEqual({
+      'is-expanded': { displayName: 'Is Expanded', props: { isExpanded: true } },
+    })
+  })
+
+  it('keeps the full prop name in the state key and displayName (no is/has stripping)', () => {
+    const states = buildCustomStatesBlock({
+      element: elementWithClass('widget'),
+      propTriggers: [booleanStateProp('isLoading')],
+      classTriggers: [],
+    })
+
+    expect(states?.['is-loading']).toEqual({
+      displayName: 'Is Loading',
+      props: { isLoading: true },
+    })
+  })
+
+  it('merges a prop trigger with a class trigger that resolves to the same state name', () => {
+    const states = buildCustomStatesBlock({
+      element: elementWithClass('prop-states'),
+      propTriggers: [booleanStateProp('isLoading')],
+      classTriggers: [classTrigger('.prop-states', 'prop-states--is-loading')],
+    })
+
+    expect(states).toEqual({
+      'is-loading': {
+        displayName: 'Is Loading',
+        className: 'prop-states--is-loading',
+        props: { isLoading: true },
+      },
+    })
+  })
+
+  it('ignores plain (non-ElementState) props and non-boolean state triggers', () => {
     const states = buildCustomStatesBlock({
       element: elementWithClass('custom-states'),
+      propTriggers: [
+        { name: 'showLabel', type: 'boolean' } as unknown as CoupledProp,
+        { name: 'variant', type: "'a' | 'b'", isStateTrigger: true } as unknown as CoupledProp,
+      ],
       classTriggers: [],
     })
 

package/src/converters/custom-states-builder.ts

@@ -1,20 +1,25 @@
 /**
  * Builds the custom (non-native) `states` entries for an element.
  *
- * The custom-class trigger feeds this: a `:global(.modifier)` class on the element
- * with no paired native pseudo (CSS extractor `getStateClasses`). It emits the
- * modifier as the state's editor-trigger `className`.
+ * Two triggers feed this, per the agreed design — props are looked at first:
+ *   - Prop        — a boolean prop wrapped in `ElementState<>` (TS extractor sets
+ *                    `isStateTrigger`) IS a custom state, emitting
+ *                    `props: { <prop>: true }`. The CSS is then searched for a
+ *                    class trigger matching that state's name — when found it
+ *                    supplies the editor-trigger `className`; otherwise the entry
+ *                    is props-only (`className` is never synthesized).
+ *   - Custom class — a `:global(.modifier)` class on the element with no paired
+ *                    native pseudo (CSS extractor `getStateClasses`) and not
+ *                    claimed by a prop trigger. Emits the modifier as a
+ *                    className-only state.
  *
  * Native states are built separately and take precedence on any key collision.
- *
- * Note: the prop trigger (`State<>` markers → `props` overrides) is intentionally
- * not handled here yet — it is deferred to a follow-up PR, gated on the upstream
- * marker-type agreement.
  */
 
 import type { States } from '@wix/react-component-schema'
+import { kebabCase } from 'case-anything'
 import type { StateClassRule } from '../information-extractors/css/types'
-import type { ExtractedElement } from '../information-extractors/react'
+import type { CoupledProp, ExtractedElement } from '../information-extractors/react'
 import { isGlobalSemanticClass, stateNameFromModifier } from '../utils/css-class'
 import { formatDisplayName } from './utils'
 
@@ -23,17 +28,44 @@ export type CustomClassTrigger = StateClassRule & { isCssModule: boolean }
 
 interface BuildCustomStatesParams {
   element: ExtractedElement
+  /** Prop triggers in scope for this element (root-level `ElementState<>` props; `[]` for inner elements). */
+  propTriggers: CoupledProp[]
   /** Custom-class triggers (modifiers with no paired native pseudo) across all CSS files. */
   classTriggers: CustomClassTrigger[]
 }
 
-export function buildCustomStatesBlock({ element, classTriggers }: BuildCustomStatesParams): States | undefined {
+export function buildCustomStatesBlock({
+  element,
+  propTriggers,
+  classTriggers,
+}: BuildCustomStatesParams): States | undefined {
   const states: States = {}
 
-  // Custom-class triggers that target this element.
+  // Class triggers that target this element, keyed by their derived state name,
+  // so prop triggers can look up their matching class.
+  const elementClassTriggers = new Map<string, CustomClassTrigger>()
   for (const rule of classTriggers) {
     if (!elementMatchesBase(element, rule.baseSelector, rule.isCssModule)) continue
-    const stateName = stateNameFromModifier(rule.modifier)
+    elementClassTriggers.set(stateNameFromModifier(rule.modifier), rule)
+  }
+
+  // Prop triggers first: each boolean `ElementState<>` prop is a custom state.
+  // Then search the CSS for the class trigger matching that state's name — when
+  // found it supplies the editor-trigger className; otherwise props-only.
+  for (const prop of propTriggers) {
+    if (!prop.isStateTrigger || prop.type !== 'boolean') continue
+    const stateName = stateNameFromProp(prop.name)
+    const matchingClassTrigger = elementClassTriggers.get(stateName)
+    states[stateName] = {
+      displayName: formatDisplayName(stateName),
+      ...(matchingClassTrigger && { className: matchingClassTrigger.modifier }),
+      props: { [prop.name]: true },
+    }
+  }
+
+  // Remaining class triggers — those not claimed by a prop — are className-only states.
+  for (const [stateName, rule] of elementClassTriggers) {
+    if (states[stateName] !== undefined) continue
     states[stateName] = {
       displayName: formatDisplayName(stateName),
       className: rule.modifier,
@@ -43,6 +75,16 @@ export function buildCustomStatesBlock({ element, classTriggers }: BuildCustomSt
   return Object.keys(states).length > 0 ? states : undefined
 }
 
+/**
+ * Derives the state name from a boolean prop by kebab-casing the full prop name
+ * (`isLoading` → `is-loading`, so the displayName reads "Is Loading"). The prop
+ * name is kept whole — no `is`/`has` prefix stripping — so the state key mirrors
+ * the prop that triggers it.
+ */
+function stateNameFromProp(propName: string): string {
+  return kebabCase(propName)
+}
+
 /**
  * Checks whether an element's rendered class list matches a simple single-class
  * base selector (e.g. `.root`, `.custom-states`).

package/src/converters/to-editor-component.ts

@@ -29,7 +29,7 @@ import { formatDisplayName } from './utils'
 
 /**
  * Merges native and custom state blocks. Native states take precedence on any
- * key collision (e.g. an author wrapping `isDisabled` in `State<>` does not
+ * key collision (e.g. an author wrapping `isDisabled` in `ElementState<>` does not
  * shadow the inferred native `disabled` state).
  */
 function mergeStates(native: States | undefined, custom: States | undefined): States | undefined {
@@ -75,7 +75,11 @@ function buildEditorElement(
   const rootStates = rootElement
     ? mergeStates(
         rootSemanticClass ? buildStatesBlock(rootElement, rootSemanticClass) : undefined,
-        buildCustomStatesBlock({ element: rootElement, classTriggers: customClassTriggers }),
+        buildCustomStatesBlock({
+          element: rootElement,
+          propTriggers: Object.values(component.props).filter((prop) => prop.isStateTrigger),
+          classTriggers: customClassTriggers,
+        }),
       )
     : undefined
 
@@ -147,9 +151,11 @@ function buildElements(
     const cssCustomProps = nearestCommonAncestorCustomProps.get(element.traceId) ?? {}
 
     const semanticClass = getSemanticBlockName(element)
+    // Inner-element custom states come from custom-class triggers only; prop
+    // triggers (`ElementState<>`) are component-level and attach to the root.
     const states = mergeStates(
       semanticClass ? buildStatesBlock(element, semanticClass) : undefined,
-      buildCustomStatesBlock({ element, classTriggers: customClassTriggers }),
+      buildCustomStatesBlock({ element, propTriggers: [], classTriggers: customClassTriggers }),
     )
 
     result[element.name] = {

package/src/information-extractors/ts/components.test.ts

@@ -0,0 +1,29 @@
+import path from 'node:path'
+import { describe, expect, it } from 'vitest'
+import { compileTsFile } from '../../ts-compiler'
+import { extractAllComponentInfo } from './components'
+
+const propTriggeredFixture = path.resolve(
+  __dirname,
+  '../../../../example-components/src/components/DesignStates/Custom/PropTriggered/WithMatchingClass/component.tsx',
+)
+
+describe('TS extractor — ElementState<> trigger detection', () => {
+  it('flags an ElementState<>-wrapped prop and unwraps its inner type', async () => {
+    const programResult = await compileTsFile(propTriggeredFixture)
+    expect(programResult.isOk()).toBe(true)
+    const program = programResult._unsafeUnwrap()
+
+    const components = extractAllComponentInfo(program, propTriggeredFixture)
+    const component = components.find((candidate) => candidate.componentName === 'PropStates')
+    expect(component).toBeDefined()
+
+    const isLoading = component!.props.isLoading
+    expect(isLoading.isStateTrigger).toBe(true)
+    // The `ElementState<boolean>` wrapper is unwrapped — the prop behaves as a plain boolean.
+    expect(isLoading.type).toBe('boolean')
+
+    // Plain booleans are never flagged as state triggers.
+    expect(component!.props.showLabel.isStateTrigger).toBeUndefined()
+  })
+})

package/src/information-extractors/ts/components.ts

@@ -208,16 +208,27 @@ function convertComponentDoc(doc: ComponentDoc, program: ts.Program, checker: ts
 
     // Resolve the type deeply
     let declaredTypeInfo: DeclaredTypeInfo | undefined
+    let stateTrigger: StateTriggerInfo | undefined
     if (propSymbol) {
       const decl = propSymbol.getDeclarations()?.[0]
       if (decl) {
-        declaredTypeInfo = getDeclaredTypeInfo(propSymbol, decl.getSourceFile(), checker)
+        const declSourceFile = decl.getSourceFile()
+        declaredTypeInfo = getDeclaredTypeInfo(propSymbol, declSourceFile, checker)
+        stateTrigger = detectStateTrigger(propSymbol, declSourceFile, checker)
       }
     }
 
-    const typeString = declaredTypeInfo?.name ?? propItem.type.name
+    // An `ElementState<Inner>` prop should behave as its inner type everywhere except
+    // for the `isStateTrigger` flag, so unwrap the inner type for `type` and resolution
+    // (and drop the `ElementState` declared symbol so it isn't mistaken for a semantic type).
+    const typeString = stateTrigger?.innerTypeName ?? declaredTypeInfo?.name ?? propItem.type.name
     const resolvedType = propType
-      ? resolveType({ type: propType, checker, typeString, declaredSymbol: declaredTypeInfo?.symbol })
+      ? resolveType({
+          type: propType,
+          checker,
+          typeString,
+          declaredSymbol: stateTrigger ? undefined : declaredTypeInfo?.symbol,
+        })
       : { kind: 'primitive' as const, value: propItem.type.name }
 
     // Convert default value
@@ -239,6 +250,7 @@ function convertComponentDoc(doc: ComponentDoc, program: ts.Program, checker: ts
       resolvedType,
       description: propItem.description || undefined,
       deprecated: tags?.deprecated !== undefined ? true : undefined,
+      isStateTrigger: stateTrigger ? true : undefined,
     }
   }
 
@@ -477,6 +489,63 @@ interface DeclaredTypeInfo {
   symbol?: ts.Symbol
 }
 
+interface StateTriggerInfo {
+  /** Text of the inner type argument, e.g. `'boolean'`. */
+  innerTypeName: string
+}
+
+/**
+ * Detects when a prop is declared with the `ElementState<>` marker type from
+ * `@wix/react-component-utils` (e.g. `isLoading?: ElementState<boolean>`), which opts
+ * the prop in as the trigger for a custom design state. Returns the inner type
+ * argument so callers can treat the prop as its underlying type. Returns
+ * `undefined` for any other declaration.
+ */
+function detectStateTrigger(
+  prop: ts.Symbol,
+  sourceFile: ts.SourceFile,
+  checker: ts.TypeChecker,
+): StateTriggerInfo | undefined {
+  const declaration = prop.getDeclarations()?.[0]
+  if (!declaration) return undefined
+
+  if (
+    !(ts.isPropertySignature(declaration) || ts.isPropertyDeclaration(declaration) || ts.isParameter(declaration)) ||
+    !declaration.type ||
+    !ts.isTypeReferenceNode(declaration.type) ||
+    !declaration.type.typeArguments ||
+    declaration.type.typeArguments.length !== 1
+  ) {
+    return undefined
+  }
+
+  const typeName = declaration.type.typeName
+  const identifier = ts.isIdentifier(typeName) ? typeName : typeName.right
+  if (identifier.text !== 'ElementState') return undefined
+  if (!isElementStateAliasFromUtils(identifier, checker)) return undefined
+
+  return { innerTypeName: declaration.type.typeArguments[0].getText(sourceFile) }
+}
+
+/**
+ * Confirms an identifier referencing `ElementState` resolves to the marker type
+ * alias exported by `@wix/react-component-utils`, rather than an unrelated local
+ * type that happens to be named `ElementState`.
+ */
+function isElementStateAliasFromUtils(identifier: ts.Identifier, checker: ts.TypeChecker): boolean {
+  let symbol = checker.getSymbolAtLocation(identifier)
+  if (!symbol) return false
+  if ((symbol.getFlags() & ts.SymbolFlags.Alias) !== 0) {
+    symbol = checker.getAliasedSymbol(symbol)
+  }
+
+  const declaration = symbol.getDeclarations()?.[0]
+  if (!declaration || !ts.isTypeAliasDeclaration(declaration)) return false
+  if (declaration.name.text !== 'ElementState') return false
+
+  return declaration.getSourceFile().fileName.includes('react-component-utils')
+}
+
 function getDeclaredTypeInfo(
   prop: ts.Symbol,
   sourceFile: ts.SourceFile,

package/src/information-extractors/ts/types.ts

@@ -51,6 +51,11 @@ export interface PropInfo {
   description?: string
   // Whether the prop is marked as deprecated via @deprecated JSDoc tag
   deprecated?: boolean
+  // True when the prop is wrapped in the `ElementState<>` marker type from
+  // @wix/react-component-utils, declaring it as the trigger for a custom design
+  // state. `type` and `resolvedType` reflect the unwrapped inner type, so the prop
+  // still behaves as a normal data prop everywhere else.
+  isStateTrigger?: boolean
 }
 
 export interface ComponentInfo {

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);
 }
 `