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

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,31 +129,31 @@ 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;
     }, 
     // This is needed because the inState function needs to be recreated if the
     // current state the machine is in changes. But _only_ then
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [current.value]);
-    const selectorsProxy = useConstant(() => {
+    [current === null || current === void 0 ? void 0 : current.value]);
+    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:
@@ -156,27 +187,30 @@ export function XstateTreeView({ interpreter }) {
                 ctx: current.context,
                 canHandleEvent,
                 inState,
+                meta: (0, utils_1.mergeMeta)(current.meta),
             });
             break;
     }
     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) {
+    var _a;
     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)) {
+    if ((_a = service.getSnapshot()) === null || _a === void 0 ? void 0 : _a.nextEvents.includes(event.type)) {
         try {
             service.send(event);
         }
@@ -186,6 +220,7 @@ export function recursivelySend(service, event) {
     }
     children.forEach((child) => recursivelySend(child, event));
 }
+exports.recursivelySend = recursivelySend;
 /**
  * @public
  *
@@ -194,7 +229,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 +246,31 @@ 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(() => {
+        const insideRoutingContext = (0, routing_1.useInRoutingContext)();
+        if (insideRoutingContext && typeof routing !== "undefined") {
+            const m = "Routing root rendered inside routing context, this implies a bug";
+            if (process.env.NODE_ENV !== "production") {
+                throw new Error(m);
+            }
+            console.error(m);
+        }
+        (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 +283,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 +293,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 +327,16 @@ export function buildRootComponent(machine, routing) {
                 controller.abort();
             };
         }, [activeRoute]);
-        useEffect(() => {
+        (0, react_2.useEffect)(() => {
+            var _a, _b;
             if (routing) {
                 const { getPathName = () => routing.history.location.pathname, getQueryString = () => routing.history.location.search, } = routing;
+                const initialMeta = {
+                    ...((_b = (_a = routing.history.location.state) === null || _a === void 0 ? void 0 : _a.meta) !== null && _b !== void 0 ? _b : {}),
+                    onloadEvent: (0, utils_1.isLikelyPageLoad)(),
+                };
                 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(), initialMeta);
                 if (result) {
                     setActiveRouteEvents(result.events);
                     setActiveRoute({ ...result.matchedRoute });
@@ -296,14 +344,16 @@ export function buildRootComponent(machine, routing) {
                 // Hack to ensure the initial location doesn't have undefined state
                 // It's not supposed to, but it does for some reason
                 // And the history library ignores popstate events with undefined state
-                routing.history.replace(`${getPathName()}${queryString}`, {});
+                routing.history.replace(`${getPathName()}${queryString}`, {
+                    meta: initialMeta,
+                });
             }
         }, []);
-        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 +365,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;

package/package.json

@@ -2,7 +2,7 @@
   "name": "@koordinates/xstate-tree",
   "main": "lib/index.js",
   "types": "lib/xstate-tree.d.ts",
-  "version": "4.2.0",
+  "version": "4.3.0-beta.10",
   "license": "MIT",
   "description": "Build UIs with Actors using xstate and React",
   "keywords": [
@@ -34,9 +34,10 @@
     "@testing-library/dom": "^8.14.0",
     "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^13.4.0",
-    "@testing-library/user-event": "^13.5.0",
+    "@testing-library/user-event": "^14.4.3",
     "@types/history": "^4.7.7",
     "@types/jest": "^28.1.4",
+    "@types/node": "^20.4.9",
     "@types/react": "^17.0.29",
     "@types/react-dom": "^18.0.6",
     "@types/testing-library__jest-dom": "^5.14.1",
@@ -72,9 +73,9 @@
   },
   "peerDependencies": {
     "@xstate/react": "^3.x",
+    "react": ">= 16.8.0 < 19.0.0",
     "xstate": ">= 4.20 < 5.0.0",
-    "zod": "^3.x",
-    "react": ">= 16.8.0 < 19.0.0"
+    "zod": "^3.x"
   },
   "scripts": {
     "lint": "eslint 'src/**/*'",