@sigil-dev/grimoire 0.3.0

package/test/scanning.test.ts

@@ -0,0 +1,55 @@
+import { describe, expect, test } from "bun:test";
+import { filePathToRoutePath } from "../src/scanner";
+
+describe("File scanning", () => {
+	test("index.tsx → /", () => {
+		expect(filePathToRoutePath("/app/routes/index.tsx", "/app/routes")).toEqual(
+			{ pattern: "/", params: [] },
+		);
+	});
+
+	test("about.tsx → /about", () => {
+		expect(filePathToRoutePath("/app/routes/about.tsx", "/app/routes")).toEqual(
+			{ pattern: "/about", params: [] },
+		);
+	});
+
+	test("[slug].tsx → /:slug", () => {
+		expect(
+			filePathToRoutePath("/app/routes/[slug].tsx", "/app/routes"),
+		).toEqual({ pattern: "/:slug", params: ["slug"] });
+	});
+
+	test("blog/+page.tsx → /blog", () => {
+		expect(
+			filePathToRoutePath("/app/routes/blog/+page.tsx", "/app/routes"),
+		).toEqual({ pattern: "/blog", params: [] });
+	});
+
+	test("blog/[slug]/+page.tsx → /blog/:slug", () => {
+		expect(
+			filePathToRoutePath("/app/routes/blog/[slug]/+page.tsx", "/app/routes"),
+		).toEqual({ pattern: "/blog/:slug", params: ["slug"] });
+	});
+
+	test("blog/[slug]/+page.server.ts → /blog/:slug", () => {
+		expect(
+			filePathToRoutePath(
+				"/app/routes/blog/[slug]/+page.server.ts",
+				"/app/routes",
+			),
+		).toEqual({ pattern: "/blog/:slug", params: ["slug"] });
+	});
+
+	test("+layout.tsx → /", () => {
+		expect(
+			filePathToRoutePath("/app/routes/+layout.tsx", "/app/routes"),
+		).toEqual({ pattern: "/", params: [] });
+	});
+
+	test("nested +layout.tsx → /blog", () => {
+		expect(
+			filePathToRoutePath("/app/routes/blog/+layout.tsx", "/app/routes"),
+		).toEqual({ pattern: "/blog", params: [] });
+	});
+});

package/test/scope.test.ts

