next-vite-router 1.0.8 → 1.1.0

package/README.md

@@ -1,287 +1,279 @@
-# 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.
-
-## Installation
-
-Install with your package manager of choice:
-
-```next-vite-router/README.md#L1-4
-pnpm add next-vite-router
-# or
-npm install next-vite-router
-# or
-yarn add next-vite-router
-```
-
-The package has peer dependencies: React, React DOM and React Router DOM. Make sure your project already includes compatible versions (React 18+ is recommended).
-
-## CLI / Getting Started
-
-The quickest way to start a new project with `next-vite-router` is to use the interactive CLI:
-
-```next-vite-router/README.md#L5-10
-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
-```
-
-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`)
-
-### What the CLI does
-
-The CLI automates the entire setup:
-
-- 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`
-
-After the CLI finishes:
-
-```next-vite-router/README.md#L11-12
-cd <your-project-name>
-pnpm dev
-```
-
-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.
-
-Example `vite.config.ts` usage:
-
-```next-vite-router/README.md#L13-18
-import { defineConfig } from 'vite';
-import react from '@vitejs/plugin-react';
-import { nextViteRouter } from 'next-vite-router';
-
-export default defineConfig({
-  plugins: [
-    react(),
-    nextViteRouter({ pagesDir: 'src/pages' })
-  ]
-});
-```
-
-Example usage inside your app. Important: call `generateRoutes()` once at module level (not inside a component) to avoid infinite re-renders.
-
-File: `src/App.tsx`
-
-```next-vite-router/README.md#L19-24
-import { useRoutes } from 'react-router-dom';
-import { generateRoutes } from 'virtual:next-vite-router';
-
-const routes = generateRoutes();
-
-export default function App() {
-  const element = useRoutes(routes);
-  return element;
-}
-```
-
-File: `src/main.tsx`
-
-```next-vite-router/README.md#L25-33
-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>
-);
-```
-
-Key points:
-
-- 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 your `App.tsx` component.
-- The virtual module is `virtual:next-vite-router` (the plugin resolves it internally).
-
-Example file structure:
-
-```next-vite-router/README.md#L34-42
-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
-```
-
-TypeScript note:
-
-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:
-
-```next-vite-router/README.md#L43-47
-declare module 'virtual:next-vite-router' {
-  import type { RouteObject } from 'react-router-dom';
-
-  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.
-
-## Programmatic route generation
-
-If you prefer to generate routes manually (for custom setups), the package exports helpers you can use with `import.meta.glob`.
-
-Example:
-
-```next-vite-router/README.md#L48-54
-import { createRouteGenerator } from 'next-vite-router';
-
-// 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');
-
-const generateRoutes = createRouteGenerator(pages, layouts, notFounds);
-const routes = generateRoutes();
-```
-
-Use this when you need a fully custom glob layout or want to call the generator at runtime.
-
-## Route folder conventions: grouping vs dynamic segments
-
-This library follows Next.js-style conventions for naming folders that affect routing. Two common patterns are:
-
-- Parentheses for grouping routes without affecting the URL (route groups).
-- Square brackets for dynamic route segments (dynamic params in the URL).
-
-Concrete examples:
-
-```next-vite-router/README.md#L55-62
-- Structure:
-  - `src/app/(components)/header/page.tsx`
-  - `src/app/blog/[id]/page.tsx`
-
-- Behavior:
-  - `header/page.tsx` will be included as a page, but the `(components)` folder will NOT appear in the generated URL. The page will be reachable at `/header` (or depending on nesting, at `/<parent>/header`).
-  - `blog/[id]/page.tsx` will produce a route like `/blog/:id` where `:id` is a dynamic parameter.
-```
-
-Notes and additional patterns:
-
-- Route groups (folders named with parentheses, e.g. `(admin)` or `(components)`) are useful to organize files, share layouts, or split code visually without adding path segments. Anything inside a group is treated as if the grouping folder does not exist in the URL.
-- Dynamic segments use square brackets (e.g. `[slug]`, `[id]`). They map to route parameters and are available to your components via React Router's `useParams()` hook.
-- Catch-all segments are commonly written as `[...slug]` and typically map to a wildcard or splat parameter. Optional catch-all segments are written `[[...slug]]` in Next.js — if you use or expect these conventions, confirm the behavior in your app (this library mirrors Next.js-style patterns, but check your generated routes when using more advanced patterns).
-
-Examples of expected mappings:
-
-```next-vite-router/README.md#L63-74
-src/app/
-├── blog/
-│   ├── page.tsx          ← /blog
-│   └── [id]/page.tsx     ← /blog/:id
-└── (components)/
-    └── header/
-        └── page.tsx      ← /header  (the `(components)` folder is not part of the path)
-```
-
-If you ever need to verify the final route objects, call `generateRoutes()` (the virtual module) and inspect the returned `RouteObject[]` to confirm path strings and param names.
-
-## API Reference
-
-Exports from the package (see `src/index.ts`):
-
-- `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`.
-
-### `configureRouter(config: RouterConfig)`
-
-Use `configureRouter` to set global router options for runtime behavior. The function merges the provided `config` with any existing configuration.
-
-Common `RouterConfig` fields:
-
-- `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.
-
-Example:
-
-```next-vite-router/README.md#L75-80
-import { configureRouter } from 'next-vite-router';
-
-configureRouter({
-  loadingFallback: () => <div>Loading...</div>,
-  enableLazyLoading: true,
-});
-```
-
-Call `configureRouter` during app bootstrap before calling `generateRoutes()`.
-
-### `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).
-
-Important details:
-
-- 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.
-
-Example:
-
-```next-vite-router/README.md#L81-86
-import { registerMiddleware } from 'next-vite-router';
-
-registerMiddleware(/^\/dashboard/, (element) => (
-  <AuthGuard>{element}</AuthGuard>
-));
-```
-
-## Configuration options (plugin)
-
-The plugin takes an options object. Defaults are:
-
-```next-vite-router/README.md#L87-92
-{
-  pagesDir: 'src/app',
-  pageFile: 'page.tsx',
-  layoutFile: 'layout.tsx',
-  notFoundFile: 'not-found.tsx',
-}
-```
-
-Pass a custom `pagesDir` if your project uses `src/pages` or another convention.
-
-## License
-
-MIT
+# Next Vite Router
+
+File-based routing for React + Vite.
+
+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.
+
+## Start here
+
+```bash
+npm create vite@latest my-app -- --template react-ts
+cd my-app
+npm install next-vite-router react-router-dom
+```
+
+Add the plugin to `vite.config.ts`:
+
+```ts
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import { nextViteRouter } from "next-vite-router/plugin";
+
+export default defineConfig({
+  plugins: [react(), nextViteRouter()],
+});
+```
+
+Create your route tree:
+
+```text
+src/app/
+├── page.tsx
+├── about/
+│   └── page.tsx
+└── users/
+    ├── page.tsx
+    └── [id]/
+        └── page.tsx
+```
+
+This generates:
+
+```text
+/
+/about
+/users
+/users/:id
+```
+
+Use the generated router inside a normal React Router provider:
+
+```tsx
+// src/App.tsx
+import { Router } from "virtual:next-vite-router";
+
+export default function App() {
+  return <Router />;
+}
+```
+
+```tsx
+// src/main.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>,
+);
+```
+
+That is the complete setup. Run:
+
+```bash
+npm run dev
+```
+
+## Use React Router directly
+
+`Router` is only a convenience wrapper around
+`useRoutes(generateRoutes())`. You can keep using React Router APIs:
+
+```tsx
+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 (
+    <>
+      <Link to="/users">Users</Link>
+      {element}
+    </>
+  );
+}
+```
+
+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 { Outlet } from "react-router-dom";
+
+export default function DashboardLayout() {
+  return (
+    <AuthGuard>
+      <Outlet />
+    </AuthGuard>
+  );
+}
+```
+
+## Type-safe paths
+
+The Vite plugin generates `virtual-next-vite-router.d.ts` automatically:
+
+```tsx
+import type {
+  RouteParams,
+  RoutePath,
+} from "virtual:next-vite-router";
+
+const path = "/users/:id" satisfies RoutePath;
+const params: RouteParams<typeof path> = { id: "123" };
+```
+
+Invalid paths and missing dynamic parameters are reported by TypeScript.
+No manual declaration for the virtual module is required.
+
+## Lazy loading
+
+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:
+
+```tsx
+import { configureRouter } from "next-vite-router";
+
+configureRouter({
+  loadingFallback: () => <div>Loading route...</div>,
+});
+```
+
+`enableLazyLoading: false` is available for compatibility and testing. It does
+not turn Vite's asynchronous imports into synchronous imports.
+
+## Optional middleware
+
+Prefer layouts for route-scoped behavior. `registerMiddleware` is an optional
+escape hatch for cross-cutting wrappers:
+
+```tsx
+import { registerMiddleware } from "next-vite-router";
+
+registerMiddleware(/^\/dashboard/, (element) => (
+  <AuthGuard>{element}</AuthGuard>
+));
+```
+
+Middleware wraps generated route elements; it does not create routes or
+replace React Router.
+
+## CLI
+
+For an interactive setup:
+
+```bash
+npx create-next-vite-router init
+```
+
+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.
+
+## Compatibility
+
+| Package | Supported versions |
+| --- | --- |
+| React / React DOM | `>=18 <20` |
+| React Router DOM | `>=6 <8` |
+| Vite | `>=5 <9` |
+
+The compatibility workflow tests React 18 and 19 with React Router 6 and 7
+across Vite 5, 6, 7, and 8.
+
+## Advanced API
+
+For custom glob layouts, the package exports:
+
+```ts
+import {
+  buildRouteTree,
+  createRouteGenerator,
+  treeToRoutes,
+} from "next-vite-router";
+```
+
+The normal pipeline is:
+
+```text
+filesystem -> buildRouteTree() -> treeToRoutes() -> RouteObject[] -> React Router
+```
+
+## Examples
+
+The repository includes a runnable showcase in [`examples/`](./examples/):
+
+- `basic`
+- `layouts`
+- `dynamic-routes`
+- `middleware`
+- `typed-routes`
+
+Run it from the examples directory:
+
+```bash
+cd examples
+pnpm install
+pnpm dev
+```
+
+The app opens a small navigation menu so each example can be tested
+immediately. The `predev` script builds the local package automatically.
+
+## Development
+
+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
+```
+
+The route matrix lives in [`test/routes.test.js`](./test/routes.test.js).
+
+## License
+
+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");
@@ -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.8";
+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,6 +1,6 @@
 {
   "name": "next-vite-router",
-  "version": "1.0.8",
+  "version": "1.1.0",
   "description": "Next.js-like file-based routing for React + Vite",
   "type": "module",
   "main": "./dist/index.js",
@@ -40,10 +40,10 @@
   "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"
+    "react": ">=18 <20",
+    "react-dom": ">=18 <20",
+    "react-router-dom": ">=6 <8",
+    "vite": ">=5 <9"
   },
   "devDependencies": {
     "@types/node": "^24.10.1",
@@ -63,6 +63,9 @@
     "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"
   }