@wix/zero-config-implementation 1.6.0 → 1.8.0

package/src/component-loader.test.ts

@@ -1,277 +0,0 @@
-import { join } from 'node:path'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-
-const mockModuleRequire = vi.fn()
-
-vi.mock('node:module', () => ({
-  createRequire: () => mockModuleRequire,
-}))
-
-vi.mock('read-package-up', () => ({
-  readPackageUpSync: vi.fn(),
-}))
-
-vi.mock('pkg-entry-points', () => ({
-  getPackageEntryPoints: vi.fn(),
-}))
-
-import { getPackageEntryPoints } from 'pkg-entry-points'
-import type { NormalizedPackageJson } from 'read-package-up'
-import { readPackageUpSync } from 'read-package-up'
-import { createComponentLoader } from './component-loader'
-
-const mockReadPackageUp = vi.mocked(readPackageUpSync)
-const mockGetEntryPoints = vi.mocked(getPackageEntryPoints)
-
-const fakePkgDir = '/fake/project'
-const fakePkgJsonPath = join(fakePkgDir, 'package.json')
-
-function mockPackage(name: string) {
-  mockReadPackageUp.mockReturnValue({
-    packageJson: { name } as NormalizedPackageJson,
-    path: fakePkgJsonPath,
-  })
-}
-
-beforeEach(() => {
-  vi.resetAllMocks()
-  mockModuleRequire.mockImplementation(() => {
-    throw new Error('Cannot find module')
-  })
-})
-
-describe('createComponentLoader', () => {
-  it('returns error when no package.json is found', async () => {
-    mockReadPackageUp.mockReturnValue(undefined)
-
-    const result = await createComponentLoader('/some/Component.tsx')
-
-    expect(result.isErr()).toBe(true)
-    if (result.isErr()) {
-      expect(result.error.message).toBe('No package.json found')
-    }
-  })
-
-  it('returns error when package has no resolvable entry points', async () => {
-    mockPackage('my-pkg')
-    mockGetEntryPoints.mockResolvedValue({})
-
-    const result = await createComponentLoader(join(fakePkgDir, 'src/Component.tsx'))
-
-    expect(result.isErr()).toBe(true)
-    if (result.isErr()) {
-      expect(result.error.message).toContain('no resolvable entry point')
-      expect(result.error.message).toContain('my-pkg')
-    }
-  })
-
-  it('returns error when only types exports exist', async () => {
-    mockPackage('types-only')
-    mockGetEntryPoints.mockResolvedValue({
-      '.': [[['types'], './dist/index.d.ts']],
-    })
-
-    const result = await createComponentLoader(join(fakePkgDir, 'src/Component.tsx'))
-
-    expect(result.isErr()).toBe(true)
-    if (result.isErr()) {
-      expect(result.error.message).toContain('no loadable exports')
-    }
-  })
-
-  it('returns error with path when single entry point fails to load', async () => {
-    mockPackage('bad-entry')
-    mockGetEntryPoints.mockResolvedValue({
-      '.': [[['import'], './dist/index.js']],
-    })
-
-    const result = await createComponentLoader(join(fakePkgDir, 'src/Component.tsx'))
-
-    expect(result.isErr()).toBe(true)
-    if (result.isErr()) {
-      expect(result.error.message).toContain('Failed to load')
-      expect(result.error.message).toContain(join(fakePkgDir, 'dist/index.js'))
-    }
-  })
-
-  it('returns error when multiple subpath exports all fail to load', async () => {
-    mockPackage('multi-fail')
-    mockGetEntryPoints.mockResolvedValue({
-      './foo': [[['import'], './dist/foo.js']],
-      './bar': [[['import'], './dist/bar.js']],
-    })
-
-    const result = await createComponentLoader(join(fakePkgDir, 'src/Component.tsx'))
-
-    expect(result.isErr()).toBe(true)
-    if (result.isErr()) {
-      expect(result.error.message).toContain('Failed to load')
-    }
-  })
-
-  it('skips types-only entries in multi-subpath exports', async () => {
-    mockPackage('mixed-types')
-    mockGetEntryPoints.mockResolvedValue({
-      './types': [[['types'], './dist/types.d.ts']],
-      './runtime': [[['import'], './dist/does-not-exist.js']],
-    })
-
-    const result = await createComponentLoader(join(fakePkgDir, 'src/Component.tsx'))
-
-    // ./types should be skipped (selectBestPath returns undefined), ./runtime fails to load
-    expect(result.isErr()).toBe(true)
-    if (result.isErr()) {
-      expect(result.error.message).toContain('Failed to load')
-    }
-  })
-})
-
-describe('selectBestPath (via createComponentLoader)', () => {
-  it('prefers import condition over node and default', async () => {
-    mockPackage('prio-test')
-    mockGetEntryPoints.mockResolvedValue({
-      '.': [
-        [['default'], './dist/default.js'],
-        [['node'], './dist/node.js'],
-        [['import'], './dist/import.js'],
-      ],
-    })
-
-    const result = await createComponentLoader(join(fakePkgDir, 'src/Component.tsx'))
-
-    // Module load will fail since these are fake paths, but entryPath is in the error
-    expect(result.isErr()).toBe(true)
-    if (result.isErr()) {
-      expect(result.error.message).toContain(join(fakePkgDir, 'dist/import.js'))
-    }
-  })
-
-  it('falls back to node condition when import is not available', async () => {
-    mockPackage('node-fallback')
-    mockGetEntryPoints.mockResolvedValue({
-      '.': [
-        [['default'], './dist/default.js'],
-        [['node'], './dist/node.js'],
-      ],
-    })
-
-    const result = await createComponentLoader(join(fakePkgDir, 'src/Component.tsx'))
-
-    expect(result.isErr()).toBe(true)
-    if (result.isErr()) {
-      expect(result.error.message).toContain(join(fakePkgDir, 'dist/node.js'))
-    }
-  })
-
-  it('falls back to default condition when import and node are not available', async () => {
-    mockPackage('default-fallback')
-    mockGetEntryPoints.mockResolvedValue({
-      '.': [[['default'], './dist/default.js']],
-    })
-
-    const result = await createComponentLoader(join(fakePkgDir, 'src/Component.tsx'))
-
-    expect(result.isErr()).toBe(true)
-    if (result.isErr()) {
-      expect(result.error.message).toContain(join(fakePkgDir, 'dist/default.js'))
-    }
-  })
-
-  it('skips entries that include types condition', async () => {
-    mockPackage('skip-types')
-    mockGetEntryPoints.mockResolvedValue({
-      '.': [
-        [['import', 'types'], './dist/index.d.ts'],
-        [['import'], './dist/index.js'],
-      ],
-    })
-
-    const result = await createComponentLoader(join(fakePkgDir, 'src/Component.tsx'))
-
-    expect(result.isErr()).toBe(true)
-    if (result.isErr()) {
-      expect(result.error.message).toContain(join(fakePkgDir, 'dist/index.js'))
-    }
-  })
-})
-
-describe('error message quality', () => {
-  it('includes package name in error messages', async () => {
-    mockPackage('@scope/my-components')
-    mockGetEntryPoints.mockResolvedValue({})
-
-    const result = await createComponentLoader(join(fakePkgDir, 'src/Component.tsx'))
-
-    expect(result.isErr()).toBe(true)
-    if (result.isErr()) {
-      expect(result.error.message).toContain('@scope/my-components')
-    }
-  })
-
-  it('includes package.json path in no-entry-point error', async () => {
-    mockPackage('no-entry')
-    mockGetEntryPoints.mockResolvedValue({})
-
-    const result = await createComponentLoader(join(fakePkgDir, 'src/Component.tsx'))
-
-    expect(result.isErr()).toBe(true)
-    if (result.isErr()) {
-      expect(result.error.message).toContain(fakePkgJsonPath)
-    }
-  })
-})
-
-describe('component resolution behavior', () => {
-  it('fails today for direct named export when function name is minified', async () => {
-    const packageDir = '/fake/minified-export-test'
-    const packageJsonPath = join(packageDir, 'package.json')
-
-    mockReadPackageUp.mockReturnValue({
-      packageJson: { name: 'minified-export-test' } as NormalizedPackageJson,
-      path: packageJsonPath,
-    })
-    mockGetEntryPoints.mockResolvedValue({
-      '.': [[['import'], './dist/index.js']],
-    })
-    mockModuleRequire.mockImplementation(() => ({
-      CardX: function j() {
-        return null
-      },
-    }))
-
-    const result = await createComponentLoader(join(packageDir, 'src/CardX.tsx'))
-
-    expect(result.isOk()).toBe(true)
-    if (result.isOk()) {
-      const component = result.value.loadComponent('CardX')
-      // TDD red phase: this currently returns null because function.name === "j".
-      expect(component).not.toBeNull()
-    }
-  })
-
-  it('rejects direct function exports with non-PascalCase export keys', async () => {
-    const packageDir = '/fake/lowercase-export-test'
-    const packageJsonPath = join(packageDir, 'package.json')
-
-    mockReadPackageUp.mockReturnValue({
-      packageJson: { name: 'lowercase-export-test' } as NormalizedPackageJson,
-      path: packageJsonPath,
-    })
-    mockGetEntryPoints.mockResolvedValue({
-      '.': [[['import'], './dist/index.js']],
-    })
-    mockModuleRequire.mockImplementation(() => ({
-      helper: function j() {
-        return null
-      },
-    }))
-
-    const result = await createComponentLoader(join(packageDir, 'src/helper.ts'))
-
-    expect(result.isOk()).toBe(true)
-    if (result.isOk()) {
-      const component = result.value.loadComponent('helper')
-      expect(component).toBeNull()
-    }
-  })
-})

