@sigil-dev/grimoire 0.3.0

package/test/hydration.test.ts

@@ -0,0 +1,119 @@
+import { Window } from "happy-dom";
+
+// set up DOM globals before tests
+const window = new Window();
+const document = window.document;
+
+// @ts-expect-error
+globalThis.document = document;
+// @ts-expect-error
+globalThis.window = window;
+// @ts-expect-error
+globalThis.HTMLElement = window.HTMLElement;
+// @ts-expect-error
+globalThis.Event = window.Event;
+// @ts-expect-error
+globalThis.MouseEvent = window.MouseEvent;
+// @ts-expect-error
+globalThis.SyntaxError = SyntaxError;
+
+import { beforeEach, describe, expect, test } from "bun:test";
+
+// mock routes - simulates what #grimoire-routes generates
+const mockRoutes: Record<string, (props: any) => any> = {
+	"/spells/:id": (props: any) => {
+		return { params: props.params };
+	},
+};
+
+// simulate hydrate logic (same as hydrate.ts but without the import)
+function runHydrate(routes: Record<string, (props: any) => any>) {
+	const stateEl = document.getElementById("__grimoire_state__");
+	if (stateEl) {
+		const state = JSON.parse(stateEl.textContent!);
+		const Page = routes[state.pattern];
+		if (Page) {
+			Page({ ...state.data, params: state.params });
+		}
+	}
+}
+
+// simulate initRouter (same logic as client-router.ts)
+let clickHandlerAttached = false;
+function initRouter(routes: Record<string, (props: any) => any>) {
+	document.addEventListener("click", () => {});
+	clickHandlerAttached = true;
+}
+
+describe("hydration", () => {
+	beforeEach(() => {
+		clickHandlerAttached = false;
+		document.body.innerHTML = `
+            <div id="app">
+                <div id="grimoire-page">
+                    <div class="spell-detail">
+                        <h1>Fireball</h1>
+                    </div>
+                </div>
+            </div>
+            <script id="__grimoire_state__" type="application/json">
+                ${JSON.stringify({ params: { id: "fireball" }, data: {}, pattern: "/spells/:id" })}
+            </script>
+        `;
+	});
+
+	// 1. hydrate claims existing DOM, doesn't create new nodes
+	test("hydrate claims existing h1 instead of creating new one", () => {
+		const before = document.getElementById("app")!.innerHTML;
+		runHydrate(mockRoutes);
+		// DOM unchanged - hydrate only reads state, doesn't write
+		expect(document.getElementById("app")!.innerHTML).toBe(before);
+	});
+
+	// 2. router attaches after hydration
+	test("initRouter attaches click handler", () => {
+		initRouter(mockRoutes);
+		expect(clickHandlerAttached).toBe(true);
+	});
+
+	// 3. state script is readable
+	test("grimoire state is parseable", () => {
+		const el = document.getElementById("__grimoire_state__");
+		const state = JSON.parse(el!.textContent!);
+		expect(state.pattern).toBe("/spells/:id");
+		expect(state.params).toEqual({ id: "fireball" });
+	});
+
+	// 4. hydrate doesn't touch DOM structure
+	test("hydrate preserves DOM structure", () => {
+		const before = document.body.innerHTML;
+		runHydrate(mockRoutes);
+		expect(document.body.innerHTML).toBe(before);
+	});
+
+	// 5. hydrate with missing pattern is safe
+	test("hydrate with unknown pattern does not throw", () => {
+		const el = document.getElementById("__grimoire_state__");
+		const state = JSON.parse(el!.textContent!);
+		state.pattern = "/nonexistent";
+		el!.textContent = JSON.stringify(state);
+
+		expect(() => runHydrate(mockRoutes)).not.toThrow();
+	});
+
+	// 6. hydrate passes data and params correctly
+	test("hydrate passes data and params to page component", () => {
+		let receivedProps: any = null;
+		const testRoutes: Record<string, (props: any) => any> = {
+			"/spells/:id": (props: any) => {
+				receivedProps = props;
+				return null;
+			},
+		};
+
+		runHydrate(testRoutes);
+		expect(receivedProps).toEqual({
+			params: { id: "fireball" },
+		});
+	});
+});

