olova-router 1.0.1 → 1.0.3

package/README.md

@@ -0,0 +1,190 @@
+# Olova Router
+
+Next.js-style folder-based routing for React + Vite applications.
+
+## Features
+
+- 📁 **File-based routing** - Create routes by adding folders with `index.tsx`
+- 🎯 **Dynamic routes** - Use `$id` or `[id]` for dynamic segments
+- 🌟 **Catch-all routes** - Use `$` or `[...slug]` for catch-all segments
+- 📦 **Route groups** - Use `(group)` folders to organize without affecting URLs
+- 🔍 **Search params** - Built-in `useSearchParams` hook
+- 🚫 **Custom 404 pages** - Global and route-specific 404 pages
+- 🔄 **Hot reload** - Auto-updates when you add/remove routes
+- 📝 **Type-safe** - Full TypeScript support with typed routes
+
+## Installation
+
+```bash
+npm install olova-router
+```
+
+## Setup
+
+### 1. Add the Vite plugin
+
+```ts
+// vite.config.ts
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import { olovaRouter } from 'olova-router';
+
+export default defineConfig({
+  plugins: [react(), olovaRouter()],
+});
+```
+
+### 2. Create your app entry
+
+```tsx
+// src/main.tsx
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import { routes, notFoundPages, OlovaRouter } from './route.tree';
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <OlovaRouter routes={routes} notFoundPages={notFoundPages} />
+  </StrictMode>
+);
+```
+
+### 3. Create route files
+
+```
+src/
+├── App.tsx              → /
+├── 404.tsx              → Global 404 page
+├── about/
+│   └── index.tsx        → /about
+├── users/
+│   └── $id/
+│       └── index.tsx    → /users/:id
+├── blog/
+│   └── $/
+│       └── index.tsx    → /blog/* (catch-all)
+└── (auth)/              → Route group (not in URL)
+    ├── login/
+    │   └── index.tsx    → /login
+    └── register/
+        └── index.tsx    → /register
+```
+
+## Usage
+
+### Navigation
+
+```tsx
+import { Link, useRouter } from './route.tree';
+
+function MyComponent() {
+  const { navigate } = useRouter();
+  
+  return (
+    <div>
+      <Link href="/about">About</Link>
+      <button onClick={() => navigate('/users/123')}>Go to User</button>
+    </div>
+  );
+}
+```
+
+### Route Params
+
+```tsx
+import { useParams } from './route.tree';
+
+// In src/users/$id/index.tsx
+function UserPage() {
+  const { id } = useParams<{ id: string }>();
+  return <div>User ID: {id}</div>;
+}
+```
+
+### Search Params
+
+```tsx
+import { useSearchParams } from './route.tree';
+
+function SearchPage() {
+  const [searchParams, setSearchParams] = useSearchParams();
+  
+  // Read params
+  const page = searchParams.page; // "2"
+  
+  // Update params (merge with existing)
+  setSearchParams({ page: "3" }, { merge: true });
+  
+  // Replace all params
+  setSearchParams({ page: "1", sort: "name" });
+  
+  // Remove a param
+  setSearchParams({ page: null }, { merge: true });
+}
+```
+
+### Custom 404 Pages
+
+Create `404.tsx` in any folder:
+
+```tsx
+// src/404.tsx - Global 404
+import { useRouter } from './route.tree';
+
+export default function NotFound() {
+  const { currentPath, navigate } = useRouter();
+  return (
+    <div>
+      <h1>Page Not Found</h1>
+      <p>Path: {currentPath}</p>
+      <button onClick={() => navigate('/')}>Go Home</button>
+    </div>
+  );
+}
+```
+
+```tsx
+// src/dashboard/404.tsx - Dashboard-specific 404
+export default function DashboardNotFound() {
+  return <div>Dashboard page not found</div>;
+}
+```
+
+## Route Patterns
+
+| File Path | URL |
+|-----------|-----|
+| `src/App.tsx` | `/` |
+| `src/about/index.tsx` | `/about` |
+| `src/users/$id/index.tsx` | `/users/:id` |
+| `src/users/[id]/index.tsx` | `/users/:id` |
+| `src/blog/$/index.tsx` | `/blog/*` |
+| `src/blog/[...slug]/index.tsx` | `/blog/*` |
+| `src/(auth)/login/index.tsx` | `/login` |
+| `src/(group)/page/index.tsx` | `/page` |
+
+## API
+
+### Plugin Options
+
+```ts
+olovaRouter({
+  rootDir: 'src',           // Root directory to scan
+  extensions: ['.tsx', '.ts'] // File extensions to look for
+})
+```
+
+### Hooks
+
+- `useRouter()` - Returns `{ currentPath, params, navigate, searchParams, setSearchParams }`
+- `useParams<T>()` - Returns route params object
+- `useSearchParams()` - Returns `[searchParams, setSearchParams]`
+
+### Components
+
+- `OlovaRouter` - Main router component
+- `Link` - Type-safe navigation link
+
+## License
+
+MIT

