@wix/zero-config-implementation 1.82.0 → 1.84.0

package/src/manifest-pipeline.css-match-fatal.test.ts

@@ -0,0 +1,41 @@
+import fs from 'node:fs'
+import React from 'react'
+import { beforeEach, expect, it, vi } from 'vitest'
+import { processComponent } from './manifest-pipeline'
+
+vi.mock('./information-extractors/css', async (importOriginal) => {
+  const original = await importOriginal<typeof import('./information-extractors/css')>()
+  return {
+    ...original,
+    matchCssSelectors: vi.fn(),
+  }
+})
+
+vi.mock('node:fs', async (importOriginal) => {
+  const original = await importOriginal<typeof import('node:fs')>()
+  return { ...original, default: { ...original, readFileSync: vi.fn() } }
+})
+
+beforeEach(() => {
+  vi.mocked(fs.readFileSync).mockReturnValue('.root { color: red; }')
+})
+
+it('returns ok:false with IoError when matchCssSelectors throws', async () => {
+  const { matchCssSelectors } = await import('./information-extractors/css')
+  vi.mocked(matchCssSelectors).mockImplementation(() => {
+    throw new Error('simulated selector matching failure')
+  })
+
+  const SimpleComponent: React.FC<unknown> = () => React.createElement('div', { className: 'root' }, 'hello')
+
+  const result = processComponent({ componentName: 'SimpleComponent', props: {} }, () => SimpleComponent, [
+    '/fake/style.css',
+  ])
+
+  expect(result.ok).toBe(false)
+  if (!result.ok) {
+    expect(result.error.name).toBe('IoError')
+    expect(result.error.message).toContain('CSS selector matching failed for "SimpleComponent"')
+    expect(result.error.message).toContain('simulated selector matching failure')
+  }
+})

package/src/manifest-pipeline.ts

@@ -26,7 +26,6 @@ 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
@@ -58,12 +57,9 @@ export type ProcessComponentResult =
  * Processes a single component through the full manifest pipeline:
  * loading, rendering with prop tracking, CSS extraction, and selector matching.
  *
- * On success (`ok: true`), returns enriched component info. Non-fatal loader/CSS
- * issues are reported via `report` only; when the module did not load, a fallback
- * manifest (TS props without DOM coupling) is still returned.
- *
- * When the component was loaded but render/extractors throw, returns `ok: false`
- * with an {@link IoError} — Tier-1 callers should turn that into a failed `Result`.
+ * On success (`ok: true`), returns enriched component info.
+ * On failure, returns `ok: false` with a typed error — Tier-1 callers should
+ * turn that into a failed `Result`.
  *
  * @param compiledEntryPath - Optional path to the user's compiled JS entry. When
  *        provided, the renderer also patches the React module resolved from the
