router-kit 2.0.0 → 2.0.1

package/dist/context/RouterProvider.js

@@ -17,6 +17,39 @@ const validateUrl = (url) => {
         return false;
     }
 };
+/**
+ * Normalize path to string (handles array paths)
+ * Preserves '/' as a special case for root path
+ */
+const normalizePath = (path) => {
+    if (Array.isArray(path)) {
+        return path
+            .map((p) => {
+            // Keep "/" as empty string to represent root
+            if (p === "/")
+                return "";
+            return p.startsWith("/") ? p.slice(1) : p;
+        })
+            .join("|");
+    }
+    // Keep "/" as empty string to represent root
+    if (path === "/")
+        return "";
+    return path.startsWith("/") ? path.slice(1) : path;
+};
+/**
+ * Get the first path from a path (string or array)
+ */
+const getFirstPath = (path) => {
+    if (Array.isArray(path)) {
+        return path[0] || "";
+    }
+    // Handle pipe-separated paths (already normalized)
+    if (path.includes("|")) {
+        return path.split("|")[0];
+    }
+    return path;
+};
 /**
  * Creates a unique key for location tracking
  */
@@ -48,8 +81,15 @@ const getCurrentLocation = () => {
  * Extracts params from a path using a pattern
  */
 const extractParams = (pattern, pathname) => {
-    const patternParts = pattern.split("/").filter(Boolean);
-    const pathParts = pathname.split("/").filter(Boolean);
+    // Special case: root path matching
+    const normalizedPattern = pattern === "/" ? "" : pattern;
+    const normalizedPathname = pathname === "/" ? "" : pathname;
+    const patternParts = normalizedPattern.split("/").filter(Boolean);
+    const pathParts = normalizedPathname.split("/").filter(Boolean);
+    // Both empty means root path match
+    if (patternParts.length === 0 && pathParts.length === 0) {
+        return {};
+    }
     if (patternParts.length !== pathParts.length) {
         // Check for catch-all pattern
         const hasCatchAll = patternParts.some((p) => p.startsWith("*"));
@@ -86,6 +126,168 @@ const extractParams = (pattern, pathname) => {
     }
     return params;
 };
+/**
+ * Match a single path pattern against current pathname (pure function)
+ */
+const matchPathPattern = (routePattern, currentPath) => {
+    const patterns = routePattern.split("|");
+    for (const pat of patterns) {
+        // Handle root path pattern
+        const normalizedPat = pat === "" ? "/" : pat;
+        const extractedParams = extractParams(normalizedPat, currentPath);
+        if (extractedParams !== null) {
+            return { match: true, params: extractedParams, pattern: normalizedPat };
+        }
+    }
+    return null;
+};
+/**
+ * Pure function to match routes and return result without side effects
+ */
+const matchRoutes = (routesList, currentPath, parentPath = "/", searchString = "", collectedMatches = []) => {
+    const staticRoutes = [];
+    const dynamicRoutes = [];
+    const catchAllRoutes = [];
+    let page404Component = null;
+    for (const route of routesList) {
+        const pathArray = Array.isArray(route.path)
+            ? route.path
+            : route.path.includes("|")
+                ? route.path.split("|")
+                : [route.path];
+        const is404 = pathArray.some((p) => p === "404" || p === "/404");
+        if (is404) {
+            page404Component = route.component;
+            continue;
+        }
+        const hasCatchAll = pathArray.some((p) => p.includes("*"));
+        const hasDynamicParams = pathArray.some((p) => p.includes(":"));
+        if (hasCatchAll) {
+            catchAllRoutes.push(route);
+        }
+        else if (hasDynamicParams) {
+            dynamicRoutes.push(route);
+        }
+        else {
+            staticRoutes.push(route);
+        }
+    }
+    // Priority: static > dynamic > catch-all
+    const orderedRoutes = [...staticRoutes, ...dynamicRoutes, ...catchAllRoutes];
+    for (const route of orderedRoutes) {
+        const normalizedRoutePath = normalizePath(route.path);
+        const firstPath = getFirstPath(route.path);
+        // Handle root path correctly
+        const fullPath = firstPath === "/" || firstPath === ""
+            ? parentPath
+            : join(parentPath, `/${firstPath}`);
+        // Build full pattern for matching (handles multiple paths)
+        const fullPattern = normalizedRoutePath.includes("|")
+            ? normalizedRoutePath
+                .split("|")
+                .map((p) => {
+                // Handle empty string (root path) correctly
+                if (p === "")
+                    return parentPath;
+                return join(parentPath, `/${p}`);
+            })
+                .join("|")
+            : fullPath;
+        const matchResult = matchPathPattern(fullPattern, currentPath);
+        if (matchResult) {
+            // Handle redirects
+            if (route.redirectTo) {
+                return {
+                    component: null,
+                    pattern: matchResult.pattern,
+                    params: matchResult.params,
+                    matches: collectedMatches,
+                    meta: null,
+                    redirect: route.redirectTo,
+                    page404Component,
+                };
+            }
+            // Handle guards
+            if (route.guard) {
+                const guardResult = route.guard({
+                    pathname: currentPath,
+                    params: matchResult.params,
+                    search: searchString,
+                });
+                if (typeof guardResult === "string") {
+                    return {
+                        component: null,
+                        pattern: matchResult.pattern,
+                        params: matchResult.params,
+                        matches: collectedMatches,
+                        meta: null,
+                        redirect: guardResult,
+                        page404Component,
+                    };
+                }
+                if (guardResult === false) {
+                    continue; // Skip this route
+                }
+            }
+            // Build match object
+            const newMatch = {
+                route,
+                params: matchResult.params,
+                pathname: currentPath,
+                pathnameBase: parentPath,
+                pattern: matchResult.pattern,
+            };
+            const newMatches = [...collectedMatches, newMatch];
+            // Handle nested routes with Outlet support
+            if (route.children && route.children.length > 0) {
+                const childResult = matchRoutes(route.children, currentPath, fullPath, searchString, newMatches);
+                if (childResult.component || childResult.redirect) {
+                    // Wrap parent component with OutletProvider to render children via Outlet
+                    return {
+                        component: (_jsx(OutletProvider, { outlet: childResult.component, childRoutes: route.children, matches: newMatches, depth: parentPath.split("/").filter(Boolean).length, children: route.component })),
+                        pattern: matchResult.pattern,
+                        params: { ...matchResult.params, ...childResult.params },
+                        matches: childResult.matches,
+                        meta: route.meta || childResult.meta,
+                        loader: route.loader
+                            ? { fn: route.loader, params: matchResult.params }
+                            : childResult.loader,
+                        page404Component: page404Component || childResult.page404Component,
+                    };
+                }
+            }
+            return {
+                component: route.component,
+                pattern: matchResult.pattern,
+                params: matchResult.params,
+                matches: newMatches,
+                meta: route.meta || null,
+                loader: route.loader
+                    ? { fn: route.loader, params: matchResult.params }
+                    : undefined,
+                page404Component,
+            };
+        }
+        // Check children routes (for routes without matching parent)
+        if (route.children) {
+            const childResult = matchRoutes(route.children, currentPath, fullPath, searchString, collectedMatches);
+            if (childResult.component || childResult.redirect) {
+                return {
+                    ...childResult,
+                    page404Component: page404Component || childResult.page404Component,
+                };
+            }
+        }
+    }
+    return {
+        component: null,
+        pattern: "",
+        params: {},
+        matches: collectedMatches,
+        meta: null,
+        page404Component,
+    };
+};
 /**
  * RouterProvider - Professional-grade router provider component
  *
@@ -100,14 +302,10 @@ const extractParams = (pattern, pathname) => {
  * - History management
  */
 const RouterProvider = ({ routes, basename = "", fallbackElement, }) => {
+    var _a;
     const [location, setLocation] = useState(getCurrentLocation);
-    const [pattern, setPattern] = useState("");
-    const [params, setParams] = useState({});
-    const [matches, setMatches] = useState([]);
     const [loaderData, setLoaderData] = useState(null);
-    const [meta, setMeta] = useState(null);
     const [isPending, startTransition] = useTransition();
-    const page404Ref = useRef(null);
     const scrollPositions = useRef(new Map());
     const isNavigatingRef = useRef(false);
     /**
@@ -119,124 +317,6 @@ const RouterProvider = ({ routes, basename = "", fallbackElement, }) => {
         }
         return pathname;
     }, [basename]);
-    /**
-     * Match a single path pattern against current pathname
-     */
-    const matchPath = useCallback((routePattern, currentPath) => {
-        const patterns = routePattern.split("|");
-        for (const pat of patterns) {
-            const extractedParams = extractParams(pat, currentPath);
-            if (extractedParams !== null) {
-                return { match: true, params: extractedParams, pattern: pat };
-            }
-        }
-        return null;
-    }, []);
-    /**
-     * Get component and match info from routes
-     */
-    const getComponent = useCallback((routesList, currentPath, parentPath = "/") => {
-        const staticRoutes = [];
-        const dynamicRoutes = [];
-        const catchAllRoutes = [];
-        for (const route of routesList) {
-            const is404 = route.path === "404" || route.path === "/404";
-            if (is404) {
-                page404Ref.current = route.component;
-                continue;
-            }
-            const pathArray = Array.isArray(route.path) ? route.path : [route.path];
-            const hasCatchAll = pathArray.some((p) => p.includes("*"));
-            const hasDynamicParams = pathArray.some((p) => p.includes(":"));
-            if (hasCatchAll) {
-                catchAllRoutes.push(route);
-            }
-            else if (hasDynamicParams) {
-                dynamicRoutes.push(route);
-            }
-            else {
-                staticRoutes.push(route);
-            }
-        }
-        // Priority: static > dynamic > catch-all
-        const orderedRoutes = [
-            ...staticRoutes,
-            ...dynamicRoutes,
-            ...catchAllRoutes,
-        ];
-        for (const route of orderedRoutes) {
-            const fullPath = join(parentPath, `/${route.path}`);
-            const matchResult = matchPath(fullPath, currentPath);
-            if (matchResult) {
-                // Handle redirects
-                if (route.redirectTo) {
-                    // Schedule redirect in next tick to avoid state update during render
-                    setTimeout(() => navigate(route.redirectTo), 0);
-                    return null;
-                }
-                // Handle guards
-                if (route.guard) {
-                    const guardResult = route.guard({
-                        pathname: currentPath,
-                        params: matchResult.params,
-                        search: location.search,
-                    });
-                    if (typeof guardResult === "string") {
-                        setTimeout(() => navigate(guardResult), 0);
-                        return null;
-                    }
-                    if (guardResult === false) {
-                        continue; // Skip this route
-                    }
-                }
-                // Update matches state
-                const newMatch = {
-                    route,
-                    params: matchResult.params,
-                    pathname: currentPath,
-                    pathnameBase: parentPath,
-                    pattern: matchResult.pattern,
-                };
-                if (pattern !== matchResult.pattern) {
-                    setPattern(matchResult.pattern);
-                }
-                if (JSON.stringify(params) !== JSON.stringify(matchResult.params)) {
-                    setParams(matchResult.params);
-                }
-                setMatches((prev) => [...prev, newMatch]);
-                // Handle route meta
-                if (route.meta) {
-                    setMeta(route.meta);
-                    if (route.meta.title && typeof document !== "undefined") {
-                        document.title = route.meta.title;
-                    }
-                }
-                // Handle loader
-                if (route.loader) {
-                    const abortController = new AbortController();
-                    Promise.resolve(route.loader({
-                        params: matchResult.params,
-                        request: new Request(window.location.href),
-                        signal: abortController.signal,
-                    })).then(setLoaderData);
-                }
-                // Handle nested routes with Outlet support
-                if (route.children && route.children.length > 0) {
-                    const childComponent = getComponent(route.children, currentPath, fullPath);
-                    // Wrap parent component with OutletProvider to render children via Outlet
-                    return (_jsx(OutletProvider, { outlet: childComponent, childRoutes: route.children, matches: matches, depth: parentPath.split("/").filter(Boolean).length, children: route.component }));
-                }
-                return route.component;
-            }
-            // Check children routes (for routes without matching parent)
-            if (route.children) {
-                const childMatch = getComponent(route.children, currentPath, fullPath);
-                if (childMatch)
-                    return childMatch;
-            }
-        }
-        return null;
-    }, [location.search, matchPath, params, pattern]);
     /**
      * Navigate to a new location
      */
@@ -274,7 +354,6 @@ const RouterProvider = ({ routes, basename = "", fallbackElement, }) => {
             // Use transition for better UX
             startTransition(() => {
                 setLocation(getCurrentLocation());
-                setMatches([]); // Reset matches for new route
             });
             // Scroll to top unless prevented
             if (!(options === null || options === void 0 ? void 0 : options.preventScrollReset)) {
@@ -309,7 +388,6 @@ const RouterProvider = ({ routes, basename = "", fallbackElement, }) => {
         const handleLocationChange = () => {
             startTransition(() => {
                 setLocation(getCurrentLocation());
-                setMatches([]); // Reset matches for new route
             });
         };
         // Patch history methods to dispatch custom event
@@ -337,46 +415,71 @@ const RouterProvider = ({ routes, basename = "", fallbackElement, }) => {
         };
     }, []);
     /**
-     * Compute matched component
+     * Compute matched route result (pure computation)
      */
     const normalizedPath = normalizePathname(location.pathname);
-    const matchedComponent = useMemo(() => getComponent(routes, normalizedPath), [routes, normalizedPath, getComponent]);
-    const component = matchedComponent !== null && matchedComponent !== void 0 ? matchedComponent : (page404Ref.current || _jsx(Page404, {}));
+    const matchResult = useMemo(() => matchRoutes(routes, normalizedPath, "/", location.search), [routes, normalizedPath, location.search]);
+    // Handle redirects
+    useEffect(() => {
+        if (matchResult.redirect) {
+            navigate(matchResult.redirect);
+        }
+    }, [matchResult.redirect, navigate]);
+    // Handle loaders
+    useEffect(() => {
+        if (matchResult.loader) {
+            const abortController = new AbortController();
+            Promise.resolve(matchResult.loader.fn({
+                params: matchResult.loader.params,
+                request: new Request(window.location.href),
+                signal: abortController.signal,
+            })).then(setLoaderData);
+            return () => abortController.abort();
+        }
+    }, [matchResult.loader]);
+    // Handle meta/title updates
+    useEffect(() => {
+        var _a;
+        if (((_a = matchResult.meta) === null || _a === void 0 ? void 0 : _a.title) && typeof document !== "undefined") {
+            document.title = matchResult.meta.title;
+        }
+    }, [matchResult.meta]);
+    const component = (_a = matchResult.component) !== null && _a !== void 0 ? _a : (matchResult.page404Component || _jsx(Page404, {}));
     /**
      * Build context value with memoization
      */
     const contextValue = useMemo(() => ({
         // New API
         pathname: normalizedPath,
-        pattern,
+        pattern: matchResult.pattern,
         search: location.search,
         hash: location.hash,
         state: location.state,
-        params,
-        matches,
+        params: matchResult.params,
+        matches: matchResult.matches,
         navigate,
         back,
         forward,
         isNavigating: isPending || isNavigatingRef.current,
         loaderData,
-        meta,
+        meta: matchResult.meta,
         // Legacy aliases for backward compatibility
         path: normalizedPath,
-        fullPathWithParams: pattern,
+        fullPathWithParams: matchResult.pattern,
     }), [
         normalizedPath,
-        pattern,
+        matchResult.pattern,
         location.search,
         location.hash,
         location.state,
-        params,
-        matches,
+        matchResult.params,
+        matchResult.matches,
         navigate,
         back,
         forward,
         isPending,
         loaderData,
-        meta,
+        matchResult.meta,
     ]);
     return (_jsx(RouterContext.Provider, { value: contextValue, children: fallbackElement && isPending ? (_jsx(Suspense, { fallback: fallbackElement, children: component })) : (component) }));
 };

package/dist/core/createRouter.js

@@ -1,17 +1,20 @@
 /**
  * Normalizes a path by removing leading slashes and handling arrays
+ * Preserves "/" as empty string for root path matching
  */
 const normalizePath = (path) => {
     const pathArray = Array.isArray(path) ? path : [path];
-    return pathArray
-        .map((p) => {
+    const normalized = pathArray.map((p) => {
         if (!p)
             return "";
+        // Root path "/" becomes empty string
+        if (p === "/")
+            return "";
         // Remove leading slashes but preserve the path structure
         return p.startsWith("/") ? p.replace(/^\/+/, "") : p;
-    })
-        .filter(Boolean)
-        .join("|");
+    });
+    // Join with | but don't filter out empty strings (they represent root "/")
+    return normalized.join("|");
 };
 /**
  * Validates a route configuration

package/dist/hooks/useLocation.js

@@ -6,10 +6,15 @@ const createKey = () => {
     return Math.random().toString(36).substring(2, 10);
 };
 /**
- * Get current location snapshot
+ * Cached location to avoid infinite loops with useSyncExternalStore
+ */
+let cachedLocation = null;
+let cachedLocationString = "";
+/**
+ * Get current location snapshot (cached)
  */
 const getLocationSnapshot = () => {
-    var _a, _b;
+    var _a;
     if (typeof window === "undefined") {
         return {
             pathname: "",
@@ -19,13 +24,24 @@ const getLocationSnapshot = () => {
             key: "default",
         };
     }
-    return {
+    // Create a string representation to compare
+    const currentLocationString = `${window.location.pathname}${window.location.search}${window.location.hash}`;
+    const currentStateKey = (_a = window.history.state) === null || _a === void 0 ? void 0 : _a.key;
+    const fullLocationString = `${currentLocationString}|${currentStateKey || ""}`;
+    // Return cached location if nothing changed
+    if (cachedLocation && cachedLocationString === fullLocationString) {
+        return cachedLocation;
+    }
+    // Create new location and cache it
+    cachedLocation = {
         pathname: window.location.pathname,
         search: window.location.search,
         hash: window.location.hash,
         state: window.history.state,
-        key: (_b = (_a = window.history.state) === null || _a === void 0 ? void 0 : _a.key) !== null && _b !== void 0 ? _b : createKey(),
+        key: currentStateKey !== null && currentStateKey !== void 0 ? currentStateKey : createKey(),
     };
+    cachedLocationString = fullLocationString;
+    return cachedLocation;
 };
 /**
  * Subscribe to location changes
@@ -34,23 +50,30 @@ const subscribeToLocation = (callback) => {
     if (typeof window === "undefined") {
         return () => { };
     }
-    window.addEventListener("popstate", callback);
-    window.addEventListener("locationchange", callback);
+    const handleLocationChange = () => {
+        // Invalidate cache on location change
+        cachedLocation = null;
+        cachedLocationString = "";
+        callback();
+    };
+    window.addEventListener("popstate", handleLocationChange);
+    window.addEventListener("locationchange", handleLocationChange);
     return () => {
-        window.removeEventListener("popstate", callback);
-        window.removeEventListener("locationchange", callback);
+        window.removeEventListener("popstate", handleLocationChange);
+        window.removeEventListener("locationchange", handleLocationChange);
     };
 };
 /**
- * Server-side location snapshot
+ * Server-side location snapshot (cached)
  */
-const getServerSnapshot = () => ({
+const serverSnapshot = {
     pathname: "",
     search: "",
     hash: "",
     state: null,
     key: "default",
-});
+};
+const getServerSnapshot = () => serverSnapshot;
 /**
  * Hook to access the current location
  *

package/dist/ssr/StaticRouter.js

@@ -67,6 +67,28 @@ const joinPaths = (parent, child) => {
     const normalizedChild = child.startsWith("/") ? child : `/${child}`;
     return `${normalizedParent}${normalizedChild}`;
 };
+/**
+ * Normalize path to string (handles array paths)
+ */
+const normalizePath = (path) => {
+    if (Array.isArray(path)) {
+        return path.map((p) => (p.startsWith("/") ? p.slice(1) : p)).join("|");
+    }
+    return path;
+};
+/**
+ * Get the first path from a path (string or array)
+ */
+const getFirstPath = (path) => {
+    if (Array.isArray(path)) {
+        return path[0] || "";
+    }
+    // Handle pipe-separated paths (already normalized)
+    if (path.includes("|")) {
+        return path.split("|")[0];
+    }
+    return path;
+};
 /**
  * StaticRouter - Server-side rendering router
  *
@@ -157,8 +179,15 @@ const StaticRouter = ({ routes, location: locationString, basename = "", loaderD
             ...catchAllRoutes,
         ];
         for (const route of orderedRoutes) {
-            const fullPath = joinPaths(parentPath, route.path);
-            const matchResult = matchPath(fullPath, currentPath);
+            const normalizedRoutePath = normalizePath(route.path);
+            const firstPath = getFirstPath(route.path);
+            const fullPath = joinPaths(parentPath, firstPath);
+            const matchResult = matchPath(normalizedRoutePath.includes("|")
+                ? normalizedRoutePath
+                    .split("|")
+                    .map((p) => joinPaths(parentPath, p))
+                    .join("|")
+                : fullPath, currentPath);
             if (matchResult) {
                 // Handle redirects
                 if (route.redirectTo) {
@@ -219,8 +248,9 @@ const StaticRouter = ({ routes, location: locationString, basename = "", loaderD
             }
             // Check children routes
             if (route.children) {
-                const fullPath = joinPaths(parentPath, route.path);
-                const childMatch = findMatch(route.children, currentPath, fullPath);
+                const firstPath = getFirstPath(route.path);
+                const childFullPath = joinPaths(parentPath, firstPath);
+                const childMatch = findMatch(route.children, currentPath, childFullPath);
                 if (childMatch)
                     return childMatch;
             }

package/dist/ssr/serverUtils.js

@@ -43,6 +43,28 @@ const joinPaths = (parent, child) => {
     const normalizedChild = child.startsWith("/") ? child : `/${child}`;
     return `${normalizedParent}${normalizedChild}`;
 };
+/**
+ * Normalize path to string (handles array paths)
+ */
+const normalizePath = (path) => {
+    if (Array.isArray(path)) {
+        return path.map((p) => (p.startsWith("/") ? p.slice(1) : p)).join("|");
+    }
+    return path;
+};
+/**
+ * Get the first path from a path (string or array)
+ */
+const getFirstPath = (path) => {
+    if (Array.isArray(path)) {
+        return path[0] || "";
+    }
+    // Handle pipe-separated paths (already normalized)
+    if (path.includes("|")) {
+        return path.split("|")[0];
+    }
+    return path;
+};
 /**
  * Match routes for a given URL on the server
  *
@@ -80,8 +102,10 @@ export function matchServerRoutes(routes, pathname, parentPath = "/") {
     }
     const orderedRoutes = [...staticRoutes, ...dynamicRoutes, ...catchAllRoutes];
     for (const route of orderedRoutes) {
-        const fullPath = joinPaths(parentPath, route.path);
-        const patterns = route.path.split("|");
+        const normalizedRoutePath = normalizePath(route.path);
+        const firstPath = getFirstPath(route.path);
+        const fullPath = joinPaths(parentPath, firstPath);
+        const patterns = normalizedRoutePath.split("|");
         for (const pattern of patterns) {
             const fullPattern = joinPaths(parentPath, pattern);
             const extractedParams = extractParams(fullPattern, pathname);
@@ -129,8 +153,9 @@ export function matchServerRoutes(routes, pathname, parentPath = "/") {
         }
         // Check children even if parent doesn't match
         if (route.children) {
-            const fullPath = joinPaths(parentPath, route.path);
-            const childResult = matchServerRoutes(route.children, pathname, fullPath);
+            const firstPath = getFirstPath(route.path);
+            const childFullPath = joinPaths(parentPath, firstPath);
+            const childResult = matchServerRoutes(route.children, pathname, childFullPath);
             if (childResult.matches.length > 0 || childResult.redirect) {
                 return childResult;
             }

package/package.json

@@ -5,7 +5,7 @@
     "email": "mohammed.bencheikh.dev@gmail.com",
     "url": "https://mohammedbencheikh.com/"
   },
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "A professional React routing library with guards, loaders, and navigation blocking",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",