@enhancd/react-file-router 1.0.0

package/README.md

@@ -0,0 +1,330 @@
+# @enhancd/react-file-router
+
+File-based routing for Vite + React apps using react-router-dom V6. Automatically generates routes from a directory structure — no manual `RouteObject` configuration needed.
+
+## Installation
+
+```
+npm i @enhancd/react-file-router react-router-dom
+```
+
+> `react` and `react-dom` are also required as peer dependencies if not already installed.
+
+## Getting Started
+
+### 1. Add the Vite plugin
+
+```typescript
+// vite.config.ts
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import { reactFileRouterVitePlugin } from "@enhancd/react-file-router/vite-plugin";
+import * as path from "path";
+
+export default defineConfig({
+  plugins: [
+    react(),
+    reactFileRouterVitePlugin(),
+  ],
+  resolve: {
+    alias: {
+      // optional but recommended — lets you import pages as `import { AboutPage } from "@router"`
+      "@router": path.resolve(__dirname, "./src/$router"),
+    },
+  },
+});
+```
+
+### 2. Set up the router provider
+
+```typescript
+// src/main.tsx
+import { StrictMode } from "react";
+import * as ReactDOM from "react-dom/client";
+import { RouterProvider, createBrowserRouter } from "react-router-dom";
+import { routerSchema } from "@enhancd/react-file-router";
+
+ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
+  <StrictMode>
+    <RouterProvider router={createBrowserRouter(routerSchema)} />
+  </StrictMode>
+);
+```
+
+### 3. Create the `$router` directory
+
+Create `src/$router/` and add route files following the naming conventions below.
+
+## File Naming Conventions
+
+Route files live inside `src/$router/` and follow the pattern `Name.type.tsx`:
+
+| Suffix | Purpose | Example filename | Example component name |
+|--------|---------|-----------------|----------------------|
+| `.page.tsx` | Page component | `Index.page.tsx` | `IndexPage` |
+| `.lazy.page.tsx` | Lazy-loaded page (code split) | `Home.lazy.page.tsx` | `HomeLazyPage` |
+| `.layout.tsx` | Layout wrapper (renders `<Outlet />`) | `Index.layout.tsx` | `IndexLayout` |
+| `.404.tsx` | Not-found page for this route level | `Index.404.tsx` | `Index404` |
+| `.error.tsx` | Error boundary for this route level | `Index.error.tsx` | `IndexError` |
+| `.fallback.tsx` | Suspense fallback for a lazy page | `Home.fallback.tsx` | `HomeFallback` |
+
+**Component naming rule:** each `.`-separated part of the filename (excluding the file extension) is PascalCased and concatenated. `my.product.page.tsx` → `MyProductPage`.
+
+## Folder Naming Conventions
+
+Sub-route folders inside `$router` must start with `$` or `@`:
+
+| Prefix | Meaning | Folder name | Generated path |
+|--------|---------|-------------|----------------|
+| `$` | Static path segment | `$products` | `/products` |
+| `@` | Dynamic URL parameter | `@productId` | `/:productId` |
+
+Nesting maps directly to URL nesting:
+
+```
+$router/
+├── $products/          → /products
+│   └── @productId/     → /products/:productId
+└── $about/             → /about
+```
+
+## Directory Structure Example
+
+```
+src/$router/
+├── index.ts                              ← re-exports all page components
+├── Index.page.tsx                        ← /
+├── Index.layout.tsx                      ← layout wrapping all children
+├── Index.404.tsx                         ← shown for unmatched routes
+├── Index.error.tsx                       ← error boundary for root
+│
+├── $about/
+│   └── About.page.tsx                    ← /about
+│
+└── $products/
+    ├── Products.page.tsx                 ← /products
+    ├── Products.error.tsx                ← error boundary for /products
+    │
+    └── @productId/
+        ├── Product.lazy.page.tsx         ← /products/:productId (lazy loaded)
+        ├── Product.fallback.tsx          ← shown while lazy chunk loads
+        └── Product.error.tsx             ← error boundary for /products/:productId
+```
+
+## Route Types in Detail
+
+### Page (`.page.tsx`)
+
+The main component rendered at a route. For dynamic routes the URL parameters are passed as props:
+
+```typescript
+// $router/$products/@productId/Product.page.tsx
+export const ProductPage = (params: { productId: string }) => {
+  return <div>Product: {params.productId}</div>;
+};
+```
+
+### Lazy Page (`.lazy.page.tsx`)
+
+Same as a page but code-split into a separate bundle chunk. The plugin automatically wraps it in `React.lazy` + `React.Suspense`. Use a `.fallback.tsx` in the same folder to show UI while the chunk loads:
+
+```typescript
+// $router/$products/@productId/Product.lazy.page.tsx
+export const ProductLazyPage = (params: { productId: string }) => {
+  return <div>Product: {params.productId}</div>;
+};
+```
+
+```typescript
+// $router/$products/@productId/Product.fallback.tsx
+export const ProductFallback = () => <div>Loading...</div>;
+```
+
+If no `.fallback.tsx` is present, nothing is rendered while the chunk loads.
+
+### Layout (`.layout.tsx`)
+
+Wraps all child routes at the same level. Must render `<Outlet />` where children should appear:
+
+```typescript
+// $router/Index.layout.tsx
+import { Outlet } from "react-router-dom";
+
+export const IndexLayout = () => (
+  <div>
+    <nav>My Nav</nav>
+    <Outlet />
+  </div>
+);
+```
+
+### 404 Page (`.404.tsx`)
+
+Rendered when no child routes match. Compiled to a `{ path: "*" }` catch-all route:
+
+```typescript
+// $router/Index.404.tsx
+import { NavLink } from "react-router-dom";
+
+export const Index404 = () => (
+  <div>
+    <h1>Page not found</h1>
+    <NavLink to="/">Go home</NavLink>
+  </div>
+);
+```
+
+### Error Page (`.error.tsx`)
+
+Used as the `errorElement` for its route level. Catches render errors thrown by the page component or any of its children:
+
+```typescript
+// $router/$products/Products.error.tsx
+export const ProductsError = () => (
+  <div>Something went wrong loading products.</div>
+);
+```
+
+## Type-Safe Navigation
+
+All navigation APIs accept page components instead of string paths. TypeScript infers the required URL params directly from the component's props — omitting a required param is a compile-time error.
+
+### `route(page, params?)`
+
+Generates a path string from a page component reference.
+
+```typescript
+import { route } from "@enhancd/react-file-router";
+import { AboutPage, ProductLazyPage } from "@router";
+
+route(AboutPage)                            // → "/about"
+route(ProductLazyPage, { productId: "1" }) // → "/products/1"
+```
+
+### `NavLinkToPage`
+
+Wrapper around react-router-dom's `NavLink`. All `NavLink` props are supported, including the `className` function that receives `{ isActive }`.
+
+```typescript
+import { NavLinkToPage } from "@enhancd/react-file-router";
+import { AboutPage, ProductLazyPage } from "@router";
+
+<NavLinkToPage
+  to={AboutPage}
+  className={({ isActive }) => isActive ? "active" : ""}
+>
+  About
+</NavLinkToPage>
+
+<NavLinkToPage to={ProductLazyPage} params={{ productId: "1" }}>
+  Product 1
+</NavLinkToPage>
+```
+
+### `LinkToPage`
+
+Wrapper around react-router-dom's `Link`. Use when active-state styling is not needed.
+
+```typescript
+import { LinkToPage } from "@enhancd/react-file-router";
+import { AboutPage, ProductLazyPage } from "@router";
+
+<LinkToPage to={AboutPage}>About</LinkToPage>
+<LinkToPage to={ProductLazyPage} params={{ productId: "1" }}>Product 1</LinkToPage>
+```
+
+### `useNavigateToPage()`
+
+Hook that returns a type-safe navigate function. Useful in event handlers, form submissions, and effects.
+
+```typescript
+import { useNavigateToPage } from "@enhancd/react-file-router";
+import { AboutPage, ProductLazyPage } from "@router";
+
+export const MyComponent = () => {
+  const navigateTo = useNavigateToPage();
+
+  return (
+    <>
+      <button onClick={() => navigateTo(AboutPage)}>Go to About</button>
+      <button onClick={() => navigateTo(ProductLazyPage, { params: { productId: "1" } })}>
+        Go to Product 1
+      </button>
+    </>
+  );
+};
+```
+
+The second argument also accepts all standard `NavigateOptions` from react-router-dom (`replace`, `state`, etc.) alongside `params`.
+
+### `NavigateToPage`
+
+Declarative redirect component — a wrapper around react-router-dom's `Navigate`. Redirects immediately when rendered.
+
+```typescript
+import { NavigateToPage } from "@enhancd/react-file-router";
+import { AboutPage } from "@router";
+
+// Redirect when a condition is met
+if (isLoggedOut) return <NavigateToPage to={AboutPage} replace />;
+```
+
+## Re-exporting Pages (Recommended)
+
+Add `index.ts` files to each folder to create a single import point for all page components:
+
+```typescript
+// $router/index.ts
+export * from "./Index.page";
+export * from "./$about";
+export * from "./$products";
+
+// $router/$products/index.ts
+export * from "./Products.page";
+export * from "./@productId";
+
+// $router/$products/@productId/index.ts
+export * from "./Product.lazy.page";
+```
+
+Then import everything from the `@router` alias:
+
+```typescript
+import { IndexPage, AboutPage, ProductsPage, ProductLazyPage } from "@router";
+```
+
+## Vite Plugin Options
+
+```typescript
+reactFileRouterVitePlugin({
+  rootDir?: string,   // project root (default: vite config root)
+  workDir?: string,   // subdirectory inside root (default: "src")
+  routerDir?: string, // router folder name (default: "$router")
+})
+```
+
+The plugin looks for routes at `{rootDir}/{workDir}/{routerDir}/`.
+
+```typescript
+// Default: {project}/src/$router/
+reactFileRouterVitePlugin()
+
+// Custom folder name
+reactFileRouterVitePlugin({ routerDir: "pages" })
+// → {project}/src/pages/
+
+// Custom work directory
+reactFileRouterVitePlugin({ workDir: "app" })
+// → {project}/app/$router/
+```
+
+## How It Works
+
+At startup (and on file changes in dev mode) the Vite plugin:
+
+1. Scans the `$router` directory recursively to build a route schema from folder and file names.
+2. Generates a virtual module (`virtual:react-file-router-schema`) containing the full `RouteObject[]` array and registers each page component in `window.__ENHANCD_REACT_FILE_ROUTER__` for use by `route()`.
+3. For `.lazy.page.tsx` files, generates a wrapper module that uses `React.lazy` + `React.Suspense` so the actual page code is split into a separate chunk.
+4. Hot-reloads automatically when route files are added, removed, or renamed.
+
+The `routerSchema` import you pass to `createBrowserRouter()` resolves to this virtual module at build/dev time — no generated files are written to disk.

