next-vite-router 1.1.0 → 1.2.0

package/README.md

@@ -6,6 +6,25 @@ 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.
 
+## Release notes
+
+### Plugin import
+
+The Vite plugin is no longer exported from the main
+`next-vite-router` entry point. Existing imports must be migrated:
+
+```ts
+// Previous import
+import { nextViteRouter } from "next-vite-router";
+
+// Current import
+import { nextViteRouter } from "next-vite-router/plugin";
+```
+
+The plugin remains available through `next-vite-router/plugin`. This separation
+prevents the plugin's Node dependencies from being included in the application's
+browser dependency graph.
+
 ## Start here
 
 ```bash
@@ -83,16 +102,19 @@ npm run dev
 
 ## Use React Router directly
 
-`Router` is only a convenience wrapper around
-`useRoutes(generateRoutes())`. You can keep using React Router APIs:
+`Router` is only a convenience wrapper around `useRoutes(routes)`. Routes are
+generated lazily on the first render, so calls to `configureRouter` and
+`registerMiddleware` made during application setup are applied before route
+elements are created. You can keep using React Router APIs:
 
 ```tsx
 import {
   Link,
   generateRoutes,
   useRoutes,
+  useParams,
 } from "virtual:next-vite-router";
-import { useNavigate, useParams } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 
 const routes = generateRoutes();
 
@@ -107,9 +129,10 @@ export default function App() {
 }
 ```
 
-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.
+Use `useNavigate`, loaders, actions, and other React Router APIs from
+`react-router-dom`. The package `useParams` hook is also available from the
+virtual module and maps catch-all names such as `slug`. The package does not
+create competing navigation or data-loading APIs.
 
 ## File conventions
 
@@ -119,10 +142,19 @@ navigation or data-loading APIs.
 | `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 |
+| `[...slug]` | Catch-all `*` segment; package `useParams` exposes it as `slug` |
+| `[[...slug]]` | Optional catch-all `*` segment; package `useParams` exposes it as `slug` |
 | `(admin)` | Route group omitted from the URL |
 
+Catch-all pages and `not-found.tsx` at the same level both use React Router's
+`*` path and should not be declared together if their fallback behavior must
+be distinct. The catch-all parameter provider wraps the page route, so a
+layout cannot read that parameter through the package `useParams` hook.
+
+The Vite plugin accepts custom `pageFile`, `layoutFile`, and `notFoundFile`
+names. `createRouteGenerator` accepts the same options, plus `pagesDir`, as
+its optional fourth argument when custom glob paths or extensions are used.
+
 Layouts are the recommended way to add route-scoped navigation, providers, or
 authorization:
 
@@ -146,6 +178,10 @@ export default function DashboardLayout() {
 }
 ```
 
+The Vite plugin is a Node/Vite integration and should be imported from
+`next-vite-router/plugin`; the main `next-vite-router` entry remains safe for
+browser application code.
+
 ## Type-safe paths
 
 The Vite plugin generates `virtual-next-vite-router.d.ts` automatically:
@@ -167,7 +203,8 @@ No manual declaration for the virtual module is required.
 
 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:
+the generated route tree; changing a layout can therefore cause a full
+development reload. Lazy loading is enabled by default:
 
 ```tsx
 import { configureRouter } from "next-vite-router";

package/dist/cli.cjs

