@wix/zero-config-implementation 1.78.0 → 1.79.0

package/src/extensions/ref-elements/context.ts

@@ -0,0 +1,168 @@
+import ts from 'typescript'
+import type { ComponentInfo } from '../../information-extractors/ts/types'
+import { collectAllPackageImportSpecifiers } from '../shared/ast-scanner'
+import { loadNormalizedCatalogEntries } from '../shared/catalog-loader'
+import { resolveModuleUrlFromEntryPath } from '../shared/module-resolution'
+import { extractBasePackageName, extractModuleLeafExportName } from '../shared/package-specifier'
+import { extractEligibleRefElementPaths } from './eligible-paths'
+import type { RefElementContext, RefElementModule } from './types'
+
+interface NormalizedRefElementCatalogEntry {
+  moduleSpecifier: string
+  refComponentType: string
+}
+
+export async function buildRefElementContext(
+  program: ts.Program,
+  sourceFilePath: string,
+  componentInfo: ComponentInfo,
+  compiledEntryPath: string,
+): Promise<RefElementContext> {
+  const importedModuleSpecifiers = collectAllPackageImportSpecifiers(
+    program,
+    sourceFilePath,
+    referencesRefElementModule,
+  )
+
+  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 catalogEntries = await loadNormalizedCatalogEntries(
+    importedModuleSpecifiers,
+    compiledEntryPath,
+    normalizeRefElementExtensionEntry,
+  )
+
+  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 normalizeRefElementExtensionEntry(rawEntry: unknown): NormalizedRefElementCatalogEntry | undefined {
+  const entry = rawEntry as {
+    options?: { type?: string; resources?: { client?: { moduleSpecifier?: string } } }
+    type?: string
+    resources?: { client?: { moduleSpecifier?: string } }
+  }
+  const normalizedEntry = entry.options ?? entry
+  const moduleSpecifier = normalizedEntry.resources?.client?.moduleSpecifier
+  const refComponentType = normalizedEntry.type
+
+  if (!moduleSpecifier || !refComponentType) {
+    return undefined
+  }
+
+  return {
+    moduleSpecifier,
+    refComponentType,
+  }
+}
+
+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 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]
+}

package/src/{ref-elements → extensions/ref-elements}/eligible-paths.ts

@@ -1,4 +1,4 @@
-import type { ComponentInfo, ResolvedType } from '../information-extractors/ts/types'
+import type { ComponentInfo, ResolvedType } from '../../information-extractors/ts/types'
 
 export function extractEligibleRefElementPaths(componentInfo: ComponentInfo): string[] {
   const elementPropsInfo = componentInfo.props.elementProps

package/src/extensions/shared/ast-scanner.ts

@@ -0,0 +1,85 @@
+import ts from 'typescript'
+
+export function isPackageModuleSpecifier(moduleSpecifier: string): boolean {
+  return !moduleSpecifier.startsWith('.') && !moduleSpecifier.startsWith('/') && !moduleSpecifier.startsWith('file:')
+}
+
+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
+}
+
+export function collectAllPackageImportSpecifiers(
+  program: ts.Program,
+  sourceFilePath: string,
+  filter?: (statement: ts.Statement, moduleSpecifier: string) => boolean,
+): string[] {
+  const entrySourceFile = findSourceFile(program, sourceFilePath)
+  if (!entrySourceFile) {
+    return []
+  }
+
+  const packageSpecifiers = 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 (isPackageModuleSpecifier(moduleSpecifier) && (!filter || filter(statement, moduleSpecifier))) {
+        packageSpecifiers.add(moduleSpecifier)
+      }
+
+      const importedSourceFile = resolveImportedSourceFile(program, sourceFile.fileName, moduleSpecifier)
+      if (importedSourceFile) {
+        visitSourceFile(importedSourceFile)
+      }
+    }
+  }
+
+  visitSourceFile(entrySourceFile)
+  return [...packageSpecifiers]
+}

package/src/extensions/shared/catalog-loader.ts