package/test/middleware.test.ts

@@ -0,0 +1,217 @@
+import { describe, expect, test } from "bun:test";
+import { sequence, createHooks } from "../src/hooks";
+import { createCookies } from "../src/cookie-utils";
+import type { Handle, RequestEvent } from "../src/hooks";
+
+function fakeEvent(overrides?: Partial<RequestEvent>): RequestEvent {
+	return {
+		request: new Request("http://localhost/"),
+		url: new URL("http://localhost/"),
+		params: {},
+		locals: {},
+		cookies: {
+			get: () => undefined,
+			set: () => {},
+			delete: () => {},
+		},
+		setHeaders: () => {},
+		...overrides,
+	};
+}
+
+describe("sequence()", () => {
+	test("chains two handlers in order", async () => {
+		const order: string[] = [];
+
+		const a: Handle = async ({ event, resolve }) => {
+			order.push("a-before");
+			const res = await resolve(event);
+			order.push("a-after");
+			return res;
+		};
+
+		const b: Handle = async ({ event, resolve }) => {
+			order.push("b-before");
+			const res = await resolve(event);
+			order.push("b-after");
+			return res;
+		};
+
+		const handler = sequence(a, b);
+		const res = await handler({
+			event: fakeEvent(),
+			resolve: async (evt) => new Response("OK"),
+		});
+
+		expect(order).toEqual(["a-before", "b-before", "b-after", "a-after"]);
+		expect(await res.text()).toBe("OK");
+	});
+
+	test("can short-circuit", async () => {
+		let reached = false;
+
+		const a: Handle = async () => {
+			return new Response("Blocked", { status: 403 });
+		};
+
+		const b: Handle = async ({ resolve, event }) => {
+			reached = true;
+			return resolve(event);
+		};
+
+		const handler = sequence(a, b);
+		const res = await handler({
+			event: fakeEvent(),
+			resolve: async () => new Response("OK"),
+		});
+
+		expect(reached).toBe(false);
+		expect(res.status).toBe(403);
+	});
+
+	test("can modify event.locals", async () => {
+		const a: Handle = async ({ event, resolve }) => {
+			event.locals.user = "alice";
+			return resolve(event);
+		};
+
+		const b: Handle = async ({ event, resolve }) => {
+			event.locals.greet = `hello ${event.locals.user}`;
+			return resolve(event);
+		};
+
+		const handler = sequence(a, b);
+		const event = fakeEvent();
+		await handler({
+			event,
+			resolve: async (evt) => {
+				return new Response(JSON.stringify(evt.locals));
+			},
+		});
+
+		expect(event.locals.user).toBe("alice");
+		expect(event.locals.greet).toBe("hello alice");
+	});
+
+	test("can modify response", async () => {
+		const a: Handle = async ({ event, resolve }) => {
+			const res = await resolve(event);
+			const headers = new Headers(res.headers);
+			headers.set("X-First", "1");
+			return new Response(res.body, { status: res.status, headers });
+		};
+
+		const b: Handle = async ({ event, resolve }) => {
+			const res = await resolve(event);
+			const headers = new Headers(res.headers);
+			headers.set("X-Second", "2");
+			return new Response(res.body, { status: res.status, headers });
+		};
+
+		const handler = sequence(a, b);
+		const res = await handler({
+			event: fakeEvent(),
+			resolve: async () => new Response("OK"),
+		});
+
+		expect(res.headers.get("X-First")).toBe("1");
+		expect(res.headers.get("X-Second")).toBe("2");
+	});
+
+	test("single handler works", async () => {
+		const handler: Handle = async ({ event, resolve }) => {
+			return resolve(event);
+		};
+
+		const res = await sequence(handler)({
+			event: fakeEvent(),
+			resolve: async () => new Response("Single"),
+		});
+
+		expect(await res.text()).toBe("Single");
+	});
+
+	test("three handlers chain correctly", async () => {
+		const order: string[] = [];
+
+		const a: Handle = async ({ event, resolve }) => {
+			order.push("a");
+			return resolve(event);
+		};
+		const b: Handle = async ({ event, resolve }) => {
+			order.push("b");
+			return resolve(event);
+		};
+		const c: Handle = async ({ event, resolve }) => {
+			order.push("c");
+			return resolve(event);
+		};
+
+		await sequence(a, b, c)({
+			event: fakeEvent(),
+			resolve: async () => new Response("OK"),
+		});
+
+		expect(order).toEqual(["a", "b", "c"]);
+	});
+});
+
+describe("Cookies", () => {
+	function makeEvent(cookieHeader = ""): RequestEvent {
+		return fakeEvent({
+			cookies: createCookies(cookieHeader),
+		});
+	}
+
+	test("cookies.get reads from header", async () => {
+		let value: string | undefined;
+		const handler: Handle = async ({ event, resolve }) => {
+			value = event.cookies.get("session");
+			return resolve(event);
+		};
+
+		await handler({
+			event: makeEvent("session=abc123; theme=dark"),
+			resolve: async () => new Response("OK"),
+		});
+
+		expect(value).toBe("abc123");
+	});
+
+	test("cookies.set adds Set-Cookie header", async () => {
+		const event = makeEvent();
+		const handler: Handle = async ({ event: evt, resolve }) => {
+			evt.cookies.set("token", "xyz", { httpOnly: true, path: "/" });
+			return resolve(evt);
+		};
+
+		await handler({
+			event,
+			resolve: async () => new Response("OK"),
+		});
+
+		expect(event.cookies.get("token")).toBe("xyz");
+		const cookieUtils = event.cookies as ReturnType<typeof createCookies>;
+		expect(cookieUtils.toHeaders().length).toBe(1);
+		expect(cookieUtils.toHeaders()[0]).toContain("token=xyz");
+		expect(cookieUtils.toHeaders()[0]).toContain("HttpOnly");
+		expect(cookieUtils.toHeaders()[0]).toContain("Path=/");
+	});
+});
+
+describe("createHooks()", () => {
+	test("returns handle and init", async () => {
+		const handle: Handle = async ({ resolve, event }) => resolve(event);
+		const init = () => {};
+		const hooks = createHooks(handle, init);
+		expect(hooks.handle).toBe(handle);
+		expect(hooks.init).toBe(init);
+	});
+
+	test("returns handle without init", () => {
+		const handle: Handle = async ({ resolve, event }) => resolve(event);
+		const hooks = createHooks(handle);
+		expect(hooks.handle).toBe(handle);
+		expect(hooks.init).toBeUndefined();
+	});
+});

