@openwebf/react-router 0.22.18 → 0.24.0

package/dist/index.js

@@ -1,6 +1,5 @@
 'use strict';
 
-var webfEnterpriseTypings = require('@openwebf/webf-enterprise-typings');
 var React = require('react');
 var reactCoreUi = require('@openwebf/react-core-ui');
 
@@ -36,6 +35,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
@@ -45,112 +64,231 @@ const WebFRouter = {
      * Get the current state object associated with the history entry
      */
     get state() {
-        return webfEnterpriseTypings.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 webfEnterpriseTypings.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 webfEnterpriseTypings.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* () {
-        webfEnterpriseTypings.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* () {
-        webfEnterpriseTypings.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: () => {
-        webfEnterpriseTypings.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) => {
-        webfEnterpriseTypings.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) => {
-        webfEnterpriseTypings.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* () {
-        webfEnterpriseTypings.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* () {
-        webfEnterpriseTypings.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* () {
-        webfEnterpriseTypings.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 webfEnterpriseTypings.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 webfEnterpriseTypings.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) => {
-        webfEnterpriseTypings.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) => {
-        webfEnterpriseTypings.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 webfEnterpriseTypings.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 webfEnterpriseTypings.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 });
     })
 };
+/**
+ * Convert a route pattern to a regular expression
+ * @param pattern Route pattern like "/user/:userId" or "/category/:catId/product/:prodId"
+ * @returns Object with regex and parameter names
+ */
+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
+    regexPattern = regexPattern.replace(/:([^\/]+)/g, (_, paramName) => {
+        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 {
+        regex: new RegExp(regexPattern),
+        paramNames
+    };
+}
+/**
+ * Match a pathname against a route pattern and extract parameters
+ * @param pattern Route pattern like "/user/:userId"
+ * @param pathname Actual pathname like "/user/123"
+ * @returns Match result with extracted parameters or null if no match
+ */
+function matchPath(pattern, pathname) {
+    const { regex, paramNames } = pathToRegex(pattern);
+    const match = pathname.match(regex);
+    if (!match) {
+        return null;
+    }
+    // Extract parameters from capture groups
+    const params = {};
+    paramNames.forEach((paramName, index) => {
+        params[paramName] = match[index + 1]; // +1 because match[0] is the full match
+    });
+    return {
+        path: pattern,
+        params,
+        isExact: true
+    };
+}
+/**
+ * Find the best matching route from a list of route patterns
+ * @param routes Array of route patterns
+ * @param pathname Current pathname
+ * @returns Best match or null if no routes match
+ */
+function matchRoutes(routes, pathname) {
+    for (const route of routes) {
+        const match = matchPath(route, pathname);
+        if (match) {
+            return match;
+        }
+    }
+    return null;
+}
 
 var isFunction = function (value) {
     return typeof value === 'function';
@@ -186,7 +324,7 @@ const RawWebFRouterLink = reactCoreUi.createWebFComponent({
     tagName: 'webf-router-link',
     displayName: 'WebFRouterLink',
     // Map props to attributes
-    attributeProps: ['path', 'title'],
+    attributeProps: ['path', 'title', 'theme'],
     // Event handlers
     events: [
         {
@@ -215,7 +353,7 @@ const WebFRouterLink = function (props) {
             props.onScreen(event);
         }
     };
-    return (React.createElement(RawWebFRouterLink, { title: props.title, path: props.path, onScreen: handleOnScreen, offScreen: props.offScreen }, isRender ? props.children : null));
+    return (React.createElement(RawWebFRouterLink, { title: props.title, path: props.path, theme: props.theme, onScreen: handleOnScreen, offScreen: props.offScreen }, isRender ? props.children : null));
 };
 
 /**
@@ -232,7 +370,7 @@ const WebFRouterLink = function (props) {
  *
  * Responsible for managing page rendering, lifecycle and navigation bar
  */
-function Route({ path, prerender = false, element, title }) {
+function Route({ path, mountedPath, prerender = false, element, title, theme }) {
     // Mark whether the page has been rendered
     const [hasRendered, updateRender] = React.useState(false);
     /**
@@ -251,7 +389,7 @@ function Route({ path, prerender = false, element, title }) {
      */
     const handleOffScreen = useMemoizedFn(() => {
     });
-    return (React.createElement(WebFRouterLink, { path: path, title: title, 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));
 }
 
 /**
@@ -259,7 +397,9 @@ function Route({ path, prerender = false, element, title }) {
  */
 const RouteContext = React.createContext({
     path: undefined,
+    mountedPath: undefined,
     params: undefined,
+    routeParams: undefined,
     activePath: undefined,
     routeEventKind: undefined
 });
@@ -278,9 +418,9 @@ const RouteContext = React.createContext({
  */
 function useRouteContext() {
     const context = React.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 });
 }
 /**
@@ -294,6 +434,7 @@ function useRouteContext() {
  *   const location = useLocation();
  *
  *   console.log('Current path:', location.pathname);
+
  *   console.log('Location state:', location.state);
  *   console.log('Is active:', location.isActive);
  *
@@ -305,25 +446,43 @@ function useLocation() {
     const context = useRouteContext();
     // Create location object from context
     const location = React.useMemo(() => {
-        // For active routes, return the current location with state
-        if (context.isActive) {
-            return {
-                pathname: context.path || context.activePath || WebFRouter.path,
-                state: context.params,
-                isActive: true,
-                key: `${context.path}-active-${Date.now()}`
-            };
-        }
-        // For inactive routes, return the global location without state
+        const pathname = context.activePath || WebFRouter.path;
+        // Get state - prioritize context params, fallback to WebFRouter.state
+        const state = context.isActive
+            ? (context.params || WebFRouter.state)
+            : WebFRouter.state;
         return {
-            pathname: context.activePath || WebFRouter.path,
-            state: undefined,
-            isActive: false,
-            key: `${context.activePath}-inactive`
+            pathname,
+            state,
+            isActive: context.isActive,
+            key: `${pathname}-${Date.now()}`
         };
-    }, [context.isActive, context.path, context.activePath, context.params]);
+    }, [context.isActive, context.activePath, context.params]);
     return location;
 }
+/**
+ * Hook to get route parameters from dynamic routes
+ *
+ * @returns Route parameters object with parameter names as keys and values as strings
+ *
+ * @example
+ * ```tsx
+ * // For route pattern "/user/:userId" and actual path "/user/123"
+ * function UserPage() {
+ *   const params = useParams();
+ *
+ *   console.log(params.userId); // "123"
+ *
+ *   return <div>User ID: {params.userId}</div>;
+ * }
+ * ```
+ */
+function useParams() {
+    const context = useRouteContext();
+    return React.useMemo(() => {
+        return context.routeParams || {};
+    }, [context.routeParams]);
+}
 /**
  * Routes component that wraps multiple Route components and provides shared context
  *
@@ -339,50 +498,113 @@ function useLocation() {
 /**
  * Route-specific context provider that only updates when the route is active
  */
-function RouteContextProvider({ path, children }) {
+function RouteContextProvider({ patternPath, mountedPath, children, }) {
     const globalContext = React.useContext(RouteContext);
     // Create a route-specific context that only updates when this route is active
     const routeSpecificContext = React.useMemo(() => {
-        // Only update if this route is the active one
-        if (globalContext.activePath === path) {
+        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,
-                params: globalContext.params,
+                path: patternPath,
+                mountedPath,
+                params: effectiveParams,
+                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.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] = React.useState({
         path: undefined,
-        activePath: undefined,
+        mountedPath: undefined,
+        activePath: WebFRouter.path, // Initialize with current path
         params: undefined,
+        routeParams: undefined,
         routeEventKind: undefined
     });
+    const [stack, setStack] = React.useState(() => WebFRouter.stack);
+    const [preMountedPaths, setPreMountedPaths] = React.useState([]);
+    const routePatternsRef = React.useRef([]);
+    const pendingEnsureResolversRef = React.useRef(new Map());
+    // Keep a stable view of declared route patterns for event handlers.
+    React.useEffect(() => {
+        const patterns = [];
+        React.Children.forEach(children, (child) => {
+            if (!React.isValidElement(child))
+                return;
+            if (child.type !== Route)
+                return;
+            patterns.push(child.props.path);
+        });
+        routePatternsRef.current = patterns;
+    }, [children]);
     // Listen to hybridrouterchange event
     React.useEffect(() => {
         const handleRouteChange = (event) => {
+            var _a, _b, _c;
             const routeEvent = event;
-            // Only update activePath for push events
-            const newActivePath = (routeEvent.kind === 'didPushNext' || routeEvent.kind === 'didPush')
-                ? routeEvent.path
-                : routeState.activePath;
+            // Check for new event detail structure with params
+            const eventDetail = event.detail;
+            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: routeEvent.state,
+                params: eventState,
+                routeParams: routeParams, // Use params from Flutter if available
                 routeEventKind: routeEvent.kind
             });
         };
@@ -392,30 +614,108 @@ function Routes({ children }) {
         return () => {
             document.removeEventListener('hybridrouterchange', handleRouteChange);
         };
-    }, [routeState.activePath]);
+    }, []);
+    React.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);
+        };
+    }, []);
+    React.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 = React.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.routeEventKind]);
-    // Wrap each Route component with its own context provider
+    }), [routeState.activePath, routeState.params, routeState.routeParams, routeState.routeEventKind]);
     const wrappedChildren = React.useMemo(() => {
-        return React.Children.map(children, (child) => {
+        const declaredRoutes = [];
+        const patterns = [];
+        const declaredPaths = new Set();
+        React.Children.forEach(children, (child) => {
+            var _a;
             if (!React.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 = React.Children.toArray(children).find((node) => {
+                if (!React.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));
 }
 /**
@@ -445,7 +745,7 @@ function useRoutes(routes) {
             if (route.children && route.children.length > 0) {
                 console.warn('Nested routes are not supported yet');
             }
-            return (React.createElement(Route, { key: route.path, path: route.path, element: route.element, prerender: route.prerender }));
+            return (React.createElement(Route, { key: route.path, path: route.path, element: route.element, prerender: route.prerender, theme: route.theme }));
         });
     }, [routes]);
     // Return Routes component with Route children
@@ -519,8 +819,13 @@ exports.Route = Route;
 exports.Routes = Routes;
 exports.WebFRouter = WebFRouter;
 exports.WebFRouterLink = WebFRouterLink;
+exports.__unstable_setEnsureRouteMountedCallback = __unstable_setEnsureRouteMountedCallback;
+exports.matchPath = matchPath;
+exports.matchRoutes = matchRoutes;
+exports.pathToRegex = pathToRegex;
 exports.useLocation = useLocation;
 exports.useNavigate = useNavigate;
+exports.useParams = useParams;
 exports.useRouteContext = useRouteContext;
 exports.useRoutes = useRoutes;
 //# sourceMappingURL=index.js.map