@tschk/moonshine-compiler 0.3.4 → 0.3.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tschk/moonshine-compiler",
-  "version": "0.3.4",
+  "version": "0.3.7",
   "license": "ISC",
   "type": "module",
   "main": "./src/index.ts",
@@ -15,8 +15,8 @@
     "test": "bun test"
   },
   "dependencies": {
-    "@tschk/moonshine-framework": "^0.3.4",
-    "@tschk/moonshine-router": "^0.3.4"
+    "@tschk/moonshine-framework": "^0.3.6",
+    "@tschk/moonshine-router": "^0.3.6"
   },
   "devDependencies": {
     "@types/bun": "1.3.14",

package/src/build.ts

@@ -63,6 +63,30 @@ function generateServerEntry(
       : ""
   }`);
   }
+  // Layouts, middleware, and error boundaries are route dependencies the server
+  // renders through, so they belong in the bundle alongside the pages. Without
+  // them the renderer falls back to `await import(file)` on their SOURCE paths,
+  // which only resolves where the source tree sits next to the build output —
+  // never in a deployed image, and never on a runtime that cannot resolve a
+  // dynamic import at all. A page would render locally and 500 in production.
+  const supportFiles: string[] = [];
+  for (const route of routes) {
+    for (const file of [
+      ...(route.layouts ?? []),
+      ...(route.middleware ?? []),
+      ...(route.errorBoundary ? [route.errorBoundary] : []),
+    ]) {
+      if (file && !supportFiles.includes(file)) supportFiles.push(file);
+    }
+  }
+  for (let i = 0; i < supportFiles.length; i++) {
+    const file = supportFiles[i]!;
+    imports.push(`import * as support_${i} from "${importPath(buildDir, file)}";`);
+    // Registered unwrapped: these export a component or middleware, not a route
+    // module with loader/action semantics.
+    moduleBodys.push(`  "${toPosix(file)}": support_${i}`);
+  }
+
   return `${imports.join("\n")}\n\n${moduleHelpers.join("\n")}\n\nconst ${routes.map((_, i) => `module_${i} = makeModule_${i}(route_${i}, ${routes[i]!.dataFile ? `data_${i}` : "undefined"})`).join(";\nconst ")};\n\nexport const routes = {\n${bodies.join(",\n")}\n};\n\nexport const modules = {\n${moduleBodys.join(",\n")}\n};\n`;
 }
 
@@ -108,6 +132,19 @@ async function runBuild(
     naming: "[name].js",
     splitting: false,
     sourcemap: "none",
+    // Browsers have no `process`. Any dependency that reads `process.env.X` —
+    // and most of them do, behind a `typeof` guard or not — otherwise throws
+    // `ReferenceError: process is not defined` while the entry module is being
+    // evaluated. That happens before any render, so the app silently mounts
+    // nothing: no error boundary runs and the page is simply blank.
+    //
+    // `??=` so an app that injects real values ahead of this bundle keeps them;
+    // this only guarantees the property exists. Values are deliberately not
+    // inlined here — inlining the process environment into a browser bundle
+    // would ship every secret the build host happens to hold.
+    ...(target === "browser"
+      ? { banner: "globalThis.process ??= { env: {} };" }
+      : {}),
   });
   if (!result.success) {
     const messages = result.logs.map((log) => log.message).join("\n");

package/test/client-process-env.test.ts

@@ -0,0 +1,73 @@
+import { afterAll, describe, expect, test } from "bun:test";
+import { existsSync, rmSync } from "node:fs";
+import { join, resolve } from "node:path";
+import { buildProject } from "../src/manifest";
+
+/**
+ * A browser bundle must not carry a bare `process` reference into a page.
+ *
+ * Client code and its dependencies routinely read `process.env.X`. `process`
+ * does not exist in a browser, so the reference throws while the client entry
+ * module is still evaluating — before any component renders and before any
+ * error boundary can mount. The page stays blank and the console stays empty,
+ * which is close to undiagnosable from the outside.
+ */
+
+const projectDir = resolve(import.meta.dir, "fixtures", "project");
+const outDir = join(projectDir, ".moonshine");
+
+function clean() {
+  if (existsSync(outDir)) {
+    rmSync(outDir, { recursive: true, force: true });
+  }
+}
+
+afterAll(clean);
+
+describe("client bundle process shim", () => {
+  test("defines globalThis.process before any module code runs", async () => {
+    await buildProject({ projectDir });
+
+    const client = await Bun.file(join(outDir, "public", "client.js")).text();
+
+    expect(client.startsWith("globalThis.process ??= { env: {} };")).toBe(true);
+  });
+
+  test("evaluating the bundle does not throw on a process.env read", async () => {
+    await buildProject({ projectDir });
+
+    const client = await Bun.file(join(outDir, "public", "client.js")).text();
+    // The banner is the whole fix, so assert it actually guards a real read
+    // rather than trusting that the fixture still contains one.
+    expect(client).toContain("process.env");
+
+    // Evaluate the banner in isolation with no ambient `process`, which is what
+    // a browser gives the bundle.
+    const scope: Record<string, unknown> = {};
+    const run = new Function(
+      "globalThis",
+      "return (globalThis.process ??= { env: {} });",
+    );
+    expect(run(scope)).toEqual({ env: {} });
+  });
+
+  test("does not overwrite an environment injected ahead of the bundle", async () => {
+    // Apps prepend their own public values; `??=` must leave those intact.
+    const scope: Record<string, unknown> = { process: { env: { A: "1" } } };
+    const run = new Function(
+      "globalThis",
+      "return (globalThis.process ??= { env: {} });",
+    );
+    expect(run(scope)).toEqual({ env: { A: "1" } });
+  });
+
+  test("the server bundle is left alone", async () => {
+    await buildProject({ projectDir });
+
+    const server = await Bun.file(join(outDir, "dist", "server.js")).text();
+
+    // Bun and Node both have a real `process`; shimming it there would mask
+    // genuine environment problems at runtime.
+    expect(server.startsWith("globalThis.process ??=")).toBe(false);
+  });
+});

package/test/fixtures/project/src/routes/client.client.tsx

@@ -1,3 +1,8 @@
+// Reads process.env deliberately: browsers have no `process`, so this is the
+// shape that used to throw `ReferenceError: process is not defined` while the
+// client entry evaluated, leaving the page blank with no error boundary.
+const apiBase = process.env.MOONSHINE_TEST_API_BASE ?? 'unset';
+
 export default function ClientPage() {
-  return <h1>client</h1>;
+  return <h1>client {apiBase}</h1>;
 }

package/test/server-bundle-support-modules.test.ts

@@ -0,0 +1,68 @@
+import { afterAll, describe, expect, test } from "bun:test";
+import { existsSync, rmSync } from "node:fs";
+import { join, resolve } from "node:path";
+import { buildProject } from "../src/manifest";
+
+/**
+ * The server bundle must carry every module the server renders through, not
+ * just the page.
+ *
+ * A page's layout is loaded during server rendering. When it is missing from
+ * `modules`, the renderer falls back to `await import(file)` on the layout's
+ * SOURCE path. That resolves in a checkout, where the source sits beside the
+ * build output, and fails in a deployed image that ships only the build — so
+ * the route renders locally and returns 500 in production. It also fails
+ * outright on runtimes that cannot resolve a dynamic import.
+ */
+
+const projectDir = resolve(import.meta.dir, "fixtures", "project");
+const outDir = join(projectDir, ".moonshine");
+
+function clean() {
+  if (existsSync(outDir)) rmSync(outDir, { recursive: true, force: true });
+}
+
+afterAll(clean);
+
+describe("server bundle support modules", () => {
+  test("registers the layouts its routes render through", async () => {
+    const manifest = await buildProject({ projectDir });
+
+    const layouts = [
+      ...new Set(manifest.routes.flatMap((route) => route.layouts ?? [])),
+    ];
+    expect(layouts.length).toBeGreaterThan(0);
+
+    const { modules } = await import(join(outDir, "dist", "server.js"));
+    // The bundle keys modules by their build-time absolute path, while the
+    // manifest stores them relative to the project.
+    for (const layout of layouts) {
+      expect(Object.keys(modules)).toContain(join(projectDir, layout));
+    }
+  });
+
+  test("a registered layout is the real module, not a route wrapper", async () => {
+    const manifest = await buildProject({ projectDir });
+    const layout = join(
+      projectDir,
+      manifest.routes.flatMap((route) => route.layouts ?? [])[0]!,
+    );
+
+    const { modules } = await import(join(outDir, "dist", "server.js"));
+
+    // Layouts export a component; wrapping them in loader/action semantics
+    // would make the renderer read `default` off the wrong object.
+    expect(modules[layout]).toBeDefined();
+    expect(typeof modules[layout].default).toBe("function");
+  });
+
+  test("still registers pages by id and file", async () => {
+    const manifest = await buildProject({ projectDir });
+    const route = manifest.routes[0]!;
+
+    const { modules } = await import(join(outDir, "dist", "server.js"));
+
+    expect(modules[route.id]).toBeDefined();
+    expect(modules[join(projectDir, route.file)]).toBeDefined();
+  });
+});