@sigil-dev/grimoire 0.7.6 → 0.8.0

package/src/integrations/vite.ts

@@ -1,72 +1,73 @@
-import { isAbsolute, join, resolve } from "node:path";
-import type { Plugin } from "vite";
-import { renderRoute } from "../rendering";
-import { matchRoute } from "../routing/router.ts";
-import { scanRoutes } from "../routing/scanner.ts";
-
-const CLIENT_ENTRY = resolve(import.meta.dir, "./index.ts");
-
-export function grimoire(options: { routes?: string } = {}): Plugin {
-	let isBuild = false;
-
-	return {
-		name: "grimoire",
-
-		configResolved(config) {
-			isBuild = config.command === "build";
-		},
-
-		configureServer(vite) {
-			const routesDir = isAbsolute(options.routes ?? "src/routes")
-				? options.routes!
-				: join(process.cwd(), options.routes ?? "src/routes");
-
-			// client entry
-			vite.middlewares.use("/__grimoire__/client.js", async (req, res) => {
-				const result = await vite.transformRequest(CLIENT_ENTRY);
-				if (!result) {
-					res.statusCode = 404;
-					res.end();
-					return;
-				}
-				res.setHeader("Content-Type", "application/javascript");
-				res.end(result.code);
-			});
-
-			// page routes
-			vite.middlewares.use(async (req, res, next) => {
-				const url = new URL(req.url!, "http://localhost");
-				if (url.pathname.startsWith("/__") || url.pathname.includes(".")) {
-					return next();
-				}
-				try {
-					const tree = await scanRoutes(routesDir, process.cwd());
-					const matched = matchRoute(tree, url);
-					if (!matched) return next();
-
-					const response = await renderRoute(
-						matched,
-						new Request(`http://localhost${req.url}`),
-						(path) => vite.ssrLoadModule(path), // Vite transforms SSR files correctly
-					);
-
-					const html = await response.text();
-					res.setHeader("Content-Type", "text/html");
-					res.end(html);
-				} catch (e) {
-					vite.ssrFixStacktrace(e as Error);
-					next(e);
-				}
-			});
-		},
-
-		buildStart() {
-			if (!isBuild) return;
-			this.emitFile({
-				type: "chunk",
-				id: CLIENT_ENTRY,
-				fileName: "client.js",
-			});
-		},
-	};
-}
+import { isAbsolute, join, resolve } from "node:path";
+import type { Plugin } from "vite";
+import { renderRoute } from "../rendering";
+import { matchRoute } from "../routing/router.ts";
+import { scanRoutes } from "../routing/scanner.ts";
+
+const CLIENT_ENTRY = resolve(import.meta.dir, "./index.ts");
+
+export function grimoire(options: { routes?: string } = {}): Plugin {
+	let isBuild = false;
+
+	return {
+		name: "grimoire",
+
+		configResolved(config) {
+			isBuild = config.command === "build";
+		},
+
+		configureServer(vite) {
+			const routesDir = isAbsolute(options.routes ?? "src/routes")
+				? options.routes!
+				: join(process.cwd(), options.routes ?? "src/routes");
+
+			// client entry
+			vite.middlewares.use("/__grimoire__/client.js", async (req, res) => {
+				const result = await vite.transformRequest(CLIENT_ENTRY);
+				if (!result) {
+					res.statusCode = 404;
+					res.end();
+					return;
+				}
+				res.setHeader("Content-Type", "application/javascript");
+				res.end(result.code);
+			});
+
+			// page routes
+			vite.middlewares.use(async (req, res, next) => {
+				const url = new URL(req.url!, "http://localhost");
+				if (url.pathname.startsWith("/__") || url.pathname.includes(".")) {
+					return next();
+				}
+				try {
+					const tree = await scanRoutes(routesDir, process.cwd());
+					const matched = matchRoute(tree, url);
+					if (!matched) return next();
+
+					const response = await renderRoute(
+						matched,
+						new Request(`http://localhost${req.url}`),
+						[],
+						(path) => vite.ssrLoadModule(path), // Vite transforms SSR files correctly
+					);
+
+					const html = await response.text();
+					res.setHeader("Content-Type", "text/html");
+					res.end(html);
+				} catch (e) {
+					vite.ssrFixStacktrace(e as Error);
+					next(e);
+				}
+			});
+		},
+
+		buildStart() {
+			if (!isBuild) return;
+			this.emitFile({
+				type: "chunk",
+				id: CLIENT_ENTRY,
+				fileName: "client.js",
+			});
+		},
+	};
+}

package/src/rendering/hydrate.ts

@@ -1,81 +1,119 @@
-import { routes, layouts } from "#grimoire-routes";
-import { popHydrationNodes, pushHydrationNodes, claim, insert, getHydrationNodes } from "@sigil-dev/runtime";
+import {
+	claim,
+	getHydrationNodes,
+	insert,
+	popHydrationNodes,
+	pushHydrationNodes,
+} from "@sigil-dev/runtime";
+//@ts-expect-error compiler generated
+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-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);
+	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();
-            }
+			// 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";
+			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);
-                            }
+							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;
-                        };
+							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,
-                                });
-                            };
-                        }
+						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);
-            }
+						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);
-            }
-        }
-    }
+			if (!slot.hasChildNodes() && ssrClones.length > 0) {
+				slot.replaceChildren(...ssrClones);
+			}
+		}
+	}
 }
 
 initRouter(routes, layouts, initialDispose);