@troyio/vite-file-router 0.2.4 → 0.2.5

package/README.md

@@ -36,6 +36,8 @@ nested route, and the following files are recognized:
 | `page.jsx` / `page.tsx` | The page component for the directory's URL. |
 | `layout.jsx` / `layout.tsx` | A layout around the directory's page and child routes. |
 | `loading.jsx` / `loading.tsx` | A Suspense fallback for the directory's page and child routes. |
+| `not-found.jsx` / `not-found.tsx` | A not-found page for unmatched URLs within the directory's route subtree. |
+| `error.jsx` / `error.tsx` | A React Router error boundary for the directory's route subtree. |
 
 Each file must default-export a React component. If both extensions exist for
 the same file type in one directory, `.tsx` takes precedence.
@@ -95,6 +97,38 @@ export default function Loading() {
 
 A nested loading file creates a more specific boundary for that directory.
 
+### Not-found pages
+
+Add a `not-found.jsx` or `not-found.tsx` file to handle unmatched URLs. The plugin generates
+a catch-all child route, and the most specific matching route subtree's
+not-found page is used:
+
+```text
+src/pages/
+  not-found.tsx
+  users/
+    not-found.tsx
+    page.tsx
+```
+
+The root not-found page handles unknown URLs generally, while `users/not-found.tsx`
+handles unmatched URLs under `/users`.
+
+### Route error boundaries
+
+Add an `error.jsx` or `error.tsx` file to handle errors from that route and its
+descendants. The nearest route boundary is used, following React Router's error
+handling behavior. Use React Router's `useRouteError` hook to read the error:
+
+```tsx
+import { useRouteError } from "react-router";
+
+export default function ErrorPage() {
+  const error = useRouteError();
+  return <main>Something went wrong: {String(error)}</main>;
+}
+```
+
 ### Dynamic routes and route groups
 
 Two pages must not resolve to the same URL. This includes pages with the same

package/dist/index.js

@@ -33,15 +33,20 @@ function findPageRouteConflicts(node, pages = /* @__PURE__ */ new Map(), segment
 		files
 	}));
 }
+function validateRouteGroupNotFound(node, segments = [], root = true) {
+	const routeSegments = root || node.routeGroup ? segments : [...segments, getRoutePath(node.directory)];
+	if (node.routeGroup && node.notFound && routeSegments.length === 0) throw new Error(`Route-group not-found page "${node.notFound}" has no URL subtree to match. Move it into a directory with a URL segment so it is scoped to a distinct route subtree.`);
+	for (const child of node.children) validateRouteGroupNotFound(child, routeSegments, false);
+}
 function generateImport(file, projectRoot) {
 	return `async () => ({
     Component: (await import(${JSON.stringify(getImportPath(file, projectRoot))})).default
   })`;
 }