@@ -73,8 +69,6 @@ export function processComponent(
   componentInfo: ComponentInfo,
   loadComponent: (componentName: string) => ComponentType<unknown> | null,
   cssImportPaths: string[],
-  loaderHasError: boolean,
-  report: (error: ExtractionError) => void,
   options?: RunExtractorsOptions,
   compiledEntryPath?: string,
   eligiblePaths?: string[],
@@ -85,82 +79,70 @@ export function processComponent(
   let Component: ComponentType<unknown> | null = null
   try {
     Component = loadComponent(componentName)
-    if (!Component && !loaderHasError) {
-      report({
-        componentName,
-        phase: 'loader',
-        error: new NotFoundError(`Component "${componentName}" not found in package exports`, {
-          props: { phase: 'loader' },
-        }),
-      })
+    if (!Component) {
+      return {
+        ok: false,
+        error: new NotFoundError(
+          `Component "${componentName}" was not found as a named export in the compiled bundle. Ensure "${componentName}" is exported from the package entry point.`,
+          { props: { phase: 'loader' } },
+        ),
+      }
     }
   } catch (thrownError) {
-    if (!loaderHasError) {
-      report({
-        componentName,
-        phase: 'loader',
-        error: new IoError(
-          `Failed to load "${componentName}": ${thrownError instanceof Error ? thrownError.message : String(thrownError)}`,
-          { cause: thrownError instanceof Error ? thrownError : undefined, props: { phase: 'loader' } },
-        ),
-      })
+    return {
+      ok: false,
+      error: new IoError(
+        `Failed to access component "${componentName}" from compiled bundle: ${thrownError instanceof Error ? thrownError.message : String(thrownError)}`,
+        { cause: thrownError instanceof Error ? thrownError : undefined, props: { phase: 'loader' } },
+      ),
     }
   }
 
-  let coupledInfo: CoupledComponentInfo | null = null
   let enhancedInfo: CoupledComponentInfo
   let html: string | undefined
   let extractedElements: ExtractedElement[] = []
 
   // Render component with mock props and track prop flow (can fail)
-  if (Component) {
-    try {
-      const { extractor: propTracker, state } = createPropTrackerExtractor({ eligiblePaths })
-      const cssExtractor = createCssPropertiesExtractor()
-
-      const result = runExtractors(componentInfo, Component, [propTracker, cssExtractor], options, compiledEntryPath)
-      html = result.html
-      extractedElements = result.elements
-
-      const { props: coupledProps, innerElementProps } = buildCoupledProps(componentInfo, state.stores)
-      coupledInfo = {
-        componentName,
-        props: coupledProps,
-        elements: convertElements(extractedElements),
-        innerElementProps: innerElementProps.size > 0 ? innerElementProps : undefined,
-        propUsages: state.stores.propUsages,
-      }
-    } catch (thrownError) {
-      const error = new IoError(thrownError instanceof Error ? thrownError.message : String(thrownError), {
-        cause: thrownError instanceof Error ? thrownError : undefined,
-        props: { phase: 'render' },
-      })
-      report({ componentName, phase: 'render', error })
-      return { ok: false, error }
-    }
-  }
+  try {
+    const { extractor: propTracker, state } = createPropTrackerExtractor({ eligiblePaths })
+    const cssExtractor = createCssPropertiesExtractor()
+
+    const result = runExtractors(componentInfo, Component, [propTracker, cssExtractor], options, compiledEntryPath)
+    html = result.html
+    extractedElements = result.elements
 
-  // If rendering succeeded, use the coupled info directly
-  // (CSS properties are now embedded via css-properties-extractor)
-  if (coupledInfo) {
-    enhancedInfo = coupledInfo
-  } else {
-    // Fallback: create minimal info without DOM coupling
+    const { props: coupledProps, innerElementProps } = buildCoupledProps(componentInfo, state.stores)
     enhancedInfo = {
       componentName,
-      props: Object.fromEntries(
-        Object.entries(componentInfo.props).map(([name, info]) => [
-          name,
-          { ...info, logicOnly: false, propPath: `props.${name}` },
-        ]),
-      ),
-      elements: [],
-      propUsages: new Map(),
+      props: coupledProps,
+      elements: convertElements(extractedElements),
+      innerElementProps: innerElementProps.size > 0 ? innerElementProps : undefined,
+      propUsages: state.stores.propUsages,
+    }
+  } catch (thrownError) {
+    return {
+      ok: false,
+      error: new IoError(thrownError instanceof Error ? thrownError.message : String(thrownError), {
+        cause: thrownError instanceof Error ? thrownError : undefined,
+        props: { phase: 'render' },
+      }),
     }
   }
 
-  // Read and parse CSS imports
-  const css = extractCssInfo(cssImportPaths, componentName, report)
+  // Read and parse CSS imports (fatal)
+  let css: ExtractedCssInfo[]
+  try {
+    css = extractCssInfo(cssImportPaths, componentName)
+  } catch (thrownError) {
+    const error =
+      thrownError instanceof ParseError
+        ? thrownError
+        : new ParseError(
+            `Failed to parse CSS file for component "${componentName}": ${thrownError instanceof Error ? thrownError.message : String(thrownError)}`,
+            { cause: thrownError instanceof Error ? thrownError : undefined, props: { phase: 'css' } },
+          )
+    return { ok: false, error }
+  }
 
   // Match CSS selectors to elements
   let varUsedByTraceId = new Map<string, Set<string>>()
@@ -175,14 +157,13 @@ export function processComponent(
       }
       varUsedByTraceId = matchResult.varUsedByTraceId
     } catch (thrownError) {
-      report({
-        componentName,
-        phase: 'css',
+      return {
+        ok: false,
         error: new IoError(
-          `CSS selector matching failed: ${thrownError instanceof Error ? thrownError.message : String(thrownError)}`,
+          `CSS selector matching failed for "${componentName}": ${thrownError instanceof Error ? thrownError.message : String(thrownError)}`,
           { cause: thrownError instanceof Error ? thrownError : undefined, props: { phase: 'css' } },
         ),
-      })
+      }
     }
   }
 
@@ -349,70 +330,47 @@ function convertElements(elements: ExtractedElement[]): CoupledComponentInfo['el
  * Reads and parses CSS files, extracting standard and custom properties.
  * Non-fatal parse failures are reported via `reportError`.
  */
-function extractCssInfo(
-  cssImportPaths: string[],
-  componentName: string,
-  report: (error: ExtractionError) => void,
-): ExtractedCssInfo[] {
+function extractCssInfo(cssImportPaths: string[], componentName: string): ExtractedCssInfo[] {
   const cssInfos: ExtractedCssInfo[] = []
 
   for (const cssPath of cssImportPaths) {
-    try {
-      // Read and compile CSS file
-      let cssContent: string
-      if (cssPath.endsWith('.scss') || cssPath.endsWith('.sass')) {
-        const compiledCssResult = compileSass(cssPath)
-        if (compiledCssResult.isErr()) {
-          report({
-            componentName,
-            phase: 'css',
-            error: new ParseError(`Failed to compile ${cssPath}`, {
-              cause: compiledCssResult.error,
-              props: { phase: 'css' },
-            }),
-          })
-          continue
-        }
-        cssContent = compiledCssResult.value
-      } else {
-        cssContent = fs.readFileSync(cssPath, 'utf-8')
+    let cssContent: string
+    if (cssPath.endsWith('.scss') || cssPath.endsWith('.sass')) {
+      const compiledCssResult = compileSass(cssPath)
+      if (compiledCssResult.isErr()) {
+        throw new ParseError(`Failed to compile "${cssPath}" for component "${componentName}"`, {
+          cause: compiledCssResult.error,
+          props: { phase: 'css' },
+        })
       }
+      cssContent = compiledCssResult.value
+    } else {
+      cssContent = fs.readFileSync(cssPath, 'utf-8')
+    }
+
+    const api = parseCss(cssContent)
+    const allProps = api.getAllProperties()
+
+    const properties = new Map<string, string>()
+    const customProperties = new Map<string, string>()
 
-      // Parse CSS
-      const api = parseCss(cssContent)
-      const allProps = api.getAllProperties()
-
-      // Extract regular properties and custom properties (CSS variables)
-      const properties = new Map<string, string>()
-      const customProperties = new Map<string, string>()
-
-      for (const [, props] of allProps) {
-        for (const prop of props) {
-          if (prop.name.startsWith('--')) {
-            customProperties.set(prop.name, prop.value)
-          } else {
-            properties.set(prop.name, prop.value)
-          }
+    for (const [, props] of allProps) {
+      for (const prop of props) {
+        if (prop.name.startsWith('--')) {
+          customProperties.set(prop.name, prop.value)
+        } else {
+          properties.set(prop.name, prop.value)
         }
       }
-
-      cssInfos.push({
-        filePath: cssPath,
-        api,
-        properties,
-        customProperties,
-        isCssModule: /\.module\.(css|scss|sass)$/.test(cssPath),
-      })
-    } catch (thrownError) {
-      report({
-        componentName,
-        phase: 'css',
-        error: new ParseError(
-          `Failed to parse ${cssPath}: ${thrownError instanceof Error ? thrownError.message : String(thrownError)}`,
-          { cause: thrownError instanceof Error ? thrownError : undefined, props: { phase: 'css' } },
-        ),
-      })
     }
+
+    cssInfos.push({
+      filePath: cssPath,
+      api,
+      properties,
+      customProperties,
+      isCssModule: /\.module\.(css|scss|sass)$/.test(cssPath),
+    })
   }
 
   return cssInfos

package/src/module-loader.ts

@@ -148,10 +148,6 @@ export function findComponent(moduleExports: Record<string, unknown>, name: stri
   return null
 }
 
-/**
- * Finds the default-exported React component from a module.
- * Returns null when the default export is missing or is not component-like.
- */
 export function findDefaultComponent(moduleExports: Record<string, unknown>): ComponentType<unknown> | null {
   const defaultExport = moduleExports.default
   if (isComponent(defaultExport)) {

package/src/extraction-types.ts

@@ -1,8 +0,0 @@
-import type { BaseError } from './errors'
-
-/** A non-fatal issue encountered during component extraction. */
-export interface ExtractionError {
-  componentName: string
-  phase: 'render' | 'coupling' | 'css' | 'loader' | 'conversion'
-  error: InstanceType<typeof BaseError>
-}