@sigil-dev/grimoire 0.7.6 → 0.7.7

package/src/client/router.ts

@@ -1,224 +1,290 @@
-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);
-}
+import { popHydrationNodes, pushHydrationNodes } from "@sigil-dev/runtime";
+import { withEffectScope } from "./scope";
+
+let routeMap: Record<
+	string,
+	((props: any) => any) & { load?: (ctx: any) => Promise<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;
+
+// // HMR
+// (globalThis as any).__grimoire_routes__ = routeMap;
+// (globalThis as any).__grimoire_current_pattern__ = currentPath;
+// (globalThis as any).__grimoire_navigate__ = navigate;
+
+export async function hmrRerender(): Promise<void> {
+	if (!lastState) {
+		location.reload();
+		return;
+	}
+	disposeCurrentPage?.();
+	pushHydrationNodes([]);
+	let rootNode: any;
+	disposeCurrentPage = withEffectScope(() => {
+		rootNode = buildRouteTree(lastState!);
+	});
+	popHydrationNodes();
+	document.getElementById("grimoire-root")?.replaceChildren(rootNode);
+}
+
+// (globalThis as any).__grimoire_rerender__ = hmrRerender;
+
+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);
+	});
+}
+
+let lastState: {
+	data: any;
+	layoutData: any[];
+	params: any;
+	pattern: string;
+} | null = null;
+
+function buildRouteTree(state: typeof lastState): any {
+	const { data, layoutData, params, pattern } = state!;
+	const Page = routeMap[pattern];
+	if (!Page) throw new Error(`no component for pattern ${pattern}`);
+
+	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,
+			});
+		};
+	}
+
+	return renderFn();
+}
+
+export async function navigate(path: string) {
+	const url = new URL(path, location.origin);
+
+	if (beforeNavigateCb) {
+		const shouldProceed = beforeNavigateCb(url);
+		if (shouldProceed === false) return;
+	}
+	onNavigateCb?.(url);
+	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;
+	}
+
+	let mergedData = data;
+	if (Page.load) {
+		try {
+			const clientData = await Page.load({
+				params,
+				url,
+				request: new Request(url),
+			});
+			mergedData = { ...clientData, ...data };
+		} catch (e: any) {
+			if (e?.location) {
+				window.location.href = e.location;
+				return;
+			}
+			console.error("[grimoire] universal load error:", e);
+		}
+	}
+
+	// track state for HMR rerender
+	lastState = { data: mergedData, layoutData, params, pattern };
+	(globalThis as any).__grimoire_current_pattern__ = pattern;
+
+	disposeCurrentPage?.();
+	disposeCurrentPage = null;
+	pushHydrationNodes([]);
+	let rootNode: any;
+	disposeCurrentPage = withEffectScope(() => {
+		try {
+			rootNode = buildRouteTree(lastState!);
+		} catch (e) {
+			console.error(e);
+		}
+	});
+	popHydrationNodes();
+
+	updateHead(head);
+	document.title = head?.title ?? document.title;
+	document.getElementById("grimoire-root")?.replaceChildren(rootNode);
+	currentPath = path;
+	restoreScrollPosition(path);
+	afterNavigateCb?.(url);
+}
+
+export function initRouter(
+	routes: Record<
+		string,
+		((props: any) => any) & { load?: (ctx: any) => Promise<any> }
+	>,
+	layouts: any[],
+	initialDispose?: () => void,
+) {
+	routeMap = routes;
+	layoutList = layouts;
+	disposeCurrentPage = initialDispose ?? null;
+	currentPath = location.pathname;
+
+	// set initial HMR state from SSR
+	const stateEl = document.getElementById("__grimoire_state__");
+	if (stateEl) {
+		const state = JSON.parse(stateEl.textContent!);
+		lastState = {
+			data: state.data,
+			layoutData: state.layoutData,
+			params: state.params,
+			pattern: state.pattern,
+		};
+		(globalThis as any).__grimoire_current_pattern__ = state.pattern;
+		(globalThis as any).__grimoire_routes__ = routeMap;
+		(globalThis as any).__grimoire_rerender__ = hmrRerender;
+		(globalThis as any).__grimoire_navigate__ = (path: string) =>
+			navigate(path);
+	}
+
+	saveScrollPosition();
+	document.addEventListener("click", handleClick);
+	window.addEventListener("popstate", () => {
+		if (location.pathname !== currentPath) {
+			saveScrollPosition();
+			currentPath = location.pathname;
+			navigate(location.pathname);
+		}
+	});
+	setupPreload();
+}
+
+function updateHead(headHtml: string) {
+	document
+		.querySelectorAll("[data-grimoire-head]")
+		//biome-ignore lint/suspicious/useIterableCallbackReturn: shut up
+		.forEach((el) => el.remove());
+	const parsed = headHtml
+		? new DOMParser().parseFromString(`<head>${headHtml}</head>`, "text/html")
+		: null;
+	const incomingTitle = parsed?.querySelector("title");
+	//biome-ignore lint/suspicious/useIterableCallbackReturn: shut up
+	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);
+}