@openwebf/react-router 0.3.2 → 0.3.4

package/dist/browser/index.d.ts

@@ -0,0 +1,88 @@
+import React from 'react';
+export interface RouteProps {
+    title?: string;
+    path: string;
+    prerender?: boolean;
+    element: React.ReactNode;
+}
+export interface RoutesProps {
+    children: React.ReactNode;
+}
+export interface Location {
+    pathname: string;
+    state: any;
+    key?: string;
+}
+export interface RouteParams {
+    [key: string]: string;
+}
+export interface RouteMatch {
+    path: string;
+    params: RouteParams;
+    isExact: boolean;
+}
+export interface RouteContext<S = any> {
+    path: string | undefined;
+    params: S | undefined;
+    routeParams: RouteParams | undefined;
+    activePath: string | undefined;
+    routeEventKind?: 'didPushNext' | 'didPush' | 'didPop' | 'didPopNext';
+}
+export interface NavigateOptions {
+    replace?: boolean;
+    state?: any;
+}
+export interface NavigateFunction {
+    (to: string, options?: NavigateOptions): void;
+    (delta: number): void;
+}
+export interface NavigationMethods {
+    navigate: NavigateFunction;
+    pop: (result?: any) => void;
+    popUntil: (path: string) => void;
+    popAndPush: (path: string, state?: any) => Promise<void>;
+    pushAndRemoveUntil: (newPath: string, untilPath: string, state?: any) => Promise<void>;
+    canPop: () => boolean;
+    maybePop: (result?: any) => boolean;
+}
+export declare function Route({ path, element }: RouteProps): React.JSX.Element;
+export declare function Routes({ children }: RoutesProps): React.JSX.Element;
+export declare function useLocation(): Location & {
+    isActive: boolean;
+};
+export declare function useRouteContext(): RouteContext & {
+    isActive: boolean;
+};
+export declare function useParams(): RouteParams;
+export declare function useRoutes(routes: Array<{
+    path: string;
+    element: React.ReactNode;
+    prerender?: boolean;
+    children?: any[];
+}>): React.ReactElement | null;
+export declare function useNavigate(): NavigationMethods;
+export declare function pathToRegex(pattern: string): {
+    regex: RegExp;
+    paramNames: string[];
+};
+export declare function matchPath(pattern: string, pathname: string): RouteMatch | null;
+export declare function matchRoutes(routes: string[], pathname: string): RouteMatch | null;
+export declare const WebFRouter: {
+    readonly state: any;
+    readonly path: string;
+    push: (path: string, state?: any) => Promise<void>;
+    replace: (path: string, state?: any) => Promise<void>;
+    back: () => void;
+    pop: (result?: any) => void;
+    popUntil: (path: string) => void;
+    popAndPushNamed: (path: string, state?: any) => Promise<void>;
+    pushNamedAndRemoveUntil: (path: string, _state: any, _untilPath: string) => Promise<void>;
+    pushNamedAndRemoveUntilRoute: (newPath: string, _untilPath: string, state?: any) => Promise<void>;
+    canPop: () => boolean;
+    maybePop: (result?: any) => boolean;
+    pushState: (state: any, name: string) => void;
+    replaceState: (state: any, name: string) => void;
+    restorablePopAndPushState: (state: any, _name: string) => string;
+    restorablePopAndPushNamed: (path: string, state?: any) => Promise<string>;
+};
+//# sourceMappingURL=index.d.ts.map

package/dist/browser/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/browser/index.tsx"],"names":[],"mappings":"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"}

package/dist/index.d.ts

@@ -78,6 +78,43 @@ 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
@@ -116,13 +153,20 @@ 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 }: RouteProps): React.JSX.Element;
+declare function Route({ path, prerender, element, title, theme }: RouteProps): React.JSX.Element;
 
 /**
  * Hook to get route context
@@ -149,6 +193,10 @@ 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
      */
