@wix/zero-config-implementation 1.78.0 → 1.79.0

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

@@ -1,7 +1,7 @@
-import { describe, expect, it } from 'vitest'
-import { createRefElementMarker, parseRefElementMarker } from '../../../ref-elements/path-utils'
+import { beforeEach, describe, expect, it } from 'vitest'
+import { createRefElementMarker, parseRefElementMarker } from '../../../extensions/ref-elements/path-utils'
 import type { ComponentInfo } from '../../ts/types'
-import { generateMockProps, resetMockCounter } from './mock-generator'
+import { generateMockContextValues, generateMockProps, resetMockCounter } from './mock-generator'
 
 describe('generateMockProps', () => {
   it('injects a dedicated ref-element id marker into each eligible elementProps branch', () => {
@@ -129,3 +129,107 @@ describe('generateMockProps', () => {
     expect(parseRefElementMarker(ctaProps.id)).toBe('card.elementProps.cta')
   })
 })
+
+describe('generateMockContextValues', () => {
+  beforeEach(() => {
+    resetMockCounter()
+  })
+
+  it('returns an empty object for an empty schema', () => {
+    expect(generateMockContextValues({ items: {} })).toEqual({})
+  })
+
+  it('maps text to a string', () => {
+    const result = generateMockContextValues({ items: { title: { dataType: 'text' } } })
+    expect(typeof result.title).toBe('string')
+  })
+
+  it('maps number to a number', () => {
+    const result = generateMockContextValues({ items: { count: { dataType: 'number' } } })
+    expect(typeof result.count).toBe('number')
+  })
+
+  it('maps boolean to a boolean', () => {
+    const result = generateMockContextValues({ items: { active: { dataType: 'boolean' } } })
+    expect(typeof result.active).toBe('boolean')
+  })
+
+  it('maps function to a function', () => {
+    const result = generateMockContextValues({ items: { onAction: { dataType: 'function' } } })
+    expect(typeof result.onAction).toBe('function')
+  })
+
+  it('maps richText to an HTML paragraph string', () => {
+    const result = generateMockContextValues({ items: { body: { dataType: 'richText' } } })
+    expect(result.body as string).toMatch(/^<p>/)
+  })
+
+  it('maps image to an image-shaped object', () => {
+    const result = generateMockContextValues({ items: { photo: { dataType: 'image' } } })
+    expect(result.photo).toMatchObject({
+      uri: expect.any(String),
+      url: expect.any(String),
+      width: expect.any(Number),
+      height: expect.any(Number),
+    })
+  })
+
+  it('maps link to a link-shaped object', () => {
+    const result = generateMockContextValues({ items: { destination: { dataType: 'link' } } })
+    expect(result.destination).toMatchObject({ href: expect.any(String), target: expect.any(String) })
+  })
+
+  it('maps data with a nested schema to a nested object', () => {
+    const result = generateMockContextValues({
+      items: {
+        event: {
+          dataType: 'data',
+          data: { items: { name: { dataType: 'text' } } },
+        },
+      },
+    })
+    expect(result.event).toMatchObject({ name: expect.any(String) })
+  })
+
+  it('maps data with an empty schema to a permissive mock that handles Object.keys safely', () => {
+    const result = generateMockContextValues({
+      items: { event: { dataType: 'data', data: { items: {} } } },
+    })
+    expect(() => Object.keys(result.event as object)).not.toThrow()
+    expect(Object.keys(result.event as object)).toHaveLength(0)
+  })
+
+  it('returns a permissive fallback for undeclared context fields so deep access chains do not crash', () => {
+    const result = generateMockContextValues({ items: {} })
+    const undeclared = (result as Record<string, unknown>).anything
+    expect(() => Object.keys(undeclared as object)).not.toThrow()
+    expect(Object.keys(undeclared as object)).toHaveLength(0)
+    const deeplyNested = (undeclared as Record<string, unknown>).deeply
+    expect(() => (deeplyNested as Record<string, unknown>)?.nested).not.toThrow()
+  })
+
+  it('maps arrayItems with a nested schema to a single-element array containing the element object', () => {
+    const result = generateMockContextValues({
+      items: {
+        tickets: {
+          dataType: 'arrayItems',
+          arrayItems: { item: { dataType: 'data', data: { items: { price: { dataType: 'number' } } } } },
+        },
+      },
+    })
+    expect(result.tickets).toHaveLength(1)
+    expect((result.tickets as Record<string, unknown>[])[0]).toMatchObject({ price: expect.any(Number) })
+  })
+
+  it('maps arrayItems with no item schema to an empty array', () => {
+    const result = generateMockContextValues({
+      items: { tickets: { dataType: 'arrayItems', arrayItems: {} } },
+    })
+    expect(result.tickets).toEqual([])
+  })
+
+  it('falls back to a string for unknown dataTypes', () => {
+    const result = generateMockContextValues({ items: { something: { dataType: 'unknown-type' } } })
+    expect(typeof result.something).toBe('string')
+  })
+})

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

@@ -4,7 +4,11 @@
  */
 
 import { faker } from '@faker-js/faker'
-import { createRefElementMarker, extractElementPropsPathFromPropPath } from '../../../ref-elements/path-utils'
+import type { ContextSchema } from '../../../extensions/context-providers/types'
+import {
+  createRefElementMarker,
+  extractElementPropsPathFromPropPath,
+} from '../../../extensions/ref-elements/path-utils'
 import type { ComponentInfo, DefaultValue, PropInfo, ResolvedType } from '../../ts/types'
 
 export const PRESETS_WRAPPER_CLASS_NAME = 'mock-presets-wrapper-probe'
@@ -484,3 +488,102 @@ function generateMockMenuItems(): unknown[] {
     link: generateMockLink(),
   }))
 }
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Context Schema Mock Generator
+// ─────────────────────────────────────────────────────────────────────────────
+
+/**
+ * A recursive Proxy that safely handles any property access, function call, or string coercion.
+ * Used as a fallback for context fields not declared in the schema.
+ */
+function buildPermissiveMock(): unknown {
+  const mock: unknown = new Proxy((() => {}) as (...args: unknown[]) => unknown, {
+    get(_target, prop) {
+      if (prop === 'then') return undefined // prevent thenable detection
+      if (prop === Symbol.toPrimitive) return (_hint: string) => 'mock'
+      if (prop === Symbol.iterator) return function* () {}
+      if (prop === Symbol.asyncIterator) return async function* () {}
+      if (typeof prop === 'symbol') return undefined
+      return mock
+    },
+    ownKeys() {
+      return []
+    },
+    getOwnPropertyDescriptor() {
+      return undefined
+    },
+    apply() {
+      return mock
+    },
+  })
+  return mock
+}
+
+/**
+ * Wraps schema-derived values in a Proxy so that any property NOT declared in the schema
+ * returns a permissive mock instead of undefined, preventing crashes on undeclared field access.
+ */
+function buildSchemaSeededProxy(schemaValues: Record<string, unknown>): Record<string, unknown> {
+  return new Proxy(schemaValues, {
+    get(target, prop) {
+      if (prop === 'then') return undefined // prevent thenable/Promise detection
+      if (typeof prop === 'symbol') return Reflect.get(target, prop)
+      if (Object.prototype.hasOwnProperty.call(target, prop)) return target[prop as string]
+      return buildPermissiveMock()
+    },
+  })
+}
+
+/** Generate mock context values from a context extension schema. */
+export function generateMockContextValues(schema: ContextSchema): Record<string, unknown> {
+  const result: Record<string, unknown> = {}
+  for (const [key, item] of Object.entries(schema.items)) {
+    result[key] = generateValueFromResolvedType(contextDataTypeToResolvedType(item), key, `context.${key}`)
+  }
+  return buildSchemaSeededProxy(result)
+}
+
+function contextDataTypeToResolvedType(item: ContextSchema['items'][string]): ResolvedType {
+  switch (item.dataType) {
+    case 'text':
+      return { kind: 'primitive', value: 'string' }
+    case 'richText':
+      return { kind: 'semantic', value: 'RichText' }
+    case 'image':
+      return { kind: 'semantic', value: 'Image' }
+    case 'video':
+      return { kind: 'semantic', value: 'Video' }
+    case 'vectorArt':
+      return { kind: 'semantic', value: 'VectorArt' }
+    case 'link':
+      return { kind: 'semantic', value: 'Link' }
+    case 'function':
+      return { kind: 'function' }
+    case 'number':
+      return { kind: 'primitive', value: 'number' }
+    case 'boolean':
+      return { kind: 'primitive', value: 'boolean' }
+    case 'arrayItems': {
+      const itemEntry = item.arrayItems?.item
+      if (itemEntry) {
+        const itemValue = generateValueFromResolvedType(
+          contextDataTypeToResolvedType(itemEntry),
+          'item',
+          'context.arrayItem',
+        )
+        return { kind: 'literal', value: [itemValue] }
+      }
+      return { kind: 'literal', value: [] }
+    }
+    case 'data': {
+      const nestedSchema = item.data
+      if (nestedSchema?.items && Object.keys(nestedSchema.items).length > 0) {
+        return { kind: 'literal', value: generateMockContextValues(nestedSchema) }
+      }
+      return { kind: 'literal', value: buildPermissiveMock() }
+    }
+    default:
+      return { kind: 'primitive', value: 'string' }
+  }
+}

