@sigil-dev/grimoire 0.7.5 → 0.7.7

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

package/src/env/index.ts

@@ -0,0 +1,25 @@
+export const publicPrefix = "PUBLIC_";
+
+export function filterPublic(
+	env: Record<string, string | undefined>,
+): Record<string, string> {
+	const result: Record<string, string> = {};
+	for (const [key, value] of Object.entries(env)) {
+		if (key.startsWith(publicPrefix) && value !== undefined) {
+			result[key] = value;
+		}
+	}
+	return result;
+}
+
+export function filterPrivate(
+	env: Record<string, string | undefined>,
+): Record<string, string> {
+	const result: Record<string, string> = {};
+	for (const [key, value] of Object.entries(env)) {
+		if (!key.startsWith(publicPrefix) && value !== undefined) {
+			result[key] = value;
+		}
+	}
+	return result;
+}

package/src/env/plugin.ts

@@ -0,0 +1,13 @@
+import { join } from "node:path";
+
+export const envPlugin = () => ({
+	name: "grimoire-env",
+	setup(build: any) {
+		build.onResolve({ filter: /^\$env\/static\/public$/ }, () => ({
+			path: join(import.meta.dir, "public.ts"),
+		}));
+		build.onResolve({ filter: /^\$env\/static\/private$/ }, () => ({
+			path: join(import.meta.dir, "private.ts"),
+		}));
+	},
+});

package/src/env/private.ts

@@ -0,0 +1,5 @@
+import { filterPrivate } from "./index";
+
+// Runtime values — reads from live process.env on each access.
+// Never sent to the client; server-only.
+export const env: Record<string, string> = filterPrivate(process.env);

package/src/env/public.ts

@@ -0,0 +1,7 @@
+import { filterPublic } from "./index";
+
+// Inlined at build time — values captured from process.env during the build.
+// For runtime reads (when not compiled), fall back to live process.env.
+export const env = filterPublic(
+	typeof process !== "undefined" ? process.env : {},
+);

package/src/env/typegen.ts

@@ -0,0 +1,51 @@
+import { readFile, writeFile } from "node:fs/promises";
+import { join } from "node:path";
+
+export async function generateEnvTypes(
+	projectRoot: string,
+	outDir: string,
+): Promise<void> {
+	const envPath = join(projectRoot, ".env");
+	let envContent = "";
+	try {
+		envContent = await readFile(envPath, "utf-8");
+	} catch {
+		// no .env file — generate empty types
+	}
+
+	const publicVars: string[] = [];
+	const privateVars: string[] = [];
+
+	for (const line of envContent.split("\n")) {
+		const trimmed = line.trim();
+		if (!trimmed || trimmed.startsWith("#")) continue;
+		const eqIndex = trimmed.indexOf("=");
+		if (eqIndex === -1) continue;
+		const key = trimmed.slice(0, eqIndex).trim();
+		if (!key) continue;
+		if (key.startsWith("PUBLIC_")) {
+			publicVars.push(key);
+		} else {
+			privateVars.push(key);
+		}
+	}
+
+	const publicTypeContent = `// Auto-generated by Grimoire. Do not edit.
+declare module "$env/static/public" {
+${publicVars.map((v) => `\texport const ${v}: string;`).join("\n")}
+${publicVars.length === 0 ? "\texport {};" : ""}
+}
+`;
+
+	const privateTypeContent = `// Auto-generated by Grimoire. Do not edit.
+declare module "$env/static/private" {
+${privateVars.map((v) => `\texport const ${v}: string;`).join("\n")}
+${privateVars.length === 0 ? "\texport {};" : ""}
+}
+`;
+
+	await Promise.all([
+		writeFile(join(outDir, "env-public.d.ts"), publicTypeContent, "utf-8"),
+		writeFile(join(outDir, "env-private.d.ts"), privateTypeContent, "utf-8"),
+	]);
+}

package/src/integrations/vite.ts

@@ -47,6 +47,7 @@ export function grimoire(options: { routes?: string } = {}): Plugin {
 					const response = await renderRoute(
 						matched,
 						new Request(`http://localhost${req.url}`),
+						[],
 						(path) => vite.ssrLoadModule(path), // Vite transforms SSR files correctly
 					);
 

package/src/rendering/head.ts

@@ -1,9 +1,19 @@
 import { createContext, getContext, setContext } from "@sigil-dev/runtime";
 
 const HeadKey = createContext<string[]>();
+const NonceKey = createContext<string>();
 
-export function initHead(): void {
+export function initHead(nonce?: string): void {
 	setContext(HeadKey, []);
+	if (nonce) setContext(NonceKey, nonce);
+}
+
+export function setHeadNonce(nonce: string): void {
+	setContext(NonceKey, nonce);
+}
+
+export function getHeadNonce(): string {
+	return getContext(NonceKey) ?? "";
 }
 
 export function collectHead(): string {
@@ -17,7 +27,17 @@ export function Head({
 }): string | Comment {
 	if (typeof document === "undefined") {
 		const buf = getContext(HeadKey);
-		if (buf) buf.push(children as string);
+		if (buf) {
+			const nonce = getContext(NonceKey);
+			if (nonce) {
+				const withNonce = String(children)
+					.replace(/<script /g, `<script nonce="${nonce}" `)
+					.replace(/<style /g, `<style nonce="${nonce}" `);
+				buf.push(withNonce);
+			} else {
+				buf.push(children as string);
+			}
+		}
 		return "";
 	}
 	if (children instanceof Node) {