@wix/zero-config-implementation 1.5.0

package/src/information-extractors/ts/utils/semantic-type-resolver.ts

@@ -0,0 +1,377 @@
+import * as fs from 'node:fs'
+import * as path from 'node:path'
+import { camelCase } from 'case-anything'
+import ts from 'typescript'
+import { DATA } from '../../../schema'
+import type { PropInfo, ResolvedType } from '../types'
+
+const MAX_RESOLVE_DEPTH = 30
+
+const { DATA_TYPE } = DATA
+
+/**
+ * Cache for package name lookups
+ */
+const packageNameCache = new Map<string, string | undefined>()
+
+/**
+ * Gets the package name that a symbol originates from
+ */
+function getSymbolPackage(symbol: ts.Symbol, checker: ts.TypeChecker): string | undefined {
+  // If the symbol is an alias (e.g., from an import), resolve it first
+  let resolvedSymbol = symbol
+  if ((symbol.flags & ts.SymbolFlags.Alias) !== 0) {
+    resolvedSymbol = checker.getAliasedSymbol(symbol)
+  }
+
+  const decl = resolvedSymbol.getDeclarations()?.[0]
+  if (!decl) return undefined
+
+  // Get the file path containing the declaration
+  const filePath = decl.getSourceFile().fileName
+
+  // Check cache first
+  if (packageNameCache.has(filePath)) {
+    return packageNameCache.get(filePath)
+  }
+
+  // Check for known package patterns in the file path
+  // This handles both node_modules paths and type augmentation files
+  const packageName = findPackageName(filePath)
+
+  packageNameCache.set(filePath, packageName)
+  return packageName
+}
+
+// Valid React semantic types (maps to container)
+const VALID_REACT_SEMANTIC_TYPES = new Set(['ReactNode', 'ReactElement'])
+
+/**
+ * Checks if a Wix type name maps to a valid DATA_TYPE key
+ */
+function isValidWixSemanticType(symbolName: string): boolean {
+  const camelCaseKey = camelCase(symbolName)
+  return camelCaseKey in DATA_TYPE
+}
+
+/**
+ * Checks if a type is a valid semantic type from React or Wix
+ * Only returns semantic for types we can actually handle
+ */
+function checkForSemanticType(
+  type: ts.Type,
+  checker: ts.TypeChecker,
+): { kind: 'semantic'; value: string; source: string } | undefined {
+  // Get the type's symbol
+  const symbol = type.aliasSymbol ?? type.getSymbol()
+  if (!symbol) return undefined
+
+  const symbolName = symbol.getName()
+  const packageName = getSymbolPackage(symbol, checker)
+
+  // Check React types - only valid ones
+  if (packageName === '@types/react' || packageName === 'react') {
+    if (VALID_REACT_SEMANTIC_TYPES.has(symbolName)) {
+      return { kind: 'semantic', value: symbolName, source: packageName }
+    }
+    return undefined
+  }
+
+  // Check Wix types - only ones that map to DATA_TYPE keys
+  if (packageName === '@wix/public-schemas') {
+    if (isValidWixSemanticType(symbolName)) {
+      return { kind: 'semantic', value: symbolName, source: packageName }
+    }
+    return undefined
+  }
+
+  return undefined
+}
+
+/**
+ * Special handling for ReactNode which is a union type
+ */
+function checkForReactNode(type: ts.Type, checker: ts.TypeChecker): boolean {
+  if (!(type.flags & ts.TypeFlags.Union)) return false
+
+  const unionType = type as ts.UnionType
+  let hasReactElement = false
+  let hasString = false
+
+  for (const memberType of unionType.types) {
+    const memberSymbol = memberType.aliasSymbol ?? memberType.getSymbol()
+    if (memberSymbol) {
+      const symbolName = memberSymbol.getName()
+      const packageName = getSymbolPackage(memberSymbol, checker)
+      if ((packageName === '@types/react' || packageName === 'react') && symbolName === 'ReactElement') {
+        hasReactElement = true
+      }
+    }
+    if (memberType.flags & ts.TypeFlags.String) {
+      hasString = true
+    }
+  }
+
+  // ReactNode is typically a union containing at least ReactElement and string
+  if (hasReactElement && hasString) {
+    const aliasName = type.aliasSymbol?.getName()
+    return aliasName === 'ReactNode' || !type.aliasSymbol
+  }
+
+  return false
+}
+
+export function resolveType(
+  type: ts.Type,
+  checker: ts.TypeChecker,
+  depth = 0,
+  typeString?: string,
+  declaredSymbol?: ts.Symbol,
+): ResolvedType {
+  // Prevent infinite recursion
+  if (depth > MAX_RESOLVE_DEPTH) {
+    throw new Error(`Max resolve depth reached for type: ${checker.typeToString(type)}`)
+  }
+
+  // Check for semantic types from React or Wix packages
+  const semanticType = checkForSemanticType(type, checker)
+  if (semanticType) {
+    return {
+      kind: 'semantic',
+      value: semanticType.value,
+      source: semanticType.source,
+    }
+  }
+
+  // Special handling for ReactNode (union type)
+  if (checkForReactNode(type, checker)) {
+    return {
+      kind: 'semantic',
+      value: 'ReactNode',
+      source: '@types/react',
+    }
+  }
+
+  // Fallback: For branded primitives where the resolved type loses alias info,
+  // use the declared symbol from the type reference to check the package
+  if (declaredSymbol && typeString) {
+    const packageName = getSymbolPackage(declaredSymbol, checker)
+
+    // Check React types - only valid ones
+    if (packageName === '@types/react' || packageName === 'react') {
+      if (VALID_REACT_SEMANTIC_TYPES.has(typeString)) {
+        return {
+          kind: 'semantic',
+          value: typeString,
+          source: packageName,
+        }
+      }
+    }
+
+    // Check Wix types - only ones that map to DATA_TYPE keys
+    if (packageName === '@wix/public-schemas') {
+      if (isValidWixSemanticType(typeString)) {
+        return {
+          kind: 'semantic',
+          value: typeString,
+          source: packageName,
+        }
+      }
+    }
+  }
+
+  // Try each resolver in order
+  const resolvers = [
+    () => resolvePrimitiveType(type),
+    () => resolveLiteralType(type, checker),
+    () => resolveUnionType(type, checker, depth),
+    () => resolveIntersectionType(type, checker, depth),
+    () => resolveArrayType(type, checker, depth),
+    () => resolveFunctionType(type, checker),
+    () => resolveObjectType(type, checker, depth),
+  ]
+
+  for (const resolver of resolvers) {
+    const result = resolver()
+    if (result) {
+      return result
+    }
+  }
+
+  // Fallback to primitive with the type string
+  return {
+    kind: 'primitive',
+    value: checker.typeToString(type),
+  }
+}
+
+function resolvePrimitiveType(type: ts.Type): ResolvedType | undefined {
+  if (type.flags & ts.TypeFlags.String) {
+    return { kind: 'primitive', value: 'string' }
+  }
+  if (type.flags & ts.TypeFlags.Number) {
+    return { kind: 'primitive', value: 'number' }
+  }
+  if (type.flags & ts.TypeFlags.Boolean) {
+    return { kind: 'primitive', value: 'boolean' }
+  }
+  if (type.flags & ts.TypeFlags.Null) {
+    return { kind: 'primitive', value: 'null' }
+  }
+  if (type.flags & ts.TypeFlags.Undefined) {
+    return { kind: 'primitive', value: 'undefined' }
+  }
+  if (type.flags & ts.TypeFlags.Any) {
+    return { kind: 'primitive', value: 'any' }
+  }
+  return undefined
+}
+
+function resolveLiteralType(type: ts.Type, checker: ts.TypeChecker): ResolvedType | undefined {
+  if (type.flags & ts.TypeFlags.StringLiteral) {
+    const literalType = type as ts.StringLiteralType
+    return {
+      kind: 'literal',
+      value: literalType.value,
+    }
+  }
+
+  if (type.flags & ts.TypeFlags.NumberLiteral) {
+    const literalType = type as ts.NumberLiteralType
+    return {
+      kind: 'literal',
+      value: literalType.value,
+    }
+  }
+
+  if (type.flags & ts.TypeFlags.BooleanLiteral) {
+    const typeString = checker.typeToString(type)
+    return {
+      kind: 'literal',
+      value: typeString === 'true',
+    }
+  }
+
+  return undefined
+}
+
+function resolveUnionType(type: ts.Type, checker: ts.TypeChecker, depth: number): ResolvedType | undefined {
+  if (type.flags & ts.TypeFlags.Union) {
+    const unionType = type as ts.UnionType
+    return {
+      kind: 'union',
+      types: unionType.types.map((t) => resolveType(t, checker, depth + 1)),
+    }
+  }
+  return undefined
+}
+
+function resolveIntersectionType(type: ts.Type, checker: ts.TypeChecker, depth: number): ResolvedType | undefined {
+  if (type.flags & ts.TypeFlags.Intersection) {
+    const intersectionType = type as ts.IntersectionType
+    return {
+      kind: 'intersection',
+      types: intersectionType.types.map((t) => resolveType(t, checker, depth + 1)),
+    }
+  }
+  return undefined
+}
+
+function resolveArrayType(type: ts.Type, checker: ts.TypeChecker, depth: number): ResolvedType | undefined {
+  if (checker.isArrayType(type)) {
+    const arrayType = type as ts.TypeReference
+    const typeArgs = checker.getTypeArguments(arrayType)
+    if (typeArgs.length > 0) {
+      return {
+        kind: 'array',
+        elementType: resolveType(typeArgs[0], checker, depth + 1),
+      }
+    }
+    return { kind: 'array', elementType: { kind: 'primitive', value: 'any' } }
+  }
+  return undefined
+}
+
+function resolveFunctionType(type: ts.Type, checker: ts.TypeChecker): ResolvedType | undefined {
+  const callSignatures = type.getCallSignatures()
+  if (callSignatures.length > 0) {
+    const signature = callSignatures[0]
+    const parameters = signature.getParameters().map((param) => {
+      const paramType = checker.getTypeOfSymbol(param)
+      return {
+        name: param.getName(),
+        type: checker.typeToString(paramType),
+      }
+    })
+    const returnType = signature.getReturnType()
+
+    return {
+      kind: 'function',
+      value: {
+        parameters,
+        returnType: checker.typeToString(returnType),
+      },
+    }
+  }
+  return undefined
+}
+
+function resolveObjectType(type: ts.Type, checker: ts.TypeChecker, depth: number): ResolvedType | undefined {
+  const properties = type.getProperties()
+  if (properties.length === 0) {
+    return undefined
+  }
+
+  const resolvedProperties: Record<string, PropInfo> = {}
+
+  // Filter out built-in properties
+  const userDefinedProps = properties.filter((prop) => {
+    const propName = prop.getName()
+    return !['toString', 'valueOf', 'hasOwnProperty', 'constructor', 'toLocaleString'].includes(propName)
+  })
+
+  for (const prop of userDefinedProps) {
+    const propName = prop.getName()
+    const propType = checker.getTypeOfSymbol(prop)
+    const isOptional = (prop.flags & ts.SymbolFlags.Optional) !== 0
+
+    resolvedProperties[propName] = {
+      name: propName,
+      type: checker.typeToString(propType),
+      required: !isOptional,
+      resolvedType: resolveType(propType, checker, depth + 1),
+    }
+  }
+
+  if (Object.keys(resolvedProperties).length > 0) {
+    return {
+      kind: 'object',
+      properties: resolvedProperties,
+    }
+  }
+
+  return undefined
+}
+
+function findPackageName(filePath: string): string | undefined {
+  let currentDir = path.dirname(filePath)
+  const root = path.parse(currentDir).root
+
+  while (currentDir !== root) {
+    const packageJsonPath = path.join(currentDir, 'package.json')
+
+    if (fs.existsSync(packageJsonPath)) {
+      try {
+        const packageJsonContent = fs.readFileSync(packageJsonPath, 'utf-8')
+        const packageJson = JSON.parse(packageJsonContent)
+        return packageJson.name
+      } catch (error) {
+        throw new Error(`Failed to read package.json at ${packageJsonPath}: ${error}`)
+      }
+    }
+
+    currentDir = path.dirname(currentDir)
+  }
+
+  return undefined
+}

