next-vite-router 1.0.7 → 1.1.0

package/README.md

@@ -1,248 +1,279 @@
-# Next Vite Router
+# Next Vite Router
 
-Next Vite Router is an npm package that provides Next.js-style, file-based routing for React applications built with Vite. It generates React Router route objects from a filesystem layout (pages, layouts, not-found), and it exposes a Vite plugin that injects a virtual module to generate routes at build/dev time.
+File-based routing for React + Vite.
 
-## Installation
+Define routes with folders and let the package generate the
+[React Router](https://reactrouter.com/) `RouteObject[]`. It does not replace
+React Router, navigation, history, loaders, or application state.
 
-Install with your package manager of choice:
+## Start here
 
 ```bash
-pnpm add next-vite-router
-# or
-npm install next-vite-router
-# or
-yarn add next-vite-router
+npm create vite@latest my-app -- --template react-ts
+cd my-app
+npm install next-vite-router react-router-dom
 ```
 
-The package has peer dependencies: React, React DOM and React Router DOM. Make sure your project already includes compatible versions (React 18+ is recommended).
+Add the plugin to `vite.config.ts`:
 
-## CLI / Getting Started
-
-The quickest way to start a new project with `next-vite-router` is to use the interactive CLI:
+```ts
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import { nextViteRouter } from "next-vite-router/plugin";
 
-```bash
-npx next-vite-router init
-# or
-pnpm dlx next-vite-router init
-# or
-yarn dlx next-vite-router init
-# or
-bunx next-vite-router init
+export default defineConfig({
+  plugins: [react(), nextViteRouter()],
+});
 ```
 
-The CLI will prompt you for:
-
-1. **Project name**  name of the folder to create
-2. **Template**  which React Vite variant to use:
-   - `react-ts` (React + TypeScript)
-   - `react-swc-ts` (React + SWC + TypeScript)
-   - `react-compiler-ts` (React Compiler + TypeScript)
-3. **Src folder**  whether to keep source files in `src/` (recommended) or place them at the project root
-4. **Tailwind CSS**  whether to add and configure Tailwind CSS (with `@tailwindcss/vite`)
+Create your route tree:
+
+```text
+src/app/
+├── page.tsx
+├── about/
+│   └── page.tsx
+└── users/
+    ├── page.tsx
+    └── [id]/
+        └── page.tsx
+```
 
-### What the CLI does
+This generates:
 
-The CLI automates the entire setup:
+```text
+/
+/about
+/users
+/users/:id
+```
 
-- Scaffolds a new Vite + React project using `create-vite`
-- Installs `next-vite-router` and `react-router-dom@latest`
-- Configures the Vite plugin in `vite.config.ts`
-- Sets up path aliases (`@/*`) in `tsconfig.json` and Vite config
-- Creates TypeScript declarations for the virtual module (`virtual:next-vite-router`)
-- Generates example pages (`app/page.tsx`, `app/layout.tsx`, `app/example/page.tsx`)
-- Optionally configures Tailwind CSS with `@tailwindcss/vite` and creates `global.css`
+Use the generated router inside a normal React Router provider:
 
-After the CLI finishes:
+```tsx
+// src/App.tsx
+import { Router } from "virtual:next-vite-router";
 
-```bash
-cd <your-project-name>
-pnpm dev
+export default function App() {
+  return <Router />;
+}
 ```
 
-Your app is ready with file-based routing!
-
-## Quick Start  Vite plugin
-
-The recommended and easiest way to use this library in a Vite app is via the Vite plugin. The plugin exposes a virtual module `virtual:next-vite-router` that provides a `generateRoutes()` function and re-exports `useRoutes` from `react-router-dom` for convenience.
+```tsx
+// src/main.tsx
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { BrowserRouter } from "react-router-dom";
+import App from "./App";
 
-Example `vite.config.ts`:
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </StrictMode>,
+);
+```
 
-```ts
-import { defineConfig } from 'vite';
-import react from '@vitejs/plugin-react';
-import { nextViteRouter } from 'next-vite-router';
+That is the complete setup. Run:
 
-export default defineConfig({
-  plugins: [
-    react(),
-    nextViteRouter({ pagesDir: 'src/pages' })
-  ]
-});
+```bash
+npm run dev
 ```
 
-Example usage inside your app. **Important: generate routes once at module level** (not inside the component) to avoid infinite re-renders.
+## Use React Router directly
 
-File: `src/App.tsx`
+`Router` is only a convenience wrapper around
+`useRoutes(generateRoutes())`. You can keep using React Router APIs:
 
 ```tsx
-import { useRoutes } from 'react-router-dom';
-import { generateRoutes } from 'virtual:next-vite-router';
+import {
+  Link,
+  generateRoutes,
+  useRoutes,
+} from "virtual:next-vite-router";
+import { useNavigate, useParams } from "react-router-dom";
 
 const routes = generateRoutes();
 
 export default function App() {
   const element = useRoutes(routes);
-  return element;
+  return (
+    <>
+      <Link to="/users">Users</Link>
+      {element}
+    </>
+  );
 }
 ```
 
-File: `src/main.tsx`
+Use `useNavigate`, `useParams`, loaders, actions, and other React Router APIs
+from `react-router-dom`. The package intentionally does not create competing
+navigation or data-loading APIs.
+
+## File conventions
+
+| File or folder | Result |
+| --- | --- |
+| `page.tsx` | Route page |
+| `layout.tsx` | Nested layout rendered with React Router's `Outlet` |
+| `not-found.tsx` | `*` route for that subtree |
+| `[id]` | Dynamic segment `:id` |
+| `[...slug]` | Catch-all `*` segment |
+| `[[...slug]]` | Optional catch-all `*` segment |
+| `(admin)` | Route group omitted from the URL |
+
+Layouts are the recommended way to add route-scoped navigation, providers, or
+authorization:
+
+```text
+src/app/
+├── layout.tsx
+└── dashboard/
+    ├── layout.tsx
+    └── page.tsx
+```
 
 ```tsx
-import { StrictMode } from 'react';
-import { createRoot } from 'react-dom/client';
-import { BrowserRouter } from 'react-router-dom';
-import App from './App';
-
-createRoot(document.getElementById('root')!).render(
-  <StrictMode>
-    <BrowserRouter>
-      <App />
-    </BrowserRouter>
-  </StrictMode>
-);
+import { Outlet } from "react-router-dom";
+
+export default function DashboardLayout() {
+  return (
+    <AuthGuard>
+      <Outlet />
+    </AuthGuard>
+  );
+}
 ```
 
-**Key points:**
+## Type-safe paths
 
-- Call `generateRoutes()` once at module level, not inside the component (prevents infinite re-renders).
-- Wrap your app with `BrowserRouter` at the entry point (`main.tsx`), not inside `App`.
-- `pagesDir` (default: `src/app`) is the directory where you organize your **route files** (`page.tsx`, `layout.tsx`, `not-found.tsx`). It has nothing to do with the `App.tsx` component.
-- The virtual module is `virtual:next-vite-router` (the plugin resolves it internally).
+The Vite plugin generates `virtual-next-vite-router.d.ts` automatically:
 
-**Example file structure:**
+```tsx
+import type {
+  RouteParams,
+  RoutePath,
+} from "virtual:next-vite-router";
 
-```
-src/
-├── App.tsx                 ← Your main app component
-├── main.tsx                ← Entry point (with BrowserRouter)
-└── app/                    ← pagesDir (routes are organized here)
-    ├── page.tsx            ← Home page
-    ├── layout.tsx          ← Root layout
-    └── dashboard/
-        ├── page.tsx        ← /dashboard page
-        └── layout.tsx      ← Dashboard layout
+const path = "/users/:id" satisfies RoutePath;
+const params: RouteParams<typeof path> = { id: "123" };
 ```
 
-TypeScript note:
+Invalid paths and missing dynamic parameters are reported by TypeScript.
+No manual declaration for the virtual module is required.
 
-If you're using TypeScript in a consuming project, add a declaration file so the virtual module is recognized by the compiler. Create a file such as `src/virtual.d.ts` (or any `*.d.ts` included by your `tsconfig.json`) with the following content:
+## Lazy loading
 
-```ts
-declare module 'virtual:next-vite-router' {
-  import type { RouteObject } from 'react-router-dom';
+Pages and `not-found.tsx` files use Vite's non-eager `import.meta.glob`, so
+Vite can emit separate chunks for pages. Layouts are eager because they wrap
+the generated route tree. Lazy loading is enabled by default:
 
-  export const generateRoutes: () => RouteObject[];
-  export { useRoutes } from 'react-router-dom';
-}
-```
-
-This ensures TypeScript knows the shape of the virtual module provided by the Vite plugin and avoids `Cannot find module 'virtual:next-vite-router'` errors in editors and builds.
+```tsx
+import { configureRouter } from "next-vite-router";
 
-## Programmatic route generation
+configureRouter({
+  loadingFallback: () => <div>Loading route...</div>,
+});
+```
 
-If you prefer to generate routes manually (for custom setups), the package exports helpers you can use with `import.meta.glob`.
+`enableLazyLoading: false` is available for compatibility and testing. It does
+not turn Vite's asynchronous imports into synchronous imports.
 
-Example:
+## Optional middleware
 
-```ts
-import { createRouteGenerator } from 'next-vite-router';
+Prefer layouts for route-scoped behavior. `registerMiddleware` is an optional
+escape hatch for cross-cutting wrappers:
 
-// in a Vite environment
-const pages = import.meta.glob('../../pages/**/page.tsx');
-const layouts = import.meta.glob('../../pages/**/layout.tsx', { eager: true });
-const notFounds = import.meta.glob('../../pages/**/not-found.tsx');
+```tsx
+import { registerMiddleware } from "next-vite-router";
 
-const generateRoutes = createRouteGenerator(pages, layouts, notFounds);
-const routes = generateRoutes();
+registerMiddleware(/^\/dashboard/, (element) => (
+  <AuthGuard>{element}</AuthGuard>
+));
 ```
 
-Use this when you need a fully custom glob layout or want to call the generator at runtime.
+Middleware wraps generated route elements; it does not create routes or
+replace React Router.
+
+## CLI
 
-## API Reference
+For an interactive setup:
 
-Exports from the package (see `src/index.ts`):
+```bash
+npx create-next-vite-router init
+```
 
-- `createRouteGenerator(pages, layouts, notFounds)`  returns a function that builds `RouteObject[]` using your globs.
-- `buildRouteTree`  builds the intermediate route tree from page/layout/not-found globs.
-- `treeToRoutes`  converts the route tree to React Router routes.
-- `registerMiddleware`, `clearMiddlewares`  middleware helpers to manage registered middlewares.
-- `configureRouter`  configure router-level options.
-- `nextViteRouter(options)`  Vite plugin factory. Options:
-  - `pagesDir?: string` (default: `src/app`)
-  - `pageFile?: string` (default: `page.tsx`)
-  - `layoutFile?: string` (default: `layout.tsx`)
-  - `notFoundFile?: string` (default: `not-found.tsx`)
-- Types exported: `RouterConfig`, `RouteNode`, `RouteMiddleware`, `NextViteRouterPluginOptions`.
+The CLI creates a Vite React project, installs the package and
+`react-router-dom@^7.0.0`, configures the plugin, and adds an example route
+tree.
 
-### `configureRouter(config: RouterConfig)`
+## Compatibility
 
-Use `configureRouter` to set global router options for runtime behavior. The function merges the provided `config` with any existing configuration.
+| Package | Supported versions |
+| --- | --- |
+| React / React DOM | `>=18 <20` |
+| React Router DOM | `>=6 <8` |
+| Vite | `>=5 <9` |
 
-Common `RouterConfig` fields:
+The compatibility workflow tests React 18 and 19 with React Router 6 and 7
+across Vite 5, 6, 7, and 8.
 
-- `loadingFallback?: React.ComponentType`  component shown while lazy-loaded page components load.
-- `pagesDir?: string`  path used by the generator to resolve pages (useful if you need to override defaults at runtime).
-- `enableLazyLoading?: boolean`  when true, pages are wrapped to load lazily.
+## Advanced API
 
-Example:
+For custom glob layouts, the package exports:
 
 ```ts
-import { configureRouter } from 'next-vite-router';
-
-configureRouter({
-  loadingFallback: () => <div>Loading...</div>,
-  enableLazyLoading: true,
-});
+import {
+  buildRouteTree,
+  createRouteGenerator,
+  treeToRoutes,
+} from "next-vite-router";
 ```
 
-Call `configureRouter` during app bootstrap before calling `generateRoutes()`.
+The normal pipeline is:
 
-### `registerMiddleware(pattern: RegExp, middleware: RouteMiddleware)`
-
-`registerMiddleware` lets you register middleware functions that will be applied to route elements whose path matches the provided `pattern` (a `RegExp`). Middlewares receive the route element (`ReactElement`) and should return a new element (for example wrapping it with providers, guards, or layout components).
+```text
+filesystem -> buildRouteTree() -> treeToRoutes() -> RouteObject[] -> React Router
+```
 
-Important details:
+## Examples
 
-- Middlewares are stored in insertion order and applied sequentially.
-- To remove all registered middlewares, use `clearMiddlewares()`.
-- The internal helper `applyMiddlewares(path, element)` is used when constructing the final route element.
+The repository includes a runnable showcase in [`examples/`](./examples/):
 
-Example:
+- `basic`
+- `layouts`
+- `dynamic-routes`
+- `middleware`
+- `typed-routes`
 
-```ts
-import { registerMiddleware } from 'next-vite-router';
+Run it from the examples directory:
 
-registerMiddleware(/^\/dashboard/, (element) => (
-  <AuthGuard>{element}</AuthGuard>
-));
+```bash
+cd examples
+pnpm install
+pnpm dev
 ```
 
-## Configuration options (plugin)
+The app opens a small navigation menu so each example can be tested
+immediately. The `predev` script builds the local package automatically.
 
-The plugin takes an options object. Defaults are:
+## Development
 
-```ts
-{
-  pagesDir: 'src/app',
-  pageFile: 'page.tsx',
-  layoutFile: 'layout.tsx',
-  notFoundFile: 'not-found.tsx',
-}
+From this repository:
+
+```bash
+pnpm install
+pnpm run build
+pnpm run test:generator
+pnpm run test:routes
+pnpm run test:compatibility
+pnpm exec tsc -p test/fixture/tsconfig.json --noEmit
+pnpm run test:local
 ```
 
-Pass a custom `pagesDir` if your project uses `src/pages` or another convention.
+The route matrix lives in [`test/routes.test.js`](./test/routes.test.js).
 
 ## License
 
-MIT
+MIT

package/dist/cli.cjs

@@ -200,10 +200,18 @@ function createVirtualDTS(projectDir, useSrc) {
   }
   const filePath = path.join(targetDir, "virtual-next-vite-router.d.ts");
   const content = `declare module 'virtual:next-vite-router' {
+  import type { ReactElement } from 'react';
   import type { RouteObject } from 'react-router-dom';
 
+  export type RoutePath = string;
+  export type RoutePathParams = Record<string, Record<string, string>>;
+  export type RouteParams<P extends RoutePath> = P extends keyof RoutePathParams
+    ? RoutePathParams[P]
+    : never;
+
   export const generateRoutes: () => RouteObject[];
-  export { useRoutes } from 'react-router-dom';
+  export function Router(): ReactElement | null;
+  export { Link, useRoutes } from 'react-router-dom';
 }
 `;
   fs.writeFileSync(filePath, content, "utf-8");
@@ -221,7 +229,7 @@ import { generateRoutes, useRoutes } from 'virtual:next-vite-router';
 
 const routes = generateRoutes();
 
-function App() {
+export default function App() {
   const element = useRoutes(routes);
   return element;
 }
@@ -518,7 +526,7 @@ const init = new commander.Command().name("init").description(
   );
   const addDepsCmd = pm.addDepsCommand([
     "next-vite-router",
-    "react-router-dom@latest"
+    "react-router-dom@^7.0.0"
   ]);
   child_process.execSync(addDepsCmd, { stdio: "inherit", cwd: projectName });
   logger.info("Configuring next-vite-router in the project...");
@@ -531,7 +539,7 @@ const init = new commander.Command().name("init").description(
 Project "${projectName}" is ready!
 `);
 });
-const version = "1.0.7";
+const version = "1.1.0";
 const pkg = {
   version
 };

package/dist/index.js

@@ -1,86 +1,84 @@
-import i, { Suspense as g, lazy as z } from "react";
-import { nextViteRouter as D } from "./plugin.js";
-function f(e) {
-  return /^\([^)]+\)$/.test(e) ? "" : /^\[\.\.\.(.+)\]$/.test(e) ? "*" : /^\[([^\]]+)\]$/.test(e) ? e.replace(/^\[([^\]]+)\]$/, ":$1") : e;
-}
-function F(e) {
-  return e.replace("../../app/", "").replace(/\/?(page|layout|not-found)\.tsx$/, "");
-}
-let m = {};
-function k(e) {
-  m = { ...m, ...e };
+import { e as C, n as f } from "./index.plugin--ecyiAem.js";
+import { a as G } from "./index.plugin--ecyiAem.js";
+import i, { Suspense as y, lazy as F } from "react";
+const L = {
+  enableLazyLoading: !0
+};
+let d = { ...L };
+function x(e) {
+  d = { ...d, ...e };
 }
-function C() {
-  return m;
+function $() {
+  return d;
 }
-let d = [];
-function S(e, a) {
-  d.push({ pattern: e, middleware: a });
+let E = [];
+function T(e, r) {
+  E.push({ pattern: e, middleware: r });
 }
-function T() {
-  d = [];
+function j() {
+  E = [];
 }
-function E(e, a) {
-  let r = a;
-  for (const n of d)
-    n.pattern.test(e) && (r = n.middleware(r));
-  return r;
+function z(e, r) {
+  let n = r;
+  for (const t of E)
+    t.pattern.test(e) && (n = t.middleware(n));
+  return n;
 }
-const x = () => i.createElement("div"), y = /* @__PURE__ */ new Map();
-function R(e, a, r) {
-  const n = C();
-  if (n.enableLazyLoading === !1) {
-    const u = i.lazy(e), c = i.createElement(
-      g,
+const M = () => i.createElement("div"), b = /* @__PURE__ */ new Map();
+function R(e, r, n) {
+  const t = $();
+  if (t.enableLazyLoading === !1) {
+    const c = i.lazy(e), u = i.createElement(
+      y,
       { fallback: null },
       // No loading fallback when disabled
-      i.createElement(u)
+      i.createElement(c)
     );
-    return r ? E(r, c) : c;
+    return n ? z(n, u) : u;
   }
-  let t = y.get(a);
-  t || (t = z(e), y.set(a, t));
-  const l = n.loadingFallback || x, o = i.createElement(
-    g,
-    { fallback: i.createElement(l) },
-    i.createElement(t)
+  let l = b.get(r);
+  l || (l = F(e), b.set(r, l));
+  const o = t.loadingFallback || M, a = i.createElement(
+    y,
+    { fallback: i.createElement(o) },
+    i.createElement(l)
   );
-  return r ? E(r, o) : o;
+  return n ? z(n, a) : a;
 }
-function p(e, a, r, n) {
-  const t = F(a), l = t ? t.split("/") : [];
-  let o = e, u = "";
-  l.forEach((c, w) => {
-    u = u ? `${u}/${c}` : c, o.children.has(c) || o.children.set(c, {
-      segment: c,
-      fullPath: u,
+function p(e, r, n, t) {
+  const l = C(r), o = l ? l.split("/") : [];
+  let a = e, c = "";
+  o.forEach((u, h) => {
+    c = c ? `${c}/${u}` : u, a.children.has(u) || a.children.set(u, {
+      segment: u,
+      fullPath: c,
       children: /* @__PURE__ */ new Map()
-    }), o = o.children.get(c), w === l.length - 1 && (o[n] = r);
-  }), l.length === 0 && (e[n] = r);
+    }), a = a.children.get(u), h === o.length - 1 && (a[t] = n);
+  }), o.length === 0 && (e[t] = n);
 }
-function L(e, a, r) {
-  const n = {
+function S(e, r, n) {
+  const t = {
     segment: "",
     fullPath: "",
     children: /* @__PURE__ */ new Map()
   };
-  return Object.entries(a).forEach(([t, l]) => {
-    p(n, t, l.default, "layout");
-  }), Object.entries(e).forEach(([t, l]) => {
-    p(n, t, l, "page");
-  }), Object.entries(r).forEach(([t, l]) => {
-    p(n, t, l, "notFound");
-  }), n;
+  return Object.entries(r).forEach(([l, o]) => {
+    p(t, l, o.default, "layout");
+  }), Object.entries(e).forEach(([l, o]) => {
+    p(t, l, o, "page");
+  }), Object.entries(n).forEach(([l, o]) => {
+    p(t, l, o, "notFound");
+  }), t;
 }
-function h(e, a, r = !1) {
-  const n = R(
+function m(e, r, n = !1) {
+  const t = R(
     async () => ({ default: (await e.page()).default }),
-    `page:${e.fullPath || a}`,
-    a
+    `page:${e.fullPath || r}`,
+    r
   );
-  return r ? { index: !0, element: n } : { path: f(e.segment), element: n };
+  return n ? { index: !0, element: t } : { path: f(e.segment), element: t };
 }
-function $(e) {
+function g(e) {
   return {
     path: "*",
     element: R(
@@ -89,62 +87,70 @@ function $(e) {
     )
   };
 }
-function s(e, a) {
-  const r = [];
-  return e.children.forEach((n, t) => {
-    const l = f(t), o = l ? a ? `${a}/${l}` : `/${l}` : a;
-    r.push(...b(n, !1, o));
-  }), r;
-}
-function b(e, a = !1, r = "") {
+function s(e, r) {
   const n = [];
-  if (a && e.layout) {
-    const t = [];
-    return e.page && t.push(h(e, "/", !0)), t.push(...s(e, "")), e.notFound && t.push($(e)), n.push({
+  return [...e.children.entries()].sort(([t], [l]) => t.localeCompare(l)).forEach(([t, l]) => {
+    const o = f(t), a = o ? r ? `${r}/${o}` : `/${o}` : r;
+    n.push(...w(l, !1, a));
+  }), n;
+}
+function w(e, r = !1, n = "") {
+  const t = [];
+  if (r && e.layout) {
+    const a = [];
+    return e.page && a.push(m(e, "/", !0)), a.push(...s(e, "")), e.notFound && a.push(g(e)), t.push({
       path: "/",
       element: i.createElement(e.layout),
-      children: t
-    }), n;
+      children: a
+    }), t;
   }
   if (e.layout) {
-    const t = f(e.segment);
-    if (!t)
-      return s(e, r);
-    const l = r + "/" + t, o = [];
-    return e.page && o.push(h(e, l, !0)), o.push(...s(e, l)), e.notFound && o.push($(e)), n.push({
-      path: t,
+    const a = f(e.segment);
+    if (!a)
+      return s(e, n);
+    const c = n + "/" + a, u = [];
+    return e.page && u.push(m(e, c, !0)), u.push(...s(e, c)), e.notFound && u.push(g(e)), t.push({
+      path: a,
       element: i.createElement(e.layout),
-      children: o.length > 0 ? o : void 0
-    }), n;
+      children: u.length > 0 ? u : void 0
+    }), t;
   }
   if (e.page) {
-    const t = f(e.segment);
-    if (!t)
-      return s(e, r);
-    const l = r + "/" + t, o = s(e, l), u = h(e, l, !1);
-    return n.push({
-      path: u.path,
-      element: u.element,
-      children: o.length > 0 ? o : void 0
-    }), n;
+    const a = f(e.segment);
+    if (!a)
+      return r ? (t.push({
+        path: "/",
+        element: m(e, "/", !0).element,
+        children: s(e, n).length > 0 ? s(e, n) : void 0
+      }), e.notFound && t.push(g(e)), t) : s(e, n);
+    const c = n + "/" + a, u = s(e, c), h = m(e, c, !1);
+    return t.push({
+      path: h.path,
+      element: h.element,
+      children: u.length > 0 ? u : void 0
+    }), t;
   }
-  return s(e, r);
+  const l = f(e.segment), o = s(e, n);
+  return l ? [{
+    path: l,
+    children: o.length > 0 ? o : void 0
+  }] : o;
 }
-function j(e, a, r) {
+function O(e, r, n) {
   return () => {
-    const n = L(e, a, r);
-    return b(n, !0);
+    const t = S(e, r, n);
+    return w(t, !0);
   };
 }
 export {
-  L as buildRouteTree,
-  T as clearMiddlewares,
-  k as configureRouter,
+  S as buildRouteTree,
+  j as clearMiddlewares,
+  x as configureRouter,
   R as createLazyElement,
-  j as createRouteGenerator,
-  F as extractRoutePath,
-  D as nextViteRouter,
+  O as createRouteGenerator,
+  C as extractRoutePath,
+  G as nextViteRouter,
   f as normalizeSegment,
-  S as registerMiddleware,
-  b as treeToRoutes
+  T as registerMiddleware,
+  w as treeToRoutes
 };

package/dist/index.plugin--ecyiAem.js

@@ -0,0 +1,132 @@
+import p from "node:fs";
+import i from "node:path";
+function y(e) {
+  return /^\([^)]+\)$/.test(e) ? "" : /^\[\[\.\.\.(.+)\]\]$/.test(e) || /^\[\.\.\.(.+)\]$/.test(e) ? "*" : /^\[([^\]]+)\]$/.test(e) ? e.replace(/^\[([^\]]+)\]$/, ":$1") : e;
+}
+function b(e) {
+  return e.replace(/\\/g, "/").replace("../../app/", "").replace(/\/?(page|layout|not-found)\.tsx$/, "");
+}
+function R(e) {
+  const t = e.split(i.sep).filter(Boolean).map(y).filter(Boolean);
+  return t.length > 0 ? `/${t.join("/")}` : "/";
+}
+function h(e, t) {
+  const s = /* @__PURE__ */ new Set();
+  function n(a) {
+    for (const u of p.readdirSync(a, { withFileTypes: !0 })) {
+      const r = i.join(a, u.name);
+      u.isDirectory() ? n(r) : u.isFile() && u.name === t && s.add(R(i.relative(e, a)));
+    }
+  }
+  return p.existsSync(e) && n(e), [...s].sort();
+}
+function x(e) {
+  const t = e.match(/^\/(?:\[\.\.\.|:)([^/\]]+)\]?$/);
+  return t == null ? void 0 : t[1];
+}
+function $(e) {
+  const t = e.map((n) => `  | "${n}"`).join(`
+`), s = e.map((n) => {
+    const a = n.split("/").map((r) => x(`/${r}`)).filter((r) => !!r), u = a.length > 0 ? a.map((r) => `    ${r}: string;`).join(`
+`) : "    [key: string]: never;";
+    return `  "${n}": {
+${u}
+  };`;
+  }).join(`
+`);
+  return `declare module 'virtual:next-vite-router' {
+  import type { ReactElement } from 'react';
+  import type { RouteObject } from 'react-router-dom';
+
+  export type RoutePath =
+${t || '  | "/"'};
+
+  export type RouteParams<P extends RoutePath> = P extends keyof RoutePathParams
+    ? RoutePathParams[P]
+    : never;
+
+  export interface RoutePathParams {
+${s}
+  }
+
+  export const generateRoutes: () => RouteObject[];
+  export function Router(): ReactElement | null;
+  export { Link, useRoutes } from 'react-router-dom';
+}
+`;
+}
+function g(e = {}) {
+  const {
+    pagesDir: t = "src/app",
+    pageFile: s = "page.tsx",
+    layoutFile: n = "layout.tsx",
+    notFoundFile: a = "not-found.tsx"
+  } = e, u = "virtual:next-vite-router", r = "\0" + u;
+  let l = "", m = "";
+  function f() {
+    const o = $(h(l, s));
+    p.writeFileSync(m, o, "utf-8");
+  }
+  return {
+    name: "next-vite-router",
+    configResolved(o) {
+      l = i.resolve(o.root, t), m = i.join(i.dirname(l), "virtual-next-vite-router.d.ts"), f();
+    },
+    resolveId(o) {
+      if (o === u)
+        return r;
+    },
+    load(o) {
+      if (o === r)
+        return `
+import { buildRouteTree, treeToRoutes, normalizeSegment, createLazyElement } from 'next-vite-router';
+import { Link, useRoutes } from 'react-router-dom';
+
+const pagesGlob = import.meta.glob('/${t}/**/${s}');
+const layoutsGlob = import.meta.glob('/${t}/**/${n}', { eager: true });
+const notFoundsGlob = import.meta.glob('/${t}/**/${a}');
+
+const transformPath = (path) => path.replace('/${t}/', '');
+
+const pages = Object.fromEntries(
+  Object.entries(pagesGlob).map(([key, value]) => [transformPath(key), value])
+);
+const layouts = Object.fromEntries(
+  Object.entries(layoutsGlob).map(([key, value]) => [transformPath(key), value])
+);
+const notFounds = Object.fromEntries(
+  Object.entries(notFoundsGlob).map(([key, value]) => [transformPath(key), value])
+);
+
+export function generateRoutes() {
+  const tree = buildRouteTree(pages, layouts, notFounds);
+  const routes = treeToRoutes(tree, true);
+  return routes;
+}
+
+export function Router() {
+  return useRoutes(generateRoutes());
+}
+
+export { Link, useRoutes };
+`;
+    },
+    handleHotUpdate({ file: o, server: c }) {
+      if (o.includes(t) && (o.endsWith(s) || o.endsWith(n) || o.endsWith(a))) {
+        f();
+        const d = c.moduleGraph.getModuleById(
+          r
+        );
+        d && (c.moduleGraph.invalidateModule(d), c.ws.send({
+          type: "full-reload",
+          path: "*"
+        }));
+      }
+    }
+  };
+}
+export {
+  g as a,
+  b as e,
+  y as n
+};

package/dist/plugin.js

@@ -1,59 +1,6 @@
-function d(i = {}) {
-  const {
-    pagesDir: t = "src/app",
-    pageFile: n = "page.tsx",
-    layoutFile: a = "layout.tsx",
-    notFoundFile: u = "not-found.tsx"
-  } = i, s = "virtual:next-vite-router", o = "\0" + s;
-  return {
-    name: "next-vite-router",
-    resolveId(e) {
-      if (e === s)
-        return o;
-    },
-    load(e) {
-      if (e === o)
-        return `
-import { buildRouteTree, treeToRoutes, normalizeSegment, createLazyElement } from 'next-vite-router';
-
-const pagesGlob = import.meta.glob('/${t}/**/${n}');
-const layoutsGlob = import.meta.glob('/${t}/**/${a}', { eager: true });
-const notFoundsGlob = import.meta.glob('/${t}/**/${u}');
-
-const transformPath = (path) => path.replace('/${t}/', '');
-
-const pages = Object.fromEntries(
-  Object.entries(pagesGlob).map(([key, value]) => [transformPath(key), value])
-);
-const layouts = Object.fromEntries(
-  Object.entries(layoutsGlob).map(([key, value]) => [transformPath(key), value])
-);
-const notFounds = Object.fromEntries(
-  Object.entries(notFoundsGlob).map(([key, value]) => [transformPath(key), value])
-);
-
-export function generateRoutes() {
-  const tree = buildRouteTree(pages, layouts, notFounds);
-  const routes = treeToRoutes(tree, true);
-  return routes;
-}
-
-export { useRoutes } from 'react-router-dom';
-`;
-    },
-    handleHotUpdate({ file: e, server: r }) {
-      if (e.includes(t) && (e.endsWith(n) || e.endsWith(a) || e.endsWith(u))) {
-        const l = r.moduleGraph.getModuleById(
-          o
-        );
-        l && (r.moduleGraph.invalidateModule(l), r.ws.send({
-          type: "full-reload",
-          path: "*"
-        }));
-      }
-    }
-  };
-}
+import "node:fs";
+import "node:path";
+import { a as i } from "./index.plugin--ecyiAem.js";
 export {
-  d as nextViteRouter
+  i as nextViteRouter
 };

package/package.json

@@ -1,70 +1,72 @@
-{
-  "name": "next-vite-router",
-  "version": "1.0.7",
-  "description": "Next.js-like file-based routing for React + Vite",
-  "type": "module",
-  "main": "./dist/index.js",
-  "types": "./dist/index.d.ts",
-  "bin": {
-    "create-next-vite-router": "./dist/cli.cjs"
-  },
-  "exports": {
-    ".": {
-      "import": "./dist/index.js",
-      "types": "./dist/index.d.ts"
-    },
-    "./plugin": {
-      "import": "./dist/plugin.js",
-      "types": "./dist/plugin.d.ts"
-    }
-  },
-  "files": [
-    "dist",
-    "README.md",
-    "LICENSE"
-  ],
-  "scripts": {
-    "dev": "vite build --watch",
-    "build": "vite build && vite build -c vite.config.cli.ts",
-    "test:local": "node test/test-package.js",
-    "preview": "pnpm pack --dry-run",
-    "prepublishOnly": "pnpm run build && pnpm run test:local",
-    "cli": "cd test && node ../dist/cli.cjs"
-  },
-  "keywords": [
-    "react",
-    "vite",
-    "router",
-    "nextjs",
-    "file-based-routing",
-    "filesystem-router",
-    "react-router"
-  ],
-  "author": "Rlzee",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/Rlzee/next-vite-router"
-  },
-  "homepage": "https://github.com/Rlzee/next-vite-router#readme",
-  "license": "MIT",
-  "peerDependencies": {
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
-    "react-router-dom": "^6.0.0",
-    "vite": "^5.0.0"
-  },
-  "devDependencies": {
-    "@types/node": "^24.10.1",
-    "@types/prompts": "^2.4.9",
-    "@types/react": "^18.0.0",
-    "@types/react-dom": "^18.0.0",
-    "typescript": "^5.0.0",
-    "vite": "^5.0.0",
-    "vite-plugin-dts": "^3.0.0"
-  },
-  "dependencies": {
-    "commander": "^14.0.2",
-    "kleur": "^4.1.5",
-    "prompts": "^2.4.2"
-  }
-}
+{
+  "name": "next-vite-router",
+  "version": "1.1.0",
+  "description": "Next.js-like file-based routing for React + Vite",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "bin": {
+    "create-next-vite-router": "./dist/cli.cjs"
+  },
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./plugin": {
+      "import": "./dist/plugin.js",
+      "types": "./dist/plugin.d.ts"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "keywords": [
+    "react",
+    "vite",
+    "router",
+    "nextjs",
+    "file-based-routing",
+    "filesystem-router",
+    "react-router"
+  ],
+  "author": "Rlzee",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Rlzee/next-vite-router"
+  },
+  "homepage": "https://github.com/Rlzee/next-vite-router#readme",
+  "license": "MIT",
+  "peerDependencies": {
+    "react": ">=18 <20",
+    "react-dom": ">=18 <20",
+    "react-router-dom": ">=6 <8",
+    "vite": ">=5 <9"
+  },
+  "devDependencies": {
+    "@types/node": "^24.10.1",
+    "@types/prompts": "^2.4.9",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "typescript": "^5.0.0",
+    "vite": "^5.0.0",
+    "vite-plugin-dts": "^3.0.0"
+  },
+  "dependencies": {
+    "commander": "^14.0.2",
+    "kleur": "^4.1.5",
+    "prompts": "^2.4.2"
+  },
+  "scripts": {
+    "dev": "vite build --watch",
+    "build": "vite build && vite build -c vite.config.cli.ts",
+    "test:local": "node test/test-package.js",
+    "test:routes": "node test/test-route-types.js",
+    "test:generator": "node --test test/routes.test.js",
+    "test:compatibility": "node test/test-compatibility.js",
+    "preview": "pnpm pack --dry-run",
+    "cli": "cd test && node ../dist/cli.cjs"
+  }
+}