@troyio/vite-file-router 0.2.0 → 0.2.2

package/README.md

@@ -60,8 +60,29 @@ 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
 npm run build
 ```
+
+## Test
+
+```sh
+npm test
+```

package/dist/generator.d.ts

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

package/dist/index.js

@@ -1,43 +1,24 @@
-import fs from "node:fs";
 import path from "node:path";
-import { genArrayFromRaw, genObjectFromRaw } from "knitwork";
-import { normalizePath } from "vite";
-// src/scanner.ts
-function scan(directory) {
-	const node = {
-		name: path.basename(directory),
-		directory,
-		children: []
-	};
-	if (!fs.existsSync(directory)) return node;
-	const entries = fs.readdirSync(directory, { withFileTypes: true });
-	for (const entry of entries) {
-		const file = path.join(directory, entry.name);
-		if (entry.isDirectory()) {
-			node.children.push(scan(file));
-			continue;
-		}
-		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;
-}
+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) {
+function generateImport(file, projectRoot) {
 	return `async () => ({
-    Component: (await import(${JSON.stringify(normalizePath(file))})).default
+    Component: (await import(${JSON.stringify(getImportPath(file, projectRoot))})).default
   })`;
 }
-function generateLazyComponent(file) {
-	return `lazy(() => import(${JSON.stringify(normalizePath(file))}))`;
+function generateLazyComponent(file, projectRoot) {
+	return `lazy(() => import(${JSON.stringify(getImportPath(file, projectRoot))}))`;
 }
 function generateNode(node, root, context, inheritedBoundary) {
 	const route = {};
@@ -45,25 +26,25 @@ function generateNode(node, root, context, inheritedBoundary) {
 	if (!root) route.path = JSON.stringify(getRoutePath(node.directory));
 	let loadingComponent;
 	if (node.loading) {
-		loadingComponent = `Loading${context.nextLoadingId++}`;
-		context.loadingImports.push(`import ${loadingComponent} from ${JSON.stringify(normalizePath(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) : "Outlet";
+		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);
-		else route.lazy = generateImport(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)
+			Component: generateLazyComponent(node.page, context.projectRoot)
 		} : {
 			index: "true",
-			lazy: generateImport(node.page)
+			lazy: generateImport(node.page, context.projectRoot)
 		};
 		children.push(genObjectFromRaw(page));
 	}
@@ -71,15 +52,19 @@ function generateNode(node, root, context, inheritedBoundary) {
 	if (children.length) route.children = genArrayFromRaw(children);
 	return genObjectFromRaw(route);
 }
-function generate(node, root = false) {
+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];
-	if (context.hasBoundaries) imports.unshift(`import { createElement, lazy, Suspense } from "react";`, `import { Outlet } from "react-router";`, `function createBoundary(Fallback, Component) {
+	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,
@@ -88,27 +73,62 @@ function generate(node, root = false) {
     );
   };
 }`);
+	}
 	return {
 		imports,
+		helpers,
 		routes
 	};
 }
+// src/scanner.ts
+function scan(directory) {
+	const node = {
+		name: path.basename(directory),
+		directory,
+		children: []
+	};
+	if (!fs.existsSync(directory)) return node;
+	const entries = fs.readdirSync(directory, { withFileTypes: true });
+	for (const entry of entries) {
+		const file = path.join(directory, entry.name);
+		if (entry.isDirectory()) {
+			node.children.push(scan(file));
+			continue;
+		}
+		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/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 generated = generate(scan(root), true);
-		return `
-      ${generated.imports.join("\n")}
-      export const routes = ${genArrayFromRaw([generated.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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@troyio/vite-file-router",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "File-system routing plugin for Vite",
   "type": "module",
   "private": false,
@@ -26,27 +26,26 @@
       "import": "./dist/index.js"
     }
   },
-  "scripts": {
-    "build": "vite build && tsc -p tsconfig.build.json",
-    "lint": "eslint src vite.config.ts",
-    "prepublish": "pnpm build"
-  },
   "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.14.0",
-    "globals": "^17.14.0",
     "typescript": "~6.0.3",
-    "typescript-eslint": "^8.72.1",
     "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"
   }
-}
+}