@sigil-dev/grimoire 0.7.6 → 0.8.0

package/index.ts

@@ -1,34 +1,35 @@
-export { Head } from "./src/rendering/head";
-export type { RouteFile, RouteTree } from "./src/routing/scanner";
-export type { ErrorResult } from "./src/sentinels/error.ts";
-export { error, isErrorResult } from "./src/sentinels/error.ts";
-export type { FailResult } from "./src/sentinels/fail.ts";
-export { fail, isFailResult } from "./src/sentinels/fail.ts";
-export type { RedirectResult } from "./src/sentinels/redirect.ts";
-export { isRedirectResult, redirect } from "./src/sentinels/redirect.ts";
-export type {
-  CookieOptions,
-  Cookies,
-  Handle,
-  RequestEvent,
-  ResolveFunction,
-} from "./src/server/hooks";
-export { createHooks, sequence } from "./src/server/hooks";
-export type {
-  BuiltinWorkerMode,
-  CoordinatorContext,
-  GrimoireConfig,
-  GrimoirePlugin,
-  LayoutServerLoad,
-  LoadContext,
-  PageServerLoad,
-  RenderContext,
-  RequestHandler,
-  RouteInfo,
-  TypedLoadContext,
-  WorkerDescriptor,
-  WorkerEnv,
-  WorkerMode,
-  WsRouteHandler,
-} from "./src/types";
-export { defineConfig } from "./src/types";
+export { Head } from "./src/rendering/head";
+export { registerSSRPlugin } from "./src/rendering/ssrPlugin.ts";
+export type { RouteFile, RouteTree } from "./src/routing/scanner";
+export type { ErrorResult } from "./src/sentinels/error.ts";
+export { error, isErrorResult } from "./src/sentinels/error.ts";
+export type { FailResult } from "./src/sentinels/fail.ts";
+export { fail, isFailResult } from "./src/sentinels/fail.ts";
+export type { RedirectResult } from "./src/sentinels/redirect.ts";
+export { isRedirectResult, redirect } from "./src/sentinels/redirect.ts";
+export type {
+	CookieOptions,
+	Cookies,
+	Handle,
+	RequestEvent,
+	ResolveFunction,
+} from "./src/server/hooks";
+export { createHooks, sequence } from "./src/server/hooks";
+export type {
+	BuiltinWorkerMode,
+	CoordinatorContext,
+	GrimoireConfig,
+	GrimoirePlugin,
+	LayoutServerLoad,
+	LoadContext,
+	PageServerLoad,
+	RenderContext,
+	RequestHandler,
+	RouteInfo,
+	TypedLoadContext,
+	WorkerDescriptor,
+	WorkerEnv,
+	WorkerMode,
+	WsRouteHandler,
+} from "./src/types";
+export { defineConfig } from "./src/types";

package/package.json

@@ -3,10 +3,7 @@
   "module": "index.ts",
   "type": "module",
   "private": false,
-  "version": "0.7.6",
-  "devDependencies": {
-    "@types/bun": "latest"
-  },
+  "version": "0.8.0",
   "exports": {
     ".": "./index.ts",
     "./server": "./server.ts",
@@ -32,11 +29,16 @@
     "@babel/plugin-syntax-typescript": "^8.0.0-rc.6",
     "@babel/preset-typescript": "^8.0.0-rc.6",
     "@babel/types": "^8.0.0-rc.6",
-    "@sigil-dev/compiler": "0.7.6",
-    "@sigil-dev/runtime": "0.7.6",
     "vite": "^8.0.16"
   },
   "peerDependencies": {
+    "@sigil-dev/compiler": "0.8.0",
+    "@sigil-dev/runtime": "0.8.0",
     "typescript": "^5"
+  },
+  "devDependencies": {
+    "@types/bun": "latest",
+    "@sigil-dev/compiler": "0.8.0",
+    "@sigil-dev/runtime": "0.8.0"
   }
 }

package/preload.js

@@ -1,2 +1,3 @@
-import { registerSSRPlugin } from "./src/ssr/plugin.ts"
-registerSSRPlugin()
+import { registerSSRPlugin } from "./src/rendering/ssrPlugin.ts";
+
+registerSSRPlugin();

