@sigil-dev/grimoire 0.8.0 → 0.8.2

package/package.json

@@ -3,7 +3,7 @@
   "module": "index.ts",
   "type": "module",
   "private": false,
-  "version": "0.8.0",
+  "version": "0.8.2",
   "exports": {
     ".": "./index.ts",
     "./server": "./server.ts",
@@ -14,7 +14,8 @@
     "./vite": "./src/integrations/vite.ts",
     "./bun": "./src/rendering/ssrPlugin.ts",
     "./env/public": "./src/env/public.ts",
-    "./env/private": "./src/env/private.ts"
+    "./env/private": "./src/env/private.ts",
+    "./logger": "./src/logger/index.ts"
   },
   "bin": {
     "grimoire": "src/sync.ts"
@@ -32,13 +33,13 @@
     "vite": "^8.0.16"
   },
   "peerDependencies": {
-    "@sigil-dev/compiler": "0.8.0",
-    "@sigil-dev/runtime": "0.8.0",
+    "@sigil-dev/compiler": "0.8.2",
+    "@sigil-dev/runtime": "0.8.2",
     "typescript": "^5"
   },
   "devDependencies": {
     "@types/bun": "latest",
-    "@sigil-dev/compiler": "0.8.0",
-    "@sigil-dev/runtime": "0.8.0"
+    "@sigil-dev/compiler": "0.8.2",
+    "@sigil-dev/runtime": "0.8.2"
   }
 }

package/server.ts

@@ -1,3 +1,4 @@
+export { log } from "./src/logger/instance.ts";
 export { scanRoutes } from "./src/routing/scanner";
 export { createServer } from "./src/server";
 export { buildProject } from "./src/server/build";

package/src/client/router.ts

@@ -1,291 +1,291 @@
-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;
-	history.pushState(null, "", 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);
-}
+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 | undefined) | 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 | undefined): 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;
+	history.pushState(null, "", 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);
+}

package/src/dev/compile-module.ts

@@ -1,13 +1,10 @@
 import { existsSync } from "node:fs";
-import { dirname, extname, join, relative } from "node:path";
+import { dirname, 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/...
@@ -72,7 +69,7 @@ function rewriteImports(
 ): string {
 	return code.replace(
 		/(from\s+|import\s+)(["'])([^"']+)\2/g,
-		(match, keyword, quote, specifier) => {
+		(_match, keyword, quote, specifier) => {
 			const rewritten = rewriteSpecifier(specifier, filePath, projectRoot);
 			return `${keyword}${quote}${rewritten}${quote}`;
 		},
@@ -119,11 +116,6 @@ export async function compileForBrowser(
 		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 ?? "");
@@ -157,13 +149,12 @@ export async function compileForBrowser(
 	// inject scoped CSS at runtime
 	if (css) {
 		//biome-ignore lint: bro shut up already
-		js =
-			`if (typeof document !== 'undefined' && !document.getElementById('sigil-${hash}')) {
+		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;
+}\n${js}`;
 	}
 
 	// rewrite imports to browser-servable URLs