@wix/zero-config-implementation 1.8.0 → 1.10.0

package/dist/information-extractors/react/extractors/prop-tracker.d.ts

@@ -1,7 +1,5 @@
-import { PropSpyMeta, TrackingStores } from '../types';
-import { PropSpyContext } from '../utils/prop-spy';
+import { TrackingStores } from '../types';
 import { ReactExtractor } from './core/types';
-export type GetSpyMetadataFn = (id: string) => PropSpyMeta | null;
 export interface PropTrackerData {
     tag: string;
     role?: string;
@@ -10,13 +8,12 @@ export interface PropTrackerData {
 }
 export interface PropTrackerExtractorState {
     stores: TrackingStores;
-    spyContext: PropSpyContext;
 }
 /**
  * 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 declare function createPropTrackerExtractor(): {
     extractor: ReactExtractor;

package/dist/information-extractors/react/index.d.ts

@@ -5,5 +5,4 @@
  */
 export { ExtractorStore, runExtractors, buildElementTree, createPropTrackerExtractor, createCssPropertiesExtractor, } from './extractors';
 export type { ExtractionResult, RunExtractorsOptions, ExtractedElement, ReactExtractor, RenderContext, CreateElementEvent, RenderCompleteEvent, PropTrackerData, PropTrackerExtractorState, CssPropertiesData, } from './extractors';
-export type { CoupledComponentInfo, CoupledProp, TrackingStores, DOMBinding, PropReadInfo, PropWriteInfo, PropSpyMeta, } from './types';
-export type { PropSpyContext } from './utils/prop-spy';
+export type { CoupledComponentInfo, CoupledProp, TrackingStores, DOMBinding, PropWriteInfo, PropSpyMeta, } from './types';

package/dist/information-extractors/react/types.d.ts

@@ -1,24 +1,10 @@
 import { PropInfo } from '../ts/types';
 import { ExtractedElement } from './extractors/core/tree-builder';
-export declare const PROP_SPY_SYMBOL: unique symbol;
 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;
-}
-export interface PropReadInfo {
-    components: Set<string>;
-    value: unknown;
-}
 export interface PropWriteInfo {
     elements: Map<string, {
         tag: string;
@@ -30,8 +16,7 @@ export interface PropWriteInfo {
     }>;
 }
 export interface TrackingStores {
-    reads: Map<string, PropReadInfo>;
-    writes: Map<string, PropWriteInfo>;
+    propUsages: Map<string, PropWriteInfo>;
 }
 export interface DOMBinding {
     element: string;
@@ -40,7 +25,8 @@ export interface DOMBinding {
     elementId: string;
 }
 export interface CoupledProp extends PropInfo {
-    bindings: DOMBinding[];
+    /** Full stores.propUsages key for this prop, e.g. "props.linkUrl". */
+    propPath: string;
     logicOnly: boolean;
 }
 export interface CoupledComponentInfo {
@@ -48,4 +34,5 @@ export interface CoupledComponentInfo {
     props: Record<string, CoupledProp>;
     elements: ExtractedElement[];
     innerElementProps?: Map<string, Record<string, CoupledProp>>;
+    propUsages: TrackingStores['propUsages'];
 }

package/dist/information-extractors/react/utils/mock-generator.d.ts

@@ -1,9 +1,21 @@
 import { ComponentInfo } from '../../ts/types';
+export declare const PRESETS_WRAPPER_CLASS_NAME = "mock-presets-wrapper-probe";
 /**
  * Reset faker's seed and internal state for reproducible results
  */
 export declare function resetMockCounter(): void;
 /**
- * Generate mock props object from ComponentInfo
+ * Narrow interface for registering spy markers during mock generation.
+ * Satisfied structurally by PropSpyContext.
  */
-export declare function generateMockProps(componentInfo: ComponentInfo): Record<string, unknown>;
+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.
+ * When a registrar is provided, string and number values are spy-instrumented
+ * for DOM binding detection.
+ */
+export declare function generateMockProps(componentInfo: ComponentInfo, registrar?: PropSpyRegistrar): Record<string, unknown>;

package/package.json

@@ -4,7 +4,7 @@
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
-  "version": "1.8.0",
+  "version": "1.10.0",
   "description": "Core library for extracting component manifests from JS and CSS files",
   "type": "module",
   "main": "dist/index.js",
@@ -74,5 +74,5 @@
       ]
     }
   },
