@sigil-dev/grimoire 0.7.5 → 0.7.7

package/src/rendering/hydrate.ts

@@ -1,27 +1,120 @@
-import { routes } from "#grimoire-routes";
-import { popHydrationNodes, pushHydrationNodes } from "@sigil-dev/runtime";
+//@ts-expect-error compiler generated
+
+import {
+	claim,
+	getHydrationNodes,
+	insert,
+	popHydrationNodes,
+	pushHydrationNodes,
+} from "@sigil-dev/runtime";
+import { layouts, routes } from "#grimoire-routes";
+import {
+	afterNavigate,
+	beforeNavigate,
+	navigate,
+	onNavigate,
+} from "../client/router";
 import { initRouter } from "../client/router.ts";
 import { withEffectScope } from "../client/scope.ts";
+import { Head } from "./head";
+
+// expose for HMR module shim
+(globalThis as any).__grimoire_Head__ = Head;
+(globalThis as any).__grimoire_navigate__ = navigate;
+(globalThis as any).__grimoire_beforeNavigate__ = beforeNavigate;
+(globalThis as any).__grimoire_onNavigate__ = onNavigate;
+(globalThis as any).__grimoire_afterNavigate__ = afterNavigate;
 
 const stateEl = document.getElementById("__grimoire_state__");
 let initialDispose: (() => void) | undefined;
 
 if (stateEl) {
-    const state = JSON.parse(stateEl.textContent!);
-    const Page = routes[state.pattern];
-    if (Page) {
-        const slot = document.getElementById("grimoire-page");
-        if (slot) {
-            pushHydrationNodes(Array.from(slot.childNodes) as ChildNode[]);
-            initialDispose = withEffectScope(() => {
-                try {
-                    Page({ data: state.data, params: state.params });
-                } finally {
-                    popHydrationNodes();
-                }
-            });
-        }
-    }
+	const state = JSON.parse(stateEl.textContent!);
+	const Page = routes[state.pattern];
+	if (Page) {
+		const slot = document.getElementById("grimoire-root");
+		if (slot) {
+			const matchedLayouts = layouts
+				.filter(
+					(l: any) =>
+						l.path === "/" ||
+						state.pattern === l.path ||
+						state.pattern.startsWith(l.path + "/"),
+				)
+				.sort((a: any, b: any) => a.path.length - b.path.length);
+
+			// When layouts are involved, nested <!--g--> delimiters in the flat SSR pool
+			// cause anchor-mount to claim the wrong anchor and remove layout DOM nodes.
+			// Clear SSR content and re-render in DOM mode (empty pool) instead.
+			const hasLayouts = matchedLayouts.length > 0;
+			if (hasLayouts) {
+				slot.replaceChildren();
+			}
+
+			const ssrClones = hasLayouts
+				? []
+				: Array.from(slot.childNodes).map((n) => n.cloneNode(true));
+			pushHydrationNodes(
+				hasLayouts ? [] : (Array.from(slot.childNodes) as ChildNode[]),
+			);
+			try {
+				initialDispose = withEffectScope(() => {
+					try {
+						let renderFn = () => {
+							const pageDiv = claim(getHydrationNodes(), "div");
+							pageDiv.id = "grimoire-page";
+
+							if (pageDiv.childNodes.length > 0) {
+								pushHydrationNodes(
+									Array.from(pageDiv.childNodes) as ChildNode[],
+								);
+								const pageNode = Page({
+									data: state.data,
+									params: state.params,
+								});
+								popHydrationNodes();
+								insert(pageDiv, pageNode);
+							} else {
+								const pageNode = Page({
+									data: state.data,
+									params: state.params,
+								});
+								insert(pageDiv, pageNode);
+							}
+
+							return pageDiv;
+						};
+
+						for (let i = matchedLayouts.length - 1; i >= 0; i--) {
+							const LayoutComponent = matchedLayouts[i].component;
+							const innerRender = renderFn;
+							const layoutData = state.layoutData?.[i];
+							renderFn = () => {
+								// Pre-render inner content so children is a Node (insert() doesn't call functions)
+								const childNode = innerRender();
+								return LayoutComponent({
+									data: layoutData,
+									params: state.params,
+									children: childNode,
+								});
+							};
+						}
+
+						const rootNode = renderFn();
+						insert(slot, rootNode);
+					} finally {
+						popHydrationNodes();
+					}
+				});
+			} catch (e) {
+				console.warn("[grimoire] hydration error:", e);
+			}
+
+			if (!slot.hasChildNodes() && ssrClones.length > 0) {
+				slot.replaceChildren(...ssrClones);
+			}
+		}
+	}
 }
 
