Update xState eg with release candidate, new syntax

saasquatch · Nov 24, 2023 · bf08553 · bf08553
1 parent da38095
commit bf08553
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 11 deletions.
diff --git a/website/src/components/CodeEditor.astro b/website/src/components/CodeEditor.astro
@@ -35,7 +35,7 @@ to all the elements in Sandpack's UI -->
       dependencies: {
         ...dependencies,
         // Must exist
-        bunshi: "2.0.2",
+        bunshi: "v2.1.0-rc.1",
       },
     }}
     files={files}

diff --git a/website/src/source-examples/xstate/molecules.ts b/website/src/source-examples/xstate/molecules.ts
@@ -1,4 +1,4 @@
-import { molecule } from "bunshi";
+import { molecule, onMount } from "bunshi";
 import { assign, createMachine, interpret } from "xstate";
 
 interface CounterContext {
@@ -11,14 +11,20 @@ type CounterEvent = {
 
 export const CountMolecule = molecule(() => {
   const countMachine = createMachine<CounterContext, CounterEvent>({
-    id: 'counter',
+    id: "counter",
     context: { count: 0 },
     on: {
       INCREMENT: {
-        actions: assign({ count: (ctx) => ctx.count + 1 })
-      }
-    }
+        actions: assign({ count: (ctx) => ctx.count + 1 }),
+      },
+    },
   });
 
-  return interpret(countMachine).start();
+  const actor = interpret(countMachine);
+
+  onMount(() => {
+    actor.start();
+    return () => actor.stop();
+  });
+  return actor;
 });
diff --git a/website/src/source-examples/xstate/molecules2.ts b/website/src/source-examples/xstate/molecules2.ts
@@ -1,4 +1,4 @@
-import { ComponentScope, molecule } from "bunshi";
+import { ComponentScope, molecule, onMount, use } from "bunshi";
 import { assign, createMachine, interpret } from "xstate";
 
 interface CounterContext {
@@ -9,8 +9,8 @@ type CounterEvent = {
   type: "INCREMENT";
 };
 
-export const CountMolecule = molecule((_, scope) => {
-  scope(ComponentScope);
+export const CountMolecule = molecule(() => {
+  use(ComponentScope);
 
   const countMachine = createMachine<CounterContext, CounterEvent>({
     id: "counter",
@@ -22,5 +22,11 @@ export const CountMolecule = molecule((_, scope) => {
     },
   });
 
-  return interpret(countMachine).start();
+  const actor = interpret(countMachine);
+
+  onMount(() => {
+    actor.start();
+    return () => actor.stop();
+  });
+  return actor;
 });