@wix/zero-config-implementation 1.48.0 → 1.50.0

package/package.json

@@ -4,7 +4,7 @@
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
-  "version": "1.48.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": "8fd0a1265e02ba71d5ed24fddbddbf66183b17ff76ac71ce067af6c6"
+  "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/converters/a11y-builder.ts

@@ -0,0 +1,25 @@
+import { DATA } from '@wix/react-component-schema'
+import type { TrackingStores } from '../information-extractors/react'
+
+/**
+ * Walks the known A11y attributes (from DATA.A11Y_ATTRIBUTES) in deterministic
+ * enum order and returns the subset whose `${propPath}.${attribute}` key was
+ * recorded in propUsages by the prop-tracker. When propUsages or propPath is
+ * unavailable, returns an empty array — per the schema, an empty list means
+ * "all possible A11Y values", which is a safe default.
+ */
+export function collectUsedA11yAttributes(
+  propUsages: TrackingStores['propUsages'] | undefined,
+  propPath: string | undefined,
+): (typeof DATA.A11Y_ATTRIBUTES)[keyof typeof DATA.A11Y_ATTRIBUTES][] {
+  if (!propUsages || !propPath) return []
+
+  const used: (typeof DATA.A11Y_ATTRIBUTES)[keyof typeof DATA.A11Y_ATTRIBUTES][] = []
+  for (const attribute of Object.values(DATA.A11Y_ATTRIBUTES)) {
+    if (attribute === DATA.A11Y_ATTRIBUTES.Unknown_AriaAttributes) continue
+    if (propUsages.has(`${propPath}.${attribute}`)) {
+      used.push(attribute)
+    }
+  }
+  return used
+}

package/src/converters/data-item-builder.ts

@@ -20,6 +20,7 @@ import { ParseError } from '../errors'
 import type { DOMBinding, TrackingStores } from '../information-extractors/react'
 import type { PropInfo, ResolvedType } from '../information-extractors/ts/types'
 import { WIX_TYPE_TO_DATA_TYPE } from '../wix-type-to-data-type'
+import { collectUsedA11yAttributes } from './a11y-builder'
 import { formatDisplayName } from './utils'
 
 const { DATA_TYPE } = DATA
