@troyio/vite-file-router 0.1.0 → 0.2.0

package/README.md

@@ -4,30 +4,17 @@ A Vite plugin that generates a route tree from a file-based page directory.
 
 ## Install
 
-The package is published to GitHub Packages on every push to `main`, under
-`@OWNER/vite-file-router`. Configure npm to use GitHub Packages for that scope
-and authenticate with a GitHub token that has `read:packages` access:
-
-```ini
-@OWNER:registry=https://npm.pkg.github.com
-//npm.pkg.github.com/:_authToken=YOUR_GITHUB_TOKEN
-```
-
-Then install it with:
-
 ```sh
-npm install @OWNER/vite-file-router
+npm install @troyio/vite-file-router
 ```
 
-Each main-branch build is published with a unique prerelease version.
-
 Vite is a peer dependency and must also be installed in your project.
 
 ## Configure
 
 ```ts
 import { defineConfig } from "vite";
-import { routes } from "@OWNER/vite-file-router";
+import { routes } from "@troyio/vite-file-router";
 
 export default defineConfig({
   plugins: [routes()],
@@ -41,14 +28,20 @@ project root to use another directory:
 plugins: [routes("src/routes")];
 ```
 
-Each `page.tsx` becomes a route page, and each `layout.tsx` becomes a lazy
-layout for its directory. Directories become nested routes. For example:
+Each `page.jsx` or `page.tsx` becomes a route page, and each `layout.jsx` or
+`layout.tsx` becomes a lazy layout for its directory. Directories become nested
+routes. Add a `loading.jsx` or `loading.tsx` to provide a Suspense fallback for
+that directory's page and nested routes; a nested loading file provides a more
+specific fallback. Each file must default-export a React component. If both
+extensions exist for the same component, `.tsx` takes precedence. For example:
 
 ```text
 src/pages/
-  layout.tsx
-  page.tsx
+  layout.jsx
+  loading.jsx
+  page.jsx
   users/
+    loading.tsx
     page.tsx
     [id]/
       page.tsx

package/dist/generator.d.ts

@@ -1,2 +1,6 @@
 import type { Node } from "./scanner";
-export declare function generate(node: Node, root?: boolean): string;
+export type GeneratedRoutes = {
+    imports: string[];
+    routes: string;
+};
+export declare function generate(node: Node, root?: boolean): GeneratedRoutes;

package/dist/index.js

@@ -17,8 +17,11 @@ function scan(directory) {
 			node.children.push(scan(file));
 			continue;
 		}
-		if (entry.name === "page.tsx") node.page = file;
-		if (entry.name === "layout.tsx") node.layout = file;
+		const match = /^(page|layout|loading)\.(jsx|tsx)$/.exec(entry.name);
+		if (!match) continue;
+		const [, name, extension] = match;
+		const key = name;
+		if (!node[key] || extension === "tsx") node[key] = file;
 	}
 	return node;
 }
@@ -29,32 +32,77 @@ function getRoutePath(directory) {
 	return segment.replace(/^\[(.+)\]$/, ":$1");
 }
 function generateImport(file) {
-	return `async ()=>({
-        Component: (await import(${JSON.stringify(normalizePath(file))})).default
-    })`;
+	return `async () => ({
+    Component: (await import(${JSON.stringify(normalizePath(file))})).default
+  })`;
 }
-function generate(node, root = false) {
+function generateLazyComponent(file) {
+	return `lazy(() => import(${JSON.stringify(normalizePath(file))}))`;
+}
+function generateNode(node, root, context, inheritedBoundary) {
 	const route = {};
+	const hasBoundary = inheritedBoundary || Boolean(node.loading);
 	if (!root) route.path = JSON.stringify(getRoutePath(node.directory));
-	if (node.layout) route.lazy = generateImport(node.layout);
+	let loadingComponent;
+	if (node.loading) {
+		loadingComponent = `Loading${context.nextLoadingId++}`;
+		context.loadingImports.push(`import ${loadingComponent} from ${JSON.stringify(normalizePath(node.loading))};`);
+		context.hasBoundaries = true;
+	}
+	if (loadingComponent) {
+		const child = node.layout ? generateLazyComponent(node.layout) : "Outlet";
+		route.Component = `createBoundary(${loadingComponent}, ${child})`;
+	} else if (node.layout) {
+		if (hasBoundary) route.Component = generateLazyComponent(node.layout);
+		else route.lazy = generateImport(node.layout);
+	}
 	const children = [];
-	if (node.page) children.push(genObjectFromRaw({
-		index: "true",
-		lazy: generateImport(node.page)
-	}));
-	for (const child of node.children) children.push(generate(child));
+	if (node.page) {
+		const page = hasBoundary ? {
+			index: "true",
+			Component: generateLazyComponent(node.page)
+		} : {
+			index: "true",
+			lazy: generateImport(node.page)
+		};
+		children.push(genObjectFromRaw(page));
+	}
+	for (const child of node.children) children.push(generateNode(child, false, context, hasBoundary));
 	if (children.length) route.children = genArrayFromRaw(children);
 	return genObjectFromRaw(route);
 }
+function generate(node, root = false) {
+	const context = {
+		loadingImports: [],
+		nextLoadingId: 0,
+		hasBoundaries: false
+	};
+	const routes = generateNode(node, root, context, false);
+	const imports = [...context.loadingImports];
+	if (context.hasBoundaries) imports.unshift(`import { createElement, lazy, Suspense } from "react";`, `import { Outlet } from "react-router";`, `function createBoundary(Fallback, Component) {
+  return function RouteBoundary() {
+    return createElement(
+      Suspense,
+      { fallback: createElement(Fallback) },
+      createElement(Component),
+    );
+  };
+}`);
+	return {
+		imports,
+		routes
+	};
+}
 // src/index.ts
 var MODULE_ID = "virtual:routes";
 var RESOLVED_ID = `\0${MODULE_ID}`;
 function routes(directory = "src/pages") {
 	let root = "";
 	function execute() {
-		const routes = generate(scan(root), true);
+		const generated = generate(scan(root), true);
 		return `
