@koordinates/xstate-tree 4.3.0-beta.1 → 4.3.0-beta.11

package/lib/setupScript.js

@@ -1 +1,3 @@
-import "@testing-library/jest-dom/extend-expect";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("@testing-library/jest-dom/extend-expect");

package/lib/slots/index.js

@@ -1 +1,17 @@
-export * from "./slots";
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+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 });
+__exportStar(require("./slots"), exports);

package/lib/slots/slots.js

@@ -1,28 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.multiSlot = exports.singleSlot = exports.SlotType = void 0;
 /**
  * @public
  */
-export var SlotType;
+var SlotType;
 (function (SlotType) {
     SlotType[SlotType["SingleSlot"] = 0] = "SingleSlot";
     SlotType[SlotType["MultiSlot"] = 1] = "MultiSlot";
-})(SlotType || (SlotType = {}));
+})(SlotType = exports.SlotType || (exports.SlotType = {}));
 /**
  * @public
  */
-export function singleSlot(name) {
+function singleSlot(name) {
     return {
         type: SlotType.SingleSlot,
         name,
         getId: () => `${name.toLowerCase()}-slot`,
     };
 }
+exports.singleSlot = singleSlot;
 /**
  * @public
  */
-export function multiSlot(name) {
+function multiSlot(name) {
     return {
         type: SlotType.MultiSlot,
         name: `${name}Multi`,
         getId: (id) => `${id}-${name.toLowerCase()}multi-slots`,
     };
 }
+exports.multiSlot = multiSlot;

package/lib/testingUtilities.js

@@ -1,11 +1,37 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buildTestRootComponent = exports.buildViewProps = exports.genericSlotsTestingDummy = exports.slotTestingDummyFactory = void 0;
 // ignore file coverage
-import { useMachine } from "@xstate/react";
-import React, { useEffect } from "react";
-import { TinyEmitter } from "tiny-emitter";
-import { createMachine, } from "xstate";
-import { buildXStateTreeMachine } from "./builders";
-import { difference } from "./utils";
-import { emitter, recursivelySend, XstateTreeView } from "./xstateTree";
+const react_1 = require("@xstate/react");
+const react_2 = __importStar(require("react"));
+const tiny_emitter_1 = require("tiny-emitter");
+const xstate_1 = require("xstate");
+const builders_1 = require("./builders");
+const utils_1 = require("./utils");
+const xstateTree_1 = require("./xstateTree");
 /**
  * @public
  *
@@ -14,8 +40,8 @@ import { emitter, recursivelySend, XstateTreeView } from "./xstateTree";
  * @param name - the string to render in the machines view
  * @returns a dummy machine that renders a div containing the supplied string
  */
-export function slotTestingDummyFactory(name) {
-    return buildXStateTreeMachine(createMachine({
+function slotTestingDummyFactory(name) {
+    return (0, builders_1.buildXStateTreeMachine)((0, xstate_1.createMachine)({
         id: name,
         initial: "idle",
         states: {
@@ -25,20 +51,21 @@ export function slotTestingDummyFactory(name) {
         actions: () => ({}),
         selectors: () => ({}),
         slots: [],
-        view: () => (React.createElement("div", null,
-            React.createElement("p", null, name))),
+        view: () => (react_2.default.createElement("div", null,
+            react_2.default.createElement("p", null, name))),
     });
 }
+exports.slotTestingDummyFactory = slotTestingDummyFactory;
 /**
  * @public
  *
  * Can be used as the slots prop for an xstate-tree view, will render a div containing a <p>slotName-slot<p> for each slot
  */
-export const genericSlotsTestingDummy = new Proxy({}, {
+exports.genericSlotsTestingDummy = new Proxy({}, {
     get(_target, prop) {
-        return () => (React.createElement("div", null,
-            React.createElement("p", null,
-                React.createElement(React.Fragment, null,
+        return () => (react_2.default.createElement("div", null,
+            react_2.default.createElement("p", null,
+                react_2.default.createElement(react_2.default.Fragment, null,
                     prop,
                     "-slot"))));
     },
@@ -52,12 +79,13 @@ export const genericSlotsTestingDummy = new Proxy({}, {
  * @param props - The actions/selectors props to pass to the view
  * @returns An object with the view's selectors, actions, and inState function props
  */
-export function buildViewProps(_view, props) {
+function buildViewProps(_view, props) {
     return {
         ...props,
         inState: (testState) => (state) => state === testState || testState.startsWith(state),
     };
 }
+exports.buildViewProps = buildViewProps;
 /**
  * @public
  *
@@ -73,7 +101,7 @@ export function buildViewProps(_view, props) {
  *
  * It also delays for 5ms to ensure any React re-rendering happens in response to the state transition
  */
-export function buildTestRootComponent(machine, logger) {
+function buildTestRootComponent(machine, logger) {
     if (!machine.meta) {
         throw new Error("Root machine has no meta");
     }
@@ -81,19 +109,19 @@ export function buildTestRootComponent(machine, logger) {
         (machine.meta.builderVersion === 2 && !machine.meta.View)) {
         throw new Error("Root machine has no associated view");
     }
-    const onChangeEmitter = new TinyEmitter();
+    const onChangeEmitter = new tiny_emitter_1.TinyEmitter();
     function addTransitionListener(listener) {
         onChangeEmitter.once("transition", listener);
     }
     return {
         rootComponent: function XstateTreeRootComponent() {
-            const [_, __, interpreter] = useMachine(machine, { devTools: true });
-            useEffect(() => {
+            const [_, __, interpreter] = (0, react_1.useMachine)(machine, { devTools: true });
+            (0, react_2.useEffect)(() => {
                 function handler(event) {
-                    recursivelySend(interpreter, event);
+                    (0, xstateTree_1.recursivelySend)(interpreter, event);
                 }
                 function changeHandler(ctx, oldCtx) {
-                    logger("onChange: ", JSON.stringify(difference(ctx, oldCtx), null, 2));
+                    logger("onChange: ", (0, utils_1.difference)(oldCtx, ctx));
                     onChangeEmitter.emit("changed", ctx);
                 }
                 function onEventHandler(e) {
@@ -106,9 +134,9 @@ export function buildTestRootComponent(machine, logger) {
                 interpreter.onChange(changeHandler);
                 interpreter.onEvent(onEventHandler);
                 interpreter.onTransition(onTransitionHandler);
-                emitter.on("event", handler);
+                xstateTree_1.emitter.on("event", handler);
                 return () => {
-                    emitter.off("event", handler);
+                    xstateTree_1.emitter.off("event", handler);
                     interpreter.off(changeHandler);
                     interpreter.off(onEventHandler);
                     interpreter.off(onTransitionHandler);
@@ -117,7 +145,7 @@ export function buildTestRootComponent(machine, logger) {
             if (!interpreter.initialized) {
                 return null;
             }
-            return React.createElement(XstateTreeView, { interpreter: interpreter });
+            return react_2.default.createElement(xstateTree_1.XstateTreeView, { interpreter: interpreter });
         },
         addTransitionListener,
         awaitTransition() {
@@ -129,3 +157,4 @@ export function buildTestRootComponent(machine, logger) {
         },
     };
 }
+exports.buildTestRootComponent = buildTestRootComponent;

package/lib/types.js

@@ -1 +1,2 @@
-export {};
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/useConstant.js

@@ -1,8 +1,12 @@
-import { useRef } from "react";
-export function useConstant(fn) {
-    const ref = useRef();
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useConstant = void 0;
+const react_1 = require("react");
+function useConstant(fn) {
+    const ref = (0, react_1.useRef)();
     if (!ref.current) {
         ref.current = { v: fn() };
     }
     return ref.current.v;
 }
+exports.useConstant = useConstant;

package/lib/useService.js

@@ -1,9 +1,12 @@
-import { useState, useRef, useEffect } from "react";
-import { isEqual } from "./utils";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useService = exports.loggingMetaOptions = void 0;
+const react_1 = require("react");
+const utils_1 = require("./utils");
 /**
  * @public
  */
-export function loggingMetaOptions(ignoredEvents, ignoreContext = undefined) {
+function loggingMetaOptions(ignoredEvents, ignoreContext = undefined) {
     const ignoredEventMap = new Map();
     ignoredEvents.forEach((event) => {
         ignoredEventMap.set(event, true);
@@ -15,17 +18,18 @@ export function loggingMetaOptions(ignoredEvents, ignoreContext = undefined) {
         },
     };
 }
+exports.loggingMetaOptions = loggingMetaOptions;
 /**
  * @internal
  */
-export function useService(service) {
-    const [current, setCurrent] = useState(service.state);
-    const [children, setChildren] = useState(service.children);
-    const childrenRef = useRef(new Map());
-    useEffect(() => {
+function useService(service) {
+    const [current, setCurrent] = (0, react_1.useState)(service.state);
+    const [children, setChildren] = (0, react_1.useState)(service.children);
+    const childrenRef = (0, react_1.useRef)(new Map());
+    (0, react_1.useEffect)(() => {
         childrenRef.current = children;
     }, [children]);
-    useEffect(function () {
+    (0, react_1.useEffect)(function () {
         // Set to current service state as there is a possibility
         // of a transition occurring between the initial useState()
         // initialization and useEffect() commit.
@@ -34,7 +38,7 @@ export function useService(service) {
         const listener = function (state) {
             if (state.changed) {
                 setCurrent(state);
-                if (!isEqual(childrenRef.current, service.children)) {
+                if (!(0, utils_1.isEqual)(childrenRef.current, service.children)) {
                     setChildren(new Map(service.children));
                 }
             }
@@ -44,7 +48,7 @@ export function useService(service) {
             sub.unsubscribe();
         };
     }, [service, setChildren]);
-    useEffect(() => {
+    (0, react_1.useEffect)(() => {
         function handler(event) {
             var _a, _b, _c;
             if (event.type.includes("done")) {
@@ -81,3 +85,4 @@ export function useService(service) {
         children,
     ];
 }
+exports.useService = useService;

package/lib/utils.js

@@ -1,12 +1,17 @@
-export function delay(ms = 0) {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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));
 }
-export function assertIsDefined(val, msg) {
+exports.delay = delay;
+function assertIsDefined(val, msg) {
     if (val === undefined || val === null) {
         throw new Error(`Expected 'val' to be defined, but received ${val} ${msg ? `(${msg})` : ""}`);
     }
 }
-export function assert(value, msg) {
+exports.assertIsDefined = assertIsDefined;
+function assert(value, msg) {
     if (typeof expect !== "undefined") {
         if (value !== true && msg) {
             console.error(msg);
@@ -20,7 +25,8 @@ export function assert(value, msg) {
         throw new Error("assertion failed");
     }
 }
-export function isLikelyPageLoad() {
+exports.assert = assert;
+function isLikelyPageLoad() {
     // without performance API, we can't tell if this is a page load
     if (typeof performance === "undefined") {
         return false;
@@ -28,91 +34,31 @@ export function isLikelyPageLoad() {
     // if it's been < 5 seconds since the page was loaded, it's probably a page load
     return performance.now() < 5000;
 }
-/*
- * @private
- *
- * Find the differences between two objects and push to a new object
- * (c) 2019 Chris Ferdinandi & Jascha Brinkmann, MIT License, https://gomakethings.com & https://twitter.com/jaschaio
- * @param  {Object} obj1 The original object
- * @param  {Object} obj2 The object to compare against it
- * @return {Object}      An object of differences between the two
- */
-export function difference(obj1, obj2) {
-    if (!obj2 || Object.prototype.toString.call(obj2) !== "[object Object]") {
-        return obj1;
-    }
-    const diffs = {};
-    let key;
-    /**
-     * Check if two arrays are equal
-     * @param  {Array}   arr1 The first array
-     * @param  {Array}   arr2 The second array
-     * @return {Boolean}      If true, both arrays are equal
-     */
-    const arraysMatch = function arraysMatch(arr1, arr2) {
-        if (arr1.length !== arr2.length)
-            return false;
-        for (let i = 0; i < arr1.length; i++) {
-            if (arr1[i] !== arr2[i])
-                return false;
+exports.isLikelyPageLoad = isLikelyPageLoad;
+function difference(a, b) {
+    const result = {};
+    for (const key in b) {
+        if (!a.hasOwnProperty(key)) {
+            result[key] = b[key];
         }
-        return true;
-    };
-    /**
-     * Compare two items and push non-matches to object
-     * @param  {*}      item1 The first item
-     * @param  {*}      item2 The second item
-     * @param  {String} key   The key in our object
-     */
-    function compare(item1, item2, key) {
-        const type1 = Object.prototype.toString.call(item1);
-        const type2 = Object.prototype.toString.call(item2);
-        if (type2 === "[object Undefined]") {
-            diffs[key] = null;
-            return;
-        }
-        if (type1 !== type2) {
-            diffs[key] = item2;
-            return;
-        }
-        if (type1 === "[object Object]") {
-            const objDiff = difference(item1, item2);
-            if (Object.keys(objDiff).length > 0) {
-                diffs[key] = objDiff;
-            }
-            return;
-        }
-        if (type1 === "[object Array]") {
-            if (!arraysMatch(item1, item2)) {
-                diffs[key] = item2;
+        else if (Array.isArray(b[key]) && Array.isArray(a[key])) {
+            if (JSON.stringify(b[key]) !== JSON.stringify(a[key])) {
+                result[key] = b[key];
             }
-            return;
         }
-        if (type1 === "[object Function]") {
-            if (item1.toString() !== item2.toString()) {
-                diffs[key] = item2;
+        else if (typeof b[key] === "object" && typeof a[key] === "object") {
+            const value = difference(a[key], b[key]);
+            if (Object.keys(value).length > 0) {
+                result[key] = value;
             }
         }
-        else {
-            if (item1 !== item2) {
-                diffs[key] = item2;
-            }
+        else if (b[key] !== a[key]) {
+            result[key] = b[key];
         }
     }
-    for (key in obj1) {
-        if (obj1.hasOwnProperty(key)) {
-            compare(obj1[key], obj2[key], key);
-        }
-    }
-    for (key in obj2) {
-        if (obj2.hasOwnProperty(key)) {
-            if (!obj1[key] && obj1[key] !== obj2[key]) {
-                diffs[key] = obj2[key];
-            }
-        }
-    }
-    return diffs;
+    return result;
 }
+exports.difference = difference;
 /*
  * @private
  *
@@ -122,7 +68,7 @@ export function difference(obj1, obj2) {
  * @param  {*}       obj2 The second item
  * @return {Boolean}       Returns true if they're equal in value
  */
-export function isEqual(obj1, obj2) {
+function isEqual(obj1, obj2) {
     /**
      * More accurately check the type of a JavaScript object
      * @param  {Object} obj The object
@@ -168,8 +114,19 @@ export function isEqual(obj1, obj2) {
         return areFunctionsEqual();
     return arePrimitivesEqual();
 }
-export function isNil(
+exports.isEqual = isEqual;
+function isNil(
 // eslint-disable-next-line @rushstack/no-new-null
 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

@@ -355,7 +355,21 @@ export declare function lazy<TMachine extends AnyStateMachine>(factory: () => Pr
  * The query/params/meta props are conditionally required based on the
  * route passed as the To parameter
  */
-export declare function Link<TRoute extends AnyRoute>({ to, children, testId, preloadOnHoverMs, preloadOnInteraction, onMouseDown: _onMouseDown, onMouseEnter: _onMouseEnter, onMouseLeave: _onMouseLeave, ...rest }: LinkProps<TRoute>): JSX.Element;
+export declare const Link: <TRoute extends AnyRoute>(props: {
+    to: TRoute;
+    children: React_2.ReactNode;
+    testId?: string | undefined;
+    /**
+     * onClick works as normal, but if you return false from it the navigation will not happen
+     */
+    onClick?: ((e: React_2.MouseEvent<HTMLAnchorElement>) => boolean | void) | undefined;
+    preloadOnInteraction?: boolean | undefined;
+    preloadOnHoverMs?: number | undefined;
+} & RouteArguments<TRoute extends Route<infer TParams, any, any, any> ? TParams : undefined, TRoute extends Route<any, infer TQuery, any, any> ? TQuery : undefined, TRoute extends Route<any, any, any, infer TMeta> ? TMeta : undefined> & Omit<React_2.AnchorHTMLAttributes<HTMLAnchorElement>, "href" | "onClick"> & {
+    ref?: React_2.ForwardedRef<HTMLAnchorElement> | undefined;
+}) => ReturnType<typeof LinkInner>;
+
+declare function LinkInner<TRoute extends AnyRoute>({ to, children, testId, preloadOnHoverMs, preloadOnInteraction, onMouseDown: _onMouseDown, onMouseEnter: _onMouseEnter, onMouseLeave: _onMouseLeave, ...rest }: LinkProps<TRoute>, ref: React_2.ForwardedRef<HTMLAnchorElement>): JSX.Element;
 
 /**
  * @public
@@ -644,6 +658,7 @@ export declare type Selectors<TMachine extends AnyStateMachine, TOut> = (args: {
     ctx: ContextFrom<TMachine>;
     canHandleEvent: CanHandleEvent<TMachine>;
     inState: MatchesFrom<TMachine>;
+    meta?: unknown;
 }) => TOut;
 
 /**
@@ -748,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.