@sigil-dev/grimoire 0.7.6 → 0.7.7

package/src/dev/paths.ts

@@ -0,0 +1,14 @@
+import { resolve } from "node:path";
+
+export function normalizePath(p: string) {
+	let n = resolve(p).replace(/\\/g, "/");
+	if (process.platform === "win32") n = n.toLowerCase();
+	return n;
+}
+
+export function keyFromUrl(pathname: string, prefix: string) {
+	// __grimoire__/m/src/lib/Example.tsx.js -> src/lib/Example.tsx
+	return decodeURIComponent(pathname.slice(prefix.length))
+		.replace(/\.js(\?.*)?$/, "")
+		.replace(/\\/g, "");
+}

package/src/dev/runtime-bundle.ts

@@ -0,0 +1,49 @@
+import { existsSync, mkdirSync } from "node:fs";
+import { join } from "node:path";
+
+export async function ensureRuntimeBundle(projectRoot: string): Promise<void> {
+	const outDir = join(projectRoot, "public/__grimoire__");
+	mkdirSync(outDir, { recursive: true });
+
+	// runtime
+	const runtimeOut = join(outDir, "runtime.js");
+	if (!(await Bun.file(runtimeOut).exists())) {
+		console.log("[sigil hmr] bundling runtime...");
+		const result = await Bun.build({
+			entrypoints: [
+				join(projectRoot, "node_modules/@sigil-dev/runtime/index.ts"),
+			],
+			outdir: outDir,
+			naming: "runtime.js",
+			target: "browser",
+			format: "esm",
+			minify: false,
+		});
+		if (!result.success)
+			console.error("[sigil hmr] runtime bundle failed:", result.logs);
+		else console.log("[sigil hmr] runtime bundled");
+	}
+
+	// grimoire client
+	const grimClientOut = join(outDir, "grimoire-client.js");
+	const ref = Bun.file(grimClientOut);
+	if (await ref.exists()) await ref.delete();
+	await Bun.write(
+		grimClientOut,
+		`
+    // Grimoire client shim for HMR dev mode
+    export function Head({ children }) {
+        if (children instanceof Node) {
+            document.head.appendChild(children);
+        }
+        return document.createComment("head");
+    }
+
+    export const navigate = (...args) => window.__grimoire_navigate__?.(...args);
+    export const beforeNavigate = (cb) => window.__grimoire_beforeNavigate__?.(cb);
+    export const onNavigate = (cb) => window.__grimoire_onNavigate__?.(cb);
+    export const afterNavigate = (cb) => window.__grimoire_afterNavigate__?.(cb);
+    `.trim(),
+	);
+	console.log("[sigil hmr] grimoire client shim written");
+}

package/src/dev/watcher.ts

@@ -0,0 +1,44 @@
+import { watch } from "node:fs";
+import { join } from "node:path";
+import { normalizePath } from "./paths";
+
+export type ChangeHandler = (filePath: string) => Promise<void>;
+
+export function startWatcher(
+	srcDir: string,
+	onChange: ChangeHandler,
+): () => void {
+	const pending = new Set<string>();
+	let debounce: Timer | null = null;
+
+	const flush = async () => {
+		const files = [...pending];
+		pending.clear();
+		for (const f of files) {
+			await onChange(f);
+		}
+	};
+
+	const watcher = watch(srcDir, { recursive: true }, (_evt, filename) => {
+		console.log("[sigil hmr] fs.watch fired:", _evt, filename);
+		if (!filename) return;
+		const raw = join(srcDir, filename.toString());
+		pending.add(normalizePath(raw));
+		if (debounce) clearTimeout(debounce);
+		debounce = setTimeout(flush, 60);
+	});
+
+	return () => watcher.close();
+}
+
+/** Read file with atomic-write retry — VSCode on Windows writes temp-then-rename */
+export async function safeRead(filePath: string): Promise<string | null> {
+	for (let attempt = 0; attempt < 3; attempt++) {
+		const text = await Bun.file(filePath)
+			.text()
+			.catch(() => null);
+		if (text && text.length > 0) return text;
+		await Bun.sleep(30);
+	}
+	return null;
+}

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,120 @@
-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);
+//@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-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);