@akanjs/devkit 2.1.2-rc.1 → 2.2.0-rc.1

package/CHANGELOG.md

@@ -0,0 +1,9 @@
+# @akanjs/devkit
+
+## 2.2.0
+
+### Patch Changes
+
+- Updated dependencies [cb5b07a]
+- Updated dependencies [258284e]
+  - akanjs@2.2.0

package/artifact/implicitRootLayout.ts

@@ -135,8 +135,69 @@ async function writeGeneratedRootLayoutFile(opts: {
     ? `import UserLayout, * as userLayout from ${JSON.stringify(sourceSpecifier)};\n`
     : "const UserLayout = ({ children }) => children;\nconst userLayout = {};\n";
   const source = opts.includeSystemProvider
-    ? `import type { LayoutProps, PageProps } from "akanjs/client";\nimport { loadFonts } from "akanjs/client";\nimport { System } from "akanjs/ui";\nimport { env } from "@apps/${opts.appName}/env/env.client";\n${clientImport}${inheritedImport}${userImport}\nconst userFonts = userLayout.fonts ?? inheritedLayout.fonts ?? [];\nconst defaultFonts = userFonts.filter((font) => font.default);\nif (defaultFonts.length > 1) throw new Error("[route-convention] only one default font is allowed per root layout");\nconst defaultFont = defaultFonts[0];\nconst defaultFontClassName = defaultFont ? (defaultFont.className ?? \`font-\${defaultFont.name}\`) : undefined;\n\nexport async function generateHead(props: PageProps) {\n  if (userLayout.generateHead) return userLayout.generateHead(props);\n  if (userLayout.head !== undefined) return userLayout.head;\n  if (inheritedLayout.generateHead) return inheritedLayout.generateHead(props);\n  return inheritedLayout.head;\n}\n\nexport const NotFound = userLayout.NotFound ?? inheritedLayout.NotFound;\nexport const Error = userLayout.Error ?? inheritedLayout.Error;\n\nexport default function GeneratedLayout({ children, params, searchParams }: LayoutProps) {\n  return (\n    <System.Provider\n      of={GeneratedLayout as never}\n      appName=${JSON.stringify(opts.appName)}\n      ${prefix ? `prefix=${JSON.stringify(prefix)}\n      ` : ""}params={params}\n      manifest={userLayout.manifest ?? inheritedLayout.manifest}\n      env={env}\n      theme={userLayout.theme ?? inheritedLayout.theme}\n      fonts={loadFonts(userFonts)}\n      className={defaultFontClassName}\n      gaTrackingId={userLayout.gaTrackingId ?? inheritedLayout.gaTrackingId}\n      layoutStyle={userLayout.layoutStyle ?? inheritedLayout.layoutStyle}\n      reconnect={userLayout.reconnect ?? inheritedLayout.reconnect ?? false}\n    >\n      <UserLayout params={params} searchParams={searchParams}>{children}</UserLayout>\n    </System.Provider>\n  );\n}\n`
-    : `import type { LayoutProps, PageProps } from "akanjs/client";\n${inheritedImport}${userImport}\nexport async function generateHead(props: PageProps) {\n  if (userLayout.generateHead) return userLayout.generateHead(props);\n  if (userLayout.head !== undefined) return userLayout.head;\n  if (inheritedLayout.generateHead) return inheritedLayout.generateHead(props);\n  return inheritedLayout.head;\n}\n\nexport const NotFound = userLayout.NotFound ?? inheritedLayout.NotFound;\nexport const Error = userLayout.Error ?? inheritedLayout.Error;\n\nexport default function GeneratedLayout({ children, params, searchParams }: LayoutProps) {\n  return <UserLayout params={params} searchParams={searchParams}>{children}</UserLayout>;\n}\n`;
+    ? `import type { LayoutProps, PageProps } from "akanjs/client";
+import { loadFonts } from "akanjs/client";
+import { System } from "akanjs/ui";
+import { env } from "@apps/${opts.appName}/env/env.client";
+${clientImport}${inheritedImport}${userImport}
+// SSR builds (target=bun) load the full dictionary server-side and pass only the active locale to the client.
+// CSR builds (target=browser) fold this branch to undefined, so the macro-seeded dictionary is used and the
+// server-only dict module (which pulls @libs/*/server) is dead-code-eliminated out of the browser bundle.
+const getActiveLocaleDictionary =
+  process.env.AKAN_PUBLIC_RENDER_ENV === "ssr" ? (await import("@apps/${opts.appName}/lib/dict")).getDictionary : undefined;
+const userFonts = userLayout.fonts ?? inheritedLayout.fonts ?? [];
+const defaultFonts = userFonts.filter((font) => font.default);
+if (defaultFonts.length > 1) throw new Error("[route-convention] only one default font is allowed per root layout");
+const defaultFont = defaultFonts[0];
+const defaultFontClassName = defaultFont ? (defaultFont.className ?? \`font-\${defaultFont.name}\`) : undefined;
+
+export async function generateHead(props: PageProps) {
+  if (userLayout.generateHead) return userLayout.generateHead(props);
+  if (userLayout.head !== undefined) return userLayout.head;
+  if (inheritedLayout.generateHead) return inheritedLayout.generateHead(props);
+  return inheritedLayout.head;
+}
+
+export const NotFound = userLayout.NotFound ?? inheritedLayout.NotFound;
+export const Error = userLayout.Error ?? inheritedLayout.Error;
+
+export default function GeneratedLayout({ children, params, searchParams }: LayoutProps) {
+  return (
+    <System.Provider
+      of={GeneratedLayout as never}
+      appName=${JSON.stringify(opts.appName)}
+      ${prefix ? `prefix=${JSON.stringify(prefix)}\n      ` : ""}params={params}
+      manifest={userLayout.manifest ?? inheritedLayout.manifest}
+      env={env}
+      theme={userLayout.theme ?? inheritedLayout.theme}
+      fonts={loadFonts(userFonts)}
+      className={defaultFontClassName}
+      gaTrackingId={userLayout.gaTrackingId ?? inheritedLayout.gaTrackingId}
+      layoutStyle={userLayout.layoutStyle ?? inheritedLayout.layoutStyle}
+      reconnect={userLayout.reconnect ?? inheritedLayout.reconnect ?? false}
+      dictionary={getActiveLocaleDictionary ? getActiveLocaleDictionary(params.lang) : undefined}
+    >
+      <UserLayout params={params} searchParams={searchParams}>{children}</UserLayout>
+    </System.Provider>
+  );
+}
+`
+    : `import type { LayoutProps, PageProps } from "akanjs/client";
+${inheritedImport}${userImport}
+export async function generateHead(props: PageProps) {
+  if (userLayout.generateHead) return userLayout.generateHead(props);
+  if (userLayout.head !== undefined) return userLayout.head;
+  if (inheritedLayout.generateHead) return inheritedLayout.generateHead(props);
+  return inheritedLayout.head;
+}
+
+export const NotFound = userLayout.NotFound ?? inheritedLayout.NotFound;
+export const Error = userLayout.Error ?? inheritedLayout.Error;
+
+export default function GeneratedLayout({ children, params, searchParams }: LayoutProps) {
+  return <UserLayout params={params} searchParams={searchParams}>{children}</UserLayout>;
+}
+`;
   await Bun.write(absPath, source);
   return absPath;
 }

package/capacitorApp.ts

@@ -27,11 +27,12 @@ export class CapacitorApp {
   readonly iosRootPath = "ios";
   readonly iosProjectPath = "ios/App";
   readonly androidRootPath = "android";
+  readonly androidAssetsPath = "android/app/src/main/assets";
   constructor(
     private readonly app: AppExecutor,
     readonly target: AkanMobileTargetConfig,
   ) {
-    this.targetRootPath = path.posix.join("mobile", this.target.name);
+    this.targetRootPath = path.posix.join(".akan", "mobile", this.target.name);
     this.targetRoot = path.join(this.app.cwdPath, this.targetRootPath);
     this.targetWebRoot = path.join(this.targetRoot, "www");
     this.targetAssetRoot = path.join(this.targetRoot, "assets");
@@ -111,6 +112,8 @@ export class CapacitorApp {
     await this.#applyLinks();
     await this.project.commit();
     await this.#generateAssets({ operation, env });
+    await this.#ensureAndroidAssetsDir();
+    await this.#ensureAndroidDebugKeystore();
     await this.#spawnMobile("npx", ["cap", "sync", "android"], { operation, env });
   }
 
@@ -166,12 +169,40 @@ export class CapacitorApp {
     await this.app.spawn(gradleCommand, [assembleType === "apk" ? "assembleRelease" : "bundleRelease"], {
       stdio: "inherit",
       cwd: path.join(this.app.cwdPath, this.androidRootPath),
-      env: this.#commandEnv("release", env),
+      env: await this.#commandEnv("release", env),
     });
   }
   async openAndroid() {
     await this.#spawnMobile("npx", ["cap", "open", "android"], { operation: "local", env: "local" });
   }
+  async #ensureAndroidAssetsDir() {
+    await mkdir(path.join(this.app.cwdPath, this.androidAssetsPath), { recursive: true });
+  }
+  async #ensureAndroidDebugKeystore() {
+    const keystorePath = path.join(this.app.cwdPath, this.androidRootPath, "app/debug.keystore");
+    if (await Bun.file(keystorePath).exists()) return;
+
+    await this.#spawn("keytool", [
+      "-genkeypair",
+      "-v",
+      "-keystore",
+      keystorePath,
+      "-storepass",
+      "android",
+      "-alias",
+      "androiddebugkey",
+      "-keypass",
+      "android",
+      "-keyalg",
+      "RSA",
+      "-keysize",
+      "2048",
+      "-validity",
+      "10000",
+      "-dname",
+      "CN=Android Debug,O=Android,C=US",
+    ]);
+  }
   async syncAndroid(options: { regenerate?: boolean } = {}) {
     await this.prepareWww();
     await this.#prepareAndroid({ operation: "release", env: "debug", ...options });
@@ -217,13 +248,13 @@ export class CapacitorApp {
       .split(path.sep)
       .join("/");
     const content = `import type { AppScanResult } from "akanjs";
-import { withBase } from "akanjs/capacitor.base.config";
+import { withBase } from "${process.env.USE_AKANJS_PKGS === "true" ? "../../pkgs/" : ""}akanjs/capacitor.base.config";
 import appInfo from "${appInfoPath.startsWith(".") ? appInfoPath : `./${appInfoPath}`}";
 
 export default withBase(
   (config, target) => ({
     ...config,
-    webDir: \`mobile/\${target.name}/www\`,
+    webDir: \`.akan/mobile/\${target.name}/www\`,
     android: {
       ...config.android,
       path: "android",
@@ -331,12 +362,14 @@ export default withBase(
         );
     }
   }
-  #commandEnv(operation: "local" | "release", env: "local" | "debug" | "develop" | "main") {
+  async #commandEnv(operation: "local" | "release", env: "local" | "debug" | "develop" | "main") {
+    const devPort = operation === "local" ? (await this.app.getDevPort()).toString() : undefined;
     return this.app.getCommandEnv({
       APP_OPERATION_MODE: operation,
       AKAN_PUBLIC_OPERATION_MODE: env === "local" ? "local" : "cloud",
       AKAN_PUBLIC_ENV: env,
       AKAN_MOBILE_TARGET: this.target.name,
+      ...(devPort ? { PORT: devPort, AKAN_PUBLIC_CLIENT_PORT: devPort, AKAN_PUBLIC_SERVER_PORT: devPort } : {}),
     });
   }
   async #spawn(command: string, args: string[] = [], options: Parameters<AppExecutor["spawn"]>[2] = {}) {
@@ -350,7 +383,7 @@ export default withBase(
   ) {
     return await this.#spawn(command, args, {
       ...options,
-      env: { ...this.#commandEnv(operation, env), ...options.env },
+      env: { ...(await this.#commandEnv(operation, env)), ...options.env },
     });
   }
   async addCamera() {

package/cloud/constants.ts

@@ -3,9 +3,8 @@ import type { SupportedLlmModel } from "../aiEditor";
 
 export const basePath = `${Bun.env.HOME ?? Bun.env.USERPROFILE}/.akan`;
 export const configPath = `${basePath}/config.json`;
-export const akanCloudHost =
-  process.env.AKAN_PUBLIC_OPERATION_MODE === "local" ? "http://localhost" : "https://cloud.akanjs.com";
-export const akanCloudUrl = `${akanCloudHost}${process.env.AKAN_PUBLIC_OPERATION_MODE === "local" ? ":8282" : ""}/api`;
+export const akanCloudHost = process.env.USE_AKANJS_PKGS === "true" ? "http://localhost" : "https://cloud.akanjs.com";
+export const akanCloudUrl = `${akanCloudHost}${process.env.USE_AKANJS_PKGS === "true" ? ":8282" : ""}/api`;
 
 export interface HostConfig {
   auth?: {

package/frontendBuild/csrArtifactBuilder.ts

@@ -153,6 +153,21 @@ void bootCsr(pages);
       jsFiles.push(jsPath);
       return await Bun.file(jsPath).text();
     });
+    const bundledCss = (
+      await Promise.all(
+        cssFiles.map((cssFile) =>
+          Bun.file(cssFile)
+            .text()
+            .catch(() => ""),
+        ),
+      )
+    )
+      .filter(Boolean)
+      .join("\n");
+    if (bundledCss) {
+      const style = CsrArtifactBuilder.createInlineStyle(bundledCss);
+      if (!next.includes(style)) next = CsrArtifactBuilder.injectBeforeHeadEnd(next, style);
+    }
     if (cssAsset) {
       const cssPath = path.join(
         this.#command === "build" ? this.#app.dist.cwdPath : this.#app.cwdPath,

package/frontendBuild/frontendBuild.test.ts

@@ -58,13 +58,41 @@ describe("PagesEntrySourceGenerator", () => {
         'import * as page0 from "/repo/apps/demo/page/_index.tsx";',
         'import * as page1 from "/repo/apps/demo/page/admin.tsx";',
         "export const pages = {",
-        '  "./_index.tsx": async () => page0,',
-        '  "./admin.tsx": async () => page1,',
+        '  "./_index.tsx": { loader: async () => page0, isAsyncDefault: false },',
+        '  "./admin.tsx": { loader: async () => page1, isAsyncDefault: false },',
         "};",
         "",
       ].join("\n"),
     );
   });
+
+  test("marks async default exports for static CSR bundles", async () => {
+    const root = await makeTempRoot();
+    const indexPath = path.join(root, "page/_index.tsx");
+    const adminPath = path.join(root, "page/admin.tsx");
+    const typedPath = path.join(root, "page/typed.tsx");
+    const expressionPath = path.join(root, "page/expression.tsx");
+    const namedExportPath = path.join(root, "page/named-export.tsx");
+    await write(indexPath, "export default async function Page() { return null; }");
+    await write(adminPath, "const Admin = async () => null;\nexport default Admin;");
+    await write(typedPath, "const Typed: () => Promise<null> = async () => null;\nexport default Typed;");
+    await write(expressionPath, "export default async () => null;");
+    await write(namedExportPath, "async function NamedExport() { return null; }\nexport { NamedExport as default };");
+
+    const source = PagesEntrySourceGenerator.generateStatic([
+      { key: "./_index.tsx", moduleAbsPath: indexPath },
+      { key: "./admin.tsx", moduleAbsPath: adminPath },
+      { key: "./typed.tsx", moduleAbsPath: typedPath },
+      { key: "./expression.tsx", moduleAbsPath: expressionPath },
+      { key: "./named-export.tsx", moduleAbsPath: namedExportPath },
+    ]);
+
+    expect(source).toContain('"./_index.tsx": { loader: async () => page0, isAsyncDefault: true },');
+    expect(source).toContain('"./admin.tsx": { loader: async () => page1, isAsyncDefault: true },');
+    expect(source).toContain('"./typed.tsx": { loader: async () => page2, isAsyncDefault: true },');
+    expect(source).toContain('"./expression.tsx": { loader: async () => page3, isAsyncDefault: true },');
+    expect(source).toContain('"./named-export.tsx": { loader: async () => page4, isAsyncDefault: true },');
+  });
 });
 
 describe("CsrArtifactBuilder", () => {
@@ -117,7 +145,8 @@ describe("SsrBaseArtifactBuilder", () => {
     const development = await prepareCssAsset("start", "", css);
     const production = await prepareCssAsset("build", "", css);
 
-    expect(development).toBe(css);
+    expect(development).toContain(".card");
+    expect(development).toContain("color: red");
     expect(production.length).toBeLessThan(css.length);
     expect(production).toContain(".card{");
     expect(production).not.toContain("\n  ");

package/frontendBuild/pagesEntrySourceGenerator.ts

@@ -1,4 +1,6 @@
+import fs from "node:fs";
 import path from "node:path";
+import ts from "typescript";
 import type { PageEntry } from "../artifact/implicitRootLayout";
 
 export class PagesEntrySourceGenerator {
@@ -29,9 +31,89 @@ export class PagesEntrySourceGenerator {
       const absPath = path.resolve(moduleAbsPath);
       return `import * as page${index} from ${JSON.stringify(absPath)};`;
     });
-    const entries = this.#pageEntries.map(({ key }, index) => {
-      return `  ${JSON.stringify(key)}: async () => page${index},`;
+    const entries = this.#pageEntries.map(({ key, moduleAbsPath }, index) => {
+      const isAsyncDefault = PagesEntrySourceGenerator.#hasAsyncDefaultExport(moduleAbsPath);
+      return `  ${JSON.stringify(key)}: { loader: async () => page${index}, isAsyncDefault: ${isAsyncDefault} },`;
     });
     return `${imports.join("\n")}\nexport const pages = {\n${entries.join("\n")}\n};\n`;
   }
+
+  static #hasAsyncDefaultExport(moduleAbsPath: string): boolean {
+    try {
+      const source = fs.readFileSync(path.resolve(moduleAbsPath), "utf8");
+      const sourceFile = ts.createSourceFile(
+        moduleAbsPath,
+        source,
+        ts.ScriptTarget.Latest,
+        true,
+        PagesEntrySourceGenerator.#scriptKind(moduleAbsPath),
+      );
+      return PagesEntrySourceGenerator.#sourceFileHasAsyncDefaultExport(sourceFile);
+    } catch {
+      return false;
+    }
+  }
+
+  static #sourceFileHasAsyncDefaultExport(sourceFile: ts.SourceFile): boolean {
+    const asyncBindings = new Map<string, boolean>();
+    let defaultIdentifier: string | null = null;
+
+    for (const statement of sourceFile.statements) {
+      if (ts.isFunctionDeclaration(statement)) {
+        if (PagesEntrySourceGenerator.#hasModifier(statement, ts.SyntaxKind.DefaultKeyword)) {
+          return PagesEntrySourceGenerator.#hasModifier(statement, ts.SyntaxKind.AsyncKeyword);
+        }
+        if (statement.name) {
+          asyncBindings.set(
+            statement.name.text,
+            PagesEntrySourceGenerator.#hasModifier(statement, ts.SyntaxKind.AsyncKeyword),
+          );
+        }
+        continue;
+      }
+
+      if (ts.isVariableStatement(statement)) {
+        for (const declaration of statement.declarationList.declarations) {
+          if (!ts.isIdentifier(declaration.name)) continue;
+          asyncBindings.set(
+            declaration.name.text,
+            PagesEntrySourceGenerator.#isAsyncFunctionExpression(declaration.initializer),
+          );
+        }
+        continue;
+      }
+
+      if (ts.isExportAssignment(statement)) {
+        if (PagesEntrySourceGenerator.#isAsyncFunctionExpression(statement.expression)) return true;
+        if (ts.isIdentifier(statement.expression)) defaultIdentifier = statement.expression.text;
+        continue;
+      }
+
+      if (ts.isExportDeclaration(statement) && statement.exportClause && ts.isNamedExports(statement.exportClause)) {
+        const exportClause = statement.exportClause;
+        for (const specifier of exportClause.elements) {
+          if (specifier.name.text !== "default") continue;
+          defaultIdentifier = specifier.propertyName?.text ?? specifier.name.text;
+        }
+      }
+    }
+
+    return defaultIdentifier ? asyncBindings.get(defaultIdentifier) === true : false;
+  }
+
+  static #hasModifier(node: ts.Node, kind: ts.SyntaxKind): boolean {
+    return ts.canHaveModifiers(node) && (ts.getModifiers(node)?.some((modifier) => modifier.kind === kind) ?? false);
+  }
+
+  static #isAsyncFunctionExpression(node?: ts.Expression): boolean {
+    return Boolean(
+      node &&
+        (ts.isArrowFunction(node) || ts.isFunctionExpression(node)) &&
+        PagesEntrySourceGenerator.#hasModifier(node, ts.SyntaxKind.AsyncKeyword),
+    );
+  }
+
+  static #scriptKind(moduleAbsPath: string): ts.ScriptKind {
+    return moduleAbsPath.endsWith(".tsx") || moduleAbsPath.endsWith(".jsx") ? ts.ScriptKind.TSX : ts.ScriptKind.TS;
+  }
 }

package/frontendBuild/ssrBaseArtifactBuilder.ts

@@ -18,8 +18,7 @@ export interface BuildSsrBaseArtifactResult {
 }
 
 export function prepareCssAsset(command: "build" | "start", basePath: string, cssText: string): string {
-  if (command !== "build") return cssText;
-  return optimize(cssText, { file: `${basePath || "root"}.css`, minify: true }).code;
+  return optimize(cssText, { file: `${basePath || "root"}.css`, minify: command === "build" }).code;
 }
 
 export class SsrBaseArtifactBuilder {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akanjs/devkit",
-  "version": "2.1.2-rc.1",
+  "version": "2.2.0-rc.1",
   "sourceType": "module",
   "type": "module",
   "publishConfig": {
@@ -32,7 +32,7 @@
     "@langchain/openai": "^1.4.6",
     "@tailwindcss/node": "^4.3.0",
     "@trapezedev/project": "^7.1.4",
-    "akanjs": "2.1.2-rc.1",
+    "akanjs": "2.2.0-rc.1",
     "chalk": "^5.6.2",
     "commander": "^14.0.3",
     "daisyui": "^5.5.20",