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

package/lib/xstateTree.js

@@ -74,14 +74,13 @@ const getViewForInterpreter = (0, fast_memoize_1.default)((interpreter) => {
         (0, react_2.useEffect)(() => {
             if (activeRouteEvents) {
                 activeRouteEvents.forEach((event) => {
-                    // @ts-ignore fixed in v5 branch
-                    if (interpreter.state.nextEvents.includes(event.type)) {
+                    if (interpreter.getSnapshot().can(event)) {
                         interpreter.send(event);
                     }
                 });
             }
         }, []);
-        return react_2.default.createElement(XstateTreeView, { interpreter: interpreter });
+        return react_2.default.createElement(XstateTreeView, { actor: interpreter });
     });
 }, 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -92,10 +91,10 @@ const getViewForInterpreter = (0, fast_memoize_1.default)((interpreter) => {
 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()];
+        const interpreters = Object.values(children);
         // 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);
+        const interpretersWeCareAbout = interpreters.filter((i) => i.id.includes(slot));
         return (react_2.default.createElement(XstateTreeMultiSlotView, { childInterpreters: interpretersWeCareAbout }));
     });
 }, {
@@ -114,7 +113,7 @@ function useSlots(interpreter, slots) {
                         return react_2.default.createElement(MultiView, null);
                     }
                     else {
-                        const interpreterForSlot = children.get(`${slot.toLowerCase()}-slot`);
+                        const interpreterForSlot = children[`${slot.toLowerCase()}-slot`];
                         if (interpreterForSlot) {
                             const View = getViewForInterpreter(interpreterForSlot);
                             return react_2.default.createElement(View, null);
@@ -130,93 +129,67 @@ function useSlots(interpreter, slots) {
     });
 }
 function XstateTreeMultiSlotView({ childInterpreters, }) {
-    return (react_2.default.createElement(react_2.default.Fragment, null, childInterpreters.map((i) => (react_2.default.createElement(XstateTreeView, { key: i.id, interpreter: i })))));
+    console.log("XstateTreeMultiSlotView", childInterpreters);
+    return (react_2.default.createElement(react_2.default.Fragment, null, childInterpreters.map((i) => (react_2.default.createElement(XstateTreeView, { key: i.id, actor: i })))));
 }
 /**
  * @internal
  */
-function XstateTreeView({ interpreter }) {
-    var _a, _b;
-    const [current] = (0, useService_1.useService)(interpreter);
+function XstateTreeView({ actor }) {
+    const [current] = (0, useService_1.useService)(actor);
     const currentRef = (0, react_2.useRef)(current);
     currentRef.current = current;
     const selectorsRef = (0, react_2.useRef)(undefined);
-    const { slots: interpreterSlots } = interpreter.machine.meta;
-    const slots = useSlots(interpreter, interpreterSlots.map((x) => x.name));
+    const { slots: interpreterSlots, View, actions: actionsFactory, selectors: selectorsFactory, } = actor.logic._xstateTree;
+    const slots = useSlots(actor, interpreterSlots.map((x) => x.name));
     const canHandleEvent = (0, react_2.useCallback)((e) => {
-        return interpreter.getSnapshot().can(e);
-    }, [interpreter]);
+        return actor.getSnapshot().can(e);
+    }, [actor]);
     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;
+        return currentRef.current?.matches(state) ?? 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 === null || current === void 0 ? void 0 : current.value]);
+    [current?.value]);
     const selectorsProxy = (0, useConstant_1.useConstant)(() => {
         return new Proxy({}, {
             get: (_target, prop) => {
-                var _a;
-                return (_a = selectorsRef.current) === null || _a === void 0 ? void 0 : _a[prop];
+                return selectorsRef.current?.[prop];
             },
         });
     });
     const actions = (0, useConstant_1.useConstant)(() => {
-        var _a;
-        switch ((_a = interpreter.machine.meta) === null || _a === void 0 ? void 0 : _a.builderVersion) {
-            case 1:
-                return interpreter.machine.meta.actions(interpreter.send, selectorsProxy);
-            case 2:
-                return interpreter.machine.meta.actions({
-                    send: interpreter.send,
-                    selectors: selectorsProxy,
-                });
-            default:
-                throw new Error("builderVersion not set");
-        }
+        return actionsFactory({
+            send: actor.send,
+            selectors: selectorsProxy,
+        });
     });
     if (!current) {
         return null;
     }
