alabjs 0.2.5 → 0.3.0-alpha.1

package/src/config.ts

@@ -0,0 +1,143 @@
+import { resolve } from "node:path";
+import { existsSync } from "node:fs";
+import type { ConfigEnv } from "vite";
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+
+export interface FederationConfig {
+  /**
+   * This application's name — used as the namespace for its exposed modules.
+   * Other apps reference exposed components as `<name>/<ExposedName>`.
+   *
+   * @example "marketing"  // exposed modules served at /_alabjs/remotes/marketing/
+   */
+  name: string;
+
+  /**
+   * Modules this app exposes to remote hosts.
+   *
+   * Key: public component name (e.g. `"Button"`).
+   * Value: module path relative to the project root (e.g. `"./app/components/Button"`).
+   *
+   * Each entry is built as a self-contained ESM chunk served at
+   * `/_alabjs/remotes/<name>/<key>.js`.
+   */
+  exposes?: Record<string, string>;
+
+  /**
+   * Remote apps this app consumes.
+   *
+   * Key: remote app name (matches the remote's `federation.name`).
+   * Value: base URL where the remote app is hosted.
+   *
+   * AlabJS injects a `<script type="importmap">` into every page so that
+   * `import("RemoteName/ComponentName")` resolves to the remote's pre-built
+   * ESM chunk without any bundler runtime.
+   *
+   * @example { "RemoteApp": "https://remote.example.com" }
+   */
+  remotes?: Record<string, string>;
+
+  /**
+   * Extra bare-specifier packages to externalize from exposed modules and
+   * provide as shared singletons via the import map.
+   *
+   * `react`, `react/jsx-runtime`, `react-dom`, and `react-dom/client` are
+   * always shared automatically — you do not need to list them.
+   */
+  shared?: string[];
+}
+
+export interface AlabConfig {
+  federation?: FederationConfig;
+}
+
+// ─── defineConfig ─────────────────────────────────────────────────────────────
+
+/** Define your AlabJS configuration with full TypeScript type inference. */
+export function defineConfig(config: AlabConfig): AlabConfig {
+  return config;
+}
+
+// ─── loadUserConfig ───────────────────────────────────────────────────────────
+
+/**
+ * Load `alabjs.config.ts` (or `.js` / `.mjs`) from the given project root.
+ * Uses Vite's `loadConfigFromFile` so TypeScript configs are supported with
+ * zero extra dependencies. Returns `{}` if no config file is found.
+ */
+export async function loadUserConfig(cwd: string): Promise<AlabConfig> {
+  const candidates = [
+    "alabjs.config.ts",
+    "alabjs.config.js",
+    "alabjs.config.mjs",
+  ];
+
+  for (const name of candidates) {
+    const configPath = resolve(cwd, name);
+    if (!existsSync(configPath)) continue;
+
+    try {
+      const { loadConfigFromFile } = await import("vite");
+      const env: ConfigEnv = { command: "build", mode: "production" };
+      const result = await loadConfigFromFile(env, configPath, cwd);
+      return (result?.config as AlabConfig | undefined) ?? {};
+    } catch (err) {
+      console.warn(
+        `[alabjs] warning: failed to load ${name}: ${String(err)}`,
+      );
+    }
+    break; // only try the first match
+  }
+
+  return {};
+}
+
+// ─── buildImportMap ───────────────────────────────────────────────────────────
+
+/**
+ * Generate the `<script type="importmap">` JSON for a federation config.
+ *
+ * - **Production** (`dev = false`): React singleton is served from the host
+ *   app's own `/_alabjs/vendor/*.js` files (built by `alab build`).
+ *   This guarantees a single React instance across host and all remotes.
+ *
+ * - **Dev** (`dev = true`): Only remote scope mappings are emitted.
+ *   React is already provided by Vite's module graph — injecting a duplicate
+ *   entry would create a second instance and break hooks.
+ *
+ * Returns `null` when the config has no remotes (no import map needed).
+ */
+export function buildImportMap(
+  federation: FederationConfig,
+  dev = false,
+): string | null {
+  const { remotes = {}, shared = [] } = federation;
+
+  if (Object.keys(remotes).length === 0 && !dev) return null;
+  if (Object.keys(remotes).length === 0) return null;
+
+  const imports: Record<string, string> = {};
+
+  // Trailing-slash scope: `RemoteApp/Button` → `https://remote.example.com/_alabjs/remotes/RemoteApp/Button.js`
+  for (const [remoteName, baseUrl] of Object.entries(remotes)) {
+    imports[`${remoteName}/`] = `${baseUrl.replace(/\/$/, "")}/_alabjs/remotes/${remoteName}/`;
+  }
+
+  if (!dev) {
+    // Production: shared React singleton from locally-built vendor files.
+    imports["react"] = "/_alabjs/vendor/react.js";
+    imports["react/jsx-runtime"] = "/_alabjs/vendor/react-jsx-runtime.js";
+    imports["react-dom"] = "/_alabjs/vendor/react-dom.js";
+    imports["react-dom/client"] = "/_alabjs/vendor/react-dom-client.js";
+
+    // Extra shared packages declared by the user
+    for (const pkg of shared) {
+      if (!imports[pkg]) {
+        imports[pkg] = `/_alabjs/vendor/${pkg.replace(/\//g, "--")}.js`;
+      }
+    }
+  }
+
+  return JSON.stringify({ imports });
+}

