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

package/frontendBuild/buildRouteClient.test.ts

@@ -343,6 +343,49 @@ describe("route client store bootstrap", () => {
     expect(bundled).not.toContain("lib-ui-marker");
   });
 
+  test("a route's bundle runs the client runtime and the stores before the UI it renders, which reads them on load", async () => {
+    const { appDir, app } = await writeBarrelFixture();
+    const record = (label: string) =>
+      `((globalThis as { __akanOrder?: string[] }).__akanOrder ??= []).push("${label}");`;
+    await write(
+      path.join(appDir, "lib/useClient.ts"),
+      `${record("runtime")}\nexport const { msg, Err, usePage, fetch, sig } = { usePage: () => "page" } as Record<string, unknown>;\n`,
+    );
+    await write(
+      path.join(appDir, "../../libs/kit/lib/st.ts"),
+      `${record("lib-store")}\nexport class RootStore {}\nexport const st = Object.freeze({ mark: "lib-store-marker" });\n`,
+    );
+    await write(
+      path.join(appDir, "lib/st.ts"),
+      `import { RootStore as kit } from "@libs/kit/client";\n${record("store")}\nexport class RootStore {}\nexport const st = Object.freeze({ mark: "store-marker", kit });\n`,
+    );
+    await write(
+      path.join(appDir, "lib/memo/Memo.Zone.tsx"),
+      `"use client";\nimport { Memo, st } from "@apps/demo/client";\n${record("memo-ui")}\nexport const seen = [st.mark, typeof Memo];\n`,
+    );
+
+    await new RouteClientBuilder({
+      app,
+      seeds: [],
+      entries: [path.join(appDir, "lib/memo/Memo.Zone.tsx")],
+      artifact: {} as never,
+      browser: "chunks",
+    }).build();
+
+    const clientOut = path.join(appDir, ".akan/artifact/client");
+    const entries = [...new Bun.Glob("*.js").scanSync(clientOut)];
+    expect(entries).toHaveLength(1);
+    const loaded = (await import(path.join(clientOut, entries[0] ?? ""))) as { seen?: unknown };
+
+    expect(loaded.seen).toEqual(["store-marker", "object"]);
+    expect((globalThis as { __akanOrder?: string[] }).__akanOrder).toEqual([
+      "runtime",
+      "lib-store",
+      "store",
+      "memo-ui",
+    ]);
+  });
+
   test("a route reaching a lib's cnst through its client barrel carries no module UI", async () => {
     const { root, appDir, app } = await writeBarrelFixture();
 

package/frontendBuild/bundleDefine.ts

@@ -9,6 +9,8 @@ export const bundleDefine = (app: App, command: "build" | "start", renderEnv: "s
   return {
     "process.env.NODE_ENV": JSON.stringify(nodeEnv),
     "process.env.AKAN_PUBLIC_RENDER_ENV": JSON.stringify(renderEnv),
+    //? NODE_ENV is production under `NODE_ENV=production akan start` too; this says the page's vendors were narrowed.
+    "process.env.AKAN_BUNDLE_COMMAND": JSON.stringify(command),
     //? Sorted: Windows hands a child its environment sorted, while keys the config sets at runtime trail the parent's,
     //? and the dev registries hash this object to tell a worker's build from the builder's.
     ...Object.fromEntries(

package/frontendBuild/clientBuildTypes.ts

@@ -38,8 +38,12 @@ export const CLIENT_BUNDLE_NAMING = {
   asset: "assets/[hash].[ext]",
 } as const;
 
+export interface DiscoverOptions {
+  importsAs?: ReadonlyMap<string, ReadonlyMap<string, string | null>>;
+}
+
 export interface ClientEntryDiscovery {
-  discover(seeds: string[]): Promise<string[]>;
+  discover(seeds: string[], options?: DiscoverOptions): Promise<string[]>;
   invalidate?(files: string[]): void;
 }
 
@@ -59,7 +63,6 @@ export interface BundleClientEntriesInternalOptions extends BundleClientEntriesO
   externalSubpaths?: readonly string[];
   externalAliases?: Partial<Record<string, string>>;
   command?: "build" | "start";
-  /** Per absolute entry, the only names its alias re-exports, in place of every name the entry declares. */
   entryExports?: Partial<Record<string, readonly string[]>>;
 }
 

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');
@@ -109,4 +161,32 @@ describe("GraphClientEntryDiscovery", () => {
     expect(await discovery.discover([file("A.tsx")])).toEqual([file("C.tsx")]);
     expect(await discovery.discover([file("B.tsx")])).toEqual([file("C.tsx")]);
   });
+
+  test("a file walked with its imports swapped or dropped keeps that walk's answer out of every other walk", async () => {
+    const file = await tempDir();
+    await Bun.write(file("Layout.tsx"), 'import "./Both";\n');
+    await Bun.write(file("Page.tsx"), 'import "./Layout";\n');
+    await Bun.write(file("Both.tsx"), 'import "./Server";\nimport "./Browser";\n');
+    await Bun.write(file("Server.tsx"), 'import "./S";\n');
+    await Bun.write(file("Browser.tsx"), '"use client";\nexport const Browser = () => null;\n');
+    await Bun.write(file("S.tsx"), '"use client";\nexport const S = () => null;\n');
+    const discovery = new GraphClientEntryDiscovery({ barrelImports: [] }, (async () => null) as never);
+    const importsAs = new Map([[file("Layout.tsx"), new Map([["./Both", "./Server"]])]]);
+
+    expect(await discovery.discover([file("Page.tsx")])).toEqual([file("Browser.tsx"), file("S.tsx")]);
+    expect(await discovery.discover([file("Page.tsx")], { importsAs })).toEqual([file("S.tsx")]);
+    expect(await discovery.discover([file("Layout.tsx")], { importsAs })).toEqual([file("S.tsx")]);
+    expect(await discovery.discover([file("Page.tsx")])).toEqual([file("Browser.tsx"), file("S.tsx")]);
+    const dropped = new Map([[file("Both.tsx"), new Map([["./Browser", null]])]]);
+    expect(await discovery.discover([file("Page.tsx")], { importsAs: dropped })).toEqual([file("S.tsx")]);
+
+    const fresh = new GraphClientEntryDiscovery({ barrelImports: [] }, (async () => null) as never);
+    expect(await fresh.discover([file("Page.tsx")], { importsAs })).toEqual([file("S.tsx")]);
+    expect(await fresh.discover([file("Page.tsx")])).toEqual([file("Browser.tsx"), file("S.tsx")]);
+    expect(await fresh.discover([file("Layout.tsx")])).toEqual([file("Browser.tsx"), file("S.tsx")]);
+
+    await Bun.write(file("Server.tsx"), "export const server = 1;\n");
+    fresh.invalidate([file("Server.tsx")]);
+    expect(await fresh.discover([file("Page.tsx")], { importsAs })).toEqual([]);
+  });
 });

package/frontendBuild/clientEntryDiscovery.ts

@@ -2,9 +2,9 @@ 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";
+import type { AkanConfig, ClientEntryDiscovery, DiscoverOptions, ScannedImport } from "./clientBuildTypes";
 
 const USE_CLIENT_RE = /^\s*(?:\/\*[^*]*\*+(?:[^/*][^*]*\*+)*\/\s*|\/\/[^\n]*\n\s*)*["']use client["']/;
 const NODE_MODULES_RE = /[\\/]node_modules[\\/]/;
@@ -31,8 +31,13 @@ interface DiscoveryWalk {
   //? Every file's result within this walk, partial ones included: the file the cycle went back to is an ancestor here
   //? and brings the rest itself, and re-walking each path through a dense cycle grows exponentially.
   memo: Map<string, Set<string>>;
+  importsAs?: DiscoverOptions["importsAs"];
+  reachable: 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. */
@@ -47,7 +52,14 @@ export class GraphClientEntryDiscovery implements ClientEntryDiscovery {
   #resolvedFileCache = new Map<string, Lookup<string | null>>();
   #resolvedSpecifierCache = new Map<string, Lookup<string | null>>();
   #reachableEntriesCache = new Map<string, Set<string>>();
+  //? Keyed by a walk's `importsAs`: a file's answer under swapped imports holds only for walks swapping the same ones.
+  #swappedEntriesCaches = new WeakMap<object, 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;
@@ -62,15 +74,29 @@ export class GraphClientEntryDiscovery implements ClientEntryDiscovery {
     return new GraphClientEntryDiscovery(await app.getConfig(), await createTsconfigPackageResolver(app));
   }
 
-  async discover(seeds: string[]): Promise<string[]> {
+  async discover(seeds: string[], { importsAs }: DiscoverOptions = {}): Promise<string[]> {
+    this.#settled = this.#settled.then(() => this.#dropRenarrowed());
+    await this.#settled;
     const entries = new Set<string>();
+    const reachable = importsAs ? this.#swappedEntriesCache(importsAs) : this.#reachableEntriesCache;
     for (const seed of seeds) {
-      const walk: DiscoveryWalk = { visiting: new Set(), partial: new Set(), memo: new Map() };
+      const walk: DiscoveryWalk = { visiting: new Set(), partial: new Set(), memo: new Map(), importsAs, reachable };
       for (const entry of await this.#discoverFromFile(seed, walk)) entries.add(entry);
     }
     return Array.from(entries).sort();
   }
 
+  async resolveImport(spec: string, importerDir: string): Promise<string | null> {
+    const resolved = await this.#resolveSpecifier(spec, importerDir);
+    return resolved ? path.resolve(resolved) : null;
+  }
+
+  #swappedEntriesCache(importsAs: object): Map<string, Set<string>> {
+    const cache = this.#swappedEntriesCaches.get(importsAs) ?? new Map<string, Set<string>>();
+    this.#swappedEntriesCaches.set(importsAs, cache);
+    return cache;
+  }
+
   invalidate(files: string[]): void {
     if (files.length === 0) return;
     let moved = false;
@@ -85,6 +111,9 @@ export class GraphClientEntryDiscovery implements ClientEntryDiscovery {
     this.#epoch += 1;
     // Reachable-entry results are transitive, so a changed child invalidates every ancestor.
     this.#reachableEntriesCache.clear();
+    this.#swappedEntriesCaches = new WeakMap();
+    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 +123,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 +173,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 {
@@ -198,7 +240,8 @@ export class GraphClientEntryDiscovery implements ClientEntryDiscovery {
   async #discoverFromFile(file: string, walk: DiscoveryWalk): Promise<Set<string>> {
     const epoch = this.#epoch;
     const absPath = path.resolve(file);
-    const cached = this.#reachableEntriesCache.get(absPath);
+    const importsAs = walk.importsAs?.get(absPath);
+    const cached = walk.reachable.get(absPath);
     if (cached) return new Set(cached);
     const memo = walk.memo.get(absPath);
     if (memo) {
@@ -228,7 +271,8 @@ export class GraphClientEntryDiscovery implements ClientEntryDiscovery {
 
     const importerDir = path.dirname(absPath);
     for (const imp of facts.imports) {
-      const spec = imp.path;
+      const swapped = importsAs?.get(imp.path);
+      const spec = swapped === undefined ? imp.path : swapped;
       if (!spec) continue;
       if (NON_SOURCE_EXT_RE.test(spec)) continue;
       const resolved = await this.#resolveSpecifier(spec, importerDir);
@@ -243,7 +287,7 @@ export class GraphClientEntryDiscovery implements ClientEntryDiscovery {
   #finishDiscovery(absPath: string, walk: DiscoveryWalk, entries: Set<string>, epoch: number): Set<string> {
     walk.visiting.delete(absPath);
     walk.memo.set(absPath, entries);
-    if (epoch === this.#epoch && !walk.partial.has(absPath)) this.#reachableEntriesCache.set(absPath, entries);
+    if (epoch === this.#epoch && !walk.partial.has(absPath)) walk.reachable.set(absPath, entries);
     return new Set(entries);
   }
 }

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",
+    ]);
+  });
+});