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

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/xstateTree.js

@@ -1,13 +1,42 @@
-import { useMachine } from "@xstate/react";
-import memoize from "fast-memoize";
-import React, { useCallback, useEffect, useMemo, useRef, useState, } from "react";
-import { TinyEmitter } from "tiny-emitter";
-import { handleLocationChange, RoutingContext, } from "./routing";
-import { useActiveRouteEvents } from "./routing/providers";
-import { useConstant } from "./useConstant";
-import { useService } from "./useService";
-import { assertIsDefined, isLikelyPageLoad } from "./utils";
-export const emitter = new TinyEmitter();
+"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.buildRootComponent = exports.recursivelySend = exports.XstateTreeView = exports.getMultiSlotViewForChildren = exports.onBroadcast = exports.broadcast = exports.emitter = void 0;
+const react_1 = require("@xstate/react");
+const fast_memoize_1 = __importDefault(require("fast-memoize"));
+const react_2 = __importStar(require("react"));
+const tiny_emitter_1 = require("tiny-emitter");
+const routing_1 = require("./routing");
+const providers_1 = require("./routing/providers");
+const useConstant_1 = require("./useConstant");
+const useService_1 = require("./useService");
+const utils_1 = require("./utils");
+exports.emitter = new tiny_emitter_1.TinyEmitter();
 /**
  * @public
  *
@@ -15,10 +44,11 @@ export const emitter = new TinyEmitter();
  *
  * @param event - the event to broadcast
  */