package/eslint.config.mjs

@@ -0,0 +1,8 @@
+import { createConfig } from "../../eslint.config.mjs";
+import { fileURLToPath } from "url";
+import { dirname } from "path";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+export default createConfig(__dirname);

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@enhancd/react-file-router",
+  "description": "File-based routing for Vite + React apps using react-router-dom V6. Automatically generates routes from a directory structure — no manual RouteObject configuration needed.",
+  "version": "1.0.0",
+  "type": "module",
+  "author": "Alexandr Maliovaniy <alexandrmaliovaniy@gmail.com>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/alexandrmaliovaniy/enhancd/blob/master/packages/react-file-router/README.md"
+  },
+  "homepage": "https://github.com/alexandrmaliovaniy/enhancd/blob/master/packages/react-file-router/README.md",
+  "scripts": {
+    "test": "vitest",
+    "build": "tsc && rollup -c"
+  },
+  "main": "./dist/index.cjs.js",
+  "module": "./dist/index.esm.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.esm.js",
+      "require": "./dist/index.cjs.js"
+    },
+    "./vite-plugin": {
+      "types": "./dist/vite-plugin.d.ts",
+      "import": "./dist/vite-plugin.esm.js",
+      "require": "./dist/vite-plugin.cjs.js"
+    }
+  },
+  "keywords": [
+    "react",
+    "router",
+    "file"
+  ],
+  "peerDependencies": {
+    "react": "*",
+    "react-router-dom": "*",
+    "fs": "*",
+    "vite": "*",
+    "path": "*"
+  }
+}