-  "falconPackageHash": "8ca973dc7cc82c6e8d0a333de6717b866e33337ee211bd335f3fa800"
+  "falconPackageHash": "21d3bc497b17268af6551d502a02de709d17f09eaa98040d2017ae4b"
 }

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

@@ -15,6 +15,7 @@
 import type { Result } from 'neverthrow'
 import { err, ok } from 'neverthrow'
 import { ParseError } from '../errors'
+import type { DOMBinding, TrackingStores } from '../information-extractors/react'
 import type { PropInfo, ResolvedType } from '../information-extractors/ts/types'
 import type { DataItem } from '../schema'
 import { DATA, MEDIA } from '../schema'
@@ -24,15 +25,42 @@ const { DATA_TYPE, WIX_TYPE_TO_DATA_TYPE } = DATA
 
 type ParseErrorInstance = InstanceType<typeof ParseError>
 
+function getBindingsForPath(propUsages: TrackingStores['propUsages'], path: string): DOMBinding[] {
+  const writeInfo = propUsages.get(path)
+  if (!writeInfo) return []
+
+  const result: DOMBinding[] = []
+  for (const [key, attrInfo] of writeInfo.attributes) {
+    const elementId = key.split(':')[0]
+    const elementInfo = writeInfo.elements.get(elementId)
+    if (elementInfo) {
+      result.push({
+        element: elementInfo.tag,
+        attribute: attrInfo.attr,
+        concatenated: attrInfo.concatenated,
+        elementId: elementInfo.elementId,
+      })
+    }
+  }
+  return result
+}
+
 /**
  * Converts a single PropInfo to a DataItem for the Wix Editor component schema.
  *
  * @param propInfo - The resolved TypeScript prop information to convert.
  * @param defaultValue - Optional default value for the data item.
+ * @param propUsages - The full stores.propUsages map for on-demand binding lookups.
+ * @param propPath - The full stores.propUsages key for this prop, e.g. "props.linkUrl".
  * @returns `Ok<DataItem>` on success, `Err<ParseError>` if an invariant is violated
  *          (e.g. an array type missing its element type).
  */