package/dist/index.d.ts

@@ -0,0 +1,47 @@
+import { Plugin } from 'vite';
+export { NotFoundPageConfig, OlovaRouter, SearchParams, SetSearchParamsOptions, createLink, useParams, useRouter, useSearchParams } from './router.js';
+import 'react/jsx-runtime';
+import 'react';
+
+/**
+ * Olova Router - TypeScript Types
+ */
+
+/** Represents a discovered route from the file system */
+interface RouteEntry {
+    path: string;
+    filePath: string;
+    isDynamic: boolean;
+    params: string[];
+}
+/** Route configuration for the generated module */
+interface RouteConfig {
+    path: string;
+    component: string;
+    params?: string[];
+}
+/** Options for the Olova Router Vite plugin */
+interface OlovaRouterOptions {
+    /** Root directory to scan (default: "src") */
+    rootDir?: string;
+    /** File extensions to look for (default: [".tsx", ".ts"]) */
+    extensions?: string[];
+}
+/** Represents a 404 page entry detected by the scanner */
+interface NotFoundEntry {
+    pathPrefix: string;
+    filePath: string;
+}
+
+/**
+ * Olova Router - Vite Plugin
+ * Next.js-style folder-based routing for React + Vite
+ */
+
+/**
+ * Olova Router Vite Plugin
+ * Automatically generates route.tree.ts based on folder structure
+ */
+declare function olovaRouter(options?: OlovaRouterOptions): Plugin;
+
+export { type NotFoundEntry, type OlovaRouterOptions, type RouteConfig, type RouteEntry, olovaRouter as default, olovaRouter };

package/dist/index.js