package/rollup.config.js

@@ -0,0 +1,99 @@
+import resolve from "@rollup/plugin-node-resolve";
+import commonjs from "@rollup/plugin-commonjs";
+import esbuild from "rollup-plugin-esbuild";
+import terser from "@rollup/plugin-terser";
+import peerDepsExternal from "rollup-plugin-peer-deps-external";
+import dts from "rollup-plugin-dts";
+import { readFileSync } from "fs";
+
+function logBundledModules() {
+  const seen = new Set();
+
+  return {
+    name: "log-bundled-modules",
+    moduleParsed(info) {
+      if (seen.has(info.id)) return;
+      seen.add(info.id);
+      if (info.id.includes("\0")) return;
+
+      console.log("[bundled]", info.id);
+    }
+  };
+}
+
+const pkg = JSON.parse(readFileSync("./package.json", "utf-8"));
+
+const entries = {
+  index: "src/index.ts",
+  "vite-plugin": "src/lib/vite-plugin/vitePlugin.ts",
+};
+
+const createConfig = (input, output, format) => ({
+  input,
+  output: {
+    file: output,
+    format,
+    sourcemap: true,
+    exports: "named",
+    ...(format === "esm" && { preserveModules: false }),
+  },
+  onwarn(warning, warn) {
+    if (warning.code === "UNRESOLVED_IMPORT") {
+      throw new Error(warning.message);
+    }
+    warn(warning);
+  },
+  plugins: [
+    logBundledModules(),
+    peerDepsExternal(),
+    esbuild({
+      include: /\.[jt]sx?$/,
+      minify: false,
+      target: "es2015",
+      jsx: "automatic",
+      tsconfig: "tsconfig.json",
+    }),
+    resolve({
+      extensions: [".ts", ".tsx", ".js", ".jsx"],
+    }),
+    commonjs(),
+    terser(),
+  ],
+  external: [
+    ...Object.keys(pkg.peerDependencies || {}),
+    /^virtual:/,
+  ],
+});
+
+const createDtsConfig = (input, output) => ({
+  input,
+  output: {
+    file: output,
+    format: "esm",
+  },
+  plugins: [
+    dts({
+      respectExternal: true,
+      compilerOptions: {
+        declarationMap: false,
+      }
+    })
+  ],
+  external: [
+    /node_modules/,
+    ...Object.keys(pkg.peerDependencies || {}),
+    /^virtual:/,
+  ],
+});
+
+const configs = Object.entries(entries).flatMap(([name, input]) => {
+  const outputBase = name === "index" ? "dist/index" : `dist/${name}`;
+
+  return [
+    createConfig(input, `${outputBase}.esm.js`, "esm"),
+    createConfig(input, `${outputBase}.cjs.js`, "cjs"),
+    createDtsConfig(input, `${outputBase}.d.ts`),
+  ];
+});
+
+export default configs;

