@sigil-dev/grimoire 0.7.6 → 0.7.7

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

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