XState + Effect・Audio Player

├── first-example ├── .gitignore ├── README.md ├── package.json ├── pnpm-lock.yaml ├── src │ └── index.ts └── tsconfig.json ├── actor-emit-events ├── src │ ├── vite-env.d.ts │ ├── main.tsx │ ├── App.tsx │ └── machine.ts ├── vite.config.ts ├── tsconfig.node.json ├── .gitignore ├── index.html ├── tsconfig.json ├── .eslintrc.cjs ├── package.json ├── README.md └── pnpm-lock.yaml ├── audio-player-react ├── src │ ├── vite-env.d.ts │ ├── main.tsx │ ├── types.ts │ ├── machine-types.ts │ ├── App.tsx │ ├── effect.ts │ └── machine.ts ├── vite.config.ts ├── tsconfig.node.json ├── .gitignore ├── index.html ├── tsconfig.json ├── .eslintrc.cjs ├── package.json ├── README.md └── pnpm-lock.yaml └── README.md /first-example/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules -------------------------------------------------------------------------------- /actor-emit-events/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /audio-player-react/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /actor-emit-events/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /audio-player-react/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /actor-emit-events/src/main.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom/client"; 3 | import App from "./App.tsx"; 4 | 5 | ReactDOM.createRoot(document.getElementById("root")!).render( 6 | 7 | 8 | 9 | ); 10 | -------------------------------------------------------------------------------- /audio-player-react/src/main.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom/client"; 3 | import App from "./App.tsx"; 4 | 5 | ReactDOM.createRoot(document.getElementById("root")!).render( 6 | 7 | 8 | 9 | ); 10 | -------------------------------------------------------------------------------- /actor-emit-events/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "skipLibCheck": true, 5 | "module": "ESNext", 6 | "moduleResolution": "bundler", 7 | "allowSyntheticDefaultImports": true 8 | }, 9 | "include": ["vite.config.ts"] 10 | } 11 | -------------------------------------------------------------------------------- /audio-player-react/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "skipLibCheck": true, 5 | "module": "ESNext", 6 | "moduleResolution": "bundler", 7 | "allowSyntheticDefaultImports": true 8 | }, 9 | "include": ["vite.config.ts"] 10 | } 11 | -------------------------------------------------------------------------------- /audio-player-react/src/types.ts: -------------------------------------------------------------------------------- 1 | export type MachineParams>> = 2 | keyof A extends infer Type 3 | ? Type extends keyof A 4 | ? keyof A[Type] extends "" 5 | ? { readonly type: Type } 6 | : { readonly type: Type; readonly params: A[Type] } 7 | : never 8 | : never; 9 | -------------------------------------------------------------------------------- /first-example/README.md: -------------------------------------------------------------------------------- 1 | # `First example` 2 | Initial exploration into all the features of XState. 3 | 4 | ## Resources 5 | - [Editor](https://stately.ai/registry/projects) 6 | - [Stately docs](https://stately.ai/docs/quick-start) (XState docs) 7 | - [Actor model](https://stately.ai/blog/what-is-the-actor-model) 8 | - [API docs](https://tsdocs.dev/docs/xstate/5.3.0) -------------------------------------------------------------------------------- /actor-emit-events/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /audio-player-react/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /actor-emit-events/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | XState + Effect・Audio Player 7 | 8 | 9 |

10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /audio-player-react/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | XState + Effect・Audio Player 7 | 8 | 9 |

8 |

{JSON.stringify(snapshot.value, null, 2)}

9 |

43 |

Notifier machine context

44 |

{JSON.stringify(context, null, 2)}

45 |

46 | ); 47 | }; 48 | 49 | /// 👇 Isolated logic for "child" machine, no reference to `root` 50 | const Child = ({ child }: { child: ActorRefFrom }) => { 51 | /// 🪄 `useSelector` to extract context from `child` actor 52 | const value = useSelector(child, (snapshot) => snapshot.context.value); 53 | return ( 54 | <> 55 |

{`Child value: ${value}`}

56 | 66 | 67 | ); 68 | }; 69 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # `XState & Effect` 2 |

3 | 4 | 5 | 6 | 7 | 8 | 9 |

10 | 11 | *** 12 | 13 | This project is part of my weekly newsletter at [**sandromaglione.com**](https://www.sandromaglione.com/newsletter?ref=Github&utm_medium=newsletter_project&utm_term=xstate&utm_term=effect). 14 | 15 | 16 | 17 | sandromaglione.com Newsletter weekly project

18 | 19 | 20 | ## Project structure 21 | The project contains 2 folders: 22 | - [`first-example`](./first-example/): My initial exploration with all the features of XState and state machines. I was specifically interested in working with types to try making the machine as type-safe as possible 23 | - [`audio-player-react`](./audio-player-react/): This is the implementation of the weekly project. It contains a Vite app that uses **XState and Effect to implement and audio player** (`