@akanjs/devkit 3.1.0-rc.21 → 3.1.0-rc.22

package/transforms/mcpAppPageTrimmer.test.ts

@@ -0,0 +1,89 @@
+import { describe, expect, test } from "bun:test";
+import { symlink } from "node:fs/promises";
+import path from "node:path";
+import { tempDirs, writeText } from "../testHelpers";
+import { McpAppPageTrimmer } from "./mcpAppPageTrimmer";
+
+const makeTempRoot = tempDirs("akan-mcp-app-trim-");
+
+describe("McpAppPageTrimmer", () => {
+  test("hands every stage but the apps a function that draws nothing, and keeps the rest of the chain as written", () => {
+    const source = [
+      'import { fetch, Memo } from "@apps/minimal/client";',
+      'import { Screen } from "@apps/minimal/ui";',
+      "export default page()",
+      '  .param("memoId", ID)',
+      "  .config({ topInset: 48 })",
+      "  .guard(async ({ memoId }) => { await fetch.memo(memoId); })",
+      "  .head(<title>Memo</title>)",
+      "  .loading(() => <Screen>loading</Screen>)",
+      '  .app("showMemo", "Show one memo.", ({ memoId }) => <Memo.Zone.View view={fetch.viewMemo(memoId).memoView} />)',
+      "  .render(({ memoId, showMemo }) => (",
+      '    <Screen className="pb-10">{showMemo}</Screen>',
+      "  ));",
+    ].join("\n");
+    expect(McpAppPageTrimmer.trim(source, "memo.tsx")).toBe(
+      [
+        'import { fetch, Memo } from "@apps/minimal/client";',
+        'import { Screen } from "@apps/minimal/ui";',
+        "export default page()",
+        '  .param("memoId", ID)',
+        "  .config({ topInset: 48 })",
+        "  .guard(() => null)",
+        "  .head(() => null)",
+        "  .loading(() => null)",
+        '  .app("showMemo", "Show one memo.", ({ memoId }) => <Memo.Zone.View view={fetch.viewMemo(memoId).memoView} />)',
+        "  .render(() => null);",
+      ].join("\n"),
+    );
+  });
+
+  test("trims a page reached through a link, as a synced lib page is", async () => {
+    const root = await makeTempRoot();
+    await writeText(
+      path.join(root, "libs/shared/page/login.tsx"),
+      [
+        "const page = () => ({ render: (draw: () => string) => draw });",
+        'export default page().render(() => "drawn by the render");',
+      ].join("\n"),
+    );
+    await symlink(path.join(root, "libs/shared/page"), path.join(root, "linked"));
+    await writeText(path.join(root, "entry.ts"), 'import login from "./linked/login.tsx";\nexport { login };\n');
+    const result = await Bun.build({
+      entrypoints: [path.join(root, "entry.ts")],
+      plugins: [McpAppPageTrimmer.plugin([path.join(root, "linked/login.tsx")])],
+    });
+    const [output] = result.outputs;
+    expect(result.success).toBe(true);
+    expect(await output?.text()).not.toContain("drawn by the render");
+  });
+
+  test("drops a lazy component only the page's render drew, with what it imports", async () => {
+    const root = await makeTempRoot();
+    await writeText(path.join(root, "Globe.ts"), 'export default "a heavy globe";\n');
+    await writeText(
+      path.join(root, "trip.tsx"),
+      [
+        "const lazy = (load: () => Promise<unknown>) => ({ load });",
+        'const Globe = lazy(() => import("./Globe"));',
+        "const page = () => ({ app: (name: string, draw: () => unknown) => ({ render: (render: () => unknown) => [name, draw, render] }) });",
+        'export default page().app("showTrip", () => "a trip card").render(() => Globe);',
+      ].join("\n"),
+    );
+    await writeText(path.join(root, "entry.ts"), 'import trip from "./trip.tsx";\nconsole.info(trip);\n');
+    const result = await Bun.build({
+      entrypoints: [path.join(root, "entry.ts")],
+      plugins: [McpAppPageTrimmer.plugin([path.join(root, "trip.tsx")])],
+      splitting: false,
+    });
+    const text = (await result.outputs[0]?.text()) ?? "";
+    expect(result.success).toBe(true);
+    expect(text).toContain("a trip card");
+    expect(text).not.toContain("a heavy globe");
+  });
+
+  test("leaves a module with no chain as it is", () => {
+    const legacy = "export default function Page() { return <main />; }\nexport const pageConfig = {};";
+    expect(McpAppPageTrimmer.trim(legacy, "legacy.tsx")).toBe(legacy);
+  });
+});

