@openwebf/react-router 0.23.7 → 0.24.1

package/dist/index.d.ts

@@ -2,6 +2,8 @@ import React, { SyntheticEvent, EventHandler, ReactNode, FC } from 'react';
 import { WebFElementWithMethods } from '@openwebf/react-core-ui';
 
 type RoutePath = string;
+type EnsureRouteMountedCallback = (pathname: string) => Promise<void> | void;
+declare function __unstable_setEnsureRouteMountedCallback(callback: EnsureRouteMountedCallback | null): void;
 /**
  * Single entry in the hybrid router stack.
  * Mirrors the data returned from webf.hybridHistory.buildContextStack.
@@ -27,7 +29,7 @@ declare const WebFRouter: {
     /**
      * Get the current route path
      */
-    readonly path: RoutePath;
+    readonly path: string;
     /**
      * Navigate to a specified route
      * Applies route guards for permission checks before navigation
@@ -153,6 +155,11 @@ interface RouteProps {
      * Must be a member of the RoutePath enum
      */
     path: string;
+    /**
+     * The concrete path to mount for this route instance.
+     * Used internally to support dynamic routes like `/users/:id` mounting at `/users/123`.
+     */
+    mountedPath?: string;
     /**
      * Whether to pre-render
      * If true, the page will be rendered when the app starts, rather than waiting for route navigation
@@ -179,7 +186,7 @@ interface RouteProps {
  *
  * Responsible for managing page rendering, lifecycle and navigation bar
  */
-declare function Route({ path, prerender, element, title, theme }: RouteProps): React.JSX.Element;
+declare function Route({ path, mountedPath, prerender, element, title, theme }: RouteProps): React.JSX.Element;
 
 /**
  * Hook to get route context
@@ -201,6 +208,10 @@ declare function useRouteContext(): {
      * Current route path, corresponds to RoutePath enum
      */
     path: string | undefined;