package/src/component-loader.ts

@@ -1,256 +0,0 @@
-import { createRequire } from 'node:module'
-import { dirname, join, resolve } from 'node:path'
-import { pascalCase } from 'case-anything'
-import { ResultAsync, errAsync, okAsync } from 'neverthrow'
-import { getPackageEntryPoints } from 'pkg-entry-points'
-import type { ComponentType } from 'react'
-import { readPackageUpSync } from 'read-package-up'
-import { IoError, NotFoundError } from './errors'
-
-type NotFoundErrorInstance = InstanceType<typeof NotFoundError>
-type IoErrorInstance = InstanceType<typeof IoError>
-export type LoaderError = NotFoundErrorInstance | IoErrorInstance
-
-export interface ComponentLoaderResult {
-  loadComponent: (name: string) => ComponentType<unknown> | null
-  packageName: string
-  entryPath: string | undefined
-  exportNames: string[]
-}
-
-/**
- * Creates a component loader that dynamically loads components from the
- * user's package. Finds the nearest package.json, resolves its entry point,
- * and loads the module.
- *
- * The returned `loadComponent` is synchronous (required by processComponent).
- * ESM modules are loaded via async `import()` during creation, so this
- * function itself is async.
- *
- * @returns A `ResultAsync` containing a `ComponentLoaderResult` on success.
- * @errors {NotFoundError} When no package.json is found or the package has no resolvable entry points.
- * @errors {IoError} When module loading fails (CJS require or ESM import).
- */
-export function createComponentLoader(componentPath: string): ResultAsync<ComponentLoaderResult, LoaderError> {
-  // 1. Find nearest package.json
-  const result = readPackageUpSync({ cwd: dirname(resolve(componentPath)) })
-  if (!result) {
-    return errAsync(new NotFoundError('No package.json found', { props: { phase: 'load' } }))
-  }
-
-  const { packageJson, path: packageJsonPath } = result
-  const packageDir = dirname(packageJsonPath)
-  const packageName = packageJson.name
-
-  // 2. Resolve entry point(s) via pkg-entry-points (handles exports + legacy main/module)
-  return ResultAsync.fromPromise(
-    getPackageEntryPoints(packageDir),
-    (err) =>
-      new IoError(`Failed to resolve entry points for "${packageName}"`, {
-        cause: err instanceof Error ? err : new Error(String(err)),
-        props: { phase: 'load' },
-      }),
-  ).andThen((entryPoints) => {
-    return loadFromEntryPoints(entryPoints, packageDir, packageName, packageJsonPath)
-  })
-}
-
-/**
- * Given resolved entry points, load the appropriate module(s) and construct the
- * `ComponentLoaderResult`.
- *
- * @returns A `ResultAsync` containing a `ComponentLoaderResult` on success.
- * @errors {NotFoundError} When the package has no resolvable or loadable entry points.
- * @errors {IoError} When module loading fails.
- */
-function loadFromEntryPoints(
-  entryPoints: Record<string, [string[], string][]>,
-  packageDir: string,
-  packageName: string | undefined,
-  packageJsonPath: string,
-): ResultAsync<ComponentLoaderResult, LoaderError> {
-  const subpaths = Object.keys(entryPoints)
-
-  if (subpaths.length === 0) {
-    return errAsync(
-      new NotFoundError(
-        `Package "${packageName}" has no resolvable entry point. Add an "exports", "module", or "main" field to ${packageJsonPath}`,
-        { props: { phase: 'load' } },
-      ),
-    )
-  }
-
-  // 3. Load module(s)
-  const dotEntry = entryPoints['.']
-  if (dotEntry || subpaths.length === 1) {
-    // Single entry point: either explicit "." or the only available subpath
-    const tuples = dotEntry ?? entryPoints[subpaths[0]]
-    const resolved = selectBestPath(tuples)
-    if (!resolved) {
-      return errAsync(
-        new NotFoundError(`Package "${packageName}" has no loadable exports`, {
-          props: { phase: 'load' },
-        }),
-      )
-    }
-    const entryPath = join(packageDir, resolved)
-    return loadModule(entryPath).map((exports) => {
-      return {
-        loadComponent: (name: string) => findComponent(exports, name),
-        packageName: packageName ?? packageDir,
-        entryPath,
-        exportNames: Object.keys(exports),
-      }
-    })
-  }
-
-  // Multiple subpaths (no ".") — load all
-  return loadAllSubpaths(entryPoints, subpaths, packageDir, packageName)
-}
-
-/**
- * Loads all subpath entry points and merges them into a single loader result.
- *
- * @returns A `ResultAsync` containing a `ComponentLoaderResult` on success.
- * @errors {NotFoundError} When none of the subpath modules could be loaded.
- * @errors {IoError} When module loading fails.
- */
-function loadAllSubpaths(
-  entryPoints: Record<string, [string[], string][]>,
-  subpaths: string[],
-  packageDir: string,
-  packageName: string | undefined,
-): ResultAsync<ComponentLoaderResult, LoaderError> {
-  const allModules: Record<string, unknown>[] = []
-  const allExportNames: string[] = []
-  const loadErrors: IoErrorInstance[] = []
-
-  // Build a sequential chain that loads each subpath
-  let chain: ResultAsync<void, never> = okAsync(undefined)
-
-  for (const subpath of subpaths) {
-    const resolved = selectBestPath(entryPoints[subpath])
-    if (!resolved) {
-      continue
-    }
-    const subEntryPath = join(packageDir, resolved)
-
-    chain = chain.andThen(() =>
-      loadModule(subEntryPath)
-        .map((exports) => {
-          allModules.push(exports)
-          allExportNames.push(...Object.keys(exports))
-        })
-        .orElse((err) => {
-          loadErrors.push(err)
-          return okAsync(undefined)
-        }),
-    )
-  }
-
-  return chain.andThen(() => {
-    if (allModules.length === 0) {
-      const message = loadErrors[0]?.message ?? `Package "${packageName}" has no loadable exports`
-      return errAsync(
-        new NotFoundError(message, {
-          cause: loadErrors[0],
-          props: { phase: 'load' },
-        }),
-      )
-    }
-
-    return okAsync({
-      loadComponent: (name: string) => {
-        for (const mod of allModules) {
-          const found = findComponent(mod, name)
-          if (found) return found
-        }
-        return null
-      },
-      packageName: packageName ?? packageDir,
-      entryPath: undefined,
-      exportNames: allExportNames,
-    } satisfies ComponentLoaderResult)
-  })
-}
-
-/**
- * Attempts to load a module, first via ESM `import()`, then via CJS `require`.
- *
- * ESM `import()` is preferred because it participates in the ESM loader hook
- * pipeline (registered via `module.register()` in the CLI). This is required
- * for JSX interception to work — the loader hook redirects `react/jsx-runtime`
- * to the interceptable version. CJS `require()` bypasses ESM hooks even when
- * loading ESM modules (Node 22+), so it's only used as a fallback.
- *
- * @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.
- */
-export function loadModule(entryPath: string): ResultAsync<Record<string, unknown>, IoErrorInstance> {
-  return ResultAsync.fromPromise(import(entryPath) as Promise<Record<string, unknown>>, () => null).orElse(() => {
-    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' },
-        }),
-      )
-    }
-  })
-}
-
-function selectBestPath(tuples: [string[], string][]): string | undefined {
-  const preferred = ['import', 'node', 'default']
-  for (const cond of preferred) {
-    const match = tuples.find(([c]) => c.includes(cond) && !c.includes('types'))
-    if (match) {
-      return match[1]
-    }
-  }
-  const fallback = tuples.find(([c]) => !c.includes('types'))?.[1]
-  return fallback
-}
-
-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)
-  // React.memo() and React.forwardRef() return objects, not functions
-  if (typeof value === 'object' && value !== null && '$$typeof' in value) return true
-  return false
-}
-
-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)) {
-    return direct as ComponentType<unknown>
-  }
-
-  // Check default export
-  const defaultExport = moduleExports.default
-  if (defaultExport) {
-    // default is the component itself (matches by function name)
-    if (typeof defaultExport === 'function' && defaultExport.name === name) {
-      return defaultExport as ComponentType<unknown>
-    }
-
-    // CJS interop: default is an object with named exports
-    if (typeof defaultExport === 'object' && defaultExport !== null) {
-      const nested = (defaultExport as Record<string, unknown>)[name]
-      if (isComponent(nested)) {
-        return nested as ComponentType<unknown>
-      }
-    }
-  }
-
-  return null
-}