@sigil-dev/grimoire 0.7.6 → 0.8.0

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

package/src/dev/hmr-client.ts

@@ -0,0 +1,158 @@
+export const HMR_CLIENT_SOURCE = `
+(function() {
+    let version = 0;
+
+    const staleRoutes = new Set();
+
+    async function applySwap(p) {
+        try {
+            const url = '/__grimoire__/m/' + p.modUrl + '?v=' + p.version;
+            const mod = await import(url);
+
+            // update route map — accessed via grimoire's initRouter export
+            if (window.__grimoire_routes__) {
+                window.__grimoire_routes__[p.pattern] = mod.default;
+            }
+
+            // re-render if currently on this pattern
+            const currentPattern = window.__grimoire_current_pattern__;
+            if (currentPattern === p.pattern && window.__grimoire_rerender__) {
+                await window.__grimoire_rerender__();
+            }
+        } catch (e) {
+            console.error('[sigil hmr] swap failed, reloading:', e);
+            location.reload();
+        }
+    }
+
+    async function refetchCurrent() {
+        if (window.__grimoire_navigate__) {
+            await window.__grimoire_navigate__(location.pathname, true);
+        } else {
+            location.reload();
+        }
+    }
+
+    function applyCss(hash, text) {
+        let el = document.getElementById('sigil-' + hash);
+        if (!el) {
+            el = document.createElement('style');
+            el.id = 'sigil-' + hash;
+            document.head.appendChild(el);
+        }
+        el.textContent = text;
+    }
+
+    function connect() {
+        const ws = new WebSocket(
+            (location.protocol === 'https:' ? 'wss' : 'ws') +
+            '://' + location.host + '/__grimoire__/hmr'
+        );
+
+        ws.onopen = () => {
+            console.log('[sigil hmr] connected');
+            document.getElementById('__grimoire_overlay__')?.remove();
+        };
+
+        ws.onmessage = async (ev) => {
+            const msg = JSON.parse(ev.data);
+            if (msg.type === 'error') { showOverlay(msg.message, msg.loc); return; }
+            if (msg.v !== undefined && msg.v <= version) return;
+            if (msg.v !== undefined) version = msg.v;
+
+            if (msg.type === 'batch') {
+                document.getElementById('__grimoire_overlay__')?.remove();
+
+                let hasReload = false;
+                let swapPayload = null;
+                const cssPayloads = [];
+                const stalePatterns = [];
+
+                for (const p of msg.payloads) {
+                    if (p.kind === 'reload') { hasReload = true; break; }
+                    if (p.kind === 'css') cssPayloads.push(p);
+                    if (p.kind === 'swap') swapPayload = p;
+                    if (p.kind === 'stale') stalePatterns.push(...p.patterns);
+                    if (p.kind === 'invalidate') refetchCurrent();
+                }
+
+                if (hasReload) { location.reload(); return; }
+
+                // apply CSS instantly
+                for (const p of cssPayloads) applyCss(p.hash, p.text);
+
+                // mark stale routes
+                for (const pattern of stalePatterns) staleRoutes.add(pattern);
+
+                // apply swap
+                if (swapPayload) {
+                    await applySwap(swapPayload);
+                }
+            }
+        };
+
+        ws.onclose = () => {
+            console.log('[sigil hmr] disconnected, reconnecting...');
+            const retry = setInterval(async () => {
+                try {
+                    await fetch('/', { method: 'HEAD' });
+                    clearInterval(retry);
+                    location.reload();
+                } catch {}
+            }, 300);
+        };
+    }
+
+    function stripAnsi(str) {
+        return str.replace(/\u001b[[0-9;]*m/g, '');
+    }
+
+    function unescapeHtml(str) {
+        let result = str;
+        // run twice to handle double-escaped entities
+        for (let i = 0; i < 2; i++) {
+            result = result
+                .replace(/&amp;/g, '&')
+                .replace(/&lt;/g, '<')
+                .replace(/&gt;/g, '>')
+                .replace(/&quot;/g, '"')
+                .replace(/&#39;/g, "'");
+        }
+        return result;
+    }
+
+    function showOverlay(message, loc) {
+        document.getElementById('__grimoire_overlay__')?.remove();
+        const clean = unescapeHtml(stripAnsi(message));
+        const d = document.createElement('div');
+        d.id = '__grimoire_overlay__';
+        d.style.cssText = [
+            'position:fixed;inset:0;z-index:99999',
+            'background:rgba(15,15,20,.94)',
+            'color:#ff8a8a',
+            'font:13px/1.6 monospace',
+            'padding:40px',
+            'overflow:auto',
+            'white-space:pre-wrap',
+        ].join(';');
+
+        d.textContent = '[sigil] compile error\\n\\n' + clean;
+
+        if (loc) {
+            const link = document.createElement('a');
+            link.href = '/__grimoire__/open?file=' + encodeURIComponent(loc.file) +
+                '&line=' + loc.line + '&col=' + loc.col;
+            link.style.cssText = 'color:#88aaff;text-decoration:underline;cursor:pointer;display:block;margin:8px 0 16px';
+            link.textContent = loc.file + ':' + loc.line + ':' + loc.col;
+            link.onclick = (e) => { e.preventDefault(); fetch(link.href); };
+            d.appendChild(link);
+        }
+
+        d.title = 'Click anywhere to dismiss';
+        d.onclick = (ev) => { if (ev.target === d) d.remove(); };
+        document.body.appendChild(d);
+    }
+
+    connect();
+})();
+`;