@@ -0,0 +1,64 @@
+import { isPackageModuleSpecifier } from './ast-scanner'
+import { resolveModuleUrlFromEntryPath } from './module-resolution'
+import { extractBasePackageName } from './package-specifier'
+
+interface RawExtensionModule {
+  extensions?: unknown[]
+  default?: unknown
+}
+
+function extractRawExtensionEntries(extensionModule: Record<string, unknown>): unknown[] {
+  const defaultExport = extensionModule.default
+  const extensionEntries = Array.isArray(defaultExport)
+    ? defaultExport
+    : ((defaultExport as { extensions?: unknown[] } | undefined)?.extensions ?? extensionModule.extensions)
+
+  return Array.isArray(extensionEntries) ? extensionEntries : []
+}
+
+async function loadRawExtensionEntries(packageName: string, compiledEntryPath: string): Promise<unknown[]> {
+  const resolvedExtensionsUrl = resolveModuleUrlFromEntryPath(compiledEntryPath, `${packageName}/extensions`)
+  if (!resolvedExtensionsUrl) {
+    return []
+  }
+
+  try {
+    const extensionModule = (await import(resolvedExtensionsUrl)) as RawExtensionModule & Record<string, unknown>
+    return extractRawExtensionEntries(extensionModule)
+  } catch (error) {
+    // The package declared an /extensions export but the file doesn't exist — skip it.
+    if (isModuleNotFoundError(error)) {
+      return []
+    }
+    throw error
+  }
+}
+
+function isModuleNotFoundError(error: unknown): boolean {
+  return (
+    error instanceof Error &&
+    'code' in error &&
+    (error.code === 'ERR_MODULE_NOT_FOUND' || error.code === 'MODULE_NOT_FOUND')
+  )
+}
+
+/**
+ * For each package name derived from `importedSpecifiers`, loads its `/extensions` catalog and
+ * normalizes every raw entry through `normalizeEntry`. Returns the flat list of non-undefined results.
+ */
+export async function loadNormalizedCatalogEntries<T>(
+  importedSpecifiers: string[],
+  compiledEntryPath: string,
+  normalizeEntry: (rawEntry: unknown) => T | undefined,
+): Promise<T[]> {
+  const packageNames = [...new Set(importedSpecifiers.filter(isPackageModuleSpecifier).map(extractBasePackageName))]
+
+  const entriesPerPackage = await Promise.all(
+    packageNames.map(async (packageName) => {
+      const rawEntries = await loadRawExtensionEntries(packageName, compiledEntryPath)
+      return rawEntries.map(normalizeEntry).filter((entry): entry is T => entry !== undefined)
+    }),
+  )
+
+  return entriesPerPackage.flat()
+}

package/src/{ref-elements → extensions/shared}/module-resolution.test.ts