-function generateLayoutImport(file, projectRoot) {
-	return `async () => ({
-    Component: withOutlet((await import(${JSON.stringify(getImportPath(file, projectRoot))})).default)
-  })`;
+function generateRouteLazy(node, projectRoot, includeLayout) {
+	const properties = [];
+	if (includeLayout && node.layout) properties.push(`Component: withOutlet((await import(${JSON.stringify(getImportPath(node.layout, projectRoot))})).default)`);
+	return `async () => ({ ${properties.join(", ")} })`;
 }
 function generateLazyComponent(file, projectRoot) {
 	return `lazy(() => import(${JSON.stringify(getImportPath(file, projectRoot))}))`;
@@ -54,6 +59,10 @@ function generateNode(node, root, context, inheritedBoundary) {
 	const hasBoundary = inheritedBoundary || Boolean(node.loading);
 	if (node.layout) context.hasLayouts = true;
 	if (!root && !node.routeGroup) route.path = JSON.stringify(getRoutePath(node.directory));
+	if (node.error) {
+		context.hasErrorBoundaries = true;
+		route.ErrorBoundary = `createErrorBoundary(${generateLazyComponent(node.error, context.projectRoot)})`;
+	}
 	let loadingComponent;
 	if (node.loading) {
 		loadingComponent = genSafeVariableName(`Loading${context.nextLoadingId++}`);
@@ -65,8 +74,8 @@ function generateNode(node, root, context, inheritedBoundary) {
 		route.Component = `createBoundary(${loadingComponent}, ${child})`;
 	} else if (node.layout) {
 		if (hasBoundary) route.Component = generateLazyLayout(node.layout, context.projectRoot);
-		else route.lazy = generateLayoutImport(node.layout, context.projectRoot);
 	}
+	if (node.layout && !hasBoundary) route.lazy = generateRouteLazy(node, context.projectRoot, true);
 	const children = [];
 	if (node.page) {
 		const page = hasBoundary ? {
@@ -79,10 +88,21 @@ function generateNode(node, root, context, inheritedBoundary) {
 		children.push(genObjectFromRaw(page));
 	}
 	for (const child of node.children) children.push(generateNode(child, false, context, hasBoundary));
+	if (node.notFound) {
+		const notFoundRoute = hasBoundary ? {
+			path: JSON.stringify("*"),
+			Component: generateLazyComponent(node.notFound, context.projectRoot)
+		} : {
+			path: JSON.stringify("*"),
+			lazy: generateImport(node.notFound, context.projectRoot)
+		};
+		children.push(genObjectFromRaw(notFoundRoute));
+	}
 	if (children.length) route.children = genArrayFromRaw(children);
 	return genObjectFromRaw(route);
 }
 function generate(node, root = false, projectRoot = process.cwd()) {
+	validateRouteGroupNotFound(node, [], root);
 	const conflicts = findPageRouteConflicts(node, /* @__PURE__ */ new Map(), [], root);
 	if (conflicts.length) throw new RouteConflictError(conflicts);
 	const context = {
@@ -90,15 +110,17 @@ function generate(node, root = false, projectRoot = process.cwd()) {
 		loadingImports: [],
 		nextLoadingId: 0,
 		hasBoundaries: false,
-		hasLayouts: false
+		hasLayouts: false,
+		hasErrorBoundaries: false
 	};
 	const routes = generateNode(node, root, context, false);
 	const imports = [...context.loadingImports];
 	const helpers = [];
-	if (context.hasBoundaries || context.hasLayouts) {
-		const reactImports = ["createElement"];
-		if (context.hasBoundaries || context.hasLayouts) reactImports.push("lazy");
-		if (context.hasBoundaries) reactImports.push("Suspense");
+	if (context.hasBoundaries || context.hasLayouts || context.hasErrorBoundaries) {
+		const reactImports = [];
+		if (context.hasBoundaries || context.hasLayouts || context.hasErrorBoundaries) reactImports.push("createElement");
+		if (context.hasBoundaries || context.hasLayouts || context.hasErrorBoundaries) reactImports.push("lazy");
+		if (context.hasBoundaries || context.hasErrorBoundaries) reactImports.push("Suspense");
 		imports.unshift(`import { ${reactImports.join(", ")} } from "react";`);
 		if (context.hasBoundaries || context.hasLayouts) imports.push(`import { Outlet } from "react-router";`);
 	}
@@ -115,6 +137,15 @@ function generate(node, root = false, projectRoot = process.cwd()) {
   return function LayoutRoute() {
     return createElement(Layout, null, createElement(Outlet));
   };
+}`);
+	if (context.hasErrorBoundaries) helpers.push(`function createErrorBoundary(Component) {
+  return function RouteErrorBoundary() {
+    return createElement(
+      Suspense,
+      { fallback: createElement("p", null, "Loading error page...") },
+      createElement(Component),
+    );
+  };
 }`);
 	return {
 		imports,
@@ -138,10 +169,10 @@ function scan(directory) {
 			node.children.push(scan(file));
 			continue;
 		}
-		const match = /^(page|layout|loading)\.(jsx|tsx)$/.exec(entry.name);
+		const match = /^(page|layout|loading|not-found|error)\.(jsx|tsx)$/.exec(entry.name);
 		if (!match) continue;
 		const [, name, extension] = match;
-		const key = name;
+		const key = name === "not-found" ? "notFound" : name;
 		if (!node[key] || extension === "tsx") node[key] = file;
 	}
 	return node;

package/dist/scanner.d.ts

@@ -5,6 +5,8 @@ export type Node = {
     page?: string;
     layout?: string;
     loading?: string;
+    notFound?: string;
+    error?: string;
     children: Node[];
 };
 export declare function scan(directory: string): Node;

package/package.json

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