@wix/zero-config-implementation 1.8.0 → 1.9.0

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

@@ -109,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({
@@ -128,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(),
     }
   }
 
@@ -175,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}`,
     }
   }
 
@@ -194,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(
@@ -206,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
@@ -230,10 +233,9 @@ function processElementPropsWrites(
         propsForElement[leafName] = {
           ...propInfo,
           logicOnly: false,
-          bindings: [],
+          propPath: path,
         }
       }
-      propsForElement[leafName].bindings.push(binding)
     }
   }
 
@@ -268,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;

package/src/information-extractors/react/utils/prop-spy.ts

@@ -1,168 +0,0 @@
-import type { PropSpy, PropSpyMeta, TrackingStores } from '../types'
-import { PROP_SPY_SYMBOL } from '../types'
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Types
-// ─────────────────────────────────────────────────────────────────────────────
-
-export interface PropSpyContext {
-  createAuditedProps: <T extends object | null>(
-    target: T,
-    stores: TrackingStores,
-    getComponent: () => string,
-    basePath?: string,
-  ) => T
-  getSpyMetadataByUniqueId: (id: string) => PropSpyMeta | null
-}
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Factory
-// ─────────────────────────────────────────────────────────────────────────────
-
-/**
- * Creates an encapsulated prop spy context.
- * Each context has its own ID counter and metadata map, avoiding global state.
- */
-export function createPropSpyContext(): PropSpyContext {
-  let idCounter = 0
-  const metadataMap = new Map<string, PropSpyMeta>()
-
-  // ─────────────────────────────────────────────────────────────────────────────
-  // Helpers
-  // ─────────────────────────────────────────────────────────────────────────────
-
-  const isPropSpy = (val: unknown): val is PropSpy => !!(val && typeof val === 'object' && PROP_SPY_SYMBOL in val)
-
-  const isReactInternal = (val: unknown): boolean => {
-    if (!val || typeof val !== 'object') return false
-    const obj = val as Record<string, unknown>
-    return !!(obj.$$typeof || obj._owner || obj._store || (obj.prototype as Record<string, unknown>)?.isReactComponent)
-  }
-
-  const logRead = (stores: TrackingStores, path: string, component: string, value: unknown) => {
-    const record = stores.reads.get(path) ?? { components: new Set(), value }
-    record.components.add(component)
-    stores.reads.set(path, record)
-  }
-
-  const createMeta = (
-    path: string,
-    propName: string,
-    originalValue: unknown,
-  ): { meta: PropSpyMeta; uniqueId: string } => {
-    const uniqueId = `__spy_${++idCounter}__`
-    const meta = { path, propName, uniqueId, originalValue }
-    return { meta, uniqueId }
-  }
-
-  // ─────────────────────────────────────────────────────────────────────────────
-  // Primitive Wrapping
-  // ─────────────────────────────────────────────────────────────────────────────
-
-  const wrapPrimitiveOrFunction = (
-    value: string | number | boolean | ((...args: unknown[]) => unknown),
-    path: string,
-    propName: string,
-    stores: TrackingStores,
-    getComponent: () => string,
-  ) => {
-    // Functions: Wrap to log execution
-    if (typeof value === 'function') {
-      const spy = function (this: unknown, ...args: unknown[]) {
-        logRead(stores, path, getComponent(), value)
-        return value.apply(this, args)
-      }
-      Object.defineProperties(spy, {
-        name: { value: value.name || propName },
-        length: { value: value.length },
-      })
-      return spy
-    }
-
-    const { meta, uniqueId } = createMeta(path, propName, value)
-
-    // Strings: Embed markers
-    if (typeof value === 'string') {
-      metadataMap.set(uniqueId, meta)
-      return `${uniqueId}${value}${uniqueId}`
-    }
-
-    // Numbers/Booleans: Wrapper Objects
-    // eslint-disable-next-line @typescript-eslint/no-wrapper-object-types
-    type SpyWrapper = (number | boolean) & { [PROP_SPY_SYMBOL]?: boolean; __meta?: PropSpyMeta }
-    let spy: SpyWrapper | undefined
-    if (typeof value === 'number') spy = new Number(value) as SpyWrapper
-    if (typeof value === 'boolean') spy = new Boolean(value) as SpyWrapper
-
-    if (spy) {
-      spy[PROP_SPY_SYMBOL] = true
-      spy.__meta = meta
-      return spy
-    }
-
-    return value
-  }
-
-  // ─────────────────────────────────────────────────────────────────────────────
-  // Core Logic
-  // ─────────────────────────────────────────────────────────────────────────────
-
-  const createAuditedProps = <T extends object | null>(
-    target: T,
-    stores: TrackingStores,
-    getComponent: () => string,
-    basePath = 'props',
-  ): T => {
-    if (!target || typeof target !== 'object' || isPropSpy(target)) return target
-
-    return new Proxy(target, {
-      get(obj, prop, receiver) {
-        const value = Reflect.get(obj, prop, receiver)
-        const propKey = String(prop)
-
-        // Ignore symbols and known React internal properties
-        if (typeof prop === 'symbol' || propKey === '$$typeof' || propKey.startsWith('_')) {
-          return value
-        }
-
-        const path = Array.isArray(target) ? `${basePath}[${propKey}]` : `${basePath}.${propKey}`
-        const component = getComponent()
-
-        // 1. Handle React internals or nulls (Log but don't wrap)
-        if (value == null || isReactInternal(value)) {
-          logRead(stores, path, component, value)
-          return value
-        }
-
-        // 2. Handle Primitives & Functions (Wrap & Log)
-        if (typeof value !== 'object' || typeof value === 'function') {
-          const wrapped = wrapPrimitiveOrFunction(
-            value as string | number | boolean | ((...args: unknown[]) => unknown),
-            path,
-            propKey,
-            stores,
-            getComponent,
-          )
-          logRead(stores, path, component, wrapped)
-          return wrapped
-        }
-
-        // 3. Handle Objects/Arrays (Recurse Proxy & Log)
-        const audited = createAuditedProps(value, stores, getComponent, path)
-        logRead(stores, path, component, audited)
-        return audited
-      },
-      ownKeys: (obj) => Reflect.ownKeys(obj),
-      getOwnPropertyDescriptor: (obj, prop) => Reflect.getOwnPropertyDescriptor(obj, prop),
-    })
-  }
-
-  const getSpyMetadataByUniqueId = (id: string): PropSpyMeta | null => {
-    return metadataMap.get(id) ?? null
-  }
-
-  return {
-    createAuditedProps,
-    getSpyMetadataByUniqueId,
-  }
-}