@@ -0,0 +1,387 @@
+import path from 'path';
+import fs from 'fs';
+import { createContext, useContext, useState, useEffect } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+// src/index.ts
+function parseSearchParams(search) {
+  const params = {};
+  const urlParams = new URLSearchParams(search);
+  for (const key of urlParams.keys()) {
+    const values = urlParams.getAll(key);
+    params[key] = values.length === 1 ? values[0] : values;
+  }
+  return params;
+}
+function buildSearchString(params) {
+  const urlParams = new URLSearchParams();
+  for (const [key, value] of Object.entries(params)) {
+    if (value === null || value === void 0) continue;
+    if (Array.isArray(value)) {
+      value.forEach((v) => urlParams.append(key, v));
+    } else {
+      urlParams.set(key, value);
+    }
+  }
+  const str = urlParams.toString();
+  return str ? `?${str}` : "";
+}
+var RouterContext = createContext(null);
+function useRouter() {
+  const context = useContext(RouterContext);
+  if (!context) throw new Error("useRouter must be used within OlovaRouter");
+  return context;
+}
+function useParams() {
+  const context = useContext(RouterContext);
+  return context?.params || {};
+}
+function useSearchParams() {
+  const context = useContext(RouterContext);
+  if (!context) throw new Error("useSearchParams must be used within OlovaRouter");
+  return [context.searchParams, context.setSearchParams];
+}
+function matchRoute(pattern, pathname) {
+  const patternParts = pattern.split("/").filter(Boolean);
+  const pathParts = pathname.split("/").filter(Boolean);
+  const params = {};
+  for (let i = 0; i < patternParts.length; i++) {
+    const patternPart = patternParts[i];
+    const pathPart = pathParts[i];
+    if (patternPart === "*") {
+      params["slug"] = pathParts.slice(i).join("/");
+      return { match: true, params };
+    }
+    if (pathPart === void 0) {
+      return { match: false, params: {} };
+    }
+    if (patternPart.startsWith(":")) {
+      params[patternPart.slice(1)] = pathPart;
+    } else if (patternPart !== pathPart) {
+      return { match: false, params: {} };
+    }
+  }
+  if (pathParts.length > patternParts.length) {
+    return { match: false, params: {} };
+  }
+  return { match: true, params };
+}
+function findNotFoundPage(path2, notFoundPages) {
+  if (!notFoundPages || notFoundPages.length === 0) return null;
+  const sorted = [...notFoundPages].sort(
+    (a, b) => b.pathPrefix.length - a.pathPrefix.length
+  );
+  for (const nf of sorted) {
+    if (nf.pathPrefix === "") {
+      return nf.component;
+    }
+    if (path2 === nf.pathPrefix || path2.startsWith(nf.pathPrefix + "/")) {
+      return nf.component;
+    }
+  }
+  return null;
+}
+function OlovaRouter({ routes, notFoundPages = [], notFound = /* @__PURE__ */ jsx("div", { children: "404 - Not Found" }) }) {
+  const [currentPath, setCurrentPath] = useState(window.location.pathname);
+  const [searchParams, setSearchParamsState] = useState(
+    () => parseSearchParams(window.location.search)
+  );
+  useEffect(() => {
+    const onPopState = () => {
+      setCurrentPath(window.location.pathname);
+      setSearchParamsState(parseSearchParams(window.location.search));
+    };
+    window.addEventListener("popstate", onPopState);
+    return () => window.removeEventListener("popstate", onPopState);
+  }, []);
+  const navigate = (path2) => {
+    window.history.pushState({}, "", path2);
+    setCurrentPath(path2.split("?")[0]);
+    setSearchParamsState(parseSearchParams(path2.includes("?") ? path2.split("?")[1] : ""));
+  };
+  const setSearchParams = (newParams, options = {}) => {
+    const { replace = false, merge = false } = options;
+    let finalParams;
+    if (merge) {
+      finalParams = { ...searchParams, ...newParams };
+      for (const key of Object.keys(finalParams)) {
+        if (finalParams[key] === null) {
+          delete finalParams[key];
+        }
+      }
+    } else {
+      finalParams = newParams;
+    }
+    const searchString = buildSearchString(finalParams);
+    const newUrl = currentPath + searchString;
+    if (replace) {
+      window.history.replaceState({}, "", newUrl);
+    } else {
+      window.history.pushState({}, "", newUrl);
+    }
+    setSearchParamsState(parseSearchParams(searchString));
+  };
+  let Component = null;
+  let params = {};
+  const sortedRoutes = [...routes].sort((a, b) => {
+    const aHasCatchAll = a.path.includes("*");
+    const bHasCatchAll = b.path.includes("*");
+    const aHasDynamic = a.path.includes(":");
+    const bHasDynamic = b.path.includes(":");
+    if (aHasCatchAll && !bHasCatchAll) return 1;
+    if (!aHasCatchAll && bHasCatchAll) return -1;
+    if (aHasDynamic && !bHasDynamic) return 1;
+    if (!aHasDynamic && bHasDynamic) return -1;
+    return b.path.length - a.path.length;
+  });
+  for (const route of sortedRoutes) {
+    if (route.path === "/" && currentPath === "/") {
+      Component = route.component;
+      break;
+    }
+    const result = matchRoute(route.path, currentPath);
+    if (result.match) {
+      Component = route.component;
+      params = result.params;
+      break;
+    }
+  }
+  if (!Component) {
+    const NotFoundComponent = findNotFoundPage(currentPath, notFoundPages);
+    if (NotFoundComponent) {
+      Component = NotFoundComponent;
+    }
+  }
+  return /* @__PURE__ */ jsx(RouterContext.Provider, { value: { currentPath, params, searchParams, navigate, setSearchParams }, children: Component ? /* @__PURE__ */ jsx(Component, {}) : notFound });
+}
+function createLink() {
+  return function Link({ href, children, className }) {
+    const { navigate } = useRouter();
+    return /* @__PURE__ */ jsx("a", { href, className, onClick: (e) => {
+      e.preventDefault();
+      navigate(href);
+    }, children });
+  };
+}
+
+// src/index.ts
+function parseDynamicSegment(segment) {
+  if (segment === "$" || segment.match(/^\[\.\.\..+\]$/)) {
+    const paramName = segment === "$" ? "slug" : segment.match(/^\[\.\.\.(.+)\]$/)?.[1] || "slug";
+    return { isDynamic: true, paramName, isCatchAll: true };
+  }
+  const bracketMatch = segment.match(/^\[(.+)\]$/);
+  if (bracketMatch) {
+    return { isDynamic: true, paramName: bracketMatch[1], isCatchAll: false };
+  }
+  const dollarMatch = segment.match(/^\$(.+)$/);
+  if (dollarMatch) {
+    return { isDynamic: true, paramName: dollarMatch[1], isCatchAll: false };
+  }
+  return { isDynamic: false, paramName: null, isCatchAll: false };
+}
+function isRouteGroup(segment) {
+  return /^\(.+\)$/.test(segment);
+}
+function pathToRoute(relativePath, sep) {
+  const params = [];
+  let hasCatchAll = false;
+  const segments = relativePath.split(sep).filter(Boolean);
+  const routeSegments = segments.filter((segment) => !isRouteGroup(segment)).map((segment) => {
+    const { isDynamic, paramName, isCatchAll } = parseDynamicSegment(segment);
+    if (isDynamic && paramName) {
+      params.push(paramName);
+      if (isCatchAll) {
+        hasCatchAll = true;
+        return `*`;
+      }
+      return `:${paramName}`;
+    }
+    return segment;
+  });
+  const routePath = "/" + routeSegments.join("/");
+  return { routePath: routePath === "/" ? "/" : routePath, params, hasCatchAll };
+}
+function detectExportType(filePath) {
+  try {
+    const content = fs.readFileSync(filePath, "utf-8");
+    if (/export\s+default\s+/.test(content)) {
+      return { hasDefault: true, namedExport: null };
+    }
+    const namedMatch = content.match(/export\s+(?:const|function|class)\s+(\w+)/);
+    if (namedMatch) {
+      return { hasDefault: false, namedExport: namedMatch[1] };
+    }
+    const exportMatch = content.match(/export\s*\{\s*(\w+)(?:\s+as\s+default)?\s*\}/);
+    if (exportMatch) {
+      if (content.includes("as default")) {
+        return { hasDefault: true, namedExport: null };
+      }
+      return { hasDefault: false, namedExport: exportMatch[1] };
+    }
+    return { hasDefault: false, namedExport: null };
+  } catch {
+    return { hasDefault: true, namedExport: null };
+  }
+}
+function scanDirectory(dir, rootDir, extensions, routes, notFoundPages, isRoot = false) {
+  if (!fs.existsSync(dir)) return;
+  const entries = fs.readdirSync(dir, { withFileTypes: true });
+  for (const entry of entries) {
+    const fullPath = path.join(dir, entry.name);
+    if (entry.isDirectory()) {
+      if (entry.name === "node_modules" || entry.name === "assets" || entry.name.startsWith("_")) continue;
+      scanDirectory(fullPath, rootDir, extensions, routes, notFoundPages, false);
+    } else if (entry.isFile()) {
+      const ext = path.extname(entry.name);
+      const baseName = path.basename(entry.name, ext);
+      if (baseName === "404" && extensions.includes(ext)) {
+        const relativeParts = path.relative(rootDir, dir).split(path.sep).filter(Boolean);
+        const filteredParts = relativeParts.filter((p) => !isRouteGroup(p));
+        const pathPrefix = isRoot ? "" : "/" + filteredParts.join("/");
+        notFoundPages.push({ pathPrefix: pathPrefix || "", filePath: fullPath });
+      } else if (isRoot && baseName === "App" && extensions.includes(ext)) {
+        routes.push({ path: "/", filePath: fullPath, isDynamic: false, params: [] });
+      } else if (!isRoot && baseName === "index" && extensions.includes(ext)) {
+        const relativePath = path.relative(rootDir, path.dirname(fullPath));
+        const { routePath, params } = pathToRoute(relativePath, path.sep);
+        routes.push({ path: routePath, filePath: fullPath, isDynamic: params.length > 0, params });
+      }
+    }
+  }
+}
+function scanRoutes(rootDir, extensions) {
+  const routes = [];
+  const notFoundPages = [];
+  const absoluteRoot = path.isAbsolute(rootDir) ? rootDir : path.resolve(rootDir);
+  if (!fs.existsSync(absoluteRoot)) {
+    throw new Error(`Olova Router: Root directory does not exist: ${absoluteRoot}`);
+  }
+  scanDirectory(absoluteRoot, absoluteRoot, extensions, routes, notFoundPages, true);
+  routes.sort((a, b) => a.isDynamic !== b.isDynamic ? a.isDynamic ? 1 : -1 : a.path.localeCompare(b.path));
+  notFoundPages.sort((a, b) => b.pathPrefix.length - a.pathPrefix.length);
+  return { routes, notFoundPages };
+}
+function generateRouteTree(routes, notFoundPages, srcDir) {
+  const routeImports = routes.map((route, index) => {
+    const relativePath = "./" + path.relative(srcDir, route.component).replace(/\\/g, "/").replace(/\.tsx?$/, "");
+    if (route.hasDefault) {
+      return `import Route${index} from '${relativePath}';`;
+    } else if (route.namedExport) {
+      return `import { ${route.namedExport} as Route${index} } from '${relativePath}';`;
+    } else {
+      return `import Route${index} from '${relativePath}';`;
+    }
+  }).join("\n");
+  const notFoundImports = notFoundPages.map((nf, index) => {
+    const relativePath = "./" + path.relative(srcDir, nf.filePath).replace(/\\/g, "/").replace(/\.tsx?$/, "");
+    if (nf.hasDefault) {
+      return `import NotFound${index} from '${relativePath}';`;
+    } else if (nf.namedExport) {
+      return `import { ${nf.namedExport} as NotFound${index} } from '${relativePath}';`;
+    } else {
+      return `import NotFound${index} from '${relativePath}';`;
+    }
+  }).join("\n");
+  const routeObjects = routes.map((route, index) => {
+    return `  { path: '${route.path}', component: Route${index} }`;
+  }).join(",\n");
+  const notFoundObjects = notFoundPages.map((nf, index) => {
+    return `  { pathPrefix: '${nf.pathPrefix}', component: NotFound${index} }`;
+  }).join(",\n");
+  const routePaths = routes.length > 0 ? routes.map((r) => `'${r.path}'`).join(" | ") : "never";
+  const allImports = [routeImports, notFoundImports].filter(Boolean).join("\n");
+  return `// Auto-generated by olova-router - DO NOT EDIT
+// This file is auto-updated when you add/remove route folders
+
+import { createLink, OlovaRouter, useRouter, useParams, useSearchParams } from 'olova-router/router';
+${allImports}
+
+export const routes = [
+${routeObjects || ""}
+];
+
+export const notFoundPages = [
+${notFoundObjects || ""}
+];
+
+export type RoutePaths = ${routePaths};
+
+export const Link = createLink<RoutePaths>();
+export { OlovaRouter, useRouter, useParams, useSearchParams };
+export type { NotFoundPageConfig, SearchParams, SetSearchParamsOptions } from 'olova-router/router';
+`;
+}
+function olovaRouter(options = {}) {
+  const rootDir = options.rootDir || "src";
+  const extensions = options.extensions || [".tsx", ".ts"];
+  let config;
+  let absoluteRootDir;
+  let watcher = null;
+  function generateRouteTreeFile() {
+    const { routes, notFoundPages } = scanRoutes(absoluteRootDir, extensions);
+    const routeConfigs = routes.map((r) => {
+      const exportInfo = detectExportType(r.filePath);
+      return {
+        path: r.path,
+        component: r.filePath.replace(/\\/g, "/"),
+        params: r.params.length > 0 ? r.params : void 0,
+        hasDefault: exportInfo.hasDefault,
+        namedExport: exportInfo.namedExport
+      };
+    });
+    const notFoundConfigs = notFoundPages.map((nf) => {
+      const exportInfo = detectExportType(nf.filePath);
+      return {
+        pathPrefix: nf.pathPrefix,
+        filePath: nf.filePath.replace(/\\/g, "/"),
+        hasDefault: exportInfo.hasDefault,
+        namedExport: exportInfo.namedExport
+      };
+    });
+    const content = generateRouteTree(routeConfigs, notFoundConfigs, absoluteRootDir);
+    const treePath = path.resolve(absoluteRootDir, "route.tree.ts");
+    const existing = fs.existsSync(treePath) ? fs.readFileSync(treePath, "utf-8") : "";
+    if (existing !== content) {
+      fs.writeFileSync(treePath, content);
+      console.log("\x1B[32m[olova-router]\x1B[0m Route tree updated");
+    }
+  }
+  function startWatcher() {
+    if (watcher) return;
+    watcher = fs.watch(absoluteRootDir, { recursive: true }, (_eventType, filename) => {
+      if (!filename) return;
+      if (filename.includes("route.tree.ts")) return;
+      const isIndexFile = filename.endsWith("index.tsx") || filename.endsWith("index.ts");
+      const isAppFile = filename === "App.tsx" || filename === "App.ts";
+      const is404File = filename.endsWith("404.tsx") || filename.endsWith("404.ts");
+      const isDirectory = !filename.includes(".");
+      if (isIndexFile || isAppFile || is404File || isDirectory) {
+        setTimeout(() => generateRouteTreeFile(), 100);
+      }
+    });
+    console.log("\x1B[32m[olova-router]\x1B[0m Watching for route changes...");
+  }
+  return {
+    name: "olova-router",
+    configResolved(resolvedConfig) {
+      config = resolvedConfig;
+      absoluteRootDir = path.resolve(config.root, rootDir);
+    },
+    buildStart() {
+      generateRouteTreeFile();
+      if (config.command === "serve") {
+        startWatcher();
+      }
+    },
+    buildEnd() {
+      if (watcher) {
+        watcher.close();
+        watcher = null;
+      }
+    }
+  };
+}
+var src_default = olovaRouter;
+
+export { OlovaRouter, createLink, src_default as default, olovaRouter, useParams, useRouter, useSearchParams };