package/src/index.ts

@@ -0,0 +1 @@
+export * from "./lib/reactFileRouter";

package/src/lib/navigate-to-page/index.ts

@@ -0,0 +1 @@
+export * from "./navigate-to-page";

package/src/lib/navigate-to-page/navigate-to-page.tsx

@@ -0,0 +1,23 @@
+import { ReactElement } from "react";
+import { Navigate, useNavigate, NavigateProps, NavLink, Link, NavLinkProps, LinkProps } from "react-router-dom"
+import { route } from "../reactFileRouter";
+
+export const useNavigateToPage = () => {
+  const navigate = useNavigate();
+  return <Page extends (...args: any[]) => ReactElement>(page: Page, params?: Page extends (...args: [infer Args]) => ReactElement ? { params?: Args } & NavigateProps : { params: {} }) => navigate(route(page, params?.params), params);
+}
+
+export const NavigateToPage = <Page extends (...args: any[]) => ReactElement>(props: Omit<NavigateProps, "to"> & { to: Page, params?: Page extends (...args: [infer Args]) => ReactElement ? Args : { params: {} }}) => {
+  const {to, params: prms, ...prps} = props;
+  return <Navigate to={route(to, prms)} {...prps} />;
+}
+
+export const NavLinkToPage = <Page extends (...args: any[]) => ReactElement>(props: Omit<NavLinkProps, "to"> & { to: Page, params?: Page extends (...args: [infer Args]) => ReactElement ? Args : { params: {} }}) => {
+  const {to, params: prms, ...prps} = props;
+  return <NavLink to={route(to, prms)} {...prps} />;
+}
+
+export const LinkToPage = <Page extends (...args: any[]) => ReactElement>(props: Omit<LinkProps, "to"> & { to: Page, params?: Page extends (...args: [infer Args]) => ReactElement ? Args : { params: {} }}) => {
+  const {to, params: prms, ...prps} = props;
+  return <Link to={route(to, prms)} {...prps} />;
+}

package/src/lib/reactFileRouter.ts

@@ -0,0 +1,3 @@
+export * from "./route/route";
+export * from "./router-schema/router-schema";
+export * from "./navigate-to-page";

package/src/lib/route/route.ts

@@ -0,0 +1,12 @@
+import { ReactElement } from "react";
+import { href } from "react-router-dom";
+
+export const route = <Page extends (...args: any[]) => ReactElement>(page: Page, params?: Page extends (...args: [infer Args]) => ReactElement ? Args : never): string => {
+    if (!window) throw new Error("window object not found!");
+    if (!("__ENHANCD_REACT_FILE_ROUTER__" in window)) throw new Error("enhancd react router not found! Make sure vite plugin enabled");
+    if (!window.__ENHANCD_REACT_FILE_ROUTER__?.has(page)) throw new Error("Page not found!");
+    const value = window.__ENHANCD_REACT_FILE_ROUTER__.get(page);
+    if (!value) throw new Error("Path not setteled!");
+    if (!params) return value;
+    return href(value, params);
+}

package/src/lib/router-schema/router-schema.ts

@@ -0,0 +1,5 @@
+
+import { RouteObject } from "react-router-dom";
+import schema from "virtual:react-file-router-schema";
+
+export const routerSchema = schema as RouteObject[];

package/src/lib/vite-plugin/__tests__/reactFileRouterVitePlugin.spec.ts

@@ -0,0 +1,16 @@
+import * as path from "path";
+import { reactFileRouterVitePlugin } from "../vitePlugin";
+
+describe("Vite plugin", () => {
+  it("Init", () => {
+
+    const routerPluginObj = reactFileRouterVitePlugin();
+
+    expect(routerPluginObj.name).toEqual("enhancd-react-file-router");
+    expect(routerPluginObj.enforce).toEqual("pre");
+    expect(typeof routerPluginObj.configResolved).toBe("function");
+    expect(typeof routerPluginObj.resolveId).toBe("function");
+    expect(typeof routerPluginObj.load).toBe("function");
+  });
+
+});

package/src/lib/vite-plugin/__tests__/src/$router/$default/DefaultDeclaration.page.tsx

@@ -0,0 +1,3 @@
+export default function () {
+    return "Default declaraction page";
+}

package/src/lib/vite-plugin/__tests__/src/$router/$lazy/Lazy.fallback.tsx

@@ -0,0 +1,3 @@
+export const LazyFallback = () => {
+    return "Lazy loading...";
+};

package/src/lib/vite-plugin/__tests__/src/$router/$lazy/Lazy.lazy.page.tsx

