@koordinates/xstate-tree 4.8.0 → 4.9.0

package/lib/routing/createRoute/createRoute.js

@@ -96,19 +96,34 @@ function buildCreateRoute(history, basePath) {
                     },
                     // @ts-ignore :cry:
                     matches(suppliedUrl, search) {
-                        var _a, _b, _c, _d;
+                        var _a, _b, _c, _d, _e;
                         const fullUrl = suppliedUrl.endsWith("/")
                             ? suppliedUrl
                             : suppliedUrl + "/";
                         let url = fullUrl;
                         const parentRoutes = getParentArray();
                         let params = {};
+                        const parsedQuery = (0, query_string_1.parse)(search);
                         while (parentRoutes.length) {
                             const parentRoute = parentRoutes.shift();
                             const parentMatch = parentRoute.matcher(url, undefined);
                             if (parentMatch === false) {
                                 return false;
                             }
+                            // Evaluate parent's canMatch predicate if provided
+                            if (parentRoute.canMatch) {
+                                const accumulatedParams = {
+                                    ...params,
+                                    ...((_a = parentMatch.params) !== null && _a !== void 0 ? _a : {}),
+                                };
+                                const canMatchResult = parentRoute.canMatch({
+                                    params: accumulatedParams,
+                                    query: parsedQuery,
+                                });
+                                if (!canMatchResult) {
+                                    return false;
+                                }
+                            }
                             url = url.slice(parentMatch.matchLength);
                             // All routes assume the url starts with a /
                             // so if the parent route matches the / in the url, which consumes it
@@ -116,7 +131,7 @@ function buildCreateRoute(history, basePath) {
                             if (!url.startsWith("/")) {
                                 url = "/" + url;
                             }
-                            params = { ...params, ...((_a = parentMatch.params) !== null && _a !== void 0 ? _a : {}) };
+                            params = { ...params, ...((_b = parentMatch.params) !== null && _b !== void 0 ? _b : {}) };
                         }
                         const matches = matcher(url, (0, query_string_1.parse)(search));
                         // if there is any URL left after matching this route, the last to match
@@ -126,7 +141,7 @@ function buildCreateRoute(history, basePath) {
                         }
                         const fullParams = {
                             ...params,
-                            ...((_b = matches.params) !== null && _b !== void 0 ? _b : {}),
+                            ...((_c = matches.params) !== null && _c !== void 0 ? _c : {}),
                         };
                         if (fullParamsSchema) {
                             fullParamsSchema.parse(fullParams);
@@ -138,7 +153,7 @@ function buildCreateRoute(history, basePath) {
                         if (canMatch) {
                             const canMatchResult = canMatch({
                                 params: fullParams,
-                                query: (_c = matches.query) !== null && _c !== void 0 ? _c : {},
+                                query: (_d = matches.query) !== null && _d !== void 0 ? _d : {},
                             });
                             if (!canMatchResult) {
                                 return false;
@@ -148,7 +163,7 @@ function buildCreateRoute(history, basePath) {
                             originalUrl: `${fullUrl}${search}`,
                             type: event,
                             params: fullParams,
-                            query: (_d = matches.query) !== null && _d !== void 0 ? _d : {},
+                            query: (_e = matches.query) !== null && _e !== void 0 ? _e : {},
                         };
                     },
                     // @ts-ignore :cry:

package/lib/routing/useIsRouteActive.js

@@ -2,22 +2,29 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useIsRouteActive = void 0;
 const providers_1 = require("./providers");
-/**
- * @public
- * Accepts Routes and returns true if any route is currently active. False if not.
- *
- * If used outside of a RoutingContext, an error will be thrown.
- * @param routes - the routes to check
- * @returns true if any route is active, false if not
- * @throws if used outside of an xstate-tree root
- */
-function useIsRouteActive(...routes) {
+function useIsRouteActive(...args) {
     const activeRouteEvents = (0, providers_1.useActiveRouteEvents)();
     if (!activeRouteEvents) {
         throw new Error("useIsRouteActive must be used within a RoutingContext. Are you using it outside of an xstate-tree Root?");
     }
+    let routes;
+    let predicate;
+    if (args.length === 2 &&
+        Array.isArray(args[0]) &&
+        typeof args[1] === "function") {
+        routes = args[0];
+        predicate = args[1];
+    }
+    else {
+        routes = args;
+    }
     return activeRouteEvents.some((activeRouteEvent) => {
-        return routes.some((route) => activeRouteEvent.type === route.event);
+        const matches = routes.some((route) => activeRouteEvent.type === route.event);
+        if (!matches)
+            return false;
+        return predicate
+            ? predicate(activeRouteEvent)
+            : true;
     });
 }
 exports.useIsRouteActive = useIsRouteActive;

package/lib/xstate-tree.d.ts

@@ -352,6 +352,13 @@ declare type IsEmptyObject<Obj, ExcludeOptional extends boolean = false> = undef
 never
 ] ? true : false;
 
+/**
+ * @public
+ * Predicate invoked with the matching active route event to decide whether the
+ * route should be considered active.
+ */
+declare type IsRouteActivePredicate<TRoutes extends AnyRoute[]> = (event: RoutingEvent<TRoutes[number]>) => boolean;
+
 /**
  * @public
  *
@@ -818,6 +825,20 @@ export declare function useActiveRouteEvents(): {
  */
 export declare function useIsRouteActive(...routes: AnyRoute[]): boolean;
 
+/**
+ * @public
+ * Accepts an array of Routes and a predicate. Returns true if any of the
+ * routes is currently active AND the predicate returns true when called with
+ * the matching active route event.
+ *
+ * If used outside of a RoutingContext, an error will be thrown.
+ * @param routes - the routes to check
+ * @param predicate - called with the matching active route event; return true to treat the route as active
+ * @returns true if any route is active and the predicate returns true, false otherwise
+ * @throws if used outside of an xstate-tree root
+ */
+export declare function useIsRouteActive<TRoutes extends AnyRoute[]>(routes: [...TRoutes], predicate: IsRouteActivePredicate<TRoutes>): boolean;
+
 /**
  * @public
  * Accepts a single Route and returns true if the route is currently active and marked as an index route.

package/package.json

@@ -2,7 +2,7 @@
   "name": "@koordinates/xstate-tree",
   "main": "lib/index.js",
   "types": "lib/xstate-tree.d.ts",
-  "version": "4.8.0",
+  "version": "4.9.0",
   "license": "MIT",
   "description": "Build UIs with Actors using xstate and React",
   "keywords": [