+    /**
+     * The concrete mounted path for this route instance (e.g. `/users/123`).
+     */
+    mountedPath: string | undefined;
     /**
      * Page state
      * State data passed during route navigation
@@ -420,17 +431,21 @@ interface HybridRouterChangeEvent extends SyntheticEvent {
     readonly path: string;
 }
 type HybridRouterChangeEventHandler = EventHandler<HybridRouterChangeEvent>;
+interface HybridRouterPrerenderingEvent extends SyntheticEvent {
+}
+type HybridRouterPrerenderingEventHandler = EventHandler<HybridRouterPrerenderingEvent>;
 interface WebFHybridRouterProps {
     path: string;
     title?: string;
     theme?: 'material' | 'cupertino';
     onScreen?: HybridRouterChangeEventHandler;
     offScreen?: HybridRouterChangeEventHandler;
+    onPrerendering?: HybridRouterPrerenderingEventHandler;
     children?: ReactNode;
 }
 interface WebFRouterLinkElement extends WebFElementWithMethods<{}> {
 }
 declare const WebFRouterLink: FC<WebFHybridRouterProps>;
 
-export { Route, Routes, WebFRouter, WebFRouterLink, matchPath, matchRoutes, pathToRegex, useLocation, useNavigate, useParams, useRouteContext, useRoutes };
-export type { HybridRouteStackEntry, HybridRouterChangeEvent, HybridRouterChangeEventHandler, Location, NavigateFunction, NavigateOptions, NavigationMethods, RouteMatch, RouteObject, RouteParams, RouteProps, RoutesProps, WebFHybridRouterProps, WebFRouterLinkElement };
+export { Route, Routes, WebFRouter, WebFRouterLink, __unstable_setEnsureRouteMountedCallback, matchPath, matchRoutes, pathToRegex, useLocation, useNavigate, useParams, useRouteContext, useRoutes };
+export type { HybridRouteStackEntry, HybridRouterChangeEvent, HybridRouterChangeEventHandler, HybridRouterPrerenderingEvent, HybridRouterPrerenderingEventHandler, Location, NavigateFunction, NavigateOptions, NavigationMethods, RouteMatch, RouteObject, RouteParams, RouteProps, RoutesProps, WebFHybridRouterProps, WebFRouterLinkElement };

package/dist/index.esm.js

@@ -1,4 +1,3 @@
-import { webf } from '@openwebf/webf-enterprise-typings';
 import React, { useRef, useMemo, useState, createContext, useContext, useEffect, Children, isValidElement } from 'react';
 import { createWebFComponent } from '@openwebf/react-core-ui';
 
@@ -34,6 +33,26 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
+/**
+ * Router management module
+ *
+ * Encapsulates routing navigation functionality with route guard mechanism for permission checks
+ */
+function getHybridHistory() {
+    var _a;
+    return (_a = globalThis === null || globalThis === void 0 ? void 0 : globalThis.webf) === null || _a === void 0 ? void 0 : _a.hybridHistory;
+}
+let ensureRouteMountedCallback = null;
+function __unstable_setEnsureRouteMountedCallback(callback) {
+    ensureRouteMountedCallback = callback;
+}
+function ensureRouteMounted(pathname) {
+    return __awaiter(this, void 0, void 0, function* () {
+        if (!ensureRouteMountedCallback)
+            return;
+        yield ensureRouteMountedCallback(pathname);
+    });
+}
 /**
  * WebF Router object - provides comprehensive navigation APIs
  * Combines web-like history management with Flutter-like navigation patterns
@@ -43,110 +62,161 @@ const WebFRouter = {
      * Get the current state object associated with the history entry
      */
     get state() {
-        return webf.hybridHistory.state;
+        var _a;
+        return (_a = getHybridHistory()) === null || _a === void 0 ? void 0 : _a.state;
     },
     /**
      * Get the full hybrid router build context stack.
      * The stack is ordered from root route (index 0) to the current top route (last element).
      */
     get stack() {
-        return webf.hybridHistory.buildContextStack;
+        var _a, _b;
+        return (_b = (_a = getHybridHistory()) === null || _a === void 0 ? void 0 : _a.buildContextStack) !== null && _b !== void 0 ? _b : [];
     },
     /**
      * Get the current route path
      */
     get path() {
-        return webf.hybridHistory.path;
+        var _a, _b;
+        return (_b = (_a = getHybridHistory()) === null || _a === void 0 ? void 0 : _a.path) !== null && _b !== void 0 ? _b : '/';
     },
     /**
      * Navigate to a specified route
      * Applies route guards for permission checks before navigation
      */
     push: (path, state) => __awaiter(void 0, void 0, void 0, function* () {
-        webf.hybridHistory.pushNamed(path, { arguments: state });
+        const hybridHistory = getHybridHistory();
+        if (!hybridHistory)
+            throw new Error('WebF hybridHistory is not available');
+        yield ensureRouteMounted(path);
+        hybridHistory.pushNamed(path, { arguments: state });
     }),
     /**
      * Replace the current route without adding to history
      * Applies route guards for permission checks before navigation
      */
     replace: (path, state) => __awaiter(void 0, void 0, void 0, function* () {
-        webf.hybridHistory.pushReplacementNamed(path, { arguments: state });
+        const hybridHistory = getHybridHistory();
+        if (!hybridHistory)
+            throw new Error('WebF hybridHistory is not available');
+        yield ensureRouteMounted(path);
+        hybridHistory.pushReplacementNamed(path, { arguments: state });
     }),
     /**
      * Navigate back to the previous route
      */
     back: () => {
-        webf.hybridHistory.back();
+        const hybridHistory = getHybridHistory();
+        if (!hybridHistory)
+            throw new Error('WebF hybridHistory is not available');
+        hybridHistory.back();
     },
     /**
      * Close the current screen and return to the previous one
      * Flutter-style navigation method
      */
     pop: (result) => {
-        webf.hybridHistory.pop(result);
+        const hybridHistory = getHybridHistory();
+        if (!hybridHistory)
+            throw new Error('WebF hybridHistory is not available');
+        hybridHistory.pop(result);
     },
     /**
      * Pop routes until reaching a specific route
      */
     popUntil: (path) => {
-        webf.hybridHistory.popUntil(path);
+        const hybridHistory = getHybridHistory();
+        if (!hybridHistory)
+            throw new Error('WebF hybridHistory is not available');
+        hybridHistory.popUntil(path);
     },
     /**
      * Pop the current route and push a new named route
      */
     popAndPushNamed: (path, state) => __awaiter(void 0, void 0, void 0, function* () {
-        webf.hybridHistory.popAndPushNamed(path, { arguments: state });
+        const hybridHistory = getHybridHistory();
+        if (!hybridHistory)
+            throw new Error('WebF hybridHistory is not available');
+        yield ensureRouteMounted(path);
+        hybridHistory.popAndPushNamed(path, { arguments: state });
     }),
     /**
      * Push a new route and remove routes until reaching a specific route
      */
     pushNamedAndRemoveUntil: (path, state, untilPath) => __awaiter(void 0, void 0, void 0, function* () {
-        webf.hybridHistory.pushNamedAndRemoveUntil(state, path, untilPath);
+        const hybridHistory = getHybridHistory();
+        if (!hybridHistory)
+            throw new Error('WebF hybridHistory is not available');
+        yield ensureRouteMounted(path);
+        hybridHistory.pushNamedAndRemoveUntil(state, path, untilPath);
     }),
     /**
      * Push a new route and remove all routes until a specific route (Flutter-style)
      */
     pushNamedAndRemoveUntilRoute: (newPath, untilPath, state) => __awaiter(void 0, void 0, void 0, function* () {
-        webf.hybridHistory.pushNamedAndRemoveUntilRoute(newPath, untilPath, { arguments: state });
+        const hybridHistory = getHybridHistory();
+        if (!hybridHistory)
+            throw new Error('WebF hybridHistory is not available');
+        yield ensureRouteMounted(newPath);
+        hybridHistory.pushNamedAndRemoveUntilRoute(newPath, untilPath, { arguments: state });
     }),
     /**
      * Check if the navigator can go back
      */
     canPop: () => {
-        return webf.hybridHistory.canPop();
+        const hybridHistory = getHybridHistory();
+        if (!hybridHistory)
+            return false;
+        return hybridHistory.canPop();
     },
     /**
      * Pop the current route if possible
      * Returns true if the pop was successful, false otherwise
      */
     maybePop: (result) => {
-        return webf.hybridHistory.maybePop(result);
+        const hybridHistory = getHybridHistory();
+        if (!hybridHistory)
+            return false;
+        return hybridHistory.maybePop(result);
     },
     /**
      * Push a new state to the history stack (web-style navigation)
      */
     pushState: (state, name) => {
-        webf.hybridHistory.pushState(state, name);
+        const hybridHistory = getHybridHistory();
+        if (!hybridHistory)
+            throw new Error('WebF hybridHistory is not available');
+        hybridHistory.pushState(state, name);
     },
     /**
      * Replace the current history entry with a new one (web-style navigation)
      */
     replaceState: (state, name) => {
-        webf.hybridHistory.replaceState(state, name);
+        const hybridHistory = getHybridHistory();
+        if (!hybridHistory)
+            throw new Error('WebF hybridHistory is not available');
+        hybridHistory.replaceState(state, name);
     },
     /**
      * Pop and push with restoration capability
      * Returns a restoration ID string
      */
     restorablePopAndPushState: (state, name) => {
-        return webf.hybridHistory.restorablePopAndPushState(state, name);
+        const hybridHistory = getHybridHistory();
+        if (!hybridHistory)
+            throw new Error('WebF hybridHistory is not available');
+        return hybridHistory.restorablePopAndPushState(state, name);
     },
     /**
      * Pop and push named route with restoration capability
      * Returns a restoration ID string
      */
     restorablePopAndPushNamed: (path, state) => __awaiter(void 0, void 0, void 0, function* () {
-        return webf.hybridHistory.restorablePopAndPushNamed(path, { arguments: state });
+        const hybridHistory = getHybridHistory();
+        if (!hybridHistory)
+            throw new Error('WebF hybridHistory is not available');
+        yield ensureRouteMounted(path);
+        return hybridHistory.restorablePopAndPushNamed(path, { arguments: state });
     })
 };
 /**
@@ -156,6 +226,10 @@ const WebFRouter = {
  */
 function pathToRegex(pattern) {
     const paramNames = [];
+    if (pattern === '*') {
+        paramNames.push('*');
+        return { regex: /^(.*)$/, paramNames };
+    }
     // Escape special regex characters except : and *
     let regexPattern = pattern.replace(/[.+?^${}()|[\]\\]/g, '\\$&');
     // Replace :param with named capture groups
@@ -163,6 +237,11 @@ function pathToRegex(pattern) {
         paramNames.push(paramName);
         return '([^/]+)';
     });
