next-vite-router 1.1.1 → 1.2.1

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";
@@ -201,12 +238,13 @@ replace React Router.
 For an interactive setup:
 
 ```bash
-npx create-next-vite-router init
+npx 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.
+tree. The CLI is published as part of `next-vite-router`; `create-next-vite-router`
+is its executable name, not a separate npm package.
 
 ## Compatibility
 

package/dist/cli.cjs

@@ -218,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;
@@ -535,7 +544,7 @@ const init = new commander.Command().name("init").description(
 Project "${projectName}" is ready!
 `);
 });
-const version = "1.1.1";
+const version = "1.2.1";
 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,208 @@
-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 g } from "./path-BodMUTCM.js";
+import i, { Suspense as C, lazy as x, createContext as L, useContext as M } from "react";
+import { useParams as A } from "react-router-dom";
+const k = {
   enableLazyLoading: !0
 };
-let d = { ...L };
-function x(e) {
+let d = { ...k };
+function B(e) {
   d = { ...d, ...e };
 }
-function $() {
+function S() {
   return d;
 }
 let E = [];
-function T(e, r) {
-  E.push({ pattern: e, middleware: r });
+function H(e, t) {
+  E.push({ pattern: e, middleware: t });
 }
-function j() {
+function J() {
   E = [];
 }
-function z(e, r) {
-  let n = r;
-  for (const t of E)
-    t.pattern.test(e) && (n = t.middleware(n));
+function p(e, t) {
+  let n = t;
+  for (const r of E)
+    r.pattern.lastIndex = 0, r.pattern.test(e) && (n = r.middleware(n)), r.pattern.lastIndex = 0;
   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"), y = /* @__PURE__ */ new Map();
+function R(e, t, n) {
+  const r = S();
+  if (r.enableLazyLoading === !1) {
+    const u = i.lazy(e), s = i.createElement(
+      C,
       { fallback: null },
       // No loading fallback when disabled
-      i.createElement(c)
+      i.createElement(u)
     );
-    return n ? z(n, u) : u;
+    return n ? p(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,
-    { fallback: i.createElement(o) },
-    i.createElement(l)
+  let a = y.get(t);
+  a || (a = x(e), y.set(t, a));
+  const l = r.loadingFallback || T, o = i.createElement(
+    C,
+    { fallback: 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 ? p(n, o) : o;
+}
+function m(e, t, n, r, a) {
+  const l = z(t, a), o = l ? l.split("/") : [];
+  let u = e, s = "";
+  o.forEach((c, h) => {
+    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), h === o.length - 1 && (u[r] = n);
+  }), o.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");
+  return Object.entries(t).forEach(([l, o]) => {
+    m(a, l, o.default, "layout", r);
   }), Object.entries(e).forEach(([l, o]) => {
-    p(t, l, o, "page");
+    m(a, l, o, "page", r);
   }), 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
+    m(a, l, o, "notFound", r);
+  }), a;
+}
+const F = L(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 M(F);
+}
+function P(e, t) {
+  return p(e, i.createElement(t));
+}
+function I(e) {
+  return /^\[\[\.\.\..+\]\]$/.test(e);
+}
+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 = R(
+    async () => ({ default: (await r()).default }),
+    `page:${e.fullPath || t}`,
+    t
+  ), l = e.segment.match(/^\[\[?\.\.\.(.+?)\]\]?$/), o = l ? i.createElement(N, {
+    name: l[1],
+    children: a
+  }) : a;
+  return n ? { index: !0, element: o } : { path: g(e.segment), element: o };
+}
+function $(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}`
+      async () => ({ default: (await t()).default }),
+      `notfound:${e.fullPath}`,
+      n
     )
   };
 }
-function s(e, r) {
+function b(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 l = g(r), o = l ? t ? `${t}/${l}` : `/${l}` : t;
+    n.push(...v(a, !1, o));
   }), 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 w(e, t) {
+  const n = [];
+  return e.page && n.push(f(e, t || "/", !0)), n.push(...b(e, t)), e.notFound && n.push($(e)), n;
+}
+function v(e, t = !1, n = "") {
+  const r = [];
+  if (t) {
+    const c = w(e, "");
+    return e.layout ? (r.push({
+      path: "/",
+      element: P("/", e.layout),
+      children: c
+    }), r) : e.page ? (r.push({
       path: "/",
-      element: i.createElement(e.layout),
-      children: a
-    }), t;
+      element: f(e, "/", !1).element,
+      children: c.slice(1).length > 0 ? c.slice(1) : void 0
+    }), r) : e.notFound ? (r.push({
+      path: "/",
+      children: c
+    }), r) : c;
   }
+  const a = g(e.segment), l = !a, o = l ? n : n + "/" + a, u = b(e, o), s = e.notFound ? [$(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({
+    const c = w(e, o);
+    return [{
+      ...l ? {} : { path: a },
+      element: P(o, e.layout),
+      children: c.length > 0 ? c : void 0
+    }];
+  }
+  if (e.page && !l) {
+    if (I(e.segment)) {
+      const c = f(e, n, !0), h = {
+        path: a,
+        element: f(e, o).element,
+        children: [...u, ...s].length > 0 ? [...u, ...s] : void 0
+      };
+      return [c, h];
+    }
+    return [{
       path: a,
-      element: i.createElement(e.layout),
-      children: u.length > 0 ? u : void 0
-    }), t;
+      element: f(e, o).element,
+      children: [...u, ...s].length > 0 ? [...u, ...s] : 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 || e.notFound || !l) {
+    const c = [
+      ...e.page ? [f(e, o, !0)] : [],
+      ...u,
+      ...s
+    ];
+    return [{
+      ...l ? {} : { 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 Q(e, t, n, r) {
   return () => {
-    const t = S(e, r, n);
-    return w(t, !0);
+    const a = j(e, t, n, r);
+    return v(a, !0);
   };
 }
+function U() {
+  const e = A(), t = D();
+  return typeof t == "string" && e["*"] !== void 0 ? { ...e, [t]: e["*"] } : e;
+}
 export {
-  S as buildRouteTree,
-  j as clearMiddlewares,
-  x as configureRouter,
+  N as CatchAllParamProvider,
+  j as buildRouteTree,
+  J as clearMiddlewares,
+  B as configureRouter,
   R as createLazyElement,
-  O as createRouteGenerator,
-  C as extractRoutePath,
-  G as nextViteRouter,
-  f as normalizeSegment,
-  T as registerMiddleware,
-  w as treeToRoutes
+  Q as createRouteGenerator,
+  z as extractRoutePath,
+  g as normalizeSegment,
+  H as registerMiddleware,
+  v as treeToRoutes,
+  U 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,145 @@
-import "node:fs";
-import "node:path";
-import { a as i } from "./index.plugin--ecyiAem.js";
+import d from "node:fs";
+import u from "node:path";
+import { n as R } from "./path-BodMUTCM.js";
+function g(r) {
+  const e = r.split(u.sep).filter(Boolean).map(R).filter(Boolean);
+  return e.length > 0 ? `/${e.join("/")}` : "/";
+}
+function v(r, e) {
+  const i = /* @__PURE__ */ new Map();
+  function a(n) {
+    for (const s of d.readdirSync(n, { withFileTypes: !0 })) {
+      const m = u.join(n, s.name);
+      if (s.isDirectory())
+        a(m);
+      else if (s.isFile() && s.name === e) {
+        const o = u.relative(r, n), f = o.split(u.sep).filter(Boolean).map((c) => {
+          const t = c.match(/^\[\[\.\.\.(.+)\]\]$/);
+          if (t)
+            return { name: t[1], optional: !0 };
+          const p = c.match(/^\[\.\.\.(.+)\]$/);
+          return p ? { name: p[1], optional: !1 } : void 0;
+        }).filter((c) => !!c);
+        i.set(g(o), {
+          path: g(o),
+          params: f
+        });
+      }
+    }
+  }
+  return d.existsSync(r) && a(r), [...i.values()].sort((n, s) => n.path.localeCompare(s.path));
+}
+function x(r) {
+  const e = r.match(/^\/(?:\[\.\.\.|:)([^/\]]+)\]?$/);
+  return e == null ? void 0 : e[1];
+}
+function P(r) {
+  const e = r.map(({ path: a }) => `  | "${a}"`).join(`
+`), i = r.map(({ path: a, params: n }) => {
+    const s = a.split("/").map((o) => x(`/${o}`)).filter((o) => !!o), m = s.length > 0 || n.length > 0 ? [
+      ...s.map((o) => `    ${o}: string;`),
+      ...n.map(({ name: o, optional: l }) => `    ${o}${l ? "?" : ""}: string;`)
+    ].join(`
+`) : "    [key: string]: never;";
+    return `  "${a}": {
+${m}
+  };`;
+  }).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 {
+${i}
+  }
+
+  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(r = {}) {
+  const {
+    pagesDir: e = "src/app",
+    pageFile: i = "page.tsx",
+    layoutFile: a = "layout.tsx",
+    notFoundFile: n = "not-found.tsx"
+  } = r, s = { pagesDir: e, pageFile: i, layoutFile: a, notFoundFile: n }, m = "virtual:next-vite-router", o = "\0" + m;
+  let l = "", f = "";
+  function c() {
+    const t = P(v(l, i));
+    d.writeFileSync(f, t, "utf-8");
+  }
+  return {
+    name: "next-vite-router",
+    configResolved(t) {
+      l = u.resolve(t.root, e), f = u.join(u.dirname(l), "virtual-next-vite-router.d.ts"), c();
+    },
+    configureServer(t) {
+      const p = (h) => {
+        if (u.relative(l, h).startsWith("..") || ![i, a, n].includes(u.basename(h)))
+          return;
+        c();
+        const y = t.moduleGraph.getModuleById(o);
+        y && (t.moduleGraph.invalidateModule(y), t.ws.send({ type: "full-reload", path: "*" }));
+      };
+      t.watcher.on("add", p), t.watcher.on("unlink", p);
+    },
+    resolveId(t) {
+      if (t === m)
+        return o;
+    },
+    load(t) {
+      if (t === o)
+        return `
+import { buildRouteTree, treeToRoutes, normalizeSegment, createLazyElement, useParams } from 'next-vite-router';
+import { Link, useRoutes } from 'react-router-dom';
+
+const pagesGlob = import.meta.glob('/${e}/**/${i}');
+const layoutsGlob = import.meta.glob('/${e}/**/${a}', { 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(s)});
+  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.1",
+  "version": "1.2.1",
   "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
-};