@sigil-dev/grimoire 0.7.4 → 0.7.6

package/src/rendering/hydrate.ts

@@ -1,26 +1,81 @@
-import { routes } from "#grimoire-routes";
-import { initRouter } from "../client/router.ts";
-import { withEffectScope } from "../client/scope.ts";
-
-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();
-                }
-            });
-        }
-    }
-}
-
-initRouter(routes, initialDispose);
+import { routes, layouts } from "#grimoire-routes";
+import { popHydrationNodes, pushHydrationNodes, claim, insert, getHydrationNodes } from "@sigil-dev/runtime";
+import { initRouter } from "../client/router.ts";
+import { withEffectScope } from "../client/scope.ts";
+
+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-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, layouts, initialDispose);

package/src/rendering/index.ts

@@ -1,186 +1,199 @@
-import { SafeHtml } from "@sigil-dev/runtime";
-import { findClosestError, type MatchedRoute } from "../routing/router";
-import type { RouteFile } from "../routing/scanner";
-import { isErrorResult } from "../sentinels/error.ts";
-import { isRedirectResult } from "../sentinels/redirect.ts";
-import { runWithContext } from "../server/context";
-import { runHook } from "../server/plugins";
-import type { GrimoirePlugin, LoadContext, Route } from "../types";
-import { collectHead, initHead } from "./head";
-
-export type ModuleLoader = (path: string) => Promise<any>;
-
-async function renderErrorPage(
-    errorRoutes: RouteFile[],
-    pathname: string,
-    status: number,
-    message: string,
-): 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" },
-    });
-}
-
-export async function renderRoute(
-    matched: MatchedRoute,
-    req: Request,
-    errorRoutes: RouteFile[] = [],
-    loadModule: ModuleLoader = (path) => import(path),
-    locals: Record<string, any> = {},
-    plugins: GrimoirePlugin[] = [],
-): 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>
-<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>`,
-                );
-
-                // 2. Head content (captured from <Head> component calls during render)
-                if (headHtml) {
-                    controller.enqueue(`\n${headHtml}`);
-                }
-
-                controller.enqueue(`\n</head>
-<body>
-    <div id="app">`);
-
-                // 3. Page body
-                controller.enqueue(bodyHtml);
-
-                // 4. State script + closing tags
-                controller.enqueue(`</div>
-    <script id="__grimoire_state__" type="application/json">${stateJson}</script>
-</body>
-</html>`);
-
-                controller.close();
-            },
-        });
-
-        return new Response(stream, {
-            headers: { "Content-Type": "text/html" },
-        });
-    });
-}
+import { SafeHtml } from "@sigil-dev/runtime";
+import { findClosestError, type MatchedRoute } from "../routing/router";
+import type { RouteFile } from "../routing/scanner";
+import { isErrorResult } from "../sentinels/error.ts";
+import { isRedirectResult } from "../sentinels/redirect.ts";
+import { runWithContext } from "../server/context";
+import { runHook } from "../server/plugins";
+import type { GrimoirePlugin, LoadContext, Route } from "../types";
+import { collectHead, initHead } from "./head";
+
+export type ModuleLoader = (path: string) => Promise<any>;
+
+async function renderErrorPage(
+	errorRoutes: RouteFile[],
+	pathname: string,
+	status: number,
+	message: string,
+): 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" },
+	});
+}
+
+export async function renderRoute(
+	matched: MatchedRoute,
+	req: Request,
+	errorRoutes: RouteFile[] = [],
+	loadModule: ModuleLoader = (path) => import(path),
+	locals: Record<string, any> = {},
+	plugins: GrimoirePlugin[] = [],
+	cspNonce?: string,
+): Promise<Response> {
+	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; data: unknown }[] = [];
+		for (const layout of matched.layouts) {
+			const layoutServer = matched.layoutServers.find(
+				(ls) => ls.path === layout.path,
+			);
+			let data: unknown;
+			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 ?? {},
+				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 { layout, data } of [...layoutPairs].reverse()) {
+			const layoutMod = await import(layout.filePath);
+			bodyHtml = String(
+				layoutMod.default({
+					data,
+					children: new SafeHtml(bodyHtml),
+					params: matched.params,
+				}),
+			);
+		}
+
+		bodyHtml = `<div id="grimoire-root">${bodyHtml}</div>`;
+
+		const stateJson = JSON.stringify({
+			params: matched.params,
+			data: pageData,
+			layoutData: layoutPairs.map((l) => l.data),
+			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 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"${nonceAttr}></script>`,
+				);
+
+				// 2. Head content (captured from <Head> component calls during render)
+				if (headHtml) {
+					controller.enqueue(`\n${headHtml}`);
+				}
+
+				controller.enqueue(`\n</head>
+<body>
+    <div id="app">`);
+
+				// 3. Page body
+				controller.enqueue(bodyHtml);
+
+				// 4. State script + closing tags
+				controller.enqueue(`</div>
+    <script id="__grimoire_state__" type="application/json"${nonceAttr}>${stateJson}</script>
+</body>
+</html>`);
+
+				controller.close();
+			},
+		});
+
+		return new Response(stream, {
+			headers: { "Content-Type": "text/html" },
+		});
+	});
+}

