@sigil-dev/grimoire 0.7.6 → 0.8.0

package/test/rendering.test.ts

@@ -1,425 +1,579 @@
-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>; }`,
+	);
+	// canMatch — layout blocks
+	await mkdir(join(tmpDir, "guarded"), { recursive: true });
+	await writeFile(
+		join(tmpDir, "guarded", "+layout.tsx"),
+		`export const canMatch = async () => false;
+         export default function L({ children }) { return <div innerHTML={children}></div>; }`,
+	);
+	await writeFile(
+		join(tmpDir, "guarded", "+page.tsx"),
+		`export default function P() { return <p>secret</p>; }`,
+	);
+
+	// canMatch — layout throws redirect
+	await mkdir(join(tmpDir, "guarded-redirect"), { recursive: true });
+	await writeFile(
+		join(tmpDir, "guarded-redirect", "+layout.tsx"),
+		`export const canMatch = async () => { throw { __redirect: true, status: 302, location: "/login" }; };
+         export default function L({ children }) { return <div innerHTML={children}></div>; }`,
+	);
+	await writeFile(
+		join(tmpDir, "guarded-redirect", "+page.tsx"),
+		`export default function P() { return <p>secret</p>; }`,
+	);
+
+	// canMatch — page blocks
+	await mkdir(join(tmpDir, "blocked"), { recursive: true });
+	await writeFile(
+		join(tmpDir, "blocked", "+page.tsx"),
+		`export const canMatch = async () => false;
+         export default function P() { return <p>secret</p>; }`,
+	);
+
+	// universal load — merge with server
+	await mkdir(join(tmpDir, "universal-merge"), { recursive: true });
+	await writeFile(
+		join(tmpDir, "universal-merge", "+page.server.ts"),
+		`export async function load() { return { b: "server" }; }`,
+	);
+	await writeFile(
+		join(tmpDir, "universal-merge", "+page.tsx"),
+		`export async function load() { return { a: "universal" }; }
+         export default function P({ data }) { return <p>{data.a}-{data.b}</p>; }`,
+	);
+
+	// universal load — server wins on conflict
+	await mkdir(join(tmpDir, "universal-conflict"), { recursive: true });
+	await writeFile(
+		join(tmpDir, "universal-conflict", "+page.server.ts"),
+		`export async function load() { return { val: "server" }; }`,
+	);
+	await writeFile(
+		join(tmpDir, "universal-conflict", "+page.tsx"),
+		`export async function load() { return { val: "universal" }; }
+         export default function P({ data }) { return <p class="val">{data.val}</p>; }`,
+	);
+
+	// universal load — layout load
+	await mkdir(join(tmpDir, "universal-layout"), { recursive: true });
+	await writeFile(
+		join(tmpDir, "universal-layout", "+layout.tsx"),
+		`export async function load() { return { user: "cane" }; }
+         export default function L({ data, children }) { return <div data-user={data.user} innerHTML={children}></div>; }`,
+	);
+	await writeFile(
+		join(tmpDir, "universal-layout", "+page.tsx"),
+		`export default function P() { return <p>page</p>; }`,
+	);
+});
+
+afterAll(async () => {
+	await rm(tmpDir, { recursive: true });
+});
+
+describe("canMatch", () => {
+	test("layout canMatch returning false returns 404", async () => {
+		const tree = await scanRoutes(tmpDir);
+		const matched = matchRoute(tree, new URL("http://localhost/guarded"));
+		const res = await renderRoute(
+			matched!,
+			new Request("http://localhost/guarded"),
+		);
+		expect(res.status).toBe(404);
+	});
+
+	test("layout canMatch throwing redirect returns 3xx", async () => {
+		const tree = await scanRoutes(tmpDir);
+		const matched = matchRoute(
+			tree,
+			new URL("http://localhost/guarded-redirect"),
+		);
+		const res = await renderRoute(
+			matched!,
+			new Request("http://localhost/guarded-redirect"),
+		);
+		expect(res.status).toBe(302);
+		expect(res.headers.get("Location")).toBe("/login");
+	});
+
+	test("page canMatch returning false returns 404", async () => {
+		const tree = await scanRoutes(tmpDir);
+		const matched = matchRoute(tree, new URL("http://localhost/blocked"));
+		const res = await renderRoute(
+			matched!,
+			new Request("http://localhost/blocked"),
+		);
+		expect(res.status).toBe(404);
+	});
+});
+
+describe("universal load", () => {
+	test("page load merges with server data", async () => {
+		const tree = await scanRoutes(tmpDir);
+		const matched = matchRoute(
+			tree,
+			new URL("http://localhost/universal-merge"),
+		);
+		const res = await renderRoute(
+			matched!,
+			new Request("http://localhost/universal-merge"),
+		);
+		const html = await readStream(res);
+		expect(html).toContain("universal");
+		expect(html).toContain("server");
+		expect(html).toContain('"a":"universal"');
+		expect(html).toContain('"b":"server"');
+	});
+
+	test("server data wins over universal data on key conflict", async () => {
+		const tree = await scanRoutes(tmpDir);
+		const matched = matchRoute(
+			tree,
+			new URL("http://localhost/universal-conflict"),
+		);
+		const res = await renderRoute(
+			matched!,
+			new Request("http://localhost/universal-conflict"),
+		);
+		const html = await readStream(res);
+		expect(html).toContain('"val":"server"');
+		expect(html).not.toContain('"val":"universal"');
+	});
+
+	test("layout load runs and data reaches layout component", async () => {
+		const tree = await scanRoutes(tmpDir);
+		const matched = matchRoute(
+			tree,
+			new URL("http://localhost/universal-layout"),
+		);
+		const res = await renderRoute(
+			matched!,
+			new Request("http://localhost/universal-layout"),
+		);
+		const html = await readStream(res);
+		expect(html).toContain('data-user="cane"');
+	});
+});
+
+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");
+	});
+});