package/src/jsx-runtime-interceptor.ts

@@ -0,0 +1,146 @@
+/**
+ * Interceptable JSX Runtime
+ *
+ * This module wraps React's jsx-runtime and allows dynamic interception
+ * of jsx/jsxs/jsxDEV calls. This is necessary because ESM imports are immutable,
+ * so we can't monkey-patch react/jsx-runtime directly.
+ *
+ * ## Usage contexts
+ *
+ * This module runs in two contexts that must share mutable state:
+ *
+ * 1. **Vite alias (tests)** — aliased to `react/jsx-runtime` in vite.config.ts
+ * 2. **Node.js ESM loader hook (CLI)** — redirected via `module.register()` in cli.ts
+ *
+ * In both cases the interceptor may be loaded as a separate module instance from
+ * the copy bundled into the main dist files. To ensure `setJsxInterceptors()`
+ * (called from component-renderer.ts) affects the `jsx`/`jsxs` that user
+ * components call, mutable state lives on `globalThis` via `Symbol.for()`.
+ */
+
+import { createRequire } from 'node:module'
+
+// Use require() to load the real React modules, bypassing Vite alias / ESM loader hook
+const require = createRequire(import.meta.url)
+const originalRuntime = require('react/jsx-runtime') as typeof import('react/jsx-runtime')
+const originalDevRuntime = require('react/jsx-dev-runtime') as typeof import('react/jsx-dev-runtime')
+
+// Re-export Fragment unchanged
+export const Fragment = originalRuntime.Fragment
+
+// Type for jsxDEV function
+type JsxDevFn = typeof originalDevRuntime.jsxDEV
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Shared state via globalThis
+//
+// The bundled copy (inside cli.js / index.js) and the standalone copy (loaded
+// by the ESM loader hook or Vite alias) must share the same mutable state.
+// Symbol.for() guarantees a process-wide singleton key.
+// ─────────────────────────────────────────────────────────────────────────────
+
+const STATE_KEY = Symbol.for('zero-config:jsx-interceptor')
+
+interface JsxInterceptorState {
+  currentJsx: typeof originalRuntime.jsx
+  currentJsxs: typeof originalRuntime.jsxs
+  currentJsxDEV: JsxDevFn
+  isInsideOriginal: boolean
+}
+
+function getState(): JsxInterceptorState {
+  const g = globalThis as unknown as Record<symbol, JsxInterceptorState | undefined>
+  if (!g[STATE_KEY]) {
+    g[STATE_KEY] = {
+      currentJsx: originalRuntime.jsx,
+      currentJsxs: originalRuntime.jsxs,
+      currentJsxDEV: originalDevRuntime.jsxDEV,
+      isInsideOriginal: false,
+    }
+  }
+  return g[STATE_KEY]!
+}
+
+/**
+ * Sets custom jsx/jsxs/jsxDEV implementations for interception.
+ * Call with no arguments to restore originals.
+ */
+export function setJsxInterceptors(
+  jsx?: typeof originalRuntime.jsx,
+  jsxs?: typeof originalRuntime.jsxs,
+  jsxDEV?: JsxDevFn,
+): void {
+  const state = getState()
+  state.currentJsx = jsx ?? originalRuntime.jsx
+  state.currentJsxs = jsxs ?? originalRuntime.jsxs
+  state.currentJsxDEV = jsxDEV ?? originalDevRuntime.jsxDEV
+}
+
+/**
+ * Gets the original jsx/jsxs/jsxDEV functions.
+ */
+export function getOriginals() {
+  return {
+    jsx: originalRuntime.jsx,
+    jsxs: originalRuntime.jsxs,
+    jsxDEV: originalDevRuntime.jsxDEV,
+  }
+}
+
+// Export interceptable jsx/jsxs - these delegate to the shared state
+export function jsx(
+  type: Parameters<typeof originalRuntime.jsx>[0],
+  props: Parameters<typeof originalRuntime.jsx>[1],
+  key?: Parameters<typeof originalRuntime.jsx>[2],
+) {
+  const state = getState()
+  if (state.isInsideOriginal) {
+    return originalRuntime.jsx(type, props, key)
+  }
+  state.isInsideOriginal = true
+  try {
+    return state.currentJsx(type, props, key)
+  } finally {
+    state.isInsideOriginal = false
+  }
+}
+
+export function jsxs(
+  type: Parameters<typeof originalRuntime.jsxs>[0],
+  props: Parameters<typeof originalRuntime.jsxs>[1],
+  key?: Parameters<typeof originalRuntime.jsxs>[2],
+) {
+  const state = getState()
+  if (state.isInsideOriginal) {
+    return originalRuntime.jsxs(type, props, key)
+  }
+  state.isInsideOriginal = true
+  try {
+    return state.currentJsxs(type, props, key)
+  } finally {
+    state.isInsideOriginal = false
+  }
+}
+
+// Export interceptable jsxDEV for development mode
+export function jsxDEV(
+  type: Parameters<JsxDevFn>[0],
+  props: Parameters<JsxDevFn>[1],
+  key: Parameters<JsxDevFn>[2],
+  isStaticChildren: Parameters<JsxDevFn>[3],
+  source: Parameters<JsxDevFn>[4],
+  self: Parameters<JsxDevFn>[5],
+) {
+  const state = getState()
+  // Prevent recursion when React's internal jsxDEV calls other jsx functions
+  if (state.isInsideOriginal) {
+    return originalDevRuntime.jsxDEV(type, props, key, isStaticChildren, source, self)
+  }
+
+  state.isInsideOriginal = true
+  try {
+    return state.currentJsxDEV(type, props, key, isStaticChildren, source, self)
+  } finally {
+    state.isInsideOriginal = false
+  }
+}

