fix: nested index route not working in prod builds (#3132)

This was due to a mismatch in the disk snapshot compared to in memory.

Author: marvinhagemeister

init/src/init.ts

@@ -379,6 +379,7 @@ app.fsRoutes();`;
     `import type { ComponentChildren } from "preact";
 
 export interface ButtonProps {
+  id?: string;
   onClick?: () => void;
   children?: ComponentChildren;
   disabled?: boolean;
@@ -472,9 +473,9 @@ interface CounterProps {
 export default function Counter(props: CounterProps) {
   return (
     <div class="flex gap-8 py-6">
-      <Button onClick={() => props.count.value -= 1}>-1</Button>
+      <Button id="decrement" onClick={() => props.count.value -= 1}>-1</Button>
       <p class="text-3xl tabular-nums">{props.count}</p>
-      <Button onClick={() => props.count.value += 1}>+1</Button>
+      <Button id="increment" onClick={() => props.count.value += 1}>+1</Button>
     </div>
   );
 }`;

init/src/init_test.ts

@@ -177,11 +177,11 @@ Deno.test("init - can start dev server", async () => {
   await patchProject(dir);
   await withChildProcessServer(
     dir,
-    "dev",
+    ["task", "dev"],
     async (address) => {
       await withBrowser(async (page) => {
         await page.goto(address);
-        await page.locator("button").click();
+        await page.locator("#decrement").click();
         await waitForText(page, "button + p", "2");
       });
     },
@@ -210,7 +210,7 @@ Deno.test("init - can start built project", async () => {
 
   await withChildProcessServer(
     dir,
-    "start",
+    ["task", "start"],
     async (address) => {
       await withBrowser(async (page) => {
         await page.goto(address);

src/dev/builder_test.ts

@@ -3,7 +3,8 @@ import * as path from "@std/path";
 import { Builder, specToName } from "./builder.ts";
 import { App } from "../app.ts";
 import { BUILD_ID } from "../runtime/build_id.ts";
-import { withTmpDir } from "../test_utils.ts";
+import { withTmpDir, writeFiles } from "../test_utils.ts";
+import { withChildProcessServer } from "../../tests/test_utils.tsx";
 
 Deno.test({
   name: "Builder - chain onTransformStaticFile",
@@ -241,6 +242,42 @@ Deno.test({
   sanitizeResources: false,
 });
 
+Deno.test({
+  name: "Builder - write prod routePattern",
+  fn: async () => {
+    const root = path.join(import.meta.dirname!, "..", "..");
+    await using _tmp = await withTmpDir({ dir: root, prefix: "tmp_builder_" });
+    const tmp = _tmp.dir;
+
+    await writeFiles(tmp, {
+      "routes/foo/index.ts": `export const handler = () => new Response("ok")`,
+      "main.ts": `import { App } from "fresh";
+export const app = new App().fsRoutes()`,
+    });
+
+    const builder = new Builder({
+      root: tmp,
+      outDir: path.join(tmp, "dist"),
+    });
+
+    await builder.build();
+
+    let text = "fail";
+    await withChildProcessServer(
+      tmp,
+      ["serve", "-A", "dist/server.js"],
+      async (address) => {
+        const res = await fetch(`${address}/foo`);
+        text = await res.text();
+      },
+    );
+
+    expect(text).toEqual("ok");
+  },
+  sanitizeOps: false,
+  sanitizeResources: false,
+});
+
 Deno.test("specToName", () => {
   // HTTP
   expect(specToName("http://example.com")).toEqual("example");

src/dev/dev_build_cache.ts

@@ -405,10 +405,10 @@ ${
           .map((item, i) => {
             const id = JSON.stringify(item.id);
             const pattern = JSON.stringify(item.pattern);
+            const type = JSON.stringify(item.type);
+            const routePattern = JSON.stringify(item.routePattern);
 
-            return `  { id: ${id}, mod: fsRoute_${i}, type: ${
-              JSON.stringify(item.type)
-            }, pattern: ${pattern} },`;
+            return `  { id: ${id}, mod: fsRoute_${i}, type: ${type}, pattern: ${pattern}, routePattern: ${routePattern} },`;
           })
           .join("\n")
       }

src/test_utils.ts

@@ -6,6 +6,7 @@ import type { WalkEntry } from "@std/fs/walk";
 import { DEFAULT_CONN_INFO } from "./app.ts";
 import type { Command } from "./commands.ts";
 import { fsItemsToCommands, type FsRouteFile } from "./fs_routes.ts";
+import * as path from "@std/path";
 
 const STUB = {} as unknown as Deno.ServeHandlerInfo;
 
@@ -159,3 +160,19 @@ export class MockBuildCache<State> implements BuildCache<State> {
     return Promise.resolve(null);
   }
 }
+
+export async function writeFiles(dir: string, files: Record<string, string>) {
+  const entries = Object.entries(files);
+  await Promise.all(entries.map(async (entry) => {
+    const [pathname, content] = entry;
+    const fullPath = path.join(dir, pathname);
+    try {
+      await Deno.mkdir(path.dirname(fullPath), { recursive: true });
+      await Deno.writeTextFile(fullPath, content);
+    } catch (err) {
+      if (!(err instanceof Deno.errors.AlreadyExists)) {
+        throw err;
+      }
+    }
+  }));
+}

tests/test_utils.tsx

@@ -97,12 +97,12 @@ export async function withBrowser(fn: (page: Page) => void | Promise<void>) {
 
 export async function withChildProcessServer(
   dir: string,
-  task: string,
+  args: string[],
   fn: (address: string) => void | Promise<void>,
 ) {
   const aborter = new AbortController();
   const cp = await new Deno.Command(Deno.execPath(), {
-    args: ["task", task],
+    args,
     stdin: "null",
     stdout: "piped",
     stderr: "piped",
@@ -137,6 +137,8 @@ export async function withChildProcessServer(
   }
 
   if (!found) {
+    // deno-lint-ignore no-console
+    console.log(output);
     throw new Error(`Could not find server address`);
   }
 

update/src/update_test.ts

@@ -8,23 +8,7 @@ import {
 import { expect } from "@std/expect";
 import { spy, type SpyCall } from "@std/testing/mock";
 import { walk } from "@std/fs/walk";
-import { withTmpDir } from "../../src/test_utils.ts";
-
-async function writeFiles(dir: string, files: Record<string, string>) {
-  const entries = Object.entries(files);
-  await Promise.all(entries.map(async (entry) => {
-    const [pathname, content] = entry;
-    const fullPath = path.join(dir, pathname);
-    try {
-      await Deno.mkdir(path.dirname(fullPath), { recursive: true });
-      await Deno.writeTextFile(fullPath, content);
-    } catch (err) {
-      if (!(err instanceof Deno.errors.AlreadyExists)) {
-        throw err;
-      }
-    }
-  }));
-}
+import { withTmpDir, writeFiles } from "../../src/test_utils.ts";
 
 async function readFiles(dir: string): Promise<Record<string, string>> {
   const files: Record<string, string> = {};