-export function buildDataItem(propInfo: PropInfo, defaultValue?: unknown): Result<DataItem, ParseErrorInstance> {
+export function buildDataItem(
+  propInfo: PropInfo,
+  defaultValue?: unknown,
+  propUsages?: TrackingStores['propUsages'],
+  propPath?: string,
+): Result<DataItem, ParseErrorInstance> {
   const dataItem: DataItem = {
     displayName: formatDisplayName(propInfo.name),
   }
@@ -41,7 +69,7 @@ export function buildDataItem(propInfo: PropInfo, defaultValue?: unknown): Resul
     dataItem.defaultValue = defaultValue
   }
 
-  const result = applyResolvedTypeToDataItem(dataItem, propInfo.resolvedType, propInfo)
+  const result = applyResolvedTypeToDataItem(dataItem, propInfo.resolvedType, propInfo, propUsages, propPath)
   if (result.isErr()) {
     return err(result.error)
   }
@@ -59,10 +87,14 @@ function applyResolvedTypeToDataItem(
   dataItem: DataItem,
   resolvedType: ResolvedType,
   propInfo: PropInfo,
+  propUsages?: TrackingStores['propUsages'],
+  propPath?: string,
 ): Result<void, ParseErrorInstance> {
+  const bindings = propUsages && propPath ? getBindingsForPath(propUsages, propPath) : undefined
+
   switch (resolvedType.kind) {
     case 'primitive':
-      handlePrimitiveType(dataItem, resolvedType, propInfo)
+      handlePrimitiveType(dataItem, resolvedType, propInfo, bindings)
       return ok(undefined)
 
     case 'literal':
@@ -74,16 +106,16 @@ function applyResolvedTypeToDataItem(
       return ok(undefined)
 
     case 'array':
-      return handleArrayType(dataItem, resolvedType)
+      return handleArrayType(dataItem, resolvedType, propUsages, propPath)
 
     case 'object':
-      return handleObjectType(dataItem, resolvedType)
+      return handleObjectType(dataItem, resolvedType, propUsages, propPath)
 
     case 'union':
       return handleUnionType(dataItem, resolvedType, propInfo)
 
     case 'function':
-      handleFunctionType(dataItem, propInfo)
+      handleFunctionType(dataItem, propInfo, bindings)
       return ok(undefined)
 
     case 'semantic':
@@ -100,14 +132,34 @@ function applyResolvedTypeToDataItem(
 
 /**
  * Handles primitive types (string, number, boolean).
+ * When bindings are provided, uses bound DOM attributes to infer more specific types:
+ * - string bound to `dir` → direction
+ * - string bound to `href` on an anchor element (non-concatenated) → webUrl
+ * - string bound to `id` → guid
+ * - string bound to `pattern` → regex
  * Unrecognized primitives silently fall back to text.
  */
-function handlePrimitiveType(dataItem: DataItem, resolvedType: ResolvedType, propInfo: PropInfo): void {
+function handlePrimitiveType(
+  dataItem: DataItem,
+  resolvedType: ResolvedType,
+  propInfo: PropInfo,
+  bindings?: DOMBinding[],
+): void {
   const typeValue = (resolvedType.value as string | undefined)?.toLowerCase() || propInfo.type.toLowerCase()
 
   if (typeValue.includes('string')) {
-    dataItem.dataType = DATA_TYPE.text
-    dataItem.text = {}
+    if (bindings?.some((b) => b.attribute === 'dir')) {
+      dataItem.dataType = DATA_TYPE.direction
+    } else if (bindings?.some((b) => b.attribute === 'href' && b.element === 'a' && !b.concatenated)) {
+      dataItem.dataType = DATA_TYPE.webUrl
+    } else if (bindings?.some((b) => b.attribute === 'id')) {
+      dataItem.dataType = DATA_TYPE.guid
+    } else if (bindings?.some((b) => b.attribute === 'pattern')) {
+      dataItem.dataType = DATA_TYPE.regex
+    } else {
+      dataItem.dataType = DATA_TYPE.text
+      dataItem.text = {}
+    }
   } else if (typeValue.includes('number')) {
     dataItem.dataType = DATA_TYPE.number
     dataItem.number = {}
@@ -141,8 +193,15 @@ function handleEnumType(dataItem: DataItem): void {
 /**
  * Handles array types. Fails with a `ParseError` if the resolved type
  * has kind 'array' but is missing its `elementType` (invariant violation).
+ * propPath is forwarded unchanged — getBindingsForPath strips numeric indices
+ * so `props.items.url` matches propUsages like `props.items[0].url`.
  */
-function handleArrayType(dataItem: DataItem, resolvedType: ResolvedType): Result<void, ParseErrorInstance> {
+function handleArrayType(
+  dataItem: DataItem,
+  resolvedType: ResolvedType,
+  propUsages?: TrackingStores['propUsages'],
+  propPath?: string,
+): Result<void, ParseErrorInstance> {
   if (resolvedType.kind !== 'array' || resolvedType.elementType === undefined) {
     return err(
       new ParseError('Invalid array type: resolved type has kind "array" but is missing elementType', {
@@ -153,12 +212,18 @@ function handleArrayType(dataItem: DataItem, resolvedType: ResolvedType): Result
 
   dataItem.dataType = DATA_TYPE.arrayItems
   const elementDataItem: DataItem = {}
-  const result = applyResolvedTypeToDataItem(elementDataItem, resolvedType.elementType, {
-    name: 'element',
-    required: false,
-    type: resolvedType.elementType.kind,
-    resolvedType: resolvedType.elementType,
-  } satisfies PropInfo)
+  const result = applyResolvedTypeToDataItem(
+    elementDataItem,
+    resolvedType.elementType,
+    {
+      name: 'element',
+      required: false,
+      type: resolvedType.elementType.kind,
+      resolvedType: resolvedType.elementType,
+    } satisfies PropInfo,
+    propUsages,
+    propPath,
+  )
 
   if (result.isErr()) {
     return result
@@ -173,16 +238,23 @@ function handleArrayType(dataItem: DataItem, resolvedType: ResolvedType): Result
 
 /**
  * Handles object types with nested properties.
- * Recursively calls `buildDataItem` for each property.
+ * Recursively calls `buildDataItem` for each property, appending the property name
+ * to propPath so nested bindings can be looked up on-demand.
  */
-function handleObjectType(dataItem: DataItem, resolvedType: ResolvedType): Result<void, ParseErrorInstance> {
+function handleObjectType(
+  dataItem: DataItem,
+  resolvedType: ResolvedType,
+  propUsages?: TrackingStores['propUsages'],
+  propPath?: string,
+): Result<void, ParseErrorInstance> {
   dataItem.dataType = DATA_TYPE.data
 
   if (resolvedType.properties) {
     const nestedItems: Record<string, DataItem> = {}
 
     for (const [propName, propInfo] of Object.entries(resolvedType.properties)) {
-      const result = buildDataItem(propInfo, undefined)
+      const childPath = propPath ? `${propPath}.${propName}` : propName
+      const result = buildDataItem(propInfo, undefined, propUsages, childPath)
       if (result.isErr()) {
         return err(result.error)
       }
@@ -297,26 +369,39 @@ function handleSemanticType(dataItem: DataItem, resolvedType: ResolvedType): voi
   dataItem.text = {}
 }
 
+const EVENT_HANDLER_ATTR_TO_DATA_TYPE: Record<string, string> = {
+  onclick: DATA_TYPE.onClick,
+  onchange: DATA_TYPE.onChange,
+  onkeypress: DATA_TYPE.onKeyPress,
+  onkeyup: DATA_TYPE.onKeyUp,
+  onsubmit: DATA_TYPE.onSubmit,
+}
+
 /**
  * Handles function types — maps to event handlers.
+ * Checks bound DOM attributes first (e.g. `onChange` → onChange), then falls back to prop name.
  */
-function handleFunctionType(dataItem: DataItem, propInfo: PropInfo): void {
-  const propName = propInfo.name.toLowerCase()
-
-  if (propName === 'onclick') {
-    dataItem.dataType = DATA_TYPE.onClick
-  } else if (propName === 'onchange') {
-    dataItem.dataType = DATA_TYPE.onChange
-  } else if (propName === 'onkeypress') {
-    dataItem.dataType = DATA_TYPE.onKeyPress
-  } else if (propName === 'onkeyup') {
-    dataItem.dataType = DATA_TYPE.onKeyUp
-  } else if (propName === 'onsubmit') {
-    dataItem.dataType = DATA_TYPE.onSubmit
-  } else {
-    dataItem.dataType = DATA_TYPE.function
-    dataItem.function = {}
+function handleFunctionType(dataItem: DataItem, propInfo: PropInfo, bindings?: DOMBinding[]): void {
+  // Check bound attributes first — they reflect actual DOM wiring regardless of prop name
+  if (bindings) {
+    for (const binding of bindings) {
+      const dataType = EVENT_HANDLER_ATTR_TO_DATA_TYPE[binding.attribute.toLowerCase()]
+      if (dataType) {
+        dataItem.dataType = dataType
+        return
+      }
+    }
   }
+
+  // Fall back to prop name matching
+  const dataType = EVENT_HANDLER_ATTR_TO_DATA_TYPE[propInfo.name.toLowerCase()]
+  if (dataType) {
+    dataItem.dataType = dataType
+    return
+  }
+
+  dataItem.dataType = DATA_TYPE.function
+  dataItem.function = {}
 }
 
 /**

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

@@ -5,6 +5,7 @@ import type {
   CoupledProp,
   CssPropertiesData,
   ExtractedElement,
+  TrackingStores,
 } from '../information-extractors/react'
 import type {
   CssCustomPropertyItem,
@@ -34,8 +35,8 @@ function buildEditorElement(component: ComponentInfoWithCss): EditorElement {
   return {
     selector: buildSelector(rootElement),
     displayName: formatDisplayName(component.componentName),
-    data: buildData(component.props),
-    elements: buildElements(childElements, component.innerElementProps),
+    data: buildData(component.props, component.propUsages),
+    elements: buildElements(childElements, component.innerElementProps, component.propUsages),
     cssProperties: buildCssProperties(rootElement),
     cssCustomProperties: buildCssCustomPropertiesForElement(rootElement),
   }
@@ -48,7 +49,10 @@ function buildSelector(rootElement?: ExtractedElement): string {
   return rootElement?.tag ?? ''
 }
 
-function buildData(props: Record<string, CoupledProp>): Record<string, DataItem> {
+function buildData(
+  props: Record<string, CoupledProp>,
+  propUsages: TrackingStores['propUsages'],
+): Record<string, DataItem> {
   const data: Record<string, DataItem> = {}
 
   for (const [name, prop] of Object.entries(props)) {
@@ -58,7 +62,7 @@ function buildData(props: Record<string, CoupledProp>): Record<string, DataItem>
     // Extract default value for buildDataItem
     const defaultValue = prop.defaultValue?.kind !== 'unresolved' ? prop.defaultValue?.value : undefined
 
-    const result = buildDataItem(prop, defaultValue)
+    const result = buildDataItem(prop, defaultValue, propUsages, prop.propPath)
     if (result.isOk()) {
       data[name] = result.value
     }
@@ -70,12 +74,13 @@ function buildData(props: Record<string, CoupledProp>): Record<string, DataItem>
 function buildElements(
   elements: ExtractedElement[],
   innerElementProps?: CoupledComponentInfo['innerElementProps'],
+  propUsages?: TrackingStores['propUsages'],
 ): Record<string, ElementItem> {
   const result: Record<string, ElementItem> = {}
 
   for (const el of elements) {
     const elementData = innerElementProps?.get(el.traceId)
-    const data = elementData ? buildData(elementData) : undefined
+    const data = elementData && propUsages ? buildData(elementData, propUsages) : undefined
     const cssProps = buildCssProperties(el)
     const cssCustomProps = buildCssCustomPropertiesForElement(el)
 
@@ -91,7 +96,7 @@ function buildElements(
         // CSS custom properties from matched rules for this element
         ...(Object.keys(cssCustomProps).length > 0 && { cssCustomProperties: cssCustomProps }),
         // Recursively build nested elements
-        elements: el.children.length > 0 ? buildElements(el.children, innerElementProps) : undefined,
+        elements: el.children.length > 0 ? buildElements(el.children, innerElementProps, propUsages) : undefined,
       },
     }
   }

package/src/index.ts

@@ -193,14 +193,12 @@ export type {
   PropTrackerData,
   PropTrackerExtractorState,
   CssPropertiesData,
-  PropSpyContext,
 } from './information-extractors/react'
 export type {
   CoupledComponentInfo,
   CoupledProp,
   DOMBinding,
   TrackingStores,
-  PropReadInfo,
   PropWriteInfo,
   PropSpyMeta,
 } from './information-extractors/react'

package/src/information-extractors/react/extractors/core/runner.ts

@@ -12,7 +12,6 @@
 import type { ComponentType } from 'react'
 import { type CreateElementListener, renderWithExtractors } from '../../../../component-renderer'
 import type { ComponentInfo } from '../../../ts/types'
-import { generateMockProps, resetMockCounter } from '../../utils/mock-generator'
 import { ExtractorStore } from './store'
 import { type ExtractedElement, buildElementTree } from './tree-builder'
 import type { CreateElementEvent, ReactExtractor, RenderContext } from './types'
@@ -50,17 +49,14 @@ export function runExtractors(
   extractors: ReactExtractor[],
   options?: RunExtractorsOptions,
 ): ExtractionResult {
-  // Reset mock counter for reproducible results
-  resetMockCounter()
-
   // Create shared store
   const store = new ExtractorStore()
 
-  // Create render context with mutable props
+  // Create render context; extractors populate props in onBeforeRender
   const context: RenderContext = {
     componentInfo,
     component,
-    props: generateMockProps(componentInfo),
+    props: {},
     store,
   }
 

package/src/information-extractors/react/extractors/core/tree-builder.ts

@@ -8,6 +8,7 @@
 import { pascalCase } from 'case-anything'
 import { type DefaultTreeAdapterMap, parseFragment } from 'parse5'
 import { TRACE_ATTR } from '../../../../component-renderer'
+import { PRESETS_WRAPPER_CLASS_NAME } from '../../utils/mock-generator'
 import type { CssPropertiesData } from '../css-properties'
 import { addTextProperties } from '../css-properties'
 import type { ExtractorStore } from './store'
@@ -146,7 +147,9 @@ function getTextContent(element: Element): string {
  */
 function getElementNamePart(element: Element, getElementById: (id: string) => Element | undefined): string {
   const id = getAttribute(element, 'id')
-  if (id) {
+  // Skip spy-instrumented ids (mock_propName_XXXXXX) — they are runtime mock values,
+  // not semantic identifiers, and would produce garbage element names.
+  if (id && !id.startsWith('mock_')) {
     return pascalCase(id)
   }
 
@@ -173,6 +176,22 @@ function getElementNamePart(element: Element, getElementById: (id: string) => El
 // Tree Building
 // ─────────────────────────────────────────────────────────────────────────────
 
+/**
+ * Replaces any presetsWrapper element (identified by PRESETS_WRAPPER_CLASS_NAME on its class
+ * attribute) with its children, so the real root element is promoted to the top level.
+ * The presetsWrapper is injected by the Wix renderer and is not a real component element.
+ */
+function unwrapPresetsWrappers(nodes: Node[]): Node[] {
+  return nodes.flatMap((node) => {
+    if (!isElement(node)) return [node]
+    const classAttr = getAttribute(node, 'class')
+    if (getAttribute(node, TRACE_ATTR) && classAttr?.includes(PRESETS_WRAPPER_CLASS_NAME)) {
+      return [...node.childNodes] as Array<Node>
+    }
+    return [node]
+  })
+}
+
 /**
  * Builds an element tree from HTML, merging with store data.
  * Each element gets a semantic name from concatenated ancestor names.
@@ -258,10 +277,12 @@ export function buildElementTree(html: string, store: ExtractorStore): Extracted
   }
 
   // Start with empty ancestor path, first traced element is root
+  const topLevelNodes = unwrapPresetsWrappers([...fragment.childNodes])
+
   let isFirst = true
   const result: ExtractedElement[] = []
 
-  for (const node of fragment.childNodes) {
+  for (const node of topLevelNodes) {
     const elements = walkTree(node, '', isFirst)
     if (elements.length > 0) {
       result.push(...elements)