@@ -0,0 +1,164 @@
+/**
+ * Tests for the effect-scope mechanism used by the router to prevent effect
+ * accumulation across client-side navigations.
+ *
+ * Two invariants must hold forever:
+ *   1. Effects created during a page mount stop running when the page is disposed.
+ *   2. __nodes is reset to [] before each SPA navigation so the new page gets
+ *      a fresh empty pool instead of recycling stale DOM nodes.
+ */
+import { describe, expect, test } from "bun:test";
+import { createEffect, createSignal, withEffectScope as runtimeScope } from "@sigil-dev/runtime";
+import { withEffectScope } from "../src/scope.ts";
+
+describe("grimoire withEffectScope", () => {
+	test("effects inside scope stop after dispose", () => {
+		const count = createSignal(0);
+		let runs = 0;
+		const dispose = withEffectScope(() => {
+			createEffect(() => {
+				count();
+				runs++;
+			});
+		});
+
+		count.set(1);
+		expect(runs).toBe(2); // initial + one update
+
+		dispose();
+
+		count.set(2);
+		expect(runs).toBe(2); // stopped — dispose cut the subscription
+	});
+
+	test("simulates two page navigations — only latest page's effects run", () => {
+		const count = createSignal(0);
+		let pageARuns = 0;
+		let pageBRuns = 0;
+
+		// Mount page A
+		let disposeCurrentPage = withEffectScope(() => {
+			createEffect(() => { count(); pageARuns++; });
+		});
+		count.set(1);
+		expect(pageARuns).toBe(2);
+		expect(pageBRuns).toBe(0);
+
+		// Navigate to page B — dispose A first
+		disposeCurrentPage();
+		disposeCurrentPage = withEffectScope(() => {
+			createEffect(() => { count(); pageBRuns++; });
+		});
+
+		count.set(2);
+		expect(pageARuns).toBe(2); // A's effect is gone
+		expect(pageBRuns).toBe(2); // B initial + update
+
+		// Navigate away from B — dispose B
+		disposeCurrentPage();
+		count.set(3);
+		expect(pageARuns).toBe(2);
+		expect(pageBRuns).toBe(2); // B's effect is gone too
+	});
+
+	test("three navigations: each page's effects are independent", () => {
+		const signal = createSignal("a");
+		const log: string[] = [];
+
+		const mountPage = (label: string) =>
+			withEffectScope(() => {
+				createEffect(() => {
+					log.push(`${label}:${signal()}`);
+				});
+			});
+
+		const disposeA = mountPage("A");
+		const disposeB = mountPage("B");
+
+		signal.set("b");
+		expect(log).toEqual(["A:a", "B:a", "A:b", "B:b"]);
+
+		disposeA();
+		signal.set("c");
+		expect(log).toEqual(["A:a", "B:a", "A:b", "B:b", "B:c"]); // only B ran
+
+		disposeB();
+		signal.set("d");
+		expect(log).toEqual(["A:a", "B:a", "A:b", "B:b", "B:c"]); // neither ran
+	});
+
+	test("grimoire scope uses same globalThis channel as runtime scope", () => {
+		// Both must route through the same global so that createEffect
+		// in page components (compiled by sigil, imports @sigil-dev/runtime)
+		// is captured by grimoire's router scope.
+		const count = createSignal(0);
+		let runs = 0;
+
+		// grimoire's local withEffectScope wraps a createEffect from @sigil-dev/runtime
+		const dispose = withEffectScope(() => {
+			createEffect(() => { count(); runs++; });
+		});
+
+		count.set(1);
+		expect(runs).toBe(2);
+
+		dispose();
+		count.set(2);
+		expect(runs).toBe(2); // runtime's createEffect was captured by grimoire's scope ✓
+	});
+
+	test("runtime's withEffectScope and grimoire's are interchangeable", () => {
+		// The runtime exports its own withEffectScope for user code.
+		// Both implementations must work the same way via the globalThis channel.
+		const count = createSignal(0);
+		let runs = 0;
+
+		const dispose = runtimeScope(() => {
+			createEffect(() => { count(); runs++; });
+		});
+
+		count.set(1);
+		expect(runs).toBe(2);
+		dispose();
+		count.set(2);
+		expect(runs).toBe(2);
+	});
+});
+
+describe("__nodes pool reset on SPA navigation", () => {
+	test("navigate sets __nodes to [] before calling Page()", () => {
+		// Simulate exactly what client-router.ts's navigate() does:
+		//   dispose old effects → set __nodes = [] → call Page() → replaceChildren(node)
+		// We only care that Page() sees an empty pool.
+		let nodesAtCallTime: unknown = "not set";
+
+		const mockPage = () => {
+			nodesAtCallTime = (globalThis as any).__nodes;
+			return document.createElement("div"); // satisfy replaceChildren
+		};
+
+		// Mimic the three lines in navigate() that matter
+		;(globalThis as any).__nodes = ["stale", "dom", "nodes"]; // leftover from previous page
+		(globalThis as any).__nodes = []; // the reset
+		mockPage();
+
+		expect(nodesAtCallTime).toEqual([]);
+	});
+
+	test("Page() called during SSR hydration sees real DOM nodes, not empty pool", () => {
+		// Contrast: hydrate.ts sets __nodes to Array.from(slot.childNodes) before calling Page()
+		const fakeSlotChild = document.createElement("div");
+		let nodesAtCallTime: unknown = "not set";
+
+		const mockPage = () => {
+			nodesAtCallTime = (globalThis as any).__nodes;
+		};
+
+		;(globalThis as any).__nodes = [fakeSlotChild]; // hydrate.ts sets real nodes
+		mockPage();
+
+		expect(Array.isArray(nodesAtCallTime)).toBe(true);
+		expect((nodesAtCallTime as unknown[]).length).toBe(1);
+		expect((nodesAtCallTime as unknown[])[0]).toBe(fakeSlotChild);
+	});
+});

