@sigil-dev/grimoire 0.3.0

package/src/server.ts

@@ -0,0 +1,318 @@
+import { isFailResult } from "./fail";
+import { isErrorResult } from "./error";
+import type { Handle, InitFunction, RequestEvent, ResolveFunction } from "./hooks";
+import { isRedirectResult } from "./redirect";
+import { createCookies } from "./cookie-utils";
+import { sigil } from "@sigil-dev/compiler/bun";
+import { mkdir } from "fs/promises";
+import { isAbsolute, join } from "path";
+import { generateManifest } from "./manifest-gen";
+import { runHook, runRequestHooks } from "./plugins";
+import { renderRoute } from "./renderer";
+import { findClosestError, matchRoute } from "./router";
+import { scanRoutes } from "./scanner";
+import { registerSSRPlugin } from "./ssrPlugin";
+import { transformRoutes } from "./transform-routes";
+import { generateTypes } from "./typegen";
+import type { GrimoireConfig } from "./types";
+
+/**
+ * Try to load hooks.server.ts from the project root.
+ */
+async function loadHooks(
+	projectRoot: string,
+): Promise<{ handle?: Handle; init?: InitFunction }> {
+	const hooksPath = join(projectRoot, "hooks.server.ts");
+	try {
+		const mod = await import(hooksPath);
+		return { handle: mod.handle, init: mod.init };
+	} catch {
+		// no hooks file — that's fine
+		return {};
+	}
+}
+
+export async function createServer(config: GrimoireConfig = {}) {
+
+	registerSSRPlugin();
+	const {
+		port = 3000,
+		host = "localhost",
+		plugins = [],
+		routes = "src/routes",
+	} = config;
+
+	// run config hooks
+	let finalConfig = config;
+	for (const plugin of plugins) {
+		finalConfig = plugin.config?.(finalConfig) ?? finalConfig;
+	}
+
+	// scan routes once at startup
+	const routesDir = isAbsolute(routes)
+		? routes.replace(/\0/g, "")
+		: join(process.cwd(), routes).replace(/\0/g, "");
+	const tree = await scanRoutes(routesDir, process.cwd());
+
+	await mkdir(join(process.cwd(), ".grimoire"), { recursive: true });
+
+	await generateTypes(tree, {
+		projectRoot: process.cwd(),
+		routesDir,
+		outDir: join(process.cwd(), ".grimoire/types"),
+	});
+
+	const compiledDir = join(process.cwd(), ".grimoire/compiled");
+	await mkdir(compiledDir, { recursive: true });
+
+	// Bun 1.3.13 bug: Bun.build's native parser runs before onLoad hooks fire,
+	// so .tsx files with TS syntax crash the bundler even with a sigil plugin.
+	// Fix: pre-transform route files to plain JS before Bun.build sees them,
+	// then generate per-mode manifests pointing at the compiled .js files.
+	const pageRoutes = tree.routes.filter(
+		(r) => r.type === "page" || r.type === "simple",
+	);
+	const [hydrateFiles, domFiles] = await Promise.all([
+		transformRoutes(pageRoutes, compiledDir, "hydrate"),
+		transformRoutes(pageRoutes, compiledDir, "dom"),
+	]);
+
+	const hydrateManifest = join(process.cwd(), ".grimoire/_routes.hydrate.js");
+	const domManifest = join(process.cwd(), ".grimoire/_routes.dom.js");
+	await Promise.all([
+		Bun.write(hydrateManifest, generateManifest(pageRoutes, hydrateFiles)),
+		Bun.write(domManifest, generateManifest(pageRoutes, domFiles)),
+	]);
+
+	const makeRoutesPlugin = (manifestPath: string) => ({
+		name: "grimoire-routes",
+		setup(build: any) {
+			build.onResolve({ filter: /^#grimoire-routes$/ }, () => ({
+				path: manifestPath,
+			}));
+		},
+	});
+
+	const [hydrateResult, domResult] = await Promise.all([
+		Bun.build({
+			entrypoints: [join(import.meta.dir, "./hydrate.ts")],
+			outdir: join(process.cwd(), "public/__grimoire__"),
+			plugins: [sigil({ mode: "hydrate" }), makeRoutesPlugin(hydrateManifest)],
+		}),
+		Bun.build({
+			entrypoints: [join(import.meta.dir, "./client.ts")],
+			outdir: join(process.cwd(), "public/__grimoire__"),
+			plugins: [sigil({ mode: "dom" }), makeRoutesPlugin(domManifest)],
+		}),
+	]);
+
+	if (!hydrateResult.success) {
+		for (const log of hydrateResult.logs) console.error(log);
+		throw new Error("Grimoire: hydrate bundle build failed");
+	}
+	if (!domResult.success) {
+		for (const log of domResult.logs) console.error(log);
+		throw new Error("Grimoire: dom bundle build failed");
+	}
+
+	// Load hooks.server.ts
+	const { handle: hooksHandle, init: hooksInit } = await loadHooks(process.cwd());
+
+	// Run init hook if present
+	await hooksInit?.();
+
+	const server = Bun.serve({
+		port,
+		hostname: host,
+		fetch: async (req) => {
+			return runRequestHooks(plugins, req, async () => {
+				const url = new URL(req.url);
+
+				const publicFile = Bun.file(
+					join(process.cwd(), "public", url.pathname),
+				);
+				if (await publicFile.exists()) {
+					return new Response(publicFile);
+				}
+
+				const matched = matchRoute(tree, url);
+
+				if (!matched) {
+					const error = findClosestError(tree, url.pathname);
+					if (error) {
+						const mod = await import(error.filePath);
+						const html = mod.default({ status: 404, message: "Not Found" });
+						return new Response(html, {
+							status: 404,
+							headers: { "Content-Type": "text/html" },
+						});
+					}
+					return new Response("Not Found", { status: 404 });
+				}
+
+				// API routes — no hooks
+				if (matched.route.type === "server") {
+					const mod = await import(matched.route.filePath);
+					const handler = mod[req.method];
+					if (!handler) {
+						return new Response("Method Not Allowed", { status: 405 });
+					}
+					return handler({ request: req, params: matched.params, url });
+				}
+
+				const HTTP_METHODS = [
+					"GET",
+					"POST",
+					"PUT",
+					"PATCH",
+					"DELETE",
+					"HEAD",
+					"OPTIONS",
+				] as const;
+
+				// Build RequestEvent for hooks
+				const cookieHeader = req.headers.get("cookie") ?? "";
+				const cookies = createCookies(cookieHeader);
+				const setHeadersMap: Record<string, string> = {};
+
+				const event: RequestEvent = {
+					request: req,
+					url,
+					params: matched.params,
+					locals: {},
+					cookies,
+					setHeaders: (headers) => Object.assign(setHeadersMap, headers),
+				};
+
+				// Resolve function: runs the actual page/form action logic
+				const resolve: ResolveFunction = async (evt) => {
+					// form actions
+					if (matched.pageServer && HTTP_METHODS.includes(evt.request.method as any)) {
+						const mod = await import(matched.pageServer.filePath);
+						const handler = mod[evt.request.method];
+						if (handler) {
+							let result: any;
+							try {
+								result = await handler({
+									request: evt.request,
+									params: matched.params,
+									url: evt.url,
+									locals: evt.locals,
+								});
+							} catch (e) {
+								if (isRedirectResult(e)) {
+									return new Response(null, {
+										status: e.status,
+										headers: { Location: e.location },
+									});
+								}
+								if (isErrorResult(e)) {
+									const isApi = evt.request.headers.get("accept")?.includes("application/json");
+									if (isApi) {
+										return Response.json(
+											{ error: true, status: e.status, message: e.message },
+											{ status: e.status },
+										);
+									}
+									const errorPage = findClosestError(tree, evt.url.pathname);
+									if (errorPage) {
+										const errMod = await import(errorPage.filePath);
+										const html = errMod.default({ status: e.status, message: e.message });
+										return new Response(html, {
+											status: e.status,
+											headers: { "Content-Type": "text/html" },
+										});
+									}
+									return new Response(e.message, { status: e.status });
+								}
+								throw e;
+							}
+
+							if (isFailResult(result)) {
+								return Response.json(
+									{ fail: true, status: result.status, data: result.data },
+									{ status: result.status },
+								);
+							}
+
+							const redirectTo =
+								result?.redirect ?? evt.request.headers.get("referer") ?? "/";
+							return new Response(null, {
+								status: 303,
+								headers: { Location: redirectTo },
+							});
+						}
+						if (evt.request.method !== "GET") {
+							return new Response("Method Not Allowed", { status: 405 });
+						}
+					}
+
+					// page routes
+					const response = await renderRoute(matched, evt.request, undefined, evt.locals);
+
+					if (evt.request.headers.get("x-grimoire-navigate") === "1") {
+						return response;
+					}
+
+					// Streaming SSR: if onRouteRender plugins exist, consume stream
+					const hasRenderPlugins = plugins.some((p) => p.onRouteRender);
+					if (hasRenderPlugins) {
+						let html = await response.text();
+						for (const plugin of plugins) {
+							html =
+								(await plugin.onRouteRender?.(html, {
+									route: matched.route,
+									request: evt.request,
+									params: matched.params,
+									data: undefined,
+								})) ?? html;
+						}
+						return new Response(html, {
+							headers: { "Content-Type": "text/html" },
+						});
+					}
+
+					return response;
+				};
+
+				// If no hooks handle, resolve directly
+				if (!hooksHandle) {
+					return resolve(event);
+				}
+
+				// Run through hooks chain
+				let response = await hooksHandle({
+					event,
+					resolve,
+				});
+
+				// Apply setHeaders
+				const setCookieHeaders = cookies.toHeaders();
+				if (setCookieHeaders.length > 0 || Object.keys(setHeadersMap).length > 0) {
+					const headers = new Headers(response.headers);
+					for (const [k, v] of Object.entries(setHeadersMap)) {
+						headers.set(k, v);
+					}
+					for (const sc of setCookieHeaders) {
+						headers.append("Set-Cookie", sc);
+					}
+					response = new Response(response.body, {
+						status: response.status,
+						statusText: response.statusText,
+						headers,
+					});
+				}
+
+				return response;
+			});
+		},
+	});
+
+	await runHook(plugins, "onStart", {
+		port: server.port,
+		hostname: server.hostname,
+		stop: () => server.stop(),
+	});
+	console.log(`Grimoire running at http://${host}:${port}`);
+	return server;
+}

