@koordinates/xstate-tree 4.6.6 → 4.7.0

package/lib/builders.js

@@ -180,11 +180,19 @@ exports.viewToMachine = viewToMachine;
  * @returns an xstate-tree machine that will render the right machines based on the routing events
  */
 function buildRoutingMachine(_routes, mappings) {
+    /**
+     * States in xstate can't contain dots, since the states are named after the routing events
+     * if the routing event contains a dot that will make a state with a dot in it
+     * this function sanitizes the event name to remove dots and is used for the state names and targets
+     */
+    function sanitizeEventName(event) {
+        return event.replace(/\.([a-zA-Z])/g, (_, letter) => letter.toUpperCase());
+    }
     const contentSlot = (0, slots_1.singleSlot)("Content");
     const mappingsToStates = Object.entries(mappings).reduce((acc, [event, _machine]) => {
         return {
             ...acc,
-            [event]: {
+            [sanitizeEventName(event)]: {
                 invoke: {
                     src: (_ctx, e) => {
                         return mappings[e.type];
@@ -197,7 +205,7 @@ function buildRoutingMachine(_routes, mappings) {
     const mappingsToEvents = Object.keys(mappings).reduce((acc, event) => ({
         ...acc,
         [event]: {
-            target: `.${event}`,
+            target: `.${sanitizeEventName(event)}`,
         },
     }), {});
     const machine = (0, xstate_1.createMachine)({

package/lib/index.js

@@ -14,7 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.lazy = exports.loggingMetaOptions = exports.TestRoutingContext = exports.useActiveRouteEvents = exports.useRouteArgsIfActive = exports.useIsRouteActive = exports.matchRoute = exports.buildCreateRoute = exports.Link = exports.slotTestingDummyFactory = exports.genericSlotsTestingDummy = exports.buildViewProps = exports.buildTestRootComponent = exports.onBroadcast = exports.buildRootComponent = exports.broadcast = void 0;
+exports.lazy = exports.loggingMetaOptions = exports.useOnRoute = exports.TestRoutingContext = exports.useActiveRouteEvents = exports.useRouteArgsIfActive = exports.useIsRouteActive = exports.matchRoute = exports.buildCreateRoute = exports.Link = exports.slotTestingDummyFactory = exports.genericSlotsTestingDummy = exports.buildViewProps = exports.buildTestRootComponent = exports.onBroadcast = exports.buildRootComponent = exports.broadcast = void 0;
 __exportStar(require("./builders"), exports);
 __exportStar(require("./slots"), exports);
 var xstateTree_1 = require("./xstateTree");
@@ -35,6 +35,7 @@ Object.defineProperty(exports, "useIsRouteActive", { enumerable: true, get: func
 Object.defineProperty(exports, "useRouteArgsIfActive", { enumerable: true, get: function () { return routing_1.useRouteArgsIfActive; } });
 Object.defineProperty(exports, "useActiveRouteEvents", { enumerable: true, get: function () { return routing_1.useActiveRouteEvents; } });
 Object.defineProperty(exports, "TestRoutingContext", { enumerable: true, get: function () { return routing_1.TestRoutingContext; } });
+Object.defineProperty(exports, "useOnRoute", { enumerable: true, get: function () { return routing_1.useOnRoute; } });
 var useService_1 = require("./useService");
 Object.defineProperty(exports, "loggingMetaOptions", { enumerable: true, get: function () { return useService_1.loggingMetaOptions; } });
 var lazy_1 = require("./lazy");

package/lib/routing/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useActiveRouteEvents = exports.useInTestRoutingContext = exports.useInRoutingContext = exports.TestRoutingContext = exports.RoutingContext = exports.useRouteArgsIfActive = exports.useIsRouteActive = exports.handleLocationChange = exports.matchRoute = exports.Link = exports.joinRoutes = exports.buildCreateRoute = void 0;
+exports.useActiveRouteEvents = exports.useInTestRoutingContext = exports.useInRoutingContext = exports.TestRoutingContext = exports.RoutingContext = exports.useOnRoute = exports.useRouteArgsIfActive = exports.useIsRouteActive = exports.handleLocationChange = exports.matchRoute = exports.Link = exports.joinRoutes = exports.buildCreateRoute = void 0;
 var createRoute_1 = require("./createRoute");
 Object.defineProperty(exports, "buildCreateRoute", { enumerable: true, get: function () { return createRoute_1.buildCreateRoute; } });
 var joinRoutes_1 = require("./joinRoutes");
@@ -15,6 +15,8 @@ var useIsRouteActive_1 = require("./useIsRouteActive");
 Object.defineProperty(exports, "useIsRouteActive", { enumerable: true, get: function () { return useIsRouteActive_1.useIsRouteActive; } });
 var useRouteArgsIfActive_1 = require("./useRouteArgsIfActive");
 Object.defineProperty(exports, "useRouteArgsIfActive", { enumerable: true, get: function () { return useRouteArgsIfActive_1.useRouteArgsIfActive; } });
+var useOnRoute_1 = require("./useOnRoute");
+Object.defineProperty(exports, "useOnRoute", { enumerable: true, get: function () { return useOnRoute_1.useOnRoute; } });
 var providers_1 = require("./providers");
 Object.defineProperty(exports, "RoutingContext", { enumerable: true, get: function () { return providers_1.RoutingContext; } });
 Object.defineProperty(exports, "TestRoutingContext", { enumerable: true, get: function () { return providers_1.TestRoutingContext; } });

package/lib/routing/useOnRoute.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useOnRoute = void 0;
+const providers_1 = require("./providers");
+/**
+ * @public
+ * Accepts a single Route and returns true if the route is currently active and marked as an index route.
+ * False if not.
+ *
+ * If used outside of a RoutingContext, an error will be thrown.
+ * @param route - the route to check
+ * @returns true if the route is active and an index route, false if not
+ * @throws if used outside of an xstate-tree root
+ */
+function useOnRoute(route) {
+    const activeRouteEvents = (0, providers_1.useActiveRouteEvents)();
+    if (!activeRouteEvents) {
+        throw new Error("useOnRoute must be used within a RoutingContext. Are you using it outside of an xstate-tree Root?");
+    }
+    return activeRouteEvents.some((activeRouteEvent) => {
+        var _a;
+        return activeRouteEvent.type === route.event &&
+            ((_a = activeRouteEvent.meta) === null || _a === void 0 ? void 0 : _a.indexEvent) === true;
+    });
+}
+exports.useOnRoute = useOnRoute;

package/lib/xstate-tree.d.ts

@@ -809,6 +809,18 @@ export declare function useActiveRouteEvents(): {
  */
 export declare function useIsRouteActive(...routes: AnyRoute[]): boolean;
 
+/**
+ * @public
+ * Accepts a single Route and returns true if the route is currently active and marked as an index route.
+ * False if not.
+ *
+ * If used outside of a RoutingContext, an error will be thrown.
+ * @param route - the route to check
+ * @returns true if the route is active and an index route, false if not
+ * @throws if used outside of an xstate-tree root
+ */
+export declare function useOnRoute(route: AnyRoute): boolean;
+
 /**
  * @public
  * Returns the arguments for the given route if the route is active.

package/package.json

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