package/test/server.test.ts

@@ -0,0 +1,30 @@
+import { afterAll, beforeAll, describe, expect, test } from "bun:test";
+import { mkdir, writeFile } from "fs/promises"; // ← promises not fs
+import { tmpdir } from "os";
+import { join } from "path";
+import { createServer } from "../src/server";
+
+let tmpDir: string;
+
+beforeAll(async () => {
+	tmpDir = join(tmpdir(), `grimoire-server-${Date.now()}`);
+	await mkdir(join(tmpDir, "api", "hello"), { recursive: true });
+	await writeFile(
+		join(tmpDir, "api", "hello", "+server.ts"),
+		`
+        export async function GET({ request }) {
+            return Response.json({ message: 'hello' });
+        }
+    `,
+	);
+});
+
+describe("Server", () => {
+	test("serves GET api route", async () => {
+		const server = await createServer({ port: 3004, routes: tmpDir });
+		const res = await fetch("http://localhost:3004/api/hello");
+		const data = await res.json();
+		expect(data.message).toBe("hello");
+		server.stop();
+	});
+});

package/test/streaming.test.ts

@@ -0,0 +1,132 @@
+import { describe, expect, test } from "bun:test";
+import { renderRoute } from "../src/renderer";
+
+describe("Streaming SSR", () => {
+	test("returns a ReadableStream response", async () => {
+		const matched = {
+			route: {
+				path: "/",
+				params: {},
+				filePath: "data:text/javascript,export default (p) => '<div>hello</div>'",
+			},
+			params: {},
+		} as any;
+
+		const res = await renderRoute(matched, new Request("http://localhost/"));
+		expect(res.body).toBeInstanceOf(ReadableStream);
+	});
+
+	test("stream contains full HTML document", async () => {
+		const matched = {
+			route: {
+				path: "/test",
+				params: {},
+				filePath:
+					"data:text/javascript,export default (p) => '<p>streaming works</p>'",
+			},
+			params: {},
+		} as any;
+
+		const res = await renderRoute(matched, new Request("http://localhost/test"));
+		const html = await res.text();
+
+		expect(html).toContain("<!DOCTYPE html>");
+		expect(html).toContain('<meta charset="UTF-8" />');
+		expect(html).toContain("streaming works");
+		expect(html).toContain("</html>");
+		expect(html).toContain("__grimoire_state__");
+	});
+
+	test("stream includes state JSON with route pattern", async () => {
+		const matched = {
+			route: {
+				path: "/spells/:id",
+				params: {},
+				filePath:
+					"data:text/javascript,export default (p) => '<div>spell</div>'",
+			},
+			params: { id: "fireball" },
+		} as any;
+
+		const res = await renderRoute(
+			matched,
+			new Request("http://localhost/spells/fireball"),
+		);
+		const html = await res.text();
+
+		expect(html).toContain('"pattern":"/spells/:id"');
+		expect(html).toContain('"id":"fireball"');
+	});
+
+	test("head script tag comes before head content", async () => {
+		const matched = {
+			route: {
+				path: "/head-test",
+				params: {},
+				filePath:
+					"data:text/javascript,export default (p) => '<div>head</div>'",
+			},
+			params: {},
+		} as any;
+
+		const res = await renderRoute(matched, new Request("http://localhost/head-test"));
+		const html = await res.text();
+
+		const hydrateScript = html.indexOf("hydrate.js");
+		const headClosing = html.indexOf("</head>");
+		// hydrate.js should be in <head>
+		expect(hydrateScript).toBeGreaterThan(-1);
+		expect(hydrateScript).toBeLessThan(headClosing);
+	});
+
+	test("stream chunks arrive incrementally", async () => {
+		const matched = {
+			route: {
+				path: "/chunked",
+				params: {},
+				filePath:
+					"data:text/javascript,export default (p) => '<div>chunked</div>'",
+			},
+			params: {},
+		} as any;
+
+		const res = await renderRoute(matched, new Request("http://localhost/chunked"));
+		const reader = res.body!.getReader();
+		const chunks: string[] = [];
+
+		while (true) {
+			const { done, value } = await reader.read();
+			if (done) break;
+			// Bun ReadableStream returns Uint8Array
+			chunks.push(typeof value === "string" ? value : new TextDecoder().decode(value.buffer));
+		}
+
+		// Should have multiple chunks (at least DOCTYPE + body)
+		expect(chunks.length).toBeGreaterThan(1);
+		// First chunk should start with DOCTYPE
+		expect(chunks[0]).toContain("<!DOCTYPE html>");
+		// Last chunk should close the document
+		expect(chunks[chunks.length - 1]).toContain("</html>");
+	});
+
+	test("navigation request returns JSON not stream", async () => {
+		const matched = {
+			route: {
+				path: "/nav",
+				params: {},
+				filePath:
+					"data:text/javascript,export default (p) => '<div>nav</div>'",
+			},
+			params: {},
+		} as any;
+
+		const req = new Request("http://localhost/nav", {
+			headers: { "x-grimoire-navigate": "1" },
+		});
+		const res = await renderRoute(matched, req);
+		const json = await res.json();
+
+		expect(json.pattern).toBe("/nav");
+		expect(json.data).toBeDefined();
+	});
+});