package/src/manifest-pipeline.ts

@@ -15,10 +15,13 @@ import {
 } from './information-extractors/react'
 import type { CoupledComponentInfo, CoupledProp, DOMBinding, TrackingStores } from './information-extractors/react'
 
+import {
+  extractElementPropsPathFromPropPath,
+  extractParentElementPropsPath,
+} from './extensions/ref-elements/path-utils'
 import { matchCssSelectors, parseCss } from './information-extractors/css'
 import type { CSSParserAPI } from './information-extractors/css'
 import { compileSass } from './information-extractors/css/sass-adapter'
-import { extractElementPropsPathFromPropPath, extractParentElementPropsPath } from './ref-elements/path-utils'
 
 import type { ComponentType } from 'react'
 

package/src/module-loader.test.ts

@@ -2,9 +2,9 @@ import { createRequire } from 'node:module'
 import path from 'node:path'
 import { pathToFileURL } from 'node:url'
 import { describe, expect, it } from 'vitest'
+import { readRefElementComponentType } from './extensions/ref-elements/component-tag'
 import { loadCjsModule, loadModuleForExtraction } from './module-loader'
 import { readLoaderPortRefStateForTests, readRegisteredRefElementModuleUrlsForTests } from './react-runtime-loader'
-import { readRefElementComponentType } from './ref-elements/component-tag'
 
 const require = createRequire(import.meta.url)
 

