@openwebf/react-router 0.3.4 → 0.22.18

package/dist/index.d.ts

@@ -2,6 +2,14 @@ import React, { SyntheticEvent, EventHandler, ReactNode, FC } from 'react';
 import { WebFElementWithMethods } from '@openwebf/react-core-ui';
 
 type RoutePath = string;
+/**
+ * Single entry in the hybrid router stack.
+ * Mirrors the data returned from webf.hybridHistory.buildContextStack.
+ */
+interface HybridRouteStackEntry {
+    path: RoutePath;
+    state: any;
+}
 /**
  * WebF Router object - provides comprehensive navigation APIs
  * Combines web-like history management with Flutter-like navigation patterns
@@ -11,6 +19,11 @@ declare const WebFRouter: {
      * Get the current state object associated with the history entry
      */
     readonly state: any;
+    /**
+     * Get the full hybrid router build context stack.
+     * The stack is ordered from root route (index 0) to the current top route (last element).
+     */
+    readonly stack: HybridRouteStackEntry[];
     /**
      * Get the current route path
      */
@@ -78,43 +91,6 @@ declare const WebFRouter: {
      */
     restorablePopAndPushNamed: <T extends RoutePath>(path: T, state?: any) => Promise<string>;
 };
-/**
- * Route parameters extracted from dynamic routes
- */
-interface RouteParams {
-    [key: string]: string;
-}
-/**
- * Route match result
- */
-interface RouteMatch {
-    path: string;
-    params: RouteParams;
-    isExact: boolean;
-}
-/**
- * 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
- */
-declare function pathToRegex(pattern: string): {
-    regex: RegExp;
-    paramNames: string[];
-};
-/**
- * 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
- */
-declare function matchPath(pattern: string, pathname: string): RouteMatch | null;
-/**
- * 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
- */
-declare function matchRoutes(routes: string[], pathname: string): RouteMatch | null;
 
 /**
  * Route Component
@@ -153,20 +129,13 @@ interface RouteProps {
      * The actual page component to render
      */
     element: React.ReactNode;
-    /**
-     * Theme for this route
-     * Controls the visual style of the navigation bar and page
-     *
-     * @default "material"
-     */
-    theme?: 'material' | 'cupertino';
 }
 /**
  * Route Component
  *
  * 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, prerender, element, title }: RouteProps): React.JSX.Element;
 
 /**
  * Hook to get route context
@@ -193,10 +162,6 @@ declare function useRouteContext(): {
      * State data passed during route navigation
      */
     params: any;
-    /**
-     * Route parameters extracted from dynamic routes (e.g., :userId in /user/:userId)
-     */
-    routeParams: RouteParams | undefined;
     /**
      * Current active path from router
      */
