@wix/zero-config-implementation 1.14.0 → 1.15.0

package/dist/information-extractors/ts/utils/semantic-type-resolver.d.ts

@@ -1,3 +1,12 @@
 import { default as ts } from 'typescript';
 import { ResolvedType } from '../types';
-export declare function resolveType(type: ts.Type, checker: ts.TypeChecker, depth?: number, typeString?: string, declaredSymbol?: ts.Symbol): ResolvedType;
+interface ResolveTypeOptions {
+    type: ts.Type;
+    checker: ts.TypeChecker;
+    depth?: number;
+    typeString?: string;
+    declaredSymbol?: ts.Symbol;
+    seenTypes?: Set<ts.Type>;
+}
+export declare function resolveType({ type, checker, depth, typeString, declaredSymbol, seenTypes, }: ResolveTypeOptions): ResolvedType;
+export {};

package/dist/manifest-pipeline.d.ts

@@ -7,6 +7,7 @@ export interface ExtractionWarning {
     componentName: string;
     phase: 'render' | 'coupling' | 'css' | 'loader' | 'conversion';
     error: string;
+    stack?: string;
 }
 export interface ExtractedCssInfo {
     filePath: string;

package/package.json

@@ -4,7 +4,7 @@
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
-  "version": "1.14.0",
+  "version": "1.15.0",
   "description": "Core library for extracting component manifests from JS and CSS files",
   "type": "module",
   "main": "dist/index.js",
@@ -23,6 +23,7 @@
   },
   "scripts": {
     "build": "vite build",
+    "build:dev": "vite build --mode development",
     "lint": "biome check src/",
     "test": "vitest run --passWithNoTests",
     "test:watch": "vitest --passWithNoTests",
@@ -74,5 +75,5 @@
       ]
     }
   },
-  "falconPackageHash": "1365e0b6dc9053e4dd5346884137f7cc61e12eed845e32e0e86a6122"
+  "falconPackageHash": "1d9fc602e0ba357d71e273c769064f5c8c38b293c6fbf5e964991825"
 }

package/src/index.ts

@@ -43,6 +43,7 @@ export interface ExtractionError {
   componentName: string
   phase: 'render' | 'coupling' | 'css' | 'loader' | 'conversion'
   error: string
+  stack?: string
 }
 
 // ─────────────────────────────────────────────────────────────────────────────
