@akanjs/devkit 3.2.0-rc.1 → 3.2.0-rc.3

package/frontendBuild/clientEntryDiscovery.test.ts

@@ -2,6 +2,7 @@ import { afterAll, describe, expect, test } from "bun:test";
 import { mkdtemp, rm } from "node:fs/promises";
 import os from "node:os";
 import path from "node:path";
+import { createTsconfigPackageResolver } from "../transforms/barrelImportsPlugin";
 import { GraphClientEntryDiscovery } from "./clientEntryDiscovery";
 
 const dirs: string[] = [];
@@ -57,6 +58,28 @@ describe("GraphClientEntryDiscovery", () => {
     expect(await discovery.discover([file("S.tsx")])).toEqual([file("ui/Card.ts"), file("ui/Chart/index.tsx")]);
   });
 
+  test("an export moved into a client file of a barrel is found through the importer that names it", async () => {
+    const file = await tempDir();
+    await Bun.write(file("ui/index.ts"), 'export * from "./Foo";\nexport * from "./Other";\n');
+    await Bun.write(file("ui/Foo.tsx"), "export const Foo = 1;\nexport const Bar = () => null;\n");
+    await Bun.write(file("ui/Other.tsx"), '"use client";\nexport const Other = () => null;\n');
+    await Bun.write(file("S.tsx"), 'import { Bar } from "@demo/ui";\nexport const s = Bar;\n');
+    const resolvePackage = async (pkgName: string) => {
+      const leaf = pkgName === "@demo/ui" ? "index.ts" : `${pkgName.slice("@demo/ui/".length)}.tsx`;
+      return { pkgName, entryFile: file(`ui/${leaf}`), pkgDir: file("ui") };
+    };
+    const discovery = new GraphClientEntryDiscovery({ barrelImports: ["@demo/ui"] }, resolvePackage as never);
+    expect(await discovery.discover([file("S.tsx")])).toEqual([]);
+
+    await Bun.write(file("ui/Foo.tsx"), "export const Foo = 1;\n");
+    await Bun.write(
+      file("ui/Other.tsx"),
+      '"use client";\nexport const Other = () => null;\nexport const Bar = () => null;\n',
+    );
+    discovery.invalidate([file("ui/Foo.tsx"), file("ui/Other.tsx")]);
+    expect(await discovery.discover([file("S.tsx")])).toEqual([file("ui/Other.tsx")]);
+  });
+
   test("a resolution still in flight when its target appears is not what the next walk reads", async () => {
     const file = await tempDir();
     await Bun.write(file("S.tsx"), 'import "./B";\n');
@@ -100,6 +123,35 @@ describe("GraphClientEntryDiscovery", () => {
     expect(await discovery.discover([file("M5.tsx")])).toEqual([file("C.tsx")]);
   });
 
+  test("a root layout importing System by its file under a tsconfig wildcard reaches System's client entries", async () => {
+    const file = await tempDir();
+    const workspaceRoot = path.dirname(file("x"));
+    await Bun.write(
+      file("pkgs/akanjs/ui/System/index.tsx"),
+      'import SSR from "./SSR";\nexport const System = { SSR };\n',
+    );
+    await Bun.write(
+      file("pkgs/akanjs/ui/System/SSR.tsx"),
+      'import { ClientWrapper } from "./Client";\nexport default ClientWrapper;\n',
+    );
+    await Bun.write(
+      file("pkgs/akanjs/ui/System/Client.tsx"),
+      '"use client";\nexport const ClientWrapper = () => null;\n',
+    );
+    await Bun.write(
+      file("root/__root_layout.tsx"),
+      'import { System } from "akanjs/ui/System/index.tsx";\nexport default System;\n',
+    );
+    const resolvePackage = await createTsconfigPackageResolver({
+      workspace: { workspaceRoot },
+      getTsConfig: async () => ({ compilerOptions: { paths: { "akanjs/ui/*": ["./pkgs/akanjs/ui/*"] } } }),
+    } as never);
+    const discovery = new GraphClientEntryDiscovery({ barrelImports: [] }, resolvePackage);
+    expect(await discovery.discover([file("root/__root_layout.tsx")])).toEqual([
+      file("pkgs/akanjs/ui/System/Client.tsx"),
+    ]);
+  });
+
   test("a file walked inside an import cycle keeps no partial result for a walk that starts at it", async () => {
     const file = await tempDir();
     await Bun.write(file("A.tsx"), 'import "./B";\nimport "./C";\n');

package/frontendBuild/clientEntryDiscovery.ts

@@ -2,7 +2,7 @@ import fs from "node:fs";
 import path from "node:path";
 import { SOURCE_EXTS } from "../akanApp/devHostPolicy";
 import type { App } from "../commandDecorators";
-import { BarrelAnalyzer } from "../transforms/barrelAnalyzer";
+import { BarrelAnalyzer, type BarrelExportMap } from "../transforms/barrelAnalyzer";
 import { createTsconfigPackageResolver, rewriteBarrelImports } from "../transforms/barrelImportsPlugin";
 import type { AkanConfig, ClientEntryDiscovery, ScannedImport } from "./clientBuildTypes";
 
@@ -33,6 +33,9 @@ interface DiscoveryWalk {
   memo: Map<string, Set<string>>;
 }
 
+const exportsKeyOf = (map: BarrelExportMap | null): string =>
+  JSON.stringify(map ? [...map].sort(([a], [b]) => (a < b ? -1 : a > b ? 1 : 0)) : null);
+
 const shouldSkipNodeModule = (absPath: string) => NODE_MODULES_RE.test(absPath) && !AKANJS_NODE_MODULE_RE.test(absPath);
 
 /** `"use client"` discovery over the import graph (dynamic imports included), flattening barrels as the bundler does. */
@@ -48,6 +51,11 @@ export class GraphClientEntryDiscovery implements ClientEntryDiscovery {
   #resolvedSpecifierCache = new Map<string, Lookup<string | null>>();
   #reachableEntriesCache = new Map<string, Set<string>>();
   #readFiles = new Set<string>();
+  #barrelImporters = new Map<string, Set<string>>();
+  //? Barrels a save went beside, by the analysis before it: a save of any component re-reads its barrel, and only an
+  //? export that moved sends that barrel's importers back to the disk.
+  #reread = new Map<string, Promise<BarrelExportMap | null>>();
+  #settled: Promise<void> = Promise.resolve();
   //? Bumped by every invalidation: a walk that began before one computed from facts it may have read stale, so it
   //? answers its caller but caches nothing (a registry check walks this instance beside the slow lane's route builds).
   #epoch = 0;
@@ -63,6 +71,8 @@ export class GraphClientEntryDiscovery implements ClientEntryDiscovery {
   }
 
   async discover(seeds: string[]): Promise<string[]> {
+    this.#settled = this.#settled.then(() => this.#dropRenarrowed());
+    await this.#settled;
     const entries = new Set<string>();
     for (const seed of seeds) {
       const walk: DiscoveryWalk = { visiting: new Set(), partial: new Set(), memo: new Map() };
@@ -85,6 +95,8 @@ export class GraphClientEntryDiscovery implements ClientEntryDiscovery {
     this.#epoch += 1;
     // Reachable-entry results are transitive, so a changed child invalidates every ancestor.
     this.#reachableEntriesCache.clear();
+    for (const [barrel, before] of this.#analyzer.forget(files))
+      if (!this.#reread.has(barrel)) this.#reread.set(barrel, before);
     //? A file gone, or one never read, can leave a found resolution on its old target (`Chart.tsx` to
     //? `Chart/index.tsx`), so a move drops them all; a save of a file already read keeps them (a walk re-resolving
     //? every package cost 3x). Misses lapse with the epoch on their own (#lookup).
@@ -94,6 +106,17 @@ export class GraphClientEntryDiscovery implements ClientEntryDiscovery {
     this.#resolvedSpecifierCache.clear();
   }
 
+  //? An importer's facts hold the files its barrel imports narrowed to, which an export moved between them changes.
+  async #dropRenarrowed(): Promise<void> {
+    const reread = [...this.#reread];
+    this.#reread.clear();
+    for (const [barrel, before] of reread) {
+      const [was, now] = await Promise.all([before, this.#analyzer.analyze(barrel)]);
+      if (exportsKeyOf(was) === exportsKeyOf(now)) continue;
+      for (const importer of this.#barrelImporters.get(barrel) ?? []) this.#factsCache.delete(importer);
+    }
+  }
+
   //? A found answer outlives later epochs; a miss, or a lookup still in flight, answers only walks of its own epoch, so
   //? a file created meanwhile is looked up again.
   #lookup<T>(cache: Map<string, Lookup<T>>, key: string, run: () => Promise<T>, isFound: (value: T) => boolean) {
@@ -133,15 +156,17 @@ export class GraphClientEntryDiscovery implements ClientEntryDiscovery {
         if (content === null) return null;
         this.#readFiles.add(absPath);
         if (USE_CLIENT_RE.test(content)) return { isClientEntry: true, imports: [] };
-        return { isClientEntry: false, imports: this.#scanImports(await this.#rewrite(content)) };
+        return { isClientEntry: false, imports: this.#scanImports(await this.#rewrite(content, absPath)) };
       })();
       this.#factsCache.set(absPath, cached);
     }
     return cached;
   }
 
-  async #rewrite(content: string): Promise<string> {
+  async #rewrite(content: string, absPath: string): Promise<string> {
     if (this.#akanConfig.barrelImports.length === 0) return content;
+    for (const barrel of this.#akanConfig.barrelImports.filter((barrel) => content.includes(barrel)))
+      this.#barrelImporters.set(barrel, (this.#barrelImporters.get(barrel) ?? new Set()).add(absPath));
     try {
       return (await rewriteBarrelImports(content, this.#akanConfig.barrelImports, this.#analyzer)) ?? content;
     } catch {

package/frontendBuild/csrArtifactBuilder.test.ts

@@ -125,3 +125,51 @@ console.info(await result.outputs[0].text());
     expect(stdout.trim()).toBe("a");
   });
 });
+
+describe("CsrArtifactBuilder.barrelImportsPlugin", () => {
+  test("narrows an app's client barrel to the runtime, the store and the modules a page names", async () => {
+    const root = await makeTempRoot();
+    const appDir = path.join(root, "apps/demo");
+    const paths = { "@apps/*": ["./apps/*"] };
+    await writeText(path.join(root, "tsconfig.json"), JSON.stringify({ compilerOptions: { baseUrl: ".", paths } }));
+    await writeText(
+      path.join(appDir, "client.ts"),
+      [
+        'export { usePage } from "./lib/useClient";',
+        'export { st } from "./lib/st";',
+        'export { Memo } from "./lib/memo";',
+        'export { Other } from "./lib/other";',
+        "",
+      ].join("\n"),
+    );
+    await writeText(path.join(appDir, "lib/useClient.ts"), 'console.info("runtime");\nexport const usePage = 1;\n');
+    await writeText(path.join(appDir, "lib/st.ts"), 'console.info("store");\nexport const st = 2;\n');
+    await writeText(path.join(appDir, "lib/memo/index.ts"), 'console.info("memo-ui");\nexport const Memo = 3;\n');
+    await writeText(path.join(appDir, "lib/other/index.ts"), 'console.info("other-ui");\nexport const Other = 4;\n');
+    await writeText(path.join(appDir, "page.ts"), 'import { Memo } from "@apps/demo/client";\nconsole.info(Memo);\n');
+    const app = {
+      workspace: { workspaceRoot: root },
+      getConfig: async () => ({ barrelImports: ["akanjs/ui", "@apps/demo/client"] }),
+      getTsConfig: async () => ({ compilerOptions: { paths } }),
+      getPublicEnv: () => ({}),
+    };
+
+    const options = CsrArtifactBuilder.bundleOptions(app as never, "build");
+    const result = await Bun.build({
+      ...options,
+      plugins: [...options.plugins, await CsrArtifactBuilder.barrelImportsPlugin(app as never)],
+      entrypoints: [path.join(appDir, "page.ts")],
+    });
+    expect(result.success).toBe(true);
+    await Bun.write(path.join(root, "out.js"), (await result.outputs[0]?.text()) ?? "");
+    const proc = Bun.spawn([process.execPath, "out.js"], { cwd: root, stdout: "pipe", stderr: "pipe" });
+    const [stdout, stderr] = await Promise.all([
+      new Response(proc.stdout).text(),
+      new Response(proc.stderr).text(),
+      proc.exited,
+    ]);
+
+    expect(stderr).toBe("");
+    expect(stdout.trim().split("\n")).toEqual(["runtime", "store", "memo-ui", "3"]);
+  });
+});

package/frontendBuild/csrArtifactBuilder.ts

@@ -3,7 +3,11 @@ import path from "node:path";
 import type { BaseBuildArtifact } from "akanjs/server";
 import { type PageEntry, resolveSsrPageEntriesForApp } from "../artifact/implicitRootLayout";
 import type { App } from "../commandDecorators";
-import { type BarrelImportsPluginOptions, createBarrelImportsPlugin } from "../transforms/barrelImportsPlugin";
+import {
+  type BarrelImportsPluginOptions,
+  createBarrelImportsPlugin,
+  workspaceBarrels,
+} from "../transforms/barrelImportsPlugin";
 import { createBrowserDirnamePlugin } from "../transforms/browserDirnamePlugin";
 import { SideEffectImportOrder } from "../transforms/sideEffectImportOrder";
 import { bundleConditions, bundleDefine } from "./bundleDefine";
@@ -121,9 +125,11 @@ export class CsrArtifactBuilder {
     };
   }
 
-  //? Whole, the akanjs/ui barrel bundles every component and the optional peers (react-icons) they import.
+  //? Whole, the akanjs/ui barrel bundles every component and the optional peers (react-icons) they import, and an app or
+  //? lib client barrel every module's UI.
   static async barrelImportsPlugin(app: App, pipeAfter?: BarrelImportsPluginOptions["pipeAfter"]) {
-    return await createBarrelImportsPlugin(app, { barrels: ["akanjs/ui"], pipeAfter });
+    const barrels = ["akanjs/ui", ...workspaceBarrels((await app.getConfig()).barrelImports)];
+    return await createBarrelImportsPlugin(app, { barrels, pipeAfter });
   }
 
   /** Where a build records the `AKAN_PUBLIC_*` it inlined, which nothing in the minified bundle names. */

package/frontendBuild/csrDevBundler.ts

@@ -4,6 +4,7 @@ import { CSR_DEV_DIRNAME, CSR_DEV_ROUTE_PREFIX } from "akanjs/server/hmr/csrDevM
 import { resolveSsrPageEntriesForApp } from "../artifact/implicitRootLayout";
 import type { App } from "../commandDecorators";
 import { AsyncDefaultExportDetector } from "../transforms/asyncDefaultExportDetector";
+import { workspaceBarrels } from "../transforms/barrelImportsPlugin";
 import { bundleDefine } from "./bundleDefine";
 import { CsrDevPaths } from "./csrDevPaths";
 import type { CsrDevContext } from "./csrDevTypes";
@@ -13,7 +14,7 @@ import { PagesEntrySourceGenerator } from "./pagesEntrySourceGenerator";
 
 //* Dev-only CSR as a module registry, under `.akan/artifact/csr-dev`: one entry per basePath boots every page.
 export class CsrDevBundler extends DevRegistryBundler {
-  static readonly #formatVersion = 4;
+  static readonly #formatVersion = 6;
   readonly reloadsOnEntryChange = true;
   //? Detecting a page's async default parses it with TypeScript: on apps/akan every page each save cost ~100ms.
   readonly #asyncDefaults = new Map<string, { mtimeMs: number; detected: Promise<boolean> }>();
@@ -30,8 +31,16 @@ export class CsrDevBundler extends DevRegistryBundler {
     const htmlBasePaths = basePaths.length > 0 ? basePaths : [""];
     const define = bundleDefine(this.app, "start", "csr");
     const optimizeImports = [...akanConfig.optimizeImports];
+    const barrelImports = workspaceBarrels(akanConfig.barrelImports);
     const configKey = Bun.hash(
-      JSON.stringify([CsrDevBundler.#formatVersion, Bun.version, define, optimizeImports, htmlBasePaths]),
+      JSON.stringify([
+        CsrDevBundler.#formatVersion,
+        Bun.version,
+        define,
+        optimizeImports,
+        htmlBasePaths,
+        barrelImports,
+      ]),
     ).toString(36);
     return {
       pageEntries,
@@ -41,6 +50,7 @@ export class CsrDevBundler extends DevRegistryBundler {
       optimizeImports,
       configKey,
       refreshFile: this.#resolveRefreshRuntime(),
+      barrelImports,
     };
   }
 

package/frontendBuild/csrDevModuleCompiler.test.ts

@@ -291,3 +291,100 @@ describe("CsrDevModuleCompiler", () => {
     expect(String((failure as AggregateError).errors[0])).toContain('"await" can only be used');
   });
 });
+
+describe("CsrDevModuleCompiler barrel narrowing", () => {
+  let root: string;
+  const file = (relative: string) => path.join(root, relative);
+  const paths = { "@apps/*": ["./apps/*"], "@libs/*": ["./libs/*"] };
+  const compile = async (relative: string, { prepass }: { prepass: boolean }) => {
+    const narrowing = { ...context, barrelImports: ["@apps/demo/client"] };
+    const devPaths = new CsrDevPaths(root);
+    const resolver = new CsrDevResolver({ paths: devPaths, context: narrowing, entryFiles: [file(relative)] });
+    if (prepass) await resolver.prepass();
+    const compiler = new CsrDevModuleCompiler({
+      app: {
+        verbose: () => undefined,
+        logger: { error: () => undefined },
+        workspace: { workspaceRoot: root },
+        getTsConfig: async () => ({ compilerOptions: { paths } }),
+      } as unknown as App,
+      paths: devPaths,
+      resolver,
+      context: narrowing,
+      outDir: file("out"),
+      routePrefix: "/_akan/registry/",
+    });
+    return await compiler.compile([file(relative)], new Set(), { refusePrepass: !prepass });
+  };
+
+  beforeAll(async () => {
+    root = CsrDevPaths.realpath(await mkdtemp(path.join(os.tmpdir(), "akan-csr-dev-barrels-")));
+    await Bun.write(file("tsconfig.json"), JSON.stringify({ compilerOptions: { baseUrl: ".", paths } }));
+    await Bun.write(
+      file("apps/demo/client.ts"),
+      [
+        'export * as cnst from "./lib/cnst";',
+        'export { msg, usePage } from "./lib/useClient";',
+        'export { st, RootStore } from "./lib/st";',
+        'export { Memo } from "./lib/memo";',
+        'export { Other } from "./lib/other";',
+        "",
+      ].join("\n"),
+    );
+    await Bun.write(file("apps/demo/lib/cnst.ts"), "export const Sample = 1;\n");
+    await Bun.write(file("apps/demo/lib/useClient.ts"), "export const msg = 1;\nexport const usePage = () => msg;\n");
+    await Bun.write(file("apps/demo/lib/st.ts"), "export class RootStore {}\nexport const st = new RootStore();\n");
+    for (const name of ["Memo", "Other"]) {
+      await Bun.write(
+        file(`apps/demo/lib/${name.toLowerCase()}/index.ts`),
+        `import * as Zone from "./${name}.Zone";\nexport const ${name} = { Zone };\n`,
+      );
+      await Bun.write(
+        file(`apps/demo/lib/${name.toLowerCase()}/${name}.Zone.tsx`),
+        `export const Card = () => "${name}";\n`,
+      );
+    }
+    await Bun.write(
+      file("apps/demo/page/home.tsx"),
+      'import { Memo, st } from "@apps/demo/client";\nexport const Page = () => [Memo.Zone.Card, st];\n',
+    );
+    await Bun.write(
+      file("apps/demo/page/added.tsx"),
+      'import { Other } from "@apps/demo/client";\nexport const Page = () => Other.Zone.Card;\n',
+    );
+  });
+
+  afterAll(async () => {
+    await rm(root, { recursive: true, force: true });
+  });
+
+  test("a page compiles the client runtime, the store and the modules it names, never the barrel or another module", async () => {
+    const { modules } = await compile("apps/demo/page/home.tsx", { prepass: true });
+    const ids = modules.map((module) => module.id).sort((a, b) => (a < b ? -1 : a > b ? 1 : 0));
+
+    expect(ids).toEqual([
+      "apps/demo/lib/memo/Memo.Zone.tsx",
+      "apps/demo/lib/memo/index.ts",
+      "apps/demo/lib/st.ts",
+      "apps/demo/lib/useClient.ts",
+      "apps/demo/page/home.tsx",
+    ]);
+    const page = modules.find((module) => module.id === "apps/demo/page/home.tsx");
+    const [sourceContent] = (JSON.parse(page?.sourceMap ?? "{}") as { sourcesContent?: string[] }).sourcesContent ?? [];
+    expect(sourceContent?.split("\n")).toHaveLength(3);
+    expect(sourceContent).toContain('import "../lib/useClient.ts"; import "../lib/st.ts";');
+  });
+
+  test("a save that adds a barrel import compiles without the resolution build a new bare import needs", async () => {
+    const { modules, unresolved } = await compile("apps/demo/page/added.tsx", { prepass: false });
+
+    expect(unresolved).toEqual([]);
+    expect(modules.map((module) => module.id).sort((a, b) => (a < b ? -1 : a > b ? 1 : 0))).toEqual([
+      "apps/demo/lib/other/Other.Zone.tsx",
+      "apps/demo/lib/other/index.ts",
+      "apps/demo/lib/st.ts",
+      "apps/demo/lib/useClient.ts",
+      "apps/demo/page/added.tsx",
+    ]);
+  });
+});

package/frontendBuild/csrDevModuleCompiler.ts

@@ -1,10 +1,18 @@
 import path from "node:path";
 import type { BunPlugin } from "bun";
 import type { App } from "../commandDecorators";
+import { loaderFor } from "../transforms/moduleSyntax";
 import { CsrDevFactoryCheck } from "./csrDevFactoryCheck";
 import { CsrDevPaths } from "./csrDevPaths";
 import { CsrDevResolver } from "./csrDevResolver";
-import type { CsrDevCompiledModule, CsrDevContext, CsrDevSharedHelpers } from "./csrDevTypes";
+import type {
+  CsrDevBarrelStamp,
+  CsrDevCompiledModule,
+  CsrDevContext,
+  CsrDevNarrowedImport,
+  CsrDevSharedHelpers,
+} from "./csrDevTypes";
+import { DevBarrelImports } from "./devBarrelImports";
 import { RouteClientBuilder } from "./routeClientBuilder";
 
 interface OutputMetafile {
@@ -38,6 +46,7 @@ export interface CsrDevCompileResult {
   modules: CsrDevCompiledModule[];
   refusedVendors: string[];
   unresolved: string[];
+  barrels?: Record<string, CsrDevBarrelStamp>;
 }
 
 //* Every module becomes its own CJS factory: one Bun.build with each import external, so a save re-runs only the
@@ -58,6 +67,8 @@ export class CsrDevModuleCompiler {
   readonly #outDir: string;
   readonly #routePrefix: string;
   readonly #assets = new Set<string>();
+  #barrels: Promise<DevBarrelImports | null> | null = null;
+  readonly #narrowed = new Map<string, Record<string, CsrDevNarrowedImport>>();
 
   constructor({ app, paths, resolver, context, outDir, routePrefix }: CsrDevModuleCompilerOptions) {
     this.#app = app;
@@ -109,7 +120,14 @@ export class CsrDevModuleCompiler {
       this.#app.verbose(
         `[csr-dev] ${fallbacks.size} import(s) outside the browser build's graph resolved with Bun's runtime resolver: ${[...fallbacks].slice(0, 5).join(", ")}${fallbacks.size > 5 ? ", ..." : ""}`,
       );
-    return { modules: [...compiled.values()], refusedVendors: [], unresolved: [] };
+    const modules = [...compiled.values()];
+    return { modules, refusedVendors: [], unresolved: [], barrels: await this.#barrelStamps(modules) };
+  }
+
+  async #barrelStamps(modules: CsrDevCompiledModule[]): Promise<Record<string, CsrDevBarrelStamp>> {
+    const barrels = new Set(modules.flatMap((module) => Object.keys(module.narrowed ?? {})));
+    const barrelImports = barrels.size > 0 ? await this.#barrelImports() : null;
+    return barrelImports ? await barrelImports.stamps(barrels, (file) => this.#paths.idOf(file)) : {};
   }
 
   async #compileRound(files: string[]): Promise<Omit<BuildRound, "tangled">> {
@@ -197,6 +215,7 @@ export class CsrDevModuleCompiler {
         continue;
       }
       const sourceMap = sourceMaps.get(`${artifact.path}.map`);
+      const narrowed = this.#narrowed.get(file);
       modules.push({
         id,
         file,
@@ -206,6 +225,7 @@ export class CsrDevModuleCompiler {
         deps: this.#emittedDeps(code),
         mtimeMs: mtimes.get(file) ?? CsrDevPaths.mtimeOf(file),
         hash: hashes.get(file) ?? "",
+        ...(narrowed && Object.keys(narrowed).length > 0 ? { narrowed } : {}),
       });
     }
     return { modules, misses, tangled };
@@ -302,13 +322,17 @@ export class CsrDevModuleCompiler {
           });
         }
         if (!vendor)
-          build.onLoad({ filter: /\.tsx$/ }, async (args) => {
+          build.onLoad({ filter: /\.(?:tsx?|jsx?)$/ }, async (args) => {
             if (CsrDevPaths.isVendorFile(args.path)) return undefined;
-            const normalized = RouteClientBuilder.normalizeNamedDefaultFunctionForFastRefresh(
-              await Bun.file(args.path).text(),
-              { path: args.path },
-            );
-            return normalized ? { contents: normalized, loader: "tsx" } : undefined;
+            const source = await Bun.file(args.path).text();
+            const rewrite = await (await this.#barrelImports())?.rewrite(source, args.path);
+            if (rewrite) this.#narrowed.set(CsrDevPaths.realpath(args.path), rewrite.narrowed);
+            const narrowed = rewrite?.contents ?? source;
+            const normalized = args.path.endsWith(".tsx")
+              ? RouteClientBuilder.normalizeNamedDefaultFunctionForFastRefresh(narrowed, { path: args.path })
+              : null;
+            const contents = normalized ?? narrowed;
+            return contents === source ? undefined : { contents, loader: loaderFor(args.path) };
           });
         build.onResolve({ filter: /.*/ }, (args) => {
           if (args.kind === "entry-point-build" || !args.importer) return undefined;
@@ -334,6 +358,11 @@ export class CsrDevModuleCompiler {
     };
   }
 
+  #barrelImports(): Promise<DevBarrelImports | null> {
+    this.#barrels ??= DevBarrelImports.create(this.#app, this.#context.barrelImports ?? []);
+    return this.#barrels;
+  }
+
   //? Bun writes sources relative to the working directory; the page shows them by workspace path instead. A package
   //? barrel inlined into its importer (react-icons) would carry its whole text into every importer's map.
   #rebaseSourceMap(text: string): string {

package/frontendBuild/csrDevPatcher.test.ts

@@ -119,12 +119,25 @@ describe("CsrDevPatcher", () => {
         workspace: { workspaceRoot: root },
         cwdPath: path.join(root, "apps/demo"),
         verbose: () => undefined,
+        getTsConfig: async () => ({ compilerOptions: { paths: tsPaths } }),
       };
       super(app as unknown as App, { dirName: "registry", routePrefix: "/_akan/registry/", library: true });
       this.#entry = entry;
     }
+    barrels: string[] = [];
     async context() {
-      return context;
+      return { ...context, barrelImports: this.barrels };
+    }
+    fingerprints = 0;
+    override async barrelImports(barrelContext: CsrDevContext) {
+      const barrelImports = await super.barrelImports(barrelContext);
+      if (!barrelImports) return null;
+      const fingerprint = barrelImports.fingerprint.bind(barrelImports);
+      barrelImports.fingerprint = async (barrel, names) => {
+        this.fingerprints += 1;
+        return await fingerprint(barrel, names);
+      };
+      return barrelImports;
     }
     async writeEntries() {
       return { files: { "": this.#entry }, changed: [] };
@@ -145,13 +158,22 @@ describe("CsrDevPatcher", () => {
     }
   }
 
-  const movedRegistry = async (files: Record<string, string>, { roots = [] }: { roots?: string[] } = {}) => {
+  const tsPaths = { "@apps/*": ["./apps/*"] };
+  const movedRegistry = async (
+    files: Record<string, string>,
+    { roots = [], barrels = [] }: { roots?: string[]; barrels?: string[] } = {},
+  ) => {
     const root = await mkdtemp(path.join(os.tmpdir(), "akan-csr-dev-move-"));
     dirs.push(root);
     const file = (relative: string) => path.join(CsrDevPaths.realpath(root), "apps/demo", relative);
     for (const [relative, text] of Object.entries(files)) await Bun.write(file(relative), text);
+    await Bun.write(
+      path.join(root, "tsconfig.json"),
+      JSON.stringify({ compilerOptions: { baseUrl: ".", paths: tsPaths } }),
+    );
     const bundler = new MovedRegistry(root, file("entry.ts"));
     bundler.extraRoots = roots.map((relative) => file(relative));
+    bundler.barrels = barrels;
     expect(await bundler.update([])).toMatchObject({ generation: 1, reload: true, first: true });
     const patcher = new CsrDevPatcher(bundler, { resident: true });
     expect(await patcher.update([])).toEqual({ kind: "unchanged" });
@@ -562,6 +584,71 @@ describe("CsrDevPatcher", () => {
     expect(await app()).toContain('__akan.define("apps/demo/ui/Foo.tsx"');
   });
 
+  test("an export moved to another file of a narrowed barrel compiles the importers of that name, also after a restart", async () => {
+    const { bundler, patcher, file, app, changedIds } = await movedRegistry(
+      {
+        "ui/index.ts": 'export * from "./Foo";\n',
+        "ui/Foo.tsx": 'export const Foo = () => "foo";\nexport const Bar = () => "bar";\n',
+        "page.ts": 'import { Foo } from "@apps/demo/ui";\nexport const page = Foo;\n',
+        "entry.ts":
+          'import { Bar } from "@apps/demo/ui";\nimport { page } from "./page";\nexport const run = () => Bar() + page();\n',
+      },
+      { barrels: ["@apps/demo/ui"] },
+    );
+    const factoryOf = (text: string, id: string) =>
+      text.slice(text.indexOf(`__akan.define("${id}"`)).split("__akan.define(")[1];
+
+    await Bun.write(file("ui/Foo.tsx"), 'export const Foo = () => "foo v2";\nexport const Bar = () => "bar";\n');
+    expect(changedIds(await patcher.update([file("ui/Foo.tsx")]))).toEqual(["apps/demo/ui/Foo.tsx"]);
+    expect(bundler.fingerprints).toBe(0);
+
+    await Bun.write(file("ui/Foo.tsx"), 'export const Foo = () => "foo";\n');
+    await Bun.write(file("ui/Bar.tsx"), 'export const Bar = () => "bar moved";\n');
+    await Bun.write(file("ui/index.ts"), 'export * from "./Bar";\nexport * from "./Foo";\n');
+    const moved = await patcher.update([file("ui/Foo.tsx"), file("ui/Bar.tsx"), file("ui/index.ts")]);
+    expect(changedIds(moved)).toEqual(["apps/demo/entry.ts", "apps/demo/ui/Bar.tsx", "apps/demo/ui/Foo.tsx"]);
+    expect(bundler.fingerprints).toBe(2);
+    expect(factoryOf(await app(), "apps/demo/entry.ts")).toContain('require("akan-module:apps/demo/ui/Bar.tsx")');
+
+    patcher.forget();
+    await Bun.write(file("ui/Foo.tsx"), 'export const Foo = () => "foo";\nexport const Bar = () => "bar back";\n');
+    await Bun.write(file("ui/Bar.tsx"), "export const Gone = 1;\n");
+    const restarted = await bundler.update([]);
+    expect(restarted?.changedIds.sort((a, b) => (a < b ? -1 : a > b ? 1 : 0))).toEqual([
+      "apps/demo/entry.ts",
+      "apps/demo/ui/Bar.tsx",
+      "apps/demo/ui/Foo.tsx",
+    ]);
+    expect(factoryOf(await app(), "apps/demo/entry.ts")).toContain('require("akan-module:apps/demo/ui/Foo.tsx")');
+    expect(await new CsrDevPatcher(bundler).update([])).toEqual({ kind: "unchanged" });
+  });
+
+  test("a move whose compile fails leaves the barrel's stamps on disk, so the next save reads it again", async () => {
+    const { bundler, file, app, changedIds } = await movedRegistry(
+      {
+        "ui/index.ts": 'export * from "./Foo";\n',
+        "ui/Foo.tsx": 'export const Foo = () => "foo";\nexport const Bar = () => "bar";\n',
+        "entry.ts": 'import { Bar } from "@apps/demo/ui";\nexport const run = Bar;\n',
+      },
+      { barrels: ["@apps/demo/ui"] },
+    );
+    const barrelsOnDisk = async () => (await bundler.writer.readJson<CsrDevGraph>("graph.json"))?.barrels;
+    const before = await barrelsOnDisk();
+
+    await Bun.write(file("ui/Foo.tsx"), 'export const Foo = () => "foo";\n');
+    await Bun.write(file("ui/Bar.tsx"), 'import "./Missing";\nexport const Bar = () => "bar moved";\n');
+    await Bun.write(file("ui/index.ts"), 'export * from "./Bar";\nexport * from "./Foo";\n');
+    const saved = [file("ui/Foo.tsx"), file("ui/Bar.tsx"), file("ui/index.ts")];
+    await expect(new CsrDevPatcher(bundler).update(saved)).rejects.toThrow();
+    expect(await barrelsOnDisk()).toEqual(before);
+
+    await Bun.write(file("ui/Bar.tsx"), 'export const Bar = () => "bar moved";\n');
+    const fixed = await new CsrDevPatcher(bundler).update([file("ui/Bar.tsx")]);
+    expect(changedIds(fixed)).toEqual(["apps/demo/entry.ts", "apps/demo/ui/Bar.tsx", "apps/demo/ui/Foo.tsx"]);
+    expect(await app()).toContain('"bar moved"');
+    expect(await barrelsOnDisk()).not.toEqual(before);
+  });
+
   test("a registry with no manifest is a first build, which no tab holds a module of", async () => {
     const { bundler, dir } = await makeRegistry("same");
     await rm(path.join(dir, CSR_DEV_MANIFEST_FILE), { force: true });