@wix/zero-config-implementation 1.71.0 → 1.73.0

package/src/information-extractors/react/utils/mock-generator.ts

@@ -4,6 +4,7 @@
  */
 
 import { faker } from '@faker-js/faker'
+import { createRefElementMarker, extractElementPropsPathFromPropPath } from '../../../ref-elements/path-utils'
 import type { ComponentInfo, DefaultValue, PropInfo, ResolvedType } from '../../ts/types'
 
 export const PRESETS_WRAPPER_CLASS_NAME = 'mock-presets-wrapper-probe'
@@ -41,16 +42,24 @@ export interface PropSpyRegistrar {
   registerFunction(path: string, propName: string, value: (...args: unknown[]) => unknown): void
 }
 
+interface GenerateMockPropsOptions {
+  eligibleRefElementPaths?: Set<string>
+}
+
 /**
  * Generate mock props object from ComponentInfo.
  * When a registrar is provided, string and number values are spy-instrumented
  * for DOM binding detection.
  */
-export function generateMockProps(componentInfo: ComponentInfo, registrar?: PropSpyRegistrar): Record<string, unknown> {
+export function generateMockProps(
+  componentInfo: ComponentInfo,
+  registrar?: PropSpyRegistrar,
+  options?: GenerateMockPropsOptions,
+): Record<string, unknown> {
   const mockProps: Record<string, unknown> = {}
 
   for (const [propName, propInfo] of Object.entries(componentInfo.props)) {
-    mockProps[propName] = generateMockValue(propInfo, propName, `props.${propName}`, registrar)
+    mockProps[propName] = generateMockValue(propInfo, propName, `props.${propName}`, registrar, options)
   }
 
   // Always inject wix renderer object; components that don't use it will ignore it
@@ -65,13 +74,19 @@ export function generateMockProps(componentInfo: ComponentInfo, registrar?: Prop
 /**
  * Generate a mock value based on PropInfo
  */
-function generateMockValue(propInfo: PropInfo, propName: string, path: string, registrar?: PropSpyRegistrar): unknown {
+function generateMockValue(
+  propInfo: PropInfo,
+  propName: string,
+  path: string,
+  registrar?: PropSpyRegistrar,
+  options?: GenerateMockPropsOptions,
+): unknown {
   // In plain mode (no registrar), honour default values for realistic rendering
   if (!registrar && propInfo.defaultValue !== undefined) {
     return extractDefaultValueValue(propInfo.defaultValue)
   }
 
-  return generateValueFromResolvedType(propInfo.resolvedType, propName, path, registrar)
+  return generateValueFromResolvedType(propInfo.resolvedType, propName, path, registrar, options)
 }
 
 function extractDefaultValueValue(defaultValue: DefaultValue): unknown {
@@ -86,6 +101,7 @@ function generateValueFromResolvedType(
   propName: string,
   path: string,
   registrar?: PropSpyRegistrar,
+  options?: GenerateMockPropsOptions,
 ): unknown {
   const kind = resolvedType.kind
 
@@ -103,16 +119,16 @@ function generateValueFromResolvedType(
       return resolvedType.value
 
     case 'union':
-      return generateUnionValue(resolvedType, propName, path, registrar)
+      return generateUnionValue(resolvedType, propName, path, registrar, options)
 
     case 'intersection':
-      return generateIntersectionValue(resolvedType, propName, path, registrar)
+      return generateIntersectionValue(resolvedType, propName, path, registrar, options)
 
     case 'array':
-      return generateArrayValue(resolvedType, propName, path, registrar)
+      return generateArrayValue(resolvedType, propName, path, registrar, options)
 
     case 'object':
-      return generateObjectValue(resolvedType, propName, path, registrar)
+      return generateObjectValue(resolvedType, propName, path, registrar, options)
 
     case 'enum':
       return generateEnumValue(resolvedType)
@@ -225,6 +241,7 @@ function generateUnionValue(
   propName: string,
   path: string,
   registrar?: PropSpyRegistrar,
+  options?: GenerateMockPropsOptions,
 ): unknown {
   const types = resolvedType.types ?? []
 
@@ -242,7 +259,7 @@ function generateUnionValue(
     candidateType.kind === 'primitive' && (candidateType.value === 'undefined' || candidateType.value === 'null')
   const representative = types.find((candidateType) => !isNullish(candidateType)) ?? types[0]
   if (representative) {
-    return generateValueFromResolvedType(representative, propName, path, registrar)
+    return generateValueFromResolvedType(representative, propName, path, registrar, options)
   }
 
   return `mock_${propName}_${faker.string.alphanumeric(6)}`
@@ -256,6 +273,7 @@ function generateIntersectionValue(
   propName: string,
   path: string,
   registrar?: PropSpyRegistrar,
+  options?: GenerateMockPropsOptions,
 ): unknown {
   const types = resolvedType.types ?? []
   const merged: Record<string, unknown> = {}
@@ -263,7 +281,7 @@ function generateIntersectionValue(
   for (const type of types) {
     if (type.kind === 'object' && type.properties) {
       for (const [key, propInfo] of Object.entries(type.properties)) {
-        merged[key] = generateMockValue(propInfo, `${propName}.${key}`, `${path}.${key}`, registrar)
+        merged[key] = generateMockValue(propInfo, `${propName}.${key}`, `${path}.${key}`, registrar, options)
       }
     }
   }
@@ -279,6 +297,7 @@ function generateArrayValue(
   propName: string,
   path: string,
   registrar?: PropSpyRegistrar,
+  options?: GenerateMockPropsOptions,
 ): unknown[] {
   const elementType = resolvedType.elementType
 
@@ -287,8 +306,8 @@ function generateArrayValue(
   }
 
   return [
-    generateValueFromResolvedType(elementType, `${propName}[0]`, `${path}[0]`, registrar),
-    generateValueFromResolvedType(elementType, `${propName}[1]`, `${path}[1]`, registrar),
+    generateValueFromResolvedType(elementType, `${propName}[0]`, `${path}[0]`, registrar, options),
+    generateValueFromResolvedType(elementType, `${propName}[1]`, `${path}[1]`, registrar, options),
   ]
 }
 
@@ -300,12 +319,18 @@ function generateObjectValue(
   propName: string,
   path: string,
   registrar?: PropSpyRegistrar,
+  options?: GenerateMockPropsOptions,
 ): Record<string, unknown> {
   const properties = resolvedType.properties ?? {}
   const obj: Record<string, unknown> = {}
 
   for (const [key, propInfo] of Object.entries(properties)) {
-    obj[key] = generateMockValue(propInfo, key, `${path}.${key}`, registrar)
+    obj[key] = generateMockValue(propInfo, key, `${path}.${key}`, registrar, options)
+  }
+
+  const elementPropsPath = extractElementPropsPathFromPropPath(path)
+  if (elementPropsPath && options?.eligibleRefElementPaths?.has(elementPropsPath)) {
+    obj.id = createRefElementMarker(elementPropsPath)
   }
 
   return obj

package/src/manifest-pipeline.ts

@@ -9,6 +9,7 @@ import {
   type RunExtractorsOptions,
   createCssPropertiesExtractor,
   createPropTrackerExtractor,
+  enrichContainerProperties,
   enrichGapProperties,
   runExtractors,
 } from './information-extractors/react'
@@ -17,6 +18,7 @@ import type { CoupledComponentInfo, CoupledProp, DOMBinding, TrackingStores } fr
 import { matchCssSelectors, parseCss } from './information-extractors/css'
 import type { CSSParserAPI } from './information-extractors/css'
 import { compileSass } from './information-extractors/css/sass-adapter'
+import { extractElementPropsPathFromPropPath, extractParentElementPropsPath } from './ref-elements/path-utils'
 
 import type { ComponentType } from 'react'
 
@@ -72,6 +74,7 @@ export function processComponent(
   report: (error: ExtractionError) => void,
   options?: RunExtractorsOptions,
   compiledEntryPath?: string,
+  eligiblePaths?: string[],
 ): ProcessComponentResult {
   const { componentName } = componentInfo
 
@@ -109,7 +112,7 @@ export function processComponent(
   // Render component with mock props and track prop flow (can fail)
   if (Component) {
     try {
-      const { extractor: propTracker, state } = createPropTrackerExtractor()
+      const { extractor: propTracker, state } = createPropTrackerExtractor({ eligiblePaths })
       const cssExtractor = createCssPropertiesExtractor()
 
       const result = runExtractors(componentInfo, Component, [propTracker, cssExtractor], options, compiledEntryPath)
@@ -161,7 +164,8 @@ export function processComponent(
   if (html && extractedElements.length > 0 && css.length > 0) {
     try {
       const matchResult = matchCssSelectors(html, extractedElements, css)
-      const gapEnrichedElements = enrichGapProperties(matchResult.elements)
+      const containerEnrichedElements = enrichContainerProperties(matchResult.elements)
+      const gapEnrichedElements = enrichGapProperties(containerEnrichedElements)
       enhancedInfo = {
         ...enhancedInfo,
         elements: convertElements(gapEnrichedElements),
@@ -196,7 +200,10 @@ export function processComponent(
 function buildCoupledProps(
   componentInfo: ComponentInfo,
   stores: TrackingStores,
-): { props: Record<string, CoupledProp>; innerElementProps: Map<string, Record<string, CoupledProp>> } {
+): {
+  props: Record<string, CoupledProp>
+  innerElementProps: Map<string, { elementPropsPath: string; props: Record<string, CoupledProp> }>
+} {
   const result: Record<string, CoupledProp> = {}
 
   for (const [name, info] of Object.entries(componentInfo.props)) {
@@ -214,8 +221,6 @@ function buildCoupledProps(
   return { props: result, innerElementProps }
 }
 
-const ELEMENT_PROPS_PREFIX = 'props.elementProps.'
-
 /**
  * Processes stores.propUsages entries with paths starting with "props.elementProps."
  * to extract inner element prop bindings grouped by elementId (traceId).
@@ -223,34 +228,36 @@ const ELEMENT_PROPS_PREFIX = 'props.elementProps.'
 function processElementPropsWrites(
   componentInfo: ComponentInfo,
   stores: TrackingStores,
-): Map<string, Record<string, CoupledProp>> {
-  const result = new Map<string, Record<string, CoupledProp>>()
+): Map<string, { elementPropsPath: string; props: Record<string, CoupledProp> }> {
+  const result = new Map<string, { elementPropsPath: string; props: Record<string, CoupledProp> }>()
 
   const elementPropsInfo = componentInfo.props.elementProps
   if (!elementPropsInfo) return result
 
   for (const [path, writeInfo] of stores.propUsages) {
-    if (!path.startsWith(ELEMENT_PROPS_PREFIX)) continue
+    const relativePath = extractElementPropsPathFromPropPath(path)
+    if (!relativePath) continue
 
     // Resolve the PropInfo for this leaf prop by walking the type tree
-    const relativePath = path.slice(ELEMENT_PROPS_PREFIX.length) // e.g. "navbar.items"
     const propInfo = resolveInnerPropInfo(elementPropsInfo, relativePath)
     if (!propInfo) continue
 
+    const elementPropsPath = extractParentElementPropsPath(relativePath)
+    if (!elementPropsPath) continue
     const bindings = extractBindings(writeInfo)
 
     // Group by elementId from the bindings
     for (const binding of bindings) {
       const { elementId } = binding
-      let propsForElement = result.get(elementId)
-      if (!propsForElement) {
-        propsForElement = {}
-        result.set(elementId, propsForElement)
+      let entry = result.get(elementId)
+      if (!entry) {
+        entry = { elementPropsPath, props: {} }
+        result.set(elementId, entry)
       }
 
       const leafName = propInfo.name
-      if (!propsForElement[leafName]) {
-        propsForElement[leafName] = {
+      if (!entry.props[leafName]) {
+        entry.props[leafName] = {
           ...propInfo,
           logicOnly: false,
           propPath: path,

package/src/module-loader.test.ts

@@ -0,0 +1,150 @@
+import { createRequire } from 'node:module'
+import path from 'node:path'
+import { pathToFileURL } from 'node:url'
+import { describe, expect, it } from 'vitest'
+import { loadCjsModule, loadModuleForExtraction } from './module-loader'
+import { readLoaderPortRefStateForTests, readRegisteredRefElementModuleUrlsForTests } from './react-runtime-loader'
+import { readRefElementComponentType } from './ref-elements/component-tag'
+
+const require = createRequire(import.meta.url)
+
+describe('module loading', () => {
+  it('temporarily tags ref-element modules in the CJS fallback and cleans them up afterwards', async () => {
+    const entryPath = path.resolve(__dirname, '__fixtures__/cjs-ref-element-entry.cjs')
+    const targetPath = path.resolve(__dirname, '__fixtures__/cjs-ref-element-target.cjs')
+    const targetModuleExports = require(targetPath) as Record<PropertyKey, unknown>
+
+    delete targetModuleExports[Symbol.for('zero-config:ref-element-component-type')]
+
+    const loadedModuleResult = loadCjsModule(entryPath, [
+      {
+        exportNames: ['default'],
+        moduleSpecifier: './cjs-ref-element-target.cjs',
+        resolvedModuleUrl: pathToFileURL(targetPath).href,
+        refComponentType: 'wixEditorElements.Button',
+      },
+    ])
+
+    expect(
+      (loadedModuleResult.moduleExports as Record<PropertyKey, unknown>)[
+        Symbol.for('zero-config:ref-element-component-type')
+      ],
+    ).toBe('wixEditorElements.Button')
+    expect(targetModuleExports[Symbol.for('zero-config:ref-element-component-type')]).toBe('wixEditorElements.Button')
+
+    await loadedModuleResult.cleanup()
+
+    expect(targetModuleExports[Symbol.for('zero-config:ref-element-component-type')]).toBeUndefined()
+  })
+
+  it('does not preload tagged CJS dependencies before the entry bundle runs', async () => {
+    const entryPath = path.resolve(__dirname, '__fixtures__/cjs-ref-element-order-entry.cjs')
+    const targetPath = path.resolve(__dirname, '__fixtures__/cjs-ref-element-order-target.cjs')
+
+    const loadedModuleResult = loadCjsModule(entryPath, [
+      {
+        exportNames: ['default'],
+        moduleSpecifier: './cjs-ref-element-order-target.cjs',
+        resolvedModuleUrl: pathToFileURL(targetPath).href,
+        refComponentType: 'wixEditorElements.Button',
+      },
+    ])
+
+    expect((loadedModuleResult.moduleExports as { evaluationOrder: string[] }).evaluationOrder).toEqual([
+      'entry',
+      'target',
+    ])
+    await loadedModuleResult.cleanup()
+  })
+
+  it('reloads the ESM entry with a stable ref-element signature while leaving the real module exports untagged', async () => {
+    const entryPath = path.resolve(__dirname, '__fixtures__/esm-ref-element-entry.mjs')
+    const moduleSpecifier = '@wix/zero-config-ref-element-fixtures/BareRefButton'
+    const resolvedModuleUrl = pathToFileURL(
+      path.resolve(__dirname, '../../ref-element-fixtures/dist/BareRefButton.js'),
+    ).href
+    const runtimeModules = [
+      {
+        exportNames: ['default'],
+        moduleSpecifier,
+        resolvedModuleUrl,
+        refComponentType: 'wixEditorElements.BareRefButton',
+      },
+    ]
+
+    const untaggedModuleBeforeExtraction = await import(moduleSpecifier)
+    expect(readRefElementComponentType(untaggedModuleBeforeExtraction.default)).toBeUndefined()
+
+    const initialLoadResult = (await loadModuleForExtraction(entryPath))._unsafeUnwrap()
+    await initialLoadResult.cleanup()
+
+    const loadedModuleResult = (await loadModuleForExtraction(entryPath, runtimeModules))._unsafeUnwrap()
+    expect(loadedModuleResult.moduleExports.default).toBeDefined()
+    await loadedModuleResult.cleanup()
+
+    const untaggedModuleAfterExtraction = await import(moduleSpecifier)
+    expect(readRefElementComponentType(untaggedModuleAfterExtraction.default)).toBeUndefined()
+    expect(readRegisteredRefElementModuleUrlsForTests()).toContain(resolvedModuleUrl)
+    expect(readLoaderPortRefStateForTests()).toBe(false)
+  })
+
+  it('tags lazy CJS ref-element loads while the extraction is active', async () => {
+    const entryPath = path.resolve(__dirname, '__fixtures__/cjs-ref-element-lazy-entry.cjs')
+    const targetPath = path.resolve(__dirname, '__fixtures__/cjs-ref-element-target.cjs')
+    const targetModuleExports = require(targetPath) as Record<PropertyKey, unknown>
+
+    delete targetModuleExports[Symbol.for('zero-config:ref-element-component-type')]
+
+    const loadedModuleResult = loadCjsModule(entryPath, [
+      {
+        exportNames: ['default'],
+        moduleSpecifier: './cjs-ref-element-target.cjs',
+        resolvedModuleUrl: pathToFileURL(targetPath).href,
+        refComponentType: 'wixEditorElements.Button',
+      },
+    ])
+
+    const lazyTargetModule = (
+      loadedModuleResult.moduleExports as { loadTargetModule: () => Record<PropertyKey, unknown> }
+    ).loadTargetModule()
+
+    expect(lazyTargetModule[Symbol.for('zero-config:ref-element-component-type')]).toBe('wixEditorElements.Button')
+    expect(targetModuleExports[Symbol.for('zero-config:ref-element-component-type')]).toBe('wixEditorElements.Button')
+
+    await loadedModuleResult.cleanup()
+
+    expect(targetModuleExports[Symbol.for('zero-config:ref-element-component-type')]).toBeUndefined()
+  })
+
+  it('falls back to CJS when ESM ref-element setup rejects', async () => {
+    const entryPath = path.resolve(__dirname, '__fixtures__/esm-ref-element-entry.mjs')
+    const resolvedModuleUrl = pathToFileURL(
+      path.resolve(__dirname, '../../ref-element-fixtures/dist/BareRefButton.js'),
+    ).href
+
+    const firstLoadResult = await loadModuleForExtraction(entryPath, [
+      {
+        exportNames: ['default'],
+        moduleSpecifier: '@wix/zero-config-ref-element-fixtures/BareRefButton',
+        resolvedModuleUrl,
+        refComponentType: 'wixEditorElements.BareRefButton',
+      },
+    ])
+    await firstLoadResult._unsafeUnwrap().cleanup()
+
+    const conflictingLoadResult = await loadModuleForExtraction(entryPath, [
+      {
+        exportNames: ['default'],
+        moduleSpecifier: '@wix/zero-config-ref-element-fixtures/BareRefButton',
+        resolvedModuleUrl,
+        refComponentType: 'wixEditorElements.ConflictingButton',
+      },
+    ])
+
+    expect(conflictingLoadResult.isOk()).toBe(true)
+    if (conflictingLoadResult.isOk()) {
+      expect(conflictingLoadResult.value.moduleExports.default).toBeDefined()
+      await conflictingLoadResult.value.cleanup()
+    }
+  })
+})

package/src/module-loader.ts

@@ -1,11 +1,11 @@
-import { createRequire } from 'node:module'
 import { Window } from 'happy-dom'
 import { ResultAsync, errAsync, okAsync } from 'neverthrow'
 import React from 'react'
 import type { ComponentType } from 'react'
 import ReactDOM from 'react-dom'
 
-import { registerJsxLoaderHook } from './jsx-runtime-interceptor'
+import { ensureReactRuntimeLoader, loadTaggedCjsModule, prepareRefElementEsmImport } from './react-runtime-loader'
+import type { RefElementModule } from './ref-elements/types'
 
 /**
  * Structured failure from `loadModule` when both ESM import and CJS require fail.
@@ -18,6 +18,20 @@ export interface LoadModuleFailure {
   cjsError: Error
 }
 
+export interface LoadedModule {
+  cleanup: () => Promise<void>
+  moduleExports: Record<string, unknown>
+}
+
+class NoopIntersectionObserver {
+  disconnect(): void {}
+  observe(): void {}
+  takeRecords(): unknown[] {
+    return []
+  }
+  unobserve(): void {}
+}
+
 function setupWindowGlobals(): void {
   const globals = globalThis as Record<string, unknown>
 
@@ -30,6 +44,9 @@ function setupWindowGlobals(): void {
   }
 
   const windowObj = globals.window as Record<string, unknown>
+  const intersectionObserver = windowObj.IntersectionObserver ?? NoopIntersectionObserver
+  if (globals.IntersectionObserver === undefined) globals.IntersectionObserver = intersectionObserver
+  if (windowObj.IntersectionObserver === undefined) windowObj.IntersectionObserver = intersectionObserver
   if (globals.React === undefined) globals.React = React
   if (globals.ReactDOM === undefined) globals.ReactDOM = ReactDOM
   if (windowObj.React === undefined) windowObj.React = React
@@ -50,21 +67,25 @@ function setupWindowGlobals(): void {
  * @errors {LoadModuleFailure} When both ESM import and CJS require fail.
  */
 export function loadModule(entryPath: string): ResultAsync<Record<string, unknown>, LoadModuleFailure> {
+  return loadModuleForExtraction(entryPath).map((loadedModule) => loadedModule.moduleExports)
+}
+
+export function loadModuleForExtraction(
+  entryPath: string,
+  runtimeModules: RefElementModule[] = [],
+): ResultAsync<LoadedModule, LoadModuleFailure> {
   if (!entryPath) {
     return errAsync({ esmError: null, cjsError: new Error('No compiled entry path provided') })
   }
 
   setupWindowGlobals()
-  registerJsxLoaderHook()
 
   return ResultAsync.fromPromise(
-    import(entryPath) as Promise<Record<string, unknown>>,
-    (esmErr): Error => (esmErr instanceof Error ? esmErr : new Error(String(esmErr))),
+    importModuleForExtraction(entryPath, runtimeModules),
+    (esmError): Error => (esmError instanceof Error ? esmError : new Error(String(esmError))),
   ).orElse((esmError) => {
     try {
-      const require = createRequire(import.meta.url)
-      const exports = require(entryPath)
-      return okAsync(exports as Record<string, unknown>)
+      return okAsync(loadTaggedCjsModule(entryPath, runtimeModules))
     } catch (requireErr) {
       const cjsError = requireErr instanceof Error ? requireErr : new Error(String(requireErr))
       return errAsync({ esmError, cjsError })
@@ -72,6 +93,25 @@ export function loadModule(entryPath: string): ResultAsync<Record<string, unknow
   })
 }
 
+async function importModuleWithCleanup(importUrl: string, cleanup: () => Promise<void>): Promise<LoadedModule> {
+  try {
+    const moduleExports = (await import(importUrl)) as Record<string, unknown>
+    return { cleanup, moduleExports }
+  } catch (thrown) {
+    await cleanup()
+    throw thrown
+  }
+}
+
+async function importModuleForExtraction(entryPath: string, runtimeModules: RefElementModule[]): Promise<LoadedModule> {
+  const runtimeSession = await prepareRefElementEsmImport(entryPath, runtimeModules)
+  return importModuleWithCleanup(runtimeSession.importUrl, runtimeSession.cleanup)
+}
+
+export function loadCjsModule(entryPath: string, refElementModules: RefElementModule[] = []): LoadedModule {
+  return loadTaggedCjsModule(entryPath, refElementModules)
+}
+
 function isComponent(value: unknown): value is ComponentType<unknown> {
   if (typeof value === 'function') return true
   // React.memo() and React.forwardRef() return objects, not functions

package/src/react-runtime-interceptor.ts

@@ -0,0 +1,64 @@
+import { createRequire } from 'node:module'
+
+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')
+
+type JsxDevFunction = typeof originalDevRuntime.jsxDEV
+
+// biome-ignore lint/suspicious/noExplicitAny: broad function type matching React.createElement's signature
+type CreateElementFunction = (...args: any[]) => unknown
+
+const cjsReact = require('react') as { createElement: CreateElementFunction }
+const originalCreateElement: CreateElementFunction = cjsReact.createElement
+const INTERCEPTOR_STATE_KEY = Symbol.for('zero-config:jsx-interceptor')
+
+interface JsxInterceptorState {
+  currentCreateElement: CreateElementFunction | null
+  currentJsx: typeof originalRuntime.jsx
+  currentJsxDEV: JsxDevFunction
+  currentJsxs: typeof originalRuntime.jsxs
+  isInsideOriginal: boolean
+}
+
+function readJsxInterceptorState(): JsxInterceptorState {
+  const globalRecord = globalThis as Record<symbol, JsxInterceptorState | undefined>
+  if (!globalRecord[INTERCEPTOR_STATE_KEY]) {
+    globalRecord[INTERCEPTOR_STATE_KEY] = {
+      currentCreateElement: null,
+      currentJsx: originalRuntime.jsx,
+      currentJsxDEV: originalDevRuntime.jsxDEV,
+      currentJsxs: originalRuntime.jsxs,
+      isInsideOriginal: false,
+    }
+  }
+
+  return globalRecord[INTERCEPTOR_STATE_KEY]
+}
+
+export function setJsxInterceptors(
+  jsx?: typeof originalRuntime.jsx,
+  jsxs?: typeof originalRuntime.jsxs,
+  jsxDEV?: JsxDevFunction,
+): void {
+  const interceptorState = readJsxInterceptorState()
+  interceptorState.currentJsx = jsx ?? originalRuntime.jsx
+  interceptorState.currentJsxs = jsxs ?? originalRuntime.jsxs
+  interceptorState.currentJsxDEV = jsxDEV ?? originalDevRuntime.jsxDEV
+}
+
+export function getOriginals() {
+  return {
+    jsx: originalRuntime.jsx,
+    jsxs: originalRuntime.jsxs,
+    jsxDEV: originalDevRuntime.jsxDEV,
+  }
+}
+
+export function setCreateElementInterceptor(interceptor: CreateElementFunction | null): void {
+  readJsxInterceptorState().currentCreateElement = interceptor
+}
+
+export function getOriginalCreateElement(): CreateElementFunction {
+  return originalCreateElement
+}