package/server.ts

@@ -1,13 +1,13 @@
-export { createServer } from "./src/server";
-export { buildProject } from "./src/server/build";
-export { parseCookies } from "./src/server/cookie-utils";
-export { startCoordinator } from "./src/server/coordinator.ts";
-export {
-  runDeserializeLocals,
-  runRouteRequest,
-  runSerializeLocals,
-  runWorkerSpawn,
-} from "./src/server/plugins";
-export { scanRoutes } from "./src/routing/scanner";
-export type { TypegenConfig } from "./src/typegen";
-export { generateTypes } from "./src/typegen";
+export { scanRoutes } from "./src/routing/scanner";
+export { createServer } from "./src/server";
+export { buildProject } from "./src/server/build";
+export { parseCookies } from "./src/server/cookie-utils";
+export { startCoordinator } from "./src/server/coordinator.ts";
+export {
+	runDeserializeLocals,
+	runRouteRequest,
+	runSerializeLocals,
+	runWorkerSpawn,
+} from "./src/server/plugins";
+export type { TypegenConfig } from "./src/typegen";
+export { generateTypes } from "./src/typegen";

package/src/client/head.ts

@@ -1,29 +1,29 @@
-let headElements: (string | Node)[] = [];
-
-export function resetHead(): void {
-	headElements = [];
-}
-
-export function collectHead(): (string | Node)[] {
-	return headElements;
-}
-
-export function applyHead(): void {
-	document.querySelectorAll("[data-sigil-head]").forEach((el) => el.remove());
-	for (const el of headElements) {
-		if (el instanceof Node) {
-			const clone = el.cloneNode(true) as HTMLElement;
-			clone.dataset.sigilHead = "1";
-			document.head.appendChild(clone);
-		}
-	}
-}
-
-export function Head({ children }: { children: string | Node }): Comment {
-	if (typeof document === "undefined") {
-		headElements.push(children);
-	} else if (children instanceof Node) {
-		(headElements as Node[]).push(children);
-	}
-	return document.createComment("head");
-}
+let headElements: (string | Node)[] = [];
+
+export function resetHead(): void {
+	headElements = [];
+}
+
+export function collectHead(): (string | Node)[] {
+	return headElements;
+}
+
+export function applyHead(): void {
+	document.querySelectorAll("[data-sigil-head]").forEach((el) => el.remove());
+	for (const el of headElements) {
+		if (el instanceof Node) {
+			const clone = el.cloneNode(true) as HTMLElement;
+			clone.dataset.sigilHead = "1";
+			document.head.appendChild(clone);
+		}
+	}
+}
+
+export function Head({ children }: { children: string | Node }): Comment {
+	if (typeof document === "undefined") {
+		headElements.push(children);
+	} else if (children instanceof Node) {
+		(headElements as Node[]).push(children);
+	}
+	return document.createComment("head");
+}

package/src/client/router.ts

@@ -1,7 +1,10 @@
 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;
@@ -11,6 +14,28 @@ 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;
 }
@@ -78,19 +103,60 @@ function setupPreload(): void {
 	});
 }
 
-async function navigate(path: string) {
+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);
 
-	// 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" } });
@@ -107,69 +173,55 @@ async function navigate(path: string) {
 		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;
-
-	// 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();
+			rootNode = buildRouteTree(lastState!);
 		} 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
+	history.pushState(null, "", path);
 	restoreScrollPosition(path);
-
-	// C1: afterNavigate
 	afterNavigateCb?.(url);
 }
 
 export function initRouter(
-	routes: Record<string, any>,
+	routes: Record<
+		string,
+		((props: any) => any) & { load?: (ctx: any) => Promise<any> }
+	>,
 	layouts: any[],
 	initialDispose?: () => void,
 ) {
@@ -178,9 +230,24 @@ export function initRouter(
 	disposeCurrentPage = initialDispose ?? null;
 	currentPath = location.pathname;
 
-	// C2: Save initial scroll position
-	saveScrollPosition();
+	// 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) {
@@ -189,19 +256,19 @@ export function initRouter(
 			navigate(location.pathname);
 		}
 	});
-
-	// C3: Setup preloading
 	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) {

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);
+}