-initRouter(routes, initialDispose);
+initRouter(routes, layouts, initialDispose);

package/src/rendering/index.ts

@@ -1,4 +1,5 @@
 import { SafeHtml } from "@sigil-dev/runtime";
+import { randomBytes } from "crypto";
 import { findClosestError, type MatchedRoute } from "../routing/router";
 import type { RouteFile } from "../routing/scanner";
 import { isErrorResult } from "../sentinels/error.ts";
@@ -11,176 +12,285 @@ import { collectHead, initHead } from "./head";
 export type ModuleLoader = (path: string) => Promise<any>;
 
 async function renderErrorPage(
-    errorRoutes: RouteFile[],
-    pathname: string,
-    status: number,
-    message: string,
+	errorRoutes: RouteFile[],
+	pathname: string,
+	status: number,
+	message: string,
+	error?: unknown,
 ): Promise<Response | null> {
-    const errorPage = findClosestError(errorRoutes, pathname);
-    if (!errorPage) return null;
-    const mod = await import(errorPage.filePath);
-    const html = mod.default({ status, message });
-    return new Response(html, {
-        status,
-        headers: { "Content-Type": "text/html" },
-    });
+	const errorPage = findClosestError(errorRoutes, pathname);
+	if (!errorPage) return null;
+	const mod = await import(errorPage.filePath);
+	const html = mod.default({ status, message, error, route: pathname });
+	return new Response(html, {
+		status,
+		headers: { "Content-Type": "text/html" },
+	});
 }
 
 export async function renderRoute(
-    matched: MatchedRoute,
-    req: Request,
-    errorRoutes: RouteFile[] = [],
-    loadModule: ModuleLoader = (path) => import(path),
-    locals: Record<string, any> = {},
-    plugins: GrimoirePlugin[] = [],
+	matched: MatchedRoute,
+	req: Request,
+	errorRoutes: RouteFile[] = [],
+	loadModule: ModuleLoader = (path) => import(path),
+	locals: Record<string, any> = {},
+	plugins: GrimoirePlugin[] = [],
+	cspNonce?: string,
+	dev?: boolean,
 ): Promise<Response> {
-    return runWithContext(async () => {
-        const context: LoadContext = {
-            request: req,
-            params: matched.params,
-            url: new URL(req.url),
-            locals,
-        };
-
-        initHead();
-
-        const route: Route = {
-            path: matched.route.path,
-            params: matched.params,
-            filePath: matched.route.filePath,
-            loadPath: matched.pageServer?.filePath,
-            layoutPath: matched.layouts.at(-1)?.filePath,
-        };
-        await runHook(plugins, "onRouteLoad", route, context);
-
-        const layoutPairs: { layout: RouteFile; data: unknown }[] = [];
-        for (const layout of matched.layouts) {
-          const layoutServer = matched.layoutServers.find(
-            ls => ls.path === layout.path
-          );
-          let data: unknown = undefined;
-          if (layoutServer) {
-            try {
-              const mod = await import(layoutServer.filePath);
-              data = await mod.load?.(context);
-            } catch (e) {
-              if (isRedirectResult(e)) return new Response(null, {
-                status: e.status, headers: { Location: e.location }
-              });
-              if (isErrorResult(e)) return (
-                await renderErrorPage(errorRoutes, context.url.pathname, e.status, e.message)
-                ?? new Response(e.message, { status: e.status })
-              );
-              throw e;
-            }
-          }
-          layoutPairs.push({ layout, data });
-        }
-
-        let pageData: unknown;
-        if (matched.pageServer) {
-            try {
-                const mod = await import(matched.pageServer.filePath);
-                pageData = await mod.load?.(context);
-            } catch (e) {
-                if (isRedirectResult(e)) {
-                    return new Response(null, {
-                        status: e.status,
-                        headers: { Location: e.location },
-                    });
-                }
-                if (isErrorResult(e)) {
-                    return (
-                        (await renderErrorPage(
-                            errorRoutes,
-                            context.url.pathname,
-                            e.status,
-                            e.message,
-                        )) ?? new Response(e.message, { status: e.status })
-                    );
-                }
-                throw e;
-            }
-        }
-
-        const pageMod = await import(matched.route.filePath);
-        const pageHtml = pageMod.default({
-            data: pageData,
-            params: matched.params,
-        });
-
-        // collect head AFTER page render so <Head> calls are captured
-        const headHtml = collectHead();
-
-        // navigation request: return JSON, client handles rendering
-        if (req.headers.get("x-grimoire-navigate") === "1") {
-            return Response.json({
-                data: pageData ?? {},
-                params: matched.params,
-                pattern: matched.route.path,
-                head: headHtml,
-            });
-        }
-
-        const wrappedPage = `<div id="grimoire-page">${String(pageHtml)}</div>`;
-
-        let bodyHtml: string = wrappedPage;
-        for (const { layout, data } of [...layoutPairs].reverse()) {
-          const layoutMod = await import(layout.filePath);
-          bodyHtml = String(
-            layoutMod.default({
-              data,
-              children: new SafeHtml(bodyHtml),
-              params: matched.params,
-            }),
-          );
-        }
-
-        const stateJson = JSON.stringify({
-            params: matched.params,
-            data: pageData,
-            pattern: matched.route.path,
-        });
-
-        // --- Streaming SSR ---
-        // Send DOCTYPE + head skeleton immediately (browser starts resource fetch).
-        // Then stream body + full head content + state as they become available.
-        const stream = new ReadableStream({
-            start(controller) {
-                // 1. Document skeleton — browser starts parsing, fetches CSS/JS
-                controller.enqueue(
-                    `<!DOCTYPE html>
+	return runWithContext(async () => {
+		const context: LoadContext = {
+			request: req,
+			params: matched.params,
+			url: new URL(req.url),
+			locals,
+		};
+
+		initHead(cspNonce);
+
+		const route: Route = {
+			path: matched.route.path,
+			params: matched.params,
+			filePath: matched.route.filePath,
+			loadPath: matched.pageServer?.filePath,
+			layoutPath: matched.layouts.at(-1)?.filePath,
+		};
+		await runHook(plugins, "onRouteLoad", route, context);
+
+		const layoutPairs: { layout: RouteFile; mod: any; data: unknown }[] = [];
+		for (const layout of matched.layouts) {
+			const layoutMod = await loadModule(layout.filePath);
+
+			if (layoutMod.canMatch) {
+				try {
+					const result = await layoutMod.canMatch(context);
+					if (result === false)
+						return new Response("Not Found", { status: 404 });
+					if (isRedirectResult(result))
+						return new Response(null, {
+							status: result.status,
+							headers: { Location: result.location },
+						});
+				} catch (e) {
+					if (isRedirectResult(e))
+						return new Response(null, {
+							status: e.status,
+							headers: { Location: e.location },
+						});
+					if (isErrorResult(e))
+						return (
+							(await renderErrorPage(
+								errorRoutes,
+								context.url.pathname,
+								e.status,
+								e.message,
+								e,
+							)) ?? new Response(e.message, { status: e.status })
+						);
+					throw e;
+				}
+			}
+
+			const layoutServer = matched.layoutServers.find(
+				(ls) => ls.path === layout.path,
+			);
+			let data: unknown;
+			if (layoutServer) {
+				try {
+					const mod = await loadModule(layoutServer.filePath);
+					data = await mod.load?.(context);
+				} catch (e) {
+					if (isRedirectResult(e))
+						return new Response(null, {
+							status: e.status,
+							headers: { Location: e.location },
+						});
+					if (isErrorResult(e))
+						return (
+							(await renderErrorPage(
+								errorRoutes,
+								context.url.pathname,
+								e.status,
+								e.message,
+								e,
+							)) ?? new Response(e.message, { status: e.status })
+						);
+					throw e;
+				}
+			}
+			const universalLayoutData = layoutMod.load
+				? await layoutMod.load(context)
+				: undefined;
+
+			const mergedLayoutData =
+				universalLayoutData !== undefined
+					? //@ts-expect-error User provded data is always unknown.
+						{ ...universalLayoutData, ...data }
+					: data;
+
+			layoutPairs.push({ layout, mod: layoutMod, data: mergedLayoutData });
+		}
+
+		let pageData: unknown;
+		if (matched.pageServer) {
+			try {
+				const mod = await loadModule(matched.pageServer.filePath);
+				pageData = await mod.load?.(context);
+			} catch (e) {
+				if (isRedirectResult(e)) {
+					return new Response(null, {
+						status: e.status,
+						headers: { Location: e.location },
+					});
+				}
+				if (isErrorResult(e)) {
+					return (
+						(await renderErrorPage(
+							errorRoutes,
+							context.url.pathname,
+							e.status,
+							e.message,
+							e,
+						)) ?? new Response(e.message, { status: e.status })
+					);
+				}
+				throw e;
+			}
+		}
+
+		const pageMod = await loadModule(matched.route.filePath);
+		if (pageMod.canMatch) {
+			try {
+				const result = await pageMod.canMatch(context);
+				if (result === false) return new Response("Not Found", { status: 404 });
+				if (isRedirectResult(result))
+					return new Response(null, {
+						status: result.status,
+						headers: { Location: result.location },
+					});
+			} catch (e) {
+				if (isRedirectResult(e))
+					return new Response(null, {
+						status: e.status,
+						headers: { Location: e.location },
+					});
+				if (isErrorResult(e))
+					return (
+						(await renderErrorPage(
+							errorRoutes,
+							context.url.pathname,
+							e.status,
+							e.message,
+							e,
+						)) ?? new Response(e.message, { status: e.status })
+					);
+				throw e;
+			}
+		}
+
+		const universalData = pageMod.load
+			? await pageMod.load(context).catch((e) => {
+					if (isRedirectResult(e)) throw e;
+					if (isErrorResult(e)) throw e;
+					throw e;
+				})
+			: undefined;
+
+		const mergedData =
+			universalData !== undefined
+				? //@ts-expect-error User provded data is always unknown.
+					{ ...universalData, ...pageData }
+				: pageData;
+
+		const pageHtml = pageMod.default({
+			data: mergedData,
+			params: matched.params,
+		});
+
+		// collect head AFTER page render so <Head> calls are captured
+		const headHtml = collectHead();
+
+		// navigation request: return JSON, client handles rendering
+		if (req.headers.get("x-grimoire-navigate") === "1") {
+			return Response.json({
+				data: mergedData ?? {},
+				layoutData: layoutPairs.map((l) => l.data),
+				params: matched.params,
+				pattern: matched.route.path,
+				head: headHtml,
+			});
+		}
+
+		const wrappedPage = `<div id="grimoire-page">${String(pageHtml)}</div>`;
+
+		let bodyHtml: string = wrappedPage;
+		for (const { mod: layoutMod, data } of [...layoutPairs].reverse()) {
+			bodyHtml = String(
+				layoutMod.default({
+					data,
+					children: new SafeHtml(bodyHtml),
+					params: matched.params,
+				}),
+			);
+		}
+
+		bodyHtml = `<div id="grimoire-root">${bodyHtml}</div>`;
+		const csrfToken = randomBytes(32).toString("hex");
+		const stateJson = JSON.stringify({
+			params: matched.params,
+			data: mergedData,
+			layoutData: layoutPairs.map((l) => l.data),
+			pattern: matched.route.path,
+		});
+		const csrfInput = `<input type="hidden" name="_csrf" value="${csrfToken}">`;
+		bodyHtml = bodyHtml.replace(
+			/<form([^>]*action=[^>]*)>/gi,
+			`<form$1>${csrfInput}`,
+		);
+		// --- Streaming SSR ---
+		// Send DOCTYPE + head skeleton immediately (browser starts resource fetch).
+		// Then stream body + full head content + state as they become available.
+		const nonceAttr = cspNonce ? ` nonce="${cspNonce}"` : "";
+		const stream = new ReadableStream({
+			start(controller) {
+				// 1. Document skeleton — browser starts parsing, fetches CSS/JS
+				controller.enqueue(
+					`<!DOCTYPE html>
 <html>
 <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <script type="module" src="/__grimoire__/hydrate.js"></script>`,
-                );
+    <script type="module" src="/__grimoire__/hydrate.js"${nonceAttr}></script>
+    ${dev ? `<script src="/__grimoire__/hmr-client.js"${nonceAttr}></script>` : ""}`,
+				);
 
-                // 2. Head content (captured from <Head> component calls during render)
-                if (headHtml) {
-                    controller.enqueue(`\n${headHtml}`);
-                }
+				// 2. Head content (captured from <Head> component calls during render)
+				if (headHtml) {
+					controller.enqueue(`\n${headHtml}`);
+				}
 
-                controller.enqueue(`\n</head>
+				controller.enqueue(`\n</head>
 <body>
     <div id="app">`);
 
-                // 3. Page body
-                controller.enqueue(bodyHtml);
+				// 3. Page body
+				controller.enqueue(bodyHtml);
 
-                // 4. State script + closing tags
-                controller.enqueue(`</div>
-    <script id="__grimoire_state__" type="application/json">${stateJson}</script>
+				// 4. State script + closing tags
+				controller.enqueue(`</div>
+    <script id="__grimoire_state__" type="application/json"${nonceAttr}>${stateJson}</script>
 </body>
 </html>`);
 
-                controller.close();
-            },
-        });
+				controller.close();
+			},
+		});
 
-        return new Response(stream, {
-            headers: { "Content-Type": "text/html" },
-        });
-    });
+		return new Response(stream, {
+			headers: {
+				"Content-Type": "text/html",
+				"Set-Cookie": "_csrf=${csrfToken}; SameSite=Strict; Path=/",
+			},
+		});
+	});
 }