@@ -234,7 +199,6 @@ interface Location {
  *   const location = useLocation();
  *
  *   console.log('Current path:', location.pathname);
-
  *   console.log('Location state:', location.state);
  *   console.log('Is active:', location.isActive);
  *
@@ -245,24 +209,6 @@ interface Location {
 declare function useLocation(): Location & {
     isActive: boolean;
 };
-/**
- * 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>;
- * }
- * ```
- */
-declare function useParams(): RouteParams;
 /**
  * Route configuration object
  */
@@ -279,12 +225,6 @@ interface RouteObject {
      * Whether to pre-render this route
      */
     prerender?: boolean;
-    /**
-     * Theme for this route
-     *
-     * @default "material"
-     */
-    theme?: 'material' | 'cupertino';
     /**
      * Child routes (not supported yet)
      */
@@ -410,7 +350,6 @@ type HybridRouterChangeEventHandler = EventHandler<HybridRouterChangeEvent>;
 interface WebFHybridRouterProps {
     path: string;
     title?: string;
-    theme?: 'material' | 'cupertino';
     onScreen?: HybridRouterChangeEventHandler;
     offScreen?: HybridRouterChangeEventHandler;
     children?: ReactNode;
@@ -419,5 +358,5 @@ interface WebFRouterLinkElement extends WebFElementWithMethods<{}> {
 }
 declare const WebFRouterLink: FC<WebFHybridRouterProps>;
 
-export { Route, Routes, WebFRouter, WebFRouterLink, matchPath, matchRoutes, pathToRegex, useLocation, useNavigate, useParams, useRouteContext, useRoutes };
-export type { HybridRouterChangeEvent, HybridRouterChangeEventHandler, Location, NavigateFunction, NavigateOptions, NavigationMethods, RouteMatch, RouteObject, RouteParams, RouteProps, RoutesProps, WebFHybridRouterProps, WebFRouterLinkElement };
+export { Route, Routes, WebFRouter, WebFRouterLink, useLocation, useNavigate, useRouteContext, useRoutes };
+export type { HybridRouteStackEntry, HybridRouterChangeEvent, HybridRouterChangeEventHandler, Location, NavigateFunction, NavigateOptions, NavigationMethods, RouteObject, RouteProps, RoutesProps, WebFHybridRouterProps, WebFRouterLinkElement };

package/dist/index.esm.js

@@ -45,6 +45,13 @@ const WebFRouter = {
     get state() {
         return webf.hybridHistory.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;
+    },
     /**
      * Get the current route path
      */
@@ -142,65 +149,6 @@ const WebFRouter = {
         return webf.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 = [];
-    // 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 '([^/]+)';
-    });
-    // 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';
@@ -236,7 +184,7 @@ const RawWebFRouterLink = createWebFComponent({
     tagName: 'webf-router-link',
     displayName: 'WebFRouterLink',
     // Map props to attributes
-    attributeProps: ['path', 'title', 'theme'],
+    attributeProps: ['path', 'title'],
     // Event handlers
     events: [
         {
@@ -265,7 +213,7 @@ 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));
+    return (React.createElement(RawWebFRouterLink, { title: props.title, path: props.path, onScreen: handleOnScreen, offScreen: props.offScreen }, isRender ? props.children : null));
 };
 
 /**
@@ -282,7 +230,7 @@ const WebFRouterLink = function (props) {
  *
  * Responsible for managing page rendering, lifecycle and navigation bar
  */
-function Route({ path, prerender = false, element, title, theme = 'material' }) {
+function Route({ path, prerender = false, element, title }) {
     // Mark whether the page has been rendered
     const [hasRendered, updateRender] = useState(false);
     /**
@@ -301,7 +249,7 @@ function Route({ path, prerender = false, element, title, theme = 'material' })
      */
     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: path, title: title, onScreen: handleOnScreen, offScreen: handleOffScreen }, shouldRenderChildren ? element : null));
 }
 
 /**
@@ -310,7 +258,6 @@ function Route({ path, prerender = false, element, title, theme = 'material' })
 const RouteContext = createContext({
     path: undefined,
     params: undefined,
-    routeParams: undefined,
     activePath: undefined,
     routeEventKind: undefined
 });
@@ -345,7 +292,6 @@ function useRouteContext() {
  *   const location = useLocation();
  *
  *   console.log('Current path:', location.pathname);
-
  *   console.log('Location state:', location.state);
  *   console.log('Is active:', location.isActive);
  *
@@ -357,46 +303,25 @@ 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;
-        // Get state - prioritize context params, fallback to WebFRouter.state
-        const state = (context.isActive || isCurrentRoute)
-            ? (context.params || WebFRouter.state)
-            : WebFRouter.state;
+        // 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
         return {
-            pathname,
-            state,
-            isActive: context.isActive,
-            key: `${pathname}-${Date.now()}`
+            pathname: context.activePath || WebFRouter.path,
+            state: undefined,
+            isActive: false,
+            key: `${context.activePath}-inactive`
         };
     }, [context.isActive, context.path, 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 useMemo(() => {
-        return context.routeParams || {};
-    }, [context.routeParams]);
-}
 /**
  * Routes component that wraps multiple Route components and provides shared context
  *
@@ -416,17 +341,11 @@ function RouteContextProvider({ path, 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 effectiveParams = globalContext.params !== undefined ? globalContext.params : WebFRouter.state;
+        // Only update if this route is the active one
+        if (globalContext.activePath === path) {
             return {
                 path,
-                params: effectiveParams,
-                routeParams: effectiveRouteParams,
+                params: globalContext.params,
                 activePath: globalContext.activePath,
                 routeEventKind: globalContext.routeEventKind
             };
@@ -435,55 +354,33 @@ function RouteContextProvider({ path, children }) {
         return {
             path,
             params: undefined,
-            routeParams: undefined,
             activePath: globalContext.activePath,
             routeEventKind: undefined
         };
-    }, [path, globalContext.activePath, globalContext.params, globalContext.routeParams, globalContext.routeEventKind]);
+    }, [path, globalContext.activePath, globalContext.params, globalContext.routeEventKind]);
     return (React.createElement(RouteContext.Provider, { value: routeSpecificContext }, children));
 }
 function Routes({ children }) {
     // State to track current route information
     const [routeState, setRouteState] = useState({
         path: undefined,
-        activePath: WebFRouter.path, // Initialize with current path
+        activePath: undefined,
         params: undefined,
-        routeParams: undefined,
         routeEventKind: undefined
     });
     // Listen to hybridrouterchange event
     useEffect(() => {
         const handleRouteChange = (event) => {
             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;
             // Update state based on event kind
             setRouteState({
                 path: routeEvent.path,
                 activePath: newActivePath,
-                params: eventState,
-                routeParams: routeParams, // Use params from Flutter if available
+                params: routeEvent.state,
                 routeEventKind: routeEvent.kind
             });
         };
@@ -498,10 +395,9 @@ function Routes({ children }) {
     const globalContextValue = useMemo(() => ({
         path: 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]);
+    }), [routeState.activePath, routeState.params, routeState.routeEventKind]);
     // Wrap each Route component with its own context provider
     const wrappedChildren = useMemo(() => {
         return Children.map(children, (child) => {
@@ -547,7 +443,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, theme: route.theme }));
+            return (React.createElement(Route, { key: route.path, path: route.path, element: route.element, prerender: route.prerender }));
         });
     }, [routes]);
     // Return Routes component with Route children
@@ -617,5 +513,5 @@ function useNavigate() {
     }, []);
 }
 
-export { Route, Routes, WebFRouter, WebFRouterLink, matchPath, matchRoutes, pathToRegex, useLocation, useNavigate, useParams, useRouteContext, useRoutes };
+export { Route, Routes, WebFRouter, WebFRouterLink, useLocation, useNavigate, useRouteContext, useRoutes };
 //# sourceMappingURL=index.esm.js.map