Update templates (#4519)

* Update templates

* Update to latest

templates/react-ts/README.md

@@ -4,4 +4,4 @@ A starting point template for using XState with React and TypeScript. Create a f
 
 Using [Vite](https://vitejs.dev/) as a build tool and to run the local development server.
 
-## [➡️ Open in CodeSandbox](https://codesandbox.io/p/sandbox/github/statelyai/xstate/tree/main/templates/react-ts?file=%2Fsrc%2FfeedbackMachine.ts)
+## [➡️ Open in CodeSandbox](https://codesandbox.io/p/sandbox/github/statelyai/xstate/tree/next/templates/react-ts?file=%2Fsrc%2FfeedbackMachine.ts)

templates/react-ts/package.json

@@ -9,14 +9,14 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@xstate/react": "4.0.0-beta.9",
+    "@xstate/react": "4.0.0-beta.11",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "xstate": "5.0.0-beta.29"
+    "xstate": "5.0.0-beta.49"
   },
   "devDependencies": {
-    "@types/react": "^18.2.37",
-    "@types/react-dom": "^18.2.15",
+    "@types/react": "^18.2.39",
+    "@types/react-dom": "^18.2.17",
     "@vitejs/plugin-react": "^3.1.0",
     "typescript": "^4.9.5",
     "vite": "^4.5.0"

templates/react-ts/src/feedbackMachine.ts

@@ -1,30 +1,32 @@
-import { assign, createMachine } from 'xstate';
+import { assign, setup } from 'xstate';
 
-const types = {
-  context: {} as { feedback: string },
-  events: {} as
-    | {
-        type: 'feedback.good';
-      }
-    | {
-        type: 'feedback.bad';
-      }
-    | {
-        type: 'feedback.update';
-        value: string;
-      }
-    | { type: 'submit' }
-    | {
-        type: 'close';
-      }
-    | { type: 'back' }
-    | { type: 'restart' }
-};
-
-export const feedbackMachine = createMachine({
+export const feedbackMachine = setup({
+  types: {
+    context: {} as { feedback: string },
+    events: {} as
+      | {
+          type: 'feedback.good';
+        }
+      | {
+          type: 'feedback.bad';
+        }
+      | {
+          type: 'feedback.update';
+          value: string;
+        }
+      | { type: 'submit' }
+      | {
+          type: 'close';
+        }
+      | { type: 'back' }
+      | { type: 'restart' }
+  },
+  guards: {
+    feedbackValid: ({ context }) => context.feedback.length > 0
+  }
+}).createMachine({
   id: 'feedback',
   initial: 'prompt',
-  types,
   context: {
     feedback: ''
   },
@@ -44,7 +46,7 @@ export const feedbackMachine = createMachine({
         },
         back: { target: 'prompt' },
         submit: {
-          guard: ({ context }) => context.feedback.length > 0,
+          guard: 'feedbackValid',
           target: 'thanks'
         }
       }