package/src/dev/hmr-server.ts

@@ -0,0 +1,187 @@
+import { mkdirSync, writeFileSync } from "node:fs";
+import { join, relative } from "node:path";
+import type { ServerWebSocket } from "bun";
+import { compileForBrowser } from "./compile-module";
+import type { DevGraph } from "./graph";
+import { normalizePath } from "./paths";
+import { safeRead } from "./watcher";
+
+export class HmrServer {
+	private clients = new Set<ServerWebSocket<any>>();
+	private v = 0;
+	get clientCount() {
+		return this.clients.size;
+	}
+	addClient(ws: ServerWebSocket<any>) {
+		this.clients.add(ws);
+		ws.send(JSON.stringify({ type: "connected" }));
+	}
+
+	removeClient(ws: ServerWebSocket<any>) {
+		this.clients.delete(ws);
+	}
+
+	send(msg: object) {
+		const s = JSON.stringify(msg);
+		for (const c of this.clients) c.send(s);
+	}
+
+	batch(payloads: object[]) {
+		this.send({ type: "batch", payloads, v: ++this.v });
+	}
+
+	reload() {
+		console.log("[sigil hmr] sending reload to", this.clients.size, "clients");
+		this.batch([{ kind: "reload" }]);
+	}
+
+	error(message: string, loc?: { file: string; line: number; col: number }) {
+		this.send({ type: "error", message, loc });
+	}
+}
+
+function extractLoc(
+	e: any,
+	filePath: string,
+): { file: string; line: number; col: number } | undefined {
+	// Babel errors have e.loc.line / e.loc.column
+	if (e?.loc?.line) {
+		return {
+			file: filePath,
+			line: e.loc.line,
+			col: e.loc.column ?? 0,
+		};
+	}
+	// fallback: parse "file:line:col" from message
+	const m = String(e?.message ?? "").match(/:(\d+):(\d+)$/);
+	if (m) {
+		return {
+			file: filePath,
+			line: Number(m[1]),
+			col: Number(m[2]),
+		};
+	}
+	return undefined;
+}
+
+export async function compileAndSwap(
+	filePath: string,
+	graph: DevGraph,
+	hmr: HmrServer,
+	projectRoot: string,
+	routeTree: any,
+): Promise<void> {
+	const key = normalizePath(filePath);
+	const node = graph.get(key);
+
+	try {
+		const result = await compileForBrowser(filePath, projectRoot);
+
+		// write to dev-modules cache
+		const devModulesDir = join(projectRoot, ".grimoire/dev-modules");
+		mkdirSync(devModulesDir, { recursive: true });
+		const { createHash } = await import("node:crypto");
+		const fileHash = createHash("md5")
+			.update(filePath)
+			.digest("hex")
+			.slice(0, 8);
+		const v = graph.bump(key);
+		const cachePath = join(devModulesDir, `${fileHash}_v${v}.js`);
+		writeFileSync(cachePath, result.js);
+
+		// store in graph node
+		if (node) {
+			node.compiled = {
+				js: result.js,
+				css: result.css,
+				cssHash: result.cssHash,
+				specifiers: [], // populated in Step 4
+			};
+		}
+
+		// find affected route pattern
+		const affectedRoutes = graph.affectedRoutes(key);
+		const routeFile = node?.isRoute ?? affectedRoutes[0] ?? null;
+
+		if (!routeFile) {
+			// no route found — fall back to reload
+			console.log("[sigil hmr] no route affected, reloading");
+			hmr.reload();
+			return;
+		}
+
+		// client-relative path for the module URL
+		const clientPath = relative(projectRoot, filePath).replace(/\\/g, "/");
+		const modUrl = `${clientPath}.js`;
+
+		console.log("[sigil hmr] compiled:", filePath, `v=${v}`);
+
+		const payloads: object[] = [];
+
+		// CSS payload if style changed
+		if (result.css) {
+			payloads.push({
+				kind: "css",
+				hash: result.cssHash,
+				text: result.css,
+			});
+		}
+
+		// swap payload
+		payloads.push({
+			kind: "swap",
+			pattern: routeFile.path,
+			modUrl,
+			version: v,
+			cachePath: `${fileHash}_v${v}.js`, // server-side cache filename
+		});
+
+		// stale payloads for other affected routes
+		const otherRoutes = affectedRoutes.filter((r) => r !== routeFile);
+		if (otherRoutes.length > 0) {
+			payloads.push({
+				kind: "stale",
+				patterns: otherRoutes.map((r) => r.path),
+			});
+		}
+		console.log(
+			"[sigil hmr] sending batch:",
+			JSON.stringify(payloads, null, 2),
+		);
+		hmr.batch(payloads);
+	} catch (e: any) {
+		const loc = extractLoc(e, filePath);
+		console.error("[sigil hmr] compile error:", e.message);
+		hmr.error(e.message ?? String(e), loc);
+		// no bump — old version stays live
+	}
+}
+
+export async function handleChange(
+	filePath: string,
+	graph: DevGraph,
+	hmr: HmrServer,
+	srcDir: string,
+	projectRoot: string,
+	routeTree: any,
+): Promise<void> {
+	const key = normalizePath(filePath);
+	const source = await safeRead(filePath);
+	if (!source) {
+		hmr.reload();
+		return;
+	}
+	if (graph.hasCycle(key)) {
+		hmr.reload();
+		return;
+	}
+	const node = graph.get(key);
+	if (!node) {
+		console.log("[sigil hmr] unknown file, reloading:", filePath);
+		hmr.reload();
+		return;
+	}
+
+	console.log("[sigil hmr] changed:", filePath);
+	await compileAndSwap(filePath, graph, hmr, projectRoot, routeTree);
+}