package/src/ssrPlugin.ts

@@ -0,0 +1,26 @@
+// packages/grimoire/src/ssr-plugin.ts
+import { transformSync } from "@babel/core";
+import sigilPlugin from "@sigil-dev/compiler/babel";
+
+export function registerSSRPlugin() {
+	Bun.plugin({
+		name: "sigil-ssr",
+		setup(build) {
+			const transpiler = new Bun.Transpiler({ loader: "tsx", target: "bun" });
+			build.onLoad({ filter: /\.[jt]sx$/ }, async ({ path }) => {
+				const source = await Bun.file(path).text();
+				const result = transformSync(source, {
+					parserOpts: {
+						plugins: [["typescript", { isTSX: true }], "jsx"],
+					},
+					plugins: [[sigilPlugin, { mode: "ssr" }]],
+					filename: path,
+				});
+				return {
+					contents: transpiler.transformSync(result?.code ?? ""),
+					loader: "js" as const,
+				};
+			});
+		},
+	});
+}

package/src/sync.ts

@@ -0,0 +1,18 @@
+#!/usr/bin/env bun
+import { mkdir } from "node:fs/promises";
+import { isAbsolute, join } from "node:path";
+import { scanRoutes } from "./scanner";
+import { generateTypes } from "./typegen";
+
+const routes = process.env.GRIMOIRE_ROUTES ?? "src/routes";
+const routesDir = isAbsolute(routes) ? routes : join(process.cwd(), routes);
+
+await mkdir(join(process.cwd(), ".grimoire"), { recursive: true });
+const tree = await scanRoutes(routesDir, process.cwd());
+await generateTypes(tree, {
+	projectRoot: process.cwd(),
+	routesDir,
+	outDir: join(process.cwd(), ".grimoire/types"),
+});
+
+console.log("Grimoire: types generated");

