@troyio/vite-file-router 0.2.1 → 0.2.3

package/README.md

@@ -48,7 +48,12 @@ src/pages/
 ```
 
 Dynamic segments such as `[id]` become `:id`; catch-all segments such as
-`[...slug]` become `*`.
+`[...slug]` become `*`. Parenthesized directories are route groups and do not
+add a URL segment. Route groups can contain `page`, `layout`, and `loading`
+files just like other directories. For example, `(auth)/sign-in/page.tsx` maps
+to `/sign-in`. If two pages resolve to the same URL, the dev server displays a
+diagnostic page listing the conflicting files and explaining how to fix them.
+Production builds fail with the same diagnostic until the conflicts are fixed.
 
 Import the generated route configuration from the `virtual:routes` module in
 your application:
@@ -60,6 +65,21 @@ import { routes } from "virtual:routes";
 The virtual module exports a `routes` array with lazy-loaded page and layout
 components.
 
+### TypeScript
+
+Make sure your application TypeScript project includes Vite's client types and
+the router package's type declarations. For example, add this file as
+`src/vite-env.d.ts`:
+
+```ts
+/// <reference types="vite/client" />
+/// <reference types="@troyio/vite-file-router" />
+```
+
+If your `tsconfig.json` sets `compilerOptions.types`, include both
+`"vite/client"` and `"@troyio/vite-file-router"` in that list. Then restart
+the TypeScript server in your editor.
+
 ## Build
 
 ```sh

package/dist/generator.d.ts

@@ -4,4 +4,13 @@ export type GeneratedRoutes = {
     helpers: string[];
     routes: string;
 };
+export type RouteConflict = {
+    routePath: string;
+    files: string[];
+};
+export declare class RouteConflictError extends Error {
+    readonly conflicts: RouteConflict[];
+    constructor(conflicts: RouteConflict[]);
+}
+export declare function findPageRouteConflicts(node: Node, pages?: Map<string, string[]>, segments?: string[], root?: boolean): RouteConflict[];
 export declare function generate(node: Node, root?: boolean, projectRoot?: string): GeneratedRoutes;

package/dist/index.js

@@ -3,6 +3,15 @@ import { genArrayFromRaw, genObjectFromRaw, genSafeVariableName } from "knitwork
 import { format } from "prettier";
 import fs from "node:fs";
 // src/generator.ts
