feat: xstate v5 support

Author: tivac

.changeset/purple-emus-stare.md

@@ -0,0 +1,7 @@
+---
+"xstate-component-tree": major
+---
+
+# 🎉 xstate v5 support 🎉
+
+This release finally updates `xstate-component-tree` to work with modern versions of xstate. No major API changes within the library itself, mostly v4 to v5 stuff like [always sending `{ type : "EVENT" }`](https://stately.ai/docs/migration#actorsend-no-longer-accepts-string-types).

.vscode/launch.json

@@ -5,26 +5,21 @@
     "version": "0.2.0",
     "configurations": [
         {
-            "type": "pwa-node",
+            "name": "uvu All",
+            "type": "node",
             "request": "launch",
-            "name": "Run uvu",
-            "console": "integratedTerminal",
             "skipFiles": [
                 "<node_internals>/**"
             ],
-            "program": "${workspaceFolder}/node_modules/uvu/bin.js",
-            "args": ["tests"],
-        },
-        {
-            "type": "pwa-node",
-            "request": "launch",
-            "name": "Run uvu (current file)",
-            "console": "integratedTerminal",
-            "skipFiles": [
-                "<node_internals>/**"
+            "program": "${workspaceFolder}/node_modules/.bin/uvu",
+            "args": [
+                "tests",
+                "\\.test\\.js$"
             ],
-            "program": "${workspaceFolder}/node_modules/uvu/bin.js",
-            "args": ["tests", "${fileBasenameNoExtension}"]
-        }
+            "console": "integratedTerminal",
+            "windows": {
+                "program": "${workspaceFolder}/node_modules/uvu/bin.js"
+            }
+        },
     ]
 }

examples/svelte/src/App.svelte

@@ -1,27 +1,27 @@
+<script>
+    import { ComponentTree } from "xstate-component-tree";
+
+    import service from "./statechart.js";
+
+    import Children from "./children.svelte";
+
+    let components = [];
+
+    new ComponentTree(service, (tree) => {
+        components = tree;
+    });
+
+    service.start();
+</script>
+
 <div>
     <p>LAYOUT RENDERED AT {Date.now()}</p>
 
     <code>{JSON.stringify($service.value)}</code>
 
     <p>
-        <button on:click={() => service.send("NAV")}>Navigate</button>
+        <button on:click={() => service.send({ type: "NAV" })}>Navigate</button>
     </p>
 
     <Children children={components} />
 </div>
-
-<script>
-import ComponentTree from "xstate-component-tree";
-
-import service from "./statechart.js";
-
-import Children from "./children.svelte";
-
-let components = [];
-
-new ComponentTree(service, (tree) => {
-    components = tree;
-});
-
-service.start();
-</script>

examples/svelte/src/next-child.svelte

@@ -1,7 +1,7 @@
+<script>
+    import service from "./statechart.js";
+</script>
+
 <p>
-    <button on:click={() => service.send("NEXT")}>Next Child</button>
+    <button on:click={() => service.send({ type: "NEXT" })}>Next Child</button>
 </p>
-
-<script>
-import service from "./statechart.js";
-</script>

package-lock.json

@@ -58,7 +58,7 @@
     "strip-ansi": "^7.0.1",
     "typescript": "^5.0.3",
     "uvu": "^0.5.4",
-    "xstate": "^4.37.0"
+    "xstate": "^5.19.0"
   },
   "peerDependencies": {
     "xstate": "^4.7.8"

package.json

@@ -9,7 +9,7 @@
  * @param {StateNode} node - Xstate node data
  * @returns {StateNode} an xstate node containing component information in its meta
  */
-export default (child, node = {}) => {
+const componentHelper = (child, node = {}) => {
     /**
      * Handle both bare component & { component, props } via destructuring & default values
      * 1. state : component(UIComponent, {})
@@ -38,3 +38,7 @@ export default (child, node = {}) => {
 
     return node;
 };
+
+export {
+    componentHelper,
+};