@@ -66,13 +67,21 @@ export function extractComponentManifest(
 ): ResultAsync<ManifestResult, InstanceType<typeof NotFoundError> | InstanceType<typeof ParseError>> {
   // Step 1: Load the compiled package module (non-fatal)
   return loadModule(compiledEntryPath)
-    .map((moduleExports) => ({ moduleExports, loaderError: null as string | null }))
+    .map((moduleExports) => ({
+      moduleExports,
+      loaderError: null as string | null,
+      loaderStack: undefined as string | undefined,
+    }))
     .orElse((err) =>
       ResultAsync.fromSafePromise(
-        Promise.resolve({ moduleExports: null as Record<string, unknown> | null, loaderError: err.message }),
+        Promise.resolve({
+          moduleExports: null as Record<string, unknown> | null,
+          loaderError: err.message,
+          loaderStack: err.stack,
+        }),
       ),
     )
-    .andThen(({ moduleExports, loaderError }) => {
+    .andThen(({ moduleExports, loaderError, loaderStack }) => {
       const loadComponent: (componentName: string) => ComponentType<unknown> | null = moduleExports
         ? (name) => findComponent(moduleExports, name)
         : () => null
@@ -111,6 +120,7 @@ export function extractComponentManifest(
               componentName: componentInfo.componentName,
               phase: 'loader',
               error: loaderError,
+              stack: loaderStack,
             })
           }
 
@@ -126,6 +136,7 @@ export function extractComponentManifest(
               componentName: componentPath,
               phase: 'css',
               error: `Failed to extract CSS imports: ${thrown instanceof Error ? (thrown as Error).message : String(thrown)}`,
+              stack: thrown instanceof Error ? (thrown as Error).stack : undefined,
             })
           }
 

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

@@ -236,14 +236,20 @@ function generateUnionValue(
   const types = resolvedType.types ?? []
 
   // Prefer string literals for textEnum-like unions
-  const stringLiteral = types.find((t) => t.kind === 'literal' && typeof t.value === 'string')
+  const stringLiteral = types.find(
+    (candidateType) => candidateType.kind === 'literal' && typeof candidateType.value === 'string',
+  )
   if (stringLiteral) {
     return stringLiteral.value
   }
 
-  // Otherwise, use the first type
-  if (types.length > 0) {
-    return generateValueFromResolvedType(types[0], propName, path, registrar)
+  // Skip undefined/null when picking a representative type — Partial<T> produces T | undefined
+  // unions where TypeScript may place undefined first, which would generate useless mock values
+  const isNullish = (candidateType: ResolvedType) =>
+    candidateType.kind === 'primitive' && (candidateType.value === 'undefined' || candidateType.value === 'null')
+  const representative = types.find((candidateType) => !isNullish(candidateType)) ?? types[0]
+  if (representative) {
+    return generateValueFromResolvedType(representative, propName, path, registrar)
   }
 
   return `mock_${propName}_${faker.string.alphanumeric(6)}`
@@ -317,7 +323,7 @@ function generateObjectValue(
  */
 function generateEnumValue(resolvedType: ResolvedType): unknown {
   const types = resolvedType.types ?? []
-  const firstLiteral = types.find((t) => t.kind === 'literal')
+  const firstLiteral = types.find((candidateType) => candidateType.kind === 'literal')
 
   if (firstLiteral) {
     return firstLiteral.value
@@ -334,12 +340,12 @@ function generateMockFunction(
   path: string,
   registrar?: PropSpyRegistrar,
 ): (...args: unknown[]) => void {
-  const fn = function mockFn(): void {
+  const mockCallback = function mockFn(): void {
     // No-op mock function
   }
-  Object.defineProperty(fn, 'name', { value: `mock_${propName}` })
-  if (registrar) registrar.registerFunction(path, propName, fn)
-  return fn
+  Object.defineProperty(mockCallback, 'name', { value: `mock_${propName}` })
+  if (registrar) registrar.registerFunction(path, propName, mockCallback)
+  return mockCallback
 }
 
 // ─────────────────────────────────────────────────────────────────────────────
@@ -358,12 +364,21 @@ function generateMockImage(): Record<string, unknown> {
 }
 
 function generateMockVideo(): Record<string, unknown> {
+  const videoUrl = `${faker.internet.url()}/video.mp4`
   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),
+    uri: videoUrl,
+    sources: [
+      {
+        quality: '720p',
+        width: 1280,
+        height: 720,
+        types: [{ format: 'mp4', uri: videoUrl, url: videoUrl }],
+      },
+    ],
+    adaptiveSources: [],
+    hasAudio: true,
+    fps: 30,
+    poster: generateMockImage(),
   }
 }
 
@@ -387,6 +402,7 @@ function generateMockVectorArt(): Record<string, unknown> {
   return {
     svgId: faker.string.uuid(),
     url: `${faker.internet.url()}/icon.svg`,
+    svgContent: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/></svg>',
   }
 }
 

package/src/information-extractors/ts/components.ts

@@ -8,9 +8,14 @@ import { resolveType } from './utils/semantic-type-resolver'
 // ─────────────────────────────────────────────────────────────────────────────
 
 const sharedPropFilter = (prop: PropItem) => {
-  // Exclude props inherited from node_modules (e.g. HTMLAttributes)
+  // Exclude props whose every declaration comes from a @types/* package (e.g. HTMLAttributes,
+  // React.HTMLProps). Props from non-@types node_modules (e.g. Wix component libraries) are
+  // intentionally kept so that props like `label` from StylableButtonPlatformProps are visible.
   if (prop.declarations && prop.declarations.length > 0) {
-    return !prop.declarations.every((declaration) => declaration.fileName.includes('node_modules'))
+    return !prop.declarations.every((declaration) => {
+      const fileName = declaration.fileName
+      return fileName.includes('node_modules/@types/') || fileName.includes('node_modules/typescript/')
+    })
   }
   return true
 }
@@ -42,7 +47,9 @@ export function extractAllComponentInfo(program: ts.Program, filePath: string):
   const componentNameResolver = (_exp: ts.Symbol, source: ts.SourceFile): string | undefined => {
     const moduleSymbol = checker.getSymbolAtLocation(source)
     if (!moduleSymbol) return undefined
-    const defaultSym = checker.getExportsOfModule(moduleSymbol).find((s) => s.getName() === 'default')
+    const defaultSym = checker
+      .getExportsOfModule(moduleSymbol)
+      .find((exportSymbol) => exportSymbol.getName() === 'default')
     if (!defaultSym || !(defaultSym.getFlags() & ts.SymbolFlags.Alias)) return undefined
     const aliased = checker.getAliasedSymbol(defaultSym)
     const name = aliased.getName()
@@ -210,7 +217,7 @@ function convertComponentDoc(doc: ComponentDoc, program: ts.Program, checker: ts
 
     const typeString = declaredTypeInfo?.name ?? propItem.type.name
     const resolvedType = propType
-      ? resolveType(propType, checker, 0, typeString, declaredTypeInfo?.symbol)
+      ? resolveType({ type: propType, checker, typeString, declaredSymbol: declaredTypeInfo?.symbol })
       : { kind: 'primitive' as const, value: propItem.type.name }
 
     // Convert default value

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

@@ -119,18 +119,49 @@ function checkForReactNode(type: ts.Type, checker: ts.TypeChecker): boolean {
   return false
 }
 
-export function resolveType(
-  type: ts.Type,
-  checker: ts.TypeChecker,
+interface ResolveTypeOptions {
+  type: ts.Type
+  checker: ts.TypeChecker
+  depth?: number
+  typeString?: string
+  declaredSymbol?: ts.Symbol
+  seenTypes?: Set<ts.Type>
+}
+
+export function resolveType({
+  type,
+  checker,
   depth = 0,
-  typeString?: string,
-  declaredSymbol?: ts.Symbol,
-): ResolvedType {
-  // Prevent infinite recursion
+  typeString,
+  declaredSymbol,
+  seenTypes = new Set(),
+}: ResolveTypeOptions): ResolvedType {
+  // Prevent infinite recursion on self-referential types
+  if (seenTypes.has(type)) {
+    return { kind: 'primitive', value: 'any' }
+  }
   if (depth > MAX_RESOLVE_DEPTH) {
     throw new Error(`Max resolve depth reached for type: ${checker.typeToString(type)}`)
   }
+  // Track the type while we recurse into it. We delete it after resolution so
+  // that sibling properties sharing the same ts.Type (e.g. two `string` props)
+  // are not misidentified as cycles. Only types currently on the call stack
+  // trigger the cycle guard above.
+  seenTypes.add(type)
+  const result = resolveTypeBody({ type, checker, depth, typeString, declaredSymbol, seenTypes })
+  seenTypes.delete(type)
+  return result
+}
 
+function resolveTypeBody({
+  type,
+  checker,
+  depth,
+  typeString,
+  declaredSymbol,
+  seenTypes,
+}: Required<Pick<ResolveTypeOptions, 'type' | 'checker' | 'seenTypes'>> &
+  Pick<ResolveTypeOptions, 'typeString' | 'declaredSymbol'> & { depth: number }): ResolvedType {
   // Check for semantic types from React or Wix packages
   const semanticType = checkForSemanticType(type, checker)
   if (semanticType) {
@@ -182,17 +213,17 @@ export function resolveType(
   const resolvers = [
     () => resolvePrimitiveType(type),
     () => resolveLiteralType(type, checker),
-    () => resolveUnionType(type, checker, depth),
-    () => resolveIntersectionType(type, checker, depth),
-    () => resolveArrayType(type, checker, depth),
+    () => resolveUnionType(type, checker, depth, seenTypes),
+    () => resolveIntersectionType(type, checker, depth, seenTypes),
+    () => resolveArrayType(type, checker, depth, seenTypes),
     () => resolveFunctionType(type, checker),
-    () => resolveObjectType(type, checker, depth),
+    () => resolveObjectType(type, checker, depth, seenTypes),
   ]
 
   for (const resolver of resolvers) {
-    const result = resolver()
-    if (result) {
-      return result
+    const resolved = resolver()
+    if (resolved) {
+      return resolved
     }
   }
 
@@ -253,36 +284,55 @@ function resolveLiteralType(type: ts.Type, checker: ts.TypeChecker): ResolvedTyp
   return undefined
 }
 
-function resolveUnionType(type: ts.Type, checker: ts.TypeChecker, depth: number): ResolvedType | undefined {
+function resolveUnionType(
+  type: ts.Type,
+  checker: ts.TypeChecker,
+  depth: number,
+  seenTypes: Set<ts.Type>,
+): 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)),
+      types: unionType.types.map((memberType) =>
+        resolveType({ type: memberType, checker, depth: depth + 1, seenTypes }),
+      ),
     }
   }
   return undefined
 }
 
-function resolveIntersectionType(type: ts.Type, checker: ts.TypeChecker, depth: number): ResolvedType | undefined {
+function resolveIntersectionType(
+  type: ts.Type,
+  checker: ts.TypeChecker,
+  depth: number,
+  seenTypes: Set<ts.Type>,
+): 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)),
+      types: intersectionType.types.map((memberType) =>
+        resolveType({ type: memberType, checker, depth: depth + 1, seenTypes }),
+      ),
     }
   }
   return undefined
 }
 
-function resolveArrayType(type: ts.Type, checker: ts.TypeChecker, depth: number): ResolvedType | undefined {
+function resolveArrayType(
+  type: ts.Type,
+  checker: ts.TypeChecker,
+  depth: number,
+  seenTypes: Set<ts.Type>,
+): 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),
+        elementType: resolveType({ type: typeArgs[0], checker, depth: depth + 1, seenTypes }),
       }
     }
     return { kind: 'array', elementType: { kind: 'primitive', value: 'any' } }
@@ -314,7 +364,12 @@ function resolveFunctionType(type: ts.Type, checker: ts.TypeChecker): ResolvedTy
   return undefined
 }
 
