fix: Matching state and invoke names work now (#230)

Author: tivac

.changeset/slow-planets-begin.md

@@ -0,0 +1,20 @@
+---
+"xstate-component-tree": major
+---
+
+Matching state and invoke names would cause `xstate-component-tree` to fail to return child components in some cases because internally it named them the same thing and stomped all over itself.
+
+```
+states : {
+    foo : {
+        invoke : {
+            id : "foo",
+            // ...
+        },
+    },
+},
+```
+
+This should work now.
+
+**BREAKING CHANGE**: All `machine` values in the output that previously looked like `root.foo` will now look like `root.#foo`, in order to help differentiate the child machine `id` from the parent state path.

.vscode/launch.json

@@ -4,6 +4,7 @@
     // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
     "version": "0.2.0",
     "configurations": [
+    
         {
             "name": "uvu All",
             "type": "node",
@@ -21,5 +22,22 @@
                 "program": "${workspaceFolder}/node_modules/uvu/bin.js"
             }
         },
+        {
+            "name": "uvu Current",
+            "type": "node",
+            "request": "launch",
+            "skipFiles": [
+                "<node_internals>/**"
+            ],
+            "program": "${workspaceFolder}/node_modules/.bin/uvu",
+            "args": [
+                "tests",
+                "${fileBasename}"
+            ],
+            "console": "integratedTerminal",
+            "windows": {
+                "program": "${workspaceFolder}/node_modules/uvu/bin.js"
+            }
+        },
     ]
 }

package-lock.json

@@ -144,7 +144,7 @@ class ComponentTree {
     _watch(path) {
         const { _paths, _actors, _invokables, _options, _log } = this;
 
-        _log(`[${path}][_prep] prepping`);
+        _log(`[${path}][_watch] prepping`);
 
         const { actor } = _actors.get(path);
 
@@ -163,7 +163,7 @@ class ComponentTree {
         // xstate maps ids to state nodes, but the value object only
         // has paths, so need to create our own path-only map here
         for(const item of ids.values()) {
-            const key = [ path, ...item.path ].join(".");
+            const key = childPath(path, ...item.path);
 
             if(item.meta) {
                 _paths.set(key, Object.assign({
@@ -174,11 +174,11 @@ class ComponentTree {
             }
 
             // .invoke is always an array
-            _invokables.set(key, item.invoke.map(({ id : invoked }) => childPath(path, invoked)));
+            _invokables.set(key, item.invoke.map(({ id : invoked }) => childPath(path, `#${invoked}`)));
         }
 
-        _log(`[${path}][_prep] _paths`, [ ..._paths.keys() ]);
-        _log(`[${path}][_prep] _invokables`, [ ..._invokables.entries() ]);
+        _log(`[${path}][_watch] _paths`, [ ..._paths.keys() ]);
+        _log(`[${path}][_watch] _invokables`, [ ..._invokables.entries() ]);
 
         _log(`[${path}][_watch] subscribing`);
 
@@ -214,6 +214,8 @@ class ComponentTree {
         const current = _actors.get(path);
 
         if(state === current.state && current.run > 0) {
+            _log(`[${path}][_onState] State hasn't changed`);
+
             return;
         }
 
@@ -226,9 +228,11 @@ class ComponentTree {
 
         // Add any new children to be tracked
         Object.keys(children).forEach((child) => {
-            const id = [ path, child ].join(".");
+            const id = childPath(path, `#${child}`);
 
             if(_actors.has(id)) {
+                _log(`[${path}][_onState] Already seen child ${id}`);
+
                 return;
             }
 

src/component-tree.js

@@ -82,7 +82,7 @@ describe("broadcast", (it) => {
                 children: []
             },
             [Object: null prototype] {
-                machine: "root.child",
+                machine: "root.#child",
         Actual:
         --        path: "child.one",
         --        component: [Function: child-one],
@@ -93,7 +93,7 @@ describe("broadcast", (it) => {
                 children: []
             },
             [Object: null prototype] {
-                machine: "root.child.grandchild",
+                machine: "root.#child.#grandchild",
         Actual:
         --        path: "grandchild.one",
         --        component: [Function: grandchild-one],
@@ -119,7 +119,7 @@ describe("broadcast", (it) => {
                 children: []
             },
             [Object: null prototype] {
-                machine: "root.child",
+                machine: "root.#child",
         Actual:
         --        path: "child.two",
         --        component: [Function: child-two],
@@ -130,7 +130,7 @@ describe("broadcast", (it) => {
                 children: []
             },
             [Object: null prototype] {
-                machine: "root.child.grandchild",
+                machine: "root.#child.#grandchild",
         Actual:
         --        path: "grandchild.two",
         --        component: [Function: grandchild-two],

tests/api/broadcast.test.js

@@ -65,7 +65,7 @@ describe("send", (it) => {
                 children: []
             },
             [Object: null prototype] {
-                machine: "root.child",
+                machine: "root.#child",
                 path: "child.one",
                 component: [Function: child-one],
                 props: false,

tests/api/send.test.js

@@ -20,7 +20,7 @@ describe("verbose", (it) => {
         restoreAll();
 
         // Only check first & last for now
-        snapshot(log.calls[0], `[ "[root][_prep] prepping" ]`);
+        snapshot(log.calls[0], `[ "[root][_watch] prepping" ]`);
         snapshot(log.calls[log.calls.length - 1], `[ "[root][_run #2] returning data" ]`);
     });
 });

tests/api/verbose.test.js

@@ -66,7 +66,7 @@ describe("basic functionality", (it) => {
                 children: []
             },
             [Object: null prototype] {
-                machine: "root.child",
+                machine: "root.#child",
                 path: "child.one",
                 component: [Function: child-one],
                 props: false,

tests/basic.test.js

@@ -48,7 +48,7 @@ describe(".load in invoked machines", (it) => {
                 props: false,
                 children: [
                     [Object: null prototype] {
-                        machine: "test.child",
+                        machine: "test.#child",
                         path: "child",
                         component: [Function: child],
                         props: false,
@@ -97,7 +97,7 @@ describe(".load in invoked machines", (it) => {
                 props: false,
                 children: [
                     [Object: null prototype] {
-                        machine: "test.child",
+                        machine: "test.#child",
                         path: "child",
                         component: [Function: child],
                         props: false,
@@ -146,7 +146,7 @@ describe(".load in invoked machines", (it) => {
                 props: false,
                 children: [
                     [Object: null prototype] {
-                        machine: "test.child",
+                        machine: "test.#child",
                         path: "child",
                         component: [Function: child],
                         props: {
@@ -201,7 +201,7 @@ describe(".load in invoked machines", (it) => {
                 props: false,
                 children: [
                     [Object: null prototype] {
-                        machine: "test.child",
+                        machine: "test.#child",
                         path: "child",
                         component: {
                             ctx: "child context",