package/dist/router.d.ts

@@ -1 +1,50 @@
-declare module "olova-router";
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ComponentType, ReactNode } from 'react';
+
+interface Route {
+    path: string;
+    component: ComponentType;
+}
+/** 404 page configuration */
+interface NotFoundPageConfig {
+    pathPrefix: string;
+    component: ComponentType;
+}
+/** Search params type - values can be string or array for multi-value params */
+type SearchParams = Record<string, string | string[]>;
+/** Options for setSearchParams */
+interface SetSearchParamsOptions {
+    replace?: boolean;
+    merge?: boolean;
+}
+interface RouterContextType {
+    currentPath: string;
+    params: Record<string, string>;
+    searchParams: SearchParams;
+    navigate: (path: string) => void;
+    setSearchParams: (params: Record<string, string | string[] | null>, options?: SetSearchParamsOptions) => void;
+}
+/** Hook to access router context (navigate, currentPath) */
+declare function useRouter(): RouterContextType;
+/** Hook to access route params (e.g., :id from /users/:id) */
+declare function useParams<T extends Record<string, string> = Record<string, string>>(): T;
+/** Hook to read and update URL search params (query string) */
+declare function useSearchParams(): [
+    SearchParams,
+    (params: Record<string, string | string[] | null>, options?: SetSearchParamsOptions) => void
+];
+interface OlovaRouterProps {
+    routes: Route[];
+    notFoundPages?: NotFoundPageConfig[];
+    notFound?: ReactNode;
+}
+/** Main router component - wrap your app with this */
+declare function OlovaRouter({ routes, notFoundPages, notFound }: OlovaRouterProps): react_jsx_runtime.JSX.Element;
+/** Creates a type-safe Link component for the given route paths */
+declare function createLink<T extends string>(): ({ href, children, className }: {
+    href: T;
+    children: ReactNode;
+    className?: string;
+}) => react_jsx_runtime.JSX.Element;
+
+export { type NotFoundPageConfig, OlovaRouter, type SearchParams, type SetSearchParamsOptions, createLink, useParams, useRouter, useSearchParams };