@@ -0,0 +1,3 @@
+export const LazyLazyPage = () => {
+    return "Lazy page"
+}

package/src/lib/vite-plugin/__tests__/src/$router/Index.404.tsx

@@ -0,0 +1,3 @@
+export const Index404 = () => {
+    return "404 page";
+}

package/src/lib/vite-plugin/__tests__/src/$router/Index.error.tsx

@@ -0,0 +1,3 @@
+export const IndexError = () => {
+    return "Error";
+}

package/src/lib/vite-plugin/__tests__/src/$router/Index.layout.tsx

@@ -0,0 +1,10 @@
+import { Outlet } from "react-router";
+
+export const IndexLayout = () => {
+    return (
+        <div>
+            IndexLayout
+            <Outlet />
+        </div>
+    )
+};

package/src/lib/vite-plugin/__tests__/src/$router/Index.page.tsx

@@ -0,0 +1,3 @@
+export const IndexPage = () => {
+    return "Index Page";
+}

package/src/lib/vite-plugin/compile-folder-to-schema/compileFolderToSchema.ts

@@ -0,0 +1,125 @@
+import * as fs  from "fs";
+import * as path from "path";
+import * as crypto from "node:crypto";
+
+export type FolderSchema = {
+  folderPath: string;
+  files: {
+    page?: {
+      id: string;
+      path: string;
+      fileName: string;
+      componentName: string;
+      realtivePath: string;
+      importString: string;
+      export: "named" | "default";
+    }
+    "lazy.page"?: {
+      id: string;
+      path: string;
+      fileName: string;
+      componentName: string;
+      realtivePath: string;
+      importString: string;
+      export: "named" | "default";
+    },
+    layout?: {
+      id: string;
+      path: string;
+      fileName: string;
+      componentName: string;
+      importString: string;
+      export: "named" | "default";
+    },
+    error?: {
+      id: string;
+      path: string;
+      fileName: string;
+      componentName: string;
+      importString: string;
+      export: "named" | "default";
+    },
+    fallback?: {
+      id: string;
+      path: string;
+      fileName: string;
+      componentName: string;
+      importString: string;
+      export: "named" | "default";
+    },
+    "404"?: {
+      id: string;
+      path: string;
+      fileName: string;
+      componentName: string;
+      importString: string;
+      export: "named" | "default";
+    },
+  };
+  subroutes: FolderSchema[]
+}
+
+
+const getFunctionExportType = (fnName: string, rawFile: string): "named" | "default" => {
+  if (new RegExp(`export\\s+function\\s+${fnName}`).test(rawFile)) return "named";
+  if (new RegExp(`export\\s+const\\s+${fnName}\\s*=\\s*\\(`).test(rawFile)) return "named";
+  if (new RegExp(`const\\s+${fnName}\\s*=\\s*function`).test(rawFile) && new RegExp(`export\\s*{[A-Za-z0-9\\s,]*${rawFile}`).test(rawFile)) return "named";
+  if (new RegExp(`const\\s+${fnName}\\s*=\\s*\\(`).test(rawFile) && new RegExp(`export\\s*{[A-Za-z0-9\\s,]*${rawFile}`).test(rawFile)) return "named";
+
+  if (new RegExp(`export\\s+default\\s+function\\s+${fnName}`).test(rawFile)) return "default";
+  if (new RegExp("export\\s+default\\s+function").test(rawFile)) return "default";
+  if (new RegExp(`const\\s+${fnName}\\s*=\\s*function`).test(rawFile) && new RegExp(`export\\s+default\\s+${rawFile}`).test(rawFile)) return "default";
+  if (new RegExp(`const\\s+${fnName}\\s*=\\s*\\(`).test(rawFile) && new RegExp(`export\\s+default\\s+${rawFile}`).test(rawFile)) return "default";
+  if (new RegExp(`function\\s+${fnName}`).test(rawFile) && new RegExp(`export\\s+default\\s+${rawFile}`).test(rawFile)) return "default";
+
+  return "default";
+};
+
+const fileNametoComponentName = (name: string) => {
+  return name.split(".").slice(0, -1).map(e => `${e.charAt(0).toUpperCase()}${e.slice(1)}`).join("");
+};
+
+const fileImportString = (componentName: string, id: string, path: string, exportType: "named" | "default", lazy = false) => {
+  if (lazy && exportType === "named") return `const Lazy${componentName} = React.lazy(() => import("${path}").then(module => { return { default: module.${componentName} } }));`;
+  if (lazy && exportType === "default") return `const Lazy${componentName} = React.lazy(() => import("${path}"));`;
+  if (exportType === "named") return `import { ${componentName} as ${id} } from "${path}";`;
+  return `import ${id} from "${path}";`;
+};
+
+export const compileFolderToSchema = (folderPath: string, routerPath = folderPath): FolderSchema => {
+  if (!fs.existsSync(folderPath)) throw new Error(`Failed to run react-file-router vite plugin. Folder "${folderPath}" doesn't exist`);
+  const dirContent = fs.readdirSync(folderPath);
+  const subroutes = [];
+  const files: FolderSchema["files"] = { };
+  for (const itemName of dirContent) {
+    const itemPath = path.join(folderPath, itemName);
+    const itemStat = fs.statSync(itemPath);
+    if (itemStat.isDirectory() && (itemName.startsWith("@") || itemName.startsWith("$"))) subroutes.push(itemPath);
+    if (!itemStat.isFile()) continue;
+    const match = itemName.match(/\.(?<type>lazy.page|page|error|layout|fallback|404)\./);
+    if (!match || !match.groups) continue;
+    const type = match.groups.type as keyof FolderSchema["files"];
+    const componentName = fileNametoComponentName(itemName);
+    const rawFile = fs.readFileSync(itemPath, "utf-8");
+    const exportType = "named" as const;
+
+    const relativePath = path.relative(routerPath, folderPath).replace(/\\/g, "/").replace(/\\/g, "/").replace(/@/g, "/:").replace(/\$/g, "/").replaceAll(/\/+/g, "/") || "/";
+    const itemSchema = { path: itemPath.replace(/\\/g, "/"), id: `A${crypto.createHash("sha256").update(`${relativePath}/${itemName}`, "utf-8").digest("hex")}`, fileName: itemName, componentName, realtivePath: relativePath, importString: "", export: exportType };
+
+    itemSchema.importString = fileImportString(itemSchema.componentName, itemSchema.id, itemSchema.path, exportType);
+    if (type === "lazy.page") {
+      files["page"] = itemSchema;
+      files["lazy.page"] = { ...itemSchema, path: `virtual:react-file-router/${itemSchema.id}.tsx` };
+      files["lazy.page"].importString = fileImportString(files["lazy.page"].componentName, files["lazy.page"].id, files["lazy.page"].path, files["lazy.page"].export, true);
+    } else {
+      files[type] = itemSchema;
+    }
+  }
+
+
+  return {
+    folderPath,
+    files,
+    subroutes: subroutes.map(subroutePath => compileFolderToSchema(subroutePath, routerPath))
+  };
+};