package/test/preload.ts

@@ -0,0 +1,5 @@
+import { sigil } from "@sigil-dev/compiler/bun";
+import { registerSSRPlugin } from "../src/ssrPlugin";
+
+registerSSRPlugin();
+Bun.plugin(sigil({ mode: "ssr" }));

package/test/redirect-error.test.ts

@@ -0,0 +1,112 @@
+import { describe, expect, test } from "bun:test";
+import { redirect, isRedirectResult } from "../src/redirect";
+import { error, isErrorResult } from "../src/error";
+
+describe("redirect()", () => {
+	test("throws a RedirectResult", () => {
+		try {
+			redirect(302, "/login");
+			expect(true).toBe(false); // should not reach
+		} catch (e) {
+			expect(isRedirectResult(e)).toBe(true);
+			expect(e.status).toBe(302);
+			expect(e.location).toBe("/login");
+		}
+	});
+
+	test("isRedirectResult returns false for plain objects", () => {
+		expect(isRedirectResult({ status: 302, location: "/login" })).toBe(false);
+		expect(isRedirectResult(null)).toBe(false);
+		expect(isRedirectResult(undefined)).toBe(false);
+	});
+
+	test("works with different status codes", () => {
+		try {
+			redirect(301, "/old");
+		} catch (e) {
+			expect(e.status).toBe(301);
+			expect(e.location).toBe("/old");
+		}
+		try {
+			redirect(303, "/other");
+		} catch (e) {
+			expect(e.status).toBe(303);
+			expect(e.location).toBe("/other");
+		}
+		try {
+			redirect(307, "/temp");
+		} catch (e) {
+			expect(e.status).toBe(307);
+			expect(e.location).toBe("/temp");
+		}
+	});
+});
+
+describe("error()", () => {
+	test("throws an ErrorResult with status and message", () => {
+		try {
+			error(404, "Not found");
+			expect(true).toBe(false);
+		} catch (e) {
+			expect(isErrorResult(e)).toBe(true);
+			expect(e.status).toBe(404);
+			expect(e.message).toBe("Not found");
+		}
+	});
+
+	test("isErrorResult returns false for plain objects", () => {
+		expect(isErrorResult({ status: 404, message: "Not found" })).toBe(false);
+		expect(isErrorResult(null)).toBe(false);
+	});
+
+	test("works with different status codes", () => {
+		try {
+			error(401, "Unauthorized");
+		} catch (e) {
+			expect(e.status).toBe(401);
+			expect(e.message).toBe("Unauthorized");
+		}
+		try {
+			error(500, "Internal Server Error");
+		} catch (e) {
+			expect(e.status).toBe(500);
+			expect(e.message).toBe("Internal Server Error");
+		}
+	});
+});
+
+describe("redirect and error together", () => {
+	test("can be caught in sequence", async () => {
+		let caught = 0;
+
+		try {
+			redirect(302, "/login");
+		} catch (e) {
+			if (isRedirectResult(e)) caught++;
+		}
+
+		try {
+			error(404, "Not found");
+		} catch (e) {
+			if (isErrorResult(e)) caught++;
+		}
+
+		expect(caught).toBe(2);
+	});
+
+	test("redirect and error are distinguishable", () => {
+		try {
+			redirect(302, "/login");
+		} catch (e) {
+			expect(isRedirectResult(e)).toBe(true);
+			expect(isErrorResult(e)).toBe(false);
+		}
+
+		try {
+			error(404, "Not found");
+		} catch (e) {
+			expect(isErrorResult(e)).toBe(true);
+			expect(isRedirectResult(e)).toBe(false);
+		}
+	});
+});

