olova-router 1.0.3 → 1.0.4

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import { Plugin } from 'vite';
-export { NotFoundPageConfig, OlovaRouter, SearchParams, SetSearchParamsOptions, createLink, useParams, useRouter, useSearchParams } from './router.js';
+export { LayoutRoute, NotFoundPageConfig, OlovaRouter, Outlet, SearchParams, SetSearchParamsOptions, createLink, useParams, useRouter, useSearchParams } from './router.js';
 import 'react/jsx-runtime';
 import 'react';
 

package/dist/index.js

@@ -1,7 +1,7 @@
 import path from 'path';
 import fs from 'fs';
-import { createContext, useContext, useState, useEffect } from 'react';
-import { jsx } from 'react/jsx-runtime';
+import { createContext, useContext, useState, useEffect, useMemo } from 'react';
+import { jsx, Fragment } from 'react/jsx-runtime';
 
 // src/index.ts
 function parseSearchParams(search) {
@@ -27,6 +27,7 @@ function buildSearchString(params) {
   return str ? `?${str}` : "";
 }
 var RouterContext = createContext(null);
+var OutletContext = createContext(null);
 function useRouter() {
   const context = useContext(RouterContext);
   if (!context) throw new Error("useRouter must be used within OlovaRouter");
@@ -41,6 +42,12 @@ function useSearchParams() {
   if (!context) throw new Error("useSearchParams must be used within OlovaRouter");
   return [context.searchParams, context.setSearchParams];
 }
+function Outlet() {
+  const context = useContext(OutletContext);
+  if (!context?.component) return null;
+  const Component = context.component;
+  return /* @__PURE__ */ jsx(Component, {});
+}
 function matchRoute(pattern, pathname) {
   const patternParts = pattern.split("/").filter(Boolean);
   const pathParts = pathname.split("/").filter(Boolean);
@@ -66,6 +73,10 @@ function matchRoute(pattern, pathname) {
   }
   return { match: true, params };
 }
+function matchLayoutScope(layoutPath, pathname) {
+  if (layoutPath === "/") return true;
+  return pathname === layoutPath || pathname.startsWith(layoutPath + "/");
+}
 function findNotFoundPage(path2, notFoundPages) {
   if (!notFoundPages || notFoundPages.length === 0) return null;
   const sorted = [...notFoundPages].sort(
@@ -81,7 +92,7 @@ function findNotFoundPage(path2, notFoundPages) {
   }
   return null;
 }
-function OlovaRouter({ routes, notFoundPages = [], notFound = /* @__PURE__ */ jsx("div", { children: "404 - Not Found" }) }) {
+function OlovaRouter({ routes, layouts = [], notFoundPages = [], notFound = /* @__PURE__ */ jsx("div", { children: "404 - Not Found" }) }) {
   const [currentPath, setCurrentPath] = useState(window.location.pathname);
   const [searchParams, setSearchParamsState] = useState(
     () => parseSearchParams(window.location.search)
@@ -121,38 +132,56 @@ function OlovaRouter({ routes, notFoundPages = [], notFound = /* @__PURE__ */ js
     }
     setSearchParamsState(parseSearchParams(searchString));
   };
-  let Component = null;
+  const sortedRoutes = useMemo(() => {
+    return [...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;
+    });
+  }, [routes]);
+  const matchingLayouts = useMemo(() => {
+    return layouts.filter((layout) => matchLayoutScope(layout.path, currentPath)).sort((a, b) => a.path.length - b.path.length);
+  }, [layouts, currentPath]);
+  let MatchedComponent = 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;
+      MatchedComponent = route.component;
       break;
     }
     const result = matchRoute(route.path, currentPath);
     if (result.match) {
-      Component = route.component;
+      MatchedComponent = route.component;
       params = result.params;
       break;
     }
   }
-  if (!Component) {
+  if (!MatchedComponent) {
     const NotFoundComponent = findNotFoundPage(currentPath, notFoundPages);
     if (NotFoundComponent) {
-      Component = NotFoundComponent;
+      MatchedComponent = NotFoundComponent;
     }
   }
-  return /* @__PURE__ */ jsx(RouterContext.Provider, { value: { currentPath, params, searchParams, navigate, setSearchParams }, children: Component ? /* @__PURE__ */ jsx(Component, {}) : notFound });
+  const renderContent = () => {
+    const content = MatchedComponent ? /* @__PURE__ */ jsx(MatchedComponent, {}) : notFound;
+    if (matchingLayouts.length === 0) {
+      return content;
+    }
+    let result = content;
+    for (let i = matchingLayouts.length - 1; i >= 0; i--) {
+      const Layout = matchingLayouts[i].layout;
+      const wrapped = result;
+      result = /* @__PURE__ */ jsx(OutletContext.Provider, { value: { component: () => /* @__PURE__ */ jsx(Fragment, { children: wrapped }) }, children: /* @__PURE__ */ jsx(Layout, {}) });
+    }
+    return result;
+  };
+  return /* @__PURE__ */ jsx(RouterContext.Provider, { value: { currentPath, params, searchParams, navigate, setSearchParams }, children: renderContent() });
 }
 function createLink() {
   return function Link({ href, children, className }) {
@@ -166,7 +195,7 @@ function createLink() {
 
 // src/index.ts
 function parseDynamicSegment(segment) {
-  if (segment === "$" || segment.match(/^\[\.\.\..+\]$/)) {
+  if (segment === "$" || segment.match(/^\[\.\.\.(.+)\]$/)) {
     const paramName = segment === "$" ? "slug" : segment.match(/^\[\.\.\.(.+)\]$/)?.[1] || "slug";
     return { isDynamic: true, paramName, isCatchAll: true };
   }
@@ -224,18 +253,25 @@ function detectExportType(filePath) {
     return { hasDefault: true, namedExport: null };
   }
 }
-function scanDirectory(dir, rootDir, extensions, routes, notFoundPages, isRoot = false) {
+function scanDirectory(dir, rootDir, extensions, routes, notFoundPages, layouts, 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);
+      scanDirectory(fullPath, rootDir, extensions, routes, notFoundPages, layouts, false);
     } else if (entry.isFile()) {
       const ext = path.extname(entry.name);
       const baseName = path.basename(entry.name, ext);
-      if (baseName === "404" && extensions.includes(ext)) {
+      if (baseName === "_layout" && extensions.includes(ext)) {
+        const relativePath = path.relative(rootDir, dir);
+        const { routePath } = pathToRoute(relativePath, path.sep);
+        layouts.push({
+          path: isRoot ? "/" : routePath,
+          filePath: fullPath
+        });
+      } else 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("/");
@@ -253,16 +289,18 @@ function scanDirectory(dir, rootDir, extensions, routes, notFoundPages, isRoot =
 function scanRoutes(rootDir, extensions) {
   const routes = [];
   const notFoundPages = [];
+  const layouts = [];
   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);
+  scanDirectory(absoluteRoot, absoluteRoot, extensions, routes, notFoundPages, layouts, 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 };
+  layouts.sort((a, b) => a.path.length - b.path.length);
+  return { routes, notFoundPages, layouts };
 }
-function generateRouteTree(routes, notFoundPages, srcDir) {
+function generateRouteTree(routes, notFoundPages, layouts, srcDir) {
   const routeImports = routes.map((route, index) => {
     const relativePath = "./" + path.relative(srcDir, route.component).replace(/\\/g, "/").replace(/\.tsx?$/, "");
     if (route.hasDefault) {
@@ -283,18 +321,31 @@ function generateRouteTree(routes, notFoundPages, srcDir) {
       return `import NotFound${index} from '${relativePath}';`;
     }
   }).join("\n");
+  const layoutImports = layouts.map((layout, index) => {
+    const relativePath = "./" + path.relative(srcDir, layout.filePath).replace(/\\/g, "/").replace(/\.tsx?$/, "");
+    if (layout.hasDefault) {
+      return `import Layout${index} from '${relativePath}';`;
+    } else if (layout.namedExport) {
+      return `import { ${layout.namedExport} as Layout${index} } from '${relativePath}';`;
+    } else {
+      return `import Layout${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 layoutObjects = layouts.map((layout, index) => {
+    return `  { path: '${layout.path}', layout: Layout${index}, children: [] }`;
+  }).join(",\n");
   const routePaths = routes.length > 0 ? routes.map((r) => `'${r.path}'`).join(" | ") : "never";
-  const allImports = [routeImports, notFoundImports].filter(Boolean).join("\n");
+  const allImports = [routeImports, notFoundImports, layoutImports].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';
+import { createLink, OlovaRouter, useRouter, useParams, useSearchParams, Outlet } from 'olova-router/router';
 ${allImports}
 
 export const routes = [
@@ -305,11 +356,15 @@ export const notFoundPages = [
 ${notFoundObjects || ""}
 ];
 
+export const layouts = [
+${layoutObjects || ""}
+];
+
 export type RoutePaths = ${routePaths};
 
 export const Link = createLink<RoutePaths>();
-export { OlovaRouter, useRouter, useParams, useSearchParams };
-export type { NotFoundPageConfig, SearchParams, SetSearchParamsOptions } from 'olova-router/router';
+export { OlovaRouter, useRouter, useParams, useSearchParams, Outlet };
+export type { NotFoundPageConfig, SearchParams, SetSearchParamsOptions, LayoutRoute } from 'olova-router/router';
 `;
 }
 function olovaRouter(options = {}) {
@@ -319,7 +374,7 @@ function olovaRouter(options = {}) {
   let absoluteRootDir;
   let watcher = null;
   function generateRouteTreeFile() {
-    const { routes, notFoundPages } = scanRoutes(absoluteRootDir, extensions);
+    const { routes, notFoundPages, layouts } = scanRoutes(absoluteRootDir, extensions);
     const routeConfigs = routes.map((r) => {
       const exportInfo = detectExportType(r.filePath);
       return {
@@ -339,7 +394,16 @@ function olovaRouter(options = {}) {
         namedExport: exportInfo.namedExport
       };
     });
-    const content = generateRouteTree(routeConfigs, notFoundConfigs, absoluteRootDir);
+    const layoutConfigs = layouts.map((l) => {
+      const exportInfo = detectExportType(l.filePath);
+      return {
+        path: l.path,
+        filePath: l.filePath.replace(/\\/g, "/"),
+        hasDefault: exportInfo.hasDefault,
+        namedExport: exportInfo.namedExport
+      };
+    });
+    const content = generateRouteTree(routeConfigs, notFoundConfigs, layoutConfigs, absoluteRootDir);
     const treePath = path.resolve(absoluteRootDir, "route.tree.ts");
     const existing = fs.existsSync(treePath) ? fs.readFileSync(treePath, "utf-8") : "";
     if (existing !== content) {
@@ -349,14 +413,17 @@ function olovaRouter(options = {}) {
   }
   function startWatcher() {
     if (watcher) return;
-    watcher = fs.watch(absoluteRootDir, { recursive: true }, (_eventType, filename) => {
+    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 isLayoutFile = filename.endsWith("_layout.tsx") || filename.endsWith("_layout.ts");
       const isDirectory = !filename.includes(".");
-      if (isIndexFile || isAppFile || is404File || isDirectory) {
+      const isDynamicSegment = filename.includes("$") || filename.includes("[");
+      const isRenameEvent = eventType === "rename";
+      if (isIndexFile || isAppFile || is404File || isLayoutFile || isDirectory || isDynamicSegment || isRenameEvent) {
         setTimeout(() => generateRouteTreeFile(), 100);
       }
     });
@@ -384,4 +451,4 @@ function olovaRouter(options = {}) {
 }
 var src_default = olovaRouter;
 
-export { OlovaRouter, createLink, src_default as default, olovaRouter, useParams, useRouter, useSearchParams };
+export { OlovaRouter, Outlet, createLink, src_default as default, olovaRouter, useParams, useRouter, useSearchParams };

package/dist/router.d.ts

@@ -5,6 +5,12 @@ interface Route {
     path: string;
     component: ComponentType;
 }
+/** Layout route for nested layouts */
+interface LayoutRoute {
+    path: string;
+    layout: ComponentType;
+    children: Route[];
+}
 /** 404 page configuration */
 interface NotFoundPageConfig {
     pathPrefix: string;
@@ -33,18 +39,32 @@ declare function useSearchParams(): [
     SearchParams,
     (params: Record<string, string | string[] | null>, options?: SetSearchParamsOptions) => void
 ];
+/**
+ * Outlet component - renders the matched child route
+ * Use this in _layout.tsx to render nested routes
+ */
+declare function Outlet(): react_jsx_runtime.JSX.Element | null;
 interface OlovaRouterProps {
     routes: Route[];
+    layouts?: LayoutRoute[];
     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 OlovaRouter({ routes, layouts, notFoundPages, notFound }: OlovaRouterProps): react_jsx_runtime.JSX.Element;
+/**
+ * Type utilities for resolving dynamic route paths
+ * Transforms '/users/:id' into accepting '/users/anything'
+ */
+type ResolveSegment<S extends string> = S extends `:${string}` ? string : S extends '*' ? string : S;
+type ResolvePathSegments<Path extends string> = Path extends `${infer Segment}/${infer Rest}` ? `${ResolveSegment<Segment>}/${ResolvePathSegments<Rest>}` : ResolveSegment<Path>;
+type ResolveRoutePath<Path extends string> = Path extends `${infer Base}/*` ? `${ResolvePathSegments<Base>}/${string}` : ResolvePathSegments<Path>;
+type ResolveRoutes<T extends string> = T extends string ? ResolveRoutePath<T> : never;
+/** Creates a type-safe Link component that accepts resolved dynamic paths */
 declare function createLink<T extends string>(): ({ href, children, className }: {
-    href: T;
+    href: ResolveRoutes<T>;
     children: ReactNode;
     className?: string;
 }) => react_jsx_runtime.JSX.Element;
 
-export { type NotFoundPageConfig, OlovaRouter, type SearchParams, type SetSearchParamsOptions, createLink, useParams, useRouter, useSearchParams };
+export { type LayoutRoute, type NotFoundPageConfig, OlovaRouter, Outlet, type ResolveRoutePath, type SearchParams, type SetSearchParamsOptions, createLink, useParams, useRouter, useSearchParams };

package/dist/router.js

@@ -1,5 +1,5 @@
-import { createContext, useContext, useState, useEffect } from 'react';
-import { jsx } from 'react/jsx-runtime';
+import { createContext, useContext, useState, useEffect, useMemo } from 'react';
+import { jsx, Fragment } from 'react/jsx-runtime';
 
 // src/router.tsx
 function parseSearchParams(search) {
@@ -25,6 +25,7 @@ function buildSearchString(params) {
   return str ? `?${str}` : "";
 }
 var RouterContext = createContext(null);
+var OutletContext = createContext(null);
 function useRouter() {
   const context = useContext(RouterContext);
   if (!context) throw new Error("useRouter must be used within OlovaRouter");
@@ -39,6 +40,12 @@ function useSearchParams() {
   if (!context) throw new Error("useSearchParams must be used within OlovaRouter");
   return [context.searchParams, context.setSearchParams];
 }
+function Outlet() {
+  const context = useContext(OutletContext);
+  if (!context?.component) return null;
+  const Component = context.component;
+  return /* @__PURE__ */ jsx(Component, {});
+}
 function matchRoute(pattern, pathname) {
   const patternParts = pattern.split("/").filter(Boolean);
   const pathParts = pathname.split("/").filter(Boolean);
@@ -64,6 +71,10 @@ function matchRoute(pattern, pathname) {
   }
   return { match: true, params };
 }
+function matchLayoutScope(layoutPath, pathname) {
+  if (layoutPath === "/") return true;
+  return pathname === layoutPath || pathname.startsWith(layoutPath + "/");
+}
 function findNotFoundPage(path, notFoundPages) {
   if (!notFoundPages || notFoundPages.length === 0) return null;
   const sorted = [...notFoundPages].sort(
@@ -79,7 +90,7 @@ function findNotFoundPage(path, notFoundPages) {
   }
   return null;
 }
-function OlovaRouter({ routes, notFoundPages = [], notFound = /* @__PURE__ */ jsx("div", { children: "404 - Not Found" }) }) {
+function OlovaRouter({ routes, layouts = [], notFoundPages = [], notFound = /* @__PURE__ */ jsx("div", { children: "404 - Not Found" }) }) {
   const [currentPath, setCurrentPath] = useState(window.location.pathname);
   const [searchParams, setSearchParamsState] = useState(
     () => parseSearchParams(window.location.search)
@@ -119,38 +130,56 @@ function OlovaRouter({ routes, notFoundPages = [], notFound = /* @__PURE__ */ js
     }
     setSearchParamsState(parseSearchParams(searchString));
   };
-  let Component = null;
+  const sortedRoutes = useMemo(() => {
+    return [...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;
+    });
+  }, [routes]);
+  const matchingLayouts = useMemo(() => {
+    return layouts.filter((layout) => matchLayoutScope(layout.path, currentPath)).sort((a, b) => a.path.length - b.path.length);
+  }, [layouts, currentPath]);
+  let MatchedComponent = 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;
+      MatchedComponent = route.component;
       break;
     }
     const result = matchRoute(route.path, currentPath);
     if (result.match) {
-      Component = route.component;
+      MatchedComponent = route.component;
       params = result.params;
       break;
     }
   }
-  if (!Component) {
+  if (!MatchedComponent) {
     const NotFoundComponent = findNotFoundPage(currentPath, notFoundPages);
     if (NotFoundComponent) {
-      Component = NotFoundComponent;
+      MatchedComponent = NotFoundComponent;
     }
   }
-  return /* @__PURE__ */ jsx(RouterContext.Provider, { value: { currentPath, params, searchParams, navigate, setSearchParams }, children: Component ? /* @__PURE__ */ jsx(Component, {}) : notFound });
+  const renderContent = () => {
+    const content = MatchedComponent ? /* @__PURE__ */ jsx(MatchedComponent, {}) : notFound;
+    if (matchingLayouts.length === 0) {
+      return content;
+    }
+    let result = content;
+    for (let i = matchingLayouts.length - 1; i >= 0; i--) {
+      const Layout = matchingLayouts[i].layout;
+      const wrapped = result;
+      result = /* @__PURE__ */ jsx(OutletContext.Provider, { value: { component: () => /* @__PURE__ */ jsx(Fragment, { children: wrapped }) }, children: /* @__PURE__ */ jsx(Layout, {}) });
+    }
+    return result;
+  };
+  return /* @__PURE__ */ jsx(RouterContext.Provider, { value: { currentPath, params, searchParams, navigate, setSearchParams }, children: renderContent() });
 }
 function createLink() {
   return function Link({ href, children, className }) {
@@ -162,4 +191,4 @@ function createLink() {
   };
 }
 
-export { OlovaRouter, createLink, useParams, useRouter, useSearchParams };
+export { OlovaRouter, Outlet, createLink, useParams, useRouter, useSearchParams };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "olova-router",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "Next.js-style folder-based routing for React + Vite applications",
   "author": "",
   "license": "MIT",