@@ -186,6 +234,7 @@ interface Location {
  *   const location = useLocation();
  *
  *   console.log('Current path:', location.pathname);
+
  *   console.log('Location state:', location.state);
  *   console.log('Is active:', location.isActive);
  *
@@ -196,6 +245,24 @@ 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
  */
@@ -212,6 +279,12 @@ interface RouteObject {
      * Whether to pre-render this route
      */
     prerender?: boolean;
+    /**
+     * Theme for this route
+     *
+     * @default "material"
+     */
+    theme?: 'material' | 'cupertino';
     /**
      * Child routes (not supported yet)
      */
@@ -337,6 +410,7 @@ type HybridRouterChangeEventHandler = EventHandler<HybridRouterChangeEvent>;
 interface WebFHybridRouterProps {
     path: string;
     title?: string;
+    theme?: 'material' | 'cupertino';
     onScreen?: HybridRouterChangeEventHandler;
     offScreen?: HybridRouterChangeEventHandler;
     children?: ReactNode;
@@ -345,5 +419,5 @@ interface WebFRouterLinkElement extends WebFElementWithMethods<{}> {
 }
 declare const WebFRouterLink: FC<WebFHybridRouterProps>;
 
-export { Route, Routes, WebFRouter, WebFRouterLink, useLocation, useNavigate, useRouteContext, useRoutes };
-export type { HybridRouterChangeEvent, HybridRouterChangeEventHandler, Location, NavigateFunction, NavigateOptions, NavigationMethods, RouteObject, RouteProps, RoutesProps, WebFHybridRouterProps, WebFRouterLinkElement };
+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 };

package/dist/index.esm.js

@@ -142,44 +142,101 @@ 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';
+    return typeof value === 'function';
 };
 
 var isDev = process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test';
 
-function useMemoizedFn(fn) {
-  if (isDev) {
-    if (!isFunction(fn)) {
-      console.error("useMemoizedFn expected parameter is a function, got ".concat(typeof fn));
+var useMemoizedFn = function (fn) {
+    if (isDev) {
+        if (!isFunction(fn)) {
+            console.error("useMemoizedFn expected parameter is a function, got ".concat(typeof fn));
+        }
     }
-  }
-  var fnRef = useRef(fn);
-  // why not write `fnRef.current = fn`?
-  // https://github.com/alibaba/hooks/issues/728
-  fnRef.current = useMemo(function () {
-    return fn;
-  }, [fn]);
-  var memoizedFn = useRef();
-  if (!memoizedFn.current) {
-    memoizedFn.current = function () {
-      var args = [];
-      for (var _i = 0; _i < arguments.length; _i++) {
-        args[_i] = arguments[_i];
-      }
-      return fnRef.current.apply(this, args);
-    };
-  }
-  return memoizedFn.current;
-}
+    var fnRef = useRef(fn);
+    // why not write `fnRef.current = fn`?
+    // https://github.com/alibaba/hooks/issues/728
+    fnRef.current = useMemo(function () { return fn; }, [fn]);
+    var memoizedFn = useRef(undefined);
+    if (!memoizedFn.current) {
+        memoizedFn.current = function () {
+            var args = [];
+            for (var _i = 0; _i < arguments.length; _i++) {
+                args[_i] = arguments[_i];
+            }
+            return fnRef.current.apply(this, args);
+        };
+    }
+    return memoizedFn.current;
+};
 
 // Create the raw component using createWebFComponent
 const RawWebFRouterLink = createWebFComponent({
     tagName: 'webf-router-link',
     displayName: 'WebFRouterLink',
     // Map props to attributes
-    attributeProps: ['path', 'title'],
+    attributeProps: ['path', 'title', 'theme'],
     // Event handlers
     events: [
         {
@@ -208,7 +265,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));
 };
 
 /**
@@ -225,7 +282,7 @@ const WebFRouterLink = function (props) {
  *
  * Responsible for managing page rendering, lifecycle and navigation bar
  */
-function Route({ path, prerender = false, element, title }) {
+function Route({ path, prerender = false, element, title, theme = 'material' }) {
     // Mark whether the page has been rendered
     const [hasRendered, updateRender] = useState(false);
     /**
@@ -244,7 +301,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: path, title: title, theme: theme, onScreen: handleOnScreen, offScreen: handleOffScreen }, shouldRenderChildren ? element : null));
 }
 
 /**
@@ -253,6 +310,7 @@ function Route({ path, prerender = false, element, title }) {
 const RouteContext = createContext({
     path: undefined,
     params: undefined,
+    routeParams: undefined,
     activePath: undefined,
     routeEventKind: undefined
 });
@@ -287,6 +345,7 @@ function useRouteContext() {
  *   const location = useLocation();
  *
  *   console.log('Current path:', location.pathname);
+
  *   console.log('Location state:', location.state);
  *   console.log('Is active:', location.isActive);
  *
@@ -298,25 +357,46 @@ function useLocation() {
     const context = useRouteContext();
     // Create location object from context
     const location = 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 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;
         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]);
     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
  *
@@ -336,11 +416,17 @@ function RouteContextProvider({ path, children }) {
     const globalContext = useContext(RouteContext);
     // Create a route-specific context that only updates when this route is active
     const routeSpecificContext = useMemo(() => {
-        // Only update if this route is the active one
-        if (globalContext.activePath === path) {
+        // 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;
             return {
                 path,
-                params: globalContext.params,
+                params: effectiveParams,
+                routeParams: effectiveRouteParams,
                 activePath: globalContext.activePath,
                 routeEventKind: globalContext.routeEventKind
             };
@@ -349,33 +435,55 @@ function RouteContextProvider({ path, children }) {
         return {
             path,
             params: undefined,
+            routeParams: undefined,
             activePath: globalContext.activePath,
             routeEventKind: undefined
         };
-    }, [path, globalContext.activePath, globalContext.params, globalContext.routeEventKind]);
+    }, [path, globalContext.activePath, globalContext.params, globalContext.routeParams, 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: undefined,
+        activePath: WebFRouter.path, // Initialize with current path
         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: routeEvent.state,
+                params: eventState,
+                routeParams: routeParams, // Use params from Flutter if available
                 routeEventKind: routeEvent.kind
             });
         };
@@ -390,9 +498,10 @@ 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.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) => {
@@ -438,7 +547,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
@@ -508,5 +617,5 @@ function useNavigate() {
     }, []);
 }
 
-export { Route, Routes, WebFRouter, WebFRouterLink, useLocation, useNavigate, useRouteContext, useRoutes };
+export { Route, Routes, WebFRouter, WebFRouterLink, matchPath, matchRoutes, pathToRegex, useLocation, useNavigate, useParams, useRouteContext, useRoutes };
 //# sourceMappingURL=index.esm.js.map