@sigil-dev/grimoire 0.7.3 → 0.7.5

package/package.json

@@ -3,7 +3,7 @@
   "module": "index.ts",
   "type": "module",
   "private": false,
-  "version": "0.7.3",
+  "version": "0.7.5",
   "devDependencies": {
     "@types/bun": "latest"
   },
@@ -28,8 +28,8 @@
     "@babel/plugin-syntax-jsx": "^8.0.0-rc.6",
     "@babel/plugin-syntax-typescript": "^8.0.0-rc.6",
     "@babel/types": "^8.0.0-rc.6",
-    "@sigil-dev/compiler": "0.7.3",
-    "@sigil-dev/runtime": "0.7.3",
+    "@sigil-dev/compiler": "0.7.5",
+    "@sigil-dev/runtime": "0.7.5",
     "vite": "^8.0.16"
   },
   "peerDependencies": {

package/src/rendering/hydrate.ts

@@ -1,4 +1,5 @@
 import { routes } from "#grimoire-routes";
+import { popHydrationNodes, pushHydrationNodes } from "@sigil-dev/runtime";
 import { initRouter } from "../client/router.ts";
 import { withEffectScope } from "../client/scope.ts";
 

package/src/rendering/ssrPlugin.ts

@@ -1,32 +1,47 @@
-// packages/grimoire/src/ssr-plugin.ts
 import { transformSync } from "@babel/core";
 import sigilPlugin from "@sigil-dev/compiler/babel";
+import { createHash } from "node:crypto";
 import type { GrimoirePlugin } from "../types";
 
+let registered = false;
+
 export function registerSSRPlugin(plugins: GrimoirePlugin[] = []) {
-	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,
-				});
-				let contents = transpiler.transformSync(result?.code ?? "");
-				for (const plugin of plugins) {
-					if (plugin.transform)
-						contents = (await plugin.transform(contents, path)) ?? contents;
-				}
-				return {
-					contents,
-					loader: "js" as const,
-				};
-			});
-		},
-	});
+    if (registered) return;
+    registered = true;
+
+    Bun.plugin({
+        name: "sigil-ssr",
+        setup(build) {
+            // loader: "ts" not "tsx" — Babel already consumed the JSX,
+            // Bun only needs to strip remaining TypeScript types
+            const transpiler = new Bun.Transpiler({ loader: "ts", target: "bun" });
+
+            build.onLoad({ filter: /\.tsx?$/ }, async ({ path }) => {
+                if (path.includes(".grimoire") || path.includes("node_modules")) return;
+                const source = await Bun.file(path).text();
+                const hash = createHash("md5").update(path).digest("hex").slice(0, 8);
+                // console.log("[sigil-ssr] transforming", path);
+                const result = transformSync(source, {
+                    configFile: false,
+                    babelrc: false,
+                    parserOpts: {
+                        plugins: ["typescript", "jsx"],
+                    },
+                    plugins: [[sigilPlugin, { mode: "ssr", hash }]],
+                    filename: path,
+                });
+                const output = result?.code ?? "";
+                const lines = output.split("\n");
+
+                let contents = transpiler.transformSync(result?.code ?? "");
+
+                for (const plugin of plugins) {
+                    if (plugin.transform)
+                        contents = (await plugin.transform(contents, path)) ?? contents;
+                }
+
+                return { contents, loader: "js" as const };
+            });
+        },
+    });
 }

package/src/routing/transform-routes.ts

@@ -9,39 +9,39 @@ 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);
+    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);
-	};
+    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]);
-			},
-		},
-	};
+    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]);
+            },
+        },
+    };
 }
 
 /**
@@ -54,43 +54,48 @@ function rewriteRelativeImports(filePath: string) {
  * Bun.build only ever sees plain JavaScript.
  */
 export async function transformRoutes(
-	routes: RouteFile[],
-	outDir: string,
-	mode: "hydrate" | "dom",
-	plugins: GrimoirePlugin[] = [],
+    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;
+    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

@@ -10,81 +10,81 @@ import type { BuildResult, GrimoireConfig, GrimoirePlugin } from "../types";
 import { runHook } from "./plugins";
 
 export async function buildProject(
-	config: GrimoireConfig,
-	plugins: GrimoirePlugin[] = [],
+    config: GrimoireConfig,
+    plugins: GrimoirePlugin[] = [],
 ): Promise<{ result: BuildResult; tree: RouteTree }> {
-	await runHook(plugins, "onBuildStart");
+    await runHook(plugins, "onBuildStart");
 
-	const { routes = "src/routes" } = config;
+    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 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 mkdir(join(process.cwd(), ".grimoire"), { recursive: true });
 
-	await generateTypes(tree, {
-		projectRoot: process.cwd(),
-		routesDir,
-		outDir: join(process.cwd(), ".grimoire/types"),
-	});
+    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 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 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 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 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)],
-		}),
-	]);
+    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);
-	}
+    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),
-	};
+    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 };
+    await runHook(plugins, "onBuildEnd", result);
+    return { result, tree };
 }

package/src/server/index.ts

@@ -57,7 +57,6 @@ export async function createServer(config: GrimoireConfig = {}) {
 		_skipBuild = false,
 	} = finalConfig;
 
-	registerSSRPlugin(plugins);
 	let tree: any;
 	if (!config._skipBuild) {
 		const { result, tree: _tree } = await buildProject(finalConfig, plugins);
@@ -71,6 +70,10 @@ export async function createServer(config: GrimoireConfig = {}) {
 		tree = await scanRoutes(routesDir, process.cwd());
 	}
 
+	// SSR plugin should NOT INTNERCEPT FILES BUNDLEDFOR CLIENT
+	// WHAT ARE WE DOINGGGGGGGGG
+	registerSSRPlugin(plugins);
+
 	// Load hooks.index.ts
 	const { handle: hooksHandle, init: hooksInit } = await loadHooks(
 		process.cwd(),