@@ -19,7 +19,7 @@ describe('resolveModulePathFromEntryPath', () => {
 
     const packageRootPath = path.join(temporaryDirectoryPath, 'consumer-package')
     const nodeModulesPath = path.join(packageRootPath, 'node_modules', '@wix')
-    const fixturePackagePath = path.resolve(__dirname, '../../../ref-element-fixtures')
+    const fixturePackagePath = path.resolve(__dirname, '../../../../ref-element-fixtures')
 
     fs.mkdirSync(nodeModulesPath, { recursive: true })
     fs.symlinkSync(fixturePackagePath, path.join(nodeModulesPath, 'zero-config-ref-element-fixtures'), 'dir')
@@ -40,7 +40,7 @@ describe('resolveModulePathFromEntryPath', () => {
 describe('resolveModuleUrlFromEntryPath', () => {
   it('returns a file url for the resolved module path', () => {
     const resolvedExtensionsUrl = resolveModuleUrlFromEntryPath(
-      path.resolve(__dirname, '../__fixtures__/esm-ref-element-entry.mjs'),
+      path.resolve(__dirname, '../../__fixtures__/esm-ref-element-entry.mjs'),
       '@wix/zero-config-ref-element-fixtures/extensions',
     )
 

package/src/index.ts

@@ -5,6 +5,10 @@ import React, { type ComponentType } from 'react'
 
 import { toEditorReactComponent } from './converters'
 import { BaseError, IoError, type NotFoundError, ParseError } from './errors'
+import { buildContextProviderModules } from './extensions/context-providers/context'
+import { buildContextAwareWrapper, loadMockProviders } from './extensions/context-providers/mock-provider'
+import { buildRefElementContext } from './extensions/ref-elements/context'
+import type { RefElementContext } from './extensions/ref-elements/types'
 import type { ExtractionError } from './extraction-types'
 import type { RunExtractorsOptions } from './information-extractors/react'
 import { extractCssImports, extractDefaultComponentInfo } from './information-extractors/ts'
@@ -12,8 +16,6 @@ import type { ComponentInfo } from './information-extractors/ts/types'
 import { processComponent } from './manifest-pipeline'
 import { findComponent, findDefaultComponent, loadModuleForExtraction } from './module-loader'
 import type { LoadModuleFailure } from './module-loader'
-import { buildRefElementContext } from './ref-elements/context'
-import type { RefElementContext } from './ref-elements/types'
 import { compileTsFile } from './ts-compiler'
 
 const defaultWrapper = (Component: ComponentType<unknown>): ComponentType<unknown> => {
@@ -64,10 +66,6 @@ export function extractComponentManifestResult(
     options?.onError?.(error)
   }
 
-  const optionsWithDefaults: ExtractComponentManifestOptions = {
-    ...options,
-    wrapper: options?.wrapper ?? defaultWrapper,
-  }
   // Step 1: Compile TypeScript (fatal)
   return compileTsFile(componentPath)
     .andThen((program) => {
@@ -91,79 +89,122 @@ export function extractComponentManifestResult(
     .andThen(({ program, componentInfo }) => {
       const { componentName } = componentInfo
 
+      // Step 3a: Build ref-element context
       return ResultAsync.fromPromise(
         buildRefElementContext(program, componentPath, componentInfo, compiledEntryPath),
         (thrown) =>
           new ParseError(
-            `Failed to build the ref-element context for "${componentPath}": ${thrown instanceof Error ? thrown.message : String(thrown)}`,
+            `Failed to build ref-element context for "${componentPath}": ${thrown instanceof Error ? thrown.message : String(thrown)}`,
             { cause: thrown instanceof Error ? thrown : undefined, props: { phase: 'extract' } },
           ),
       ).andThen((refElementContext) =>
-        // Step 3: Load the compiled package module (non-fatal) — done after TS extraction
-        // so componentName is known when reporting failures
-        loadModuleForExtraction(compiledEntryPath, refElementContext.runtimeModules)
-          .map(({ cleanup, moduleExports }) => ({
-            loadComponent: (name: string) => findComponent(moduleExports, name) ?? findDefaultComponent(moduleExports),
-            failure: null as LoadModuleFailure | null,
-            cleanup,
-          }))
-          .orElse((failure) =>
-            okAsync({
-              loadComponent: () => null as ComponentType<unknown> | null,
-              cleanup: async () => {},
-              failure,
-            }),
-          )
-          .andThen(({ cleanup, failure, loadComponent }) => {
-            if (failure) {
-              if (failure.esmError) {
-                report({
-                  componentName,
-                  phase: 'loader',
-                  error: new IoError('ESM import failed', { cause: failure.esmError, props: { phase: 'loader' } }),
-                })
-              }
-              report({
-                componentName,
-                phase: 'loader',
-                error: new IoError('CJS require failed', { cause: failure.cjsError, props: { phase: 'loader' } }),
-              })
+        // Step 3b: Build context provider modules
+        ResultAsync.fromPromise(
+          buildContextProviderModules(program, componentPath, compiledEntryPath),
+          (thrown) =>
+            new ParseError(
+              `Failed to build context provider modules for "${componentPath}": ${thrown instanceof Error ? thrown.message : String(thrown)}`,
+              { cause: thrown instanceof Error ? thrown : undefined, props: { phase: 'extract' } },
+            ),
+        ).andThen((contextProviderModules) => {
+          // Step 4: Build context provider wrapper with mock providers
+          const buildWrapper = async (): Promise<(Component: ComponentType<unknown>) => ComponentType<unknown>> => {
+            const baseWrapper = options?.wrapper ?? defaultWrapper
+            if (contextProviderModules.length === 0) {
+              return baseWrapper
+            }
+            const loadedProviders = await loadMockProviders(
+              contextProviderModules,
+              React,
+              refElementContext.runtimeModules,
+            )
+            if (loadedProviders.length === 0) {
+              return baseWrapper
             }
+            return buildContextAwareWrapper(loadedProviders, baseWrapper, React)
+          }
 
-            // Step 4: Extract CSS imports (non-fatal)
-            let cssImportPaths: string[] = []
-            const cssResult = Result.fromThrowable(extractCssImports, (thrown) => thrown)(program)
-            if (cssResult.isOk()) {
-              cssImportPaths = cssResult.value
-            } else {
-              const thrown = cssResult.error
-              report({
-                componentName,
-                phase: 'css',
-                error: new ParseError(
-                  `Failed to extract CSS imports: ${thrown instanceof Error ? thrown.message : String(thrown)}`,
-                  { cause: thrown instanceof Error ? thrown : undefined, props: { phase: 'css' } },
-                ),
-              })
+          return ResultAsync.fromPromise(
+            buildWrapper(),
+            (thrown) =>
+              new ParseError(
+                `Failed to build context provider wrapper for "${componentPath}": ${thrown instanceof Error ? thrown.message : String(thrown)}`,
+                { cause: thrown instanceof Error ? thrown : undefined, props: { phase: 'extract' } },
+              ),
+          ).andThen((wrapper) => {
+            const optionsWithDefaults: ExtractComponentManifestOptions = {
+              ...options,
+              wrapper,
             }
 
-            // Step 5: Process the default-exported component (non-fatal unless render fails after load)
-            return ResultAsync.fromPromise(
-              processComponentWithCleanup(
-                componentInfo,
-                loadComponent,
-                cssImportPaths,
-                !!failure,
-                report,
-                optionsWithDefaults,
-                compiledEntryPath,
-                refElementContext,
+            // Step 5: Load the compiled package module (non-fatal) - done after TS extraction
+            // so componentName is known when reporting failures
+            return loadModuleForExtraction(compiledEntryPath, refElementContext.runtimeModules)
+              .map(({ cleanup, moduleExports }) => ({
+                loadComponent: (name: string) =>
+                  findComponent(moduleExports, name) ?? findDefaultComponent(moduleExports),
+                failure: null as LoadModuleFailure | null,
                 cleanup,
-                errors,
-              ),
-              normalizeComponentExtractionCleanupFailure,
-            )
-          }),
+              }))
+              .orElse((failure) =>
+                okAsync({
+                  loadComponent: () => null as ComponentType<unknown> | null,
+                  cleanup: async () => {},
+                  failure,
+                }),
+              )
+              .andThen(({ cleanup, failure, loadComponent }) => {
+                if (failure) {
+                  if (failure.esmError) {
+                    report({
+                      componentName,
+                      phase: 'loader',
+                      error: new IoError('ESM import failed', { cause: failure.esmError, props: { phase: 'loader' } }),
+                    })
+                  }
+                  report({
+                    componentName,
+                    phase: 'loader',
+                    error: new IoError('CJS require failed', { cause: failure.cjsError, props: { phase: 'loader' } }),
+                  })
+                }
+
+                // Step 6: Extract CSS imports (non-fatal)
+                let cssImportPaths: string[] = []
+                const cssResult = Result.fromThrowable(extractCssImports, (thrown) => thrown)(program)
+                if (cssResult.isOk()) {
+                  cssImportPaths = cssResult.value
+                } else {
+                  const thrown = cssResult.error
+                  report({
+                    componentName,
+                    phase: 'css',
+                    error: new ParseError(
+                      `Failed to extract CSS imports: ${thrown instanceof Error ? thrown.message : String(thrown)}`,
+                      { cause: thrown instanceof Error ? thrown : undefined, props: { phase: 'css' } },
+                    ),
+                  })
+                }
+
+                // Step 7: Process the default-exported component
+                return ResultAsync.fromPromise(
+                  processComponentWithCleanup(
+                    componentInfo,
+                    loadComponent,
+                    cssImportPaths,
+                    !!failure,
+                    report,
+                    optionsWithDefaults,
+                    compiledEntryPath,
+                    refElementContext,
+                    cleanup,
+                    errors,
+                  ),
+                  normalizeComponentExtractionCleanupFailure,
+                )
+              })
+          })
+        }),
       )
     })
 }

package/src/information-extractors/react/extractors/prop-tracker.test.ts

@@ -1,6 +1,6 @@
 import { describe, expect, it } from 'vitest'
-import { createRefElementMarker } from '../../../ref-elements/path-utils'
-import type { RefElementMatch } from '../../../ref-elements/types'
+import { createRefElementMarker } from '../../../extensions/ref-elements/path-utils'
+import type { RefElementMatch } from '../../../extensions/ref-elements/types'
 import { ExtractorStore } from './core/store'
 import { createPropTrackerExtractor } from './prop-tracker'
 

package/src/information-extractors/react/extractors/prop-tracker.ts

@@ -7,9 +7,9 @@
 
 import type { HTMLAttributes } from 'react'
 import { TRACE_ATTR } from '../../../component-renderer'
-import { readRefElementComponentType } from '../../../ref-elements/component-tag'
-import { parseRefElementMarker } from '../../../ref-elements/path-utils'
-import type { RefElementMatch } from '../../../ref-elements/types'
+import { readRefElementComponentType } from '../../../extensions/ref-elements/component-tag'
+import { parseRefElementMarker } from '../../../extensions/ref-elements/path-utils'
+import type { RefElementMatch } from '../../../extensions/ref-elements/types'
 import { findPreferredSemanticClass, normalizeClassNames } from '../../../utils/css-class'
 import type { PropSpyMeta, TrackingStores } from '../types'
 import { type PropSpyRegistrar, generateMockProps, resetMockCounter } from '../utils/mock-generator'