@akanjs/devkit 3.0.0-alpha.105 → 3.0.0-alpha.107

package/frontendBuild/fontOptimizer.test.ts

@@ -17,15 +17,16 @@ const makeApp = async (layoutSource: string) => {
   await mkdir(path.join(cwdPath, "public/fonts"), { recursive: true });
   await writeFile(path.join(cwdPath, "page/_layout.tsx"), layoutSource);
   await Bun.write(path.join(cwdPath, "public/fonts/Assistant-Regular.woff2"), Bun.file(SOURCE_FONT));
+  const warnings: string[] = [];
   const app = {
     cwdPath,
     dist: { cwdPath: path.join(root, "dist/apps/demo") },
     workspace: { workspaceRoot: root },
     getPageKeys: async () => ["./_layout.tsx"],
     verbose: () => undefined,
-    logger: { warn: () => undefined },
+    logger: { warn: (message: string) => warnings.push(message) },
   } as unknown as App;
-  return { app, cwdPath };
+  return { app, cwdPath, warnings };
 };
 
 const layoutWith = (extra = "") => `
@@ -40,6 +41,22 @@ export default function Layout() {
 }
 `;
 
+const chainLayoutWith = (declaration: string) => `
+import { rootLayout } from "akanjs/client";
+
+export default rootLayout()
+  .fonts(${declaration})
+  .theme("dark")
+  .render(({ children }) => children);
+`;
+
+const chainFontEntry = (extra = "") => `{
+      name: "Assistant",${extra}
+      paths: [{ src: "/fonts/Assistant-Regular.woff2", weight: 400 }],
+    }`;
+
+const chainFontList = (extra = "") => `[\n    ${chainFontEntry(extra)},\n  ]`;
+
 const optimize = (app: App) => new FontOptimizer(app, "start").optimize();
 
 afterEach(async () => {
@@ -109,3 +126,59 @@ describe("FontOptimizer cache", () => {
     expect(result.files).toEqual([]);
   });
 });
+
+describe("FontOptimizer discovery", () => {
+  test("reads the .fonts() stage of a rootLayout() chain", async () => {
+    const { app, warnings } = await makeApp(chainLayoutWith(chainFontList()));
+
+    const result = await optimize(app);
+
+    expect(result.fonts.map((font) => font.name)).toEqual(["Assistant"]);
+    expect(result.files).toHaveLength(1);
+    expect(result.css).toContain("@font-face");
+    expect(warnings).toEqual([]);
+  });
+
+  test("keeps reading the legacy fonts export", async () => {
+    const { app } = await makeApp(layoutWith());
+    const result = await optimize(app);
+    expect(result.fonts.map((font) => font.name)).toEqual(["Assistant"]);
+    expect(result.files).toHaveLength(1);
+  });
+
+  test("picks up a config field the chain declares, so the cache key sees it", async () => {
+    const { app, cwdPath } = await makeApp(chainLayoutWith(chainFontList()));
+    const first = await optimize(app);
+
+    await writeFile(
+      path.join(cwdPath, "page/_layout.tsx"),
+      chainLayoutWith(chainFontList(`\n      className: "font-brand",`)),
+    );
+
+    const second = await optimize(app);
+    expect(second.css).not.toBe(first.css);
+    expect(second.css).toContain(".font-brand");
+  });
+
+  // A list the build cannot read subsets nothing while the runtime still preloads /_akan/fonts, so the 404s
+  // have to be announced at build time rather than found in a browser console.
+  test("warns when the chain is handed a font list it cannot read", async () => {
+    const { app, warnings } = await makeApp(chainLayoutWith("brandFonts"));
+
+    const result = await optimize(app);
+
+    expect(result.fonts).toEqual([]);
+    expect(result.files).toEqual([]);
+    expect(warnings).toHaveLength(1);
+    expect(warnings[0]).toContain("page/_layout.tsx");
+  });
+
+  test("warns about an entry it cannot read and keeps the ones it can", async () => {
+    const { app, warnings } = await makeApp(chainLayoutWith(`[...brandFonts, ${chainFontEntry()}]`));
+
+    const result = await optimize(app);
+
+    expect(result.fonts.map((font) => font.name)).toEqual(["Assistant"]);
+    expect(warnings).toHaveLength(1);
+  });
+});

package/frontendBuild/fontOptimizer.ts

