@sigil-dev/grimoire 0.7.5 → 0.7.7

package/src/rendering/ssrPlugin.ts

@@ -1,47 +1,67 @@
+import { createHash } from "node:crypto";
 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[] = []) {
-    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 };
-            });
-        },
-    });
+	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.onResolve({ filter: /^@sigil-dev\/runtime($|\/)/ }, (args) => {
+				try {
+					const resolved = Bun.resolveSync(args.path, process.cwd());
+					return { path: resolved.replaceAll("\\", "/") };
+				} catch {
+					return undefined;
+				}
+			});
+
+			build.onLoad({ filter: /\.tsx?$/ }, async ({ path }) => {
+				if (path.includes("index.tsx"))
+					console.log("[ssr-plugin] onLoad:", path);
+				const source = await Bun.file(path).text();
+
+				// node_modules and .grimoire files are plain TypeScript (no sigil JSX).
+				// Still must return { contents, loader } — never return undefined from onLoad.
+				if (path.includes("node_modules") || path.includes(".grimoire")) {
+					return {
+						contents: transpiler.transformSync(source),
+						loader: "js" as const,
+					};
+				}
+
+				if (process.env.SIGIL_VERBOSE) {
+					console.log("[sigil-ssr] XFORM:", path);
+				}
+				const hash = createHash("md5").update(path).digest("hex").slice(0, 8);
+				const result = transformSync(source, {
+					configFile: false,
+					babelrc: false,
+					parserOpts: {
+						plugins: ["typescript", "jsx"],
+					},
+					plugins: [[sigilPlugin, { mode: "ssr", hash }]],
+					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 };
+			});
+		},
+	});
 }

package/src/routing/manifest-gen.ts

@@ -13,14 +13,30 @@ export function generateManifest(
 	fileMap?: Map<string, string>,
 ): string {
 	const pages = routes.filter((r) => r.type === "page" || r.type === "simple");
-	const imports = pages
+	const layouts = routes.filter((r) => r.type === "layout");
+
+	const pageImports = pages
 		.map((r, i) => {
 			const path = fileMap?.get(r.filePath) ?? r.filePath;
 			return `import __Page${i} from ${JSON.stringify(path)};`;
 		})
 		.join("\n");
+	const layoutImports = layouts
+		.map((r, i) => {
+			const path = fileMap?.get(r.filePath) ?? r.filePath;
+			return `import __Layout${i} from ${JSON.stringify(path)};`;
+		})
+		.join("\n");
+
 	const map = pages
 		.map((r, i) => `  ${JSON.stringify(r.path)}: __Page${i},`)
 		.join("\n");
-	return `${imports}\nexport const routes = {\n${map}\n};\n`;
+	const layoutMap = layouts
+		.map(
+			(r, i) =>
+				`  { path: ${JSON.stringify(r.path)}, component: __Layout${i}, load: __Layout${i}.load },`,
+		)
+		.join("\n");
+
+	return `${pageImports}\n${layoutImports}\nexport const routes = {\n${map}\n};\nexport const layouts = [\n${layoutMap}\n];\n`;
 }

package/src/routing/router.ts