-    switch ((_a = interpreter.machine.meta) === null || _a === void 0 ? void 0 : _a.builderVersion) {
-        case 1:
-            selectorsRef.current = interpreter.machine.meta.selectors(current.context, canHandleEvent, inState, current.value);
-            break;
-        case 2:
-            selectorsRef.current = interpreter.machine.meta.selectors({
-                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_2.default.createElement(ViewV1, { selectors: selectorsRef.current, actions: actions, slots: slots, inState: inState }));
-        case 2:
-            const ViewV2 = interpreter.machine.meta.View;
-            return (react_2.default.createElement(ViewV2, { selectors: selectorsRef.current, actions: actions, slots: slots }));
-        default:
-            throw new Error("builderVersion not set");
-    }
+    selectorsRef.current = selectorsFactory({
+        ctx: current.context,
+        canHandleEvent,
+        // Workaround for type instantiation possibly infinite error
+        inState: inState,
+        meta: (0, utils_1.mergeMeta)(current.getMeta()),
+    });
+    return (react_2.default.createElement(View, { selectors: selectorsRef.current, actions: actions, slots: slots }));
 }
 exports.XstateTreeView = XstateTreeView;
 /**
  * @internal
  */
 function recursivelySend(service, event) {
-    var _a;
-    const children = ([...service.children.values()] || []).filter((s) => s.id.includes("-slot"));
+    const children = Object.values(service.getSnapshot().children).filter((s) => s.id.includes("-slot"));
     // If the service can't handle the event, don't send it
-    if ((_a = service.getSnapshot()) === null || _a === void 0 ? void 0 : _a.nextEvents.includes(event.type)) {
+    if (service.getSnapshot().can(event)) {
         try {
             service.send(event);
         }
         catch (e) {
-            console.error("Error sending event ", event, " to machine ", service.machine.id, e);
+            console.error("Error sending event ", event, " to machine ", service.id, e);
         }
     }
     children.forEach((child) => recursivelySend(child, event));
@@ -231,26 +204,39 @@ exports.recursivelySend = recursivelySend;
  * @param routing - The routing configuration for the tree
  */
 function buildRootComponent(machine, routing) {
-    if (!machine.meta) {
-        throw new Error("Root machine has no meta");
+    if (!machine._xstateTree) {
+        throw new Error("Root machine is not an xstate-tree machine, missing metadata");
     }
-    switch (machine.meta.builderVersion) {
-        case 1:
-            if (!machine.meta.view) {
-                throw new Error("Root machine has no associated view");
-            }
-            break;
-        case 2:
-            if (!machine.meta.View) {
-                throw new Error("Root machine has no associated view");
-            }
-            break;
+    if (!machine._xstateTree.View) {
+        throw new Error("Root machine has no associated view");
     }
     const RootComponent = function XstateTreeRootComponent() {
-        const [_, __, interpreter] = (0, react_1.useMachine)(machine, { devTools: true });
+        const lastSnapshotsRef = (0, react_2.useRef)({});
+        const [_, __, interpreter] = (0, react_1.useActor)(machine, {
+            inspect(event) {
+                switch (event.type) {
+                    case "@xstate.actor":
+                        console.log(`[xstate-tree] actor spawned: ${event.actorRef.id}`);
+                        break;
+                    case "@xstate.event":
+                        console.log(`[xstate-tree] event: ${event.sourceRef ? event.sourceRef.id : "UNKNOWN"} -> ${event.event.type} -> ${event.actorRef.id}`, event.event);
+                        break;
+                    case "@xstate.snapshot":
+                        const lastSnapshot = lastSnapshotsRef.current[event.actorRef.sessionId];
+                        if (!lastSnapshot) {
+                            console.log(`[xstate-tree] initial snapshot: ${event.actorRef.id}`, (0, utils_1.toJSON)(event.snapshot));
+                        }
+                        else {
+                            console.log(`[xstate-tree] snapshot: ${event.actorRef.id} transitioning to`, (0, utils_1.toJSON)(event.snapshot), "from", (0, utils_1.toJSON)(lastSnapshot));
+                        }
+                        lastSnapshotsRef.current[event.actorRef.sessionId] = event.snapshot;
+                        break;
+                }
+            },
+            id: machine.config.id,
+        });
         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;
         };
@@ -303,7 +289,6 @@ function buildRootComponent(machine, routing) {
                 });
             });
             void Promise.all(redirectPromises).then((redirects) => {
-                var _a, _b, _c;
                 const didAnyRedirect = redirects.some((x) => x !== undefined);
                 if (!didAnyRedirect || controller.signal.aborted) {
                     return;
@@ -318,9 +303,9 @@ function buildRootComponent(machine, routing) {
                 }, {
                     // since the redirect results are partials, need to merge them with the original event
                     // params/query to ensure that all params/query are present
-                    query: { ...((_a = activeRoutesEvent.query) !== null && _a !== void 0 ? _a : {}) },
-                    params: { ...((_b = activeRoutesEvent.params) !== null && _b !== void 0 ? _b : {}) },
-                    meta: { replace: true, ...((_c = activeRoutesEvent.meta) !== null && _c !== void 0 ? _c : {}) },
+                    query: { ...(activeRoutesEvent.query ?? {}) },
+                    params: { ...(activeRoutesEvent.params ?? {}) },
+                    meta: { replace: true, ...(activeRoutesEvent.meta ?? {}) },
                 });
                 activeRoute.navigate(routeArguments);
             });
@@ -329,11 +314,10 @@ function buildRootComponent(machine, routing) {
             };
         }, [activeRoute]);
         (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 : {}),