@@ -152,7 +152,7 @@ export class FontOptimizer {
         const file = Bun.file(filePath);
         if (!(await file.exists())) return;
         const source = await file.text();
-        // A declaration named `fonts` cannot exist in text that never mentions it, and parsing the
+        // A `.fonts()` stage or a `fonts` declaration cannot exist in text that never mentions it, and parsing the
         // route files that never declare one is what a cached optimize() otherwise spends its time on.
         if (!source.includes("fonts")) return;
         fonts.push(...this.#extractFontsExport(source, filePath));
@@ -186,23 +186,75 @@ export class FontOptimizer {
     if (faceCss.length > 0) this.#cssParts.push(...faceCss, this.#buildRootVariableRule(font));
   }
 
+  /**
+   * The font list of a route file, from the `.fonts([…])` stage of its default-exported `rootLayout()` chain
+   * or from the legacy `export const fonts`. Only an inline literal is readable, because the build enumerates
+   * routes without evaluating them — and a list it cannot read is warned about rather than skipped in silence:
+   * the runtime still emits `/_akan/fonts` preloads for fonts nothing subset, and every one of them 404s.
+   */
   #extractFontsExport(source: string, filePath: string): ReactFont[] {
     const sourceFile = ts.createSourceFile(filePath, source, ts.ScriptTarget.Latest, true, ts.ScriptKind.TSX);
-    const fonts: ReactFont[] = [];
+    const declaration = this.#findFontsDeclaration(sourceFile);
+    if (!declaration) return [];
+    const value = this.#literalToValue(declaration);
+    const entries: unknown[] = Array.isArray(value) ? value : [];
+    const fonts = entries.filter((entry): entry is ReactFont => this.#isReadableFont(entry));
+    if (fonts.length !== entries.length || !Array.isArray(value))
+      this.#app.logger.warn(
+        `[font] ${path.relative(this.#app.cwdPath, filePath)} declares fonts the build cannot read without evaluating the module — write the list inline, or nothing is subset for it and every /_akan/fonts request 404s`,
+      );
+    return fonts.map((font) => this.#withFontDefaults(font));
+  }
+
+  #isReadableFont(value: unknown): value is ReactFont {
+    if (!value || typeof value !== "object") return false;
+    const font = value as Partial<ReactFont>;
+    return typeof font.name === "string" && Array.isArray(font.paths);
+  }
+
+  #findFontsDeclaration(sourceFile: ts.SourceFile): ts.Expression | null {
     for (const statement of sourceFile.statements) {
+      if (ts.isExportAssignment(statement)) {
+        if (statement.isExportEquals) continue;
+        const stage = this.#findChainStageArgument(statement.expression, "fonts");
+        if (stage) return stage;
+        continue;
+      }
       if (!ts.isVariableStatement(statement)) continue;
       const modifiers = ts.canHaveModifiers(statement) ? ts.getModifiers(statement) : undefined;
-      const isExported = modifiers?.some((modifier) => modifier.kind === ts.SyntaxKind.ExportKeyword) ?? false;
-      if (!isExported) continue;
+      if (!modifiers?.some((modifier) => modifier.kind === ts.SyntaxKind.ExportKeyword)) continue;
       for (const declaration of statement.declarationList.declarations) {
         if (!ts.isIdentifier(declaration.name) || declaration.name.text !== "fonts") continue;
-        const value = declaration.initializer ? this.#literalToValue(declaration.initializer) : null;
-        if (Array.isArray(value)) {
-          fonts.push(...(value as ReactFont[]).map((font) => this.#withFontDefaults(font)));
-        }
+        if (declaration.initializer) return declaration.initializer;
       }
     }
-    return fonts;
+    return null;
+  }
+
+  /** Walks a `rootLayout()` chain from its outermost call inward, so the stage that wins at runtime is the one read. */
+  #findChainStageArgument(expression: ts.Expression, stageName: string): ts.Expression | null {
+    let node = this.#unwrapExpression(expression);
+    let argument: ts.Expression | null = null;
+    while (node && ts.isCallExpression(node)) {
+      const callee = this.#unwrapExpression(node.expression);
+      if (!callee) return null;
+      if (ts.isIdentifier(callee)) return callee.text === "rootLayout" ? argument : null;
+      if (!ts.isPropertyAccessExpression(callee)) return null;
+      if (callee.name.text === stageName) argument ??= node.arguments[0] ?? null;
+      node = this.#unwrapExpression(callee.expression);
+    }
+    return null;
+  }
+
+  #unwrapExpression(expression?: ts.Expression): ts.Expression | undefined {
+    let current = expression;
+    while (
+      current &&
+      (ts.isAsExpression(current) || ts.isSatisfiesExpression(current) || ts.isParenthesizedExpression(current))
+    ) {
+      current = current.expression;
+    }
+    return current;
   }
 
   #literalToValue(node: ts.Node): unknown {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akanjs/devkit",
-  "version": "3.0.0-alpha.105",
+  "version": "3.0.0-alpha.107",
   "sourceType": "module",
   "type": "module",
   "publishConfig": {
@@ -44,7 +44,7 @@
     "@langchain/openai": "^1.4.6",
     "@tailwindcss/node": "^4.3.0",
     "@trapezedev/project": "^7.1.4",
-    "akanjs": "3.0.0-alpha.105",
+    "akanjs": "3.0.0-alpha.107",
     "chalk": "^5.6.2",
     "commander": "^14.0.3",
     "dayjs": "^1.11.20",