updated the example of with-xstate to utilize the App Router (#69960)

This PR updates the with-xstate example to use the App Router. Here are the changes that have been made: - Renamed the `pages` folder to the `app` folder. - Updated the routing for / files to align with the App Router. - moved the `components` and `machine` folder inside the app directory by renaming it to `_components` and `_machine` - Added the `layout.tsx` file as part of the App Router. - Updated the package.json file. CC: @samcx --------- Co-authored-by: samcx <sam@vercel.com>
vercel · Sep 11, 2024 · 5348db4 · 5348db4
1 parent ee48ef7
commit 5348db4
Show file tree

Hide file tree

Showing 12 changed files with 102 additions and 74 deletions.
diff --git a/examples/with-xstate/app/_components/Counter.tsx b/examples/with-xstate/app/_components/Counter.tsx
@@ -0,0 +1,17 @@
+"use client";
+import { useMachine } from "@xstate/react";
+import { counterMachine } from "../_machines/counter";
+
+export default function Counter({ counter = {} }) {
+  const [state, send] = useMachine(counterMachine);
+  return (
+    <section>
+      <h2>
+        Count: <span>{state.context.count}</span>
+      </h2>
+      <button onClick={() => send({ type: "DEC" })}>-1</button>
+      <button onClick={() => send({ type: "INC" })}>+1</button>
+      <button onClick={() => send({ type: "RESET" })}>Reset</button>
+    </section>
+  );
+}
diff --git a/examples/with-xstate/app/_components/Toggle.tsx b/examples/with-xstate/app/_components/Toggle.tsx
@@ -0,0 +1,15 @@
+"use client";
+import { useMachine } from "@xstate/react";
+import { toggleMachine } from "../_machines/toggle";
+
+export default function Toggle() {
+  const [state, send] = useMachine(toggleMachine);
+  return (
+    <div>
+      <h2>
+        Toggle status: <span>{state.matches("active") ? "On" : "Off"}</span>
+      </h2>
+      <button onClick={() => send({ type: "TOGGLE" })}>Toggle</button>
+    </div>
+  );
+}
diff --git a/examples/with-xstate/app/_machines/counter.ts b/examples/with-xstate/app/_machines/counter.ts
@@ -0,0 +1,26 @@
+import { createMachine, assign } from "xstate";
+
+type CounterContext = {
+  count: number;
+};
+
+type CounterEvents = { type: "INC" } | { type: "DEC" } | { type: "RESET" };
+
+export const counterMachine = createMachine({
+  types: {} as {
+    context: CounterContext;
+    events: CounterEvents;
+  },
+  id: "counter",
+  initial: "active",
+  context: { count: 999 },
+  states: {
+    active: {
+      on: {
+        INC: { actions: assign({ count: ({ context }) => context.count + 1 }) },
+        DEC: { actions: assign({ count: ({ context }) => context.count - 1 }) },
+        RESET: { actions: assign({ count: 0 }) },
+      },
+    },
+  },
+});
diff --git a/examples/with-xstate/machines/toggle.ts → examples/with-xstate/app/_machines/toggle.ts b/examples/with-xstate/machines/toggle.ts → examples/with-xstate/app/_machines/toggle.ts
@@ -8,8 +8,11 @@ type ToggleEvents = {
   type: "TOGGLE";
 };
 
-export const toggleMachine = createMachine<ToggleContext, ToggleEvents>({
-  predictableActionArguments: true,
+export const toggleMachine = createMachine({
+  types: {} as {
+    context: ToggleContext;
+    events: ToggleEvents;
+  },
   id: "toggle",
   initial: "inactive",
   states: {
@@ -20,4 +23,7 @@ export const toggleMachine = createMachine<ToggleContext, ToggleEvents>({
       on: { TOGGLE: "inactive" },
     },
   },
+  context: {
+    value: "inactive",
+  },
 });
diff --git a/examples/with-xstate/app/layout.tsx b/examples/with-xstate/app/layout.tsx
@@ -0,0 +1,16 @@
+export const metadata = {
+  title: "Next.js",
+  description: "Generated by Next.js",
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  );
+}
diff --git a/examples/with-xstate/pages/index.tsx → examples/with-xstate/app/page.tsx b/examples/with-xstate/pages/index.tsx → examples/with-xstate/app/page.tsx
@@ -1,5 +1,5 @@
-import Counter from "../components/Counter";
-import Toggle from "../components/Toggle";
+import Counter from "./_components/Counter";
+import Toggle from "./_components/Toggle";
 
 export default function IndexPage() {
   return (

diff --git a/examples/with-xstate/components/Counter.tsx b/examples/with-xstate/components/Counter.tsx
diff --git a/examples/with-xstate/components/Toggle.tsx b/examples/with-xstate/components/Toggle.tsx
diff --git a/examples/with-xstate/machines/counter.ts b/examples/with-xstate/machines/counter.ts
diff --git a/examples/with-xstate/next-env.d.ts b/examples/with-xstate/next-env.d.ts
@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
diff --git a/examples/with-xstate/package.json b/examples/with-xstate/package.json
@@ -1,20 +1,21 @@
 {
   "private": true,
   "scripts": {
-    "dev": "next",
+    "dev": "next dev",
     "build": "next build",
     "start": "next start"
   },
   "dependencies": {
-    "@xstate/react": "^3.0.1",
-    "next": "12.2.5",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "xstate": "^4.33.3"
+    "@xstate/react": "^4.1.2",
+    "next": "latest",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "xstate": "^5.18.1"
   },
   "devDependencies": {
-    "@types/node": "18.7.13",
-    "@types/react": "16.9.17",
-    "typescript": "4.6.3"
+    "@types/node": "^22.5.4",
+    "@types/react": "^18.3.5",
+    "@types/react-dom": "^18.3.0",
+    "typescript": "^5.6.2"
   }
 }
diff --git a/examples/with-xstate/tsconfig.json b/examples/with-xstate/tsconfig.json
@@ -13,8 +13,13 @@
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve"
+    "jsx": "preserve",
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ]
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
   "exclude": ["node_modules"]
 }