next-vite-router 1.0.3 → 1.0.5

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:
@@ -18,6 +16,51 @@ 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:
+
+```bash
+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:
+
+```bash
+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.
@@ -37,28 +80,60 @@ 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:
@@ -170,4 +245,4 @@ Pass a custom `pagesDir` if your project uses `src/pages` or another convention.
 
 ## License
 
-MIT
+MIT

package/dist/cli.cjs

@@ -0,0 +1,527 @@
+"use strict";
+const commander = require("commander");
+const node_child_process = require("node:child_process");
+const child_process = require("child_process");
+const prompts = require("prompts");
+const fs = require("fs");
+const path = require("path");
+function isAvailable(cmd) {
+  try {
+    node_child_process.execSync(`${cmd} --version`, { stdio: "ignore" });
+    return true;
+  } catch {
+    return false;
+  }
+}
+function detectFromUserAgent() {
+  const ua = process.env.npm_config_user_agent;
+  if (!ua) return null;
+  if (ua.startsWith("pnpm")) return "pnpm";
+  if (ua.startsWith("bun")) return "bun";
+  if (ua.startsWith("yarn")) return "yarn";
+  if (ua.startsWith("npm")) return "npm";
+  return null;
+}
+function detectPackageManager() {
+  const preferred = process.env.PREFERRED_PM ?? void 0;
+  const fromUA = detectFromUserAgent();
+  const candidates = [];
+  if (fromUA) candidates.push(fromUA);
+  if (preferred && !candidates.includes(preferred)) candidates.push(preferred);
+  ["pnpm", "bun", "yarn", "npm"].forEach((p) => {
+    const pm2 = p;
+    if (!candidates.includes(pm2)) candidates.push(pm2);
+  });
+  let chosen = null;
+  for (const pm2 of candidates) {
+    if (isAvailable(pm2)) {
+      chosen = pm2;
+      break;
+    }
+  }
+  if (!chosen) {
+    chosen = "npm";
+  }
+  switch (chosen) {
+    case "pnpm":
+      return {
+        name: "pnpm",
+        createProjectCommand: (projectName, template) => `pnpm create vite@latest ${projectName} --template ${template} --no-rolldown`,
+        addDepsCommand: (deps) => `pnpm add ${deps.join(" ")}`,
+        addDevDepsCommand: (deps) => `pnpm add -D ${deps.join(" ")}`,
+        installCommand: "pnpm install"
+      };
+    case "bun":
+      return {
+        name: "bun",
+        createProjectCommand: (projectName, template) => `bun create vite ${projectName} --template=${template} --no-rolldown`,
+        addDepsCommand: (deps) => `bun add ${deps.join(" ")}`,
+        addDevDepsCommand: (deps) => `bun add -d ${deps.join(" ")}`,
+        installCommand: "bun install"
+      };
+    case "yarn":
+      return {
+        name: "yarn",
+        createProjectCommand: (projectName, template) => `yarn create vite ${projectName} --template=${template} --no-rolldown`,
+        addDepsCommand: (deps) => `yarn add ${deps.join(" ")}`,
+        addDevDepsCommand: (deps) => `yarn add -D ${deps.join(" ")}`,
+        installCommand: "yarn install"
+      };
+    case "npm":
+    default:
+      return {
+        name: "npm",
+        createProjectCommand: (projectName, template) => `npm create vite@latest ${projectName} -- --template ${template} --no-rolldown`,
+        addDepsCommand: (deps) => `npm install ${deps.join(" ")}`,
+        addDevDepsCommand: (deps) => `npm install -D ${deps.join(" ")}`,
+        installCommand: "npm install"
+      };
+  }
+}
+let FORCE_COLOR, NODE_DISABLE_COLORS, NO_COLOR, TERM, isTTY = true;
+if (typeof process !== "undefined") {
+  ({ FORCE_COLOR, NODE_DISABLE_COLORS, NO_COLOR, TERM } = process.env || {});
+  isTTY = process.stdout && process.stdout.isTTY;
+}
+const $ = {
+  enabled: !NODE_DISABLE_COLORS && NO_COLOR == null && TERM !== "dumb" && (FORCE_COLOR != null && FORCE_COLOR !== "0" || isTTY)
+};
+function init$1(x, y) {
+  let rgx = new RegExp(`\\x1b\\[${y}m`, "g");
+  let open = `\x1B[${x}m`, close = `\x1B[${y}m`;
+  return function(txt) {
+    if (!$.enabled || txt == null) return txt;
+    return open + (!!~("" + txt).indexOf(close) ? txt.replace(rgx, close + open) : txt) + close;
+  };
+}
+const red = init$1(31, 39);
+const green = init$1(32, 39);
+const yellow = init$1(33, 39);
+const cyan = init$1(36, 39);
+const highlighter = {
+  error: red,
+  warn: yellow,
+  info: cyan,
+  success: green
+};
+const logger = {
+  error(...args) {
+    console.log(highlighter.error(args.join(" ")));
+  },
+  warn(...args) {
+    console.log(highlighter.warn(args.join(" ")));
+  },
+  info(...args) {
+    console.log(highlighter.info(args.join(" ")));
+  },
+  success(...args) {
+    console.log(highlighter.success(args.join(" ")));
+  },
+  log(...args) {
+    console.log(args.join(" "));
+  },
+  break() {
+    console.log("");
+  }
+};
+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;
+  return null;
+}
+function readViteConfig(projectDir) {
+  const configPath = getViteConfigPath(projectDir);
+  if (!configPath) return null;
+  return fs.readFileSync(configPath, "utf-8");
+}
+function writeViteConfig(projectDir, content) {
+  const configPath = getViteConfigPath(projectDir);
+  if (!configPath) throw new Error("Vite config not found");
+  fs.writeFileSync(configPath, content, "utf-8");
+}
+function stripJsonComments(jsonString) {
+  jsonString = jsonString.replace(/\/\/.*$/gm, "");
+  jsonString = jsonString.replace(/\/\*[\s\S]*?\*\//g, "");
+  jsonString = jsonString.replace(/,(\s*[}\]])/g, "$1");
+  return jsonString;
+}
+function updateAppTsConfig(projectDir) {
+  const tsConfigAppPath = path.join(projectDir, "tsconfig.app.json");
+  if (!fs.existsSync(tsConfigAppPath)) return;
+  const content = fs.readFileSync(tsConfigAppPath, "utf-8");
+  const cleanedContent = stripJsonComments(content);
+  const tsConfigApp = JSON.parse(cleanedContent);
+  tsConfigApp.include = [
+    "./**/*.ts",
+    "./**/*.tsx",
+    "virtual-next-vite-router.d.ts"
+  ];
+  fs.writeFileSync(
+    tsConfigAppPath,
+    JSON.stringify(tsConfigApp, null, 2),
+    "utf-8"
+  );
+}
+function updateTsConfigJson(projectDir, src) {
+  const tsConfigPath = path.join(projectDir, "tsconfig.json");
+  if (!fs.existsSync(tsConfigPath)) return;
+  const content = fs.readFileSync(tsConfigPath, "utf-8");
+  const cleanedContent = stripJsonComments(content);
+  const tsConfig = JSON.parse(cleanedContent);
+  if (!tsConfig.compilerOptions) {
+    tsConfig.compilerOptions = {};
+  }
+  tsConfig.compilerOptions.baseUrl = ".";
+  tsConfig.compilerOptions.paths = {
+    "@/*": [src ? "./src/*" : "./*"]
+  };
+  fs.writeFileSync(tsConfigPath, JSON.stringify(tsConfig, null, 2), "utf-8");
+}
+function createVirtualDTS(projectDir, useSrc) {
+  const targetDir = useSrc ? path.join(projectDir, "src") : projectDir;
+  if (useSrc && !fs.existsSync(targetDir)) {
+    fs.mkdirSync(targetDir, { recursive: true });
+  }
+  const filePath = path.join(targetDir, "virtual-next-vite-router.d.ts");
+  const content = `declare module 'virtual:next-vite-router' {
+  import type { RouteObject } from 'react-router-dom';
+
+  export const generateRoutes: () => RouteObject[];
+  export { useRoutes } from 'react-router-dom';
+}
+`;
+  fs.writeFileSync(filePath, content, "utf-8");
+}
+function createMainTSX(projectDir, useSrc) {
+  const targetDir = useSrc ? path.join(projectDir, "src") : projectDir;
+  if (useSrc && !fs.existsSync(targetDir)) {
+    fs.mkdirSync(targetDir, { recursive: true });
+  }
+  const mainPath = path.join(targetDir, "main.tsx");
+  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();
+
+function App() {
+  const element = useRoutes(routes);
+  return element;
+}
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </StrictMode>,
+);
+`;
+  fs.writeFileSync(mainPath, content, "utf-8");
+}
+function createGlobalsCss({ projectDir, src, tailwind }) {
+  const cssDir = src ? path.join(projectDir, "src") : projectDir;
+  const cssPath = path.join(cssDir, "globals.css");
+  if (!fs.existsSync(cssDir)) {
+    fs.mkdirSync(cssDir, { recursive: true });
+  }
+  let content;
+  if (tailwind) {
+    content = '@import "tailwindcss";\n';
+  } else {
+    content = `* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+html,
+body,
+#root {
+  width: 100%;
+  height: 100%;
+}
+`;
+  }
+  fs.writeFileSync(cssPath, content, "utf-8");
+}
+const layoutContentNoTailwind = `import { Outlet } from "react-router-dom";
+import "@/globals.css";
+
+export default function Layout() {
+  return (
+    <main>
+      <Outlet />
+    </main>
+  );
+}
+`;
+const layoutContentTailwind = `import { Outlet } from "react-router-dom";
+import "@/globals.css";
+
+export default function Layout() {
+  return (
+    <main className="min-h-screen bg-background">
+      <Outlet />
+    </main>
+  );
+}
+`;
+const pageContentNoTailwind = `export default function Page() {
+  return <h1>Welcome to the next-vite-router project!</h1>;
+}
+`;
+const pageContentTailwind = `export default function Page() {
+  return <h1 className="text-2xl font-bold">Welcome to the next-vite-router project!</h1>;
+}
+`;
+const examplePageContent = `export default function ExamplePage() {
+  return <h1>Welcome to the example page!</h1>;
+}
+`;
+function createExampleStructure(projectDir, src, tailwindcss) {
+  const appDir = src ? path.join(projectDir, "src", "app") : path.join(projectDir, "app");
+  if (!fs.existsSync(appDir)) {
+    fs.mkdirSync(appDir, { recursive: true });
+  }
+  const layoutContent = tailwindcss ? layoutContentTailwind : layoutContentNoTailwind;
+  fs.writeFileSync(path.join(appDir, "layout.tsx"), layoutContent, "utf-8");
+  const pageContent = tailwindcss ? pageContentTailwind : pageContentNoTailwind;
+  fs.writeFileSync(path.join(appDir, "page.tsx"), pageContent, "utf-8");
+  const exampleDir = path.join(appDir, "example");
+  if (!fs.existsSync(exampleDir)) {
+    fs.mkdirSync(exampleDir, { recursive: true });
+  }
+  fs.writeFileSync(
+    path.join(exampleDir, "page.tsx"),
+    examplePageContent,
+    "utf-8"
+  );
+}
+function addTailwindToViteConfig(projectDir) {
+  const content = readViteConfig(projectDir);
+  if (!content) throw new Error("Vite config not found");
+  if (content.includes("@tailwindcss/vite")) {
+    return;
+  }
+  let updatedContent = content;
+  const importRegex = /(import\s+.*from\s+['"].*['"];?\s*\n)+/;
+  const match = updatedContent.match(importRegex);
+  if (match) {
+    const lastImportEnd = match[0].length;
+    updatedContent = updatedContent.slice(0, lastImportEnd) + "import tailwindcss from '@tailwindcss/vite';\n" + updatedContent.slice(lastImportEnd);
+  } else {
+    updatedContent = "import tailwindcss from '@tailwindcss/vite';\n\n" + updatedContent;
+  }
+  const pluginsArrayRegex = /plugins:\s*\[([^\]]*)\]/s;
+  const pluginsMatch = updatedContent.match(pluginsArrayRegex);
+  if (pluginsMatch) {
+    const pluginsContent = pluginsMatch[1];
+    const newPluginsContent = pluginsContent.trim() ? pluginsContent.trimEnd() + ",\n    tailwindcss()" : "\n    tailwindcss()\n  ";
+    updatedContent = updatedContent.replace(
+      pluginsArrayRegex,
+      `plugins: [${newPluginsContent}
+  ]`
+    );
+  } else {
+    const defineConfigRegex = /defineConfig\(\{/;
+    updatedContent = updatedContent.replace(
+      defineConfigRegex,
+      "defineConfig({\n  plugins: [tailwindcss()],"
+    );
+  }
+  writeViteConfig(projectDir, updatedContent);
+}
+const pm$1 = detectPackageManager();
+function startNextViteRouterConfig({
+  projectDir = process.cwd(),
+  src,
+  tailwindcss
+}) {
+  startViteConfig(projectDir, src);
+  const srcPath = path.join(projectDir, "src");
+  if (fs.existsSync(srcPath)) {
+    fs.rmSync(srcPath, { recursive: true, force: true });
+  }
+  updateTsConfigJson(projectDir, src);
+  if (!src) {
+    updateAppTsConfig(projectDir);
+  }
+  createVirtualDTS(projectDir, src);
+  createMainTSX(projectDir, src);
+  if (tailwindcss) {
+    logger.info("Setting up Tailwind CSS...");
+    const addDevDepsCmd = pm$1.addDevDepsCommand([
+      "tailwindcss",
+      "@tailwindcss/vite"
+    ]);
+    child_process.execSync(addDevDepsCmd, { stdio: "inherit", cwd: projectDir });
+    addTailwindToViteConfig(projectDir);
+  }
+  createGlobalsCss({ projectDir, src, tailwind: tailwindcss });
+  createExampleStructure(projectDir, src, tailwindcss);
+}
+function startViteConfig(projectDir, src) {
+  const viteConfigPath = getViteConfigPath(projectDir);
+  if (!viteConfigPath) throw new Error("Vite config not found");
+  let viteConfigContent = readViteConfig(projectDir);
+  if (!viteConfigContent) throw new Error("Vite config empty");
+  if (!viteConfigContent.includes("import { resolve }")) {
+    viteConfigContent = `import { resolve } from "path";
+` + viteConfigContent;
+  }
+  if (!viteConfigContent.includes("import { nextViteRouter }")) {
+    viteConfigContent = `import { nextViteRouter } from "next-vite-router/plugin";
+` + viteConfigContent;
+  }
+  const resolveConfig = `  resolve: {
+    alias: {
+      "@": resolve(__dirname, "./${src ? "src" : "."}"),
+    },
+  },`;
+  const defineConfigRegex = /defineConfig\(\s*{/;
+  if (!viteConfigContent.includes("resolve:")) {
+    viteConfigContent = viteConfigContent.replace(
+      defineConfigRegex,
+      `defineConfig({
+${resolveConfig}
+`
+    );
+  }
+  const pluginsRegex = /plugins\s*:\s*\[(.*?)\]/s;
+  const match = viteConfigContent.match(pluginsRegex);
+  const pluginString = `nextViteRouter({ pagesDir: "${src ? "src/app" : "app"}", pageFile: "page.tsx", layoutFile: "layout.tsx", notFoundFile: "not-found.tsx" })`;
+  if (match) {
+    const existing = match[1].trim();
+    const newPlugins = existing ? `${existing}, ${pluginString}` : pluginString;
+    viteConfigContent = viteConfigContent.replace(
+      pluginsRegex,
+      `plugins: [${newPlugins}]`
+    );
+  } else {
+    viteConfigContent = viteConfigContent.replace(
+      /defineConfig\(\s*{/,
+      `defineConfig({
+  plugins: [${pluginString}],`
+    );
+  }
+  writeViteConfig(projectDir, viteConfigContent);
+}
+const pm = detectPackageManager();
+const init = new commander.Command().name("init").description(
+  "Initialize a new Vite project with next-vite-router configuration"
+).action(async () => {
+  const projectNameResponse = await prompts(
+    {
+      type: "text",
+      name: "projectName",
+      message: "Enter your project name:",
+      initial: "my-next-vite-router-app"
+    },
+    {
+      onCancel: () => {
+        logger.error("Project creation cancelled.");
+        process.exit(1);
+      }
+    }
+  );
+  const projectName = projectNameResponse.projectName;
+  const variantResponse = await prompts(
+    {
+      type: "select",
+      name: "template",
+      message: "Select a template:",
+      choices: [
+        { title: "React + TypeScript", value: "react-ts" },
+        {
+          title: "React + TypeScript (React Compiler)",
+          value: "react-compiler-ts"
+        },
+        { title: "React + SWC (Recommended)", value: "react-swc-ts" }
+      ],
+      initial: 0
+    },
+    {
+      onCancel: () => {
+        logger.error("Template selection cancelled.");
+        process.exit(1);
+      }
+    }
+  );
+  const variant = variantResponse.template;
+  const srcFolderResponse = await prompts(
+    {
+      type: "confirm",
+      name: "useSrc",
+      message: "Do you want to use a 'src' folder?",
+      initial: true
+    },
+    {
+      onCancel: () => {
+        logger.error("Src folder selection cancelled.");
+        process.exit(1);
+      }
+    }
+  );
+  const useSrc = srcFolderResponse.useSrc;
+  const tailwindResponse = await prompts(
+    {
+      type: "confirm",
+      name: "useTailwind",
+      message: "Do you want to set up Tailwind CSS?",
+      initial: true
+    },
+    {
+      onCancel: () => {
+        logger.error("Tailwind CSS setup cancelled.");
+        process.exit(1);
+      }
+    }
+  );
+  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) {
+  }
+  logger.info("Installing dependencies...");
+  child_process.execSync(pm.installCommand, { stdio: "inherit", cwd: projectName });
+  logger.info(
+    "Adding next-vite-router and react-router-dom as dependencies..."
+  );
+  const addDepsCmd = pm.addDepsCommand([
+    "next-vite-router",
+    "react-router-dom@latest"
+  ]);
+  child_process.execSync(addDepsCmd, { stdio: "inherit", cwd: projectName });
+  logger.info("Configuring next-vite-router in the project...");
+  startNextViteRouterConfig({
+    projectDir: `./${projectName}`,
+    src: useSrc,
+    tailwindcss: useTailwind
+  });
+  logger.success(`
+Project "${projectName}" is ready!
+`);
+});
+async function main() {
+  const program = new commander.Command();
+  program.name("next-vite-router").version("1.0.5").addCommand(init);
+  program.parse(process.argv);
+}
+main();

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,10 +1,13 @@
 {
   "name": "next-vite-router",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "description": "Next.js-like file-based routing for React + Vite",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
+  "bin": {
+    "next-vite-router": "./dist/cli.cjs"
+  },
   "exports": {
     ".": {
       "import": "./dist/index.js",
@@ -44,16 +47,23 @@
   },
   "devDependencies": {
     "@types/node": "^24.10.1",
+    "@types/prompts": "^2.4.9",
     "@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"
   },
+  "dependencies": {
+    "commander": "^14.0.2",
+    "kleur": "^4.1.5",
+    "prompts": "^2.4.2"
+  },
   "scripts": {
     "dev": "vite build --watch",
-    "build": "vite build",
+    "build": "vite build && vite build -c vite.config.cli.ts",
     "test:local": "node test/test-package.js",
-    "preview": "pnpm pack --dry-run"
+    "preview": "pnpm pack --dry-run",
+    "cli": "cd test && node ../dist/cli.cjs init"
   }
 }