From 5348db44c31f6988b3da3bf85f377228fb5778f2 Mon Sep 17 00:00:00 2001 From: SamPhillemon <55310066+Sam-Phillemon9493@users.noreply.github.com> Date: Thu, 12 Sep 2024 02:33:38 +0530 Subject: [PATCH] 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 --- .../with-xstate/app/_components/Counter.tsx | 17 ++++++++++++ .../with-xstate/app/_components/Toggle.tsx | 15 +++++++++++ examples/with-xstate/app/_machines/counter.ts | 26 +++++++++++++++++++ .../{machines => app/_machines}/toggle.ts | 10 +++++-- examples/with-xstate/app/layout.tsx | 16 ++++++++++++ .../{pages/index.tsx => app/page.tsx} | 4 +-- examples/with-xstate/components/Counter.tsx | 18 ------------- examples/with-xstate/components/Toggle.tsx | 14 ---------- examples/with-xstate/machines/counter.ts | 26 ------------------- examples/with-xstate/next-env.d.ts | 2 +- examples/with-xstate/package.json | 19 +++++++------- examples/with-xstate/tsconfig.json | 9 +++++-- 12 files changed, 102 insertions(+), 74 deletions(-) create mode 100644 examples/with-xstate/app/_components/Counter.tsx create mode 100644 examples/with-xstate/app/_components/Toggle.tsx create mode 100644 examples/with-xstate/app/_machines/counter.ts rename examples/with-xstate/{machines => app/_machines}/toggle.ts (65%) create mode 100644 examples/with-xstate/app/layout.tsx rename examples/with-xstate/{pages/index.tsx => app/page.tsx} (63%) delete mode 100644 examples/with-xstate/components/Counter.tsx delete mode 100644 examples/with-xstate/components/Toggle.tsx delete mode 100644 examples/with-xstate/machines/counter.ts diff --git a/examples/with-xstate/app/_components/Counter.tsx b/examples/with-xstate/app/_components/Counter.tsx new file mode 100644 index 0000000000000..4b3570439f116 --- /dev/null +++ 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 ( +
+

+ Count: {state.context.count} +

+ + + +
+ ); +} diff --git a/examples/with-xstate/app/_components/Toggle.tsx b/examples/with-xstate/app/_components/Toggle.tsx new file mode 100644 index 0000000000000..ccc1d3347e14e --- /dev/null +++ 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 ( +
+

+ Toggle status: {state.matches("active") ? "On" : "Off"} +

+ +
+ ); +} diff --git a/examples/with-xstate/app/_machines/counter.ts b/examples/with-xstate/app/_machines/counter.ts new file mode 100644 index 0000000000000..ce2ba100d7703 --- /dev/null +++ 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 b/examples/with-xstate/app/_machines/toggle.ts similarity index 65% rename from examples/with-xstate/machines/toggle.ts rename to examples/with-xstate/app/_machines/toggle.ts index 8b6d093a975da..7bacec29416e4 100644 --- a/examples/with-xstate/machines/toggle.ts +++ b/examples/with-xstate/app/_machines/toggle.ts @@ -8,8 +8,11 @@ type ToggleEvents = { type: "TOGGLE"; }; -export const toggleMachine = createMachine({ - 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({ on: { TOGGLE: "inactive" }, }, }, + context: { + value: "inactive", + }, }); diff --git a/examples/with-xstate/app/layout.tsx b/examples/with-xstate/app/layout.tsx new file mode 100644 index 0000000000000..5ff842ef07b83 --- /dev/null +++ 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 ( + + {children} + + ); +} diff --git a/examples/with-xstate/pages/index.tsx b/examples/with-xstate/app/page.tsx similarity index 63% rename from examples/with-xstate/pages/index.tsx rename to examples/with-xstate/app/page.tsx index b2cd5a2da3fdf..f78e650c1db50 100644 --- a/examples/with-xstate/pages/index.tsx +++ b/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 deleted file mode 100644 index 321a3ad18e0b5..0000000000000 --- a/examples/with-xstate/components/Counter.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import { useMachine } from "@xstate/react"; -import { counterMachine } from "../machines/counter"; - -export default function Counter({ counter = {} }) { - const [current, send] = useMachine(counterMachine, { - context: { count: 999 }, - }); - return ( -
-

- Count: {current.context.count} -

- - - -
- ); -} diff --git a/examples/with-xstate/components/Toggle.tsx b/examples/with-xstate/components/Toggle.tsx deleted file mode 100644 index 0ae69116671b1..0000000000000 --- a/examples/with-xstate/components/Toggle.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import { useMachine } from "@xstate/react"; -import { toggleMachine } from "../machines/toggle"; - -export default function Toggle() { - const [current, send] = useMachine(toggleMachine); - return ( -
-

- Toogle status: {current.matches("active") ? "On" : "Off"} -

- -
- ); -} diff --git a/examples/with-xstate/machines/counter.ts b/examples/with-xstate/machines/counter.ts deleted file mode 100644 index d4a03944330ff..0000000000000 --- a/examples/with-xstate/machines/counter.ts +++ /dev/null @@ -1,26 +0,0 @@ -import { createMachine, assign } from "xstate"; - -type CounterContext = { - count: number; -}; - -type CounterEvents = { - type: "INC" | "DEC" | "RESET"; -}; - -export const counterMachine = createMachine({ - predictableActionArguments: true, - initial: "active", - context: { - count: 0, - }, - 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/next-env.d.ts b/examples/with-xstate/next-env.d.ts index a4a7b3f5cfa2f..40c3d68096c27 100644 --- a/examples/with-xstate/next-env.d.ts +++ b/examples/with-xstate/next-env.d.ts @@ -2,4 +2,4 @@ /// // 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 index 9fac2154caadf..7488ec0ee93c7 100644 --- 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 index 50bcb22f653d7..7093468dbe20a 100644 --- 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"] }