-function resolveObjectType(type: ts.Type, checker: ts.TypeChecker, depth: number): ResolvedType | undefined {
+function resolveObjectType(
+  type: ts.Type,
+  checker: ts.TypeChecker,
+  depth: number,
+  seenTypes: Set<ts.Type>,
+): ResolvedType | undefined {
   const properties = type.getProperties()
   if (properties.length === 0) {
     return undefined
@@ -337,7 +392,7 @@ function resolveObjectType(type: ts.Type, checker: ts.TypeChecker, depth: number
       name: propName,
       type: checker.typeToString(propType),
       required: !isOptional,
-      resolvedType: resolveType(propType, checker, depth + 1),
+      resolvedType: resolveType({ type: propType, checker, depth: depth + 1, seenTypes }),
     }
   }
 

package/src/manifest-pipeline.ts

@@ -27,6 +27,7 @@ export interface ExtractionWarning {
   componentName: string
   phase: 'render' | 'coupling' | 'css' | 'loader' | 'conversion'
   error: string
+  stack?: string
 }
 
 export interface ExtractedCssInfo {
@@ -84,6 +85,7 @@ export function processComponent(
         componentName: componentInfo.componentName,
         phase: 'loader',
         error: `Failed to load "${componentInfo.componentName}": ${error instanceof Error ? error.message : String(error)}`,
+        stack: error instanceof Error ? error.stack : undefined,
       })
     }
   }
