@koordinates/xstate-tree 4.5.0 → 5.1.0-next.2

package/lib/builders.js

@@ -3,116 +3,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.buildRoutingMachine = exports.viewToMachine = exports.createXStateTreeMachine = exports.buildXStateTreeMachine = exports.buildView = exports.buildActions = exports.buildSelectors = void 0;
+exports.buildRoutingMachine = exports.viewToMachine = exports.createXStateTreeMachine = void 0;
 const react_1 = __importDefault(require("react"));
 const xstate_1 = require("xstate");
 const slots_1 = require("./slots");
-/**
- * @public
- *
- * Factory function for selectors. The selectors function is passed three arguments:
- * - `ctx` - the current context of the machines state
- * - `canHandleEvent` - a function that can be used to determine if the machine can handle a
- * given event, by simulating sending the event and seeing if a stat change would happen.
- * Handles guards
- * - `inState` - equivalent to xstates `state.matches`, allows checking if the machine is in a given state
- *
- * The resulting selector function has memoization. It will return the same value until the
- * machine's state changes or the machine's context changes
- * @param machine - The machine to create the selectors for
- * @param selectors - The selector function
- * @returns The selectors - ready to be passed to {@link buildActions}
- * @deprecated use {@link createXStateTreeMachine} instead
- */
-function buildSelectors(__machine, selectors) {
-    let lastState = undefined;
-    let lastCachedResult = undefined;
-    let lastCtxRef = undefined;
-    return (ctx, canHandleEvent, inState, currentState) => {
-        // Handles caching to ensure stable references to selector results
-        // Only re-run the selector if
-        // * The reference to the context object has changed (the context object should never be mutated)
-        // * The last state we ran the selectors in has changed. This is to ensure `canHandleEvent` and `inState` calls aren't stale
-        if (lastCtxRef === ctx &&
-            lastState === currentState &&
-            lastCachedResult !== undefined) {
-            return lastCachedResult;
-        }
-        else {
-            const result = selectors(ctx, canHandleEvent, inState, currentState);
-            lastCtxRef = ctx;
-            lastCachedResult = result;
-            lastState = currentState;
-            return result;
-        }
-    };
-}
-exports.buildSelectors = buildSelectors;
-/**
- * @public
- *
- * Factory function for actions. The actions function is passed two arguments:
- * - `send` - the interpreters send function, which can be used to send events to the machine
- * - `selectors` - the output of the selectors function from {@link buildSelectors}
- *
- * The resulting action function will only be called once per invocation of a machine.
- * The selectors are passed in as a proxy to always read the latest selector value
- *
- * @param machine - The machine to create the actions for
- * @param selectors - The selectors function
- * @param actions - The action function
- * @returns The actions function - ready to be passed to {@link buildView}
- * @deprecated use {@link createXStateTreeMachine} instead
- * */
-function buildActions(__machine, __selectors, actions) {
-    return actions;
-}
-exports.buildActions = buildActions;
-/**
- * @public
- *
- * Factory function for views. The view is passed four props:
- * - `slots` - the slots object, which can be used to render the children of the view invoked by the machine
- * - `actions` - the output of the actions function from {@link buildActions}
- * - `selectors` - the output of the selectors function from {@link buildSelectors}
- * - `inState` - equivalent to xstates `state.matches`, allows checking if the machine is in a given state
- *
- * The resulting view is wrapped in React.memo, it will re-render when the actions or selectors reference changes
- *
- * @param machine - The machine to create the view for
- * @param selectors - The selectors function from {@link buildSelectors}
- * @param actions - The actions function from {@link buildActions}
- * @param slots - The array of slots that can be rendered by the view
- * @param view - The view function
- * @returns The React view
- * @deprecated use {@link createXStateTreeMachine} instead
- */
-function buildView(__machine, __selectors, __actions, __slots, view) {
-    return react_1.default.memo(view);
-}
-exports.buildView = buildView;
-/**
- * @public
- *
- * staples xstate machine and xstate-tree metadata together into an xstate-tree machine
- *
- * @param machine - The machine to staple the selectors/actions/slots/view to
- * @param metadata - The xstate-tree metadata to staple to the machine
- * @returns The xstate-tree machine, ready to be invoked by other xstate-machines or used with `buildRootComponent`
- * @deprecated use {@link createXStateTreeMachine} instead
- */
-function buildXStateTreeMachine(machine, meta) {
-    const copiedMeta = { ...meta };
-    copiedMeta.xstateTreeMachine = true;
-    machine.config.meta = {
-        ...machine.config.meta,
-        ...copiedMeta,
-        builderVersion: 1,
-    };
-    machine.meta = { ...machine.meta, ...copiedMeta, builderVersion: 1 };
-    return machine;
-}
-exports.buildXStateTreeMachine = buildXStateTreeMachine;
 /**
  * @public
  * Creates an xstate-tree machine from an xstate-machine
@@ -128,26 +22,16 @@ exports.buildXStateTreeMachine = buildXStateTreeMachine;
  * @param options - the xstate-tree options
  */
 function createXStateTreeMachine(machine, options) {
-    var _a, _b, _c;
-    const selectors = (_a = options.selectors) !== null && _a !== void 0 ? _a : (({ ctx }) => ctx);
-    const actions = (_b = options.actions) !== null && _b !== void 0 ? _b : (() => ({}));
-    const xstateTreeMeta = {
-        selectors,
-        actions,
+    const selectors = options.selectors ?? (({ ctx }) => ctx);
+    const actions = options.actions ?? (() => ({}));
+    const machineWithMeta = machine;
+    machineWithMeta._xstateTree = {
+        selectors: selectors,
+        actions: actions,
         View: options.View,
-        slots: (_c = options.slots) !== null && _c !== void 0 ? _c : [],
-    };
-    machine.meta = {
-        ...machine.meta,
-        ...xstateTreeMeta,
-        builderVersion: 2,
-    };
-    machine.config.meta = {
-        ...machine.config.meta,
-        ...xstateTreeMeta,
-        builderVersion: 2,
+        slots: (options.slots ?? []),
     };
-    return machine;
+    return machineWithMeta;
 }
 exports.createXStateTreeMachine = createXStateTreeMachine;
 /**
@@ -186,9 +70,7 @@ function buildRoutingMachine(_routes, mappings) {
             ...acc,
             [event]: {
                 invoke: {
-                    src: (_ctx, e) => {
-                        return mappings[e.type];
-                    },
+                    src: event,
                     id: contentSlot.getId(),
                 },
             },
@@ -200,7 +82,9 @@ function buildRoutingMachine(_routes, mappings) {
             target: `.${event}`,
         },
     }), {});
-    const machine = (0, xstate_1.createMachine)({
+    const machine = (0, xstate_1.setup)({
+        actors: mappings,
+    }).createMachine({
         on: {
             ...mappingsToEvents,
         },

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.TestRoutingContext = exports.useActiveRouteEvents = exports.useRouteArgsIfActive = exports.useIsRouteActive = exports.matchRoute = exports.buildCreateRoute = exports.Link = exports.genericSlotsTestingDummy = exports.onBroadcast = exports.buildRootComponent = exports.broadcast = void 0;
 __exportStar(require("./builders"), exports);
 __exportStar(require("./slots"), exports);
 var xstateTree_1 = require("./xstateTree");
@@ -23,10 +23,7 @@ Object.defineProperty(exports, "buildRootComponent", { enumerable: true, get: fu
 Object.defineProperty(exports, "onBroadcast", { enumerable: true, get: function () { return xstateTree_1.onBroadcast; } });
 __exportStar(require("./types"), exports);
 var testingUtilities_1 = require("./testingUtilities");
-Object.defineProperty(exports, "buildTestRootComponent", { enumerable: true, get: function () { return testingUtilities_1.buildTestRootComponent; } });
-Object.defineProperty(exports, "buildViewProps", { enumerable: true, get: function () { return testingUtilities_1.buildViewProps; } });
 Object.defineProperty(exports, "genericSlotsTestingDummy", { enumerable: true, get: function () { return testingUtilities_1.genericSlotsTestingDummy; } });
-Object.defineProperty(exports, "slotTestingDummyFactory", { enumerable: true, get: function () { return testingUtilities_1.slotTestingDummyFactory; } });
 var routing_1 = require("./routing");
 Object.defineProperty(exports, "Link", { enumerable: true, get: function () { return routing_1.Link; } });
 Object.defineProperty(exports, "buildCreateRoute", { enumerable: true, get: function () { return routing_1.buildCreateRoute; } });

package/lib/lazy.js

@@ -18,41 +18,41 @@ const slots_1 = require("./slots");
  * @param options - configure loading component and context to invoke machine with
  * @returns an xstate-tree machine that wraps the promise, invoking the resulting machine when it resolves
  */
-function lazy(factory, { Loader = () => null, withContext = () => ({}), } = {}) {
+function lazy(factory, { Loader = () => null, input } = {}) {
     const loadedMachineSlot = (0, slots_1.singleSlot)("loadedMachine");
     const slots = [loadedMachineSlot];
-    const machine = (0, xstate_1.createMachine)({
+    const machine = (0, xstate_1.setup)({}).createMachine({
         initial: "loading",
+        context: {},
         states: {
             loading: {
                 invoke: {
-                    src: () => factory,
-                    onDone: "rendering",
-                },
-            },
-            rendering: {
-                invoke: {
-                    id: loadedMachineSlot.getId(),
-                    src: (_ctx, e) => {
-                        return e.data.withContext({ ...e.data.context, ...withContext() });
+                    src: (0, xstate_1.fromPromise)(factory),
+                    onDone: {
+                        target: "rendering",
+                        actions: (0, xstate_1.assign)({
+                            loadedMachine: ({ spawn, event }) => spawn(event.output, {
+                                id: loadedMachineSlot.getId(),
+                                input,
+                            }),
+                        }),
                     },
                 },
             },
+            rendering: {},
         },
     });
-    const selectors = (0, builders_1.buildSelectors)(machine, (ctx) => ctx);
-    const actions = (0, builders_1.buildActions)(machine, selectors, (_send, _selectors) => { });
-    const view = (0, builders_1.buildView)(machine, selectors, actions, slots, ({ slots, inState }) => {
-        if (inState("loading")) {
-            return react_1.default.createElement(Loader, null);
-        }
-        return react_1.default.createElement(slots.loadedMachine, null);
-    });
-    return (0, builders_1.buildXStateTreeMachine)(machine, {
-        actions,
-        selectors,
+    return (0, builders_1.createXStateTreeMachine)(machine, {
         slots,
-        view,
+        selectors({ inState }) {
+            return { loading: inState("loading") };
+        },
+        View({ selectors, slots }) {
+            if (selectors.loading) {
+                return react_1.default.createElement(Loader, null);
+            }
+            return react_1.default.createElement(slots.loadedMachine, null);
+        },
     });
 }
 exports.lazy = lazy;

package/lib/routing/Link.js

@@ -34,13 +34,13 @@ function LinkInner({ to, children, testId, preloadOnHoverMs, preloadOnInteractio
     const href = (0, useHref_1.useHref)(to, params, query);
     const onMouseDown = preloadOnInteraction
         ? (e) => {
-            _onMouseDown === null || _onMouseDown === void 0 ? void 0 : _onMouseDown(e);
+            _onMouseDown?.(e);
             to.preload({ params, query, meta });
         }
         : undefined;
     const onMouseEnter = preloadOnHoverMs !== undefined
         ? (e) => {
-            _onMouseEnter === null || _onMouseEnter === void 0 ? void 0 : _onMouseEnter(e);
+            _onMouseEnter?.(e);
             timeout = setTimeout(() => {
                 to.preload({ params, query, meta });
             }, preloadOnHoverMs);
@@ -48,15 +48,14 @@ function LinkInner({ to, children, testId, preloadOnHoverMs, preloadOnInteractio
         : undefined;
     const onMouseLeave = preloadOnHoverMs !== undefined
         ? (e) => {
-            _onMouseLeave === null || _onMouseLeave === void 0 ? void 0 : _onMouseLeave(e);
+            _onMouseLeave?.(e);
             if (timeout !== undefined) {
                 clearTimeout(timeout);
             }
         }
         : undefined;
-    return (react_1.default.createElement("a", { ...props, ref: ref, href: href, "data-testid": testId, onMouseDown: onMouseDown !== null && onMouseDown !== void 0 ? onMouseDown : _onMouseDown, onMouseEnter: onMouseEnter !== null && onMouseEnter !== void 0 ? onMouseEnter : _onMouseEnter, onMouseLeave: onMouseLeave !== null && onMouseLeave !== void 0 ? onMouseLeave : _onMouseLeave, "data-xstate-tree": true, onClick: (e) => {
-            var _a;
-            if (((_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, e)) === false) {
+    return (react_1.default.createElement("a", { ...props, ref: ref, href: href, "data-testid": testId, onMouseDown: onMouseDown ?? _onMouseDown, onMouseEnter: onMouseEnter ?? _onMouseEnter, onMouseLeave: onMouseLeave ?? _onMouseLeave, "data-xstate-tree": true, onClick: (e) => {
+            if (props.onClick?.(e) === false) {
                 return;
             }
             // Holding the Command key on Mac or the Control Key on Windows while clicking the link will open a new tab/window

package/lib/routing/createRoute/createRoute.js

@@ -14,7 +14,7 @@ const joinRoutes_1 = require("../joinRoutes");
  */
 function buildCreateRoute(history, basePath) {
     function navigate({ history, url, meta, }) {
-        const method = (meta === null || meta === void 0 ? void 0 : meta.replace) ? history.replace : history.push;
+        const method = meta?.replace ? history.replace : history.push;
         method(url, {
             meta,
             previousUrl: `${window.location.pathname}${window.location.search}`,
@@ -90,12 +90,11 @@ function buildCreateRoute(history, basePath) {
                     reverser: reverser,
                     // @ts-ignore :cry:
                     getEvent(args) {
-                        const { params, query, meta } = args !== null && args !== void 0 ? args : {};
+                        const { params, query, meta } = args ?? {};
                         return { type: event, params, query, meta };
                     },
                     // @ts-ignore :cry:
                     matches(suppliedUrl, search) {
-                        var _a, _b, _c;
                         const fullUrl = suppliedUrl.endsWith("/")
                             ? suppliedUrl
                             : suppliedUrl + "/";
@@ -115,7 +114,7 @@ function buildCreateRoute(history, basePath) {
                             if (!url.startsWith("/")) {
                                 url = "/" + url;
                             }
-                            params = { ...params, ...((_a = parentMatch.params) !== null && _a !== void 0 ? _a : {}) };
+                            params = { ...params, ...(parentMatch.params ?? {}) };
                         }
                         const matches = matcher(url, (0, query_string_1.parse)(search));
                         // if there is any URL left after matching this route, the last to match
@@ -125,7 +124,7 @@ function buildCreateRoute(history, basePath) {
                         }
                         const fullParams = {
                             ...params,
-                            ...((_b = matches.params) !== null && _b !== void 0 ? _b : {}),
+                            ...(matches.params ?? {}),
                         };
                         if (fullParamsSchema) {
                             fullParamsSchema.parse(fullParams);
@@ -137,12 +136,12 @@ function buildCreateRoute(history, basePath) {
                             originalUrl: `${fullUrl}${search}`,
                             type: event,
                             params: fullParams,
-                            query: (_c = matches.query) !== null && _c !== void 0 ? _c : {},
+                            query: matches.query ?? {},
                         };
                     },
                     // @ts-ignore :cry:
                     reverse(args) {
-                        const { params, query } = args !== null && args !== void 0 ? args : {};
+                        const { params, query } = args ?? {};
                         const parentRoutes = getParentArray();
                         const baseUrl = parentRoutes
                             .map((route) => route.reverser({ params }))
@@ -151,7 +150,7 @@ function buildCreateRoute(history, basePath) {
                     },
                     // @ts-ignore :cry:
                     navigate(args) {
-                        const { params, query, meta } = args !== null && args !== void 0 ? args : {};
+                        const { params, query, meta } = args ?? {};
                         const url = this.reverse({ params, query });
                         navigate({
                             url: (0, joinRoutes_1.joinRoutes)(this.basePath, url),
@@ -163,9 +162,9 @@ function buildCreateRoute(history, basePath) {
                     preload(args) {
                         const parentRoutes = getParentArray();
                         parentRoutes.forEach((route) => {
-                            route === null || route === void 0 ? void 0 : route.preload(args);
+                            route?.preload(args);
                         });
-                        preload === null || preload === void 0 ? void 0 : preload(args);
+                        preload?.(args);
                     },
                 };
             };

package/lib/routing/handleLocationChange/handleLocationChange.js

@@ -25,14 +25,14 @@ function handleLocationChange(routes, basePath, path, search, meta) {
     }
     else {
         const matchedEvent = match.event;
-        matchedEvent.meta = { ...(meta !== null && meta !== void 0 ? meta : {}) };
+        matchedEvent.meta = { ...(meta ?? {}) };
         matchedEvent.meta.indexEvent = true;
         const { params, query } = match.event;
         const routingEvents = [];
         let route = match.route;
         route.preload({ params, query, meta: matchedEvent.meta });
         while (route.parent) {
-            routingEvents.push(route.parent.getEvent({ params, query: {}, meta: { ...(meta !== null && meta !== void 0 ? meta : {}) } }));
+            routingEvents.push(route.parent.getEvent({ params, query: {}, meta: { ...(meta ?? {}) } }));
             route = route.parent;
         }
         const clonedRoutingEvents = [...routingEvents];

package/lib/routing/matchRoute/matchRoute.js

@@ -5,7 +5,6 @@ exports.matchRoute = void 0;
  * @public
  */
 function matchRoute(routes, basePath, path, search) {
-    var _a;
     const realBase = basePath.endsWith("/") ? basePath.slice(0, -1) : basePath;
     const realPath = (() => {
         if (path.startsWith(realBase) && realBase.length > 0) {
@@ -13,7 +12,7 @@ function matchRoute(routes, basePath, path, search) {
         }
         return path;
     })();
-    const [matchingRoute, event] = (_a = routes
+    const [matchingRoute, event] = routes
         .map((route) => {
         try {
             const match = route.matches(realPath, search);
@@ -28,7 +27,7 @@ function matchRoute(routes, basePath, path, search) {
         }
         return [undefined, undefined];
     })
-        .find(([match]) => Boolean(match))) !== null && _a !== void 0 ? _a : [undefined, undefined];
+        .find(([match]) => Boolean(match)) ?? [undefined, undefined];
     if (matchingRoute === undefined) {
         return { type: "no-matches" };
     }

package/lib/routing/providers.js

@@ -28,12 +28,11 @@ exports.useInRoutingContext = useInRoutingContext;
  * 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 {
         const context = useRoutingContext();
-        return (_a = context.activeRouteEvents) === null || _a === void 0 ? void 0 : _a.current;
+        return context.activeRouteEvents?.current;
     }
-    catch (_b) {
+    catch {
         return undefined;
     }
 }

package/lib/routing/useRouteArgsIfActive.js

@@ -19,7 +19,7 @@ function useRouteArgsIfActive(route) {
     if (!isActive) {
         return undefined;
     }
-    const activeRoute = activeRoutes === null || activeRoutes === void 0 ? void 0 : activeRoutes.find((activeRoute) => activeRoute.type === route.event);
+    const activeRoute = activeRoutes?.find((activeRoute) => activeRoute.type === route.event);
     (0, utils_1.assertIsDefined)(activeRoute, "active route is not defined, but the route is active??");
     return {
         params: activeRoute.params,

package/lib/testingUtilities.js

@@ -1,61 +1,11 @@
 "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;
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.buildTestRootComponent = exports.buildViewProps = exports.genericSlotsTestingDummy = exports.slotTestingDummyFactory = void 0;
+exports.genericSlotsTestingDummy = void 0;
 // ignore file coverage
-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
- *
- * Creates a dummy machine that just renders the supplied string - useful for rendering xstate-tree views in isolation
- *
- * @param name - the string to render in the machines view
- * @returns a dummy machine that renders a div containing the supplied string
- */
-function slotTestingDummyFactory(name) {
-    return (0, builders_1.buildXStateTreeMachine)((0, xstate_1.createMachine)({
-        id: name,
-        initial: "idle",
-        states: {
-            idle: {},
-        },
-    }), {
-        actions: () => ({}),
-        selectors: () => ({}),
-        slots: [],
-        view: () => (react_2.default.createElement("div", null,
-            react_2.default.createElement("p", null, name))),
-    });
-}
-exports.slotTestingDummyFactory = slotTestingDummyFactory;
+const react_1 = __importDefault(require("react"));
 /**
  * @public
  *
@@ -63,98 +13,10 @@ exports.slotTestingDummyFactory = slotTestingDummyFactory;
  */
 exports.genericSlotsTestingDummy = new Proxy({}, {
     get(_target, prop) {
-        return () => (react_2.default.createElement("div", null,
-            react_2.default.createElement("p", null,
-                react_2.default.createElement(react_2.default.Fragment, null,
+        return () => (react_1.default.createElement("div", null,
+            react_1.default.createElement("p", null,
+                react_1.default.createElement(react_1.default.Fragment, null,
                     prop,
                     "-slot"))));
     },
 });
-/**
- * @public
- *
- * Aids in type inference for creating props objects for xstate-tree views.
- *
- * @param view - The view to create props for
- * @param props - The actions/selectors props to pass to the view
- * @returns An object with the view's selectors, actions, and inState function props
- */
-function buildViewProps(_view, props) {
-    return {
-        ...props,
-        inState: (testState) => (state) => state === testState || testState.startsWith(state),
-    };
-}
-exports.buildViewProps = buildViewProps;
-/**
- * @public
- *
- * Sets up a root component for use in an \@xstate/test model backed by \@testing-library/react for the component
- *
- * The logger argument should just be a simple function which forwards the arguments to console.log,
- * this is needed because Wallaby.js only displays console logs in tests that come from source code, not library code,
- * so any logs from inside this file don't show up in the test explorer
- *
- * The returned object has a `rootComponent` property and a function, `awaitTransition`, that returns a Promise
- * when called that is resolved the next time the underlying machine transitions. This can be used in the \@xstate/test
- * model to ensure after an event action is executed the test in the next state doesn't run until after the machine transitions
- *
- * It also delays for 5ms to ensure any React re-rendering happens in response to the state transition
- */
-function buildTestRootComponent(machine, logger) {
-    if (!machine.meta) {
-        throw new Error("Root machine has no meta");
-    }
-    if ((machine.meta.builderVersion === 1 && !machine.meta.view) ||
-        (machine.meta.builderVersion === 2 && !machine.meta.View)) {
-        throw new Error("Root machine has no associated view");
-    }
-    const onChangeEmitter = new tiny_emitter_1.TinyEmitter();
-    function addTransitionListener(listener) {
-        onChangeEmitter.once("transition", listener);
-    }
-    return {
-        rootComponent: function XstateTreeRootComponent() {
-            const [_, __, interpreter] = (0, react_1.useMachine)(machine, { devTools: true });
-            (0, react_2.useEffect)(() => {
-                function handler(event) {
-                    (0, xstateTree_1.recursivelySend)(interpreter, event);
-                }
-                function changeHandler(ctx, oldCtx) {
-                    logger("onChange: ", (0, utils_1.difference)(oldCtx, ctx));
-                    onChangeEmitter.emit("changed", ctx);
-                }
-                function onEventHandler(e) {
-                    logger("onEvent", e);
-                }
-                function onTransitionHandler(s) {
-                    logger("State: ", s.value);
-                    onChangeEmitter.emit("transition");
-                }
-                interpreter.onChange(changeHandler);
-                interpreter.onEvent(onEventHandler);
-                interpreter.onTransition(onTransitionHandler);
-                xstateTree_1.emitter.on("event", handler);
-                return () => {
-                    xstateTree_1.emitter.off("event", handler);
-                    interpreter.off(changeHandler);
-                    interpreter.off(onEventHandler);
-                    interpreter.off(onTransitionHandler);
-                };
-            }, [interpreter]);
-            if (!interpreter.initialized) {
-                return null;
-            }
-            return react_2.default.createElement(xstateTree_1.XstateTreeView, { interpreter: interpreter });
-        },
-        addTransitionListener,
-        awaitTransition() {
-            return new Promise((res) => {
-                addTransitionListener(() => {
-                    setTimeout(res, 50);
-                });
-            });
-        },
-    };
-}
-exports.buildTestRootComponent = buildTestRootComponent;