+var RouteConflictError = class extends Error {
+	conflicts;
+	constructor(conflicts) {
+		const details = conflicts.map(({ routePath, files }) => `  ${routePath}\n${files.map((file) => `    - ${file}`).join("\n")}`).join("\n");
+		super(`Multiple page files resolve to the same route:\n${details}\n\nGive each page a unique URL path. Parenthesized route-group names are omitted from URLs, so pages in different groups can still conflict.`);
+		this.conflicts = conflicts;
+		this.name = "RouteConflictError";
+	}
+};
 function getImportPath(file, projectRoot) {
 	const relativePath = path.relative(projectRoot, file).split(path.sep).join("/");
 	return relativePath.startsWith(".") ? relativePath : `./${relativePath}`;
@@ -12,6 +21,18 @@ function getRoutePath(directory) {
 	if (segment.startsWith("[...") && segment.endsWith("]")) return "*";
 	return segment.replace(/^\[(.+)\]$/, ":$1");
 }
+function findPageRouteConflicts(node, pages = /* @__PURE__ */ new Map(), segments = [], root = true) {
+	const routeSegments = root || node.routeGroup ? segments : [...segments, getRoutePath(node.directory)];
+	if (node.page) {
+		const routePath = `/${routeSegments.map((segment) => segment.startsWith(":") ? ":" : segment).join("/")}`;
+		pages.set(routePath, [...pages.get(routePath) ?? [], node.page]);
+	}
+	for (const child of node.children) findPageRouteConflicts(child, pages, routeSegments, false);
+	return [...pages.entries()].filter(([, files]) => files.length > 1).map(([routePath, files]) => ({
+		routePath,
+		files
+	}));
+}
 function generateImport(file, projectRoot) {
 	return `async () => ({
     Component: (await import(${JSON.stringify(getImportPath(file, projectRoot))})).default
@@ -23,7 +44,7 @@ function generateLazyComponent(file, projectRoot) {
 function generateNode(node, root, context, inheritedBoundary) {
 	const route = {};
 	const hasBoundary = inheritedBoundary || Boolean(node.loading);
-	if (!root) route.path = JSON.stringify(getRoutePath(node.directory));
+	if (!root && !node.routeGroup) route.path = JSON.stringify(getRoutePath(node.directory));
 	let loadingComponent;
 	if (node.loading) {
 		loadingComponent = genSafeVariableName(`Loading${context.nextLoadingId++}`);
@@ -53,6 +74,8 @@ function generateNode(node, root, context, inheritedBoundary) {
 	return genObjectFromRaw(route);
 }
 function generate(node, root = false, projectRoot = process.cwd()) {
+	const conflicts = findPageRouteConflicts(node, /* @__PURE__ */ new Map(), [], root);
+	if (conflicts.length) throw new RouteConflictError(conflicts);
 	const context = {
 		projectRoot,
 		loadingImports: [],
@@ -85,6 +108,7 @@ function scan(directory) {
 	const node = {
 		name: path.basename(directory),
 		directory,
+		routeGroup: /^\(.+\)$/.test(path.basename(directory)),
 		children: []
 	};
 	if (!fs.existsSync(directory)) return node;
@@ -109,16 +133,44 @@ var RESOLVED_ID = `\0${MODULE_ID}`;
 function routes(directory = "src/pages") {
 	let projectRoot = "";
 	let root = "";
+	let dev = false;
+	function sortImports(imports) {
+		return imports.sort((left, right) => {
+			const leftSource = left.match(/from ["'](.+?)["']/)?.[1] ?? left;
+			const rightSource = right.match(/from ["'](.+?)["']/)?.[1] ?? right;
+			const leftIsRelative = leftSource.startsWith(".");
+			if (leftIsRelative !== rightSource.startsWith(".")) return leftIsRelative ? 1 : -1;
+			return leftSource.localeCompare(rightSource);
+		});
+	}
 	async function execute() {
-		const generated = generate(scan(root), true, projectRoot);
+		const tree = scan(root);
+		const conflicts = findPageRouteConflicts(tree);
+		if (conflicts.length) {
+			const error = new RouteConflictError(conflicts);
+			if (!dev) throw error;
+			const code = `
+        import { createElement } from "react";
+
+        const message = ${JSON.stringify(error.message)};
+
+        function RouteConflictPage() {
+          return createElement(
+            "main",
+            { style: { fontFamily: "system-ui, sans-serif", margin: "3rem auto", maxWidth: "60rem", padding: "0 1.5rem" } },
+            createElement("h1", null, "Conflicting routes"),
+            createElement("p", null, "The file-based router found page files that resolve to the same URL. Fix these conflicts, then the page will reload."),
+            createElement("pre", { style: { background: "#f3f4f6", overflowX: "auto", padding: "1rem", whiteSpace: "pre-wrap" } }, message),
+          );
+        }
+
+        export const routes = [{ path: "*", Component: RouteConflictPage }];
+      `;
+			return format(code, { parser: "typescript" });
+		}
+		const generated = generate(tree, true, projectRoot);
 		const sections = [
-			generated.imports.sort((left, right) => {
-				const leftSource = left.match(/from ["'](.+?)["']/)?.[1] ?? left;
-				const rightSource = right.match(/from ["'](.+?)["']/)?.[1] ?? right;
-				const leftIsRelative = leftSource.startsWith(".");
-				if (leftIsRelative !== rightSource.startsWith(".")) return leftIsRelative ? 1 : -1;
-				return leftSource.localeCompare(rightSource);
-			}).join("\n"),
+			sortImports(generated.imports).join("\n"),
 			generated.helpers.join("\n"),
 			`export const routes = ${genArrayFromRaw([generated.routes])};`
 		].filter(Boolean);
@@ -129,6 +181,7 @@ function routes(directory = "src/pages") {
 		configResolved(config) {
 			projectRoot = config.root;
 			root = path.resolve(projectRoot, directory);
+			dev = config.command === "serve";
 		},
 		resolveId: (id) => id === MODULE_ID ? RESOLVED_ID : void 0,
 		load: (id) => id === RESOLVED_ID ? execute() : void 0,

package/dist/scanner.d.ts

@@ -1,6 +1,7 @@
 export type Node = {
     name: string;
     directory: string;
+    routeGroup: boolean;
     page?: string;
     layout?: string;
     loading?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@troyio/vite-file-router",
-  "version": "0.2.1",
+  "version": "0.2.3",
   "description": "File-system routing plugin for Vite",
   "type": "module",
   "private": false,