next-vite-router 1.0.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Your Rlzee
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,177 @@
+# 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.
+
+This README focuses on how consumers install and use the package (no publishing instructions).
+
+## Installation
+
+Install with your package manager of choice:
+
+```bash
+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).
+
+## 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`:
+
+```ts
+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 (client entry):
+
+```tsx
+import React from 'react';
+import { BrowserRouter } from 'react-router-dom';
+import { generateRoutes, useRoutes } from 'virtual:next-vite-router';
+
+const routes = generateRoutes();
+
+function App() {
+  const element = useRoutes(routes);
+  return <BrowserRouter>{element}</BrowserRouter>;
+}
+
+export default App;
+```
+
+Notes:
+
+- The plugin default `pagesDir` is `src/app`. You can change it via options.
+- The virtual module is `virtual:next-vite-router` (the plugin resolves it internally).
+
+## 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:
+
+```ts
+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.
+
+## 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:
+
+```ts
+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:
+
+```ts
+import { registerMiddleware } from 'next-vite-router';
+
+registerMiddleware(/^\/dashboard/, (element) => (
+  <AuthGuard>{element}</AuthGuard>
+));
+```
+
+## Configuration options (plugin)
+
+The plugin takes an options object. Defaults are:
+
+```ts
+{
+  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.
+
+## 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

package/dist/index.d.ts

@@ -0,0 +1,84 @@
+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 clearMiddlewares(): void;
+
+export declare function configureRouter(config: RouterConfig): void;
+
+/**
+ * Create a lazy element wrapped with Suspense and apply middlewares
+ * @param loader - Function that loads the component
+ * @param cacheKey - Unique key for the cache
+ * @param routePath - Route path for middlewares
+ */
+export declare function createLazyElement(loader: () => Promise<any>, cacheKey: string, routePath?: string): default_2.ReactElement;
+
+/**
+ * Create a custom route generator function using your own files
+ *
+ * ⚠️ NOTE: This function is intended for advanced use only.
+ * For most cases, use the Vite plugin which automatically handles the paths.
+ *
+ * @example
+ * // In your configuration file
+ * 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");
+ *
+ * export const generateCustomRoutes = createRouteGenerator(pages, layouts, notFounds);
+ *
+ * // 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[];
+
+/**
+ * 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;
+};
+
+/**
+ * Normalize a Next.js segment to a React Router segment
+ * @example (admin) -> ""
+ * @example [id] -> :id
+ * @example [...slug] -> *
+ */
+export declare function normalizeSegment(segment: string): string;
+
+export declare function registerMiddleware(pattern: RegExp, middleware: RouteMiddleware): void;
+
+export declare type RouteMiddleware = (element: ReactElement) => ReactElement;
+
+export declare type RouteNode = {
+    segment: string;
+    fullPath: string;
+    page?: any;
+    layout?: any;
+    notFound?: any;
+    children: Map<string, RouteNode>;
+};
+
+export declare type RouterConfig = {
+    loadingFallback?: React.ComponentType;
+    pagesDir?: string;
+    enableLazyLoading?: boolean;
+};
+
+export declare function treeToRoutes(node: RouteNode, isRoot?: boolean, currentPath?: string): RouteObject[];
+
+export { }

package/dist/index.js

@@ -0,0 +1,145 @@
+import i, { lazy as z, Suspense as b } from "react";
+import { nextViteRouter as N } 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 S(e) {
+  m = { ...m, ...e };
+}
+function C() {
+  return m;
+}
+let d = [];
+function k(e, a) {
+  d.push({ pattern: e, middleware: a });
+}
+function T() {
+  d = [];
+}
+function g(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 n = C();
+  if (n.enableLazyLoading === !1) {
+    const u = i.lazy(e), c = i.createElement(u);
+    return r ? g(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) },
+    i.createElement(t)
+  );
+  return r ? g(r, l) : l;
+}
+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, {
+      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);
+}
+function M(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");
+  }), n;
+}
+function h(e, a, r = !1) {
+  const n = $(
+    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) {
+  return {
+    path: "*",
+    element: $(
+      async () => ({ default: (await e.notFound()).default }),
+      `notfound:${e.fullPath}`
+    )
+  };
+}
+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));
+  }), r;
+}
+function R(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({
+      path: "/",
+      element: i.createElement(e.layout),
+      children: t
+    }), n;
+  }
+  if (e.layout) {
+    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({
+      path: t,
+      element: i.createElement(e.layout),
+      children: l.length > 0 ? l : 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);
+    return n.push({
+      path: u.path,
+      element: u.element,
+      children: l.length > 0 ? l : void 0
+    }), n;
+  }
+  return s(e, r);
+}
+function j(e, a, r) {
+  return () => {
+    const n = M(e, a, r);
+    return R(n, !0);
+  };
+}
+export {
+  M as buildRouteTree,
+  T as clearMiddlewares,
+  S as configureRouter,
+  $ as createLazyElement,
+  j as createRouteGenerator,
+  F as extractRoutePath,
+  N as nextViteRouter,
+  f as normalizeSegment,
+  k as registerMiddleware,
+  R as treeToRoutes
+};

package/dist/plugin.d.ts

@@ -0,0 +1,12 @@
+import { Plugin as Plugin_2 } from 'vite';
+
+export declare function nextViteRouter(options?: NextViteRouterPluginOptions): Plugin_2;
+
+export declare type NextViteRouterPluginOptions = {
+    pagesDir?: string;
+    pageFile?: string;
+    layoutFile?: string;
+    notFoundFile?: string;
+};
+
+export { }

package/dist/plugin.js

@@ -0,0 +1,59 @@
+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: "*"
+        }));
+      }
+    }
+  };
+}
+export {
+  d as nextViteRouter
+};

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "next-vite-router",
+  "version": "1.0.2",
+  "description": "Next.js-like file-based routing for React + Vite",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./plugin": {
+      "import": "./dist/plugin.js",
+      "types": "./dist/plugin.d.ts"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "keywords": [
+    "react",
+    "vite",
+    "router",
+    "nextjs",
+    "file-based-routing",
+    "filesystem-router",
+    "react-router"
+  ],
+  "author": "Rlzee",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Rlzee/next-vite-router"
+  },
+  "homepage": "https://github.com/Rlzee/next-vite-router#readme",
+  "license": "MIT",
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "react-router-dom": "^6.0.0",
+    "vite": "^5.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^24.10.1",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "typescript": "^5.0.0",
+    "vite": "^5.0.0",
+    "vite-plugin-dts": "^3.0.0"
+  },
+  "scripts": {
+    "dev": "vite build --watch",
+    "build": "vite build",
+    "test:local": "node test/test-package.js",
+    "preview": "pnpm pack --dry-run"
+  }
+}