@troyio/vite-file-router 0.1.0 → 0.2.1

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
@@ -72,3 +65,9 @@ components.
 ```sh
 npm run build
 ```
+
+## Test
+
+```sh
+npm test
+```

package/dist/generator.d.ts

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

package/dist/index.js

@@ -1,7 +1,85 @@
-import fs from "node:fs";
 import path from "node:path";
-import { genArrayFromRaw, genObjectFromRaw } from "knitwork";
-import { normalizePath } from "vite";
+import { genArrayFromRaw, genObjectFromRaw, genSafeVariableName } from "knitwork";
+import { format } from "prettier";
+import fs from "node:fs";
+// src/generator.ts
+function getImportPath(file, projectRoot) {
+	const relativePath = path.relative(projectRoot, file).split(path.sep).join("/");
+	return relativePath.startsWith(".") ? relativePath : `./${relativePath}`;
+}
+function getRoutePath(directory) {
+	const segment = path.basename(directory);
+	if (segment.startsWith("[...") && segment.endsWith("]")) return "*";
+	return segment.replace(/^\[(.+)\]$/, ":$1");
+}
+function generateImport(file, projectRoot) {
+	return `async () => ({
+    Component: (await import(${JSON.stringify(getImportPath(file, projectRoot))})).default
+  })`;
+}
+function generateLazyComponent(file, projectRoot) {
+	return `lazy(() => import(${JSON.stringify(getImportPath(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));
+	let loadingComponent;
+	if (node.loading) {
+		loadingComponent = genSafeVariableName(`Loading${context.nextLoadingId++}`);
+		context.loadingImports.push(`import ${loadingComponent} from ${JSON.stringify(getImportPath(node.loading, context.projectRoot))};`);
+		context.hasBoundaries = true;
+	}
+	if (loadingComponent) {
+		const child = node.layout ? generateLazyComponent(node.layout, context.projectRoot) : "Outlet";
+		route.Component = `createBoundary(${loadingComponent}, ${child})`;
+	} else if (node.layout) {
+		if (hasBoundary) route.Component = generateLazyComponent(node.layout, context.projectRoot);
+		else route.lazy = generateImport(node.layout, context.projectRoot);
+	}
+	const children = [];
+	if (node.page) {
+		const page = hasBoundary ? {
+			index: "true",
+			Component: generateLazyComponent(node.page, context.projectRoot)
+		} : {
+			index: "true",
+			lazy: generateImport(node.page, context.projectRoot)
+		};
+		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, projectRoot = process.cwd()) {
+	const context = {
+		projectRoot,
+		loadingImports: [],
+		nextLoadingId: 0,
+		hasBoundaries: false
+	};
+	const routes = generateNode(node, root, context, false);
+	const imports = [...context.loadingImports];
+	const helpers = [];
+	if (context.hasBoundaries) {
+		imports.unshift(`import { createElement, lazy, Suspense } from "react";`, `import { Outlet } from "react-router";`);
+		helpers.push(`function createBoundary(Fallback, Component) {
+  return function RouteBoundary() {
+    return createElement(
+      Suspense,
+      { fallback: createElement(Fallback) },
+      createElement(Component),
+    );
+  };
+}`);
+	}
+	return {
+		imports,
+		helpers,
+		routes
+	};
+}
 // src/scanner.ts
 function scan(directory) {
 	const node = {
@@ -17,50 +95,40 @@ 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;
 }
-// src/generator.ts
-function getRoutePath(directory) {
-	const segment = path.basename(directory);
-	if (segment.startsWith("[...") && segment.endsWith("]")) return "*";
-	return segment.replace(/^\[(.+)\]$/, ":$1");
-}
-function generateImport(file) {
-	return `async ()=>({
-        Component: (await import(${JSON.stringify(normalizePath(file))})).default
-    })`;
-}
-function generate(node, root = false) {
-	const route = {};
-	if (!root) route.path = JSON.stringify(getRoutePath(node.directory));
-	if (node.layout) 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 (children.length) route.children = genArrayFromRaw(children);
-	return genObjectFromRaw(route);
-}
 // src/index.ts
 var MODULE_ID = "virtual:routes";
 var RESOLVED_ID = `\0${MODULE_ID}`;
 function routes(directory = "src/pages") {
+	let projectRoot = "";
 	let root = "";
-	function execute() {
-		const routes = generate(scan(root), true);
-		return `
-      export const routes = ${genArrayFromRaw([routes])};
-    `;
+	async function execute() {
+		const generated = generate(scan(root), 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"),
+			generated.helpers.join("\n"),
+			`export const routes = ${genArrayFromRaw([generated.routes])};`
+		].filter(Boolean);
+		return format(sections.join("\n\n"), { parser: "typescript" });
 	}
 	return {
 		name: "routes",
 		configResolved(config) {
-			root = path.resolve(config.root, directory);
+			projectRoot = config.root;
+			root = path.resolve(projectRoot, directory);
 		},
 		resolveId: (id) => id === MODULE_ID ? RESOLVED_ID : void 0,
 		load: (id) => id === RESOLVED_ID ? execute() : void 0,

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.1",
   "description": "File-system routing plugin for Vite",
   "type": "module",
   "private": false,
+  "keywords": [
+    "vite",
+    "react",
+    "routing",
+    "react-router"
+  ],
+  "license": "MIT",
   "publishConfig": {
     "access": "public"
   },
@@ -19,25 +26,26 @@
       "import": "./dist/index.js"
     }
   },
-  "scripts": {
-    "build": "vite build && tsc -p tsconfig.build.json",
-    "lint": "eslint src vite.config.ts"
-  },
   "dependencies": {
     "knitwork": "^1.3.0",
-    "react-router": "^8.5.1",
-    "vite-file-router": "link:"
+    "prettier": "^3.9.10"
   },
   "peerDependencies": {
+    "react": ">=19.2.7",
+    "react-router": "^8.5.1",
     "vite": "^6.0.0 || ^7.0.0 || ^8.0.0"
   },
   "devDependencies": {
-    "@eslint/js": "^10.0.1",
+    "@biomejs/biome": "^2.6.4",
     "@types/node": "^24.19.2",
-    "eslint": "^10.13.0",
-    "globals": "^17.13.0",
     "typescript": "~6.0.3",
-    "typescript-eslint": "^8.72.0",
     "vite": "^8.3.5"
+  },
+  "scripts": {
+    "build": "vite build && tsc -p tsconfig.build.json",
+    "test": "pnpm build && node --test",
+    "lint": "biome check",
+    "format": "biome format --write",
+    "prepublish": "pnpm audit & pnpm build"
   }
-}
+}