package/src/lib/vite-plugin/compile-lazy-pages/compileLazyPages.ts

@@ -0,0 +1,30 @@
+import * as fs from "fs";
+import { FolderSchema } from "../compile-folder-to-schema/compileFolderToSchema";
+
+const generatePageFile = (file: FolderSchema["files"]) => {
+  return `import * as React from "react";
+    ${file["fallback"] ? file["fallback"].importString : ""}
+    ${file["lazy.page"]?.importString}
+
+    ${file["page"]?.export === "default" ? "export default" : "export"} const ${file.page?.componentName} = (args = {}) => {
+        return React.createElement(
+            React.Suspense,
+            { fallback: React.createElement(${file["fallback"] ? file["fallback"].id : "() => null"}, null) },
+            React.createElement(Lazy${file["page"]?.componentName}, { ...args })
+        )
+    }
+
+    `;
+};
+
+export const compileLazyPages = (schema: FolderSchema, rootFolder: string): Record<string, { rawFile: string, lazy: boolean, linkedFile: string }> => {
+  const out: Record<string, { rawFile: string, lazy: boolean, linkedFile: string }> = {};
+  if (schema.files["lazy.page"] && schema.files["page"]) {
+    const rawFile = fs.readFileSync(schema.files["page"].path, "utf-8");
+    out[schema.files["lazy.page"].path] = { lazy: true, rawFile, linkedFile: schema.files["page"].path };
+    out[schema.files["page"].path] = { lazy: false, rawFile: generatePageFile(schema.files), linkedFile: schema.files["lazy.page"].path };
+  }
+  return schema.subroutes.reduce((acc, el) => {
+    return { ...acc, ...compileLazyPages(el, rootFolder) };
+  }, out);
+};

package/src/lib/vite-plugin/compile-schema-to-router-file/compileSchemaToRouterFile.ts