package/src/transform-routes.ts

@@ -0,0 +1,90 @@
+import { transformSync } from "@babel/core";
+import sigilPlugin from "@sigil-dev/compiler/babel";
+import { basename, dirname, join, relative, resolve } from "path";
+import type { RouteFile } from "./scanner";
+
+const STYLE_RE = /<style[^>]*>([\s\S]*?)<\/style>/gi;
+
+// Inline the same hash helper used in bun-plugin.ts to avoid importing
+// unexported internals from @sigil-dev/compiler.
+function computeHash(filePath: string): string {
+	let h = 0x811c9dc5;
+	for (let i = 0; i < filePath.length; i++) {
+		h ^= filePath.charCodeAt(i);
+		h = (h * 0x01000193) >>> 0;
+	}
+	return h.toString(36);
+}
+
+function rewriteRelativeImports(filePath: string) {
+	const basedir = dirname(filePath);
+	const rewrite = (source?: { value: string }) => {
+		if (!source?.value.startsWith(".")) return;
+		source.value = resolve(basedir, source.value);
+	};
+
+	return {
+		name: "sigil-rewrite-relative-route-imports",
+		visitor: {
+			ImportDeclaration(path: any) {
+				rewrite(path.node.source);
+			},
+			ExportNamedDeclaration(path: any) {
+				rewrite(path.node.source);
+			},
+			ExportAllDeclaration(path: any) {
+				rewrite(path.node.source);
+			},
+			CallExpression(path: any) {
+				if (path.node.callee.type !== "Import") return;
+				rewrite(path.node.arguments[0]);
+			},
+		},
+	};
+}
+
+/**
+ * Pre-transforms route .tsx/.jsx files to plain JS using the Babel sigil
+ * pipeline, writing the output to `outDir`. Returns a Map from the original
+ * filePath to the compiled .js path.
+ *
+ * Workaround for Bun 1.3.13: Bun.build's native parser runs before onLoad
+ * hooks fire, crashing on TypeScript syntax. Pre-transforming to JS means
+ * Bun.build only ever sees plain JavaScript.
+ */
+export async function transformRoutes(
+	routes: RouteFile[],
+	outDir: string,
+	mode: "hydrate" | "dom",
+): Promise<Map<string, string>> {
+	const map = new Map<string, string>();
+	const transpiler = new Bun.Transpiler({ loader: "tsx", target: "browser" });
+	await Promise.all(
+		routes.map(async (route, index) => {
+			let code = await Bun.file(route.filePath).text();
+			const hash = computeHash(route.filePath);
+			// Strip <style> blocks — CSS injection is handled by the sigil plugin
+			// inside bun-plugin.ts at runtime; we just need clean JS here.
+			code = code.replace(STYLE_RE, "");
+			const res = transformSync(code, {
+				parserOpts: {
+					plugins: [["typescript", { isTSX: true }], "jsx"],
+				},
+				plugins: [
+					[sigilPlugin, { hash, mode }],
+					rewriteRelativeImports(route.filePath),
+				],
+				filename: route.filePath,
+			});
+			const out = transpiler.transformSync(res?.code ?? "");
+			const rel = relative(process.cwd(), route.filePath)
+				.replace(/\.[cm]?[jt]sx?$/, "")
+				.replace(/[^a-zA-Z0-9._-]/g, "_");
+			const nameBase = rel || basename(route.filePath).replace(/\.[jt]sx$/, "");
+			const outPath = join(outDir, `${index}-${nameBase}.${mode}.js`);
+			await Bun.write(outPath, out);
+			map.set(route.filePath, outPath);
+		}),
+	);
+	return map;
+}