@@ -1,98 +1,109 @@
 import type { RouteFile, RouteTree } from "./scanner";
 
 export interface MatchedRoute {
-    route: RouteFile;
-    params: Record<string, string>;
-    layouts: RouteFile[];        // was: layout?: RouteFile
-    layoutServers: RouteFile[];       // was: layoutServer?: RouteFile
-    pageServer?: RouteFile;
+	route: RouteFile;
+	params: Record<string, string>;
+	layouts: RouteFile[]; // was: layout?: RouteFile
+	layoutServers: RouteFile[]; // was: layoutServer?: RouteFile
+	pageServer?: RouteFile;
 }
 
 export function matchRoute(tree: RouteTree, url: URL): MatchedRoute | null {
-    const pathname = url.pathname;
-
-    // check server routes first
-    for (const server of tree.servers) {
-        const params = matchPattern(server.path, pathname);
-        if (params !== null) return {
-          route: server,
-          params,
-          layouts: [],
-          layoutServers: []
-        };
-    }
-
-    // then pages
-    for (const route of tree.routes) {
-        if (route.type === "pageServer") continue;
-        const params = matchPattern(route.path, pathname);
-        if (params === null) continue;
-
-        // find applicable layout (longest matching prefix wins)
-        const layouts = tree.layouts
-          .filter(
-            (l) =>
-              l.type === "layout" &&
-              pathname.startsWith(l.path === "/" ? "/" : l.path),
-          )
-          .sort((a, b) => a.path.length - b.path.length); // root first, innermost last
-
-        const layoutServers = tree.layouts
-          .filter(
-            (l) =>
-              l.type === "layoutServer" &&
-              pathname.startsWith(l.path === "/" ? "/" : l.path),
-          )
-          .sort((a, b) => a.path.length - b.path.length); // root first, innermost last
-
-        const pageServer = tree.routes.find(
-          (r) => r.type === "pageServer" && r.path === route.path,
-        );
-
-        return { route, params, layouts, layoutServers, pageServer };
-    }
-
-    return null;
+	const pathname = url.pathname;
+
+	// check server routes first
+	for (const server of tree.servers) {
+		const params = matchPattern(server.path, pathname);
+		if (params !== null)
+			return {
+				route: server,
+				params,
+				layouts: [],
+				layoutServers: [],
+			};
+	}
+
+	// then pages
+	for (const route of tree.routes) {
+		if (route.type === "pageServer") continue;
+		const params = matchPattern(route.path, pathname);
+		if (params === null) continue;
+
+		// find applicable layouts by matching route pattern prefix, not URL pathname.
+		// pathname.startsWith(l.path) would fail for parameterized layouts like /w/:workspace.
+		const layoutMatches = (l: RouteFile) =>
+			l.path === "/" ||
+			route.path === l.path ||
+			route.path.startsWith(l.path + "/");
+
+		const layouts = tree.layouts
+			.filter((l) => l.type === "layout" && layoutMatches(l))
+			.sort((a, b) => a.path.length - b.path.length); // root first, innermost last
+
+		const layoutServers = tree.layouts
+			.filter((l) => l.type === "layoutServer" && layoutMatches(l))
+			.sort((a, b) => a.path.length - b.path.length); // root first, innermost last
+
+		const pageServer = tree.routes.find(
+			(r) => r.type === "pageServer" && r.path === route.path,
+		);
+
+		return { route, params, layouts, layoutServers, pageServer };
+	}
+
+	return null;
 }
 
 export function findClosestError(
-    errors: RouteFile[],
-    pathname: string,
+	errors: RouteFile[],
+	pathname: string,
 ): RouteFile | null {
-    const segments = pathname.split("/").filter(Boolean);
-
-    // walk from most specific to root
-    while (segments.length >= 0) {
-        const prefix = `/${segments.join("/")}`;
-        const error = errors.find(
-            (e) => e.path === prefix || e.path === prefix + "/",
-        );
-        if (error) return error;
-        if (segments.length === 0) break;
-        segments.pop();
-    }
-    return null;
+	const segments = pathname.split("/").filter(Boolean);
+
+	// walk from most specific to root
+	while (segments.length >= 0) {
+		const prefix = `/${segments.join("/")}`;
+		const error = errors.find(
+			(e) => e.path === prefix || e.path === prefix + "/",
+		);
+		if (error) return error;
+		if (segments.length === 0) break;
+		segments.pop();
+	}
+	return null;
 }
 
 function matchPattern(
-    pattern: string,
-    pathname: string,
+	pattern: string,
+	pathname: string,
 ): Record<string, string> | null {
-    const patternParts = pattern.split("/").filter(Boolean);
-    const pathParts = pathname.split("/").filter(Boolean);
-
-    if (patternParts.length !== pathParts.length) return null;
-
-    const params: Record<string, string> = {};
-    for (let i = 0; i < patternParts.length; i++) {
-        const patternPart = patternParts[i]!;
-        const pathPart = pathParts[i]!;
-
-        if (patternPart.startsWith(":")) {
-            params[patternPart.slice(1)] = pathPart;
-        } else if (patternPart !== pathPart) {
-            return null;
-        }
-    }
-    return params;
+	const patternParts = pattern.split("/").filter(Boolean);
+	const pathParts = pathname.split("/").filter(Boolean);
+
+	const params: Record<string, string> = {};
+	let pi = 0;
+	let pj = 0;
+	while (pi < patternParts.length) {
+		const patternPart = patternParts[pi]!;
+
+		if (patternPart.startsWith("*")) {
+			// Rest param — captures zero or more remaining path segments joined by "/".
+			// Rest must be the last segment in the pattern.
+			params[patternPart.slice(1)] = pathParts.slice(pj).join("/");
+			return params;
+		}
+
+		if (pj >= pathParts.length) return null;
+		const pathPart = pathParts[pj]!;
+
+		if (patternPart.startsWith(":")) {
+			params[patternPart.slice(1)] = pathPart;
+		} else if (patternPart !== pathPart) {
+			return null;
+		}
+		pi++;
+		pj++;
+	}
+	if (pj < pathParts.length) return null;
+	return params;
 }