package/src/rendering/ssrPlugin.ts

@@ -1,42 +1,53 @@
-import { transformSync } from "@babel/core";
-import sigilPlugin from "@sigil-dev/compiler/babel";
-import { createHash } from "node:crypto";
-import type { GrimoirePlugin } from "../types";
-
-let registered = false;
-
-export function registerSSRPlugin(plugins: GrimoirePlugin[] = []) {
-    if (registered) return;
-    registered = true;
-
-    Bun.plugin({
-        name: "sigil-ssr",
-        setup(build) {
-            // loader: "ts" not "tsx" — Babel already consumed the JSX,
-            // Bun only needs to strip remaining TypeScript types
-            const transpiler = new Bun.Transpiler({ loader: "ts", target: "bun" });
-
-            build.onLoad({ filter: /\.[jt]sx$/ }, async ({ path }) => {
-                const source = await Bun.file(path).text();
-                const hash = createHash("md5").update(path).digest("hex").slice(0, 8);
-
-                const result = transformSync(source, {
-                    parserOpts: {
-                        plugins: ["typescript", "jsx"],
-                    },
-                    plugins: [[sigilPlugin, { mode: "ssr", hash }]],
-                    filename: path,
-                });
-
-                let contents = transpiler.transformSync(result?.code ?? "");
-
-                for (const plugin of plugins) {
-                    if (plugin.transform)
-                        contents = (await plugin.transform(contents, path)) ?? contents;
-                }
-
-                return { contents, loader: "js" as const };
-            });
-        },
-    });
-}
+import { transformSync } from "@babel/core";
+import sigilPlugin from "@sigil-dev/compiler/babel";
+import { createHash } from "node:crypto";
+import type { GrimoirePlugin } from "../types";
+
+let registered = false;
+
+export function registerSSRPlugin(plugins: GrimoirePlugin[] = []) {
+    if (registered) return;
+    registered = true;
+
+    Bun.plugin({
+        name: "sigil-ssr",
+        setup(build) {
+            // loader: "ts" not "tsx" — Babel already consumed the JSX,
+            // Bun only needs to strip remaining TypeScript types
+            const transpiler = new Bun.Transpiler({ loader: "ts", target: "bun" });
+
+            build.onLoad({ filter: /\.tsx?$/ }, async ({ path }) => {
+                const source = await Bun.file(path).text();
+
+                // node_modules and .grimoire files are plain TypeScript (no sigil JSX).
+                // Still must return { contents, loader } — never return undefined from onLoad.
+                if (path.includes("node_modules") || path.includes(".grimoire")) {
+                    return { contents: transpiler.transformSync(source), loader: "js" as const };
+                }
+
+                if (process.env.SIGIL_VERBOSE) {
+                    console.log("[sigil-ssr] XFORM:", path);
+                }
+                const hash = createHash("md5").update(path).digest("hex").slice(0, 8);
+                const result = transformSync(source, {
+                    configFile: false,
+                    babelrc: false,
+                    parserOpts: {
+                        plugins: ["typescript", "jsx"],
+                    },
+                    plugins: [[sigilPlugin, { mode: "ssr", hash }]],
+                    filename: path,
+                });
+
+                let contents = transpiler.transformSync(result?.code ?? "");
+
+                for (const plugin of plugins) {
+                    if (plugin.transform)
+                        contents = (await plugin.transform(contents, path)) ?? contents;
+                }
+
+                return { contents, loader: "js" as const };
+            });
+        },
+    });
+}