@koordinates/xstate-tree 5.1.0-next.12 → 5.1.0-next.14

package/lib/utils.js

@@ -121,9 +121,12 @@ function mergeMeta(meta) {
     }, {});
 }
 exports.mergeMeta = mergeMeta;
-function getCircularReplacer() {
+function getCircularReplacer(stripKeys) {
     const seen = new WeakSet();
     return (key, value) => {
+        if (stripKeys.includes(key)) {
+            return;
+        }
         if (typeof value === "object" && value !== null) {
             if (seen.has(value)) {
                 // Circular reference found, discard key
@@ -135,7 +138,7 @@ function getCircularReplacer() {
         return value;
     };
 }
-function toJSON(value) {
-    return JSON.parse(JSON.stringify(value, getCircularReplacer()));
+function toJSON(value, stripKeys = []) {
+    return JSON.parse(JSON.stringify(value, getCircularReplacer(stripKeys)));
 }
 exports.toJSON = toJSON;

package/lib/xstate-tree.d.ts

@@ -136,7 +136,9 @@ export declare function buildCreateRoute(history: () => XstateTreeHistory, baseP
 export declare function buildRootComponent<TMachine extends AnyXstateTreeMachine>(options: {
     machine: TMachine;
 } & MarkOptionalLikePropertiesOptional<RootOptions<InputFrom<TMachine>>>): {
-    (): JSX.Element;
+    ({ children, }: {
+        children?: React_2.ReactNode;
+    }): JSX.Element;
     rootMachine: TMachine;
 };
 
@@ -699,6 +701,7 @@ export declare type View<TActionsOutput, TSelectorsOutput, TSlots extends readon
     slots: Record<GetSlotNames<TSlots>, React_2.ComponentType>;
     actions: TActionsOutput;
     selectors: TSelectorsOutput;
+    children?: React_2.ReactNode;
 }>;
 
 /**

package/lib/xstateTree.js

@@ -69,7 +69,7 @@ interpreter) {
     return interpreter.sessionId;
 }
 const getViewForInterpreter = (0, fast_memoize_1.default)((interpreter) => {
-    return react_2.default.memo(function InterpreterView() {
+    return react_2.default.memo(function InterpreterView({ children, }) {
         const activeRouteEvents = (0, providers_1.useActiveRouteEvents)();
         (0, react_2.useEffect)(() => {
             if (activeRouteEvents) {
@@ -80,7 +80,7 @@ const getViewForInterpreter = (0, fast_memoize_1.default)((interpreter) => {
                 });
             }
         }, []);
-        return react_2.default.createElement(XstateTreeView, { actor: interpreter });
+        return react_2.default.createElement(XstateTreeView, { actor: interpreter }, children);
     });
 }, 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -105,7 +105,7 @@ function useSlots(interpreter, slots) {
         return slots.reduce((views, slot) => {
             return {
                 ...views,
-                [slot]: () => {
+                [slot]: (({ children: reactChildren }) => {
                     // eslint-disable-next-line react-hooks/rules-of-hooks
                     const [__, children] = (0, useService_1.useService)(interpreter);
                     if (slot.toString().endsWith("Multi")) {
@@ -116,26 +116,25 @@ function useSlots(interpreter, slots) {
                         const interpreterForSlot = children[`${slot.toLowerCase()}-slot`];
                         if (interpreterForSlot) {
                             const View = getViewForInterpreter(interpreterForSlot);
-                            return react_2.default.createElement(View, null);
+                            return react_2.default.createElement(View, null, reactChildren);
                         }
                         else {
                             // Waiting for the interpreter for this slot to be invoked
                             return null;
                         }
                     }
-                },
+                }),
             };
         }, {});
     });
 }
 function XstateTreeMultiSlotView({ childInterpreters, }) {
-    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({ actor }) {
+function XstateTreeView({ actor, children }) {
     const [current] = (0, useService_1.useService)(actor);
     const currentRef = (0, react_2.useRef)(current);
     currentRef.current = current;
@@ -175,7 +174,7 @@ function XstateTreeView({ actor }) {
         inState: inState,
         meta: (0, utils_1.mergeMeta)(current.getMeta()),
     });
-    return (react_2.default.createElement(View, { selectors: selectorsRef.current, actions: actions, slots: slots }));
+    return (react_2.default.createElement(View, { selectors: selectorsRef.current, actions: actions, slots: slots }, children));
 }
 exports.XstateTreeView = XstateTreeView;
 /**
@@ -211,7 +210,7 @@ function buildRootComponent(options) {
     if (!machine._xstateTree.View) {
         throw new Error("Root machine has no associated view");
     }
-    const RootComponent = function XstateTreeRootComponent() {
+    const RootComponent = function XstateTreeRootComponent({ children, }) {
         const lastSnapshotsRef = (0, react_2.useRef)({});
         const [_, __, interpreter] = (0, react_1.useActor)(machine, {
             input,
@@ -229,11 +228,12 @@ function buildRootComponent(options) {
                         break;
                     case "@xstate.snapshot":
                         const lastSnapshot = lastSnapshotsRef.current[event.actorRef.sessionId];
+                        const strippedKeys = ["_subscription"];
                         if (!lastSnapshot) {
-                            console.log(`[xstate-tree] initial snapshot: ${event.actorRef.id}`, (0, utils_1.toJSON)(event.snapshot));
+                            console.log(`[xstate-tree] initial snapshot: ${event.actorRef.id}`, (0, utils_1.toJSON)(event.snapshot, strippedKeys));
                         }
                         else {
-                            console.log(`[xstate-tree] snapshot: ${event.actorRef.id} transitioning to`, (0, utils_1.toJSON)(event.snapshot), "from", (0, utils_1.toJSON)(lastSnapshot));
+                            console.log(`[xstate-tree] snapshot: ${event.actorRef.id} transitioning to`, (0, utils_1.toJSON)(event.snapshot, strippedKeys), "from", (0, utils_1.toJSON)(lastSnapshot, strippedKeys));
                         }
                         lastSnapshotsRef.current[event.actorRef.sessionId] = event.snapshot;
                         break;
@@ -367,10 +367,10 @@ function buildRootComponent(options) {
         }, [activeRoute]);
         if (routingProviderValue) {
             return (react_2.default.createElement(routing_1.RoutingContext.Provider, { value: routingProviderValue },
-                react_2.default.createElement(XstateTreeView, { actor: interpreter })));
+                react_2.default.createElement(XstateTreeView, { actor: interpreter }, children)));
         }
         else {
-            return react_2.default.createElement(XstateTreeView, { actor: interpreter });
+            return react_2.default.createElement(XstateTreeView, { actor: interpreter }, children);
         }
     };
     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": "5.1.0-next.12",
+  "version": "5.1.0-next.14",
   "license": "MIT",
   "description": "Build UIs with Actors using xstate and React",
   "keywords": [