@sigil-dev/grimoire 0.7.5 → 0.7.6

package/test/rendering.test.ts

@@ -1,425 +1,425 @@
-import { afterAll, beforeAll, describe, expect, test } from "bun:test";
-import { mkdir, rm, writeFile } from "fs/promises";
-import { tmpdir as osTmpDir } from "os";
-import { join } from "path";
-import { renderRoute } from "../src/rendering";
-import { matchRoute } from "../src/routing/router";
-import { scanRoutes } from "../src/routing/scanner";
-
-/** Read a streaming Response body into a single string */
-async function readStream(res: Response): Promise<string> {
-    const reader = res.body!.getReader();
-    const parts: string[] = [];
-    while (true) {
-        const { done, value } = await reader.read();
-        if (done) break;
-        // Bun ReadableStream chunks can be string, Uint8Array, or other
-        parts.push(String(value));
-    }
-    return parts.join("");
-}
-
-let tmpDir: string;
-
-beforeAll(async () => {
-    tmpDir = join(osTmpDir(), `grimoire-render-${Date.now()}`);
-    await mkdir(join(tmpDir, "blog"), { recursive: true });
-
-    // simple static page
-    await writeFile(
-        join(tmpDir, "index.tsx"),
-        `
-        export default function Home() {
-            return <h1>Hello Grimoire</h1>;
-        }
-    `,
-    );
-
-    // page with load function
-    await writeFile(
-        join(tmpDir, "blog", "+page.server.ts"),
-        `
-        export async function load({ params }) {
-            return { title: 'My Blog' };
-        }
-    `,
-    );
-
-    await writeFile(
-        join(tmpDir, "blog", "+page.tsx"),
-        `
-        export default function Blog({ data }) {
-            return <h1>{data.title}</h1>;
-        }
-    `,
-    );
-
-    // layout
-    await writeFile(
-        join(tmpDir, "+layout.tsx"),
-        `
-        export default function Layout({ children }) {
-            return <div class="app" innerHTML={children}></div>;
-        }
-    `,
-    );
-
-    // root error page — renders status and message
-    await writeFile(
-        join(tmpDir, "+error.tsx"),
-        `
-        export default function ErrorPage({ status, message }) {
-            return <div class="error"><span class="status">{status}</span><span class="msg">{message}</span></div>;
-        }
-    `,
-    );
-
-    // page whose load throws redirect — use inline object so no grimoire import needed from /tmp
-    await mkdir(join(tmpDir, "redirect-page"), { recursive: true });
-    await writeFile(
-        join(tmpDir, "redirect-page", "+page.server.ts"),
-        `export async function load() { throw { __redirect: true, status: 302, location: "/login" }; }`,
-    );
-    await writeFile(
-        join(tmpDir, "redirect-page", "+page.tsx"),
-        `export default function P() { return <div>never</div>; }`,
-    );
-
-    // page whose load throws error — same pattern
-    await mkdir(join(tmpDir, "error-page"), { recursive: true });
-    await writeFile(
-        join(tmpDir, "error-page", "+page.server.ts"),
-        `export async function load() { throw { __error: true, status: 404, message: "Not found" }; }`,
-    );
-    await writeFile(
-        join(tmpDir, "error-page", "+page.tsx"),
-        `export default function P() { return <div>never</div>; }`,
-    );
-
-    // page whose load returns locals.tag (tests locals passthrough)
-    await mkdir(join(tmpDir, "locals-test"), { recursive: true });
-    await writeFile(
-        join(tmpDir, "locals-test", "+page.server.ts"),
-        `
-        export async function load({ locals }) { return { tag: locals.tag ?? "none" }; }
-    `,
-    );
-    await writeFile(
-        join(tmpDir, "locals-test", "+page.tsx"),
-        `export default function P({ data }) { return <div class="tag">{data.tag}</div>; }`,
-    );
-
-    // layout.server test — nested layout with server data
-    await mkdir(join(tmpDir, "dashboard"), { recursive: true });
-    await writeFile(
-        join(tmpDir, "dashboard", "+layout.server.ts"),
-        `export async function load() { return { user: "admin" }; }`,
-    );
-    await writeFile(
-        join(tmpDir, "dashboard", "+layout.tsx"),
-        `export default function DashLayout({ data, children }) {
-            return <div class="dash" data-user={data.user} innerHTML={children}></div>;
-        }`,
-    );
-    await writeFile(
-        join(tmpDir, "dashboard", "index.tsx"),
-        `export default function Dash() { return <p>dash content</p>; }`,
-    );
-
-    await mkdir(join(tmpDir, "section", "nested"), { recursive: true });
-    await writeFile(
-        join(tmpDir, "section", "+layout.tsx"),
-        `export default function SectionLayout({ children }) {
-    return <div class="section" innerHTML={children}></div>;
-  }`,
-    );
-    await writeFile(
-        join(tmpDir, "section", "nested", "+page.tsx"),
-        `export default function NestedPage() { return <p class="nested-content">nested</p>; }`,
-    );
-
-    // triple nesting — root + section + deep
-    await mkdir(join(tmpDir, "section", "deep", "page"), { recursive: true });
-    await writeFile(
-        join(tmpDir, "section", "deep", "+layout.tsx"),
-        `export default function DeepLayout({ children }) {
-    return <div class="deep" innerHTML={children}></div>;
-  }`,
-    );
-    await writeFile(
-        join(tmpDir, "section", "deep", "page", "+page.tsx"),
-        `export default function DeepPage() { return <p class="deep-content">deep</p>; }`,
-    );
-});
-
-afterAll(async () => {
-    await rm(tmpDir, { recursive: true });
-});
-
-describe("renderRoute", () => {
-    test("nested layouts stack from root to innermost", async () => {
-        const tree = await scanRoutes(tmpDir);
-        const matched = matchRoute(tree, new URL("http://localhost/section/nested"));
-        const res = await renderRoute(
-            matched!,
-            new Request("http://localhost/section/nested"),
-        );
-        const html = await readStream(res);
-
-        // root layout wraps section layout wraps page
-        expect(html).toContain('class="app"');       // root layout
-        expect(html).toContain('class="section"');   // section layout
-        expect(html).toContain('class="nested-content"'); // page
-
-        // root must appear before section in the output
-        const rootIdx = html.indexOf('class="app"');
-        const sectionIdx = html.indexOf('class="section"');
-        const pageIdx = html.indexOf('class="nested-content"');
-        expect(rootIdx).toBeLessThan(sectionIdx);
-        expect(sectionIdx).toBeLessThan(pageIdx);
-    });
-
-    test("triple nested layouts render in correct order", async () => {
-        const tree = await scanRoutes(tmpDir);
-        const matched = matchRoute(
-            tree,
-            new URL("http://localhost/section/deep/page"),
-        );
-        const res = await renderRoute(
-            matched!,
-            new Request("http://localhost/section/deep/page"),
-        );
-        const html = await readStream(res);
-
-        expect(html).toContain('class="app"');          // root
-        expect(html).toContain('class="section"');      // section
-        expect(html).toContain('class="deep"');         // deep
-        expect(html).toContain('class="deep-content"'); // page
-
-        const rootIdx = html.indexOf('class="app"');
-        const sectionIdx = html.indexOf('class="section"');
-        const deepIdx = html.indexOf('class="deep"');
-        const pageIdx = html.indexOf('class="deep-content"');
-        expect(rootIdx).toBeLessThan(sectionIdx);
-        expect(sectionIdx).toBeLessThan(deepIdx);
-        expect(deepIdx).toBeLessThan(pageIdx);
-    });
-
-    test("page with no ancestor section layout only gets root layout", async () => {
-        const tree = await scanRoutes(tmpDir);
-        const matched = matchRoute(tree, new URL("http://localhost/blog"));
-        const res = await renderRoute(
-            matched!,
-            new Request("http://localhost/blog"),
-        );
-        const html = await readStream(res);
-
-        expect(html).toContain('class="app"');     // root layout
-        expect(html).not.toContain('class="section"'); // no section layout
-        expect(html).not.toContain('class="dash"');    // no dashboard layout
-    });
-
-    test("layout.server.ts data reaches the correct layout in a nested chain", async () => {
-        const tree = await scanRoutes(tmpDir);
-        const matched = matchRoute(tree, new URL("http://localhost/dashboard"));
-        const res = await renderRoute(
-            matched!,
-            new Request("http://localhost/dashboard"),
-        );
-        const html = await readStream(res);
-
-        // root layout wraps dashboard layout
-        expect(html).toContain('class="app"');
-        expect(html).toContain('class="dash"');
-        expect(html).toContain('data-user="admin"');
-
-        const rootIdx = html.indexOf('class="app"');
-        const dashIdx = html.indexOf('class="dash"');
-        expect(rootIdx).toBeLessThan(dashIdx);
-    });
-
-    test("renders static page", async () => {
-        const tree = await scanRoutes(tmpDir);
-        const matched = matchRoute(tree, new URL("http://localhost/"));
-        const res = await renderRoute(matched!, new Request("http://localhost/"));
-        const html = await readStream(res);
-        expect(html).toContain("<h1>Hello Grimoire</h1>");
-        expect(html).toContain("<!DOCTYPE html>");
-    });
-
-    test("renders page with load data", async () => {
-        const tree = await scanRoutes(tmpDir);
-        const matched = matchRoute(tree, new URL("http://localhost/blog"));
-        console.log("matched.route.type:", matched?.route.type);
-        console.log("matched.pageServer:", matched?.pageServer?.filePath);
-        const res = await renderRoute(
-            matched!,
-            new Request("http://localhost/blog"),
-        );
-        const html = await readStream(res);
-        expect(html).toContain("<!--g-->My Blog<!--/g-->");
-    });
-
-    test("wraps page in layout", async () => {
-        const tree = await scanRoutes(tmpDir);
-        const matched = matchRoute(tree, new URL("http://localhost/"));
-        const res = await renderRoute(matched!, new Request("http://localhost/"));
-        const html = await readStream(res);
-        expect(html).toContain('class="app"');
-        expect(html).toContain("<h1>Hello Grimoire</h1>");
-    });
-
-    test("returns 404 shape for unmatched route", async () => {
-        const tree = await scanRoutes(tmpDir);
-        const matched = matchRoute(tree, new URL("http://localhost/nonexistent"));
-        expect(matched).toBeNull();
-    });
-
-    test("injects grimoire state script", async () => {
-        const tree = await scanRoutes(tmpDir);
-        const matched = matchRoute(tree, new URL("http://localhost/"));
-        const res = await renderRoute(matched!, new Request("http://localhost/"));
-        const html = await readStream(res);
-        expect(html).toContain("__grimoire_state__");
-    });
-
-    test("component output is not escaped", async () => {
-        await writeFile(
-            join(tmpDir, "inner.tsx"),
-            `
-            export default function Inner() {
-                return <strong>bold</strong>;
-            }
-        `,
-        );
-        await writeFile(
-            join(tmpDir, "outer.tsx"),
-            `
-            import Inner from './inner';
-            export default function Outer() {
-                return <div><Inner /></div>;
-            }
-        `,
-        );
-
-        const tree = await scanRoutes(tmpDir);
-        const matched = matchRoute(tree, new URL("http://localhost/outer"));
-        const res = await renderRoute(
-            matched!,
-            new Request("http://localhost/outer"),
-        );
-        const html = await readStream(res);
-
-        // should contain actual HTML tags, not escaped versions
-        expect(html).toContain("<strong>bold</strong>");
-        expect(html).not.toContain("&lt;strong&gt;");
-    });
-
-    test("user data is escaped", async () => {
-        await writeFile(
-            join(tmpDir, "xss.tsx"),
-            `
-            export default function XSS() {
-                const userInput = '<script>alert("xss")</script>';
-                return <div>{userInput}</div>;
-            }
-        `,
-        );
-
-        const tree = await scanRoutes(tmpDir);
-        const matched = matchRoute(tree, new URL("http://localhost/xss"));
-        const res = await renderRoute(
-            matched!,
-            new Request("http://localhost/xss"),
-        );
-        const html = await readStream(res);
-
-        expect(html).toContain("&lt;script&gt;");
-        expect(html).not.toContain("<script>alert");
-    });
-
-    test("load return value is passed as the data prop (SvelteKit convention)", async () => {
-        const tree = await scanRoutes(tmpDir);
-        const matched = matchRoute(tree, new URL("http://localhost/blog"));
-        const res = await renderRoute(
-            matched!,
-            new Request("http://localhost/blog"),
-        );
-        const html = await readStream(res);
-        // blog/+page.server.ts returns { title: "My Blog" }
-        // blog/+page.tsx receives { data: { title: "My Blog" } } — not spread
-        expect(html).toContain("My Blog");
-        // the state JSON embeds data under the data key
-        const stateJson = JSON.parse(
-            html.match(/<script[^>]*>([^<]+)<\/script>/)?.[1] ?? "{}",
-        );
-        expect(stateJson.data?.title).toBe("My Blog");
-        expect(html).not.toContain("[object Object]");
-    });
-
-    test("redirect() from load returns 3xx with Location header", async () => {
-        const tree = await scanRoutes(tmpDir);
-        const matched = matchRoute(tree, new URL("http://localhost/redirect-page"));
-        const res = await renderRoute(
-            matched!,
-            new Request("http://localhost/redirect-page"),
-        );
-        expect(res.status).toBe(302);
-        expect(res.headers.get("Location")).toBe("/login");
-    });
-
-    test("error() from load renders +error.tsx when present", async () => {
-        const tree = await scanRoutes(tmpDir);
-        const matched = matchRoute(tree, new URL("http://localhost/error-page"));
-        const res = await renderRoute(
-            matched!,
-            new Request("http://localhost/error-page"),
-            tree.errors,
-        );
-        expect(res.status).toBe(404);
-        const html = await res.text();
-        expect(html).toContain('class="error"');
-        expect(html).toContain("404");
-        expect(html).toContain("Not found");
-    });
-
-    test("error() from load falls back to plain text when no error routes provided", async () => {
-        const tree = await scanRoutes(tmpDir);
-        const matched = matchRoute(tree, new URL("http://localhost/error-page"));
-        const res = await renderRoute(
-            matched!,
-            new Request("http://localhost/error-page"),
-            [], // no error routes
-        );
-        expect(res.status).toBe(404);
-        const text = await res.text();
-        expect(text).toBe("Not found");
-    });
-
-    test("locals passed to renderRoute are visible inside load()", async () => {
-        const tree = await scanRoutes(tmpDir);
-        const matched = matchRoute(tree, new URL("http://localhost/locals-test"));
-        const res = await renderRoute(
-            matched!,
-            new Request("http://localhost/locals-test"),
-            [],
-            undefined,
-            { tag: "from-hook" },
-        );
-        const html = await readStream(res);
-        expect(html).toContain("from-hook");
-    });
-
-    test("+layout.server.ts load data is passed to the layout component", async () => {
-        const tree = await scanRoutes(tmpDir);
-        const matched = matchRoute(tree, new URL("http://localhost/dashboard"));
-        const res = await renderRoute(
-            matched!,
-            new Request("http://localhost/dashboard"),
-        );
-        const html = await readStream(res);
-        expect(html).toContain('class="dash"');
-        expect(html).toContain('data-user="admin"');
-        expect(html).toContain("dash content");
-    });
-});
+import { afterAll, beforeAll, describe, expect, test } from "bun:test";
+import { mkdir, rm, writeFile } from "fs/promises";
+import { tmpdir as osTmpDir } from "os";
+import { join } from "path";
+import { renderRoute } from "../src/rendering";
+import { matchRoute } from "../src/routing/router";
+import { scanRoutes } from "../src/routing/scanner";
+
+/** Read a streaming Response body into a single string */
+async function readStream(res: Response): Promise<string> {
+    const reader = res.body!.getReader();
+    const parts: string[] = [];
+    while (true) {
+        const { done, value } = await reader.read();
+        if (done) break;
+        // Bun ReadableStream chunks can be string, Uint8Array, or other
+        parts.push(String(value));
+    }
+    return parts.join("");
+}
+
+let tmpDir: string;
+
+beforeAll(async () => {
+    tmpDir = join(osTmpDir(), `grimoire-render-${Date.now()}`);
+    await mkdir(join(tmpDir, "blog"), { recursive: true });
+
+    // simple static page
+    await writeFile(
+        join(tmpDir, "index.tsx"),
+        `
+        export default function Home() {
+            return <h1>Hello Grimoire</h1>;
+        }
+    `,
+    );
+
+    // page with load function
+    await writeFile(
+        join(tmpDir, "blog", "+page.server.ts"),
+        `
+        export async function load({ params }) {
+            return { title: 'My Blog' };
+        }
+    `,
+    );
+
+    await writeFile(
+        join(tmpDir, "blog", "+page.tsx"),
+        `
+        export default function Blog({ data }) {
+            return <h1>{data.title}</h1>;
+        }
+    `,
+    );
+
+    // layout
+    await writeFile(
+        join(tmpDir, "+layout.tsx"),
+        `
+        export default function Layout({ children }) {
+            return <div class="app" innerHTML={children}></div>;
+        }
+    `,
+    );
+
+    // root error page — renders status and message
+    await writeFile(
+        join(tmpDir, "+error.tsx"),
+        `
+        export default function ErrorPage({ status, message }) {
+            return <div class="error"><span class="status">{status}</span><span class="msg">{message}</span></div>;
+        }
+    `,
+    );
+
+    // page whose load throws redirect — use inline object so no grimoire import needed from /tmp
+    await mkdir(join(tmpDir, "redirect-page"), { recursive: true });
+    await writeFile(
+        join(tmpDir, "redirect-page", "+page.server.ts"),
+        `export async function load() { throw { __redirect: true, status: 302, location: "/login" }; }`,
+    );
+    await writeFile(
+        join(tmpDir, "redirect-page", "+page.tsx"),
+        `export default function P() { return <div>never</div>; }`,
+    );
+
+    // page whose load throws error — same pattern
+    await mkdir(join(tmpDir, "error-page"), { recursive: true });
+    await writeFile(
+        join(tmpDir, "error-page", "+page.server.ts"),
+        `export async function load() { throw { __error: true, status: 404, message: "Not found" }; }`,
+    );
+    await writeFile(
+        join(tmpDir, "error-page", "+page.tsx"),
+        `export default function P() { return <div>never</div>; }`,
+    );
+
+    // page whose load returns locals.tag (tests locals passthrough)
+    await mkdir(join(tmpDir, "locals-test"), { recursive: true });
+    await writeFile(
+        join(tmpDir, "locals-test", "+page.server.ts"),
+        `
+        export async function load({ locals }) { return { tag: locals.tag ?? "none" }; }
+    `,
+    );
+    await writeFile(
+        join(tmpDir, "locals-test", "+page.tsx"),
+        `export default function P({ data }) { return <div class="tag">{data.tag}</div>; }`,
+    );
+
+    // layout.server test — nested layout with server data
+    await mkdir(join(tmpDir, "dashboard"), { recursive: true });
+    await writeFile(
+        join(tmpDir, "dashboard", "+layout.server.ts"),
+        `export async function load() { return { user: "admin" }; }`,
+    );
+    await writeFile(
+        join(tmpDir, "dashboard", "+layout.tsx"),
+        `export default function DashLayout({ data, children }) {
+            return <div class="dash" data-user={data.user} innerHTML={children}></div>;
+        }`,
+    );
+    await writeFile(
+        join(tmpDir, "dashboard", "index.tsx"),
+        `export default function Dash() { return <p>dash content</p>; }`,
+    );
+
+    await mkdir(join(tmpDir, "section", "nested"), { recursive: true });
+    await writeFile(
+        join(tmpDir, "section", "+layout.tsx"),
+        `export default function SectionLayout({ children }) {
+    return <div class="section" innerHTML={children}></div>;
+  }`,
+    );
+    await writeFile(
+        join(tmpDir, "section", "nested", "+page.tsx"),
+        `export default function NestedPage() { return <p class="nested-content">nested</p>; }`,
+    );
+
+    // triple nesting — root + section + deep
+    await mkdir(join(tmpDir, "section", "deep", "page"), { recursive: true });
+    await writeFile(
+        join(tmpDir, "section", "deep", "+layout.tsx"),
+        `export default function DeepLayout({ children }) {
+    return <div class="deep" innerHTML={children}></div>;
+  }`,
+    );
+    await writeFile(
+        join(tmpDir, "section", "deep", "page", "+page.tsx"),
+        `export default function DeepPage() { return <p class="deep-content">deep</p>; }`,
+    );
+});
+
+afterAll(async () => {
+    await rm(tmpDir, { recursive: true });
+});
+
+describe("renderRoute", () => {
+    test("nested layouts stack from root to innermost", async () => {
+        const tree = await scanRoutes(tmpDir);
+        const matched = matchRoute(tree, new URL("http://localhost/section/nested"));
+        const res = await renderRoute(
+            matched!,
+            new Request("http://localhost/section/nested"),
+        );
+        const html = await readStream(res);
+
+        // root layout wraps section layout wraps page
+        expect(html).toContain('class="app"');       // root layout
+        expect(html).toContain('class="section"');   // section layout
+        expect(html).toContain('class="nested-content"'); // page
+
+        // root must appear before section in the output
+        const rootIdx = html.indexOf('class="app"');
+        const sectionIdx = html.indexOf('class="section"');
+        const pageIdx = html.indexOf('class="nested-content"');
+        expect(rootIdx).toBeLessThan(sectionIdx);
+        expect(sectionIdx).toBeLessThan(pageIdx);
+    });
+
+    test("triple nested layouts render in correct order", async () => {
+        const tree = await scanRoutes(tmpDir);
+        const matched = matchRoute(
+            tree,
+            new URL("http://localhost/section/deep/page"),
+        );
+        const res = await renderRoute(
+            matched!,
+            new Request("http://localhost/section/deep/page"),
+        );
+        const html = await readStream(res);
+
+        expect(html).toContain('class="app"');          // root
+        expect(html).toContain('class="section"');      // section
+        expect(html).toContain('class="deep"');         // deep
+        expect(html).toContain('class="deep-content"'); // page
+
+        const rootIdx = html.indexOf('class="app"');
+        const sectionIdx = html.indexOf('class="section"');
+        const deepIdx = html.indexOf('class="deep"');
+        const pageIdx = html.indexOf('class="deep-content"');
+        expect(rootIdx).toBeLessThan(sectionIdx);
+        expect(sectionIdx).toBeLessThan(deepIdx);
+        expect(deepIdx).toBeLessThan(pageIdx);
+    });
+
+    test("page with no ancestor section layout only gets root layout", async () => {
+        const tree = await scanRoutes(tmpDir);
+        const matched = matchRoute(tree, new URL("http://localhost/blog"));
+        const res = await renderRoute(
+            matched!,
+            new Request("http://localhost/blog"),
+        );
+        const html = await readStream(res);
+
+        expect(html).toContain('class="app"');     // root layout
+        expect(html).not.toContain('class="section"'); // no section layout
+        expect(html).not.toContain('class="dash"');    // no dashboard layout
+    });
+
+    test("layout.server.ts data reaches the correct layout in a nested chain", async () => {
+        const tree = await scanRoutes(tmpDir);
+        const matched = matchRoute(tree, new URL("http://localhost/dashboard"));
+        const res = await renderRoute(
+            matched!,
+            new Request("http://localhost/dashboard"),
+        );
+        const html = await readStream(res);
+
+        // root layout wraps dashboard layout
+        expect(html).toContain('class="app"');
+        expect(html).toContain('class="dash"');
+        expect(html).toContain('data-user="admin"');
+
+        const rootIdx = html.indexOf('class="app"');
+        const dashIdx = html.indexOf('class="dash"');
+        expect(rootIdx).toBeLessThan(dashIdx);
+    });
+
+    test("renders static page", async () => {
+        const tree = await scanRoutes(tmpDir);
+        const matched = matchRoute(tree, new URL("http://localhost/"));
+        const res = await renderRoute(matched!, new Request("http://localhost/"));
+        const html = await readStream(res);
+        expect(html).toContain("<h1>Hello Grimoire</h1>");
+        expect(html).toContain("<!DOCTYPE html>");
+    });
+
+    test("renders page with load data", async () => {
+        const tree = await scanRoutes(tmpDir);
+        const matched = matchRoute(tree, new URL("http://localhost/blog"));
+        console.log("matched.route.type:", matched?.route.type);
+        console.log("matched.pageServer:", matched?.pageServer?.filePath);
+        const res = await renderRoute(
+            matched!,
+            new Request("http://localhost/blog"),
+        );
+        const html = await readStream(res);
+        expect(html).toContain("<!--g-->My Blog<!--/g-->");
+    });
+
+    test("wraps page in layout", async () => {
+        const tree = await scanRoutes(tmpDir);
+        const matched = matchRoute(tree, new URL("http://localhost/"));
+        const res = await renderRoute(matched!, new Request("http://localhost/"));
+        const html = await readStream(res);
+        expect(html).toContain('class="app"');
+        expect(html).toContain("<h1>Hello Grimoire</h1>");
+    });
+
+    test("returns 404 shape for unmatched route", async () => {
+        const tree = await scanRoutes(tmpDir);
+        const matched = matchRoute(tree, new URL("http://localhost/nonexistent"));
+        expect(matched).toBeNull();
+    });
+
+    test("injects grimoire state script", async () => {
+        const tree = await scanRoutes(tmpDir);
+        const matched = matchRoute(tree, new URL("http://localhost/"));
+        const res = await renderRoute(matched!, new Request("http://localhost/"));
+        const html = await readStream(res);
+        expect(html).toContain("__grimoire_state__");
+    });
+
+    test("component output is not escaped", async () => {
+        await writeFile(
+            join(tmpDir, "inner.tsx"),
+            `
+            export default function Inner() {
+                return <strong>bold</strong>;
+            }
+        `,
+        );
+        await writeFile(
+            join(tmpDir, "outer.tsx"),
+            `
+            import Inner from './inner';
+            export default function Outer() {
+                return <div><Inner /></div>;
+            }
+        `,
+        );
+
+        const tree = await scanRoutes(tmpDir);
+        const matched = matchRoute(tree, new URL("http://localhost/outer"));
+        const res = await renderRoute(
+            matched!,
+            new Request("http://localhost/outer"),
+        );
+        const html = await readStream(res);
+
+        // should contain actual HTML tags, not escaped versions
+        expect(html).toContain("<strong>bold</strong>");
+        expect(html).not.toContain("&lt;strong&gt;");
+    });
+
+    test("user data is escaped", async () => {
+        await writeFile(
+            join(tmpDir, "xss.tsx"),
+            `
+            export default function XSS() {
+                const userInput = '<script>alert("xss")</script>';
+                return <div>{userInput}</div>;
+            }
+        `,
+        );
+
+        const tree = await scanRoutes(tmpDir);
+        const matched = matchRoute(tree, new URL("http://localhost/xss"));
+        const res = await renderRoute(
+            matched!,
+            new Request("http://localhost/xss"),
+        );
+        const html = await readStream(res);
+
+        expect(html).toContain("&lt;script&gt;");
+        expect(html).not.toContain("<script>alert");
+    });
+
+    test("load return value is passed as the data prop (SvelteKit convention)", async () => {
+        const tree = await scanRoutes(tmpDir);
+        const matched = matchRoute(tree, new URL("http://localhost/blog"));
+        const res = await renderRoute(
+            matched!,
+            new Request("http://localhost/blog"),
+        );
+        const html = await readStream(res);
+        // blog/+page.server.ts returns { title: "My Blog" }
+        // blog/+page.tsx receives { data: { title: "My Blog" } } — not spread
+        expect(html).toContain("My Blog");
+        // the state JSON embeds data under the data key
+        const stateJson = JSON.parse(
+            html.match(/<script[^>]*>([^<]+)<\/script>/)?.[1] ?? "{}",
+        );
+        expect(stateJson.data?.title).toBe("My Blog");
+        expect(html).not.toContain("[object Object]");
+    });
+
+    test("redirect() from load returns 3xx with Location header", async () => {
+        const tree = await scanRoutes(tmpDir);
+        const matched = matchRoute(tree, new URL("http://localhost/redirect-page"));
+        const res = await renderRoute(
+            matched!,
+            new Request("http://localhost/redirect-page"),
+        );
+        expect(res.status).toBe(302);
+        expect(res.headers.get("Location")).toBe("/login");
+    });
+
+    test("error() from load renders +error.tsx when present", async () => {
+        const tree = await scanRoutes(tmpDir);
+        const matched = matchRoute(tree, new URL("http://localhost/error-page"));
+        const res = await renderRoute(
+            matched!,
+            new Request("http://localhost/error-page"),
+            tree.errors,
+        );
+        expect(res.status).toBe(404);
+        const html = await res.text();
+        expect(html).toContain('class="error"');
+        expect(html).toContain("404");
+        expect(html).toContain("Not found");
+    });
+
+    test("error() from load falls back to plain text when no error routes provided", async () => {
+        const tree = await scanRoutes(tmpDir);
+        const matched = matchRoute(tree, new URL("http://localhost/error-page"));
+        const res = await renderRoute(
+            matched!,
+            new Request("http://localhost/error-page"),
+            [], // no error routes
+        );
+        expect(res.status).toBe(404);
+        const text = await res.text();
+        expect(text).toBe("Not found");
+    });
+
+    test("locals passed to renderRoute are visible inside load()", async () => {
+        const tree = await scanRoutes(tmpDir);
+        const matched = matchRoute(tree, new URL("http://localhost/locals-test"));
+        const res = await renderRoute(
+            matched!,
+            new Request("http://localhost/locals-test"),
+            [],
+            undefined,
+            { tag: "from-hook" },
+        );
+        const html = await readStream(res);
+        expect(html).toContain("from-hook");
+    });
+
+    test("+layout.server.ts load data is passed to the layout component", async () => {
+        const tree = await scanRoutes(tmpDir);
+        const matched = matchRoute(tree, new URL("http://localhost/dashboard"));
+        const res = await renderRoute(
+            matched!,
+            new Request("http://localhost/dashboard"),
+        );
+        const html = await readStream(res);
+        expect(html).toContain('class="dash"');
+        expect(html).toContain('data-user="admin"');
+        expect(html).toContain("dash content");
+    });
+});