package/transforms/mcpAppPageTrimmer.ts

@@ -0,0 +1,70 @@
+import { realpathSync } from "node:fs";
+import path from "node:path";
+import type { BunPlugin } from "bun";
+import ts from "typescript";
+import { PureLazyMarker } from "./pureLazyMarker";
+
+type ChainStage = ts.CallExpression & { expression: ts.PropertyAccessExpression };
+
+//* An MCP App's view runs its page's `.app()` loads and no other stage, so the view build hands each such stage a
+//* function that draws nothing, and the bundler drops what only the page's own markup reached.
+export class McpAppPageTrimmer {
+  static readonly #unused = new Set(["render", "head", "loading", "guard"]);
+
+  /** Trims exactly `pagePaths`: the rest of the graph loads as it does for the CSR shell. */
+  static plugin(pagePaths: string[]): BunPlugin {
+    return {
+      name: "akan-mcp-app-page",
+      setup(build) {
+        if (!pagePaths.length) return;
+        //? The bundler loads a module by the path a link points at: a synced lib page is one under `page/(libs)`.
+        const loadedPaths = new Set(
+          pagePaths.flatMap((pagePath) => [pagePath, McpAppPageTrimmer.#realPathOf(pagePath)]),
+        );
+        const filter = new RegExp(`^(?:${[...loadedPaths].map((pagePath) => RegExp.escape(pagePath)).join("|")})$`);
+        //? The bundler runs one onLoad per module, so this one also marks the page's own `lazy()` components.
+        build.onLoad({ filter }, async (args) => ({
+          contents: PureLazyMarker.mark(McpAppPageTrimmer.trim(await Bun.file(args.path).text(), args.path), args.path),
+          loader: path.extname(args.path).slice(1) as "tsx" | "ts" | "jsx" | "js",
+        }));
+      },
+    };
+  }
+
+  static trim(source: string, filePath: string): string {
+    const sourceFile = ts.createSourceFile(filePath, source, ts.ScriptTarget.Latest, true, ts.ScriptKind.TSX);
+    const spans = McpAppPageTrimmer.#stagesOf(sourceFile)
+      .flatMap((stage) => {
+        const [first] = stage.arguments;
+        if (!first || !McpAppPageTrimmer.#unused.has(stage.expression.name.text)) return [];
+        return [{ start: first.getStart(sourceFile), end: first.getEnd() }];
+      })
+      .sort((a, b) => b.start - a.start);
+    let trimmed = source;
+    for (const { start, end } of spans) trimmed = `${trimmed.slice(0, start)}() => null${trimmed.slice(end)}`;
+    return trimmed;
+  }
+
+  static #realPathOf(filePath: string) {
+    try {
+      return realpathSync(filePath);
+    } catch {
+      return filePath;
+    }
+  }
+
+  static #stagesOf(sourceFile: ts.SourceFile): ChainStage[] {
+    const stages: ChainStage[] = [];
+    for (const statement of sourceFile.statements) {
+      if (!ts.isExportAssignment(statement) || statement.isExportEquals) continue;
+      let node: ts.Expression = statement.expression;
+      while (ts.isParenthesizedExpression(node) || ts.isAsExpression(node) || ts.isSatisfiesExpression(node))
+        node = node.expression;
+      while (ts.isCallExpression(node) && ts.isPropertyAccessExpression(node.expression)) {
+        stages.push(node as ChainStage);
+        node = node.expression.expression;
+      }
+    }
+    return stages;
+  }
+}

package/transforms/pureLazyMarker.test.ts

@@ -0,0 +1,58 @@
+import { describe, expect, test } from "bun:test";
+import path from "node:path";
+import { tempDirs, writeText } from "../testHelpers";
+import { PureLazyMarker } from "./pureLazyMarker";
+
+const makeTempRoot = tempDirs("akan-pure-lazy-");
+
+describe("PureLazyMarker", () => {
+  test("marks each lazy() a declaration holds, and nothing else", () => {
+    const source = [
+      'import { lazy } from "akanjs/webkit";',
+      'export const Globe = lazy(() => import("./Globe_Dynamic"), { ssr: false });',
+      "const Editor: Component = lazy(() =>",
+      '  import("./Editor"),',
+      ");",
+      'const sample = `const Chart = lazy(() => import("./Chart"));`;',
+      'register(lazy(() => import("./Side")));',
+    ].join("\n");
+    expect(PureLazyMarker.mark(source, "ui.tsx")).toBe(
+      [
+        'import { lazy } from "akanjs/webkit";',
+        'export const Globe = /* @__PURE__ */ lazy(() => import("./Globe_Dynamic"), { ssr: false });',
+        "const Editor: Component = /* @__PURE__ */ lazy(() =>",
+        '  import("./Editor"),',
+        ");",
+        'const sample = `const Chart = lazy(() => import("./Chart"));`;',
+        'register(lazy(() => import("./Side")));',
+      ].join("\n"),
+    );
+    const plain = "export const one = 1;";
+    expect(PureLazyMarker.mark(plain, "plain.ts")).toBe(plain);
+  });
+
+  test("lets the bundler drop a barrel's lazy component that nothing renders, with what it imports", async () => {
+    const root = await makeTempRoot();
+    await writeText(path.join(root, "lazy.ts"), "export const lazy = (load: () => Promise<unknown>) => ({ load });\n");
+    await writeText(path.join(root, "Heavy.ts"), 'export default "a heavy chunk";\n');
+    await writeText(
+      path.join(root, "ui.ts"),
+      [
+        'import { lazy } from "./lazy";',
+        'export const Heavy = lazy(() => import("./Heavy"));',
+        'export const Card = "a card";',
+      ].join("\n"),
+    );
+    await writeText(path.join(root, "entry.ts"), 'import { Card } from "./ui";\nconsole.info(Card);\n');
+    const result = await Bun.build({
+      entrypoints: [path.join(root, "entry.ts")],
+      plugins: [PureLazyMarker.plugin()],
+      splitting: false,
+    });
+    const [output] = result.outputs;
+    expect(result.success).toBe(true);
+    const text = (await output?.text()) ?? "";
+    expect(text).toContain("a card");
+    expect(text).not.toContain("a heavy chunk");
+  });
+});

package/transforms/pureLazyMarker.ts

@@ -0,0 +1,42 @@
+import type { BunPlugin } from "bun";
+import ts from "typescript";
+
+//* A view inlines every module its loads reach, so a `lazy()` component that nothing renders (one of a barrel's, or
+//* of an `_overrides.tsx` manifest's) would still carry its chunk. `lazy()` only builds a component, so its call is
+//* marked pure, and the bundler drops it, chunk and all, wherever its result goes unread.
+export class PureLazyMarker {
+  static plugin(): BunPlugin {
+    return {
+      name: "akan-pure-lazy",
+      setup(build) {
+        build.onLoad({ filter: /\.tsx?$/ }, async (args) => {
+          const file = Bun.file(args.path);
+          //? A view's own entry lives only in the build's `files`, where the bundler reads it without a plugin.
+          if (!(await file.exists())) return undefined;
+          const source = await file.text();
+          const marked = PureLazyMarker.mark(source, args.path);
+          return marked === source
+            ? undefined
+            : { contents: marked, loader: args.path.endsWith(".tsx") ? "tsx" : "ts" };
+        });
+      },
+    };
+  }
+
+  static mark(source: string, filePath: string): string {
+    if (!source.includes("lazy(")) return source;
+    const kind = filePath.endsWith(".tsx") ? ts.ScriptKind.TSX : ts.ScriptKind.TS;
+    const sourceFile = ts.createSourceFile(filePath, source, ts.ScriptTarget.Latest, true, kind);
+    const starts: number[] = [];
+    const visit = (node: ts.Node) => {
+      const call = ts.isVariableDeclaration(node) ? node.initializer : undefined;
+      if (call && ts.isCallExpression(call) && ts.isIdentifier(call.expression) && call.expression.text === "lazy")
+        starts.push(call.getStart(sourceFile));
+      ts.forEachChild(node, visit);
+    };
+    visit(sourceFile);
+    return starts
+      .sort((a, b) => b - a)
+      .reduce((marked, start) => `${marked.slice(0, start)}/* @__PURE__ */ ${marked.slice(start)}`, source);
+  }
+}