+    // Replace * with a splat capture group (matches across segments)
+    regexPattern = regexPattern.replace(/\*/g, () => {
+        paramNames.push('*');
+        return '(.*)';
+    });
     // Add anchors for exact matching
     regexPattern = `^${regexPattern}$`;
     return {
@@ -262,6 +341,13 @@ const RawWebFRouterLink = createWebFComponent({
                 callback(event);
             },
         },
+        {
+            propName: 'onPrerendering',
+            eventName: 'prerendering',
+            handler: (callback) => (event) => {
+                callback(event);
+            },
+        },
     ],
 });
 const WebFRouterLink = function (props) {
@@ -272,7 +358,12 @@ const WebFRouterLink = function (props) {
             props.onScreen(event);
         }
     };
-    return (React.createElement(RawWebFRouterLink, { title: props.title, path: props.path, theme: props.theme, onScreen: handleOnScreen, offScreen: props.offScreen }, isRender ? props.children : null));
+    const handlePrerendering = (event) => {
+        var _a;
+        enableRender(true);
+        (_a = props.onPrerendering) === null || _a === void 0 ? void 0 : _a.call(props, event);
+    };
+    return (React.createElement(RawWebFRouterLink, { title: props.title, path: props.path, theme: props.theme, onScreen: handleOnScreen, offScreen: props.offScreen, onPrerendering: handlePrerendering }, isRender ? props.children : null));
 };
 
 /**
@@ -289,7 +380,7 @@ const WebFRouterLink = function (props) {
  *
  * Responsible for managing page rendering, lifecycle and navigation bar
  */