-      export const routes = ${genArrayFromRaw([routes])};
+      ${generated.imports.join("\n")}
+      export const routes = ${genArrayFromRaw([generated.routes])};
     `;
 	}
 	return {

package/dist/scanner.d.ts

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

package/package.json

@@ -1,9 +1,16 @@
 {
   "name": "@troyio/vite-file-router",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "File-system routing plugin for Vite",
   "type": "module",
   "private": false,
+  "keywords": [
+    "vite",
+    "react",
+    "routing",
+    "react-router"
+  ],
+  "license": "MIT",
   "publishConfig": {
     "access": "public"
   },
@@ -21,7 +28,8 @@
   },
   "scripts": {
     "build": "vite build && tsc -p tsconfig.build.json",
-    "lint": "eslint src vite.config.ts"
+    "lint": "eslint src vite.config.ts",
+    "prepublish": "pnpm build"
   },
   "dependencies": {
     "knitwork": "^1.3.0",
@@ -29,15 +37,16 @@
     "vite-file-router": "link:"
   },
   "peerDependencies": {
+    "react": ">=19.2.7",
     "vite": "^6.0.0 || ^7.0.0 || ^8.0.0"
   },
   "devDependencies": {
     "@eslint/js": "^10.0.1",
     "@types/node": "^24.19.2",
-    "eslint": "^10.13.0",
-    "globals": "^17.13.0",
+    "eslint": "^10.14.0",
+    "globals": "^17.14.0",
     "typescript": "~6.0.3",
-    "typescript-eslint": "^8.72.0",
+    "typescript-eslint": "^8.72.1",
     "vite": "^8.3.5"
   }
 }