package/dist/router.js

@@ -0,0 +1,165 @@
+import { createContext, useContext, useState, useEffect } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+// src/router.tsx
+function parseSearchParams(search) {
+  const params = {};
+  const urlParams = new URLSearchParams(search);
+  for (const key of urlParams.keys()) {
+    const values = urlParams.getAll(key);
+    params[key] = values.length === 1 ? values[0] : values;
+  }
+  return params;
+}
+function buildSearchString(params) {
+  const urlParams = new URLSearchParams();
+  for (const [key, value] of Object.entries(params)) {
+    if (value === null || value === void 0) continue;
+    if (Array.isArray(value)) {
+      value.forEach((v) => urlParams.append(key, v));
+    } else {
+      urlParams.set(key, value);
+    }
+  }
+  const str = urlParams.toString();
+  return str ? `?${str}` : "";
+}
+var RouterContext = createContext(null);
+function useRouter() {
+  const context = useContext(RouterContext);
+  if (!context) throw new Error("useRouter must be used within OlovaRouter");
+  return context;
+}
+function useParams() {
+  const context = useContext(RouterContext);
+  return context?.params || {};
+}
+function useSearchParams() {
+  const context = useContext(RouterContext);
+  if (!context) throw new Error("useSearchParams must be used within OlovaRouter");
+  return [context.searchParams, context.setSearchParams];
+}
+function matchRoute(pattern, pathname) {
+  const patternParts = pattern.split("/").filter(Boolean);
+  const pathParts = pathname.split("/").filter(Boolean);
+  const params = {};
+  for (let i = 0; i < patternParts.length; i++) {
+    const patternPart = patternParts[i];
+    const pathPart = pathParts[i];
+    if (patternPart === "*") {
+      params["slug"] = pathParts.slice(i).join("/");
+      return { match: true, params };
+    }
+    if (pathPart === void 0) {
+      return { match: false, params: {} };
+    }
+    if (patternPart.startsWith(":")) {
+      params[patternPart.slice(1)] = pathPart;
+    } else if (patternPart !== pathPart) {
+      return { match: false, params: {} };
+    }
+  }
+  if (pathParts.length > patternParts.length) {
+    return { match: false, params: {} };
+  }
+  return { match: true, params };
+}
+function findNotFoundPage(path, notFoundPages) {
+  if (!notFoundPages || notFoundPages.length === 0) return null;
+  const sorted = [...notFoundPages].sort(
+    (a, b) => b.pathPrefix.length - a.pathPrefix.length
+  );
+  for (const nf of sorted) {
+    if (nf.pathPrefix === "") {
+      return nf.component;
+    }
+    if (path === nf.pathPrefix || path.startsWith(nf.pathPrefix + "/")) {
+      return nf.component;
+    }
+  }
+  return null;
+}
+function OlovaRouter({ routes, notFoundPages = [], notFound = /* @__PURE__ */ jsx("div", { children: "404 - Not Found" }) }) {
+  const [currentPath, setCurrentPath] = useState(window.location.pathname);
+  const [searchParams, setSearchParamsState] = useState(
+    () => parseSearchParams(window.location.search)
+  );
+  useEffect(() => {
+    const onPopState = () => {
+      setCurrentPath(window.location.pathname);
+      setSearchParamsState(parseSearchParams(window.location.search));
+    };
+    window.addEventListener("popstate", onPopState);
+    return () => window.removeEventListener("popstate", onPopState);
+  }, []);
+  const navigate = (path) => {
+    window.history.pushState({}, "", path);
+    setCurrentPath(path.split("?")[0]);
+    setSearchParamsState(parseSearchParams(path.includes("?") ? path.split("?")[1] : ""));
+  };
+  const setSearchParams = (newParams, options = {}) => {
+    const { replace = false, merge = false } = options;
+    let finalParams;
+    if (merge) {
+      finalParams = { ...searchParams, ...newParams };
+      for (const key of Object.keys(finalParams)) {
+        if (finalParams[key] === null) {
+          delete finalParams[key];
+        }
+      }
+    } else {
+      finalParams = newParams;
+    }
+    const searchString = buildSearchString(finalParams);
+    const newUrl = currentPath + searchString;
+    if (replace) {
+      window.history.replaceState({}, "", newUrl);
+    } else {
+      window.history.pushState({}, "", newUrl);
+    }
+    setSearchParamsState(parseSearchParams(searchString));
+  };
+  let Component = null;
+  let params = {};
+  const sortedRoutes = [...routes].sort((a, b) => {
+    const aHasCatchAll = a.path.includes("*");
+    const bHasCatchAll = b.path.includes("*");
+    const aHasDynamic = a.path.includes(":");
+    const bHasDynamic = b.path.includes(":");
+    if (aHasCatchAll && !bHasCatchAll) return 1;
+    if (!aHasCatchAll && bHasCatchAll) return -1;
+    if (aHasDynamic && !bHasDynamic) return 1;
+    if (!aHasDynamic && bHasDynamic) return -1;
+    return b.path.length - a.path.length;
+  });
+  for (const route of sortedRoutes) {
+    if (route.path === "/" && currentPath === "/") {
+      Component = route.component;
+      break;
+    }
+    const result = matchRoute(route.path, currentPath);
+    if (result.match) {
+      Component = route.component;
+      params = result.params;
+      break;
+    }
+  }
+  if (!Component) {
+    const NotFoundComponent = findNotFoundPage(currentPath, notFoundPages);
+    if (NotFoundComponent) {
+      Component = NotFoundComponent;
+    }
+  }
+  return /* @__PURE__ */ jsx(RouterContext.Provider, { value: { currentPath, params, searchParams, navigate, setSearchParams }, children: Component ? /* @__PURE__ */ jsx(Component, {}) : notFound });
+}
+function createLink() {
+  return function Link({ href, children, className }) {
+    const { navigate } = useRouter();
+    return /* @__PURE__ */ jsx("a", { href, className, onClick: (e) => {
+      e.preventDefault();
+      navigate(href);
+    }, children });
+  };
+}
+
+export { OlovaRouter, createLink, useParams, useRouter, useSearchParams };