-function Route({ path, prerender = false, element, title, theme }) {
+function Route({ path, mountedPath, prerender = false, element, title, theme }) {
     // Mark whether the page has been rendered
     const [hasRendered, updateRender] = useState(false);
     /**
@@ -308,7 +399,7 @@ function Route({ path, prerender = false, element, title, theme }) {
      */
     const handleOffScreen = useMemoizedFn(() => {
     });
-    return (React.createElement(WebFRouterLink, { path: path, title: title, theme: theme, onScreen: handleOnScreen, offScreen: handleOffScreen }, shouldRenderChildren ? element : null));
+    return (React.createElement(WebFRouterLink, { path: mountedPath !== null && mountedPath !== void 0 ? mountedPath : path, title: title, theme: theme, onScreen: handleOnScreen, offScreen: handleOffScreen }, shouldRenderChildren ? element : null));
 }
 
 /**
@@ -316,6 +407,7 @@ function Route({ path, prerender = false, element, title, theme }) {
  */
 const RouteContext = createContext({
     path: undefined,
+    mountedPath: undefined,
     params: undefined,
     routeParams: undefined,
     activePath: undefined,
@@ -336,9 +428,9 @@ const RouteContext = createContext({
  */
 function useRouteContext() {
     const context = useContext(RouteContext);
-    // isActive is true only for push events with matching path
-    const isActive = (context.routeEventKind === 'didPush' || context.routeEventKind === 'didPushNext')
-        && context.path === context.activePath;
+    const isActive = context.activePath !== undefined
+        && context.mountedPath !== undefined
+        && context.activePath === context.mountedPath;
     return Object.assign(Object.assign({}, context), { isActive });
 }
 /**
@@ -364,12 +456,9 @@ function useLocation() {
     const context = useRouteContext();
     // Create location object from context
     const location = useMemo(() => {
-        const currentPath = context.path || context.activePath || WebFRouter.path;
-        let pathname = currentPath;
-        // Check if the current component's route matches the active path
-        const isCurrentRoute = context.path === context.activePath;
+        const pathname = context.activePath || WebFRouter.path;
         // Get state - prioritize context params, fallback to WebFRouter.state
-        const state = (context.isActive || isCurrentRoute)
+        const state = context.isActive
             ? (context.params || WebFRouter.state)
             : WebFRouter.state;
         return {
@@ -378,7 +467,7 @@ function useLocation() {
             isActive: context.isActive,
             key: `${pathname}-${Date.now()}`
         };
-    }, [context.isActive, context.path, context.activePath, context.params]);
+    }, [context.isActive, context.activePath, context.params]);
     return location;
 }
 /**
@@ -419,75 +508,110 @@ function useParams() {
 /**
  * Route-specific context provider that only updates when the route is active
  */
-function RouteContextProvider({ path, children }) {
+function RouteContextProvider({ patternPath, mountedPath, children, }) {
     const globalContext = useContext(RouteContext);
     // Create a route-specific context that only updates when this route is active
     const routeSpecificContext = useMemo(() => {
-        // Check if this route pattern matches the active path
-        const match = globalContext.activePath ? matchPath(path, globalContext.activePath) : null;
-        if (match) {
-            // Use route params from Flutter event if available, otherwise from local matching
-            const effectiveRouteParams = globalContext.routeParams || match.params;
-            // For matching routes, always try to get state from WebFRouter if params is undefined
+        const isActive = globalContext.activePath !== undefined && globalContext.activePath === mountedPath;
+        const match = isActive ? matchPath(patternPath, mountedPath) : null;
+        if (isActive && match) {
             const effectiveParams = globalContext.params !== undefined ? globalContext.params : WebFRouter.state;
             return {
-                path,
+                path: patternPath,
+                mountedPath,
                 params: effectiveParams,
-                routeParams: effectiveRouteParams,
+                routeParams: match.params,
                 activePath: globalContext.activePath,
                 routeEventKind: globalContext.routeEventKind
             };
         }
-        // Return previous values if not active
         return {
-            path,
+            path: patternPath,
+            mountedPath,
             params: undefined,
             routeParams: undefined,
             activePath: globalContext.activePath,
             routeEventKind: undefined
         };
-    }, [path, globalContext.activePath, globalContext.params, globalContext.routeParams, globalContext.routeEventKind]);
+    }, [patternPath, mountedPath, globalContext.activePath, globalContext.params, globalContext.routeEventKind]);
     return (React.createElement(RouteContext.Provider, { value: routeSpecificContext }, children));
 }
+function patternScore(pattern) {
+    if (pattern === '*')
+        return 0;
+    const segments = pattern.split('/').filter(Boolean);
+    let score = 0;
+    for (const segment of segments) {
+        if (segment === '*')
+            score += 1;
+        else if (segment.startsWith(':'))
+            score += 2;
+        else
+            score += 3;
+    }
+    return score * 100 + segments.length;
+}
+function findBestMatch(patterns, pathname) {
+    var _a;
+    let best = null;
+    for (const pattern of patterns) {
+        const match = matchPath(pattern, pathname);
+        if (!match)
+            continue;
+        const score = patternScore(pattern);
+        if (!best || score > best.score)
+            best = { match, score };
+    }
+    return (_a = best === null || best === void 0 ? void 0 : best.match) !== null && _a !== void 0 ? _a : null;
+}
+function escapeAttributeValue(value) {
+    return value.replace(/\\/g, '\\\\').replace(/"/g, '\\"');
+}
 function Routes({ children }) {
     // State to track current route information
     const [routeState, setRouteState] = useState({
         path: undefined,
+        mountedPath: undefined,
         activePath: WebFRouter.path, // Initialize with current path
         params: undefined,
         routeParams: undefined,
         routeEventKind: undefined
     });
+    const [stack, setStack] = useState(() => WebFRouter.stack);
+    const [preMountedPaths, setPreMountedPaths] = useState([]);
+    const routePatternsRef = useRef([]);
+    const pendingEnsureResolversRef = useRef(new Map());
+    // Keep a stable view of declared route patterns for event handlers.
+    useEffect(() => {
+        const patterns = [];
+        Children.forEach(children, (child) => {
+            if (!isValidElement(child))
+                return;
+            if (child.type !== Route)
+                return;
+            patterns.push(child.props.path);
+        });
+        routePatternsRef.current = patterns;
+    }, [children]);
     // Listen to hybridrouterchange event
     useEffect(() => {
         const handleRouteChange = (event) => {
+            var _a, _b, _c;
             const routeEvent = event;
             // Check for new event detail structure with params
             const eventDetail = event.detail;
-            // Only update activePath for push events
-            const newActivePath = (routeEvent.kind === 'didPushNext' || routeEvent.kind === 'didPush')
-                ? routeEvent.path
-                : routeState.activePath;
-            // For dynamic routes, extract parameters from the path using registered route patterns
-            let routeParams = (eventDetail === null || eventDetail === void 0 ? void 0 : eventDetail.params) || undefined;
-            if (!routeParams && newActivePath) {
-                // Try to extract parameters from registered route patterns
-                const registeredRoutes = Array.from(document.querySelectorAll('webf-router-link'));
-                for (const routeElement of registeredRoutes) {
-                    const routePath = routeElement.getAttribute('path');
-                    if (routePath && routePath.includes(':')) {
-                        const match = matchPath(routePath, newActivePath);
-                        if (match) {
-                            routeParams = match.params;
-                            break;
-                        }
-                    }
-                }
-            }
-            const eventState = (eventDetail === null || eventDetail === void 0 ? void 0 : eventDetail.state) || routeEvent.state;
+            const newActivePath = WebFRouter.path;
+            const newStack = WebFRouter.stack;
+            setStack(newStack);
+            setPreMountedPaths((prev) => prev.filter((p) => newStack.some((entry) => entry.path === p)));
+            const bestMatch = newActivePath ? findBestMatch(routePatternsRef.current, newActivePath) : null;
+            const routeParams = (eventDetail === null || eventDetail === void 0 ? void 0 : eventDetail.params) || (bestMatch === null || bestMatch === void 0 ? void 0 : bestMatch.params) || undefined;
+            const activeEntry = [...newStack].reverse().find((entry) => entry.path === newActivePath);
+            const eventState = (_c = (_b = (_a = activeEntry === null || activeEntry === void 0 ? void 0 : activeEntry.state) !== null && _a !== void 0 ? _a : eventDetail === null || eventDetail === void 0 ? void 0 : eventDetail.state) !== null && _b !== void 0 ? _b : routeEvent.state) !== null && _c !== void 0 ? _c : WebFRouter.state;
             // Update state based on event kind
             setRouteState({
                 path: routeEvent.path,
+                mountedPath: routeEvent.path,
                 activePath: newActivePath,
                 params: eventState,
                 routeParams: routeParams, // Use params from Flutter if available
@@ -500,31 +624,108 @@ function Routes({ children }) {
         return () => {
             document.removeEventListener('hybridrouterchange', handleRouteChange);
         };
-    }, [routeState.activePath]);
+    }, []);
+    useEffect(() => {
+        __unstable_setEnsureRouteMountedCallback((pathname) => {
+            var _a;
+            if (!pathname)
+                return;
+            const bestMatch = findBestMatch(routePatternsRef.current, pathname);
+            if (!bestMatch)
+                return;
+            const selector = `webf-router-link[path="${escapeAttributeValue(pathname)}"]`;
+            if (document.querySelector(selector))
+                return;
+            let resolveFn;
+            const promise = new Promise((resolve) => {
+                resolveFn = resolve;
+            });
+            pendingEnsureResolversRef.current.set(pathname, [
+                ...((_a = pendingEnsureResolversRef.current.get(pathname)) !== null && _a !== void 0 ? _a : []),
+                resolveFn,
+            ]);
+            setPreMountedPaths((prev) => (prev.includes(pathname) ? prev : [...prev, pathname]));
+            return promise;
+        });
+        return () => {
+            __unstable_setEnsureRouteMountedCallback(null);
+        };
+    }, []);
+    useEffect(() => {
+        const pending = pendingEnsureResolversRef.current;
+        for (const [pathname, resolvers] of pending.entries()) {
+            const selector = `webf-router-link[path="${escapeAttributeValue(pathname)}"]`;
+            if (!document.querySelector(selector))
+                continue;
+            for (const resolve of resolvers)
+                resolve();
+            pending.delete(pathname);
+        }
+    }, [children, stack, preMountedPaths, routeState.activePath]);
     // Global context value
     const globalContextValue = useMemo(() => ({
         path: undefined,
+        mountedPath: undefined,
         params: routeState.params,
         routeParams: routeState.routeParams, // Pass through route params from Flutter
         activePath: routeState.activePath,
         routeEventKind: routeState.routeEventKind
     }), [routeState.activePath, routeState.params, routeState.routeParams, routeState.routeEventKind]);
-    // Wrap each Route component with its own context provider
     const wrappedChildren = useMemo(() => {
-        return Children.map(children, (child) => {
+        const declaredRoutes = [];
+        const patterns = [];
+        const declaredPaths = new Set();
+        Children.forEach(children, (child) => {
+            var _a;
             if (!isValidElement(child)) {
-                return child;
+                declaredRoutes.push(child);
+                return;
             }
-            // Ensure only Route components are direct children
             if (child.type !== Route) {
                 console.warn('Routes component should only contain Route components as direct children');
-                return child;
+                declaredRoutes.push(child);
+                return;
             }
-            // Wrap each Route with its own context provider
-            const routePath = child.props.path;
-            return (React.createElement(RouteContextProvider, { key: routePath, path: routePath }, child));
+            const patternPath = child.props.path;
+            patterns.push(patternPath);
+            declaredPaths.add(patternPath);
+            const mountedPath = (_a = child.props.mountedPath) !== null && _a !== void 0 ? _a : patternPath;
+            declaredRoutes.push(React.createElement(RouteContextProvider, { key: `declared:${patternPath}`, patternPath: patternPath, mountedPath: mountedPath }, child));
         });
-    }, [children]);
+        const mountedPaths = [];
+        for (const entry of stack)
+            mountedPaths.push(entry.path);
+        for (const path of preMountedPaths)
+            mountedPaths.push(path);
+        if (routeState.activePath && !mountedPaths.includes(routeState.activePath))
+            mountedPaths.push(routeState.activePath);
+        const dynamicRoutes = [];
+        const seenMountedPaths = new Set();
+        for (const mountedPath of mountedPaths) {
+            if (seenMountedPaths.has(mountedPath))
+                continue;
+            seenMountedPaths.add(mountedPath);
+            if (declaredPaths.has(mountedPath))
+                continue;
+            const bestMatch = findBestMatch(patterns, mountedPath);
+            if (!bestMatch)
+                continue;
+            const matchingRouteElement = Children.toArray(children).find((node) => {
+                if (!isValidElement(node))
+                    return false;
+                if (node.type !== Route)
+                    return false;
+                return node.props.path === bestMatch.path;
+            });
+            if (!matchingRouteElement)
+                continue;
+            const routeInstance = React.cloneElement(matchingRouteElement, {
+                mountedPath,
+            });
+            dynamicRoutes.push(React.createElement(RouteContextProvider, { key: `dynamic:${mountedPath}`, patternPath: bestMatch.path, mountedPath: mountedPath }, routeInstance));
+        }
+        return [...declaredRoutes, ...dynamicRoutes];
+    }, [children, stack, preMountedPaths, routeState.activePath]);
     return (React.createElement(RouteContext.Provider, { value: globalContextValue }, wrappedChildren));
 }
 /**
@@ -624,5 +825,5 @@ function useNavigate() {
     }, []);
 }
 
-export { Route, Routes, WebFRouter, WebFRouterLink, matchPath, matchRoutes, pathToRegex, useLocation, useNavigate, useParams, useRouteContext, useRoutes };
+export { Route, Routes, WebFRouter, WebFRouterLink, __unstable_setEnsureRouteMountedCallback, matchPath, matchRoutes, pathToRegex, useLocation, useNavigate, useParams, useRouteContext, useRoutes };
 //# sourceMappingURL=index.esm.js.map