@yahoo/uds-create-loader 5.87.1 → 5.88.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yahoo/uds-create-loader",
-  "version": "5.87.1",
+  "version": "5.88.1",
   "type": "module",
   "private": false,
   "files": [
@@ -38,7 +38,7 @@
     "test:update": "bun test src/ --update-snapshots"
   },
   "dependencies": {
-    "@yahoo/uds-create-config": "5.87.1",
+    "@yahoo/uds-create-config": "5.88.1",
     "@babel/parser": "^7.29.0",
     "@babel/traverse": "^7.29.0",
     "@babel/types": "^7.29.0",

package/src/loader.test.ts

@@ -154,6 +154,101 @@ export function Demo() {
   });
 });
 
+describe('loader — re-export rewrite', () => {
+  it("re-exports a linked system's sources as the modules the build emitted", () => {
+    const source = `
+export { Button } from '@/uds/linked/yos-v3/button';
+export { createToast, ToastPortal } from "@/uds/linked/yos-v3/toast-portal";
+export * from '@/uds/linked/yos-v3/box';
+`;
+    const output = runLoader(source, makeEmptyConfig());
+
+    expect(output).toBe(`
+export { Button } from '#uds/components/_linked/yos-v3/button';
+export { createToast, ToastPortal } from "#uds/components/_linked/yos-v3/toast-portal";
+export * from '#uds/components/_linked/yos-v3/box';
+`);
+  });
+
+  it('re-exports `@/uds/components/<seg>` as `#uds/components/<seg>`, whatever the case of the segment', () => {
+    const source = `
+export { Box } from '@/uds/components/Box';
+export { Box as Panel } from '@/uds/components/box';
+`;
+    const output = runLoader(source, makeBoxConfig());
+
+    expect(output).toBe(`
+export { Box } from '#uds/components/Box';
+export { Box as Panel } from '#uds/components/box';
+`);
+  });
+
+  it("re-exports a component file's helpers through the same generated module", () => {
+    const source = `
+export { BoxProvider, useBox } from '@/uds/components/box';
+export { default as BoxDefault } from '@/uds/components/box';
+`;
+    const output = runLoader(source, makeBoxConfig());
+
+    expect(output).toBe(`
+export { BoxProvider, useBox } from '#uds/components/box';
+export { default as BoxDefault } from '#uds/components/box';
+`);
+  });
+
+  it("re-exports everything from a component's file through its generated module", () => {
+    const source = `
+export * from '@/uds/components/box';
+export * as box from '@/uds/components/box';
+export * from '@/uds/components/utils';
+`;
+    const output = runLoader(source, makeBoxConfig());
+
+    expect(output).toBe(`
+export * from '#uds/components/box';
+export * as box from '#uds/components/box';
+export * from '@/uds/components/utils';
+`);
+  });
+
+  it('leaves type-only re-exports pointed at the source', () => {
+    const source = `
+export type { BoxProps } from '@/uds/components/box';
+export type { ButtonProps } from '@/uds/linked/yos-v3/button';
+export type * from '@/uds/components/box';
+`;
+    const output = runLoader(source, makeBoxConfig());
+
+    expect(output).toBe(source);
+  });
+
+  it('rewrites a re-export that mixes values and types, for its values', () => {
+    const source = `
+export { Box, type BoxProps } from '@/uds/components/box';
+export { type Box as BoxType } from '@/uds/components/layout';
+`;
+    const output = runLoader(source, makeBoxConfig());
+
+    expect(output).toBe(`
+export { Box, type BoxProps } from '#uds/components/box';
+export { type Box as BoxType } from '@/uds/components/layout';
+`);
+  });
+
+  it('leaves non-UDS and relative re-exports alone', () => {
+    const source = `
+export { Box } from './box';
+export * from '../uds/components/box';
+export { Image } from 'next/image';
+export { Box as Other } from '@/components/box';
+export const local = 1;
+`;
+    const output = runLoader(source, makeBoxConfig());
+
+    expect(output).toBe(source);
+  });
+});
+
 describe('loader — JSX passes through unchanged', () => {
   it('leaves JSX call sites alone while rewriting the import', () => {
     const config = makeBoxConfig();

package/src/loader.ts

@@ -1,5 +1,6 @@
 import { parse } from '@babel/parser';
 import _traverse from '@babel/traverse';
+import type * as t from '@babel/types';
 import {
   resolveLinkedAlias,
   resolveLinkedDir,
@@ -19,9 +20,10 @@ const traverse = (_traverse as any).default ?? _traverse;
 
 /**
  * The UDS loader's only build-time job: rewrite alias-prefixed local
- * imports of registered UDS components from `@/uds/components/<seg>`
- * (the authoring file) to `'#uds/components/<seg>'` (the codegen-
- * emitted per-source-file module at `.uds/components/<seg>.tsx`).
+ * imports and re-exports of registered UDS components from
+ * `@/uds/components/<seg>` (the authoring file) to
+ * `'#uds/components/<seg>'` (the codegen-emitted per-source-file module
+ * at `.uds/components/<seg>.tsx`).
  *
  * The authoring file is read only by codegen — production renders the
  * downleveled FC. Per-file targets keep Next.js Fast Refresh surgical:
@@ -102,8 +104,10 @@ const transformLoader: LoaderDefinitionFunction = function (source) {
 
   // Cheap pre-filter: only parse files that look like they import or
   // reference a UDS component. Avoids babel overhead on the bulk of
-  // application files.
-  let hasComponentReference = source.includes(linkedAlias);
+  // application files. An `export * from '@/uds/components/box'` names no
+  // component, so the path itself also counts.
+  let hasComponentReference =
+    source.includes(linkedAlias) || source.includes('/uds/components/');
   for (const name of projection.componentNames) {
     if (source.includes(name)) {
       hasComponentReference = true;
@@ -134,7 +138,7 @@ const transformLoader: LoaderDefinitionFunction = function (source) {
 
   // Collected source-literal rewrites, keyed by character offset.
   // We splice these into the original `source` string rather than
-  // regenerating the file: the loader's only job is to swap import
+  // regenerating the file: the loader's only job is to swap module
   // source strings, and re-printing the whole file through
   // @babel/generator (esp. with `retainLines`) can mangle dense JSX
   // into invalid output. Surgical splicing keeps every byte outside
@@ -142,110 +146,127 @@ const transformLoader: LoaderDefinitionFunction = function (source) {
   // valid file into a broken one.
   const edits: Array<{ start: number; end: number; value: string }> = [];
 
+  /**
+   * Rewrites one import or re-export source to the generated module it
+   * runs as. `names` are the value bindings the statement takes from that
+   * module, as the module spells them.
+   */
+  const rewriteSource = ({
+    sourceNode,
+    names,
+  }: {
+    sourceNode: t.StringLiteral;
+    names: string[];
+  }) => {
+    const { start, end, value: moduleSource } = sourceNode;
+    if (typeof start !== 'number' || typeof end !== 'number') return;
+
+    // Splice over the literal's character range (quotes included) using
+    // the original quote char so the rest of the file is untouched.
+    const quote = source[start] ?? "'";
+    const splice = (target: string) => {
+      edits.push({ start, end, value: `${quote}${target}${quote}` });
+    };
+
+    // A linked system's source, imported by its alias for the types (`@/uds/linked/yos/avatar`),
+    // runs as the module the build emitted from it — the same path under `components/_linked/`.
+    if (moduleSource.startsWith(linkedAlias)) {
+      splice(
+        `${outputAlias}/components/_linked/${moduleSource.slice(linkedAlias.length)}`,
+      );
+      return;
+    }
+
+    // Only rewrite alias-prefixed local imports (e.g.
+    // `@/uds/components/<name>`, `~/uds/components/<name>`).
+    // Relative imports (`./text`, `../box`) belong to the authoring
+    // chain where each `defineComponent(...)` may reference its
+    // siblings (`defineComponent(Text).config(...)`) — rewriting those
+    // would break codegen's read of the configs.
+    if (moduleSource.startsWith('.') || moduleSource.startsWith('/')) return;
+
+    // Constrain to `*/uds/components/<name>` paths so unrelated
+    // imports whose tail happens to match a registered name
+    // (`next/image` → `Image`) don't get rewritten.
+    const segmentMatch = moduleSource.match(/\/uds\/components\/([^/]+)$/);
+    if (!segmentMatch) return;
+
+    const segment = segmentMatch[1];
+
+    // First-pass match: any name matches a registered component. The
+    // common case — `import { Box } from '@/uds/components/box'`.
+    //
+    // Second-pass match: the path points at the authoring file of a
+    // registered component (e.g. `@/uds/components/sidebar`) but the
+    // visible names are co-located helpers like `SidebarProvider` /
+    // `useSidebar`. If we let this resolve to the source file, the helper
+    // sets up a different `SidebarContext` than the codegen-emitted
+    // `Sidebar` reads — provider and consumer end up with different
+    // context identities and `useSidebar()` throws. Funnel every export
+    // from that file through the codegen module so helper and component
+    // share the same module.
+    const pascal = segment
+      .split('-')
+      .filter(Boolean)
+      .map((s) => s.charAt(0).toUpperCase() + s.slice(1))
+      .join('');
+    const namesComponent = names.some((name) =>
+      projection.componentNames.has(name),
+    );
+
+    if (!namesComponent && !projection.componentNames.has(pascal)) return;
+
+    // Per-file rewrite: keep the trailing `<seg>` so each import resolves
+    // to its own downleveled module at `.uds/components/<seg>.tsx`.
+    splice(`${outputAlias}/components/${segment}`);
+  };
+
   traverse(ast, {
-    // -----------------------------------------------------------------------
-    // Import rewrite: alias-prefixed local imports of registered UDS
-    // components → `#uds/components/<seg>` (the per-source-file
-    // codegen-emitted module).
-    // -----------------------------------------------------------------------
     // biome-ignore lint/suspicious/noExplicitAny: untyped babel traverse visitor
     ImportDeclaration(nodePath: any) {
-      const importSource: string | undefined = nodePath.node.source?.value;
-      if (!importSource) return;
+      const names: string[] = [];
 
-      // A linked system's source, imported by its alias for the types (`@/uds/linked/yos/avatar`),
-      // runs as the module the build emitted from it — the same path under `components/_linked/`.
-      if (importSource.startsWith(linkedAlias)) {
-        const sourceNode = nodePath.node.source;
+      for (const specifier of nodePath.node.specifiers) {
         if (
-          typeof sourceNode.start !== 'number' ||
-          typeof sourceNode.end !== 'number'
+          specifier.type === 'ImportSpecifier' &&
+          specifier.imported?.type === 'Identifier'
         ) {
-          return;
+          names.push(specifier.imported.name);
         }
-        const quote = source[sourceNode.start] ?? "'";
-        edits.push({
-          start: sourceNode.start,
-          end: sourceNode.end,
-          value: `${quote}${outputAlias}/components/_linked/${importSource.slice(linkedAlias.length)}${quote}`,
-        });
-        return;
       }
 
-      // Only rewrite alias-prefixed local imports (e.g.
-      // `@/uds/components/<name>`, `~/uds/components/<name>`).
-      // Relative imports (`./text`, `../box`) belong to the authoring
-      // chain where each `defineComponent(...)` may reference its
-      // siblings (`defineComponent(Text).config(...)`) — rewriting those
-      // would break codegen's read of the configs.
-      const isAliasedLocalImport =
-        !importSource.startsWith('.') && !importSource.startsWith('/');
-      if (!isAliasedLocalImport) return;
-
-      // First-pass match: any specifier name matches a registered
-      // component. The common case — `import { Box } from
-      // '@/uds/components/box'`.
-      let shouldRewriteSource = false;
-      for (const specifier of nodePath.node.specifiers) {
-        if (specifier.type !== 'ImportSpecifier') continue;
-        const importedName: string | undefined =
-          specifier.imported?.type === 'Identifier'
-            ? specifier.imported.name
-            : undefined;
-        if (!importedName) continue;
+      rewriteSource({ sourceNode: nodePath.node.source, names });
+    },
 
-        if (projection.componentNames.has(importedName)) {
-          shouldRewriteSource = true;
-        }
-      }
+    // `export { Box } from '…'` runs the same module an import of `Box`
+    // would. `export type { … } from '…'` is erased before it runs, and
+    // stays pointed at the source its types come from.
+    // biome-ignore lint/suspicious/noExplicitAny: untyped babel traverse visitor
+    ExportNamedDeclaration(nodePath: any) {
+      const { node } = nodePath;
+      if (!node.source || node.exportKind === 'type') return;
 
-      // Second-pass match: the import path points at the authoring
-      // file of a registered component (e.g. `@/uds/components/sidebar`)
-      // but the visible specifiers are co-located helpers like
-      // `SidebarProvider` / `useSidebar`. If we let this resolve to the
-      // source file, the helper sets up a different `SidebarContext`
-      // than the codegen-emitted `Sidebar` reads — provider and consumer
-      // end up with different context identities and `useSidebar()`
-      // throws. Funnel every export from that file through the codegen
-      // module so helper AND component share the same module.
-      //
-      // Constrain to `*/uds/components/<name>` paths so unrelated
-      // imports whose tail happens to match a registered name
-      // (`next/image` → `Image`) don't get rewritten.
-      const segmentMatch = importSource.match(/\/uds\/components\/([^/]+)$/);
-      if (!shouldRewriteSource && segmentMatch) {
-        const tail = segmentMatch[1];
-        const pascal = tail
-          .split('-')
-          .filter(Boolean)
-          .map((s) => s.charAt(0).toUpperCase() + s.slice(1))
-          .join('');
-        if (projection.componentNames.has(pascal)) {
-          shouldRewriteSource = true;
-        }
-      }
+      const names: string[] = [];
 
-      if (shouldRewriteSource && segmentMatch) {
-        // Per-file rewrite: keep the trailing `<seg>` so each import
-        // resolves to its own downleveled module at
-        // `.uds/components/<seg>.tsx`. Splice over the literal's
-        // character range (quotes included) using the original quote
-        // char so the rest of the file is untouched.
-        const sourceNode = nodePath.node.source;
+      for (const specifier of node.specifiers) {
         if (
-          typeof sourceNode.start !== 'number' ||
-          typeof sourceNode.end !== 'number'
+          specifier.type === 'ExportSpecifier' &&
+          specifier.exportKind !== 'type' &&
+          specifier.local?.type === 'Identifier'
         ) {
-          return;
+          names.push(specifier.local.name);
         }
-
-        const quote = source[sourceNode.start] ?? "'";
-        edits.push({
-          start: sourceNode.start,
-          end: sourceNode.end,
-          value: `${quote}${outputAlias}/components/${segmentMatch[1]}${quote}`,
-        });
       }
+
+      rewriteSource({ sourceNode: node.source, names });
+    },
+
+    // biome-ignore lint/suspicious/noExplicitAny: untyped babel traverse visitor
+    ExportAllDeclaration(nodePath: any) {
+      const { node } = nodePath;
+      if (node.exportKind === 'type') return;
+
+      rewriteSource({ sourceNode: node.source, names: [] });
     },
   });