@sigil-dev/grimoire 0.7.4 → 0.7.6

package/src/routing/transform-routes.ts

@@ -1,96 +1,101 @@
-import { transformSync } from "@babel/core";
-import sigilPlugin from "@sigil-dev/compiler/babel";
-import { basename, dirname, join, relative, resolve } from "path";
-import type { GrimoirePlugin } from "../types";
-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",
-	plugins: GrimoirePlugin[] = [],
-): 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,
-			});
-			let out = transpiler.transformSync(res?.code ?? "");
-			for (const plugin of plugins) {
-				if (plugin.transform)
-					out = (await plugin.transform(out, route.filePath)) ?? out;
-			}
-			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;
-}
+import { transformSync } from "@babel/core";
+import sigilPlugin from "@sigil-dev/compiler/babel";
+import { basename, dirname, join, relative, resolve } from "path";
+import type { GrimoirePlugin } from "../types";
+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",
+    plugins: GrimoirePlugin[] = [],
+): Promise<Map<string, string>> {
+    const map = new Map<string, string>();
+    // loader: "ts" — Babel already consumed JSX, Bun only strips remaining types
+    const transpiler = new Bun.Transpiler({ loader: "ts", target: "browser" });
+
+    await Promise.all(
+        routes.map(async (route, index) => {
+            let code = await Bun.file(route.filePath).text();
+            const hash = computeHash(route.filePath);
+            code = code.replace(STYLE_RE, "");
+
+            const res = transformSync(code, {
+                configFile: false,
+                babelrc: false,
+                parserOpts: {
+                    plugins: ["typescript", "jsx"],  // no isTSX
+                },
+                plugins: [
+                    [sigilPlugin, { hash, mode }],
+                    rewriteRelativeImports(route.filePath),
+                ],
+                filename: route.filePath,
+            });
+            let out = transpiler.transformSync(res?.code ?? "");
+            for (const plugin of plugins) {
+                if (plugin.transform)
+                    out = (await plugin.transform(out, route.filePath)) ?? out;
+            }
+
+            const rel = relative(process.cwd(), route.filePath)
+                .replace(/\.tsx?$/, "")
+                .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;
+}

package/src/server/build.ts

@@ -1,90 +1,147 @@
-import { sigil } from "@sigil-dev/compiler/bun";
-import { mkdir } from "fs/promises";
-import { isAbsolute, join } from "path";
-import { generateManifest } from "../routing/manifest-gen";
-import type { RouteTree } from "../routing/scanner";
-import { scanRoutes } from "../routing/scanner";
-import { transformRoutes } from "../routing/transform-routes";
-import { generateTypes } from "../typegen";
-import type { BuildResult, GrimoireConfig, GrimoirePlugin } from "../types";
-import { runHook } from "./plugins";
-
-export async function buildProject(
-	config: GrimoireConfig,
-	plugins: GrimoirePlugin[] = [],
-): Promise<{ result: BuildResult; tree: RouteTree }> {
-	await runHook(plugins, "onBuildStart");
-
-	const { routes = "src/routes" } = config;
-
-	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 });
-
-	const pageRoutes = tree.routes.filter(
-		(r) => r.type === "page" || r.type === "simple",
-	);
-	const [hydrateFiles, domFiles] = await Promise.all([
-		transformRoutes(pageRoutes, compiledDir, "hydrate", plugins),
-		transformRoutes(pageRoutes, compiledDir, "dom", plugins),
-	]);
-
-	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, "../rendering/hydrate.ts")],
-			outdir: join(process.cwd(), "public/__grimoire__"),
-			plugins: [sigil({ mode: "hydrate" }), makeRoutesPlugin(hydrateManifest)],
-		}),
-		Bun.build({
-			entrypoints: [join(import.meta.dir, "../client/index.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);
-	}
-	if (!domResult.success) {
-		for (const log of domResult.logs) console.error(log);
-	}
-
-	const result: BuildResult = {
-		success: hydrateResult.success && domResult.success,
-		outputs: [...hydrateResult.outputs, ...domResult.outputs].map(
-			(o) => o.path,
-		),
-		errors: [...hydrateResult.logs, ...domResult.logs].map(String),
-	};
-
-	await runHook(plugins, "onBuildEnd", result);
-	return { result, tree };
-}
+import { sigil } from "@sigil-dev/compiler/bun";
+import { mkdir, writeFile } from "fs/promises";
+import { isAbsolute, join } from "path";
+import { cwd } from "process";
+import { generateManifest } from "../routing/manifest-gen";
+import type { RouteTree } from "../routing/scanner";
+import { scanRoutes } from "../routing/scanner";
+import { transformRoutes } from "../routing/transform-routes";
+import { generateTypes } from "../typegen";
+import type { BuildResult, GrimoireConfig, GrimoirePlugin } from "../types";
+import { runHook } from "./plugins";
+
+export async function buildProject(
+	config: GrimoireConfig,
+	plugins: GrimoirePlugin[] = [],
+): Promise<{ result: BuildResult; tree: RouteTree }> {
+	await runHook(plugins, "onBuildStart");
+
+	const { routes = "src/routes" } = config;
+
+	const routesDir = isAbsolute(routes)
+		? routes.replace(/\0/g, "")
+		: join(process.cwd(), routes).replace(/\0/g, "");
+	const tree = await scanRoutes(routesDir, process.cwd());
+
+	const outDir = join(process.cwd(), ".grimoire");
+	await mkdir(outDir, { recursive: true });
+
+	await generateTypes(tree, {
+		projectRoot: process.cwd(),
+		routesDir,
+		outDir: join(outDir, "types"),
+	});
+
+	// Generate $env type declarations from .env
+	const { generateEnvTypes } = await import("../env/typegen");
+	const envTypeDir = join(outDir, "types");
+	await mkdir(envTypeDir, { recursive: true });
+	await generateEnvTypes(process.cwd(), envTypeDir);
+
+	const compiledDir = join(outDir, "compiled");
+	await mkdir(compiledDir, { recursive: true });
+
+	const clientRoutes = [
+		...tree.routes.filter((r) => r.type === "page" || r.type === "simple"),
+		...tree.layouts.filter((r) => r.type === "layout"),
+	];
+
+	const [hydrateFiles, domFiles] = await Promise.all([
+		transformRoutes(clientRoutes, compiledDir, "hydrate", plugins),
+		transformRoutes(clientRoutes, compiledDir, "dom", plugins),
+	]);
+
+	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(clientRoutes, hydrateFiles)),
+		Bun.write(domManifest, generateManifest(clientRoutes, domFiles)),
+	]);
+
+	const makeRoutesPlugin = (manifestPath: string) => ({
+		name: "grimoire-routes",
+		setup(build: any) {
+			build.onResolve({ filter: /^#grimoire-routes$/ }, () => ({
+				path: manifestPath,
+			}));
+		},
+	});
+
+	const resolvedAlias: Record<string, string> = {
+		...Object.fromEntries(
+			Object.entries(config.alias ?? {}).map(([k, v]) => [k, join(cwd(), v)]),
+		),
+		"$env/static/public": join(import.meta.dir, "../env/public.ts"),
+		"$env/static/private": join(import.meta.dir, "../env/private.ts"),
+	};
+
+	const bundleStrategy = config.bundleStrategy ?? "split";
+	const publicDir = join(process.cwd(), "public/__grimoire__");
+
+	if (bundleStrategy === "single") {
+		// Single bundle: combine hydrate + dom in one output
+		const singleResult = await Bun.build({
+			entrypoints: [
+				join(import.meta.dir, "../rendering/hydrate.ts"),
+				join(import.meta.dir, "../client/index.ts"),
+			],
+			outdir: publicDir,
+			plugins: [
+				sigil({ mode: "hydrate" }),
+				sigil({ mode: "dom" }),
+				makeRoutesPlugin(hydrateManifest),
+				makeRoutesPlugin(domManifest),
+			],
+			// @ts-expect-error alias is a valid Bun.build option not yet in types
+			alias: resolvedAlias,
+		});
+
+		if (!singleResult.success) {
+			for (const log of singleResult.logs) console.error(log);
+		}
+
+		const result: BuildResult = {
+			success: singleResult.success,
+			outputs: singleResult.outputs.map((o) => o.path),
+			errors: singleResult.logs.map(String),
+		};
+
+		await runHook(plugins, "onBuildEnd", result);
+		return { result, tree };
+	}
+
+	const [hydrateResult, domResult] = await Promise.all([
+		Bun.build({
+			entrypoints: [join(import.meta.dir, "../rendering/hydrate.ts")],
+			outdir: publicDir,
+			plugins: [sigil({ mode: "hydrate" }), makeRoutesPlugin(hydrateManifest)],
+			// @ts-expect-error alias is a valid Bun.build option not yet in types
+			alias: resolvedAlias,
+		}),
+		Bun.build({
+			entrypoints: [join(import.meta.dir, "../client/index.ts")],
+			outdir: publicDir,
+			plugins: [sigil({ mode: "dom" }), makeRoutesPlugin(domManifest)],
+			// @ts-expect-error alias is a valid Bun.build option not yet in types
+			alias: resolvedAlias,
+		}),
+	]);
+
+	if (!hydrateResult.success) {
+		for (const log of hydrateResult.logs) console.error(log);
+	}
+	if (!domResult.success) {
+		for (const log of domResult.logs) console.error(log);
+	}
+
+	const result: BuildResult = {
+		success: hydrateResult.success && domResult.success,
+		outputs: [...hydrateResult.outputs, ...domResult.outputs].map(
+			(o) => o.path,
+		),
+		errors: [...hydrateResult.logs, ...domResult.logs].map(String),
+	};
+
+	await runHook(plugins, "onBuildEnd", result);
+	return { result, tree };
+}