package/src/jsx-runtime-loader.ts

@@ -0,0 +1,38 @@
+/**
+ * Node.js ESM Customization Hook
+ *
+ * Redirects ESM `import 'react/jsx-runtime'` and `import 'react/jsx-dev-runtime'`
+ * to the interceptable jsx-runtime-interceptor module.
+ *
+ * Registered via `module.register()` in the CLI before loading user components.
+ * This ensures that dynamically imported user components use the interceptable
+ * jsx-runtime, enabling prop tracking and element tracing.
+ *
+ * CJS `require()` calls are not affected by this hook — the interceptor uses
+ * `createRequire` internally, so it always loads the real React runtime.
+ */
+
+// Compute sibling file URL at runtime — avoids Vite's static `new URL()` asset transform
+const INTERCEPTOR_URL = import.meta.url.replace(/jsx-runtime-loader\.js$/, 'jsx-runtime-interceptor.js')
+
+interface ResolveResult {
+  url: string
+  shortCircuit?: boolean
+}
+
+interface ResolveContext {
+  parentURL?: string
+}
+
+type NextResolve = (specifier: string, context: ResolveContext) => Promise<ResolveResult>
+
+export async function resolve(
+  specifier: string,
+  context: ResolveContext,
+  nextResolve: NextResolve,
+): Promise<ResolveResult> {
+  if (specifier === 'react/jsx-runtime' || specifier === 'react/jsx-dev-runtime') {
+    return { shortCircuit: true, url: INTERCEPTOR_URL }
+  }
+  return nextResolve(specifier, context)
+}