-export function broadcast(event) {
+function broadcast(event) {
     console.debug("[xstate-tree] broadcasting event ", event.type);
-    emitter.emit("event", event);
+    exports.emitter.emit("event", event);
 }
+exports.broadcast = broadcast;
 /**
  * @public
  *
@@ -26,21 +56,22 @@ export function broadcast(event) {
  *
  * @param handler - the handler to call when an event is broadcast
  */
-export function onBroadcast(handler) {
-    emitter.on("event", handler);
+function onBroadcast(handler) {
+    exports.emitter.on("event", handler);
     return () => {
-        emitter.off("event", handler);
+        exports.emitter.off("event", handler);
     };
 }
+exports.onBroadcast = onBroadcast;
 function cacheKeyForInterpreter(
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 interpreter) {
     return interpreter.sessionId;
 }
-const getViewForInterpreter = memoize((interpreter) => {
-    return React.memo(function InterpreterView() {
-        const activeRouteEvents = useActiveRouteEvents();
-        useEffect(() => {
+const getViewForInterpreter = (0, fast_memoize_1.default)((interpreter) => {
+    return react_2.default.memo(function InterpreterView() {
+        const activeRouteEvents = (0, providers_1.useActiveRouteEvents)();
+        (0, react_2.useEffect)(() => {
             if (activeRouteEvents) {
                 activeRouteEvents.forEach((event) => {
                     if (interpreter.state.nextEvents.includes(event.type)) {
@@ -49,7 +80,7 @@ const getViewForInterpreter = memoize((interpreter) => {
                 });
             }
         }, []);
-        return React.createElement(XstateTreeView, { interpreter: interpreter });
+        return react_2.default.createElement(XstateTreeView, { interpreter: interpreter });
     });
 }, 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -57,35 +88,35 @@ const getViewForInterpreter = memoize((interpreter) => {
 /**
  * @private
  */
-export const getMultiSlotViewForChildren = memoize((parent, slot) => {
-    return React.memo(function MultiSlotView() {
-        const [_, children] = useService(parent);
+exports.getMultiSlotViewForChildren = (0, fast_memoize_1.default)((parent, slot) => {
+    return react_2.default.memo(function MultiSlotView() {
+        const [_, children] = (0, useService_1.useService)(parent);
         const interpreters = [...children.values()];
         // Once the interpreter is stopped, initialized gets set to false
         // We don't want to render stopped interpreters
         const interpretersWeCareAbout = interpreters.filter((i) => i.id.includes(slot) && i.initialized);
-        return (React.createElement(XstateTreeMultiSlotView, { childInterpreters: interpretersWeCareAbout }));
+        return (react_2.default.createElement(XstateTreeMultiSlotView, { childInterpreters: interpretersWeCareAbout }));
     });
 }, {
     serializer: (args) => `${cacheKeyForInterpreter(args[0])}-${args[1]}`,
 });
 function useSlots(interpreter, slots) {
-    return useConstant(() => {
+    return (0, useConstant_1.useConstant)(() => {
         return slots.reduce((views, slot) => {
             return {
                 ...views,
                 [slot]: () => {
                     // eslint-disable-next-line react-hooks/rules-of-hooks
-                    const [__, children] = useService(interpreter);
+                    const [__, children] = (0, useService_1.useService)(interpreter);
                     if (slot.toString().endsWith("Multi")) {
-                        const MultiView = getMultiSlotViewForChildren(interpreter, slot.toLowerCase());
-                        return React.createElement(MultiView, null);
+                        const MultiView = (0, exports.getMultiSlotViewForChildren)(interpreter, slot.toLowerCase());
+                        return react_2.default.createElement(MultiView, null);
                     }
                     else {
                         const interpreterForSlot = children.get(`${slot.toLowerCase()}-slot`);
                         if (interpreterForSlot) {
                             const View = getViewForInterpreter(interpreterForSlot);
-                            return React.createElement(View, null);
+                            return react_2.default.createElement(View, null);
                         }
                         else {
                             // Waiting for the interpreter for this slot to be invoked
@@ -98,23 +129,23 @@ function useSlots(interpreter, slots) {
     });
 }
 function XstateTreeMultiSlotView({ childInterpreters, }) {
-    return (React.createElement(React.Fragment, null, childInterpreters.map((i) => (React.createElement(XstateTreeView, { key: i.id, interpreter: i })))));
+    return (react_2.default.createElement(react_2.default.Fragment, null, childInterpreters.map((i) => (react_2.default.createElement(XstateTreeView, { key: i.id, interpreter: i })))));
 }
 /**
  * @internal
  */
-export function XstateTreeView({ interpreter }) {
+function XstateTreeView({ interpreter }) {
     var _a, _b;
-    const [current] = useService(interpreter);
-    const currentRef = useRef(current);
+    const [current] = (0, useService_1.useService)(interpreter);
+    const currentRef = (0, react_2.useRef)(current);
     currentRef.current = current;
-    const selectorsRef = useRef(undefined);
+    const selectorsRef = (0, react_2.useRef)(undefined);
     const { slots: interpreterSlots } = interpreter.machine.meta;
     const slots = useSlots(interpreter, interpreterSlots.map((x) => x.name));
-    const canHandleEvent = useCallback((e) => {
+    const canHandleEvent = (0, react_2.useCallback)((e) => {
         return interpreter.getSnapshot().can(e);
     }, [interpreter]);
-    const inState = useCallback((state) => {
+    const inState = (0, react_2.useCallback)((state) => {
         var _a, _b;
         return (_b = (_a = currentRef.current) === null || _a === void 0 ? void 0 : _a.matches(state)) !== null && _b !== void 0 ? _b : false;
     }, 
@@ -122,7 +153,7 @@ export function XstateTreeView({ interpreter }) {
     // current state the machine is in changes. But _only_ then
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [current.value]);
-    const selectorsProxy = useConstant(() => {
+    const selectorsProxy = (0, useConstant_1.useConstant)(() => {
         return new Proxy({}, {
             get: (_target, prop) => {
                 var _a;
@@ -130,7 +161,7 @@ export function XstateTreeView({ interpreter }) {
             },
         });
     });
-    const actions = useConstant(() => {
+    const actions = (0, useConstant_1.useConstant)(() => {
         var _a;
         switch ((_a = interpreter.machine.meta) === null || _a === void 0 ? void 0 : _a.builderVersion) {
             case 1:
@@ -162,18 +193,19 @@ export function XstateTreeView({ interpreter }) {
     switch ((_b = interpreter.machine.meta) === null || _b === void 0 ? void 0 : _b.builderVersion) {
         case 1:
             const ViewV1 = interpreter.machine.meta.view;
-            return (React.createElement(ViewV1, { selectors: selectorsRef.current, actions: actions, slots: slots, inState: inState }));
+            return (react_2.default.createElement(ViewV1, { selectors: selectorsRef.current, actions: actions, slots: slots, inState: inState }));
         case 2:
             const ViewV2 = interpreter.machine.meta.View;
-            return (React.createElement(ViewV2, { selectors: selectorsRef.current, actions: actions, slots: slots }));
+            return (react_2.default.createElement(ViewV2, { selectors: selectorsRef.current, actions: actions, slots: slots }));
         default:
             throw new Error("builderVersion not set");
     }
 }
+exports.XstateTreeView = XstateTreeView;
 /**
  * @internal
  */
-export function recursivelySend(service, event) {
+function recursivelySend(service, event) {
     const children = ([...service.children.values()] || []).filter((s) => s.id.includes("-slot"));
     // If the service can't handle the event, don't send it
     if (service.state.nextEvents.includes(event.type)) {
@@ -186,6 +218,7 @@ export function recursivelySend(service, event) {
     }
     children.forEach((child) => recursivelySend(child, event));
 }
+exports.recursivelySend = recursivelySend;
 /**
  * @public
  *
@@ -194,7 +227,7 @@ export function recursivelySend(service, event) {
  * @param machine - The root machine of the tree
  * @param routing - The routing configuration for the tree
  */
-export function buildRootComponent(machine, routing) {
+function buildRootComponent(machine, routing) {
     if (!machine.meta) {
         throw new Error("Root machine has no meta");
     }
@@ -211,23 +244,23 @@ export function buildRootComponent(machine, routing) {
             break;
     }
     const RootComponent = function XstateTreeRootComponent() {
-        const [_, __, interpreter] = useMachine(machine, { devTools: true });
-        const [activeRoute, setActiveRoute] = useState(undefined);
-        const activeRouteEventsRef = useRef([]);
-        const [forceRenderValue, forceRender] = useState(false);
+        const [_, __, interpreter] = (0, react_1.useMachine)(machine, { devTools: true });
+        const [activeRoute, setActiveRoute] = (0, react_2.useState)(undefined);
+        const activeRouteEventsRef = (0, react_2.useRef)([]);
+        const [forceRenderValue, forceRender] = (0, react_2.useState)(false);
         const setActiveRouteEvents = (events) => {
             activeRouteEventsRef.current = events;
         };
-        useEffect(() => {
+        (0, react_2.useEffect)(() => {
             function handler(event) {
                 recursivelySend(interpreter, event);
             }
-            emitter.on("event", handler);
+            exports.emitter.on("event", handler);
             return () => {
-                emitter.off("event", handler);
+                exports.emitter.off("event", handler);
             };
         }, [interpreter]);
-        useEffect(() => {
+        (0, react_2.useEffect)(() => {
             if (activeRoute === undefined) {
                 return;
             }
@@ -240,7 +273,7 @@ export function buildRootComponent(machine, routing) {
             }
             const routeEventPairs = [];
             const activeRoutesEvent = activeRouteEventsRef.current.find((e) => e.type === activeRoute.event);
-            assertIsDefined(activeRoutesEvent);
+            (0, utils_1.assertIsDefined)(activeRoutesEvent);
             for (let i = 0; i < routes.length; i++) {
                 const route = routes[i];
                 const routeEvent = activeRouteEventsRef.current[i];
@@ -250,7 +283,7 @@ export function buildRootComponent(machine, routing) {
                 return route.redirect !== undefined;
             });
             const redirectPromises = routePairsWithRedirects.map(([route, event]) => {
-                assertIsDefined(route.redirect);
+                (0, utils_1.assertIsDefined)(route.redirect);
                 return route.redirect({
                     signal: controller.signal,
                     query: event.query,
@@ -284,11 +317,11 @@ export function buildRootComponent(machine, routing) {
                 controller.abort();
             };
         }, [activeRoute]);
-        useEffect(() => {
+        (0, react_2.useEffect)(() => {
             if (routing) {
                 const { getPathName = () => routing.history.location.pathname, getQueryString = () => routing.history.location.search, } = routing;
                 const queryString = getQueryString();
-                const result = handleLocationChange(routing.routes, routing.basePath, getPathName(), getQueryString(), { onloadEvent: isLikelyPageLoad() });
+                const result = (0, routing_1.handleLocationChange)(routing.routes, routing.basePath, getPathName(), getQueryString(), { onloadEvent: (0, utils_1.isLikelyPageLoad)() });
                 if (result) {
                     setActiveRouteEvents(result.events);
                     setActiveRoute({ ...result.matchedRoute });
@@ -299,11 +332,11 @@ export function buildRootComponent(machine, routing) {
                 routing.history.replace(`${getPathName()}${queryString}`, {});
             }
         }, []);
-        useEffect(() => {
+        (0, react_2.useEffect)(() => {
             if (routing) {
                 const unsub = routing.history.listen((location) => {
                     var _a;
-                    const result = handleLocationChange(routing.routes, routing.basePath, location.pathname, location.search, (_a = location.state) === null || _a === void 0 ? void 0 : _a.meta);
+                    const result = (0, routing_1.handleLocationChange)(routing.routes, routing.basePath, location.pathname, location.search, (_a = location.state) === null || _a === void 0 ? void 0 : _a.meta);
                     if (result) {
                         setActiveRouteEvents(result.events);
                         setActiveRoute({ ...result.matchedRoute });
@@ -315,26 +348,29 @@ export function buildRootComponent(machine, routing) {
             }
             return undefined;
         }, []);
-        const routingProviderValue = useMemo(() => {
+        const routingProviderValue = (0, react_2.useMemo)(() => {
+            // Just to satisfy linter, need this memo to be re-calculated on route changes
+            activeRoute;
             if (!routing) {
                 return null;
             }
             return {
                 activeRouteEvents: activeRouteEventsRef,
             };
-        }, []);
+        }, [activeRoute]);
         if (!interpreter.initialized) {
             setTimeout(() => forceRender(!forceRenderValue), 0);
             return null;
         }
         if (routingProviderValue) {
-            return (React.createElement(RoutingContext.Provider, { value: routingProviderValue },
-                React.createElement(XstateTreeView, { interpreter: interpreter })));
+            return (react_2.default.createElement(routing_1.RoutingContext.Provider, { value: routingProviderValue },
+                react_2.default.createElement(XstateTreeView, { interpreter: interpreter })));
         }
         else {
-            return React.createElement(XstateTreeView, { interpreter: interpreter });
+            return react_2.default.createElement(XstateTreeView, { interpreter: interpreter });
         }
     };
     RootComponent.rootMachine = machine;
     return RootComponent;
 }
+exports.buildRootComponent = buildRootComponent;