package/src/module-loader.ts

@@ -4,8 +4,8 @@ import React from 'react'
 import type { ComponentType } from 'react'
 import ReactDOM from 'react-dom'
 
+import type { RefElementModule } from './extensions/ref-elements/types'
 import { ensureReactRuntimeLoader, loadTaggedCjsModule, prepareRefElementEsmImport } from './react-runtime-loader'
-import type { RefElementModule } from './ref-elements/types'
 
 /**
  * Structured failure from `loadModule` when both ESM import and CJS require fail.

package/src/react-runtime-loader.ts

@@ -2,8 +2,8 @@ import { createHash } from 'node:crypto'
 import { createRequire, register } from 'node:module'
 import { fileURLToPath, pathToFileURL } from 'node:url'
 import { MessageChannel, MessagePort } from 'node:worker_threads'
-import { buildRefElementTaggerSource, tagRefElementComponentForCleanup } from './ref-elements/component-tag'
-import type { RefElementModule } from './ref-elements/types'
+import { buildRefElementTaggerSource, tagRefElementComponentForCleanup } from './extensions/ref-elements/component-tag'
+import type { RefElementModule } from './extensions/ref-elements/types'
 
 const JSX_INTERCEPTOR_STATE_KEY = 'zero-config:jsx-interceptor'
 const JSX_ORIGINALS_KEY = 'zero-config:jsx-originals'
@@ -68,6 +68,32 @@ interface RefElementRuntimeState {
   originalModuleLoad: InternalModuleApi['_load'] | null
 }
 
+/**
+ * Returns the URL that the ESM loader will assign to a context provider module
+ * when it is imported transitively from a ref-entry-signed statics bundle.
+ *
+ * When runtimeModules is non-empty, the statics bundle entry URL carries a
+ * `?zero-config-ref-entry=HASH` signature, and `shouldPropagateRefElementEntrySignature`
+ * propagates that hash to every non-node_modules file: import. `captureHookContext`
+ * must import the provider at the same signed URL so both paths hit the same Node.js
+ * ESM cache entry (and therefore the same `createContext` return value).
+ *
+ * When runtimeModules is empty, no hash is ever appended, so the plain URL is correct.
+ */
+export function computeSignedContextProviderUrl(resolvedModuleUrl: string, runtimeModules: RefElementModule[]): string {
+  if (runtimeModules.length === 0) {
+    return resolvedModuleUrl
+  }
+
+  const registeredModules = mergeRefElementModules(runtimeModules)
+  const signature = buildRefElementEntrySignature(registeredModules)
+  const signedUrl = new URL(resolvedModuleUrl)
+  if (!signedUrl.searchParams.has(REF_ELEMENT_ENTRY_SIGNATURE_QUERY_PARAM)) {
+    signedUrl.searchParams.set(REF_ELEMENT_ENTRY_SIGNATURE_QUERY_PARAM, signature)
+  }
+  return signedUrl.href
+}
+
 export async function prepareRefElementEsmImport(
   entryPath: string,
   runtimeModules: RefElementModule[] = [],

package/src/ref-elements/context.ts

@@ -1,280 +0,0 @@
-import ts from 'typescript'
-import type { ComponentInfo } from '../information-extractors/ts/types'
-import { extractEligibleRefElementPaths } from './eligible-paths'
-import { resolveModuleUrlFromEntryPath } from './module-resolution'
-import { extractBasePackageName, extractModuleLeafExportName } from './module-specifier'
-import type { RefElementContext, RefElementModule } from './types'
-
-interface RawRefElementExtensionEntry {
-  options?: {
-    type?: string
-    resources?: {
-      client?: {
-        moduleSpecifier?: string
-      }
-    }
-  }
-  type?: string
-  resources?: {
-    client?: {
-      moduleSpecifier?: string
-    }
-  }
-}
-
-interface NormalizedRefElementCatalogEntry {
-  moduleSpecifier: string
-  refComponentType: string
-}
-
-export async function buildRefElementContext(
-  program: ts.Program,
-  sourceFilePath: string,
-  componentInfo: ComponentInfo,
-  compiledEntryPath: string,
-): Promise<RefElementContext> {
-  const importedModuleSpecifiers = collectImportedRefElementModuleSpecifiers(program, sourceFilePath)
-
-  return {
-    eligiblePaths: extractEligibleRefElementPaths(componentInfo),
-    runtimeModules: await resolveRuntimeModules(importedModuleSpecifiers, compiledEntryPath),
-  }
-}
-
-async function resolveRuntimeModules(
-  importedModuleSpecifiers: string[],
-  compiledEntryPath: string,
-): Promise<RefElementModule[]> {
-  if (importedModuleSpecifiers.length === 0) {
-    return []
-  }
-
-  const importedModuleSpecifierSet = new Set(importedModuleSpecifiers)
-  const importedPackageNames = [
-    ...new Set(importedModuleSpecifiers.filter(isPackageModuleSpecifier).map(extractBasePackageName)),
-  ]
-  const catalogEntries = (
-    await Promise.all(importedPackageNames.map((packageName) => loadCatalogEntries(packageName, compiledEntryPath)))
-  ).flat()
-
-  const runtimeModulesBySpecifier = new Map<string, Set<string>>()
-
-  for (const catalogEntry of catalogEntries) {
-    if (!importedModuleSpecifierSet.has(catalogEntry.moduleSpecifier)) {
-      continue
-    }
-
-    const refComponentTypes = runtimeModulesBySpecifier.get(catalogEntry.moduleSpecifier) ?? new Set<string>()
-    refComponentTypes.add(catalogEntry.refComponentType)
-    runtimeModulesBySpecifier.set(catalogEntry.moduleSpecifier, refComponentTypes)
-  }
-
-  const runtimeModules: RefElementModule[] = []
-
-  for (const [moduleSpecifier, refComponentTypes] of runtimeModulesBySpecifier.entries()) {
-    if (refComponentTypes.size !== 1) {
-      continue
-    }
-
-    const refComponentType = [...refComponentTypes][0]
-    if (!refComponentType) {
-      continue
-    }
-
-    const resolvedModuleUrl = resolveModuleUrlFromEntryPath(compiledEntryPath, moduleSpecifier)
-    if (!resolvedModuleUrl) {
-      continue
-    }
-
-    runtimeModules.push({
-      exportNames: buildRefElementExportNames(moduleSpecifier),
-      moduleSpecifier,
-      resolvedModuleUrl,
-      refComponentType,
-    })
-  }
-
-  return runtimeModules
-}
-
-function isPackageModuleSpecifier(moduleSpecifier: string): boolean {
-  return !moduleSpecifier.startsWith('.') && !moduleSpecifier.startsWith('/') && !moduleSpecifier.startsWith('file:')
-}
-
-function collectImportedRefElementModuleSpecifiers(program: ts.Program, sourceFilePath: string): string[] {
-  const entrySourceFile = findSourceFile(program, sourceFilePath)
-  if (!entrySourceFile) {
-    return []
-  }
-
-  const importedModuleSpecifiers = new Set<string>()
-  const visitedSourceFiles = new Set<string>()
-
-  function visitSourceFile(sourceFile: ts.SourceFile): void {
-    if (visitedSourceFiles.has(sourceFile.fileName)) {
-      return
-    }
-
-    visitedSourceFiles.add(sourceFile.fileName)
-
-    for (const statement of sourceFile.statements) {
-      const moduleSpecifier = readReferencedModuleSpecifier(statement)
-      if (!moduleSpecifier) {
-        continue
-      }
-
-      if (referencesRefElementModule(statement, moduleSpecifier)) {
-        importedModuleSpecifiers.add(moduleSpecifier)
-      }
-
-      const importedSourceFile = resolveImportedSourceFile(program, sourceFile.fileName, moduleSpecifier)
-      if (importedSourceFile) {
-        visitSourceFile(importedSourceFile)
-      }
-    }
-  }
-
-  visitSourceFile(entrySourceFile)
-  return [...importedModuleSpecifiers]
-}
-
-async function loadCatalogEntries(
-  packageName: string,
-  compiledEntryPath: string,
-): Promise<NormalizedRefElementCatalogEntry[]> {
-  const resolvedExtensionsUrl = resolveModuleUrlFromEntryPath(compiledEntryPath, `${packageName}/extensions`)
-  if (!resolvedExtensionsUrl) {
-    return []
-  }
-
-  const extensionModule = (await import(resolvedExtensionsUrl)) as Record<string, unknown>
-
-  return extractRawExtensionEntries(extensionModule)
-    .map(normalizeExtensionEntry)
-    .flatMap((catalogEntry) => (catalogEntry ? [catalogEntry] : []))
-}
-
-function referencesRefElementModule(statement: ts.Statement, moduleSpecifier: string): boolean {
-  const moduleLeafExportName = extractModuleLeafExportName(moduleSpecifier)
-  if (!moduleLeafExportName) {
-    return false
-  }
-
-  if (ts.isImportDeclaration(statement)) {
-    return importsRefElementModule(statement, moduleLeafExportName)
-  }
-
-  if (ts.isExportDeclaration(statement)) {
-    return reExportsRefElementModule(statement, moduleLeafExportName)
-  }
-
-  return false
-}
-
-function importsRefElementModule(importDeclaration: ts.ImportDeclaration, moduleLeafExportName: string): boolean {
-  const importClause = importDeclaration.importClause
-  if (!importClause) {
-    return false
-  }
-
-  if (importClause.name) {
-    return true
-  }
-
-  if (!importClause.namedBindings || !ts.isNamedImports(importClause.namedBindings)) {
-    return false
-  }
-
-  return importClause.namedBindings.elements.some((importSpecifier) => {
-    const importedName = importSpecifier.propertyName?.text ?? importSpecifier.name.text
-    return importedName === moduleLeafExportName
-  })
-}
-
-function reExportsRefElementModule(exportDeclaration: ts.ExportDeclaration, moduleLeafExportName: string): boolean {
-  if (!exportDeclaration.exportClause || !ts.isNamedExports(exportDeclaration.exportClause)) {
-    return false
-  }
-
-  return exportDeclaration.exportClause.elements.some((exportSpecifier) => {
-    const exportedSourceName = exportSpecifier.propertyName?.text ?? exportSpecifier.name.text
-    return exportedSourceName === 'default' || exportedSourceName === moduleLeafExportName
-  })
-}
-
-function extractRawExtensionEntries(extensionModule: Record<string, unknown>): RawRefElementExtensionEntry[] {
-  const defaultExport = extensionModule.default
-  const extensionEntries = Array.isArray(defaultExport)
-    ? defaultExport
-    : ((defaultExport as { extensions?: unknown[] } | undefined)?.extensions ?? extensionModule.extensions)
-
-  return Array.isArray(extensionEntries) ? (extensionEntries as RawRefElementExtensionEntry[]) : []
-}
-
-function normalizeExtensionEntry(rawEntry: RawRefElementExtensionEntry): NormalizedRefElementCatalogEntry | undefined {
-  const normalizedEntry = rawEntry.options ?? rawEntry
-  const moduleSpecifier = normalizedEntry.resources?.client?.moduleSpecifier
-  const refComponentType = normalizedEntry.type
-
-  if (!moduleSpecifier || !refComponentType) {
-    return undefined
-  }
-
-  return {
-    moduleSpecifier,
-    refComponentType,
-  }
-}
-
-function buildRefElementExportNames(moduleSpecifier: string): string[] {
-  const exportNames = new Set<string>(['default'])
-  if (extractBasePackageName(moduleSpecifier) === moduleSpecifier) {
-    return [...exportNames]
-  }
-
-  const moduleLeafName = extractModuleLeafExportName(moduleSpecifier)
-  if (moduleLeafName) {
-    exportNames.add(moduleLeafName)
-  }
-
-  return [...exportNames]
-}
-
-function findSourceFile(program: ts.Program, sourceFilePath: string): ts.SourceFile | undefined {
-  return (
-    program.getSourceFile(sourceFilePath) ??
-    program.getSourceFiles().find((sourceFile) => sourceFile.fileName === sourceFilePath)
-  )
-}
-
-function resolveImportedSourceFile(
-  program: ts.Program,
-  importingFilePath: string,
-  moduleSpecifier: string,
-): ts.SourceFile | undefined {
-  const resolvedModule = ts.resolveModuleName(moduleSpecifier, importingFilePath, program.getCompilerOptions(), ts.sys)
-  const resolvedFileName = resolvedModule.resolvedModule?.resolvedFileName
-
-  if (!resolvedFileName) {
-    return undefined
-  }
-
-  const resolvedSourceFile = findSourceFile(program, resolvedFileName)
-  if (!resolvedSourceFile || resolvedSourceFile.isDeclarationFile) {
-    return undefined
-  }
-
-  return resolvedSourceFile
-}
-
-function readReferencedModuleSpecifier(statement: ts.Statement): string | undefined {
-  if (ts.isImportDeclaration(statement) && ts.isStringLiteral(statement.moduleSpecifier)) {
-    return statement.moduleSpecifier.text
-  }
-
-  if (ts.isExportDeclaration(statement) && statement.moduleSpecifier && ts.isStringLiteral(statement.moduleSpecifier)) {
-    return statement.moduleSpecifier.text
-  }
-
-  return undefined
-}