@sigil-dev/grimoire 0.7.4 → 0.7.6

package/src/client/router.ts

@@ -1,76 +1,224 @@
-import { withEffectScope } from "./scope";
-
-let routeMap: Record<string, (props: any) => any> = {};
-let disposeCurrentPage: (() => void) | null = null;
-
-async function navigate(path: string) {
-    const res = await fetch(path, { headers: { "x-grimoire-navigate": "1" } });
-    const json = await res.json();
-    const { data, params, pattern, head } = json;
-    const Page = routeMap[pattern];
-    if (!Page) {
-        window.location.href = path;
-        return;
-    }
-
-    disposeCurrentPage?.();
-    disposeCurrentPage = null;
-
-    // SPA navigation: empty pool so components create fresh DOM
-    pushHydrationNodes([]);
-    let node: any;
-    disposeCurrentPage = withEffectScope(() => {
-        try {
-            node = Page({ data, params });
-        } finally {
-            popHydrationNodes();
-        }
-    });
-
-    const slot = document.getElementById("grimoire-page");
-    if (!slot) return;
-    slot.replaceChildren(node);
-    updateHead(head);
-    history.pushState({}, "", path);
-    currentPath = path;
-    window.scrollTo(0, 0);
-}
-let currentPath = location.pathname;
-
-export function initRouter(
-	routes: Record<string, (props: any) => any>,
-	initialDispose?: () => void,
-) {
-	routeMap = routes;
-	disposeCurrentPage = initialDispose ?? null;
-	document.addEventListener("click", handleClick);
-	window.addEventListener("popstate", () => {
-		if (location.pathname !== currentPath) {
-			currentPath = location.pathname;
-			navigate(location.pathname);
-		}
-	});
-}
-
-function updateHead(headHtml: string) {
-	document
-		.querySelectorAll("[data-grimoire-head]")
-		.forEach((el) => el.remove());
-	if (!headHtml) return;
-	const tmp = document.createElement("head");
-	tmp.innerHTML = headHtml;
-	for (const el of Array.from(tmp.children)) {
-		(el as HTMLElement).dataset.grimoireHead = "1";
-		document.head.appendChild(el);
-	}
-}
-
-function handleClick(e: MouseEvent) {
-	const a = (e.target as Element).closest("a");
-	if (!a) return;
-	const href = a.getAttribute("href");
-	if (!href) return;
-	if (/^(https?:\/\/|\/\/|#|mailto:|tel:)/.test(href)) return;
-	e.preventDefault();
-	navigate(href);
-}
+import { popHydrationNodes, pushHydrationNodes } from "@sigil-dev/runtime";
+import { withEffectScope } from "./scope";
+
+let routeMap: Record<string, (props: any) => any> = {};
+let layoutList: { path: string; component: (props: any) => any }[] = [];
+let disposeCurrentPage: (() => void) | null = null;
+let currentPath = location.pathname;
+
+// C1: Navigation hooks
+let beforeNavigateCb: ((url: URL) => boolean | void) | null = null;
+let onNavigateCb: ((url: URL) => void) | null = null;
+let afterNavigateCb: ((url: URL) => void) | null = null;
+
+export function beforeNavigate(cb: (url: URL) => boolean | void): void {
+	beforeNavigateCb = cb;
+}
+
+export function onNavigate(cb: (url: URL) => void): void {
+	onNavigateCb = cb;
+}
+
+export function afterNavigate(cb: (url: URL) => void): void {
+	afterNavigateCb = cb;
+}
+
+// C2: Scroll restoration
+const scrollPositions = new Map<string, number>();
+
+function saveScrollPosition(): void {
+	scrollPositions.set(currentPath, window.scrollY);
+}
+
+function restoreScrollPosition(path: string): void {
+	const saved = scrollPositions.get(path);
+	if (saved !== undefined) {
+		requestAnimationFrame(() => window.scrollTo(0, saved));
+	} else {
+		requestAnimationFrame(() => window.scrollTo(0, 0));
+	}
+}
+
+// C3: Preloading
+let preloadTimer: Timer | null = null;
+
+function setupPreload(): void {
+	document.addEventListener("mouseover", (e) => {
+		const a = (e.target as Element).closest("a");
+		if (!a) return;
+		const href = a.getAttribute("href");
+		if (!href) return;
+		if (/^(https?:\/\/|\/\/|#|mailto:|tel:)/.test(href)) return;
+
+		const preloadData = a.hasAttribute("data-sigil-preload-data");
+		const preloadCode = a.hasAttribute("data-sigil-preload-code");
+		if (!preloadData && !preloadCode) return;
+
+		if (preloadTimer) clearTimeout(preloadTimer);
+		preloadTimer = setTimeout(() => {
+			if (preloadCode) {
+				const link = document.createElement("link");
+				link.rel = "prefetch";
+				link.href = href;
+				document.head.appendChild(link);
+			}
+			if (preloadData) {
+				fetch(href, {
+					headers: { "x-grimoire-navigate": "1" },
+					priority: "low",
+				}).catch(() => {});
+			}
+		}, 80);
+	});
+
+	document.addEventListener("mouseout", (e) => {
+		const a = (e.target as Element).closest("a");
+		if (!a) return;
+		if (preloadTimer) clearTimeout(preloadTimer);
+	});
+}
+
+async function navigate(path: string) {
+	const url = new URL(path, location.origin);
+
+	// C1: beforeNavigate — can cancel
+	if (beforeNavigateCb) {
+		const shouldProceed = beforeNavigateCb(url);
+		if (shouldProceed === false) return;
+	}
+
+	// C1: onNavigate
+	onNavigateCb?.(url);
+
+	// C2: Save scroll position before navigating away
+	saveScrollPosition();
+
+	const res = await fetch(path, { headers: { "x-grimoire-navigate": "1" } });
+	const contentType = res.headers.get("content-type") ?? "";
+	if (!contentType.includes("application/json")) {
+		window.location.href = path;
+		return;
+	}
+	const json = await res.json();
+	const { data, layoutData, params, pattern, head } = json;
+	const Page = routeMap[pattern];
+	if (!Page) {
+		window.location.href = path;
+		return;
+	}
+
+	disposeCurrentPage?.();
+	disposeCurrentPage = null;
+
+	// SPA navigation: empty pool so components create fresh DOM
+	pushHydrationNodes([]);
+	let rootNode: any;
+	disposeCurrentPage = withEffectScope(() => {
+		try {
+			const matchedLayouts = layoutList
+				.filter(
+					(l) =>
+						l.path === "/" ||
+						pattern === l.path ||
+						pattern.startsWith(l.path + "/"),
+				)
+				.sort((a, b) => a.path.length - b.path.length);
+
+			let renderFn = () => {
+				const pageNode = Page({ data, params });
+				const pageDiv = document.createElement("div");
+				pageDiv.id = "grimoire-page";
+				pageDiv.appendChild(pageNode);
+				return pageDiv;
+			};
+
+			for (let i = matchedLayouts.length - 1; i >= 0; i--) {
+				const LayoutComponent = matchedLayouts[i].component;
+				const innerRender = renderFn;
+				const currentLayoutData = layoutData?.[i];
+				renderFn = () => {
+					const childNode = innerRender();
+					return LayoutComponent({
+						data: currentLayoutData,
+						params,
+						children: childNode,
+					});
+				};
+			}
+
+			rootNode = renderFn();
+		} catch (e) {
+			console.error(e);
+		}
+	});
+	popHydrationNodes();
+
+	// Update head from navigation response
+	updateHead(head);
+
+	document.title = head?.title ?? document.title;
+	document.getElementById("grimoire-root")?.replaceChildren(rootNode);
+
+	currentPath = path;
+
+	// C2: Restore scroll position
+	restoreScrollPosition(path);
+
+	// C1: afterNavigate
+	afterNavigateCb?.(url);
+}
+
+export function initRouter(
+	routes: Record<string, any>,
+	layouts: any[],
+	initialDispose?: () => void,
+) {
+	routeMap = routes;
+	layoutList = layouts;
+	disposeCurrentPage = initialDispose ?? null;
+	currentPath = location.pathname;
+
+	// C2: Save initial scroll position
+	saveScrollPosition();
+
+	document.addEventListener("click", handleClick);
+	window.addEventListener("popstate", () => {
+		if (location.pathname !== currentPath) {
+			saveScrollPosition();
+			currentPath = location.pathname;
+			navigate(location.pathname);
+		}
+	});
+
+	// C3: Setup preloading
+	setupPreload();
+}
+
+function updateHead(headHtml: string) {
+	document
+		.querySelectorAll("[data-grimoire-head]")
+		.forEach((el) => el.remove());
+	const parsed = headHtml
+		? new DOMParser().parseFromString(`<head>${headHtml}</head>`, "text/html")
+		: null;
+	const incomingTitle = parsed?.querySelector("title");
+	document.querySelectorAll("title").forEach((el) => el.remove());
+	document.title = incomingTitle?.textContent ?? document.title;
+	if (parsed) {
+		for (const el of Array.from(parsed.head.children)) {
+			if (el.tagName === "TITLE") continue;
+			(el as HTMLElement).dataset.grimoireHead = "1";
+			document.head.appendChild(el);
+		}
+	}
+}
+
+function handleClick(e: MouseEvent) {
+	const a = (e.target as Element).closest("a");
+	if (!a) return;
+	const href = a.getAttribute("href");
+	if (!href) return;
+	if (/^(https?:\/\/|\/\/|#|mailto:|tel:)/.test(href)) return;
+	e.preventDefault();
+	navigate(href);
+}

package/src/env/index.ts

@@ -0,0 +1,25 @@
+export const publicPrefix = "PUBLIC_";
+
+export function filterPublic(
+	env: Record<string, string | undefined>,
+): Record<string, string> {
+	const result: Record<string, string> = {};
+	for (const [key, value] of Object.entries(env)) {
+		if (key.startsWith(publicPrefix) && value !== undefined) {
+			result[key] = value;
+		}
+	}
+	return result;
+}
+
+export function filterPrivate(
+	env: Record<string, string | undefined>,
+): Record<string, string> {
+	const result: Record<string, string> = {};
+	for (const [key, value] of Object.entries(env)) {
+		if (!key.startsWith(publicPrefix) && value !== undefined) {
+			result[key] = value;
+		}
+	}
+	return result;
+}

package/src/env/plugin.ts

@@ -0,0 +1,13 @@
+import { join } from "node:path";
+
+export const envPlugin = () => ({
+	name: "grimoire-env",
+	setup(build: any) {
+		build.onResolve({ filter: /^\$env\/static\/public$/ }, () => ({
+			path: join(import.meta.dir, "public.ts"),
+		}));
+		build.onResolve({ filter: /^\$env\/static\/private$/ }, () => ({
+			path: join(import.meta.dir, "private.ts"),
+		}));
+	},
+});

package/src/env/private.ts

@@ -0,0 +1,5 @@
+import { filterPrivate } from "./index";
+
+// Runtime values — reads from live process.env on each access.
+// Never sent to the client; server-only.
+export const env: Record<string, string> = filterPrivate(process.env);

package/src/env/public.ts

@@ -0,0 +1,7 @@
+import { filterPublic } from "./index";
+
+// Inlined at build time — values captured from process.env during the build.
+// For runtime reads (when not compiled), fall back to live process.env.
+export const env = filterPublic(
+	typeof process !== "undefined" ? process.env : {},
+);

package/src/env/typegen.ts

@@ -0,0 +1,51 @@
+import { readFile, writeFile } from "node:fs/promises";
+import { join } from "node:path";
+
+export async function generateEnvTypes(
+	projectRoot: string,
+	outDir: string,
+): Promise<void> {
+	const envPath = join(projectRoot, ".env");
+	let envContent = "";
+	try {
+		envContent = await readFile(envPath, "utf-8");
+	} catch {
+		// no .env file — generate empty types
+	}
+
+	const publicVars: string[] = [];
+	const privateVars: string[] = [];
+
+	for (const line of envContent.split("\n")) {
+		const trimmed = line.trim();
+		if (!trimmed || trimmed.startsWith("#")) continue;
+		const eqIndex = trimmed.indexOf("=");
+		if (eqIndex === -1) continue;
+		const key = trimmed.slice(0, eqIndex).trim();
+		if (!key) continue;
+		if (key.startsWith("PUBLIC_")) {
+			publicVars.push(key);
+		} else {
+			privateVars.push(key);
+		}
+	}
+
+	const publicTypeContent = `// Auto-generated by Grimoire. Do not edit.
+declare module "$env/static/public" {
+${publicVars.map((v) => `\texport const ${v}: string;`).join("\n")}
+${publicVars.length === 0 ? "\texport {};" : ""}
+}
+`;
+
+	const privateTypeContent = `// Auto-generated by Grimoire. Do not edit.
+declare module "$env/static/private" {
+${privateVars.map((v) => `\texport const ${v}: string;`).join("\n")}
+${privateVars.length === 0 ? "\texport {};" : ""}
+}
+`;
+
+	await Promise.all([
+		writeFile(join(outDir, "env-public.d.ts"), publicTypeContent, "utf-8"),
+		writeFile(join(outDir, "env-private.d.ts"), privateTypeContent, "utf-8"),
+	]);
+}

package/src/integrations/vite.ts

@@ -1,72 +1,72 @@
-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/head.ts

@@ -1,9 +1,19 @@
 import { createContext, getContext, setContext } from "@sigil-dev/runtime";
 
 const HeadKey = createContext<string[]>();
+const NonceKey = createContext<string>();
 
-export function initHead(): void {
+export function initHead(nonce?: string): void {
 	setContext(HeadKey, []);
+	if (nonce) setContext(NonceKey, nonce);
+}
+
+export function setHeadNonce(nonce: string): void {
+	setContext(NonceKey, nonce);
+}
+
+export function getHeadNonce(): string {
+	return getContext(NonceKey) ?? "";
 }
 
 export function collectHead(): string {
@@ -17,7 +27,17 @@ export function Head({
 }): string | Comment {
 	if (typeof document === "undefined") {
 		const buf = getContext(HeadKey);
-		if (buf) buf.push(children as string);
+		if (buf) {
+			const nonce = getContext(NonceKey);
+			if (nonce) {
+				const withNonce = String(children)
+					.replace(/<script /g, `<script nonce="${nonce}" `)
+					.replace(/<style /g, `<style nonce="${nonce}" `);
+				buf.push(withNonce);
+			} else {
+				buf.push(children as string);
+			}
+		}
 		return "";
 	}
 	if (children instanceof Node) {