@@ -0,0 +1,64 @@
+import * as fs from "fs";
+import * as path from "path";
+import { FolderSchema } from "../compile-folder-to-schema/compileFolderToSchema";
+import { routerSchema } from "src/lib/reactFileRouter";
+
+
+const compileImports = (schema: FolderSchema, rootDir: string): string => {
+    const out: string[] = [];
+    const fileTypes = Object.keys(schema.files) as `${keyof FolderSchema["files"]}`[];
+
+
+    fileTypes.forEach(fileType => {
+        const file = schema.files[fileType];
+        if (["lazy.page", "fallback"].includes(fileType) || !file?.importString) return;
+        out.push(file?.importString);
+    })
+
+    return [...out, ...schema.subroutes.map(subroutSchema => compileImports(subroutSchema, rootDir))].join("\n").replace(/^\n/gm, "");
+}
+
+
+const compileRoutes = (schema: FolderSchema, rootFolder: string): typeof routerSchema => {
+    if (!schema.files.page && !schema.files[404] && !schema.files.layout) return [];
+
+    const element = schema.files.page ? schema.files.page.realtivePath.search(":") > 0 ? `React.createElement(() => React.createElement(${schema.files.page.id}, useParams()), null)` : `React.createElement(${schema.files.page.id}, null)` : "null";
+    const notFoundPage = schema.files[404] ? { path: "*", element: `React.createElement(${schema.files[404].id}, null)` } : {};
+    if (!schema.files.layout) {
+        return [{
+            path: schema.files.page?.realtivePath || "",
+            errorElement: schema.files.error ? `React.createElement(${schema.files.error.id}, null)` : undefined,
+            element,
+        }, notFoundPage, ...schema.subroutes.map(subrouteSchema => compileRoutes(subrouteSchema, rootFolder)).flat(1)];
+    }
+    return [{
+        path: schema.files.page?.realtivePath || "",
+        element: `React.createElement(${schema.files.layout.id}, null)`,
+        errorElement: schema.files.error ? `React.createElement(${schema.files.error.id}, null)` : undefined,
+        children: [{ path: "", element }, notFoundPage, ...schema.subroutes.map(subrouteSchema => compileRoutes(subrouteSchema, rootFolder)).flat(1)]
+    }]
+}
+const compilePathInjects = (schema: FolderSchema, rootFolder: string): string => {
+    const out = [];
+
+    if (schema.files.page) out.push(`window.__ENHANCD_REACT_FILE_ROUTER__.set(${schema.files.page.id}, "${schema.files.page.realtivePath}");`);
+
+    return [...out, ...schema.subroutes.map(subroutSchema => compilePathInjects(subroutSchema, rootFolder))].join("\n").replace(/^\n/gm, "");
+}
+
+export const compileSchemaToRouterFile = (schema: FolderSchema, routerFolder: string, rootFolder: string): string => {
+    if (!fs.existsSync(routerFolder)) throw new Error(`Failed to run react-file-router vite plugin. Folder "${routerFolder}" doesn't exist`);
+
+    const imports = compileImports(schema, rootFolder);
+    const routes = JSON.stringify(compileRoutes(schema, routerFolder), null, 2).replace(/"(React\.createElement\(.+, null\))"/g, "$1");
+
+    return `import * as React from "react";
+import { useParams } from "react-router-dom"
+${imports}
+
+export default ${routes}
+
+window.__ENHANCD_REACT_FILE_ROUTER__ = new Map();
+${compilePathInjects(schema, rootFolder)}`;
+
+}

package/src/lib/vite-plugin/transpile-lazy-page/transpile-lazy-page.ts

@@ -0,0 +1,29 @@
+import { transform } from "@babel/standalone";
+
+export const transpileLazyPage = async (filename: string, source: string, resolve: (idString: string) => Promise<{ id: string } | null>) => {
+  const imports = Array.from(source.matchAll(/^\s*import.+"(?<id>.+)".+/mg));
+  const resolvedImports = await Promise.all(imports.map(async match => {
+    if (!match.groups?.id) return "";
+    const resolvedId = (await resolve(match.groups.id))?.id;
+
+    if (typeof resolvedId !== "string") return "";
+    return match[0].replace(match[1], resolvedId);
+  }));
+  const lastImportelement = imports.at(-1);
+  const codeWithoutImports = lastImportelement ? source.slice(lastImportelement.index + lastImportelement[0].length, -1) : source;
+
+  const transpiledCode = transform(codeWithoutImports, {
+    presets: [["react", {
+      pragma: "React.createElement",
+      pragmaFrag: "React.Fragment"
+    }],
+    "typescript"],
+    filename,
+    plugins: [["transform-react-jsx", { runtime: "automatic" }]]
+  }).code;
+
+  if (!transpiledCode) throw Error(`Babel could transpile file: ${filename}`);
+
+
+  return resolvedImports.join("") + transpiledCode;
+};

package/src/lib/vite-plugin/vitePlugin.ts