+                    ...(routing.history.location.state?.meta ?? {}),
                     onloadEvent: (0, utils_1.isLikelyPageLoad)(),
                 };
                 const queryString = getQueryString();
@@ -353,8 +337,7 @@ function buildRootComponent(machine, routing) {
         (0, react_2.useEffect)(() => {
             if (routing) {
                 const unsub = routing.history.listen((location) => {
-                    var _a;
-                    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);
+                    const result = (0, routing_1.handleLocationChange)(routing.routes, routing.basePath, location.pathname, location.search, location.state?.meta);
                     if (result) {
                         setActiveRouteEvents(result.events);
                         setActiveRoute({ ...result.matchedRoute });
@@ -376,16 +359,12 @@ function buildRootComponent(machine, routing) {
                 activeRouteEvents: activeRouteEventsRef,
             };
         }, [activeRoute]);
-        if (!interpreter.initialized) {
-            setTimeout(() => forceRender(!forceRenderValue), 0);
-            return null;
-        }
         if (routingProviderValue) {
             return (react_2.default.createElement(routing_1.RoutingContext.Provider, { value: routingProviderValue },
-                react_2.default.createElement(XstateTreeView, { interpreter: interpreter })));
+                react_2.default.createElement(XstateTreeView, { actor: interpreter })));
         }
         else {
-            return react_2.default.createElement(XstateTreeView, { interpreter: interpreter });
+            return react_2.default.createElement(XstateTreeView, { actor: interpreter });
         }
     };
     RootComponent.rootMachine = machine;

package/package.json

@@ -2,7 +2,7 @@
   "name": "@koordinates/xstate-tree",
   "main": "lib/index.js",
   "types": "lib/xstate-tree.d.ts",
-  "version": "4.5.0",
+  "version": "5.1.0-next.2",
   "license": "MIT",
   "description": "Build UIs with Actors using xstate and React",
   "keywords": [
@@ -41,10 +41,9 @@
     "@types/react": "^17.0.29",
     "@types/react-dom": "^18.0.6",
     "@types/testing-library__jest-dom": "^5.14.1",
-    "@typescript-eslint/eslint-plugin": "^5.30.5",
+    "@typescript-eslint/eslint-plugin": "^5.57.0",
     "@vitejs/plugin-react": "^2.1.0",
-    "@xstate/immer": "^0.3.1",
-    "@xstate/react": "^3.0.0",
+    "@xstate/react": "^4.0.2",
     "classnames": "^2.3.1",
     "cz-conventional-changelog": "^3.3.0",
     "eslint": "^7.32.0",
@@ -66,15 +65,15 @@
     "todomvc-app-css": "^2.4.2",
     "todomvc-common": "^1.0.5",
     "ts-jest": "^28.0.5",
-    "typescript": "^4.7.3",
+    "typescript": "5.0.2",
     "vite": "^3.1.3",
     "vite-tsconfig-paths": "^3.5.0",
-    "xstate": "^4.33.0"
+    "xstate": "^5.4.1"
   },
   "peerDependencies": {
-    "@xstate/react": "^3.x",
+    "@xstate/react": "^4.x",
     "react": ">= 16.8.0 < 19.0.0",
-    "xstate": ">= 4.20 < 5.0.0",
+    "xstate": "^5.x",
     "zod": "^3.x"
   },
   "scripts": {