package/test/transform-routes.test.ts

@@ -0,0 +1,84 @@
+import { describe, expect, test } from "bun:test";
+import { mkdir, mkdtemp, readFile, rm, writeFile } from "fs/promises";
+import { tmpdir } from "os";
+import { join } from "path";
+import type { RouteFile } from "../src/scanner";
+import { transformRoutes } from "../src/transform-routes";
+
+describe("transformRoutes", () => {
+	test("pre-transforms TypeScript TSX routes to unique JavaScript files", async () => {
+		const root = await mkdtemp(join(tmpdir(), "grimoire-transform-"));
+		try {
+			const routesDir = join(root, "src", "routes");
+			const spellDir = join(routesDir, "spells", "[id]");
+			const otherDir = join(routesDir, "other");
+			const outDir = join(root, ".grimoire", "compiled");
+			await mkdir(spellDir, { recursive: true });
+			await mkdir(otherDir, { recursive: true });
+			await mkdir(outDir, { recursive: true });
+
+			const spellRoute = join(spellDir, "+page.tsx");
+			const otherRoute = join(otherDir, "+page.tsx");
+			const spellData = join(spellDir, "data.ts");
+			await writeFile(
+				spellData,
+				`
+					export const SPELLS = { fire: "Fire" } as const;
+				`,
+			);
+			await writeFile(
+				spellRoute,
+				`
+					import { SPELLS } from "./data";
+					type PageProps = { params: { id: keyof typeof SPELLS } };
+
+					export default function Page({ params }: PageProps) {
+						const n: number = 1;
+						return <h1>{SPELLS[params.id] ?? n}</h1>;
+					}
+				`,
+			);
+			await writeFile(
+				otherRoute,
+				`
+					export default function Other({ count }: { count: number }) {
+						return <p>{count}</p>;
+					}
+				`,
+			);
+
+			const routes: RouteFile[] = [
+				route(spellRoute, "/spells/:id"),
+				route(otherRoute, "/other"),
+			];
+			const files = await transformRoutes(routes, outDir, "dom");
+
+			const spellOut = files.get(spellRoute);
+			const otherOut = files.get(otherRoute);
+			expect(spellOut).not.toEqual(otherOut);
+			expect(spellOut).toContain(".dom.js");
+			expect(otherOut).toContain(".dom.js");
+
+			const code = await readFile(spellOut!, "utf8");
+			expect(code).toContain("export default function Page");
+			expect(code).toContain(
+				spellData.replace(/\.ts$/, "").replace(/\\/g, "\\\\"),
+			);
+			expect(code).not.toContain(": number");
+			expect(code).not.toContain("keyof typeof");
+			expect(code).not.toContain("as const");
+		} finally {
+			await rm(root, { recursive: true, force: true });
+		}
+	});
+});
+
+function route(filePath: string, path: string): RouteFile {
+	return {
+		path,
+		filePath,
+		clientPath: filePath,
+		type: "page",
+		paramNames: [],
+	};
+}