package/src/index.ts

@@ -9,3 +9,5 @@ export type {
   CdnCache,
 } from "./types/index.js";
 export { createApp } from "./server/app.js";
+export { defineConfig } from "./config.js";
+export type { AlabConfig, FederationConfig } from "./config.js";

package/src/server/app.ts

@@ -1,7 +1,8 @@
 import { createApp as createH3App, createRouter, defineEventHandler, getQuery, readBody } from "h3";
 import { createServer } from "node:http";
 import { resolve, dirname, join, extname } from "node:path";
-import { existsSync, createReadStream, statSync, readFileSync } from "node:fs";
+import { existsSync, createReadStream, statSync, readFileSync, readdirSync } from "node:fs";
+import { createGzip, createBrotliCompress } from "node:zlib";
 import { toNodeListener } from "h3";
 import type { RouteManifest } from "../router/manifest.js";
 import { renderToResponse } from "../ssr/render.js";
@@ -15,21 +16,51 @@ import { checkRevalidateAuth, applyRevalidate } from "./revalidate.js";
 import { applyCdnHeaders, type CdnCache } from "./cdn.js";
 import { getPPRShell, injectBuildIdIntoPPRShell, PPR_CACHE_SUBDIR } from "../ssr/ppr.js";
 import { handleVitalsBeacon, handleAnalyticsDashboard } from "../analytics/handler.js";
+import { buildImportMap } from "../config.js";
+import type { FederationConfig } from "../config.js";
+
+/** Walk dist/server recursively and collect all *.server.js paths (compiled server functions). */
+function findDistServerFiles(distDir: string): string[] {
+  const serverDir = join(distDir, "server");
+  const results: string[] = [];
+  function walk(dir: string) {
+    try {
+      for (const entry of readdirSync(dir, { withFileTypes: true })) {
+        const fullPath = join(dir, entry.name);
+        if (entry.isDirectory()) {
+          walk(fullPath);
+        } else if (entry.isFile() && entry.name.endsWith(".server.js")) {
+          results.push(fullPath);
+        }
+      }
+    } catch { /* not readable */ }
+  }
+  walk(serverDir);
+  return results;
+}
 
 /**
  * Find layout file paths (relative to cwd root) for a given route.file, ordered outermost→innermost.
  * Checks the compiled dist directory for the existence of each layout.
  */
