@wix/zero-config-implementation 1.25.0 → 1.27.0

package/src/manifest-pipeline.ts

@@ -19,23 +19,19 @@ import { compileSass } from './information-extractors/css/sass-adapter'
 
 import type { ComponentType } from 'react'
 
+import { IoError, NotFoundError, ParseError } from './errors'
+import type { ExtractionError } from './extraction-types'
+
 // ─────────────────────────────────────────────────────────────────────────────
 // Types
 // ─────────────────────────────────────────────────────────────────────────────
 
-/** A non-fatal issue encountered during component processing. */
-export interface ExtractionWarning {
-  componentName: string
-  phase: 'render' | 'coupling' | 'css' | 'loader' | 'conversion'
-  error: string
-  stack?: string
-}
-
 export interface ExtractedCssInfo {
   filePath: string
   api: CSSParserAPI
   properties: Map<string, string>
   customProperties: Map<string, string>
+  isCssModule: boolean
 }
 
 export interface ComponentInfoWithCss extends CoupledComponentInfo {
@@ -46,7 +42,6 @@ export interface ComponentInfoWithCss extends CoupledComponentInfo {
 /** The result of processing a single component through the manifest pipeline. */
 export interface ProcessComponentResult {
   component: ComponentInfoWithCss
-  warnings: ExtractionWarning[]
 }
 
 // ─────────────────────────────────────────────────────────────────────────────
@@ -65,29 +60,34 @@ export function processComponent(
   componentInfo: ComponentInfo,
   loadComponent: (componentName: string) => ComponentType<unknown> | null,
   cssImportPaths: string[],
-  loaderHasError?: boolean,
+  loaderHasError: boolean,
+  report: (error: ExtractionError) => void,
   options?: RunExtractorsOptions,
 ): ProcessComponentResult {
-  const warnings: ExtractionWarning[] = []
+  const { componentName } = componentInfo
 
   // Load the actual component
   let Component: ComponentType<unknown> | null = null
   try {
-    Component = loadComponent(componentInfo.componentName)
+    Component = loadComponent(componentName)
     if (!Component && !loaderHasError) {
-      warnings.push({
-        componentName: componentInfo.componentName,
+      report({
+        componentName,
         phase: 'loader',
-        error: `Component "${componentInfo.componentName}" not found in package exports`,
+        error: new NotFoundError(`Component "${componentName}" not found in package exports`, {
+          props: { phase: 'loader' },
+        }),
       })
     }
-  } catch (error) {
+  } catch (thrownError) {
     if (!loaderHasError) {
-      warnings.push({
-        componentName: componentInfo.componentName,
+      report({
+        componentName,
         phase: 'loader',
-        error: `Failed to load "${componentInfo.componentName}": ${error instanceof Error ? error.message : String(error)}`,
-        stack: error instanceof Error ? error.stack : undefined,
+        error: new IoError(
+          `Failed to load "${componentName}": ${thrownError instanceof Error ? thrownError.message : String(thrownError)}`,
+          { cause: thrownError instanceof Error ? thrownError : undefined, props: { phase: 'loader' } },
+        ),
       })
     }
   }
@@ -109,18 +109,20 @@ export function processComponent(
 
       const { props: coupledProps, innerElementProps } = buildCoupledProps(componentInfo, state.stores)
       coupledInfo = {
-        componentName: componentInfo.componentName,
+        componentName,
         props: coupledProps,
         elements: convertElements(extractedElements),
         innerElementProps: innerElementProps.size > 0 ? innerElementProps : undefined,
         propUsages: state.stores.propUsages,
       }
-    } catch (error) {
-      warnings.push({
-        componentName: componentInfo.componentName,
+    } catch (thrownError) {
+      report({
+        componentName,
         phase: 'render',
-        error: error instanceof Error ? error.message : String(error),
-        stack: error instanceof Error ? error.stack : undefined,
+        error: new IoError(thrownError instanceof Error ? thrownError.message : String(thrownError), {
+          cause: thrownError instanceof Error ? thrownError : undefined,
+          props: { phase: 'render' },
+        }),
       })
     }
   }
@@ -132,7 +134,7 @@ export function processComponent(
   } else {
     // Fallback: create minimal info without DOM coupling
     enhancedInfo = {
-      componentName: componentInfo.componentName,
+      componentName,
       props: Object.fromEntries(
         Object.entries(componentInfo.props).map(([name, info]) => [
           name,
@@ -145,8 +147,7 @@ export function processComponent(
   }
 
   // Read and parse CSS imports
-  const { cssInfos: css, warnings: cssWarnings } = extractCssInfo(cssImportPaths, componentInfo.componentName)
-  warnings.push(...cssWarnings)
+  const css = extractCssInfo(cssImportPaths, componentName, report)
 
   // Match CSS selectors to elements
   let varUsedByTraceId = new Map<string, Set<string>>()
@@ -158,12 +159,14 @@ export function processComponent(
         elements: convertElements(matchResult.elements),
       }
       varUsedByTraceId = matchResult.varUsedByTraceId
-    } catch (error) {
-      warnings.push({
-        componentName: componentInfo.componentName,
+    } catch (thrownError) {
+      report({
+        componentName,
         phase: 'css',
-        error: `CSS selector matching failed: ${error instanceof Error ? error.message : String(error)}`,
-        stack: error instanceof Error ? error.stack : undefined,
+        error: new IoError(
+          `CSS selector matching failed: ${thrownError instanceof Error ? thrownError.message : String(thrownError)}`,
+          { cause: thrownError instanceof Error ? thrownError : undefined, props: { phase: 'css' } },
+        ),
       })
     }
   }
@@ -174,7 +177,6 @@ export function processComponent(
       css,
       varUsedByTraceId,
     },
-    warnings,
   }
 }
 
@@ -326,14 +328,14 @@ function convertElements(elements: ExtractedElement[]): CoupledComponentInfo['el
 
 /**
  * Reads and parses CSS files, extracting standard and custom properties.
- * Returns the parsed CSS info alongside any warnings from files that failed to parse.
+ * Non-fatal parse failures are reported via `reportError`.
  */
 function extractCssInfo(
   cssImportPaths: string[],
   componentName: string,
-): { cssInfos: ExtractedCssInfo[]; warnings: ExtractionWarning[] } {
+  report: (error: ExtractionError) => void,
+): ExtractedCssInfo[] {
   const cssInfos: ExtractedCssInfo[] = []
-  const warnings: ExtractionWarning[] = []
 
   for (const cssPath of cssImportPaths) {
     try {
@@ -342,11 +344,13 @@ function extractCssInfo(
       if (cssPath.endsWith('.scss') || cssPath.endsWith('.sass')) {
         const compiledCssResult = compileSass(cssPath)
         if (compiledCssResult.isErr()) {
-          warnings.push({
+          report({
             componentName,
             phase: 'css',
-            error: `Failed to parse ${cssPath}: ${compiledCssResult.error.message}`,
-            stack: compiledCssResult.error.stack,
+            error: new ParseError(`Failed to compile ${cssPath}`, {
+              cause: compiledCssResult.error,
+              props: { phase: 'css' },
+            }),
           })
           continue
         }
@@ -378,16 +382,19 @@ function extractCssInfo(
         api,
         properties,
         customProperties,
+        isCssModule: /\.module\.(css|scss|sass)$/.test(cssPath),
       })
-    } catch (error) {
-      warnings.push({
+    } catch (thrownError) {
+      report({
         componentName,
         phase: 'css',
-        error: `Failed to parse ${cssPath}: ${error instanceof Error ? error.message : String(error)}`,
-        stack: error instanceof Error ? error.stack : undefined,
+        error: new ParseError(
+          `Failed to parse ${cssPath}: ${thrownError instanceof Error ? thrownError.message : String(thrownError)}`,
+          { cause: thrownError instanceof Error ? thrownError : undefined, props: { phase: 'css' } },
+        ),
       })
     }
   }
 
-  return { cssInfos, warnings }
+  return cssInfos
 }

package/src/module-loader.ts

@@ -1,10 +1,17 @@
 import { createRequire } from 'node:module'
-import { pascalCase } from 'case-anything'
 import { ResultAsync, errAsync, okAsync } from 'neverthrow'
 import type { ComponentType } from 'react'
-import { IoError } from './errors'
 
-type IoErrorInstance = InstanceType<typeof IoError>
+/**
+ * Structured failure from `loadModule` when both ESM import and CJS require fail.
+ * Carries each error separately so callers can report them independently.
+ */
+export interface LoadModuleFailure {
+  /** The ESM import error, or null when no ESM was attempted (e.g. empty path). */
+  esmError: Error | null
+  /** The CJS require error, or a generic error for the empty-path case. */
+  cjsError: Error
+}
 
 /**
  * Attempts to load a module, first via ESM `import()`, then via CJS `require`.
@@ -17,32 +24,30 @@ type IoErrorInstance = InstanceType<typeof IoError>
  *
  * @param entryPath - Absolute path to the module entry point.
  * @returns A `ResultAsync` containing the module exports on success.
- * @errors {IoError} When both ESM import and CJS require fail.
+ * @errors {LoadModuleFailure} When both ESM import and CJS require fail.
  */
-export function loadModule(entryPath: string): ResultAsync<Record<string, unknown>, IoErrorInstance> {
-  return ResultAsync.fromPromise(import(entryPath) as Promise<Record<string, unknown>>, () => null).orElse(() => {
+export function loadModule(entryPath: string): ResultAsync<Record<string, unknown>, LoadModuleFailure> {
+  if (!entryPath) {
+    return errAsync({ esmError: null, cjsError: new Error('No compiled entry path provided') })
+  }
+
+  return ResultAsync.fromPromise(
+    import(entryPath) as Promise<Record<string, unknown>>,
+    (esmErr): Error => (esmErr instanceof Error ? esmErr : new Error(String(esmErr))),
+  ).orElse((esmError) => {
     try {
       const require = createRequire(import.meta.url)
       const exports = require(entryPath)
       return okAsync(exports as Record<string, unknown>)
     } catch (requireErr) {
-      const cause = requireErr instanceof Error ? requireErr : new Error(String(requireErr))
-      return errAsync(
-        new IoError(`Failed to load ${entryPath}: ${cause.message}`, {
-          cause,
-          props: { phase: 'load' },
-        }),
-      )
+      const cjsError = requireErr instanceof Error ? requireErr : new Error(String(requireErr))
+      return errAsync({ esmError, cjsError })
     }
   })
 }
 
-function isPascalCase(name: string): boolean {
-  return name.length > 0 && pascalCase(name) === name
-}
-
 function isComponent(value: unknown): value is ComponentType<unknown> {
-  if (typeof value === 'function') return isPascalCase(value.name)
+  if (typeof value === 'function') return true
   // React.memo() and React.forwardRef() return objects, not functions
   if (typeof value === 'object' && value !== null && '$$typeof' in value) return true
   return false
@@ -51,7 +56,7 @@ function isComponent(value: unknown): value is ComponentType<unknown> {
 export function findComponent(moduleExports: Record<string, unknown>, name: string): ComponentType<unknown> | null {
   // Direct named export
   const direct = moduleExports[name]
-  if ((typeof direct === 'function' && isPascalCase(name)) || isComponent(direct)) {
+  if (isComponent(direct)) {
     return direct as ComponentType<unknown>
   }