package/package.json

@@ -1,15 +1,56 @@
-{
-  "name": "olova-router",
-  "version": "1.0.1",
-  "main": "dist/olova-router.js",
-  "keywords": [
-    "javascript",
-    "framework",
-    "router",
-    "olova-router",
-    "olovajs"
-  ],
-  "author": "Nazmul Hossain",
-  "license": "ISC",
-  "description": "olova-router for olovaJs"
-}
+{
+  "name": "olova-router",
+  "version": "1.0.3",
+  "description": "Next.js-style folder-based routing for React + Vite applications",
+  "author": "",
+  "license": "MIT",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./router": {
+      "import": "./dist/router.js",
+      "types": "./dist/router.d.ts"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "react",
+    "router",
+    "vite",
+    "vite-plugin",
+    "file-based-routing",
+    "folder-routing",
+    "nextjs-style"
+  ],
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "vite": ">=5.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.0.0",
+    "@types/react": "^18.0.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.0.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": ""
+  },
+  "bugs": {
+    "url": ""
+  },
+  "homepage": ""
+}

package/dist/olova-router.js

@@ -1,249 +0,0 @@
-/** @jsx Olova.createElement */
-import Olova from "Olova";
-
-const NavigationContext = Olova.createContext({
-  basename: "",
-  navigator: null,
-  static: false,
-});
-
-const LocationContext = Olova.createContext({
-  location: {
-    pathname: window.location.pathname,
-    search: window.location.search,
-    hash: window.location.hash,
-    state: null,
-    key: "",
-  },
-});
-
-const RouteContext = Olova.createContext({
-  params: {},
-});
-
-function createLocation(path) {
-  const [pathname, search] = path.split("?");
-  return {
-    pathname: pathname || "/",
-    search: search ? `?${search}` : "",
-    hash: window.location.hash || "",
-    state: null,
-    key: Math.random().toString(36).slice(2),
-  };
-}
-
-export function BrowserRouter({ children, basename = "" }) {
-  const [location, setLocation] = Olova.State(
-    createLocation(
-      window.location.pathname + window.location.search + window.location.hash
-    )
-  );
-
-  const navigator = {
-    push(to) {
-      const newLocation = createLocation(to);
-      window.history.pushState(null, "", to);
-      setLocation(newLocation);
-    },
-    replace(to) {
-      const newLocation = createLocation(to);
-      window.history.replaceState(null, "", to);
-      setLocation(newLocation);
-    },
-    go(delta) {
-      window.history.go(delta);
-    },
-    back() {
-      window.history.back();
-    },
-    forward() {
-      window.history.forward();
-    },
-  };
-
-  Olova.Effect(() => {
-    const handlePopState = () => {
-      setLocation(
-        createLocation(
-          window.location.pathname +
-            window.location.search +
-            window.location.hash
-        )
-      );
-    };
-    window.addEventListener("popstate", handlePopState);
-    return () => window.removeEventListener("popstate", handlePopState);
-  }, []);
-
-  const navigationValue = Olova.Memo(
-    () => ({ navigator, basename }),
-    [navigator, basename]
-  );
-  const locationValue = Olova.Memo(() => ({ location }), [location]);
-
-  return Olova.createElement(
-    NavigationContext.Provider,
-    { value: navigationValue },
-    Olova.createElement(
-      LocationContext.Provider,
-      { value: locationValue },
-      children
-    )
-  );
-}
-
-export function Routes({ children }) {
-  const { location } = Olova.Context(LocationContext);
-  const { basename } = Olova.Context(NavigationContext);
-
-  let element = null;
-  let matchParams = {};
-
-  const childrenArray = Array.isArray(children) ? children : [children];
-  const validChildren = childrenArray.filter((child) => child != null);
-
-  for (let i = 0; i < validChildren.length; i++) {
-    const child = validChildren[i];
-    if (child.props) {
-      const path = basename + (child.props.path || "");
-      const match = matchPath(path, location.pathname);
-      if (match) {
-        matchParams = match.params;
-        element =
-          typeof child.props.element === "function"
-            ? Olova.createElement(child.props.element, { params: match.params })
-            : child.props.element;
-        break;
-      }
-    }
-  }
-
-  return element;
-}
-
-export function Route({ path, element }) {
-  return Olova.createElement("route", { path, element });
-}
-
-export function Link({
-  to,
-  children,
-  className = "",
-  activeClassName = "",
-  ...props
-}) {
-  const { navigator, basename } = Olova.Context(NavigationContext);
-  const { location } = Olova.Context(LocationContext);
-
-  const targetPath = basename + to;
-  const isActive = location.pathname === targetPath;
-  const finalClassName = isActive
-    ? `${className} ${activeClassName}`.trim()
-    : className;
-
-  const handleClick = (event) => {
-    event.preventDefault();
-    navigator.push(targetPath);
-  };
-
-  return Olova.createElement(
-    "a",
-    {
-      href: targetPath,
-      onClick: handleClick,
-      className: finalClassName,
-      ...props,
-    },
-    children
-  );
-}
-
-function matchPath(pattern, pathname) {
-  if (pattern === pathname || pattern === "*") return { params: {} };
-  if (pattern === "/" && (pathname === "" || pathname === "/"))
-    return { params: {} };
-
-  const patternSegments = pattern.split("/").filter(Boolean);
-  const pathnameSegments = pathname.split("/").filter(Boolean);
-
-  if (patternSegments.length !== pathnameSegments.length) return null;
-
-  const params = {};
-
-  for (let i = 0; i < patternSegments.length; i++) {
-    const patternSegment = patternSegments[i];
-    const pathnameSegment = pathnameSegments[i];
-
-    if (patternSegment.startsWith(":")) {
-      const paramName = patternSegment.slice(1);
-      params[paramName] = decodeURIComponent(pathnameSegment);
-    } else if (patternSegment !== pathnameSegment) {
-      return null;
-    }
-  }
-
-  return { params };
-}
-
-export function useSearchParams() {
-  const { location } = useLocation();
-  const searchParams = new URLSearchParams(location.search);
-
-  const setSearchParams = (newParams) => {
-    const navigate = useNavigate();
-    const newSearch = new URLSearchParams(newParams).toString();
-    navigate(`${location.pathname}?${newSearch}${location.hash}`);
-  };
-
-  return [searchParams, setSearchParams];
-}
-
-export function useNavigate() {
-  const { navigator } = Olova.Context(NavigationContext);
-  return Olova.Callback(
-    (to, options = {}) => {
-      if (options.replace) {
-        navigator.replace(to);
-      } else {
-        navigator.push(to);
-      }
-    },
-    [navigator]
-  );
-}
-
-export function useLocation() {
-  const { location } = Olova.Context(LocationContext);
-  return location;
-}
-
-export function useParams() {
-  const { params } = Olova.Context(RouteContext);
-  return params;
-}
-
-export function Navigate({ to, replace = false }) {
-  const navigate = useNavigate();
-  Olova.Effect(() => {
-    navigate(to, { replace });
-  }, [navigate, to, replace]);
-  return null;
-}
-
-export function Outlet() {
-  const { outlet } = Olova.Context(RouteContext);
-  return outlet || null;
-}
-
-export default {
-  BrowserRouter,
-  Routes,
-  Route,
-  Link,
-  Navigate,
-  Outlet,
-  useNavigate,
-  useLocation,
-  useParams,
-  useSearchParams,
-};