@koordinates/xstate-tree 5.1.0-next.11 → 5.1.0-next.13

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,
@@ -221,6 +220,10 @@ function buildRootComponent(options) {
                         console.log(`[xstate-tree] actor spawned: ${event.actorRef.id}`);
                         break;
                     case "@xstate.event":
+                        // Ignore internal events
+                        if (event.event.type.includes("xstate.")) {
+                            return;
+                        }
                         console.log(`[xstate-tree] event: ${event.sourceRef ? event.sourceRef.id : "UNKNOWN"} -> ${event.event.type} -> ${event.actorRef.id}`, event.event);
                         break;
                     case "@xstate.snapshot":
@@ -363,10 +366,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.11",
+  "version": "5.1.0-next.13",
   "license": "MIT",
   "description": "Build UIs with Actors using xstate and React",
   "keywords": [