+/** Convert a TypeScript source path to its compiled .js equivalent. */
+function toJsPath(p: string): string {
+  return p.replace(/\.(tsx?)$/, ".js");
+}
+
 function findProdLayoutFiles(routeFile: string, distDir: string): string[] {
   // routeFile is like "app/users/[id]/page.tsx"
+  // Returns source paths (e.g. "app/layout.tsx") so the client bootstrap can look
+  // them up in LAYOUT_MODS by their original source key.  The import() call in
+  // app.ts uses toJsPath() to convert back to the compiled .js path.
   const pageDir = dirname(routeFile);
   const parts = pageDir.split("/");
   const layouts: string[] = [];
   for (let i = 1; i <= parts.length; i++) {
     const dir = parts.slice(0, i).join("/");
-    const layoutRelPath = `${dir}/layout.tsx`;
-    if (existsSync(join(distDir, "server", layoutRelPath))) {
-      layouts.push(layoutRelPath);
+    const compiledPath = `${dir}/layout.js`;
+    if (existsSync(join(distDir, "server", compiledPath))) {
+      layouts.push(`${dir}/layout.tsx`);
     }
   }
   return layouts;
@@ -41,7 +72,7 @@ function findProdLayoutFiles(routeFile: string, distDir: string): string[] {
 function findProdErrorFile(routeFile: string, distDir: string): string | null {
   let dir = dirname(routeFile);
   while (dir.length > 0 && dir !== ".") {
-    const candidate = `${dir}/error.tsx`;
+    const candidate = `${dir}/error.js`;
     if (existsSync(join(distDir, "server", candidate))) return candidate;
     const parent = dirname(dir);
     if (parent === dir) break;
@@ -53,8 +84,8 @@ function findProdErrorFile(routeFile: string, distDir: string): string | null {
 function findProdLoadingFile(routeFile: string, distDir: string): string | null {
   let dir = dirname(routeFile);
   while (dir.length > 0 && dir !== ".") {
-    const candidate = `${dir}/loading.tsx`;
-    if (existsSync(join(distDir, "server", candidate))) return candidate;
+    const compiled = `${dir}/loading.js`;
+    if (existsSync(join(distDir, "server", compiled))) return `${dir}/loading.tsx`;
     const parent = dirname(dir);
     if (parent === dir) break;
     dir = parent;
@@ -86,6 +117,32 @@ export function createApp(manifest: RouteManifest, distDir: string): AlabApp {
     buildId = readFileSync(resolve(distDir, "BUILD_ID"), "utf8").trim() || undefined;
   } catch { /* no BUILD_ID file — skew protection disabled */ }
 
+  // Resolve the compiled client entry file path by reading the Vite manifest.
+  // /@alabjs/client is a virtual module at build time; at runtime the server
+  // must redirect requests for it to the hashed asset file.
+  // The manifest key is a relative path ending in "@alabjs/client" (not "/@alabjs/client").
+  let clientEntryPath = "";
+  try {
+    const viteManifest = JSON.parse(
+      readFileSync(resolve(distDir, "client/.vite/manifest.json"), "utf8"),
+    ) as Record<string, { file?: string; isEntry?: boolean; src?: string }>;
+    const entry = Object.values(viteManifest).find(
+      (e) => e.isEntry && e.src?.endsWith("@alabjs/client"),
+    );
+    if (entry?.file) clientEntryPath = "/" + entry.file;
+  } catch { /* manifest absent — /@alabjs/client will 404 */ }
+
+  // Load federation config written by `alab build`. Used to:
+  //  1. Serve `/_alabjs/federation-manifest.json` (remote discovery)
+  //  2. Inject `<script type="importmap">` into every page (host → remote routing)
+  let federationConfig: FederationConfig | undefined;
+  let importMapJson: string | null = null;
+  try {
+    const fedJson = readFileSync(resolve(distDir, "federation-config.json"), "utf8");
+    federationConfig = JSON.parse(fedJson) as FederationConfig;
+    importMapJson = buildImportMap(federationConfig, /* dev= */ false);
+  } catch { /* no federation config — federation disabled */ }
+
   // Absolute path to the PPR shell cache directory.
   const pprCacheDir = resolve(distDir, "../../", PPR_CACHE_SUBDIR);
 
@@ -98,17 +155,49 @@ export function createApp(manifest: RouteManifest, distDir: string): AlabApp {
       res.setHeader("referrer-policy", "strict-origin-when-cross-origin");
       res.setHeader("permissions-policy", "camera=(), microphone=(), geolocation=()");
       res.setHeader("x-permitted-cross-domain-policies", "none");
+      // NOTE: 'unsafe-inline' is required by React's inline event delegation and
+      // Tailwind's runtime style injection. 'unsafe-eval' is required by some
+      // React dev-mode internals and dynamic import().
+      //
+      // ⚠️  Security implication: these directives weaken XSS protection.
+      // In production, override this header in your middleware with a nonce-based
+      // CSP: `script-src 'self' 'nonce-<random>'` and inject the same nonce into
+      // every <script> tag via renderToResponse's headExtra option. The CSRF
+      // double-submit pattern relies on XSS prevention — using 'unsafe-inline'
+      // without a nonce makes the CSRF token readable by injected scripts.
+      res.setHeader(
+        "content-security-policy",
+        [
+          "default-src 'self'",
+          "script-src 'self' 'unsafe-inline' 'unsafe-eval'",
+          "style-src 'self' 'unsafe-inline'",
+          "img-src 'self' data: blob: https:",
+          "font-src 'self' data: https:",
+          "connect-src 'self'",
+          "media-src 'self'",
+          "object-src 'none'",
+          "base-uri 'self'",
+          "form-action 'self'",
+          "frame-ancestors 'self'",
+        ].join("; "),
+      );
       // HSTS — only meaningful over HTTPS; set in production only.
       res.setHeader("strict-transport-security", "max-age=31536000; includeSubDomains");
     }),
   );
 
-  // ─── User middleware (middleware.ts compiled to dist/server/middleware.ts) ───
-  const middlewareModulePath = `${distDir}/server/middleware.ts`;
+  // ─── User middleware (middleware.ts compiled to dist/server/middleware.js) ───
+  const middlewareModulePath = `${distDir}/server/middleware.js`;
   if (existsSync(middlewareModulePath)) {
+    // Cache the module after first import — avoids redundant dynamic import()
+    // overhead on every request (each import() call re-resolves the module graph).
+    let _middlewareCache: MiddlewareModule | null = null;
     app.use(
       defineEventHandler(async (event) => {
-        const mod = await import(middlewareModulePath) as MiddlewareModule;
+        if (!_middlewareCache) {
+          _middlewareCache = await import(middlewareModulePath) as MiddlewareModule;
+        }
+        const mod = _middlewareCache;
         if (typeof mod.middleware !== "function") return;
         const req = event.node.req;
         const res = event.node.res;
@@ -162,7 +251,7 @@ export function createApp(manifest: RouteManifest, distDir: string): AlabApp {
   };
 
   app.use(
-    defineEventHandler((event) => {
+    defineEventHandler(async (event) => {
       const req = event.node.req;
       const res = event.node.res;
       if (req.method !== "GET" && req.method !== "HEAD") return;
@@ -173,25 +262,89 @@ export function createApp(manifest: RouteManifest, distDir: string): AlabApp {
       try { relPath = decodeURIComponent(rawPath); } catch { return; }
       if (relPath.includes("..")) return;
 
+      const acceptEncoding = (req.headers["accept-encoding"] ?? "") as string;
+      const useBrotli = acceptEncoding.includes("br");
+      const useGzip  = !useBrotli && acceptEncoding.includes("gzip");
+
+      // Virtual client entry — redirect to the hashed asset file resolved at startup.
+      // A 302 redirect (not direct serve) is critical: relative imports in the bundle
+      // (e.g. "./components-HASH.js") must resolve against the real asset URL
+      // (/assets/client-HASH.js), not the virtual path (/@alabjs/client).
+      if (relPath === "/@alabjs/client") {
+        if (clientEntryPath) {
+          res.writeHead(302, { Location: clientEntryPath });
+        } else {
+          res.statusCode = 404;
+        }
+        res.end();
+        return;
+      }
+
       const ext = extname(relPath).toLowerCase();
       const contentType = MIME_TYPES[ext];
       if (!contentType) return; // skip extensionless paths (page routes)
 
+      /** Stream a file with optional brotli/gzip compression and ETag 304 support.
+       *
+       * Returns a Promise that resolves when the response is fully sent. The
+       * h3 handler awaits this promise so h3 knows the response is complete
+       * before considering the next middleware. This avoids h3 passing the
+       * request to the router (which would 404) while the async pipe is running.
+       */
+      function serveFile(
+        filePath: string,
+        fileSize: number,
+        mtimeMs: number,
+        cacheControl: string,
+        mime: string,
+      ): Promise<void> {
+        // ETag from file size + mtime — both already known from the caller's stat().
+        const etag = `"${fileSize.toString(36)}-${mtimeMs.toString(36)}"`;
+        res.setHeader("etag", etag);
+        res.setHeader("vary", "Accept-Encoding");
+
+        if (req.headers["if-none-match"] === etag) {
+          res.statusCode = 304;
+          res.end();
+          return Promise.resolve();
+        }
+
+        res.setHeader("content-type", mime);
+        res.setHeader("cache-control", cacheControl);
+
+        if (req.method === "HEAD") { res.end(); return Promise.resolve(); }
+
+        return new Promise<void>((resolve, reject) => {
+          const fileStream = createReadStream(filePath);
+          res.on("finish", resolve);
+          res.on("error", reject);
+          if (useBrotli) {
+            res.setHeader("content-encoding", "br");
+            fileStream.pipe(createBrotliCompress()).pipe(res);
+          } else if (useGzip) {
+            res.setHeader("content-encoding", "gzip");
+            fileStream.pipe(createGzip()).pipe(res);
+          } else {
+            res.setHeader("content-length", fileSize);
+            fileStream.pipe(res);
+          }
+        });
+      }
+
       // 1. Built client assets (JS chunks, CSS, source maps)
       const clientCandidate = join(clientDir, relPath);
       if (existsSync(clientCandidate)) {
         const stat = statSync(clientCandidate);
         if (stat.isFile()) {
-          res.setHeader("content-type", contentType);
-          res.setHeader("content-length", stat.size);
-          // Immutable cache for hashed assets; short TTL for others
           const isHashed = /\.[a-f0-9]{8,}\.[a-z]+$/.test(relPath);
-          res.setHeader("cache-control", isHashed
-            ? "public, max-age=31536000, immutable"
-            : "public, max-age=3600");
-          if (req.method === "HEAD") { res.end(); return null; }
-          createReadStream(clientCandidate).pipe(res);
-          return null;
+          await serveFile(
+            clientCandidate,
+            stat.size,
+            stat.mtimeMs,
+            isHashed ? "public, max-age=31536000, immutable" : "public, max-age=3600",
+            contentType,
+          );
+          return;
         }
       }
 
@@ -200,20 +353,34 @@ export function createApp(manifest: RouteManifest, distDir: string): AlabApp {
       if (existsSync(publicCandidate)) {
         const stat = statSync(publicCandidate);
         if (stat.isFile()) {
-          res.setHeader("content-type", contentType);
-          res.setHeader("content-length", stat.size);
-          res.setHeader("cache-control", "public, max-age=3600");
-          if (req.method === "HEAD") { res.end(); return null; }
-          createReadStream(publicCandidate).pipe(res);
-          return null;
+          await serveFile(publicCandidate, stat.size, stat.mtimeMs, "public, max-age=3600", contentType);
+          return;
         }
       }
-      return undefined;
     }),
   );
 
   // ─── Built-in routes ────────────────────────────────────────────────────────
 
+  // Federation manifest — remote apps can advertise what they expose
+  router.get(
+    "/_alabjs/federation-manifest.json",
+    defineEventHandler((event) => {
+      const res = event.node.res;
+      res.setHeader("content-type", "application/json; charset=utf-8");
+      res.setHeader("access-control-allow-origin", "*");
+      res.setHeader("cache-control", "no-store");
+
+      const manifestPath = resolve(distDir, "client/_alabjs/federation-manifest.json");
+      if (!existsSync(manifestPath)) {
+        res.statusCode = 404;
+        return JSON.stringify({ error: "No federation exposes configured." });
+      }
+      res.statusCode = 200;
+      return readFileSync(manifestPath, "utf8");
+    }),
+  );
+
   // Rust-powered image optimisation — resize + JPEG encode via `alab-napi`
   router.get(
     "/_alabjs/image",
@@ -261,6 +428,87 @@ export function createApp(manifest: RouteManifest, distDir: string): AlabApp {
     }),
   );
 
+  // ─── Server function endpoints ──────────────────────────────────────────────
+  // GET  /_alabjs/data/:fn  — used by useServerData (query params as input)
+  // POST /_alabjs/fn/:fn    — used by useMutation (JSON body as input)
+  //
+  // Both scan all *.server.js files in dist/server for the named export.
+  // Module results are NOT cached — the module cache is Node's own require cache.
+
+  async function callServerFn(
+    fnName: string,
+    ctx: { params: Record<string, string>; query: Record<string, string>; headers: Record<string, string | string[] | undefined>; method: string; url: string },
+    input: unknown,
+    res: import("node:http").ServerResponse,
+  ): Promise<void> {
+    const serverFiles = findDistServerFiles(distDir);
+    for (const file of serverFiles) {
+      const mod = await import(file) as Record<string, unknown>;
+      if (typeof mod[fnName] === "function") {
+        try {
+          const result = await (mod[fnName] as (c: unknown, i: unknown) => Promise<unknown>)(ctx, input);
+          res.statusCode = 200;
+          res.setHeader("content-type", "application/json");
+          res.end(JSON.stringify(result));
+        } catch (err) {
+          const zodError = (err as Record<string, unknown>)?.["zodError"];
+          if (zodError) {
+            res.statusCode = 422;
+            res.setHeader("content-type", "application/json");
+            res.end(JSON.stringify({ zodError }));
+          } else {
+            const msg = err instanceof Error ? err.message : String(err);
+            console.error(`[alabjs] server fn "${fnName}" threw:`, err);
+            res.statusCode = 500;
+            res.setHeader("content-type", "application/json");
+            res.end(JSON.stringify({ error: msg }));
+          }
+        }
+        return;
+      }
+    }
+    res.statusCode = 404;
+    res.setHeader("content-type", "application/json");
+    res.end(JSON.stringify({ error: `[alabjs] server function not found: ${fnName}` }));
+  }
+
+  router.get(
+    "/_alabjs/data/:fn",
+    defineEventHandler(async (event) => {
+      const fnName = event.context.params?.["fn"] ?? "";
+      const req = event.node.req;
+      const url = new URL(req.url ?? "/", `http://${req.headers.host ?? "localhost"}`);
+      const query = Object.fromEntries(url.searchParams.entries());
+      const ctx = {
+        params: query,
+        query,
+        headers: req.headers as Record<string, string>,
+        method: "GET",
+        url: req.url ?? "/",
+      };
+      await callServerFn(fnName, ctx, Object.keys(query).length ? query : undefined, event.node.res);
+    }),
+  );
+
+  router.post(
+    "/_alabjs/fn/:fn",
+    defineEventHandler(async (event) => {
+      const fnName = event.context.params?.["fn"] ?? "";
+      const req = event.node.req;
+      const url = new URL(req.url ?? "/", `http://${req.headers.host ?? "localhost"}`);
+      const query = Object.fromEntries(url.searchParams.entries());
+      const body = await readBody(event);
+      const ctx = {
+        params: query,
+        query,
+        headers: req.headers as Record<string, string>,
+        method: "POST",
+        url: req.url ?? "/",
+      };
+      await callServerFn(fnName, ctx, body, event.node.res);
+    }),
+  );
+
   // Auto sitemap.xml from route manifest
   router.get(
     "/sitemap.xml",
@@ -280,7 +528,7 @@ export function createApp(manifest: RouteManifest, distDir: string): AlabApp {
     if (route.kind !== "api") continue;
 
     const h3ApiPath = route.path.replace(/\[([^\]]+)\]/g, ":$1");
-    const apiModulePath = `${distDir}/server/${route.file}`;
+    const apiModulePath = `${distDir}/server/${toJsPath(route.file)}`;
 
     for (const method of ["get", "post", "put", "patch", "delete", "head"] as const) {
       router[method](
@@ -369,11 +617,11 @@ export function createApp(manifest: RouteManifest, distDir: string): AlabApp {
         }
 
         // Dynamically import the compiled page module from the dist directory.
-        const pageModulePath = `${distDir}/server/${route.file}`;
+        const pageModulePath = `${distDir}/server/${toJsPath(route.file)}`;
         const mod = await import(pageModulePath) as {
           default?: unknown;
           metadata?: PageMetadata;
-          generateMetadata?: (params: Record<string, string>) => PageMetadata | Promise<PageMetadata>;
+          generateMetadata?: (props: { params: Record<string, string>; searchParams: Record<string, string> }) => PageMetadata | Promise<PageMetadata>;
           ssr?: boolean;
           cdnCache?: CdnCache;
           ppr?: boolean;
@@ -414,7 +662,7 @@ export function createApp(manifest: RouteManifest, distDir: string): AlabApp {
         // Support both static metadata and dynamic generateMetadata (production fix)
         const metadata: PageMetadata =
           typeof mod.generateMetadata === "function"
-            ? await mod.generateMetadata(params)
+            ? await mod.generateMetadata({ params, searchParams })
             : (mod.metadata ?? {});
 
         const ssrEnabled = mod.ssr === true;
@@ -422,7 +670,7 @@ export function createApp(manifest: RouteManifest, distDir: string): AlabApp {
         // ── Layouts ──────────────────────────────────────────────────────────
         const layoutRelPaths = findProdLayoutFiles(route.file, distDir);
         const layoutMods = await Promise.all(
-          layoutRelPaths.map((p) => import(`${distDir}/server/${p}`)),
+          layoutRelPaths.map((p) => import(`${distDir}/server/${toJsPath(p)}`)),
         );
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const layouts = layoutMods.map((m: any) => m.default).filter((c: unknown): c is any => typeof c === "function");
@@ -457,6 +705,7 @@ export function createApp(manifest: RouteManifest, distDir: string): AlabApp {
             ssr: ssrEnabled,
             headExtra,
             ...(buildId ? { buildId } : {}),
+            ...(importMapJson ? { importMapJson } : {}),
           });
         } catch (err) {
           // ── error.tsx fallback ────────────────────────────────────────────
@@ -464,7 +713,7 @@ export function createApp(manifest: RouteManifest, distDir: string): AlabApp {
           if (errorRelPath) {
             try {
               // eslint-disable-next-line @typescript-eslint/no-explicit-any
-              const errorMod = await import(`${distDir}/server/${errorRelPath}`) as any;
+              const errorMod = await import(`${distDir}/server/${toJsPath(errorRelPath)}`) as any;
               const ErrorPage = errorMod.default;
               if (typeof ErrorPage === "function") {
                 renderToResponse(res, {
@@ -475,6 +724,7 @@ export function createApp(manifest: RouteManifest, distDir: string): AlabApp {
                   routeFile: errorRelPath,
                   ssr: true,
                   headExtra,
+                  ...(importMapJson ? { importMapJson } : {}),
                 });
                 return;
               }
@@ -495,7 +745,7 @@ export function createApp(manifest: RouteManifest, distDir: string): AlabApp {
   app.use(router);
 
   // ─── 404 / not-found fallback ────────────────────────────────────────────────
-  const notFoundPath = `${distDir}/server/app/not-found.tsx`;
+  const notFoundPath = `${distDir}/server/app/not-found.js`;
   app.use(
     defineEventHandler(async (event) => {
       const res = event.node.res;
@@ -514,6 +764,7 @@ export function createApp(manifest: RouteManifest, distDir: string): AlabApp {
               metadata: { title: "404 — Not Found" },
               routeFile: "app/not-found.tsx",
               ssr: true,
+              ...(importMapJson ? { importMapJson } : {}),
             });
             return;
           }
@@ -530,8 +781,11 @@ export function createApp(manifest: RouteManifest, distDir: string): AlabApp {
 
   return {
     listen(port = 3000) {
+      // Make the server's base URL available to useServerData during SSR so it
+      // can construct an absolute URL for its internal loop-back fetch.
+      process.env["ALAB_ORIGIN"] = `http://127.0.0.1:${port}`;
       const server = createServer(toNodeListener(app));
-      server.listen(port, () => {
+      server.listen(port, "0.0.0.0", () => {
         console.log(`  alab  ready at http://localhost:${port}`);
       });
     },