akanjs 2.1.2-rc.1 → 2.2.0-rc.1

package/CHANGELOG.md

@@ -0,0 +1,8 @@
+# akanjs
+
+## 2.2.0
+
+### Minor Changes
+
+- cb5b07a: enable custom not found and error render on \_layout.tsx files
+- 258284e: initial js bundle size is optimized as single language dictionary on ssr

package/capacitor.base.config.ts

@@ -1,6 +1,9 @@
+import { existsSync, readdirSync, statSync } from "node:fs";
 import os from "node:os";
+import path from "node:path";
 import type { CapacitorConfig } from "@capacitor/cli";
 import type { AkanMobileTargetConfig, AppScanResult } from "akanjs";
+import { parseAkanI18nEnv } from "akanjs/common";
 
 const getLocalIP = () => {
   const interfaces = os.networkInterfaces();
@@ -16,6 +19,39 @@ const getLocalIP = () => {
 
 const normalizeBasePath = (basePath: string | undefined) => basePath?.replace(/^\/+|\/+$/g, "");
 
+const findAppsDir = (appName: string) => {
+  let dir = process.cwd();
+  while (dir !== path.dirname(dir)) {
+    const appsDir = path.join(dir, "apps");
+    if (existsSync(path.join(appsDir, appName, "akan.config.ts"))) return appsDir;
+    if (path.basename(dir) === appName && existsSync(path.join(dir, "akan.config.ts"))) return path.dirname(dir);
+    dir = path.dirname(dir);
+  }
+};
+
+const getAppNames = (appsDir: string, maxDepth = 3, prefix = ""): string[] => {
+  const appNames: string[] = [];
+  for (const entry of readdirSync(path.join(appsDir, prefix))) {
+    if (["node_modules", "dist", "public", "webkit"].includes(entry)) continue;
+    const entryPath = path.join(appsDir, prefix, entry);
+    if (!statSync(entryPath).isDirectory()) continue;
+    const appName = path.join(prefix, entry).split(path.sep).join("/");
+    if (existsSync(path.join(entryPath, "akan.config.ts"))) appNames.push(appName);
+    if (maxDepth > 0) appNames.push(...getAppNames(appsDir, maxDepth - 1, appName));
+  }
+  return appNames;
+};
+
+const resolveLocalCsrPort = (appInfo: AppScanResult) => {
+  const explicitPort = process.env.AKAN_PUBLIC_CLIENT_PORT ?? process.env.PORT;
+  if (explicitPort) return explicitPort;
+  const appsDir = findAppsDir(appInfo.name);
+  const appNames = appsDir ? getAppNames(appsDir).sort((a, b) => a.localeCompare(b)) : [];
+  const appIndex = Math.max(appNames.indexOf(appInfo.name), 0);
+  const portOffset = Number.parseInt(process.env.PORT_OFFSET ?? "0");
+  return (8282 + appIndex + portOffset).toString();
+};
+
 const routeBasePaths = (appInfo: AppScanResult) =>
   new Set(
     appInfo.routes
@@ -42,10 +78,14 @@ const resolveTarget = (appInfo: AppScanResult, targetName = process.env.AKAN_MOB
   return entries[0]?.[1] as AkanMobileTargetConfig;
 };
 
-const localCsrUrl = (ip: string, target: AkanMobileTargetConfig) => {
+const localCsrUrl = (ip: string, target: AkanMobileTargetConfig, appInfo: AppScanResult) => {
   const basePath = normalizeBasePath(target.basePath);
-  const port = process.env.AKAN_PUBLIC_CLIENT_PORT ?? process.env.PORT ?? "8282";
-  return `http://${ip}:${port}/${basePath ? `${basePath}` : ""}?csr=true`;
+  const locale = parseAkanI18nEnv().defaultLocale;
+  const pathname = basePath ? `${locale}/${basePath}` : `${locale}/`;
+  const port = resolveLocalCsrPort(appInfo);
+  const params = new URLSearchParams({ csr: "true", akanMobileTarget: target.name });
+  if (basePath) params.set("akanMobileBasePath", basePath);
+  return `http://${ip}:${port}/${pathname}?${params}`;
 };
 
 export const withBase = (
@@ -66,7 +106,7 @@ export const withBase = (
       process.env.APP_OPERATION_MODE !== "release"
         ? {
             androidScheme: "http",
-            url: localCsrUrl(ip, target),
+            url: localCsrUrl(ip, target, appInfo),
             cleartext: true,
             allowNavigation: [ip, "localhost"],
           }

package/client/capacitor.ts

@@ -169,58 +169,56 @@ const loadCapacitorModule = <K extends keyof CapacitorModuleMap>(
   return loaded;
 };
 
-const importNativeModule = <T>(specifier: string) => import(specifier) as Promise<T>;
-
-const capacitorPackage = (name: string) => `@capacitor/${name}`;
-
-const capacitorCommunityPackage = (name: string) => `@capacitor-community/${name}`;
+const asCapacitorModule = <T>(modulePromise: Promise<unknown>) => modulePromise as Promise<T>;
 
 export const loadCapacitorApp = () =>
-  loadCapacitorModule("app", () => importNativeModule<CapacitorAppModule>(capacitorPackage("app")));
+  loadCapacitorModule("app", () => asCapacitorModule<CapacitorAppModule>(import("@capacitor/app")));
 
 export const loadCapacitorBrowser = () =>
-  loadCapacitorModule("browser", () => importNativeModule<CapacitorBrowserModule>(capacitorPackage("browser")));
+  loadCapacitorModule("browser", () => asCapacitorModule<CapacitorBrowserModule>(import("@capacitor/browser")));
 
 export const loadCapacitorCamera = () =>
-  loadCapacitorModule("camera", () => importNativeModule<CapacitorCameraModule>(capacitorPackage("camera")));
+  loadCapacitorModule("camera", () => asCapacitorModule<CapacitorCameraModule>(import("@capacitor/camera")));
 
 export const loadCapacitorContacts = () =>
   loadCapacitorModule("contacts", () =>
-    importNativeModule<CapacitorContactsModule>(capacitorCommunityPackage("contacts")),
+    asCapacitorModule<CapacitorContactsModule>(import("@capacitor-community/contacts")),
   );
 
 export const loadCapacitorCore = () =>
-  loadCapacitorModule("core", () => importNativeModule<CapacitorCoreModule>(capacitorPackage("core")));
+  loadCapacitorModule("core", () => asCapacitorModule<CapacitorCoreModule>(import("@capacitor/core")));
 
 export const loadCapacitorDevice = () =>
-  loadCapacitorModule("device", () => importNativeModule<CapacitorDeviceModule>(capacitorPackage("device")));
+  loadCapacitorModule("device", () => asCapacitorModule<CapacitorDeviceModule>(import("@capacitor/device")));
 
 export const loadCapacitorFcm = () =>
-  loadCapacitorModule("fcm", () => importNativeModule<CapacitorFcmModule>(capacitorCommunityPackage("fcm")));
+  loadCapacitorModule("fcm", () => asCapacitorModule<CapacitorFcmModule>(import("@capacitor-community/fcm")));
 
 export const loadCapacitorGeolocation = () =>
   loadCapacitorModule("geolocation", () =>
-    importNativeModule<CapacitorGeolocationModule>(capacitorPackage("geolocation")),
+    asCapacitorModule<CapacitorGeolocationModule>(import("@capacitor/geolocation")),
   );
 
 export const loadCapacitorHaptics = () =>
-  loadCapacitorModule("haptics", () => importNativeModule<CapacitorHapticsModule>(capacitorPackage("haptics")));
+  loadCapacitorModule("haptics", () => asCapacitorModule<CapacitorHapticsModule>(import("@capacitor/haptics")));
 
 export const loadCapacitorKeyboard = () =>
-  loadCapacitorModule("keyboard", () => importNativeModule<CapacitorKeyboardModule>(capacitorPackage("keyboard")));
+  loadCapacitorModule("keyboard", () => asCapacitorModule<CapacitorKeyboardModule>(import("@capacitor/keyboard")));
 
 export const loadCapacitorPreferences = () =>
   loadCapacitorModule("preferences", () =>
-    importNativeModule<CapacitorPreferencesModule>(capacitorPackage("preferences")),
+    asCapacitorModule<CapacitorPreferencesModule>(import("@capacitor/preferences")),
   );
 
 export const loadCapacitorPushNotifications = () =>
   loadCapacitorModule("pushNotifications", () =>
-    importNativeModule<CapacitorPushNotificationsModule>(capacitorPackage("push-notifications")),
+    asCapacitorModule<CapacitorPushNotificationsModule>(import("@capacitor/push-notifications")),
   );
 
 export const loadCapacitorSafeArea = () =>
-  loadCapacitorModule("safeArea", () => importNativeModule<CapacitorSafeAreaModule>("capacitor-plugin-safe-area"));
+  loadCapacitorModule("safeArea", () =>
+    asCapacitorModule<CapacitorSafeAreaModule>(import("capacitor-plugin-safe-area")),
+  );
 
 export const loadCapacitorUpdater = () =>
-  loadCapacitorModule("updater", () => importNativeModule<CapacitorUpdaterModule>("@capgo/capacitor-updater"));
+  loadCapacitorModule("updater", () => asCapacitorModule<CapacitorUpdaterModule>(import("@capgo/capacitor-updater")));

package/client/csrTypes.ts

@@ -70,6 +70,7 @@ export type LayoutNotFoundRender = (props: LayoutNotFoundProps) => PromiseOrObje
 export type LayoutErrorRender = (props: LayoutErrorProps) => PromiseOrObject<ReactNode>;
 export interface RouteRender {
   render: LayoutRender | PageRender;
+  isAsync?: boolean;
   Loading?: LayoutLoadingRender | PageLoadingRender;
   NotFound?: LayoutNotFoundRender;
   Error?: LayoutErrorRender;

package/client/router.ts

@@ -63,6 +63,7 @@ function getServerRequestContext() {
 const getConfiguredBasePaths = () => new Set(parseBasePaths(process.env.AKAN_PUBLIC_BASE_PATHS));
 
 const shouldExposeBasePath = () => getEnv().operationMode === "local";
+const CSR_RUNTIME_SEARCH_PARAMS = ["csr", "akanMobileTarget", "akanMobileBasePath"] as const;
 
 const getLocaleFromPathname = (pathname: string) => {
   const [firstSegment] = pathname.split("/").filter(Boolean);
@@ -168,14 +169,14 @@ class Router {
       push: (href: string, routeOptions) => {
         const { path, pathname, hash, href: fullHref } = this.#getPathInfo(href);
         this.#postPathChange({ path, pathname, hash });
-        options.router.push(fullHref, routeOptions);
+        options.router.push(this.#withCsrRuntimeSearchParams(fullHref), routeOptions);
       },
       replace: (href: string, routeOptions) => {
         const { path, pathname, hash, href: fullHref } = this.#getPathInfo(href);
         this.#postPathChange({ path, pathname, hash });
         
         setTimeout(() => {
-          options.router.replace(fullHref, routeOptions);
+          options.router.replace(this.#withCsrRuntimeSearchParams(fullHref), routeOptions);
         }, 0);
       },
       back: (routeOptions) => {
@@ -200,6 +201,21 @@ class Router {
   #getNavigationPathInfo(href: string) {
     return this.#getPathInfo(href, shouldExposeBasePath() ? this.#prefix : "");
   }
+  #withCsrRuntimeSearchParams(href: string) {
+    const currentSearch = new URLSearchParams(window.location.search);
+    if (currentSearch.get("csr") !== "true") return href;
+
+    const [hrefWithoutHash, hash = ""] = href.split("#");
+    const [pathname, search = ""] = hrefWithoutHash.split("?");
+    const nextSearch = new URLSearchParams(search);
+    for (const param of CSR_RUNTIME_SEARCH_PARAMS) {
+      if (nextSearch.has(param)) continue;
+      const value = currentSearch.get(param);
+      if (value !== null) nextSearch.set(param, value);
+    }
+    const query = nextSearch.toString();
+    return `${pathname}${query ? `?${query}` : ""}${hash ? `#${hash}` : ""}`;
+  }
   #getVisiblePathInfo(href: string, lang = this.#lang) {
     return getPathInfo(href, lang, shouldExposeBasePath() ? this.#prefix : "");
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "akanjs",
-  "version": "2.1.2-rc.1",
+  "version": "2.2.0-rc.1",
   "sourceType": "module",
   "type": "module",
   "publishConfig": {

package/server/routeTreeBuilder.ts

@@ -283,6 +283,7 @@ export class RouteTreeBuilder {
   static #makeRouteRender(key: string, kind: "page" | "layout", loader: () => Promise<RouteModule>): RouteRender {
     const loadModule = RouteTreeBuilder.#makeLazyModule(key, kind, loader);
     const routeRender: RouteRender = {
+      isAsync: true,
       render: async (props: LayoutProps | PageProps) => {
         const mod = await loadModule();
         routeRender.Loading = mod.Loading as never;

package/types/client/csrTypes.d.ts

@@ -73,6 +73,7 @@ export type LayoutNotFoundRender = (props: LayoutNotFoundProps) => PromiseOrObje
 export type LayoutErrorRender = (props: LayoutErrorProps) => PromiseOrObject<ReactNode>;
 export interface RouteRender {
     render: LayoutRender | PageRender;
+    isAsync?: boolean;
     Loading?: LayoutLoadingRender | PageLoadingRender;
     NotFound?: LayoutNotFoundRender;
     Error?: LayoutErrorRender;

package/types/webkit/bootCsr.d.ts

@@ -1,4 +1,9 @@
 import { type RouteModule } from "akanjs/client";
+type CsrRouteModuleLoader = () => Promise<RouteModule>;
+type CsrRouteModuleEntry = CsrRouteModuleLoader | {
+    loader: CsrRouteModuleLoader;
+    isAsyncDefault?: boolean;
+};
 declare global {
     interface Window {
         __AKAN_MOBILE_TARGET__?: {
@@ -7,4 +12,5 @@ declare global {
         };
     }
 }
-export declare const bootCsr: (context: Record<string, () => Promise<RouteModule>>) => Promise<void>;
+export declare const bootCsr: (context: Record<string, CsrRouteModuleEntry>) => Promise<void>;
+export {};

package/ui/System/CSR.tsx

@@ -396,7 +396,7 @@ const RenderLayer = memo(({ renders, index, params, searchParams }: RenderLayerP
     <RenderLayer renders={renders} index={index + 1} params={params} searchParams={searchParams} />
   );
   const routeRender = renders[index];
-  const isAsyncRender = routeRender?.render.constructor.name === "AsyncFunction";
+  const isAsyncRender = isAsyncRouteRender(routeRender);
   const resultRef = useRef<ReactNode | Promise<ReactNode> | null>(null);
   if (isAsyncRender && resultRef.current === null) {
     resultRef.current = routeRender?.render({ children, params, searchParams } as never) ?? null;
@@ -408,6 +408,10 @@ const RenderLayer = memo(({ renders, index, params, searchParams }: RenderLayerP
   return <>{Component}</>;
 });
 
+function isAsyncRouteRender(routeRender?: RouteRender): boolean {
+  return Boolean(routeRender?.isAsync || routeRender?.render.constructor.name === "AsyncFunction");
+}
+
 function composeLoadingFallback(renders: RouteRender[], params: Record<string, string>): ReactNode {
   let element: ReactNode = null;
   for (let i = renders.length - 1; i >= 0; i--) {

package/webkit/bootCsr.tsx

@@ -30,6 +30,8 @@ import { useCsrValues } from "./useCsrValues";
 import { useFetch } from "./useFetch";
 
 type RouteModuleWithConfig = RouteModule & { pageConfig?: PageConfig };
+type CsrRouteModuleLoader = () => Promise<RouteModule>;
+type CsrRouteModuleEntry = CsrRouteModuleLoader | { loader: CsrRouteModuleLoader; isAsyncDefault?: boolean };
 
 declare global {
   interface Window {
@@ -49,7 +51,7 @@ const RootRenderLayer = memo(({ renders, index, params, searchParams }: RootRend
     <RootRenderLayer renders={renders} index={index + 1} params={params} searchParams={searchParams} />
   );
   const routeRender = renders[index];
-  const isAsyncRender = routeRender?.render.constructor.name === "AsyncFunction";
+  const isAsyncRender = isAsyncRouteRender(routeRender);
   const resultRef = useRef<ReactNode | Promise<ReactNode> | null>(null);
   if (isAsyncRender && resultRef.current === null) {
     resultRef.current = routeRender?.render({ children, params, searchParams } as never) ?? null;
@@ -61,6 +63,10 @@ const RootRenderLayer = memo(({ renders, index, params, searchParams }: RootRend
   return Layout;
 });
 
+function isAsyncRouteRender(routeRender?: RouteRender): boolean {
+  return Boolean(routeRender?.isAsync || routeRender?.render.constructor.name === "AsyncFunction");
+}
+
 function composeLoadingFallback(renders: RouteRender[], params: Record<string, string>): ReactNode {
   let element: ReactNode = null;
   for (let i = renders.length - 1; i >= 0; i--) {
@@ -71,9 +77,10 @@ function composeLoadingFallback(renders: RouteRender[], params: Record<string, s
   return element;
 }
 
-export const bootCsr = async (context: Record<string, () => Promise<RouteModule>>) => {
+export const bootCsr = async (context: Record<string, CsrRouteModuleEntry>) => {
   const i18n = parseAkanI18nEnv();
   window.document.body.style.overflow = "hidden";
+  initializeMobileTargetFromSearch();
   const mobileBasePath = window.__AKAN_MOBILE_TARGET__?.basePath?.replace(/^\/+|\/+$/g, "");
   const pathname = mobileBasePath && window.location.pathname === "/" ? `/${mobileBasePath}` : window.location.pathname;
   if (pathname === "/404") return;
@@ -93,6 +100,7 @@ export const bootCsr = async (context: Record<string, () => Promise<RouteModule>
   const otherBasePaths = basePaths?.filter((path) => path !== currentBasePath) ?? [];
 
   const pages: { [key: string]: RouteModule } = {};
+  const asyncDefaultMap: { [key: string]: boolean | undefined } = {};
   await Promise.all(
     Object.entries(context).map(async ([key, value]) => {
       const parsed = parseRouteModuleKey(key);
@@ -100,8 +108,10 @@ export const bootCsr = async (context: Record<string, () => Promise<RouteModule>
         const pageBasePath = parsed.sourceRouteSegments.find((segment) => !/^\(.+\)$/.test(segment));
         if (pageBasePath && otherBasePaths.includes(pageBasePath)) return; 
       }
-      const pageContent = await value();
+      const entry = typeof value === "function" ? { loader: value } : value;
+      const pageContent = await entry.loader();
       validateRouteModuleExports(key, pageContent);
+      asyncDefaultMap[key] = entry.isAsyncDefault;
       if (pageContent.default) pages[key] = pageContent;
     }),
   );
@@ -155,6 +165,7 @@ export const bootCsr = async (context: Record<string, () => Promise<RouteModule>
     const layoutPage = parsed.kind === "layout" ? (page as LayoutModule) : null;
     const routeRender: RouteRender = {
       render: page.default as never,
+      isAsync: asyncDefaultMap[filePath] || page.default?.constructor.name === "AsyncFunction",
       Loading: page.Loading as never,
       NotFound: layoutPage?.NotFound,
       Error: layoutPage?.Error,
@@ -257,6 +268,17 @@ export const bootCsr = async (context: Record<string, () => Promise<RouteModule>
   root.render(<RouterProvider />);
 };
 
+function initializeMobileTargetFromSearch() {
+  if (window.__AKAN_MOBILE_TARGET__) return;
+
+  const params = new URLSearchParams(window.location.search);
+  const name = params.get("akanMobileTarget");
+  if (!name) return;
+
+  const basePath = params.get("akanMobileBasePath")?.replace(/^\/+|\/+$/g, "") ?? "";
+  window.__AKAN_MOBILE_TARGET__ = { name, basePath };
+}
+
 function validateRouteModuleExports(key: string, mod: RouteModule) {
   const parsed = parseRouteModuleKey(key);
   const allowed =