@@ -0,0 +1,69 @@
+import * as path from "path";
+import * as fs from "fs";
+import { Plugin, ResolvedConfig, ViteDevServer } from "vite";
+import { compileFolderToSchema } from "./compile-folder-to-schema/compileFolderToSchema";
+import { compileSchemaToRouterFile } from "./compile-schema-to-router-file/compileSchemaToRouterFile";
+import { compileLazyPages } from "./compile-lazy-pages/compileLazyPages";
+import { transpileLazyPage } from "./transpile-lazy-page/transpile-lazy-page";
+
+export function reactFileRouterVitePlugin(params?: { rootDir?: string, routerDir?: string, workDir?: string }): Plugin {
+  let routerFile: string;
+  let lazyPagesMap: Record<string, { rawFile: string, lazy: boolean, linkedFile: string }>;
+  let config: ResolvedConfig;
+  let server: ViteDevServer;
+
+  return {
+    name: "enhancd-react-file-router",
+    enforce: "pre" as const,
+    async configResolved(cfg) {
+      config = cfg;
+      const rootDir = params?.rootDir ?? cfg.root;
+      const routerDir = path.join(rootDir, params?.workDir ?? "src", params?.routerDir ?? "$router");
+      if (!fs.existsSync(routerDir)) throw new Error(`Folder "${routerDir}" doesn't exist!`);
+      const schema = compileFolderToSchema(routerDir);
+      routerFile = compileSchemaToRouterFile(schema, routerDir, rootDir);
+      lazyPagesMap = compileLazyPages(schema, rootDir);
+    },
+    configureServer(viteServer) {
+      server = viteServer;
+    },
+    resolveId(id: string) {
+      if (id.startsWith("virtual:react-file-router-schema")) return "\0" + id;
+      if (lazyPagesMap[id] && lazyPagesMap[id].lazy) return "\0" + id;
+    },
+    async load(id: string) {
+      if (id.includes("virtual:react-file-router-schema")) return routerFile;
+      const pagePath = id.replace("\0", "");
+      const page = lazyPagesMap[pagePath];
+
+      if (page && page.lazy) {
+        return transpileLazyPage(id, page.rawFile, (source: string) => this.resolve(source, page.linkedFile));
+
+      }
+      if (page && !page.lazy) return page.rawFile;
+    },
+    watchChange(id, change) {
+      const rootDir = params?.rootDir ?? config.root;
+      const routerDir = path.join(rootDir, params?.workDir ?? "src", params?.routerDir ?? "$router");
+      const relPath = path.relative(routerDir, id);
+
+      if (relPath.startsWith("..")) return;
+      const schema = compileFolderToSchema(routerDir);
+      routerFile = compileSchemaToRouterFile(schema, routerDir, rootDir);
+      lazyPagesMap = compileLazyPages(schema, rootDir);
+      const virtualModule = server.moduleGraph.getModuleById("\0virtual:react-file-router-schema");
+      if (virtualModule) server.moduleGraph.invalidateModule(virtualModule);
+      const module = lazyPagesMap[id]?.linkedFile ? server.moduleGraph.getModuleById(`\0${lazyPagesMap[id]?.linkedFile}`) : server.moduleGraph.getModuleById(`\0${id}`);
+      if (module) {
+        server.moduleGraph.invalidateModule(module);
+        module.importers.forEach(importer => {
+          server.moduleGraph.invalidateModule(importer);
+        });
+      }
+      server.ws.send({
+        type: "full-reload",
+        path: "*"
+      });
+    }
+  };
+}

package/src/types/reactFileRouterSchema.d.ts

@@ -0,0 +1,14 @@
+
+type RouteSchema = Array<{
+  path: string;
+  element?: React.ReactNode;
+  children: RouteSchema[];
+}>;
+
+declare module "virtual:react-file-router-schema" {
+    export default schema as RouteSchema;
+}
+
+declare const window: {
+    __ENHANCD_REACT_FILE_ROUTER__?: Map<object, string>;
+}

package/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ]
+}

package/tsconfig.lib.json

@@ -0,0 +1,32 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "rootDir": "src",
+    "outDir": "dist",
+    "tsBuildInfoFile": "dist/tsconfig.lib.tsbuildinfo",
+    "emitDeclarationOnly": true,
+    "module": "esnext",
+    "jsx": "react-jsx",
+    "noEmit": false,
+    "moduleResolution": "bundler",
+    "forceConsistentCasingInFileNames": true,
+    "types": ["node"]
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.d.ts"],
+  "references": [],
+  "exclude": [
+    "vite.config.ts",
+    "vite.config.mts",
+    "vitest.config.ts",
+    "vitest.config.mts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.js",
+    "src/**/*.spec.js",
+    "src/**/*.test.jsx",
+    "src/**/*.spec.jsx"
+  ]
+}

package/tsconfig.spec.json

@@ -0,0 +1,37 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/vitest",
+    "types": [
+      "vitest/globals",
+      "vitest/importMeta",
+      "vite/client",
+      "node",
+      "vitest"
+    ],
+    "module": "esnext",
+    "noEmit": false,
+    "moduleResolution": "bundler",
+    "forceConsistentCasingInFileNames": true
+  },
+  "include": [
+    "vite.config.ts",
+    "vite.config.mts",
+    "vitest.config.ts",
+    "vitest.config.mts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.js",
+    "src/**/*.spec.js",
+    "src/**/*.test.jsx",
+    "src/**/*.spec.jsx",
+    "src/**/*.d.ts"
+  ],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    }
+  ]
+}

package/vite.config.ts

@@ -0,0 +1,19 @@
+import { defineConfig } from "vite";
+
+export default defineConfig(() => ({
+  root: __dirname,
+  cacheDir: "../../node_modules/.vite/packages/react-file-router",
+  plugins: [],
+  test: {
+    name: "react-file-router",
+    watch: false,
+    globals: true,
+    environment: "node",
+    include: ["src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}"],
+    reporters: ["default"],
+    coverage: {
+      reportsDirectory: "./test-output/vitest/coverage",
+      provider: "v8" as const,
+    },
+  },
+}));