@sigil-dev/grimoire 0.7.5 → 0.7.7

package/src/client/router.ts

@@ -1,67 +1,281 @@
+import { popHydrationNodes, pushHydrationNodes } from "@sigil-dev/runtime";
 import { withEffectScope } from "./scope";
 
-let routeMap: Record<string, (props: any) => any> = {};
+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;
 
-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);
+// // 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);
 }
-let currentPath = location.pathname;
 
 export function initRouter(
-	routes: Record<string, (props: any) => any>,
+	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());
-	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);
+	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);
+		}
 	}
 }
 

package/src/dev/compile-module.ts

@@ -0,0 +1,173 @@
+import { existsSync } from "node:fs";
+import { dirname, extname, join, relative } from "node:path";
+import { pathToFileURL } from "node:url";
+import type { DevGraph } from "./graph";
+import { normalizePath } from "./paths";
+
+const RUNTIME_URL = "/__grimoire__/runtime.js";
+const MODULES_BASE = "/__grimoire__/m/";
+const DEPS_BASE = "/__grimoire__/dep/";
+
+/**
+ * Rewrite a single import specifier to a browser-servable URL.
+ * project-relative → /__grimoire__/m/...
+ * @sigil-dev/runtime → /__grimoire__/runtime.js
+ * bare npm → /__grimoire__/dep/...
+ * relative → /__grimoire__/m/... (resolved)
+ */
+function rewriteSpecifier(
+	specifier: string,
+	fromFile: string,
+	projectRoot: string,
+): string {
+	if (specifier === "@sigil-dev/runtime") return RUNTIME_URL;
+	// if (specifier.startsWith("@sigil-dev/")) return RUNTIME_URL; // all sigil packages
+
+	// relative import — resolve to absolute, then make a module URL
+	if (specifier.startsWith(".")) {
+		const resolved = join(dirname(fromFile), specifier);
+		for (const ext of [".ts", ".tsx", ".js", ".jsx"]) {
+			const candidate = resolved.endsWith(ext) ? resolved : resolved + ext;
+			if (existsSync(candidate)) {
+				const rel = relative(projectRoot, candidate).replace(/\\/g, "/");
+				return `${MODULES_BASE}${rel}.js`;
+			}
+		}
+		// already has extension
+		const rel = relative(projectRoot, resolved).replace(/\\/g, "/");
+		return `${MODULES_BASE}${rel}.js`;
+	}
+
+	// $lib alias
+	if (specifier.startsWith("$lib/")) {
+		const rel = specifier.replace("$lib/", "src/lib/");
+		// try common extensions
+		for (const ext of [".ts", ".tsx", ".js", ".jsx"]) {
+			const candidate = join(projectRoot, rel + ext);
+			if (existsSync(candidate)) {
+				return `${MODULES_BASE}${rel}${ext}.js`;
+			}
+		}
+		return `${MODULES_BASE}${rel}.ts.js`; // fallback
+	}
+
+	// $env — keep as-is, these are virtual modules handled elsewhere
+	if (specifier.startsWith("$env/")) return specifier;
+
+	// bare npm specifier → dep bundle
+	const pkgName = specifier.startsWith("@")
+		? specifier.split("/").slice(0, 2).join("/")
+		: specifier.split("/")[0];
+	return `${DEPS_BASE}${pkgName!.replace("/", "__")}.js`;
+}
+
+/**
+ * Rewrite all import/export from specifiers in compiled JS output.
+ * Works on the static pattern `from "..."` — sufficient for Babel output.
+ */
+function rewriteImports(
+	code: string,
+	filePath: string,
+	projectRoot: string,
+): string {
+	return code.replace(
+		/(from\s+|import\s+)(["'])([^"']+)\2/g,
+		(match, keyword, quote, specifier) => {
+			const rewritten = rewriteSpecifier(specifier, filePath, projectRoot);
+			return `${keyword}${quote}${rewritten}${quote}`;
+		},
+	);
+}
+
+export interface CompileResult {
+	js: string;
+	css: string | null;
+	cssHash: string;
+}
+
+export async function compileForBrowser(
+	filePath: string,
+	projectRoot: string,
+): Promise<CompileResult> {
+	const source = await Bun.file(filePath).text();
+
+	// extract scoped CSS
+	const STYLE_RE = /<style[^>]*>([\s\S]*?)<\/style>/i;
+	const { computeHash, scopeCSS } = await import(
+		pathToFileURL(
+			join(
+				projectRoot,
+				"node_modules/@sigil-dev/compiler/src/babel/util/css.ts",
+			),
+		).href
+	);
+	const cssHash = computeHash(filePath);
+	const styleMatch = source.match(STYLE_RE);
+	const css = styleMatch ? scopeCSS(styleMatch[1].trim(), cssHash) : null;
+	const sourceNoStyle = source.replace(/<style[^>]*>[\s\S]*?<\/style>/gi, "");
+
+	// Babel transform — dom mode
+	const { transformSync } = await import("@babel/core");
+	const sigilPlugin = (await import("@sigil-dev/compiler/babel")).default;
+	const { createHash } = await import("node:crypto");
+	const hash = createHash("md5").update(filePath).digest("hex").slice(0, 8);
+
+	const babelResult = transformSync(sourceNoStyle, {
+		configFile: false,
+		babelrc: false,
+		parserOpts: { plugins: ["typescript", "jsx"] },
+		plugins: [[sigilPlugin, { mode: "dom", hash }]],
+		filename: filePath,
+	});
+
+	console.log(
+		"[compile] babel output first 500 chars:",
+		babelResult?.code?.slice(0, 500),
+	);
+	// strip TypeScript types
+	const transpiler = new Bun.Transpiler({ loader: "ts", target: "browser" });
+	let js = transpiler.transformSync(babelResult?.code ?? "");
+
+	const runtimeSpecifiers = [
+		"createSignal",
+		"createRawSignal",
+		"createEffect",
+		"createMemo",
+		"reconcile",
+		"claim",
+		"claimText",
+		"claimComment",
+		"hydrateKeyedList",
+		"insert",
+		"getHydrationNodes",
+		"pushHydrationNodes",
+		"popHydrationNodes",
+		"snapshot",
+		"tracking",
+		"createEffectPre",
+		"createInspectEffect",
+		"withEffectScope",
+	].join(", ");
+
+	js = js.replace(
+		/import\s*\{[^}]+\}\s*from\s*["']@sigil-dev\/runtime["'];?/,
+		`import { ${runtimeSpecifiers} } from "@sigil-dev/runtime";`,
+	);
+
+	// inject scoped CSS at runtime
+	if (css) {
+		//biome-ignore lint: bro shut up already
+		js =
+			`if (typeof document !== 'undefined' && !document.getElementById('sigil-${hash}')) {
+  const __s = document.createElement('style');
+  __s.id = 'sigil-${hash}';
+  __s.textContent = ${JSON.stringify(css)};
+  document.head.appendChild(__s);
+}\n` + js;
+	}
+
+	// rewrite imports to browser-servable URLs
+	js = rewriteImports(js, filePath, projectRoot);
+
+	return { js, css, cssHash };
+}

package/src/dev/effect-registry.ts

@@ -0,0 +1,23 @@
+import { normalizePath } from "./paths";
+
+const registry = new Map<string, (() => void)[]>();
+
+export function registerModuleEffect(
+	filePath: string,
+	dispose: () => void,
+): void {
+	const key = normalizePath(filePath);
+	let list = registry.get(key);
+	if (!list) registry.set(key, (list = []));
+	list.push(dispose);
+}
+
+export function disposeModuleEffects(filePath: string): void {
+	const key = normalizePath(filePath);
+	for (const d of registry.get(key) ?? []) {
+		try {
+			d();
+		} catch {}
+	}
+	registry.delete(key);
+}

package/src/dev/graph.ts

@@ -0,0 +1,114 @@
+import type { RouteFile } from "../routing/scanner";
+import { normalizePath } from "./paths";
+
+export interface SpecRef {
+	start: number;
+	end: number;
+	target: string; // normalizePath key or dep name
+	kind: "project" | "dep" | "runtime";
+}
+
+export interface ModNode {
+	key: string;
+	displayPath: string;
+	importers: Set<string>;
+	imports: Set<string>;
+	version: number;
+	compiled: {
+		js: string;
+		css: string | null;
+		cssHash: string;
+		specifiers: SpecRef[];
+	} | null;
+	isRoute: RouteFile | null;
+	lastSubstituted: Map<string, number>;
+}
+
+export class DevGraph {
+	private nodes = new Map<string, ModNode>();
+
+	get(key: string): ModNode | undefined {
+		return this.nodes.get(normalizePath(key));
+	}
+
+	getOrCreate(filePath: string, displayPath?: string): ModNode {
+		const key = normalizePath(filePath);
+		if (!this.nodes.has(key)) {
+			this.nodes.set(key, {
+				key,
+				displayPath: displayPath ?? filePath,
+				importers: new Set(),
+				imports: new Set(),
+				version: 0,
+				compiled: null,
+				isRoute: null,
+				lastSubstituted: new Map(),
+			});
+		}
+		return this.nodes.get(key)!;
+	}
+
+	addEdge(importerPath: string, importedPath: string): void {
+		const a = normalizePath(importerPath);
+		const b = normalizePath(importedPath);
+		this.getOrCreate(a).imports.add(b);
+		this.getOrCreate(b).importers.add(a);
+	}
+
+	/** DFS for cycles in the subgraph reachable from key via forward edges */
+	hasCycle(key: string): boolean {
+		const k = normalizePath(key);
+		const visited = new Set<string>();
+		const stack = new Set<string>();
+		const dfs = (node: string): boolean => {
+			if (stack.has(node)) return true;
+			if (visited.has(node)) return false;
+			visited.add(node);
+			stack.add(node);
+			for (const imp of this.nodes.get(node)?.imports ?? []) {
+				if (dfs(imp)) return true;
+			}
+			stack.delete(node);
+			return false;
+		};
+		return dfs(k);
+	}
+
+	/** Walk importers up to routes. Returns affected RouteFiles. */
+	affectedRoutes(changedKey: string): RouteFile[] {
+		const key = normalizePath(changedKey);
+		const seen = new Set<string>([key]);
+		const queue = [key];
+		const hits: RouteFile[] = [];
+		while (queue.length) {
+			const f = queue.pop()!;
+			const node = this.nodes.get(f);
+			if (!node) continue;
+			if (node.isRoute) {
+				hits.push(node.isRoute);
+				continue;
+			}
+			for (const importer of node.importers) {
+				if (!seen.has(importer)) {
+					seen.add(importer);
+					queue.push(importer);
+				}
+			}
+		}
+		return hits;
+	}
+
+	markRoute(filePath: string, route: RouteFile): void {
+		this.getOrCreate(filePath).isRoute = route;
+	}
+
+	bump(filePath: string): number {
+		const node = this.getOrCreate(filePath);
+		node.version++;
+		return node.version;
+	}
+
+	all(): IterableIterator<ModNode> {
+		return this.nodes.values();
+	}
+}