@wix/zero-config-implementation 1.5.0

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

@@ -0,0 +1,331 @@
+/**
+ * Mock Value Generator - Creates mock values from PropInfo types for DOM coupling analysis
+ * Uses @faker-js/faker for realistic mock data generation
+ */
+
+import { faker } from '@faker-js/faker'
+import type { ComponentInfo, DefaultValue, PropInfo, ResolvedType } from '../../ts/types'
+
+/**
+ * Reset faker's seed and internal state for reproducible results
+ */
+export function resetMockCounter(): void {
+  faker.seed(42)
+}
+
+/**
+ * Generate mock props object from ComponentInfo
+ */
+export function generateMockProps(componentInfo: ComponentInfo): Record<string, unknown> {
+  const mockProps: Record<string, unknown> = {}
+
+  for (const [propName, propInfo] of Object.entries(componentInfo.props)) {
+    mockProps[propName] = generateMockValue(propInfo, propName)
+  }
+
+  return mockProps
+}
+
+/**
+ * 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) {
+    return extractDefaultValueValue(propInfo.defaultValue)
+  }
+
+  return generateValueFromResolvedType(propInfo.resolvedType, propName)
+}
+
+/**
+ * Extract the actual value from a DefaultValue object
+ */
+function extractDefaultValueValue(defaultValue: DefaultValue): unknown {
+  switch (defaultValue.kind) {
+    case 'string':
+    case 'number':
+    case 'boolean':
+    case 'null':
+      return defaultValue.value
+    case 'unresolved':
+      // For unresolved values, return the raw string (e.g., MY_CONST)
+      return defaultValue.value
+  }
+}
+
+/**
+ * Generate a mock value from a ResolvedType
+ */
+function generateValueFromResolvedType(resolvedType: ResolvedType, propName: string): unknown {
+  const kind = resolvedType.kind
+
+  // Handle semantic types (from React or Wix packages)
+  if (kind === 'semantic') {
+    return generateSemanticValue(resolvedType.value as string, propName)
+  }
+
+  // Handle structural types
+  switch (kind) {
+    case 'primitive':
+      return generatePrimitiveValue(resolvedType.value as string, propName)
+
+    case 'literal':
+      return resolvedType.value
+
+    case 'union':
+      return generateUnionValue(resolvedType, propName)
+
+    case 'intersection':
+      return generateIntersectionValue(resolvedType, propName)
+
+    case 'array':
+      return generateArrayValue(resolvedType, propName)
+
+    case 'object':
+      return generateObjectValue(resolvedType, propName)
+
+    case 'enum':
+      return generateEnumValue(resolvedType)
+
+    case 'function':
+      return generateMockFunction(propName)
+
+    default:
+      // Default to a string for unknown types
+      return `mock_${propName}_${faker.string.alphanumeric(6)}`
+  }
+}
+
+/**
+ * Generate a mock value for semantic types (React or Wix types)
+ */
+function generateSemanticValue(semanticType: string, propName: string): unknown {
+  switch (semanticType) {
+    // Wix semantic types
+    case 'Image':
+    case 'ImageUri':
+      return generateMockImage()
+    case 'Video':
+    case 'VideoUri':
+      return generateMockVideo()
+    case 'Link':
+      return generateMockLink()
+    case 'A11y':
+      return generateMockA11y()
+    case 'VectorArt':
+      return generateMockVectorArt()
+    case 'Audio':
+    case 'AudioUri':
+      return generateMockAudio()
+    case 'RichText':
+      return `<p>${faker.lorem.paragraph()}</p>`
+    case 'LocalDate':
+      return faker.date.recent().toISOString().split('T')[0]
+    case 'LocalTime':
+      return faker.date.recent().toISOString().split('T')[1].split('.')[0]
+    case 'LocalDateTime':
+      return faker.date.recent().toISOString().replace('Z', '')
+    case 'WebUrl':
+      return faker.internet.url()
+    case 'Direction':
+      return faker.helpers.arrayElement(['ltr', 'rtl'])
+    case 'MenuItems':
+      return generateMockMenuItems()
+    case 'Container':
+      return null // React children - typically null for testing
+
+    // React types
+    case 'ReactNode':
+    case 'ReactElement':
+      return null // Return null for React nodes in mock testing
+
+    case 'CSSProperties':
+      return {
+        color: faker.color.rgb(),
+        fontSize: faker.number.int({ min: 12, max: 24 }),
+      }
+
+    default:
+      // Default to a string for unknown semantic types
+      return `mock_${propName}_${faker.string.alphanumeric(6)}`
+  }
+}
+
+/**
+ * Generate a primitive value
+ */
+function generatePrimitiveValue(primitiveType: string, propName: string): unknown {
+  switch (primitiveType) {
+    case 'string':
+      return `mock_${propName}_${faker.string.alphanumeric(6)}`
+    case 'number':
+      return faker.number.int({ min: 1, max: 100 })
+    case 'boolean':
+      return faker.datatype.boolean()
+    case 'null':
+      return null
+    case 'undefined':
+      return undefined
+    default:
+      return `mock_${propName}_${faker.string.alphanumeric(6)}`
+  }
+}
+
+/**
+ * Generate a value from a union type (pick the first non-null option)
+ */
+function generateUnionValue(resolvedType: ResolvedType, propName: string): unknown {
+  const types = resolvedType.types ?? []
+
+  // Prefer string literals for textEnum-like unions
+  const stringLiteral = types.find((t) => t.kind === 'literal' && typeof t.value === 'string')
+  if (stringLiteral) {
+    return stringLiteral.value
+  }
+
+  // Otherwise, use the first type
+  if (types.length > 0) {
+    return generateValueFromResolvedType(types[0], propName)
+  }
+
+  return `mock_${propName}_${faker.string.alphanumeric(6)}`
+}
+
+/**
+ * Generate a value from an intersection type (merge object properties)
+ */
+function generateIntersectionValue(resolvedType: ResolvedType, propName: string): 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}`)
+      }
+    }
+  }
+
+  return Object.keys(merged).length > 0 ? merged : `mock_${propName}_${faker.string.alphanumeric(6)}`
+}
+
+/**
+ * Generate an array value
+ */
+function generateArrayValue(resolvedType: ResolvedType, propName: string): 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]`),
+  ]
+}
+
+/**
+ * Generate an object value from properties
+ */
+function generateObjectValue(resolvedType: ResolvedType, propName: string): 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}`)
+  }
+
+  return obj
+}
+
+/**
+ * Generate an enum value (pick the first option)
+ */
+function generateEnumValue(resolvedType: ResolvedType): unknown {
+  const types = resolvedType.types ?? []
+  const firstLiteral = types.find((t) => t.kind === 'literal')
+
+  if (firstLiteral) {
+    return firstLiteral.value
+  }
+
+  return 'default'
+}
+
+/**
+ * Generate a mock function
+ */
+function generateMockFunction(propName: string): (...args: unknown[]) => void {
+  const fn = function mockFn(): void {
+    // No-op mock function
+  }
+  Object.defineProperty(fn, 'name', { value: `mock_${propName}` })
+  return fn
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Wix Semantic Type Generators (built from faker primitives)
+// ─────────────────────────────────────────────────────────────────────────────
+
+function generateMockImage(): Record<string, unknown> {
+  return {
+    uri: faker.system.fileName({ extensionCount: 1 }),
+    url: faker.image.url(),
+    width: faker.number.int({ min: 100, max: 1920 }),
+    height: faker.number.int({ min: 100, max: 1080 }),
+    name: faker.lorem.words(2),
+    alt: faker.lorem.sentence(),
+  }
+}
+
+function generateMockVideo(): Record<string, unknown> {
+  return {
+    url: `${faker.internet.url()}/video.mp4`,
+    width: faker.number.int({ min: 640, max: 1920 }),
+    height: faker.number.int({ min: 480, max: 1080 }),
+    duration: faker.number.int({ min: 10, max: 300 }),
+    name: faker.lorem.words(2),
+  }
+}
+
+function generateMockLink(): Record<string, unknown> {
+  return {
+    href: faker.internet.url(),
+    target: faker.helpers.arrayElement(['_blank', '_self']),
+    rel: 'noopener noreferrer',
+  }
+}
+
+function generateMockA11y(): Record<string, unknown> {
+  return {
+    ariaLabel: faker.lorem.sentence(),
+    role: faker.helpers.arrayElement(['button', 'link', 'img', 'region']),
+    tabIndex: faker.helpers.arrayElement([0, -1]),
+  }
+}
+
+function generateMockVectorArt(): Record<string, unknown> {
+  return {
+    svgId: faker.string.uuid(),
+    url: `${faker.internet.url()}/icon.svg`,
+  }
+}
+
+function generateMockAudio(): Record<string, unknown> {
+  return {
+    url: `${faker.internet.url()}/audio.mp3`,
+    duration: faker.number.int({ min: 30, max: 600 }),
+    name: faker.music.songName(),
+  }
+}
+
+function generateMockMenuItems(): unknown[] {
+  return Array.from({ length: faker.number.int({ min: 2, max: 5 }) }, () => ({
+    id: faker.string.uuid(),
+    label: faker.lorem.words(2),
+    link: generateMockLink(),
+  }))
+}

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

@@ -0,0 +1,168 @@
+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,
+  }
+}