package/test/rendering.test.ts

@@ -0,0 +1,172 @@
+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/renderer";
+import { matchRoute } from "../src/router";
+import { scanRoutes } from "../src/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({ title }) {
+            return <h1>{title}</h1>;
+        }
+    `,
+	);
+
+	// layout
+	await writeFile(
+		join(tmpDir, "+layout.tsx"),
+		`
+        export default function Layout({ children }) {
+            return <div class="app" innerHTML={children}></div>;
+        }
+    `,
+	);
+});
+
+afterAll(async () => {
+	await rm(tmpDir, { recursive: true });
+});
+
+describe("renderRoute", () => {
+	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");
+	});
+});

package/test/routing.test.ts

@@ -0,0 +1,45 @@
+import { describe, expect, test } from "bun:test";
+import { matchRoute } from "../src/router";
+import type { RouteFile, RouteTree } from "../src/scanner";
+
+const makeRoute = (path: string, type: RouteFile["type"]): RouteFile => ({
+	path,
+	filePath: `/app/routes${path}`,
+	type,
+	paramNames: path
+		.split("/")
+		.filter((p) => p.startsWith(":"))
+		.map((p) => p.slice(1)),
+});
+
+const tree: RouteTree = {
+	routes: [
+		makeRoute("/", "page"),
+		makeRoute("/about", "simple"),
+		makeRoute("/blog", "page"),
+		makeRoute("/blog/:slug", "page"),
+		makeRoute("/blog/:slug", "pageServer"),
+	],
+	layouts: [makeRoute("/", "layout"), makeRoute("/blog", "layout")],
+	servers: [makeRoute("/api/todos", "server")],
+	errors: [],
+};
+
+describe("matchRoute", () => {
+	test("matches static route", () => {
+		const match = matchRoute(tree, new URL("http://localhost/about"));
+		expect(match?.route.path).toBe("/about");
+		expect(match?.params).toEqual({});
+	});
+
+	test("matches dynamic route and extracts params", () => {
+		const match = matchRoute(tree, new URL("http://localhost/blog/hello"));
+		expect(match?.route.path).toBe("/blog/:slug");
+		expect(match?.params).toEqual({ slug: "hello" });
+	});
+
+	test("returns null for unknown route", () => {
+		const match = matchRoute(tree, new URL("http://localhost/unknown"));
+		expect(match).toBeNull();
+	});
+});