@@ -47,7 +47,7 @@ function detectPackageManager() {
     case "pnpm":
       return {
         name: "pnpm",
-        createProjectCommand: (projectName, template) => `pnpm create vite@latest ${projectName} --template ${template} --no-rolldown`,
+        createProjectCommand: (projectName, template) => `pnpm create vite@latest ${projectName} --template ${template} --no-interactive`,
         addDepsCommand: (deps) => `pnpm add ${deps.join(" ")}`,
         addDevDepsCommand: (deps) => `pnpm add -D ${deps.join(" ")}`,
         installCommand: "pnpm install"
@@ -55,7 +55,7 @@ function detectPackageManager() {
     case "bun":
       return {
         name: "bun",
-        createProjectCommand: (projectName, template) => `bun create vite ${projectName} --template=${template} --no-rolldown`,
+        createProjectCommand: (projectName, template) => `bun create vite ${projectName} --template=${template} --no-interactive`,
         addDepsCommand: (deps) => `bun add ${deps.join(" ")}`,
         addDevDepsCommand: (deps) => `bun add -d ${deps.join(" ")}`,
         installCommand: "bun install"
@@ -63,7 +63,7 @@ function detectPackageManager() {
     case "yarn":
       return {
         name: "yarn",
-        createProjectCommand: (projectName, template) => `yarn create vite ${projectName} --template=${template} --no-rolldown`,
+        createProjectCommand: (projectName, template) => `yarn create vite ${projectName} --template=${template} --no-interactive`,
         addDepsCommand: (deps) => `yarn add ${deps.join(" ")}`,
         addDevDepsCommand: (deps) => `yarn add -D ${deps.join(" ")}`,
         installCommand: "yarn install"
@@ -72,7 +72,7 @@ function detectPackageManager() {
     default:
       return {
         name: "npm",
-        createProjectCommand: (projectName, template) => `npm create vite@latest ${projectName} -- --template ${template} --no-rolldown`,
+        createProjectCommand: (projectName, template) => `npm create vite@latest ${projectName} -- --template ${template} --no-interactive`,
         addDepsCommand: (deps) => `npm install ${deps.join(" ")}`,
         addDevDepsCommand: (deps) => `npm install -D ${deps.join(" ")}`,
         installCommand: "npm install"
@@ -126,10 +126,17 @@ const logger = {
   }
 };
 function getViteConfigPath(projectDir) {
-  const tsPath = path.join(projectDir, "vite.config.ts");
-  const jsPath = path.join(projectDir, "vite.config.js");
-  if (fs.existsSync(tsPath)) return tsPath;
-  if (fs.existsSync(jsPath)) return jsPath;
+  for (const fileName of [
+    "vite.config.ts",
+    "vite.config.mts",
+    "vite.config.cts",
+    "vite.config.js",
+    "vite.config.mjs",
+    "vite.config.cjs"
+  ]) {
+    const configPath = path.join(projectDir, fileName);
+    if (fs.existsSync(configPath)) return configPath;
+  }
   return null;
 }
 function readViteConfig(projectDir) {
@@ -211,10 +218,19 @@ function createVirtualDTS(projectDir, useSrc) {
 
   export const generateRoutes: () => RouteObject[];
   export function Router(): ReactElement | null;
+  export function useParams<T extends Record<string, string | undefined> = Record<string, string | undefined>>(): T;
   export { Link, useRoutes } from 'react-router-dom';
 }
 `;
   fs.writeFileSync(filePath, content, "utf-8");
+  const gitignorePath = path.join(projectDir, ".gitignore");
+  const entry = useSrc ? "src/virtual-next-vite-router.d.ts" : "virtual-next-vite-router.d.ts";
+  const currentGitignore = fs.existsSync(gitignorePath) ? fs.readFileSync(gitignorePath, "utf-8") : "";
+  if (!currentGitignore.split(/\r?\n/).includes(entry)) {
+    const prefix = currentGitignore && !currentGitignore.endsWith("\n") ? "\n" : "";
+    fs.writeFileSync(gitignorePath, `${currentGitignore}${prefix}${entry}
+`, "utf-8");
+  }
 }
 function createMainTSX(projectDir, useSrc) {
   const targetDir = useSrc ? path.join(projectDir, "src") : projectDir;
@@ -225,19 +241,12 @@ function createMainTSX(projectDir, useSrc) {
   const content = `import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 import { BrowserRouter } from "react-router-dom";
-import { generateRoutes, useRoutes } from 'virtual:next-vite-router';
-
-const routes = generateRoutes();
-
-export default function App() {
-  const element = useRoutes(routes);
-  return element;
-}
+import { Router } from 'virtual:next-vite-router';
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
     <BrowserRouter>
-      <App />
+      <Router />
     </BrowserRouter>
   </StrictMode>,
 );
@@ -463,12 +472,11 @@ const init = new commander.Command().name("init").description(
       name: "template",
       message: "Select a template:",
       choices: [
-        { title: "React + TypeScript", value: "react-ts" },
+        { title: "React + TypeScript (Recommended)", value: "react-ts" },
         {
           title: "React + TypeScript (React Compiler)",
           value: "react-compiler-ts"
-        },
-        { title: "React + SWC (Recommended)", value: "react-swc-ts" }
+        }
       ],
       initial: 0
     },
@@ -512,13 +520,10 @@ const init = new commander.Command().name("init").description(
   const useTailwind = tailwindResponse.useTailwind;
   const createCommand = pm.createProjectCommand(projectName, variant);
   logger.info(`Creating project "${projectName}" using ${pm.name}...`);
-  try {
-    child_process.execSync(createCommand, {
-      stdio: ["pipe", "inherit", "inherit"],
-      input: "n\n"
-    });
-  } catch (error) {
-  }
+  child_process.execSync(createCommand, {
+    stdio: ["pipe", "inherit", "inherit"],
+    input: "n\n"
+  });
   logger.info("Installing dependencies...");
   child_process.execSync(pm.installCommand, { stdio: "inherit", cwd: projectName });
   logger.info(
@@ -539,7 +544,7 @@ const init = new commander.Command().name("init").description(
 Project "${projectName}" is ready!
 `);
 });
-const version = "1.1.0";
+const version = "1.2.0";
 const pkg = {
   version
 };

package/dist/index.d.ts

@@ -1,9 +1,14 @@
+import { ComponentType } from 'react';
 import { default as default_2 } from 'react';
-import { Plugin as Plugin_2 } from 'vite';
 import { ReactElement } from 'react';
 import { RouteObject } from 'react-router-dom';
 
-export declare function buildRouteTree(pages: Record<string, () => Promise<any>>, layouts: Record<string, any>, notFounds: Record<string, () => Promise<any>>): RouteNode;
+export declare function buildRouteTree(pages: Record<string, () => Promise<any>>, layouts: Record<string, any>, notFounds: Record<string, () => Promise<any>>, fileOptions?: RouteFileOptions): RouteNode;
+
+export declare function CatchAllParamProvider({ name, children, }: {
+    name: string;
+    children: default_2.ReactElement;
+}): default_2.ReactElement;
 
 export declare function clearMiddlewares(): void;
 
@@ -34,23 +39,14 @@ export declare function createLazyElement(loader: () => Promise<any>, cacheKey:
  * // Then use it
  * const routes = generateCustomRoutes();
  */
-export declare function createRouteGenerator(pages: Record<string, () => Promise<any>>, layouts: Record<string, any>, notFounds: Record<string, () => Promise<any>>): () => RouteObject[];
+export declare function createRouteGenerator(pages: Record<string, () => Promise<any>>, layouts: Record<string, any>, notFounds: Record<string, () => Promise<any>>, fileOptions?: RouteFileOptions): () => RouteObject[];
 
 /**
  * Extract the route path from a file path
  * @example "../../app/blog/[id]/page.tsx" -> "blog/[id]"
  * @example "../../app/page.tsx" -> ""
  */
-export declare function extractRoutePath(filePath: string): string;
-
-export declare function nextViteRouter(options?: NextViteRouterPluginOptions): Plugin_2;
-
-export declare type NextViteRouterPluginOptions = {
-    pagesDir?: string;
-    pageFile?: string;
-    layoutFile?: string;
-    notFoundFile?: string;
-};
+export declare function extractRoutePath(filePath: string, { pagesDir, pageFile, layoutFile, notFoundFile }?: RouteFileOptions): string;
 
 /**
  * Normalize a Next.js segment to a React Router segment
@@ -62,14 +58,25 @@ export declare function normalizeSegment(segment: string): string;
 
 export declare function registerMiddleware(pattern: RegExp, middleware: RouteMiddleware): void;
 
+export declare type RouteFileOptions = {
+    pagesDir?: string;
+    pageFile?: string;
+    layoutFile?: string;
+    notFoundFile?: string;
+};
+
 export declare type RouteMiddleware = (element: ReactElement) => ReactElement;
 
+export declare type RouteModuleLoader = () => Promise<{
+    default: ComponentType;
+}>;
+
 export declare type RouteNode = {
     segment: string;
     fullPath: string;
-    page?: any;
-    layout?: any;
-    notFound?: any;
+    page?: RouteModuleLoader;
+    layout?: ComponentType;
+    notFound?: RouteModuleLoader;
     children: Map<string, RouteNode>;
 };
 
@@ -81,4 +88,6 @@ export declare type RouterConfig = {
 
 export declare function treeToRoutes(node: RouteNode, isRoot?: boolean, currentPath?: string): RouteObject[];
 
+export declare function useParams<T extends Record<string, string | undefined> = Record<string, string | undefined>>(): T;
+
 export { }

package/dist/index.js

@@ -1,156 +1,196 @@
-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 = {
+import { e as z, n as p } from "./path-BodMUTCM.js";
+import i, { Suspense as E, lazy as L, createContext as M, useContext as x } from "react";
+import { useParams as k } from "react-router-dom";
+const A = {
   enableLazyLoading: !0
 };
-let d = { ...L };
-function x(e) {
-  d = { ...d, ...e };
+let m = { ...A };
+function B(e) {
+  m = { ...m, ...e };
 }
-function $() {
-  return d;
+function S() {
+  return m;
 }
-let E = [];
-function T(e, r) {
-  E.push({ pattern: e, middleware: r });
+let g = [];
+function H(e, t) {
+  g.push({ pattern: e, middleware: t });
 }
-function j() {
-  E = [];
+function I() {
+  g = [];
 }
-function z(e, r) {
-  let n = r;
-  for (const t of E)
-    t.pattern.test(e) && (n = t.middleware(n));
+function d(e, t) {
+  let n = t;
+  for (const r of g)
+    r.pattern.test(e) && (n = r.middleware(n));
   return n;
 }
-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,
+const T = () => i.createElement("div"), C = /* @__PURE__ */ new Map();
+function w(e, t, n) {
+  const r = S();
+  if (r.enableLazyLoading === !1) {
+    const u = i.lazy(e), s = i.createElement(
+      E,
       { fallback: null },
       // No loading fallback when disabled
-      i.createElement(c)
+      i.createElement(u)
     );
-    return n ? z(n, u) : u;
+    return n ? d(n, s) : s;
   }
-  let l = b.get(r);
-  l || (l = F(e), b.set(r, l));
-  const o = t.loadingFallback || M, a = i.createElement(
-    y,
+  let a = C.get(t);
+  a || (a = L(e), C.set(t, a));
+  const o = r.loadingFallback || T, l = i.createElement(
+    E,
     { fallback: i.createElement(o) },
-    i.createElement(l)
+    i.createElement(a)
   );
-  return n ? z(n, a) : a;
-}
-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,
+  return n ? d(n, l) : l;
+}
+function h(e, t, n, r, a) {
+  const o = z(t, a), l = o ? o.split("/") : [];
+  let u = e, s = "";
+  l.forEach((c, v) => {
+    s = s ? `${s}/${c}` : c, u.children.has(c) || u.children.set(c, {
+      segment: c,
+      fullPath: s,
       children: /* @__PURE__ */ new Map()
-    }), a = a.children.get(u), h === o.length - 1 && (a[t] = n);
-  }), o.length === 0 && (e[t] = n);
+    }), u = u.children.get(c), v === l.length - 1 && (u[r] = n);
+  }), l.length === 0 && (e[r] = n);
 }
-function S(e, r, n) {
-  const t = {
+function j(e, t, n, r) {
+  const a = {
     segment: "",
     fullPath: "",
     children: /* @__PURE__ */ new Map()
   };
-  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 m(e, r, n = !1) {
-  const t = R(
-    async () => ({ default: (await e.page()).default }),
-    `page:${e.fullPath || r}`,
-    r
+  return Object.entries(t).forEach(([o, l]) => {
+    h(a, o, l.default, "layout", r);
+  }), Object.entries(e).forEach(([o, l]) => {
+    h(a, o, l, "page", r);
+  }), Object.entries(n).forEach(([o, l]) => {
+    h(a, o, l, "notFound", r);
+  }), a;
+}
+const F = M(void 0);
+function N({
+  name: e,
+  children: t
+}) {
+  return i.createElement(
+    F.Provider,
+    { value: e },
+    t
   );
-  return n ? { index: !0, element: t } : { path: f(e.segment), element: t };
 }
-function g(e) {
+function D() {
+  return x(F);
+}
+function P(e, t) {
+  return d(e, i.createElement(t));
+}
+function f(e, t, n = !1) {
+  const r = e.page;
+  if (!r)
+    throw new Error(`Route node "${e.fullPath}" has no page loader`);
+  const a = w(
+    async () => ({ default: (await r()).default }),
+    `page:${e.fullPath || t}`,
+    t
+  ), o = e.segment.match(/^\[\[?\.\.\.(.+?)\]\]?$/), l = o ? i.createElement(N, {
+    name: o[1],
+    children: a
+  }) : a;
+  return n ? { index: !0, element: l } : { path: p(e.segment), element: l };
+}
+function R(e) {
+  const t = e.notFound;
+  if (!t)
+    throw new Error(`Route node "${e.fullPath}" has no not-found loader`);
+  const n = e.fullPath ? `/${e.fullPath}` : "/";
   return {
     path: "*",
-    element: R(
-      async () => ({ default: (await e.notFound()).default }),
-      `notfound:${e.fullPath}`
+    element: w(
+      async () => ({ default: (await t()).default }),
+      `notfound:${e.fullPath}`,
+      n
     )
   };
 }
-function s(e, r) {
+function $(e, t) {
   const n = [];
-  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));
+  return [...e.children.entries()].sort(([r], [a]) => r.localeCompare(a)).forEach(([r, a]) => {
+    const o = p(r), l = o ? t ? `${t}/${o}` : `/${o}` : t;
+    n.push(...b(a, !1, l));
   }), 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({
+function y(e, t) {
+  const n = [];
+  return e.page && n.push(f(e, t || "/", !0)), n.push(...$(e, t)), e.notFound && n.push(R(e)), n;
+}
+function b(e, t = !1, n = "") {
+  const r = [];
+  if (t) {
+    const c = y(e, "");
+    return e.layout ? (r.push({
+      path: "/",
+      element: P("/", e.layout),
+      children: c
+    }), r) : e.page ? (r.push({
+      path: "/",
+      element: f(e, "/", !1).element,
+      children: c.slice(1).length > 0 ? c.slice(1) : void 0
+    }), r) : e.notFound ? (r.push({
       path: "/",
-      element: i.createElement(e.layout),
-      children: a
-    }), t;
+      children: c
+    }), r) : c;
   }
+  const a = p(e.segment), o = !a, l = o ? n : n + "/" + a, u = $(e, l), s = e.notFound ? [R(e)] : [];
   if (e.layout) {
-    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: u.length > 0 ? u : void 0
-    }), t;
+    const c = y(e, l);
+    return [{
+      ...o ? {} : { path: a },
+      element: P(l, e.layout),
+      children: c.length > 0 ? c : void 0
+    }];
   }
-  if (e.page) {
-    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;
+  if (e.page && !o)
+    return [{
+      path: a,
+      element: f(e, l).element,
+      children: [...u, ...s].length > 0 ? [...u, ...s] : void 0
+    }];
+  if (e.page || e.notFound || !o) {
+    const c = [
+      ...e.page ? [f(e, l, !0)] : [],
+      ...u,
+      ...s
+    ];
+    return [{
+      ...o ? {} : { path: a },
+      children: c.length > 0 ? c : void 0
+    }];
   }
-  const l = f(e.segment), o = s(e, n);
-  return l ? [{
-    path: l,
-    children: o.length > 0 ? o : void 0
-  }] : o;
+  return u;
 }
-function O(e, r, n) {
+function J(e, t, n, r) {
   return () => {
-    const t = S(e, r, n);
-    return w(t, !0);
+    const a = j(e, t, n, r);
+    return b(a, !0);
   };
 }
+function Q() {
+  const e = k(), t = D();
+  return typeof t == "string" && e["*"] !== void 0 ? { ...e, [t]: e["*"] } : e;
+}
 export {
-  S as buildRouteTree,
-  j as clearMiddlewares,
-  x as configureRouter,
-  R as createLazyElement,
-  O as createRouteGenerator,
-  C as extractRoutePath,
-  G as nextViteRouter,
-  f as normalizeSegment,
-  T as registerMiddleware,
-  w as treeToRoutes
+  N as CatchAllParamProvider,
+  j as buildRouteTree,
+  I as clearMiddlewares,
+  B as configureRouter,
+  w as createLazyElement,
+  J as createRouteGenerator,
+  z as extractRoutePath,
+  p as normalizeSegment,
+  H as registerMiddleware,
+  b as treeToRoutes,
+  Q as useParams
 };

package/dist/path-BodMUTCM.js

@@ -0,0 +1,14 @@
+function $(e) {
+  return /^\([^)]+\)$/.test(e) ? "" : /^\[\[\.\.\.(.+)\]\]$/.test(e) || /^\[\.\.\.(.+)\]$/.test(e) ? "*" : /^\[([^\]]+)\]$/.test(e) ? e.replace(/^\[([^\]]+)\]$/, ":$1") : e;
+}
+function u(e, { pagesDir: t, pageFile: a = "page.tsx", layoutFile: n = "layout.tsx", notFoundFile: c = "not-found.tsx" } = {}) {
+  const o = e.replace(/\\/g, "/"), r = t == null ? void 0 : t.replace(/\\/g, "/").replace(/^\/|\/$/g, ""), l = [a, n, c].map((p) => p.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")).join("|");
+  return o.replace(
+    r ? new RegExp(`^.*(?:^|/)${r}/`) : /^.*(?:^|\/)(?:app|pages)\//,
+    ""
+  ).replace(/\\/g, "/").replace(new RegExp(`/?(?:${l})$`), "");
+}
+export {
+  u as e,
+  $ as n
+};

package/dist/plugin.js

@@ -1,6 +1,128 @@
-import "node:fs";
-import "node:path";
-import { a as i } from "./index.plugin--ecyiAem.js";
+import m from "node:fs";
+import i from "node:path";
+import { n as g } from "./path-BodMUTCM.js";
+function h(o) {
+  const e = o.split(i.sep).filter(Boolean).map(g).filter(Boolean);
+  return e.length > 0 ? `/${e.join("/")}` : "/";
+}
+function x(o, e) {
+  const s = /* @__PURE__ */ new Set();
+  function r(n) {
+    for (const u of m.readdirSync(n, { withFileTypes: !0 })) {
+      const a = i.join(n, u.name);
+      u.isDirectory() ? r(a) : u.isFile() && u.name === e && s.add(h(i.relative(o, n)));
+    }
+  }
+  return m.existsSync(o) && r(o), [...s].sort();
+}
+function v(o) {
+  const e = o.match(/^\/(?:\[\.\.\.|:)([^/\]]+)\]?$/);
+  return e == null ? void 0 : e[1];
+}
+function P(o) {
+  const e = o.map((r) => `  | "${r}"`).join(`
+`), s = o.map((r) => {
+    const n = r.split("/").map((a) => v(`/${a}`)).filter((a) => !!a), u = n.length > 0 ? n.map((a) => `    ${a}: string;`).join(`
+`) : "    [key: string]: never;";
+    return `  "${r}": {
+${u}
+  };`;
+  }).join(`
+`);
+  return `declare module 'virtual:next-vite-router' {
+  import type { ReactElement } from 'react';
+  import type { RouteObject } from 'react-router-dom';
+
+  export type RoutePath =
+${e || '  | "/"'};
+
+  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 function useParams<T extends Record<string, string | undefined> = Record<string, string | undefined>>(): T;
+  export { Link, useRoutes } from 'react-router-dom';
+}
+`;
+}
+function k(o = {}) {
+  const {
+    pagesDir: e = "src/app",
+    pageFile: s = "page.tsx",
+    layoutFile: r = "layout.tsx",
+    notFoundFile: n = "not-found.tsx"
+  } = o, u = { pagesDir: e, pageFile: s, layoutFile: r, notFoundFile: n }, a = "virtual:next-vite-router", c = "\0" + a;
+  let l = "", p = "";
+  function d() {
+    const t = P(x(l, s));
+    m.writeFileSync(p, t, "utf-8");
+  }
+  return {
+    name: "next-vite-router",
+    configResolved(t) {
+      l = i.resolve(t.root, e), p = i.join(i.dirname(l), "virtual-next-vite-router.d.ts"), d();
+    },
+    configureServer(t) {
+      const f = (y) => {
+        if (i.relative(l, y).startsWith("..") || ![s, r, n].includes(i.basename(y)))
+          return;
+        d();
+        const R = t.moduleGraph.getModuleById(c);
+        R && (t.moduleGraph.invalidateModule(R), t.ws.send({ type: "full-reload", path: "*" }));
+      };
+      t.watcher.on("add", f), t.watcher.on("unlink", f);
+    },
+    resolveId(t) {
+      if (t === a)
+        return c;
+    },
+    load(t) {
+      if (t === c)
+        return `
+import { buildRouteTree, treeToRoutes, normalizeSegment, createLazyElement, useParams } from 'next-vite-router';
+import { Link, useRoutes } from 'react-router-dom';
+
+const pagesGlob = import.meta.glob('/${e}/**/${s}');
+const layoutsGlob = import.meta.glob('/${e}/**/${r}', { eager: true });
+const notFoundsGlob = import.meta.glob('/${e}/**/${n}');
+
+const transformPath = (path) => path.replace('/${e}/', '');
+
+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, ${JSON.stringify(u)});
+  const routes = treeToRoutes(tree, true);
+  return routes;
+}
+
+export function Router() {
+  routes ??= generateRoutes();
+  return useRoutes(routes);
+}
+
+let routes;
+
+export { Link, useRoutes };
+export { useParams };
+`;
+    }
+  };
+}
 export {
-  i as nextViteRouter
+  k as nextViteRouter
 };

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "next-vite-router",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Next.js-like file-based routing for React + Vite",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
+  "sideEffects": false,
   "bin": {
     "create-next-vite-router": "./dist/cli.cjs"
   },
@@ -65,6 +66,7 @@
     "test:local": "node test/test-package.js",
     "test:routes": "node test/test-route-types.js",
     "test:generator": "node --test test/routes.test.js",
+    "test:params": "node --test test/params.test.js",
     "test:compatibility": "node test/test-compatibility.js",
     "preview": "pnpm pack --dry-run",
     "cli": "cd test && node ../dist/cli.cjs"

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

@@ -1,132 +0,0 @@
-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
-};