@wix/zero-config-implementation 1.7.0 → 1.9.0

package/src/information-extractors/react/extractors/prop-tracker.ts

@@ -8,17 +8,13 @@
 import type { HTMLAttributes } from 'react'
 import { TRACE_ATTR } from '../../../component-renderer'
 import type { PropSpyMeta, TrackingStores } from '../types'
-import { type PropSpyContext, createPropSpyContext } from '../utils/prop-spy'
+import { type PropSpyRegistrar, generateMockProps, resetMockCounter } from '../utils/mock-generator'
 import type { CreateElementEvent, ReactExtractor, RenderContext } from './core/types'
 
 // ─────────────────────────────────────────────────────────────────────────────
 // Types
 // ─────────────────────────────────────────────────────────────────────────────
 
-const SPY_REGEX = /__spy_\d+__/g
-
-export type GetSpyMetadataFn = (id: string) => PropSpyMeta | null
-
 export interface PropTrackerData {
   tag: string
   role?: string
@@ -28,7 +24,6 @@ export interface PropTrackerData {
 
 export interface PropTrackerExtractorState {
   stores: TrackingStores
-  spyContext: PropSpyContext
 }
 
 // ─────────────────────────────────────────────────────────────────────────────
@@ -37,28 +32,54 @@ export interface PropTrackerExtractorState {
 
 /**
  * Creates a prop tracker extractor that:
- * 1. Wraps props with spy proxies during beforeRender
+ * 1. Generates spy-instrumented mock props during beforeRender
  * 2. Detects spy markers in element props during onCreateElement
- * 3. Writes tracking data to the store namespaced by 'prop-tracker'
+ * 3. propUsages tracking data to the store namespaced by 'prop-tracker'
  */
 export function createPropTrackerExtractor(): {
   extractor: ReactExtractor
   state: PropTrackerExtractorState
 } {
-  const spyContext = createPropSpyContext()
+  const stringMeta = new Map<string, PropSpyMeta>()
+  const numberMeta = new Map<number, PropSpyMeta>()
+  const fnMeta = new WeakMap<(...args: unknown[]) => unknown, PropSpyMeta>()
   const stores: TrackingStores = {
-    reads: new Map(),
-    writes: new Map(),
+    propUsages: new Map(),
+  }
+
+  const registrar: PropSpyRegistrar = {
+    registerString(path, propName, value) {
+      stringMeta.set(value, { path, propName, originalValue: value })
+    },
+    registerNumber(path, propName, value) {
+      numberMeta.set(value, { path, propName, originalValue: value })
+    },
+    registerFunction(path, propName, value) {
+      fnMeta.set(value, { path, propName, originalValue: value })
+    },
   }
 
-  const extractSpies = (value: unknown, seen = new WeakSet<object>()): { propName: string; path: string }[] => {
+  const extractSpies = (
+    value: unknown,
+    seen = new WeakSet<object>(),
+  ): { propName: string; path: string; embedded: boolean }[] => {
     if (typeof value === 'string') {
-      return (value.match(SPY_REGEX) ?? [])
-        .map((id) => {
-          const meta = spyContext.getSpyMetadataByUniqueId(id)
-          return meta ? { propName: meta.propName, path: meta.path } : null
-        })
-        .filter(Boolean) as { propName: string; path: string }[]
+      const results: { propName: string; path: string; embedded: boolean }[] = []
+      for (const [key, meta] of stringMeta) {
+        if (value.includes(key)) {
+          // embedded = spy marker was part of a longer string (e.g. `mailto:${email}`)
+          results.push({ propName: meta.propName, path: meta.path, embedded: value !== key })
+        }
+      }
+      return results
+    }
+    if (typeof value === 'number') {
+      const meta = numberMeta.get(value)
+      return meta ? [{ propName: meta.propName, path: meta.path, embedded: false }] : []
+    }
+    if (typeof value === 'function') {
+      const meta = fnMeta.get(value as (...args: unknown[]) => unknown)
+      return meta ? [{ propName: meta.propName, path: meta.path, embedded: false }] : []
     }
     if (value && typeof value === 'object') {
       // Prevent infinite recursion from circular references
@@ -79,8 +100,8 @@ export function createPropTrackerExtractor(): {
     name: 'prop-tracker',
 
     onBeforeRender(context: RenderContext): void {
-      // Wrap props with spy proxies to track access
-      context.props = spyContext.createAuditedProps(context.props, stores, () => context.componentInfo.componentName)
+      resetMockCounter()
+      context.props = generateMockProps(context.componentInfo, registrar)
     },
 
     onCreateElement(event: CreateElementEvent): void {
@@ -97,18 +118,18 @@ export function createPropTrackerExtractor(): {
 
         spies.forEach((spy) => {
           boundProps.add(spy.propName)
-          const path = spy.path
-          const entry = stores.writes.get(path) ?? { elements: new Map(), attributes: new Map() }
-
-          if (!stores.writes.has(path)) {
-            stores.writes.set(path, entry)
+          const path = spy.path.replace(/\[\d+\]/g, '')
+          if (!stores.propUsages.has(path)) {
+            stores.propUsages.set(path, { elements: new Map(), attributes: new Map() })
           }
+          const entry = stores.propUsages.get(path)!
 
           entry.elements.set(traceId, { tag, elementId: traceId })
-          entry.attributes.set(`${traceId}:${key}`, { attr: key, concatenated: spies.length > 1 })
+          const isConcat = spies.length > 1 || spy.embedded
+          entry.attributes.set(`${traceId}:${key}`, { attr: key, concatenated: isConcat })
 
           // Track concatenated attributes
-          if (spies.length > 1) {
+          if (isConcat) {
             concatenatedAttrs.set(key, spy.propName)
           }
         })
@@ -127,6 +148,6 @@ export function createPropTrackerExtractor(): {
 
   return {
     extractor,
-    state: { stores, spyContext },
+    state: { stores },
   }
 }

package/src/information-extractors/react/index.ts

@@ -21,6 +21,7 @@ export {
 export type {
   // Core types
   ExtractionResult,
+  RunExtractorsOptions,
   ExtractedElement,
   ReactExtractor,
   RenderContext,
@@ -41,13 +42,6 @@ export type {
   CoupledProp,
   TrackingStores,
   DOMBinding,
-  PropReadInfo,
   PropWriteInfo,
   PropSpyMeta,
 } from './types'
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Utility Exports
-// ─────────────────────────────────────────────────────────────────────────────
-
-export type { PropSpyContext } from './utils/prop-spy'

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

@@ -9,41 +9,23 @@ import type { ExtractedElement } from './extractors/core/tree-builder'
 // Prop Spy (for tracking prop access)
 // ─────────────────────────────────────────────────────────────────────────────
 
-export const PROP_SPY_SYMBOL = Symbol.for('__prop_spy__')
-
 export interface PropSpyMeta {
   path: string
   propName: string
-  uniqueId: string
   originalValue: unknown
 }
 
-export interface PropSpy<T = unknown> {
-  [PROP_SPY_SYMBOL]: true
-  __meta: PropSpyMeta
-  valueOf: () => T
-  toString: () => string
-  toJSON: () => T
-  [Symbol.toPrimitive]?: (hint: string) => T | string | number
-}
-
 // ─────────────────────────────────────────────────────────────────────────────
 // Tracking Stores
 // ─────────────────────────────────────────────────────────────────────────────
 
-export interface PropReadInfo {
-  components: Set<string>
-  value: unknown
-}
-
 export interface PropWriteInfo {
   elements: Map<string, { tag: string; elementId: string }>
   attributes: Map<string, { attr: string; concatenated: boolean }>
 }
 
 export interface TrackingStores {
-  reads: Map<string, PropReadInfo>
-  writes: Map<string, PropWriteInfo>
+  propUsages: Map<string, PropWriteInfo>
 }
 
 // ─────────────────────────────────────────────────────────────────────────────
@@ -58,7 +40,8 @@ export interface DOMBinding {
 }
 
 export interface CoupledProp extends PropInfo {
-  bindings: DOMBinding[]
+  /** Full stores.propUsages key for this prop, e.g. "props.linkUrl". */
+  propPath: string
   logicOnly: boolean
 }
 
@@ -67,4 +50,5 @@ export interface CoupledComponentInfo {
   props: Record<string, CoupledProp>
   elements: ExtractedElement[]
   innerElementProps?: Map<string, Record<string, CoupledProp>>
+  propUsages: TrackingStores['propUsages']
 }

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

@@ -6,21 +6,49 @@
 import { faker } from '@faker-js/faker'
 import type { ComponentInfo, DefaultValue, PropInfo, ResolvedType } from '../../ts/types'
 
+// Unique primes used as traceable number values. Each rendered number prop gets
+// one; the value is distinct enough to be identified in DOM attributes later.
+const TRACEABLE_PRIMES = [11, 13, 17, 19, 23, 29, 31, 37, 41, 43, 47, 53, 59, 61, 67, 71, 73, 79, 83, 89, 97]
+const FALLBACK_NUMBER_BASE = 101
+let primeIndex = 0
+
+function nextTraceableNumber(): number {
+  const withinPrimeList = primeIndex < TRACEABLE_PRIMES.length
+  if (withinPrimeList) {
+    return TRACEABLE_PRIMES[primeIndex++]
+  }
+  const overflowOffset = primeIndex++ - TRACEABLE_PRIMES.length
+  return FALLBACK_NUMBER_BASE + overflowOffset
+}
+
 /**
  * Reset faker's seed and internal state for reproducible results
  */
 export function resetMockCounter(): void {
   faker.seed(42)
+  primeIndex = 0
+}
+
+/**
+ * Narrow interface for registering spy markers during mock generation.
+ * Satisfied structurally by PropSpyContext.
+ */
+export interface PropSpyRegistrar {
+  registerString(path: string, propName: string, value: string): void
+  registerNumber(path: string, propName: string, value: number): void
+  registerFunction(path: string, propName: string, value: (...args: unknown[]) => unknown): void
 }
 
 /**
- * Generate mock props object from ComponentInfo
+ * 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): Record<string, unknown> {
+export function generateMockProps(componentInfo: ComponentInfo, registrar?: PropSpyRegistrar): Record<string, unknown> {
   const mockProps: Record<string, unknown> = {}
 
   for (const [propName, propInfo] of Object.entries(componentInfo.props)) {
-    mockProps[propName] = generateMockValue(propInfo, propName)
+    mockProps[propName] = generateMockValue(propInfo, propName, `props.${propName}`, registrar)
   }
 
   return mockProps
@@ -29,13 +57,13 @@ export function generateMockProps(componentInfo: ComponentInfo): Record<string,
 /**
  * Generate a mock value based on PropInfo
  */
-function generateMockValue(propInfo: PropInfo, propName: string): unknown {
-  // If there's a default value, use it
-  if (propInfo.defaultValue !== undefined) {
+function generateMockValue(propInfo: PropInfo, propName: string, path: string, registrar?: PropSpyRegistrar): 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)
+  return generateValueFromResolvedType(propInfo.resolvedType, propName, path, registrar)
 }
 
 /**
@@ -57,10 +85,15 @@ function extractDefaultValueValue(defaultValue: DefaultValue): unknown {
 /**
  * Generate a mock value from a ResolvedType
  */
-function generateValueFromResolvedType(resolvedType: ResolvedType, propName: string): unknown {
+function generateValueFromResolvedType(
+  resolvedType: ResolvedType,
+  propName: string,
+  path: string,
+  registrar?: PropSpyRegistrar,
+): unknown {
   const kind = resolvedType.kind
 
-  // Handle semantic types (from React or Wix packages)
+  // Handle semantic types (from React or Wix packages) — returned as plain objects
   if (kind === 'semantic') {
     return generateSemanticValue(resolvedType.value as string, propName)
   }
@@ -68,28 +101,28 @@ function generateValueFromResolvedType(resolvedType: ResolvedType, propName: str
   // Handle structural types
   switch (kind) {
     case 'primitive':
-      return generatePrimitiveValue(resolvedType.value as string, propName)
+      return generatePrimitiveValue(resolvedType.value as string, propName, path, registrar)
 
     case 'literal':
       return resolvedType.value
 
     case 'union':
-      return generateUnionValue(resolvedType, propName)
+      return generateUnionValue(resolvedType, propName, path, registrar)
 
     case 'intersection':
-      return generateIntersectionValue(resolvedType, propName)
+      return generateIntersectionValue(resolvedType, propName, path, registrar)
 
     case 'array':
-      return generateArrayValue(resolvedType, propName)
+      return generateArrayValue(resolvedType, propName, path, registrar)
 
     case 'object':
-      return generateObjectValue(resolvedType, propName)
+      return generateObjectValue(resolvedType, propName, path, registrar)
 
     case 'enum':
       return generateEnumValue(resolvedType)
 
     case 'function':
-      return generateMockFunction(propName)
+      return generateMockFunction(propName, path, registrar)
 
     default:
       // Default to a string for unknown types
@@ -155,12 +188,23 @@ function generateSemanticValue(semanticType: string, propName: string): unknown
 /**
  * Generate a primitive value
  */
-function generatePrimitiveValue(primitiveType: string, propName: string): unknown {
+function generatePrimitiveValue(
+  primitiveType: string,
+  propName: string,
+  path: string,
+  registrar?: PropSpyRegistrar,
+): unknown {
   switch (primitiveType) {
-    case 'string':
-      return `mock_${propName}_${faker.string.alphanumeric(6)}`
-    case 'number':
-      return faker.number.int({ min: 1, max: 100 })
+    case 'string': {
+      const raw = `mock_${propName}_${faker.string.alphanumeric(6)}`
+      if (registrar) registrar.registerString(path, propName, raw)
+      return raw
+    }
+    case 'number': {
+      const val = nextTraceableNumber()
+      if (registrar) registrar.registerNumber(path, propName, val)
+      return val
+    }
     case 'boolean':
       return faker.datatype.boolean()
     case 'null':
@@ -175,7 +219,12 @@ function generatePrimitiveValue(primitiveType: string, propName: string): unknow
 /**
  * Generate a value from a union type (pick the first non-null option)
  */
-function generateUnionValue(resolvedType: ResolvedType, propName: string): unknown {
+function generateUnionValue(
+  resolvedType: ResolvedType,
+  propName: string,
+  path: string,
+  registrar?: PropSpyRegistrar,
+): unknown {
   const types = resolvedType.types ?? []
 
   // Prefer string literals for textEnum-like unions
@@ -186,7 +235,7 @@ function generateUnionValue(resolvedType: ResolvedType, propName: string): unkno
 
   // Otherwise, use the first type
   if (types.length > 0) {
-    return generateValueFromResolvedType(types[0], propName)
+    return generateValueFromResolvedType(types[0], propName, path, registrar)
   }
 
   return `mock_${propName}_${faker.string.alphanumeric(6)}`
@@ -195,14 +244,19 @@ function generateUnionValue(resolvedType: ResolvedType, propName: string): unkno
 /**
  * Generate a value from an intersection type (merge object properties)
  */
-function generateIntersectionValue(resolvedType: ResolvedType, propName: string): unknown {
+function generateIntersectionValue(
+  resolvedType: ResolvedType,
+  propName: string,
+  path: string,
+  registrar?: PropSpyRegistrar,
+): unknown {
   const types = resolvedType.types ?? []
   const merged: Record<string, unknown> = {}
 
   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}`)
+        merged[key] = generateMockValue(propInfo, `${propName}.${key}`, `${path}.${key}`, registrar)
       }
     }
   }
@@ -213,29 +267,38 @@ function generateIntersectionValue(resolvedType: ResolvedType, propName: string)
 /**
  * Generate an array value
  */
-function generateArrayValue(resolvedType: ResolvedType, propName: string): unknown[] {
+function generateArrayValue(
+  resolvedType: ResolvedType,
+  propName: string,
+  path: string,
+  registrar?: PropSpyRegistrar,
+): unknown[] {
   const elementType = resolvedType.elementType
 
   if (!elementType) {
     return [`mock_${propName}[0]_${faker.string.alphanumeric(6)}`]
   }
 
-  // Generate 2-3 items for the array
   return [
-    generateValueFromResolvedType(elementType, `${propName}[0]`),
-    generateValueFromResolvedType(elementType, `${propName}[1]`),
+    generateValueFromResolvedType(elementType, `${propName}[0]`, `${path}[0]`, registrar),
+    generateValueFromResolvedType(elementType, `${propName}[1]`, `${path}[1]`, registrar),
   ]
 }
 
 /**
  * Generate an object value from properties
  */
-function generateObjectValue(resolvedType: ResolvedType, propName: string): Record<string, unknown> {
+function generateObjectValue(
+  resolvedType: ResolvedType,
+  propName: string,
+  path: string,
+  registrar?: PropSpyRegistrar,
+): Record<string, unknown> {
   const properties = resolvedType.properties ?? {}
   const obj: Record<string, unknown> = {}
 
   for (const [key, propInfo] of Object.entries(properties)) {
-    obj[key] = generateMockValue(propInfo, `${propName}.${key}`)
+    obj[key] = generateMockValue(propInfo, key, `${path}.${key}`, registrar)
   }
 
   return obj
@@ -258,11 +321,16 @@ function generateEnumValue(resolvedType: ResolvedType): unknown {
 /**
  * Generate a mock function
  */
-function generateMockFunction(propName: string): (...args: unknown[]) => void {
+function generateMockFunction(
+  propName: string,
+  path: string,
+  registrar?: PropSpyRegistrar,
+): (...args: unknown[]) => void {
   const fn = function mockFn(): void {
     // No-op mock function
   }
   Object.defineProperty(fn, 'name', { value: `mock_${propName}` })
+  if (registrar) registrar.registerFunction(path, propName, fn)
   return fn
 }
 

package/src/manifest-pipeline.ts

@@ -6,6 +6,7 @@ import type { PropInfo } from './information-extractors/ts/types'
 import {
   type ExtractedElement,
   type PropTrackerData,
+  type RunExtractorsOptions,
   createCssPropertiesExtractor,
   createPropTrackerExtractor,
   runExtractors,
@@ -62,6 +63,7 @@ export function processComponent(
   loadComponent: (componentName: string) => ComponentType<unknown> | null,
   cssImportPaths: string[],
   loaderHasError?: boolean,
+  options?: RunExtractorsOptions,
 ): ProcessComponentResult {
   const warnings: ExtractionWarning[] = []
 
@@ -97,7 +99,7 @@ export function processComponent(
       const { extractor: propTracker, state } = createPropTrackerExtractor()
       const cssExtractor = createCssPropertiesExtractor()
 
-      const result = runExtractors(componentInfo, Component, [propTracker, cssExtractor])
+      const result = runExtractors(componentInfo, Component, [propTracker, cssExtractor], options)
       html = result.html
       extractedElements = result.elements
 
@@ -107,6 +109,7 @@ export function processComponent(
         props: coupledProps,
         elements: convertElements(extractedElements),
         innerElementProps: innerElementProps.size > 0 ? innerElementProps : undefined,
+        propUsages: state.stores.propUsages,
       }
     } catch (error) {
       warnings.push({
@@ -126,9 +129,13 @@ export function processComponent(
     enhancedInfo = {
       componentName: componentInfo.componentName,
       props: Object.fromEntries(
-        Object.entries(componentInfo.props).map(([name, info]) => [name, { ...info, bindings: [], logicOnly: false }]),
+        Object.entries(componentInfo.props).map(([name, info]) => [
+          name,
+          { ...info, logicOnly: false, propPath: `props.${name}` },
+        ]),
       ),
       elements: [],
+      propUsages: new Map(),
     }
   }
 
@@ -173,14 +180,12 @@ function buildCoupledProps(
   const result: Record<string, CoupledProp> = {}
 
   for (const [name, info] of Object.entries(componentInfo.props)) {
-    const path = `props.${name}`
-    const wasRead = stores.reads.has(path)
-    const writeInfo = stores.writes.get(path)
+    const topLevelWriteInfo = stores.propUsages.get(`props.${name}`)
 
     result[name] = {
       ...info,
-      logicOnly: wasRead && !writeInfo,
-      bindings: writeInfo ? extractBindings(writeInfo) : [],
+      logicOnly: !topLevelWriteInfo,
+      propPath: `props.${name}`,
     }
   }
 
@@ -192,7 +197,7 @@ function buildCoupledProps(
 const ELEMENT_PROPS_PREFIX = 'props.elementProps.'
 
 /**
- * Processes stores.writes entries with paths starting with "props.elementProps."
+ * Processes stores.propUsages entries with paths starting with "props.elementProps."
  * to extract inner element prop bindings grouped by elementId (traceId).
  */
 function processElementPropsWrites(
@@ -204,7 +209,7 @@ function processElementPropsWrites(
   const elementPropsInfo = componentInfo.props.elementProps
   if (!elementPropsInfo) return result
 
-  for (const [path, writeInfo] of stores.writes) {
+  for (const [path, writeInfo] of stores.propUsages) {
     if (!path.startsWith(ELEMENT_PROPS_PREFIX)) continue
 
     // Resolve the PropInfo for this leaf prop by walking the type tree
@@ -228,10 +233,9 @@ function processElementPropsWrites(
         propsForElement[leafName] = {
           ...propInfo,
           logicOnly: false,
-          bindings: [],
+          propPath: path,
         }
       }
-      propsForElement[leafName].bindings.push(binding)
     }
   }
 
@@ -266,7 +270,9 @@ function resolveInnerPropInfo(elementPropsPropInfo: PropInfo, relativePath: stri
   return null
 }
 
-function extractBindings(writeInfo: TrackingStores['writes'] extends Map<string, infer V> ? V : never): DOMBinding[] {
+function extractBindings(
+  writeInfo: TrackingStores['propUsages'] extends Map<string, infer V> ? V : never,
+): DOMBinding[] {
   const bindings: DOMBinding[] = []
 
   for (const [key, attrInfo] of writeInfo.attributes) {

package/dist/information-extractors/react/utils/prop-spy.d.ts

@@ -1,10 +0,0 @@
-import { PropSpyMeta, TrackingStores } from '../types';
-export interface PropSpyContext {
-    createAuditedProps: <T extends object | null>(target: T, stores: TrackingStores, getComponent: () => string, basePath?: string) => T;
-    getSpyMetadataByUniqueId: (id: string) => PropSpyMeta | null;
-}
-/**
- * Creates an encapsulated prop spy context.
- * Each context has its own ID counter and metadata map, avoiding global state.
- */
-export declare function createPropSpyContext(): PropSpyContext;