package/src/dev/loader.ts

@@ -0,0 +1,47 @@
+import { mkdirSync, writeFileSync } from "node:fs";
+import { join } from "node:path";
+import { pathToFileURL } from "node:url";
+import { disposeModuleEffects } from "./effect-registry";
+import type { DevGraph } from "./graph";
+import { normalizePath } from "./paths";
+
+export function makeDevLoader(graph: DevGraph, projectRoot: string) {
+	const cacheDir = join(projectRoot, ".grimoire/dev-cache");
+	mkdirSync(cacheDir, { recursive: true });
+
+	return async function devLoadModule(filePath: string): Promise<any> {
+		const key = normalizePath(filePath);
+		disposeModuleEffects(key);
+		const v = graph.get(key)?.version ?? 0;
+
+		if (v === 0) {
+			// first load — let Bun handle it normally via SSR plugin
+			return import(filePath);
+		}
+
+		// versioned load — read the source, let the SSR plugin transform it,
+		// write transformed output to a unique cache path, import that
+		// We can't re-trigger the plugin, so we invoke the compile pipeline directly
+		const source = await Bun.file(filePath).text();
+		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 result = transformSync(source, {
+			configFile: false,
+			babelrc: false,
+			parserOpts: { plugins: ["typescript", "jsx"] },
+			plugins: [[sigilPlugin, { mode: "ssr", hash }]],
+			filename: filePath,
+		});
+
+		const transpiler = new Bun.Transpiler({ loader: "ts", target: "bun" });
+		const compiled = transpiler.transformSync(result?.code ?? "");
+
+		const cachePath = join(cacheDir, `${hash}_v${v}.js`);
+		writeFileSync(cachePath, compiled);
+
+		return import(pathToFileURL(cachePath).href);
+	};
+}