package/src/routing/scanner.ts

@@ -13,6 +13,7 @@ export interface RouteFile {
 		| "error"
 		| "simple";
 	paramNames: string[]; // ["slug"] in /blog/:slug
+	restParamNames: string[]; // ["rest"] in /blog/*rest
 }
 
 export interface RouteTree {
@@ -25,24 +26,32 @@ export interface RouteTree {
 export function filePathToRoutePath(
 	filePath: string,
 	routesDir: string,
-): { pattern: string; params: string[] } {
+): { pattern: string; params: string[]; restParams: string[] } {
 	const rel = relative(routesDir, filePath)
-		.replace(/\\/g, "/") // windows
-		.replace(/\.(tsx?|jsx?)$/, "");
+		.replace(/\\/g, "/")
+		.replace(/\.(tsx?|jsx?)$/, "")
+		.replace(/(?:^|\/)(\([^)]+\))(?=\/|$)/g, "") // strip (groupName) anywhere
+		.replace(/\/+/g, "/"); // collapse double slashes
 
 	const params: string[] = [];
+	const restParams: string[] = [];
 	const pattern =
 		rel
 			.replace(/\/?(\+\w+(\.\w+)?|index)$/, "") // index/+page → directory
-			.replace(/\[([^\]]+)\]/g, (_, p) => {
+			.replace(/\[(\.\.\.)?([^\]]+)\]/g, (_, dots, name) => {
+				// [...rest] → *rest (captures zero or more remaining path segments)
+				if (dots) {
+					restParams.push(name);
+					return `*${name}`;
+				}
 				// [param] → :param
-				params.push(p);
-				return `:${p}`;
+				params.push(name);
+				return `:${name}`;
 			})
 			.replace(/^\/?/, "/") || // ensure leading slash
 		"/";
 
-	return { pattern, params };
+	return { pattern, params, restParams };
 }
 
 export async function scanRoutes(
@@ -58,7 +67,10 @@ export async function scanRoutes(
 	for await (const file of glob.scan(routesDir)) {
 		const filePath = join(routesDir, file);
 		const name = basename(file).replace(/\.(tsx?|jsx?)$/, "");
-		const { pattern, params } = filePathToRoutePath(filePath, routesDir);
+		const { pattern, params, restParams } = filePathToRoutePath(
+			filePath,
+			routesDir,
+		);
 
 		let type: RouteFile["type"];
 		if (name === "+page") type = "page";
@@ -77,6 +89,7 @@ export async function scanRoutes(
 			clientPath, // add this
 			type,
 			paramNames: params,
+			restParamNames: restParams,
 		};
 
 		if (type === "simple" || type === "page" || type === "pageServer")
@@ -86,12 +99,11 @@ export async function scanRoutes(
 		if (type === "error") errors.push(routeFile);
 	}
 
-	// sort so static routes match before dynamic ones
-	routes.sort((a, b) => {
-		const aScore = a.paramNames.length;
-		const bScore = b.paramNames.length;
-		return aScore - bScore;
-	});
+	// sort so static routes match before dynamic ones, rest params last
+	const scoreRoute = (r: RouteFile) =>
+		r.paramNames.length + r.restParamNames.length * 1000;
+	routes.sort((a, b) => scoreRoute(a) - scoreRoute(b));
+	servers.sort((a, b) => scoreRoute(a) - scoreRoute(b));
 
 	assertNoDuplicatePaths(
 		routes.filter((r) => r.type === "page" || r.type === "simple"),

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,48 +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>();
-    // loader: "ts" — Babel already consumed JSX, Bun only strips remaining types
-    const transpiler = new Bun.Transpiler({ loader: "ts", target: "browser" });
+	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, "");
+	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 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`);
+			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;
+			await Bun.write(outPath, out);
+			map.set(route.filePath, outPath);
+		}),
+	);
+	return map;
 }