@koordinates/xstate-tree 4.2.0 → 4.3.0-beta.2

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: ", JSON.stringify((0, utils_1.difference)(ctx, oldCtx), null, 2));
                     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.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,6 +34,7 @@ export function isLikelyPageLoad() {
     // if it's been < 5 seconds since the page was loaded, it's probably a page load
     return performance.now() < 5000;
 }
+exports.isLikelyPageLoad = isLikelyPageLoad;
 /*
  * @private
  *
@@ -37,7 +44,7 @@ export function isLikelyPageLoad() {
  * @param  {Object} obj2 The object to compare against it
  * @return {Object}      An object of differences between the two
  */
-export function difference(obj1, obj2) {
+function difference(obj1, obj2) {
     if (!obj2 || Object.prototype.toString.call(obj2) !== "[object Object]") {
         return obj1;
     }
@@ -113,6 +120,7 @@ export function difference(obj1, obj2) {
     }
     return diffs;
 }
+exports.difference = difference;
 /*
  * @private
  *
@@ -122,7 +130,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 +176,10 @@ 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;

package/lib/xstate-tree.d.ts

@@ -51,6 +51,7 @@ export declare type AnyRoute = {
     navigate: any;
     getEvent: any;
     event: string;
+    preload: any;
     basePath: string;
     history: () => XstateTreeHistory;
     parent?: AnyRoute;
@@ -127,6 +128,7 @@ export declare function buildCreateRoute(history: () => XstateTreeHistory, baseP
         querySchema?: TQuerySchema | undefined;
         meta?: TMeta | undefined;
         redirect?: RouteRedirect<MergeRouteTypes<RouteParams<TBaseRoute>, ResolveZodType<TParamsSchema>>, ResolveZodType<TQuerySchema>, MergeRouteTypes<RouteMeta<TBaseRoute>, TMeta> & SharedMeta> | undefined;
+        preload?: RouteArgumentFunctions<void, MergeRouteTypes<RouteParams<TBaseRoute>, ResolveZodType<TParamsSchema>>, ResolveZodType<TQuerySchema>, MergeRouteTypes<RouteMeta<TBaseRoute>, TMeta>, RouteArguments<MergeRouteTypes<RouteParams<TBaseRoute>, ResolveZodType<TParamsSchema>>, ResolveZodType<TQuerySchema>, MergeRouteTypes<RouteMeta<TBaseRoute>, TMeta>>> | undefined;
     }) => Route<MergeRouteTypes<RouteParams<TBaseRoute>, ResolveZodType<TParamsSchema>>, ResolveZodType<TQuerySchema>, TEvent, MergeRouteTypes<RouteMeta<TBaseRoute>, TMeta> & SharedMeta>;
     route<TBaseRoute_1 extends AnyRoute>(baseRoute?: TBaseRoute_1 | undefined): <TEvent_1 extends string, TParamsSchema_1 extends Z.ZodObject<any, "strip", Z.ZodTypeAny, {
         [x: string]: any;
@@ -136,7 +138,7 @@ export declare function buildCreateRoute(history: () => XstateTreeHistory, baseP
         [x: string]: any;
     }, {
         [x: string]: any;
-    }> | undefined, TMeta_1 extends Record<string, unknown>>({ event, matcher, reverser, paramsSchema, querySchema, redirect, }: {
+    }> | undefined, TMeta_1 extends Record<string, unknown>>({ event, matcher, reverser, paramsSchema, querySchema, redirect, preload, }: {
         event: TEvent_1;
         paramsSchema?: TParamsSchema_1 | undefined;
         querySchema?: TQuerySchema_1 | undefined;
@@ -157,6 +159,7 @@ export declare function buildCreateRoute(history: () => XstateTreeHistory, baseP
          * Supplied with params/query objects and constructs the correct URL based on them
          */
         reverser: RouteArgumentFunctions<string, MergeRouteTypes<RouteParams<TBaseRoute_1>, ResolveZodType<TParamsSchema_1>>, ResolveZodType<TQuerySchema_1>, MergeRouteTypes<RouteMeta<TBaseRoute_1>, TMeta_1>, RouteArguments<MergeRouteTypes<RouteParams<TBaseRoute_1>, ResolveZodType<TParamsSchema_1>>, ResolveZodType<TQuerySchema_1>, MergeRouteTypes<RouteMeta<TBaseRoute_1>, TMeta_1>>>;
+        preload?: RouteArgumentFunctions<void, MergeRouteTypes<RouteParams<TBaseRoute_1>, ResolveZodType<TParamsSchema_1>>, ResolveZodType<TQuerySchema_1>, MergeRouteTypes<RouteMeta<TBaseRoute_1>, TMeta_1>, RouteArguments<MergeRouteTypes<RouteParams<TBaseRoute_1>, ResolveZodType<TParamsSchema_1>>, ResolveZodType<TQuerySchema_1>, MergeRouteTypes<RouteMeta<TBaseRoute_1>, TMeta_1>>> | undefined;
     }) => Route<MergeRouteTypes<RouteParams<TBaseRoute_1>, ResolveZodType<TParamsSchema_1>>, ResolveZodType<TQuerySchema_1>, TEvent_1, MergeRouteTypes<RouteMeta<TBaseRoute_1>, TMeta_1> & SharedMeta>;
 };
 
@@ -352,7 +355,7 @@ 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, ...rest }: LinkProps<TRoute>): JSX.Element;
+export declare function Link<TRoute extends AnyRoute>({ to, children, testId, preloadOnHoverMs, preloadOnInteraction, onMouseDown: _onMouseDown, onMouseEnter: _onMouseEnter, onMouseLeave: _onMouseLeave, ...rest }: LinkProps<TRoute>): JSX.Element;
 
 /**
  * @public
@@ -365,6 +368,8 @@ export declare type LinkProps<TRoute extends AnyRoute, TRouteParams = TRoute ext
      * onClick works as normal, but if you return false from it the navigation will not happen
      */
     onClick?: (e: React_2.MouseEvent<HTMLAnchorElement>) => boolean | void;
+    preloadOnInteraction?: boolean;
+    preloadOnHoverMs?: number;
 } & RouteArguments<TRouteParams, TRouteQuery, TRouteMeta> & Omit<React_2.AnchorHTMLAttributes<HTMLAnchorElement>, "href" | "onClick">;
 
 /**
@@ -524,6 +529,17 @@ export declare type Route<TParams, TQuery, TEvent, TMeta> = {
      * url via History.push
      */
     navigate: RouteArgumentFunctions<void, TParams, TQuery, TMeta>;
+    /**
+     * Preloads data required by the route. Passed in query/params/meta objects as required by the route
+     *
+     * Must be idempotent as it may be called multiple times
+     *
+     * Can be called on
+     * * Mouse down on a Link
+     * * Hovering on a Link
+     * * When a route is matched
+     */
+    preload: RouteArgumentFunctions<void, TParams, TQuery, TMeta>;
     /**
      * Returns an event object for this route based on the supplied params/query/meta
      *