@openwebf/react-router 0.23.7 → 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,110 +64,161 @@ 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 });
     })
 };
 /**
@@ -158,6 +228,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
@@ -165,6 +239,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 {
@@ -291,7 +370,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] = React.useState(false);
     /**
@@ -310,7 +389,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));
 }
 
 /**
@@ -318,6 +397,7 @@ function Route({ path, prerender = false, element, title, theme }) {
  */
 const RouteContext = React.createContext({
     path: undefined,
+    mountedPath: undefined,
     params: undefined,
     routeParams: undefined,
     activePath: undefined,
@@ -338,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 });
 }
 /**
@@ -366,12 +446,9 @@ function useLocation() {
     const context = useRouteContext();
     // Create location object from context
     const location = React.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 {
@@ -380,7 +457,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;
 }
 /**
@@ -421,75 +498,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 = React.useContext(RouteContext);
     // Create a route-specific context that only updates when this route is active
     const routeSpecificContext = React.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] = React.useState({
         path: 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;
             // 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
@@ -502,31 +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.routeParams, routeState.routeEventKind]);
-    // Wrap each Route component with its own context provider
     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));
 }
 /**
@@ -630,6 +819,7 @@ 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;