package/src/dev/paths.ts

@@ -0,0 +1,14 @@
+import { resolve } from "node:path";
+
+export function normalizePath(p: string) {
+	let n = resolve(p).replace(/\\/g, "/");
+	if (process.platform === "win32") n = n.toLowerCase();
+	return n;
+}
+
+export function keyFromUrl(pathname: string, prefix: string) {
+	// __grimoire__/m/src/lib/Example.tsx.js -> src/lib/Example.tsx
+	return decodeURIComponent(pathname.slice(prefix.length))
+		.replace(/\.js(\?.*)?$/, "")
+		.replace(/\\/g, "");
+}

package/src/dev/runtime-bundle.ts

@@ -0,0 +1,49 @@
+import { existsSync, mkdirSync } from "node:fs";
+import { join } from "node:path";
+
+export async function ensureRuntimeBundle(projectRoot: string): Promise<void> {
+	const outDir = join(projectRoot, "public/__grimoire__");
+	mkdirSync(outDir, { recursive: true });
+
+	// runtime
+	const runtimeOut = join(outDir, "runtime.js");
+	if (!(await Bun.file(runtimeOut).exists())) {
+		console.log("[sigil hmr] bundling runtime...");
+		const result = await Bun.build({
+			entrypoints: [
+				join(projectRoot, "node_modules/@sigil-dev/runtime/index.ts"),
+			],
+			outdir: outDir,
+			naming: "runtime.js",
+			target: "browser",
+			format: "esm",
+			minify: false,
+		});
+		if (!result.success)
+			console.error("[sigil hmr] runtime bundle failed:", result.logs);
+		else console.log("[sigil hmr] runtime bundled");
+	}
+
+	// grimoire client
+	const grimClientOut = join(outDir, "grimoire-client.js");
+	const ref = Bun.file(grimClientOut);
+	if (await ref.exists()) await ref.delete();
+	await Bun.write(
+		grimClientOut,
+		`
+    // Grimoire client shim for HMR dev mode
+    export function Head({ children }) {
+        if (children instanceof Node) {
+            document.head.appendChild(children);
+        }
+        return document.createComment("head");
+    }
+
+    export const navigate = (...args) => window.__grimoire_navigate__?.(...args);
+    export const beforeNavigate = (cb) => window.__grimoire_beforeNavigate__?.(cb);
+    export const onNavigate = (cb) => window.__grimoire_onNavigate__?.(cb);
+    export const afterNavigate = (cb) => window.__grimoire_afterNavigate__?.(cb);
+    `.trim(),
+	);
+	console.log("[sigil hmr] grimoire client shim written");
+}

package/src/dev/watcher.ts

@@ -0,0 +1,44 @@
+import { watch } from "node:fs";
+import { join } from "node:path";
+import { normalizePath } from "./paths";
+
+export type ChangeHandler = (filePath: string) => Promise<void>;
+
+export function startWatcher(
+	srcDir: string,
+	onChange: ChangeHandler,
+): () => void {
+	const pending = new Set<string>();
+	let debounce: Timer | null = null;
+
+	const flush = async () => {
+		const files = [...pending];
+		pending.clear();
+		for (const f of files) {
+			await onChange(f);
+		}
+	};
+
+	const watcher = watch(srcDir, { recursive: true }, (_evt, filename) => {
+		console.log("[sigil hmr] fs.watch fired:", _evt, filename);
+		if (!filename) return;
+		const raw = join(srcDir, filename.toString());
+		pending.add(normalizePath(raw));
+		if (debounce) clearTimeout(debounce);
+		debounce = setTimeout(flush, 60);
+	});
+
+	return () => watcher.close();
+}
+
+/** Read file with atomic-write retry — VSCode on Windows writes temp-then-rename */
+export async function safeRead(filePath: string): Promise<string | null> {
+	for (let attempt = 0; attempt < 3; attempt++) {
+		const text = await Bun.file(filePath)
+			.text()
+			.catch(() => null);
+		if (text && text.length > 0) return text;
+		await Bun.sleep(30);
+	}
+	return null;
+}