next-vite-router 1.0.2 → 1.0.4

package/README.md

@@ -2,8 +2,6 @@
 
 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.
 
-This README focuses on how consumers install and use the package (no publishing instructions).
-
 ## Installation
 
 Install with your package manager of choice:
@@ -37,28 +35,75 @@ export default defineConfig({
 });
 ```
 
-Example usage inside your app (client entry):
+Example usage inside your app. **Important: generate routes once at module level** (not inside the component) to avoid infinite re-renders.
+
+File: `src/App.tsx`
 
 ```tsx
-import React from 'react';
-import { BrowserRouter } from 'react-router-dom';
-import { generateRoutes, useRoutes } from 'virtual:next-vite-router';
+import { useRoutes } from 'react-router-dom';
+import { generateRoutes } from 'virtual:next-vite-router';
 
 const routes = generateRoutes();
 
-function App() {
+export default function App() {
   const element = useRoutes(routes);
-  return <BrowserRouter>{element}</BrowserRouter>;
+  return element;
 }
+```
 
-export default App;
+File: `src/main.tsx`
+
+```tsx
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import { BrowserRouter } from 'react-router-dom';
+import App from './App';
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </StrictMode>
+);
 ```
 
-Notes:
+**Key points:**
 
-- The plugin default `pagesDir` is `src/app`. You can change it via options.
+- Call `generateRoutes()` once at module level, not inside the component (prevents infinite re-renders).
+- Wrap your app with `BrowserRouter` at the entry point (`main.tsx`), not inside `App`.
+- `pagesDir` (default: `src/app`) is the directory where you organize your **route files** (`page.tsx`, `layout.tsx`, `not-found.tsx`). It has nothing to do with the `App.tsx` component.
 - The virtual module is `virtual:next-vite-router` (the plugin resolves it internally).
 
+**Example file structure:**
+
+```
+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:
+
+```ts
+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`.
@@ -153,25 +198,6 @@ The plugin takes an options object. Defaults are:
 
 Pass a custom `pagesDir` if your project uses `src/pages` or another convention.
 
-## Examples & Demos
-
-If you want, I can add a small demo app showing:
-
-- A minimal `src/pages` layout with nested layouts
-- How `generateRoutes()` maps files to React Router routes
-- A Vite dev server example showing HMR for page/layout changes
-
-Tell me which example you'd prefer and I will scaffold it.
-
-## Contributing
-
-Contributions welcome. Suggested workflow:
-
-1. Fork the repo
-2. Create a branch
-3. Run `pnpm install` and `pnpm run dev` to test locally
-4. Open a PR with description and tests/examples if applicable
-
 ## License
 
-MIT
+MIT

package/dist/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "next-vite-router",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "description": "Next.js-like file-based routing for React + Vite",
   "type": "module",
   "main": "./dist/index.js",