@@ -120,7 +121,7 @@ function applyResolvedTypeToDataItem(
       return ok(undefined)
 
     case 'semantic':
-      handleSemanticType(dataItem, resolvedType)
+      handleSemanticType({ dataItem, resolvedType, propUsages, propPath })
       return ok(undefined)
 
     default:
@@ -343,7 +344,17 @@ function handleUnionType(
  * Handles semantic types from React and @wix/public-schemas packages.
  * Unknown semantic sources or types silently fall back to text.
  */
-function handleSemanticType(dataItem: DataItem, resolvedType: ResolvedType): void {
+function handleSemanticType({
+  dataItem,
+  resolvedType,
+  propUsages,
+  propPath,
+}: {
+  dataItem: DataItem
+  resolvedType: ResolvedType
+  propUsages?: TrackingStores['propUsages']
+  propPath?: string
+}): void {
   const semanticValue = resolvedType.value as string
   const source = resolvedType.source
 
@@ -363,7 +374,7 @@ function handleSemanticType(dataItem: DataItem, resolvedType: ResolvedType): voi
     const dataTypeKey = WIX_TYPE_TO_DATA_TYPE[semanticValue]
     if (dataTypeKey) {
       dataItem.dataType = DATA_TYPE[dataTypeKey]
-      applyDataToBuilderType(dataItem, dataTypeKey)
+      applyDataToBuilderType({ dataItem, builderType: dataTypeKey, propUsages, propPath })
     } else {
       // Unknown Wix semantic type — silently fall back to text
       dataItem.dataType = DATA_TYPE.text
@@ -414,8 +425,20 @@ function handleFunctionType(dataItem: DataItem, propInfo: PropInfo, bindings?: D
 
 /**
  * Applies special data to builder types if required (e.g., link types, image category).
+ * For `a11y`, the list of attributes is built from the prop-tracker's propUsages so
+ * only fields actually read in JSX are included.
  */
-function applyDataToBuilderType(dataItem: DataItem, builderType: keyof typeof DATA_TYPE): void {
+function applyDataToBuilderType({
+  dataItem,
+  builderType,
+  propUsages,
+  propPath,
+}: {
+  dataItem: DataItem
+  builderType: keyof typeof DATA_TYPE
+  propUsages?: TrackingStores['propUsages']
+  propPath?: string
+}): void {
   switch (builderType) {
     case 'link':
       dataItem.dataType = DATA_TYPE.link
@@ -442,5 +465,11 @@ function applyDataToBuilderType(dataItem: DataItem, builderType: keyof typeof DA
         category: MEDIA.IMAGE_CATEGORY.IMAGE,
       }
       break
+    case 'a11y':
+      dataItem.dataType = DATA_TYPE.a11y
+      dataItem.a11y = {
+        attributes: collectUsedA11yAttributes(propUsages, propPath),
+      }
+      break
   }
 }

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/information-extractors/react/utils/mock-generator.ts

@@ -91,7 +91,7 @@ function generateValueFromResolvedType(
 
   // Handle semantic types (from React or Wix packages) — returned as plain objects
   if (kind === 'semantic') {
-    return generateSemanticValue(resolvedType.value as string, propName)
+    return generateSemanticValue(resolvedType.value as string, propName, path, registrar)
   }
 
   // Handle structural types
@@ -129,7 +129,12 @@ function generateValueFromResolvedType(
 /**
  * Generate a mock value for semantic types (React or Wix types)
  */
-function generateSemanticValue(semanticType: string, propName: string): unknown {
+function generateSemanticValue(
+  semanticType: string,
+  propName: string,
+  path: string,
+  registrar?: PropSpyRegistrar,
+): unknown {
   switch (semanticType) {
     // Wix semantic types
     case 'Image':
@@ -141,7 +146,7 @@ function generateSemanticValue(semanticType: string, propName: string): unknown
     case 'Link':
       return generateMockLink()
     case 'A11y':
-      return generateMockA11y()
+      return generateMockA11y(path, registrar)
     case 'VectorArt':
       return generateMockVectorArt()
     case 'Audio':
@@ -378,12 +383,57 @@ function generateMockLink(): Record<string, unknown> {
   }
 }
 
-function generateMockA11y(): Record<string, unknown> {
-  return {
-    ariaLabel: `mock_ariaLabel_${faker.string.alphanumeric(6)}`,
-    role: faker.helpers.arrayElement(['button', 'link', 'img', 'region']),
-    tabIndex: faker.helpers.arrayElement([0, -1]),
+// String fields and string-literal-union fields of @wix/public-schemas A11y.
+// These are emitted as unique trackable strings — DOM/React will accept any
+// string for `aria-*` attributes regardless of the TS type union, so the spy
+// markers flow through unchanged and the prop-tracker can detect usage.
+const A11Y_STRING_FIELDS = [
+  'ariaExpanded',
+  'ariaDisabled',
+  'ariaAtomic',
+  'ariaHidden',
+  'ariaBusy',
+  'ariaAutocomplete',
+  'ariaPressed',
+  'ariaHaspopup',
+  'ariaRelevant',
+  'role',
+  'ariaLive',
+  'ariaCurrent',
+  'ariaLabel',
+  'ariaRoledescription',
+  'ariaDescribedby',
+  'ariaLabelledby',
+  'ariaErrormessage',
+  'ariaOwns',
+  'ariaControls',
+  'tag',
+  'ariaMultiline',
+  'ariaInvalid',
+] as const
+
+// Numeric fields of @wix/public-schemas A11y.
+const A11Y_NUMBER_FIELDS = ['tabIndex', 'ariaLevel'] as const
+
+// Pure-boolean A11y fields (e.g. `multiline`) are intentionally omitted: the
+// runtime spy tracker only registers strings, numbers and functions, so plain
+// booleans cannot be tied back to a specific prop field.
+function generateMockA11y(path: string, registrar?: PropSpyRegistrar): Record<string, unknown> {
+  const a11y: Record<string, unknown> = {}
+
+  for (const field of A11Y_STRING_FIELDS) {
+    const value = `mock_a11y_${field}_${faker.string.alphanumeric(6)}`
+    if (registrar) registrar.registerString(`${path}.${field}`, field, value)
+    a11y[field] = value
+  }
+
+  for (const field of A11Y_NUMBER_FIELDS) {
+    const value = nextTraceableNumber()
+    if (registrar) registrar.registerNumber(`${path}.${field}`, field, value)
+    a11y[field] = value
   }
+
+  return a11y
 }
 
 function generateMockVectorArt(): Record<string, unknown> {

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