Add inspectors to templates

templates/react-ts/package.json

@@ -9,6 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@statelyai/inspect": "^0.2.0",
     "@xstate/react": "4.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

templates/react-ts/src/App.tsx

@@ -1,9 +1,15 @@
 import './App.css';
 import { feedbackMachine } from './feedbackMachine';
 import { useMachine } from '@xstate/react';
+import { createBrowserInspector } from '@statelyai/inspect';
+
+const { inspect } = createBrowserInspector();
 
 function Feedback() {
-  const [state, send] = useMachine(feedbackMachine);
+  const [state, send] = useMachine(feedbackMachine, {
+    // Uncomment the line below to start the inspector
+    // inspect
+  });
 
   if (state.matches('closed')) {
     return (

templates/svelte-ts/package.json

@@ -19,6 +19,7 @@
     "vite": "^5.0.11"
   },
   "dependencies": {
+    "@statelyai/inspect": "^0.2.0",
     "@xstate/svelte": "^3.0.2",
     "xstate": "^5.4.1"
   }

templates/svelte-ts/src/App.svelte

@@ -1,8 +1,14 @@
 <script lang="ts">
   import { feedbackMachine } from './feedbackMachine';
   import { useMachine } from '@xstate/svelte';
+  import { createBrowserInspector } from '@statelyai/inspect';
 
-  const { snapshot, send } = useMachine(feedbackMachine);
+  const { inspect } = createBrowserInspector();
+
+  const { snapshot, send } = useMachine(feedbackMachine, {
+    // Uncomment the line below to start the inspector
+    // inspect
+  });
 </script>
 
 {#if $snapshot.matches('closed')}

templates/vanilla-ts/package.json

@@ -13,6 +13,7 @@
     "vite": "^5.0.11"
   },
   "dependencies": {
+    "@statelyai/inspect": "^0.2.0",
     "xstate": "5.4.1"
   }
 }

templates/vanilla-ts/src/main.ts

@@ -5,6 +5,9 @@ import {
   __unsafe_getAllOwnEventDescriptors,
   createActor
 } from 'xstate';
+import { createBrowserInspector } from '@statelyai/inspect';
+
+const { inspect } = createBrowserInspector();
 
 document.querySelector<HTMLDivElement>('#app')!.innerHTML = `
   <div>
@@ -26,7 +29,10 @@ function getNextTransitions(state: AnyMachineSnapshot) {
   return state._nodes.flatMap((node) => [...node.transitions.values()]).flat(1);
 }
 
-const actor = createActor(feedbackMachine);
+const actor = createActor(feedbackMachine, {
+  // Uncomment the line below to start the inspector
+  // inspect
+});
 
 (window as any).feedbackActor = actor;
 

templates/vue-ts/package.json

@@ -9,6 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@statelyai/inspect": "^0.2.0",
     "@xstate/vue": "^3.0.3",
     "vue": "^3.4.7",
     "xstate": "^5.4.1"