fix: always walk machines once (#115)

Author: tivac

.changeset/shy-experts-wink.md

@@ -0,0 +1,9 @@
+---
+"xstate-component-tree": patch
+---
+
+Fix an issue where in specific situations child trees would not be built.
+
+If a child machine has an `invoke` that immediately triggers a no-op event, the `ComponentTree` instance wouldn't actually walk that child machine for components to render. This was due to an interesting interaction between the xstate `.changed` property and when `invoke`s within the statechart are run.
+
+Now whenever the `ComponentTree` sees a new machine it hasn't walked is running, it will walk it.

src/component-tree.js

@@ -208,17 +208,19 @@ class ComponentTree {
     // Callback for statechart transitions to sync up child machine states
     _onState(path, state) {
         const { changed, children } = state;
+        const { _services, _log } = this;
 
+        const current = _services.get(path);
+
         // Need to specifically check for false because this value is undefined
-        // when a machine first boots up.
-        if(changed === false) {
+        // when a machine first boots up. Also check number of times we've built this machine
+        // and run anyways if we've never built it before
+        if(changed === false && current.run > 0) {
             return;
         }
 
-        const { _services, _log } = this;
-        
         // Save off the state
-        _services.get(path).state = state;
+        current.state = state;
 
         _log(`[${path}][_onState] checking children`);
 

tests/invoked.test.js

@@ -673,4 +673,50 @@ describe("invoked machines", (it) => {
                 }
             ]`);
     });
+
+    it("should build a tree even when the child machine immediately fires a noop event", async () => {
+        const childMachine = createMachine({
+            initial : "one",
+
+            // This invoke always fires an event immediately, but it doesn't cause a transition
+            // so when _onState in the component tree instance is triggered changed is set to false,
+            // even though the tree for that service has never been built. Added a check to ignore
+            // changed and build anyways if it's the first time the service has been seen.
+            invoke : [{
+                id  : "invoke",
+                src : () => (dispatch) => dispatch("ONE"),
+            }],
+
+            states : {
+                one : {
+                    meta : {
+                        component : component("child-one"),
+                    },
+                },
+            },
+        });
+
+        const { tree } = await getTree({
+            id      : "parent",
+            initial : "one",
+
+            states : {
+                one : {
+                    invoke : {
+                        id  : "child",
+                        src : childMachine,
+                    },
+                },
+            },
+        });
+
+        snapshot(tree, `[
+            [Object: null prototype] {
+                path: "one",
+                component: [Function: child-one],
+                props: false,
+                children: []
+            }
+        ]`);
+    });
 });