@koordinates/xstate-tree 4.3.0-beta.9 → 4.3.0

package/README.md

@@ -140,7 +140,7 @@ Each machine that forms the tree representing your UI has an associated set of s
 To assist in making xstate-tree easy to use with TypeScript there is the `createXStateTreeMachine` function for typing selectors, actions and view arguments and stapling the resulting functions to the xstate machine
 
 `createXStateTreeMachine` accepts the xstate machine as the first argument and takes an options argument with the following fields, it is important the fields are defined in this order or TypeScript will infer the wrong types:
-* `selectors`, receives an object with `ctx`, `inState`, and `canHandleEvent` fields. `ctx` is the machines current context, `inState` is the xstate `state.matches` function to allow determining if the machine is in a given state, and `canHandleEvent` accepts an event object and returns whether the machine will do anything in response to that event in it's current state 
+* `selectors`, receives an object with `ctx`, `inState`, `canHandleEvent`, and `meta` fields. `ctx` is the machines current context, `inState` is the xstate `state.matches` function to allow determining if the machine is in a given state, and `canHandleEvent` accepts an event object and returns whether the machine will do anything in response to that event in it's current state. `meta` is the xstate `state.meta` object with all the per state meta flattened into an object 
 * `actions`,  receives an object with `send` and `selectors` fields. `send` is the xstate `send` function bound to the machine, and `selectors` is the result of calling the selector function 
 * `view`, is a React component that receives `actions`, `selectors`, and `slots` as props. `actions` and `selectors` being the result of the action/selector functions and `slots` being an object with keys as the slot names and the values the slots React component 
 

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.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.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");
@@ -33,6 +33,7 @@ Object.defineProperty(exports, "buildCreateRoute", { enumerable: true, get: func
 Object.defineProperty(exports, "matchRoute", { enumerable: true, get: function () { return routing_1.matchRoute; } });
 Object.defineProperty(exports, "useIsRouteActive", { enumerable: true, get: function () { return routing_1.useIsRouteActive; } });
 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; } });
 var useService_1 = require("./useService");
 Object.defineProperty(exports, "loggingMetaOptions", { enumerable: true, get: function () { return useService_1.loggingMetaOptions; } });

package/lib/routing/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-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.useInRoutingContext = exports.TestRoutingContext = exports.RoutingContext = 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");
@@ -19,3 +19,4 @@ 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; } });
 Object.defineProperty(exports, "useInRoutingContext", { enumerable: true, get: function () { return providers_1.useInRoutingContext; } });
+Object.defineProperty(exports, "useActiveRouteEvents", { enumerable: true, get: function () { return providers_1.useActiveRouteEvents; } });

package/lib/routing/providers.js

@@ -22,6 +22,11 @@ function useInRoutingContext() {
     return context !== undefined;
 }
 exports.useInRoutingContext = useInRoutingContext;
+/**
+ * @public
+ *
+ * Returns the list of active routing events, or undefined if there are none / used outside of an xstate-tree routing context
+ */
 function useActiveRouteEvents() {
     var _a;
     try {

package/lib/utils.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isNil = exports.isEqual = exports.difference = exports.isLikelyPageLoad = exports.assert = exports.assertIsDefined = exports.delay = void 0;
+exports.mergeMeta = exports.isNil = exports.isEqual = exports.difference = exports.isLikelyPageLoad = exports.assert = exports.assertIsDefined = exports.delay = void 0;
 function delay(ms = 0) {
     return new Promise((resolve) => setTimeout(resolve, ms));
 }
@@ -121,3 +121,12 @@ value) {
     return value === null || value === undefined;
 }
 exports.isNil = isNil;
+function mergeMeta(meta) {
+    return Object.keys(meta).reduce((acc, key) => {
+        const value = meta[key];
+        // Assuming each meta value is an object
+        Object.assign(acc, value);
+        return acc;
+    }, {});
+}
+exports.mergeMeta = mergeMeta;

package/lib/xstate-tree.d.ts

@@ -658,6 +658,7 @@ export declare type Selectors<TMachine extends AnyStateMachine, TOut> = (args: {
     ctx: ContextFrom<TMachine>;
     canHandleEvent: CanHandleEvent<TMachine>;
     inState: MatchesFrom<TMachine>;
+    meta?: unknown;
 }) => TOut;
 
 /**
@@ -762,6 +763,19 @@ export declare function TestRoutingContext({ activeRouteEvents, children, }: {
     children: React_2.ReactNode;
 }): JSX.Element;
 
+/**
+ * @public
+ *
+ * Returns the list of active routing events, or undefined if there are none / used outside of an xstate-tree routing context
+ */
+export declare function useActiveRouteEvents(): {
+    type: unknown;
+    originalUrl: string;
+    params: unknown;
+    query: unknown;
+    meta: unknown;
+}[] | undefined;
+
 /**
  * @public
  * Accepts Routes and returns true if any route is currently active. False if not.

package/lib/xstateTree.js

@@ -187,6 +187,7 @@ function XstateTreeView({ interpreter }) {
                 ctx: current.context,
                 canHandleEvent,
                 inState,
+                meta: (0, utils_1.mergeMeta)(current.meta),
             });
             break;
     }

package/package.json

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