@@ -116,6 +118,7 @@ export function processComponent(
         componentName: componentInfo.componentName,
         phase: 'render',
         error: error instanceof Error ? error.message : String(error),
+        stack: error instanceof Error ? error.stack : undefined,
       })
     }
   }
@@ -156,6 +159,7 @@ export function processComponent(
         componentName: componentInfo.componentName,
         phase: 'css',
         error: `CSS selector matching failed: ${error instanceof Error ? error.message : String(error)}`,
+        stack: error instanceof Error ? error.stack : undefined,
       })
     }
   }
@@ -360,6 +364,7 @@ function extractCssInfo(
         componentName,
         phase: 'css',
         error: `Failed to parse ${cssPath}: ${error instanceof Error ? error.message : String(error)}`,
+        stack: error instanceof Error ? error.stack : undefined,
       })
     }
   }

package/vite.config.ts

@@ -3,7 +3,7 @@ import { resolve } from 'node:path'
 import { defineConfig } from 'vite'
 import dts from 'vite-plugin-dts'
 
-export default defineConfig({
+export default defineConfig(({ mode }) => ({
   plugins: [
     dts({
       include: ['src/**/*.ts'],
@@ -11,6 +11,7 @@ export default defineConfig({
     }),
   ],
   build: {
+    minify: mode !== 'development',
     lib: {
       entry: {
         index: resolve(__dirname, 'src/index.ts'),
@@ -48,4 +49,4 @@ export default defineConfig({
   test: {
     globals: true,
   },
-})
+}))