├── .changeset ├── README.md └── config.json ├── .git-blame-ignore-revs ├── .github ├── FUNDING.yml ├── ISSUE_TEMPLATE │ ├── bug_report.yml │ └── config.yml ├── actions │ ├── ci-checks │ │ └── action.yml │ └── ci-setup │ │ └── action.yml └── workflows │ ├── nodejs.yml │ └── release.yml ├── .gitignore ├── .knip.jsonc ├── .node-version ├── .prettierignore ├── .prettierrc ├── .vscode ├── launch.json └── settings.json ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── ISSUE_TEMPLATE.md ├── LICENSE ├── README.md ├── babel.config.js ├── docs ├── .vuepress │ ├── components │ │ ├── UpdatesIndex.vue │ │ └── mermaid.vue │ ├── config.js │ ├── public │ │ ├── android-chrome-192x192.png │ │ ├── android-chrome-256x256.png │ │ ├── apple-touch-icon.png │ │ ├── browserconfig.xml │ │ ├── favicon-16x16.png │ │ ├── favicon-32x32.png │ │ ├── favicon.ico │ │ ├── logo.svg │ │ ├── manifest.json │ │ ├── mstile-150x150.png │ │ ├── safari-pinned-tab.svg │ │ ├── site.webmanifest │ │ └── stately.png │ ├── styles │ │ ├── index.styl │ │ └── palette.styl │ └── theme │ │ ├── WORKAROUND.md │ │ ├── components │ │ └── AlgoliaSearchBox.vue │ │ └── index.js ├── README.md ├── about │ ├── basic-statechart.png │ ├── concepts.md │ ├── deep-history-state-icon.png │ ├── final-state-icon.png │ ├── glossary.md │ ├── goals.md │ ├── history-state-icon.png │ ├── initial-state-icon.png │ ├── initial-state.png │ ├── resources.md │ ├── showcase.md │ ├── statechart-with-parallel-state.png │ ├── statechart-with-parent-and-child-states.png │ └── tutorials.md ├── examples │ ├── calculator.md │ ├── counter.md │ ├── covid-tracker.md │ └── todomvc.md ├── fr │ ├── README.md │ ├── about │ │ ├── concepts.md │ │ ├── glossary.md │ │ ├── goals.md │ │ ├── resources.md │ │ ├── showcase.md │ │ └── tutorials.md │ ├── examples │ │ ├── calculator.md │ │ ├── counter.md │ │ ├── covid-tracker.md │ │ └── todomvc.md │ ├── guides │ │ ├── actions.md │ │ ├── activities.md │ │ ├── actors.md │ │ ├── communication.md │ │ ├── context.md │ │ ├── delays.md │ │ ├── effects.md │ │ ├── events.md │ │ ├── faqs.md │ │ ├── final.md │ │ ├── guards.md │ │ ├── hierarchical.md │ │ ├── history.md │ │ ├── ids.md │ │ ├── installation.md │ │ ├── internal.md │ │ ├── interpretation.md │ │ ├── introduction-to-state-machines-and-statecharts │ │ │ ├── asleep-awake.svg │ │ │ ├── basic-login.svg │ │ │ ├── compound-state.svg │ │ │ ├── delayed-transition.svg │ │ │ ├── entry-action.svg │ │ │ ├── final-state.svg │ │ │ ├── index.md │ │ │ ├── initial-state.svg │ │ │ ├── login-compound-state.svg │ │ │ ├── parallel-states.svg │ │ │ ├── self-transition.svg │ │ │ └── transitions-events.svg │ │ ├── machines.md │ │ ├── models.md │ │ ├── parallel.md │ │ ├── scxml.md │ │ ├── start.md │ │ ├── statenodes.md │ │ ├── states.md │ │ ├── testing.md │ │ ├── transitions.md │ │ └── typescript.md │ ├── packages │ │ ├── core │ │ │ └── index.md │ │ ├── xstate-cli │ │ │ └── index.md │ │ ├── xstate-dev │ │ │ └── index.md │ │ ├── xstate-graph │ │ │ └── index.md │ │ ├── xstate-immer │ │ │ └── index.md │ │ ├── xstate-inspect │ │ │ └── index.md │ │ ├── xstate-react │ │ │ └── index.md │ │ ├── xstate-svelte │ │ │ └── index.md │ │ ├── xstate-test │ │ │ └── index.md │ │ └── xstate-vue │ │ │ └── index.md │ ├── patterns │ │ └── sequence.md │ ├── recipes │ │ ├── deno.md │ │ ├── ember.md │ │ ├── react.md │ │ ├── rxjs.md │ │ ├── stencil.md │ │ ├── svelte.md │ │ └── vue.md │ ├── sandboxes │ │ └── todomvc │ │ │ ├── .editorconfig │ │ │ ├── .gitattributes │ │ │ ├── .gitignore │ │ │ ├── Todo.jsx │ │ │ ├── Todos.jsx │ │ │ ├── index.html │ │ │ ├── index.js │ │ │ ├── package.json │ │ │ ├── readme.md │ │ │ ├── todoMachine.js │ │ │ ├── todosMachine.js │ │ │ └── useHashChange.js │ ├── tutorials │ │ ├── 7guis │ │ │ ├── counter.md │ │ │ ├── flight.md │ │ │ ├── temperature.md │ │ │ └── timer.md │ │ └── reddit.md │ ├── updates │ │ ├── 2021-10-14.md │ │ ├── 2021-10-15.md │ │ ├── 2022-01-06.md │ │ └── README.md │ └── visualizer │ │ ├── README.md │ │ ├── command-palette.png │ │ ├── fit-to-view.png │ │ ├── guard-error.png │ │ ├── hand.png │ │ ├── keyboard-shortcuts.png │ │ ├── reset-canvas.png │ │ ├── reset.png │ │ ├── share-menu.png │ │ ├── syntax-error.png │ │ ├── theme-all-hallows-eve.png │ │ ├── theme-amy.png │ │ ├── theme-atom-one-dark.png │ │ ├── theme-blackboard.png │ │ ├── theme-cobalt.png │ │ ├── theme-garden-of-atlantis.png │ │ ├── theme-martian-night.png │ │ ├── theme-merbivore-soft.png │ │ ├── theme-monokai.png │ │ ├── theme-night-owl.png │ │ ├── theme-poimandres.png │ │ ├── theme-tomorrow-night.png │ │ ├── theme-xstate-viz.png │ │ ├── transition-error.png │ │ ├── tweet.png │ │ ├── view-controls.png │ │ ├── zoom-in.png │ │ └── zoom-out.png ├── guides │ ├── actions.md │ ├── activities.md │ ├── actors.md │ ├── communication.md │ ├── context.md │ ├── delays.md │ ├── effects.md │ ├── events.md │ ├── faqs.md │ ├── final.md │ ├── guards.md │ ├── hierarchical.md │ ├── history.md │ ├── ids.md │ ├── installation.md │ ├── internal.md │ ├── interpretation.md │ ├── introduction-to-state-machines-and-statecharts │ │ ├── asleep-awake.svg │ │ ├── basic-login.svg │ │ ├── compound-state.svg │ │ ├── delayed-transition.svg │ │ ├── entry-action.svg │ │ ├── final-state.svg │ │ ├── index.md │ │ ├── initial-state.svg │ │ ├── login-compound-state.svg │ │ ├── parallel-states.svg │ │ ├── self-transition.svg │ │ └── transitions-events.svg │ ├── machines.md │ ├── models.md │ ├── parallel.md │ ├── scxml.md │ ├── start.md │ ├── statenodes.md │ ├── states.md │ ├── testing.md │ ├── transitions.md │ └── typescript.md ├── package.json ├── packages │ ├── core │ │ └── index.md │ ├── xstate-cli │ │ └── index.md │ ├── xstate-dev │ │ └── index.md │ ├── xstate-graph │ │ └── index.md │ ├── xstate-immer │ │ └── index.md │ ├── xstate-inspect │ │ └── index.md │ ├── xstate-react │ │ └── index.md │ ├── xstate-solid │ │ └── index.md │ ├── xstate-svelte │ │ └── index.md │ ├── xstate-test │ │ └── index.md │ └── xstate-vue │ │ └── index.md ├── patterns │ └── sequence.md ├── recipes │ ├── deno.md │ ├── ember.md │ ├── react.md │ ├── rxjs.md │ ├── solid.md │ ├── stencil.md │ ├── svelte.md │ └── vue.md ├── roadmap │ └── README.md ├── sandboxes │ └── todomvc │ │ ├── .editorconfig │ │ ├── .gitattributes │ │ ├── .gitignore │ │ ├── Todo.jsx │ │ ├── Todos.jsx │ │ ├── index.html │ │ ├── index.js │ │ ├── package.json │ │ ├── readme.md │ │ ├── todoMachine.js │ │ ├── todosMachine.js │ │ └── useHashChange.js ├── tutorials │ ├── 7guis │ │ ├── counter.md │ │ ├── flight.md │ │ ├── temperature.md │ │ └── timer.md │ └── reddit.md ├── updates │ ├── 2021-10-14.md │ ├── 2021-10-15.md │ ├── 2022-01-06.md │ ├── 2022-03-24.md │ ├── 2022-04-05.md │ ├── 2023-01-26.md │ └── README.md ├── visualizer │ ├── README.md │ ├── command-palette.png │ ├── fit-to-view.png │ ├── guard-error.png │ ├── hand.png │ ├── keyboard-shortcuts.png │ ├── reset-canvas.png │ ├── reset.png │ ├── share-menu.png │ ├── syntax-error.png │ ├── theme-all-hallows-eve.png │ ├── theme-amy.png │ ├── theme-atom-one-dark.png │ ├── theme-blackboard.png │ ├── theme-cobalt.png │ ├── theme-garden-of-atlantis.png │ ├── theme-martian-night.png │ ├── theme-merbivore-soft.png │ ├── theme-monokai.png │ ├── theme-night-owl.png │ ├── theme-poimandres.png │ ├── theme-tomorrow-night.png │ ├── theme-xstate-viz.png │ ├── transition-error.png │ ├── tweet.png │ ├── view-controls.png │ ├── zoom-in.png │ └── zoom-out.png └── zh │ ├── README.md │ ├── about │ ├── concepts.md │ ├── glossary.md │ ├── goals.md │ ├── resources.md │ ├── showcase.md │ └── tutorials.md │ ├── examples │ ├── calculator.md │ ├── counter.md │ ├── covid-tracker.md │ └── todomvc.md │ ├── guides │ ├── actions.md │ ├── activities.md │ ├── actors.md │ ├── communication.md │ ├── context.md │ ├── delays.md │ ├── effects.md │ ├── events.md │ ├── faqs.md │ ├── final.md │ ├── guards.md │ ├── hierarchical.md │ ├── history.md │ ├── ids.md │ ├── installation.md │ ├── internal.md │ ├── interpretation.md │ ├── introduction-to-state-machines-and-statecharts │ │ ├── asleep-awake.svg │ │ ├── basic-login.svg │ │ ├── compound-state.svg │ │ ├── delayed-transition.svg │ │ ├── entry-action.svg │ │ ├── final-state.svg │ │ ├── index.md │ │ ├── initial-state.svg │ │ ├── login-compound-state.svg │ │ ├── parallel-states.svg │ │ ├── self-transition.svg │ │ └── transitions-events.svg │ ├── machines.md │ ├── models.md │ ├── parallel.md │ ├── scxml.md │ ├── start.md │ ├── statenodes.md │ ├── states.md │ ├── testing.md │ ├── transitions.md │ └── typescript.md │ ├── packages │ ├── core │ │ └── index.md │ ├── xstate-cli │ │ └── index.md │ ├── xstate-dev │ │ └── index.md │ ├── xstate-graph │ │ └── index.md │ ├── xstate-immer │ │ └── index.md │ ├── xstate-inspect │ │ └── index.md │ ├── xstate-react │ │ └── index.md │ ├── xstate-svelte │ │ └── index.md │ ├── xstate-test │ │ └── index.md │ └── xstate-vue │ │ └── index.md │ ├── patterns │ └── sequence.md │ ├── recipes │ ├── deno.md │ ├── ember.md │ ├── react.md │ ├── rxjs.md │ ├── stencil.md │ ├── svelte.md │ └── vue.md │ ├── sandboxes │ └── todomvc │ │ ├── .editorconfig │ │ ├── .gitattributes │ │ ├── .gitignore │ │ ├── Todo.jsx │ │ ├── Todos.jsx │ │ ├── index.html │ │ ├── index.js │ │ ├── package.json │ │ ├── readme.md │ │ ├── todoMachine.js │ │ ├── todosMachine.js │ │ └── useHashChange.js │ ├── tutorials │ ├── 7guis │ │ ├── counter.md │ │ ├── flight.md │ │ ├── temperature.md │ │ └── timer.md │ └── reddit.md │ ├── updates │ ├── 2021-10-14.md │ ├── 2021-10-15.md │ └── README.md │ └── visualizer │ ├── README.md │ ├── command-palette.png │ ├── fit-to-view.png │ ├── guard-error.png │ ├── hand.png │ ├── keyboard-shortcuts.png │ ├── reset-canvas.png │ ├── reset.png │ ├── share-menu.png │ ├── syntax-error.png │ ├── theme-all-hallows-eve.png │ ├── theme-amy.png │ ├── theme-atom-one-dark.png │ ├── theme-blackboard.png │ ├── theme-cobalt.png │ ├── theme-garden-of-atlantis.png │ ├── theme-martian-night.png │ ├── theme-merbivore-soft.png │ ├── theme-monokai.png │ ├── theme-night-owl.png │ ├── theme-poimandres.png │ ├── theme-tomorrow-night.png │ ├── theme-xstate-viz.png │ ├── transition-error.png │ ├── tweet.png │ ├── view-controls.png │ ├── zoom-in.png │ └── zoom-out.png ├── eslint.config.mjs ├── examples ├── 7guis-1-counter-vue │ ├── .gitignore │ ├── .vscode │ │ └── extensions.json │ ├── README.md │ ├── index.html │ ├── package.json │ ├── pnpm-lock.yaml │ ├── src │ │ ├── App.vue │ │ ├── Counter.vue │ │ ├── components │ │ │ └── HelloWorld.vue │ │ ├── counterMachine.ts │ │ ├── main.ts │ │ ├── style.css │ │ ├── vite-env.d.ts │ │ └── vue-shim.d.ts │ ├── tsconfig.json │ ├── tsconfig.node.json │ └── vite.config.ts ├── 7guis-2-temperature-vue │ ├── .gitignore │ ├── .vscode │ │ └── extensions.json │ ├── README.md │ ├── index.html │ ├── package.json │ ├── pnpm-lock.yaml │ ├── public │ │ └── vite.svg │ ├── src │ │ ├── App.vue │ │ ├── TempConverter.vue │ │ ├── main.ts │ │ ├── style.css │ │ ├── tempMachine.ts │ │ ├── vite-env.d.ts │ │ └── vue-shim.d.ts │ ├── tsconfig.json │ ├── tsconfig.node.json │ └── vite.config.ts ├── 7guis-counter-react │ ├── .gitignore │ ├── index.html │ ├── package.json │ ├── pnpm-lock.yaml │ ├── readme.md │ ├── src │ │ ├── App.css │ │ ├── App.tsx │ │ ├── counterMachine.ts │ │ ├── favicon.svg │ │ ├── index.css │ │ ├── main.tsx │ │ └── vite-env.d.ts │ ├── tsconfig.json │ └── vite.config.ts ├── 7guis-flight-booker-react │ ├── .eslintrc.cjs │ ├── .gitignore │ ├── README.md │ ├── index.html │ ├── package-lock.json │ ├── package.json │ ├── pnpm-lock.yaml │ ├── public │ │ ├── flight-booker.jpg │ │ ├── flight-booker.png │ │ └── vite.svg │ ├── src │ │ ├── App.tsx │ │ ├── components │ │ │ ├── BookButton.tsx │ │ │ ├── DateInput.tsx │ │ │ ├── Header.tsx │ │ │ ├── TripSelector.tsx │ │ │ └── index.ts │ │ ├── machines │ │ │ └── flightMachine.ts │ │ ├── main.tsx │ │ ├── styles │ │ │ ├── reset.css │ │ │ └── styles.css │ │ ├── utils │ │ │ └── index.ts │ │ └── vite-env.d.ts │ ├── tsconfig.json │ ├── tsconfig.node.json │ ├── types.d.ts │ └── vite.config.ts ├── 7guis-temperature-react │ ├── .gitignore │ ├── index.html │ ├── package.json │ ├── pnpm-lock.yaml │ ├── readme.md │ ├── src │ │ ├── App.css │ │ ├── App.tsx │ │ ├── favicon.svg │ │ ├── index.css │ │ ├── main.tsx │ │ ├── temperatureMachine.ts │ │ └── vite-env.d.ts │ ├── tsconfig.json │ └── vite.config.ts ├── counter │ ├── .gitignore │ ├── index.html │ ├── package.json │ ├── pnpm-lock.yaml │ ├── public │ │ └── vite.svg │ ├── readme.md │ ├── src │ │ ├── counterMachine.ts │ │ ├── main.ts │ │ ├── style.css │ │ └── vite-env.d.ts │ └── tsconfig.json ├── express-workflow │ ├── README.md │ ├── index.ts │ ├── machine.ts │ ├── package.json │ ├── pnpm-lock.yaml │ └── tsconfig.json ├── fetch │ ├── README.md │ ├── index.html │ ├── package.json │ ├── pnpm-lock.yaml │ └── src │ │ ├── fetchMachine.ts │ │ └── index.ts ├── friends-list-react │ ├── .gitignore │ ├── index.html │ ├── package.json │ ├── pnpm-lock.yaml │ ├── readme.md │ ├── src │ │ ├── App.css │ │ ├── App.tsx │ │ ├── Friend.tsx │ │ ├── favicon.svg │ │ ├── friendMachine.ts │ │ ├── friendsMachine.ts │ │ ├── index.css │ │ ├── main.tsx │ │ └── vite-env.d.ts │ ├── tsconfig.json │ └── vite.config.ts ├── local-store-counter-react │ ├── README.md │ ├── eslint.config.js │ ├── index.html │ ├── package.json │ ├── pnpm-lock.yaml │ ├── src │ │ ├── App.css │ │ ├── App.tsx │ │ ├── assets │ │ │ └── react.svg │ │ ├── index.css │ │ ├── main.tsx │ │ └── vite-env.d.ts │ ├── tsconfig.app.json │ ├── tsconfig.json │ ├── tsconfig.node.json │ └── vite.config.ts ├── mongodb-credit-check-api │ ├── .gitignore │ ├── .prettierrc │ ├── README.md │ ├── index.ts │ ├── machine.ts │ ├── models │ │ ├── creditProfile.ts │ │ └── creditReport.ts │ ├── package.json │ ├── pnpm-lock.yaml │ ├── services │ │ ├── actorService.ts │ │ └── machineLogicService.ts │ └── tsconfig.json ├── mongodb-persisted-state │ ├── .gitignore │ ├── README.md │ ├── TaskQueue.ts │ ├── donutMachine.ts │ ├── main.ts │ ├── package.json │ ├── pnpm-lock.yaml │ └── tsconfig.json ├── persisted-donut-maker │ ├── .gitignore │ ├── donutMachine.ts │ ├── main.ts │ ├── package.json │ ├── pnpm-lock.yaml │ └── tsconfig.json ├── readme.md ├── snake-react │ ├── .eslintrc.cjs │ ├── .gitignore │ ├── README.md │ ├── index.html │ ├── package.json │ ├── pnpm-lock.yaml │ ├── src │ │ ├── App.tsx │ │ ├── index.css │ │ ├── main.tsx │ │ ├── snakeMachine.ts │ │ └── vite-env.d.ts │ ├── tsconfig.json │ ├── tsconfig.node.json │ └── vite.config.ts ├── stopwatch │ ├── .gitignore │ ├── index.html │ ├── package.json │ ├── pnpm-lock.yaml │ ├── public │ │ └── vite.svg │ ├── readme.md │ ├── src │ │ ├── main.ts │ │ ├── stopwatchMachine.ts │ │ ├── style.css │ │ └── vite-env.d.ts │ └── tsconfig.json ├── store-counter-react │ ├── README.md │ ├── eslint.config.js │ ├── index.html │ ├── package.json │ ├── pnpm-lock.yaml │ ├── src │ │ ├── App.css │ │ ├── App.tsx │ │ ├── assets │ │ │ └── react.svg │ │ ├── index.css │ │ ├── main.tsx │ │ └── vite-env.d.ts │ ├── tsconfig.app.json │ ├── tsconfig.json │ ├── tsconfig.node.json │ └── vite.config.ts ├── tic-tac-toe-react │ ├── index.html │ ├── package.json │ ├── pnpm-lock.yaml │ ├── readme.md │ ├── src │ │ ├── App.tsx │ │ ├── main.tsx │ │ ├── styles.css │ │ ├── ticTacToeMachine.ts │ │ └── vite-env.d.ts │ └── tsconfig.json ├── tiles │ ├── .gitignore │ ├── index.html │ ├── package.json │ ├── pnpm-lock.yaml │ ├── public │ │ └── vite.svg │ ├── readme.md │ ├── src │ │ ├── App.css │ │ ├── App.tsx │ │ ├── assets │ │ │ └── react.svg │ │ ├── index.css │ │ ├── main.tsx │ │ ├── tilesMachine.ts │ │ └── vite-env.d.ts │ ├── tsconfig.json │ ├── tsconfig.node.json │ └── vite.config.ts ├── timer │ ├── .gitignore │ ├── index.html │ ├── package.json │ ├── pnpm-lock.yaml │ ├── public │ │ └── vite.svg │ ├── readme.md │ ├── src │ │ ├── App.css │ │ ├── App.tsx │ │ ├── assets │ │ │ └── react.svg │ │ ├── index.css │ │ ├── main.tsx │ │ ├── timerMachine.ts │ │ └── vite-env.d.ts │ ├── tsconfig.json │ ├── tsconfig.node.json │ └── vite.config.ts ├── todomvc-react │ ├── .gitignore │ ├── index.html │ ├── package.json │ ├── pnpm-lock.yaml │ ├── readme.md │ ├── src │ │ ├── App.css │ │ ├── App.tsx │ │ ├── Todo.tsx │ │ ├── Todos.tsx │ │ ├── index.css │ │ ├── logo.svg │ │ ├── main.tsx │ │ ├── react-app-env.d.ts │ │ ├── todosMachine.ts │ │ └── useHashChange.ts │ ├── tsconfig.json │ └── vite.config.ts ├── toggle │ ├── .gitignore │ ├── index.html │ ├── package.json │ ├── pnpm-lock.yaml │ ├── public │ │ └── vite.svg │ ├── readme.md │ ├── src │ │ ├── main.ts │ │ ├── style.css │ │ ├── toggleMachine.ts │ │ └── vite-env.d.ts │ └── tsconfig.json ├── trivia-game-example │ ├── .eslintrc.cjs │ ├── .gitignore │ ├── README.md │ ├── index.html │ ├── package.json │ ├── pnpm-lock.yaml │ ├── postcss.config.js │ ├── src │ │ ├── App.css │ │ ├── App.tsx │ │ ├── common │ │ │ ├── constants.ts │ │ │ └── types.ts │ │ ├── components │ │ │ ├── game │ │ │ │ ├── CharacterPicture.tsx │ │ │ │ ├── Clue.tsx │ │ │ │ ├── GamePanel.tsx │ │ │ │ ├── GuessOptions.tsx │ │ │ │ ├── LifesCounter.tsx │ │ │ │ ├── Lose.tsx │ │ │ │ ├── PointCounter.tsx │ │ │ │ ├── QuestionNumber.tsx │ │ │ │ ├── StartGame.tsx │ │ │ │ └── Win.tsx │ │ │ ├── layout │ │ │ │ ├── BigTitle.tsx │ │ │ │ ├── DisplayError.tsx │ │ │ │ ├── ErrorBoundary.tsx │ │ │ │ ├── GameTitle.tsx │ │ │ │ ├── ImgsBack.tsx │ │ │ │ └── Modal.tsx │ │ │ └── styled │ │ │ │ ├── Button.tsx │ │ │ │ ├── ImgBack.tsx │ │ │ │ └── Option.tsx │ │ ├── context │ │ │ └── AppContext.tsx │ │ ├── index.css │ │ ├── main.tsx │ │ ├── pages │ │ │ ├── Home.tsx │ │ │ └── Trivia.tsx │ │ ├── services │ │ │ └── RickApi.tsx │ │ ├── styles │ │ │ └── global.scss │ │ ├── triviaMachine.ts │ │ └── vite-env.d.ts │ ├── tailwind.config.js │ ├── tsconfig.json │ ├── tsconfig.node.json │ └── vite.config.ts ├── workflow-accumulate-room-readings │ ├── .gitignore │ ├── main.ts │ ├── package.json │ ├── pnpm-lock.yaml │ └── tsconfig.json ├── workflow-applicant-request │ ├── .gitignore │ ├── main.ts │ ├── package.json │ ├── pnpm-lock.yaml │ └── tsconfig.json ├── workflow-async-function │ ├── .gitignore │ ├── main.ts │ ├── package.json │ ├── pnpm-lock.yaml │ └── tsconfig.json ├── workflow-async-subflow │ ├── .gitignore │ ├── main.ts │ ├── package.json │ ├── pnpm-lock.yaml │ └── tsconfig.json ├── workflow-book-lending │ ├── .gitignore │ ├── main.ts │ ├── package.json │ ├── pnpm-lock.yaml │ └── tsconfig.json ├── workflow-car-auction-bids │ ├── .gitignore │ ├── main.ts │ ├── package.json │ ├── pnpm-lock.yaml │ └── tsconfig.json ├── workflow-car-vitals │ ├── .gitignore │ ├── main.ts │ ├── package.json │ ├── pnpm-lock.yaml │ └── tsconfig.json ├── workflow-check-inbox │ ├── .gitignore │ ├── main.ts │ ├── package.json │ ├── pnpm-lock.yaml │ └── tsconfig.json ├── workflow-credit-check │ ├── .gitignore │ ├── main.ts │ ├── package.json │ ├── pnpm-lock.yaml │ └── tsconfig.json ├── workflow-event-based-service │ ├── .gitignore │ ├── main.ts │ ├── package.json │ ├── pnpm-lock.yaml │ └── tsconfig.json ├── workflow-event-based │ ├── .gitignore │ ├── main.ts │ ├── package.json │ ├── pnpm-lock.yaml │ └── tsconfig.json ├── workflow-event-greeting │ ├── .gitignore │ ├── main.ts │ ├── package.json │ ├── pnpm-lock.yaml │ └── tsconfig.json ├── workflow-filling-water │ ├── .gitignore │ ├── main.ts │ ├── package.json │ ├── pnpm-lock.yaml │ └── tsconfig.json ├── workflow-finalize-college-app │ ├── .gitignore │ ├── main.ts │ ├── package.json │ ├── pnpm-lock.yaml │ └── tsconfig.json ├── workflow-greeting │ ├── .gitignore │ ├── main.ts │ ├── package.json │ ├── pnpm-lock.yaml │ └── tsconfig.json ├── workflow-hello │ ├── .gitignore │ ├── main.ts │ ├── package.json │ ├── pnpm-lock.yaml │ └── tsconfig.json ├── workflow-math-problem │ ├── .gitignore │ ├── main.ts │ ├── package.json │ ├── pnpm-lock.yaml │ └── tsconfig.json ├── workflow-media-scanner │ ├── .gitignore │ ├── README.md │ ├── package.json │ ├── pnpm-lock.yaml │ ├── src │ │ ├── fileHandlers.ts │ │ ├── index.ts │ │ └── mediaScannerMachine.ts │ └── tsconfig.json ├── workflow-monitor-job │ ├── .gitignore │ ├── main.ts │ ├── package.json │ ├── pnpm-lock.yaml │ └── tsconfig.json ├── workflow-monitor-patient │ ├── .gitignore │ ├── main.ts │ ├── package.json │ ├── pnpm-lock.yaml │ └── tsconfig.json ├── workflow-new-patient-onboarding │ ├── .gitignore │ ├── main.ts │ ├── package.json │ ├── pnpm-lock.yaml │ └── tsconfig.json ├── workflow-parallel │ ├── .gitignore │ ├── main.ts │ ├── package.json │ ├── pnpm-lock.yaml │ └── tsconfig.json ├── workflow-provision-orders │ ├── .gitignore │ ├── main.ts │ ├── package.json │ ├── pnpm-lock.yaml │ └── tsconfig.json ├── workflow-purchase-order-deadline │ ├── .gitignore │ ├── main.ts │ ├── package.json │ ├── pnpm-lock.yaml │ └── tsconfig.json ├── workflow-reusing-functions │ ├── .gitignore │ ├── main.ts │ ├── package.json │ ├── pnpm-lock.yaml │ └── tsconfig.json └── workflow-send-cloudevent │ ├── .gitignore │ ├── main.ts │ ├── package.json │ ├── pnpm-lock.yaml │ └── tsconfig.json ├── jest.config.js ├── migration.md ├── package.json ├── packages ├── core │ ├── .gitignore │ ├── CHANGELOG.md │ ├── LICENSE │ ├── README.md │ ├── actions │ │ └── package.json │ ├── actor │ │ └── package.json │ ├── actors │ │ └── package.json │ ├── dev │ │ └── package.json │ ├── guards │ │ └── package.json │ ├── invoke │ │ └── package.json │ ├── package.json │ ├── src │ │ ├── Mailbox.ts │ │ ├── SimulatedClock.ts │ │ ├── State.ts │ │ ├── StateMachine.ts │ │ ├── StateNode.ts │ │ ├── actions.ts │ │ ├── actions │ │ │ ├── assign.ts │ │ │ ├── cancel.ts │ │ │ ├── emit.ts │ │ │ ├── enqueueActions.ts │ │ │ ├── log.ts │ │ │ ├── raise.ts │ │ │ ├── send.ts │ │ │ ├── spawnChild.ts │ │ │ └── stopChild.ts │ │ ├── actors │ │ │ ├── callback.ts │ │ │ ├── index.ts │ │ │ ├── observable.ts │ │ │ ├── promise.ts │ │ │ └── transition.ts │ │ ├── assert.ts │ │ ├── constants.ts │ │ ├── createActor.ts │ │ ├── createMachine.ts │ │ ├── dev │ │ │ └── index.ts │ │ ├── eventUtils.ts │ │ ├── false.ts │ │ ├── getNextSnapshot.ts │ │ ├── guards.ts │ │ ├── index.ts │ │ ├── inspection.ts │ │ ├── machine.schema.json │ │ ├── memo.ts │ │ ├── reportUnhandledError.ts │ │ ├── scxml.ts │ │ ├── setup.ts │ │ ├── spawn.ts │ │ ├── stateUtils.ts │ │ ├── symbolObservable.ts │ │ ├── system.ts │ │ ├── toPromise.ts │ │ ├── transition.ts │ │ ├── true.ts │ │ ├── types.ts │ │ ├── utils.ts │ │ └── waitFor.ts │ └── test │ │ ├── actions.test.ts │ │ ├── activities.test.ts │ │ ├── actor.test.ts │ │ ├── actorLogic.test.ts │ │ ├── after.test.ts │ │ ├── assert.test.ts │ │ ├── assign.test.ts │ │ ├── clock.test.ts │ │ ├── deep.test.ts │ │ ├── definition.test.ts │ │ ├── deterministic.test.ts │ │ ├── emit.test.ts │ │ ├── errors.test.ts │ │ ├── event.test.ts │ │ ├── eventDescriptors.test.ts │ │ ├── examples │ │ ├── 6.16.test.ts │ │ ├── 6.17.test.ts │ │ ├── 6.6.test.ts │ │ ├── 6.8.test.ts │ │ ├── 6.9.test.ts │ │ └── cd.test.ts │ │ ├── final.test.ts │ │ ├── fixtures │ │ └── scxml │ │ │ └── assign-current-small-step │ │ │ ├── test0.json │ │ │ └── test0.scxml │ │ ├── getNextSnapshot.test.ts │ │ ├── guards.test.ts │ │ ├── history.test.ts │ │ ├── id.test.ts │ │ ├── initial.test.ts │ │ ├── input.test.ts │ │ ├── inspect.test.ts │ │ ├── internalTransitions.test.ts │ │ ├── interpreter.test.ts │ │ ├── invalid.test.ts │ │ ├── invoke.test.ts │ │ ├── json.test.ts │ │ ├── logger.test.ts │ │ ├── machine.test.ts │ │ ├── match.test.ts │ │ ├── meta.test.ts │ │ ├── microstep.test.ts │ │ ├── multiple.test.ts │ │ ├── order.test.ts │ │ ├── parallel.test.ts │ │ ├── predictableExec.test.ts │ │ ├── rehydration.test.ts │ │ ├── resolve.test.ts │ │ ├── scxml.test.ts │ │ ├── setup.types.test.ts │ │ ├── spawn.test.ts │ │ ├── spawn.types.test.ts │ │ ├── spawnChild.test.ts │ │ ├── state.test.ts │ │ ├── stateIn.test.ts │ │ ├── system.test.ts │ │ ├── tags.test.ts │ │ ├── toPromise.test.ts │ │ ├── transient.test.ts │ │ ├── transition.test.ts │ │ ├── typeHelpers.test.ts │ │ ├── types.test.ts │ │ ├── utils.ts │ │ └── waitFor.test.ts ├── xstate-graph │ ├── CHANGELOG.md │ ├── LICENSE │ ├── README.md │ ├── package.json │ ├── src │ │ ├── TestModel.ts │ │ ├── actorScope.ts │ │ ├── adjacency.ts │ │ ├── alterPath.ts │ │ ├── deduplicatePaths.ts │ │ ├── graph.ts │ │ ├── index.ts │ │ ├── pathFromEvents.ts │ │ ├── pathGenerators.ts │ │ ├── shortestPaths.ts │ │ ├── simplePaths.ts │ │ ├── types.ts │ │ ├── utils.ts │ │ └── validateMachine.ts │ └── test │ │ ├── __snapshots__ │ │ └── graph.test.ts.snap │ │ ├── adjacency.test.ts │ │ ├── dieHard.test.ts │ │ ├── events.test.ts │ │ ├── forbiddenAttributes.test.ts │ │ ├── graph.test.ts │ │ ├── index.test.ts │ │ ├── paths.test.ts │ │ ├── shortestPaths.test.ts │ │ ├── states.test.ts │ │ ├── testModel.test.ts │ │ ├── testUtils.ts │ │ └── types.test.ts ├── xstate-immer │ ├── CHANGELOG.md │ ├── LICENSE │ ├── README.md │ ├── package.json │ ├── src │ │ └── index.ts │ └── test │ │ └── immer.test.ts ├── xstate-inspect │ ├── CHANGELOG.md │ ├── README.md │ ├── assets │ │ └── inspector.png │ ├── package.json │ ├── server │ │ └── package.json │ ├── src │ │ ├── browser.ts │ │ ├── index.ts │ │ ├── inspectMachine.ts │ │ ├── serialize.ts │ │ ├── server.ts │ │ ├── types.ts │ │ └── utils.ts │ └── test │ │ └── inspect.test.ts ├── xstate-react │ ├── CHANGELOG.md │ ├── LICENSE │ ├── README.md │ ├── package.json │ ├── src │ │ ├── createActorContext.ts │ │ ├── false.ts │ │ ├── index.ts │ │ ├── shallowEqual.ts │ │ ├── stopRootWithRehydration.ts │ │ ├── true.ts │ │ ├── useActor.ts │ │ ├── useActorRef.ts │ │ ├── useMachine.ts │ │ └── useSelector.ts │ └── test │ │ ├── createActorContext.test.tsx │ │ ├── types.test.tsx │ │ ├── useActor.test.tsx │ │ ├── useActorRef.test.tsx │ │ ├── useSelector.test.tsx │ │ └── utils.tsx ├── xstate-solid │ ├── CHANGELOG.md │ ├── README.md │ ├── package.json │ ├── src │ │ ├── createImmutable.ts │ │ ├── deepClone.ts │ │ ├── fromActorRef.ts │ │ ├── index.ts │ │ ├── useActor.ts │ │ ├── useActorRef.ts │ │ └── useMachine.ts │ └── test │ │ ├── deepClone.test.ts │ │ ├── fromActorRef.test.tsx │ │ ├── selector.test.tsx │ │ ├── useActor.test.tsx │ │ └── useActorRef.test.tsx ├── xstate-store │ ├── CHANGELOG.md │ ├── LICENSE │ ├── README.md │ ├── package.json │ ├── react │ │ └── package.json │ ├── solid │ │ └── package.json │ ├── src │ │ ├── alien.ts │ │ ├── atom.ts │ │ ├── fromStore.ts │ │ ├── index.ts │ │ ├── react.ts │ │ ├── select.test.ts │ │ ├── shallowEqual.ts │ │ ├── solid.ts │ │ ├── store.ts │ │ ├── toObserver.ts │ │ └── types.ts │ └── test │ │ ├── UseActor.vue │ │ ├── UseActorRef.vue │ │ ├── UseSelector.vue │ │ ├── atom.test.ts │ │ ├── fromStore.test.ts │ │ ├── react.test.tsx │ │ ├── solid.test.tsx │ │ ├── store.test.ts │ │ ├── types.test.tsx │ │ └── vue.test.ts ├── xstate-svelte │ ├── CHANGELOG.md │ ├── README.md │ ├── package.json │ ├── src │ │ ├── index.ts │ │ ├── useActor.ts │ │ ├── useActorRef.ts │ │ ├── useMachine.ts │ │ └── useSelector.ts │ ├── svelte.config.js │ └── test │ │ ├── UseActor.svelte │ │ ├── UseActorNonPersistentSubscription.svelte │ │ ├── UseActorNonPersistentSubscriptionChild.svelte │ │ ├── UseSelector.svelte │ │ ├── UseSelectorCustomFn.svelte │ │ ├── UseSelectorDeferredSubscription.svelte │ │ ├── fetchMachine.ts │ │ ├── interpreterAsReadable.svelte │ │ ├── tsconfig.json │ │ ├── useActor.test.ts │ │ └── useSelector.test.ts └── xstate-vue │ ├── CHANGELOG.md │ ├── LICENSE │ ├── README.md │ ├── package.json │ ├── src │ ├── false.ts │ ├── index.ts │ ├── true.ts │ ├── useActor.ts │ ├── useActorRef.ts │ ├── useMachine.ts │ └── useSelector.ts │ └── test │ ├── UseActorRefWithObserver.vue │ ├── UseActorRefWithTransitionLogic.vue │ ├── UseActorWithInitiallyInvokedChild.vue │ ├── UseActorWithTransitionLogic.vue │ ├── UseMachine-no-extra-options.vue │ ├── UseMachine.vue │ ├── UseSelector.vue │ ├── UseSelectorActorChange.vue │ ├── UseSelectorCustomFn.vue │ ├── UseSelectorMaybe.vue │ ├── UseSelectorWithTransitionLogic.vue │ ├── useActor.test.ts │ ├── useActorRef.test.ts │ ├── useMachine.test.ts │ ├── useSelector.test.ts │ └── vue-shim.d.ts ├── patches ├── @vue__test-utils@2.4.6.patch ├── jest-snapshot@29.7.0.patch ├── solid-js@1.8.18.patch └── solid-testing-library@0.3.0.patch ├── pnpm-lock.yaml ├── pnpm-workspace.yaml ├── scripts ├── ensure-pnpm.js ├── jest-resolver.js ├── jest-utils │ ├── console-spies.js │ ├── index.d.ts │ ├── index.js │ ├── package.json │ ├── setup.d.ts │ └── setup.js ├── typecheck-examples.js ├── update-example-deps.js └── update-example-links.js ├── templates ├── react-ts │ ├── .codesandbox │ │ └── template.json │ ├── .gitignore │ ├── README.md │ ├── index.html │ ├── package.json │ ├── pnpm-lock.yaml │ ├── src │ │ ├── App.css │ │ ├── App.tsx │ │ ├── feedbackMachine.ts │ │ ├── index.css │ │ ├── main.tsx │ │ └── vite-env.d.ts │ ├── tsconfig.json │ ├── tsconfig.node.json │ ├── vite.config.ts │ └── yarn.lock ├── svelte-ts │ ├── .gitignore │ ├── .vscode │ │ └── extensions.json │ ├── README.md │ ├── index.html │ ├── package.json │ ├── pnpm-lock.yaml │ ├── public │ │ └── vite.svg │ ├── src │ │ ├── App.svelte │ │ ├── app.css │ │ ├── feedbackMachine.ts │ │ ├── index.css │ │ ├── main.ts │ │ └── vite-env.d.ts │ ├── svelte.config.js │ ├── tsconfig.json │ ├── tsconfig.node.json │ └── vite.config.ts ├── vanilla-ts │ ├── .codesandbox │ │ └── template.json │ ├── .gitignore │ ├── README.md │ ├── index.html │ ├── package.json │ ├── pnpm-lock.yaml │ ├── src │ │ ├── feedbackMachine.ts │ │ ├── main.ts │ │ ├── style.css │ │ └── vite-env.d.ts │ ├── tsconfig.json │ └── yarn.lock └── vue-ts │ ├── .codesandbox │ └── template.json │ ├── .gitignore │ ├── .vscode │ └── extensions.json │ ├── README.md │ ├── index.html │ ├── package.json │ ├── pnpm-lock.yaml │ ├── public │ └── vite.svg │ ├── src │ ├── App.vue │ ├── Feedback.vue │ ├── feedbackMachine.ts │ ├── main.ts │ ├── style.css │ └── vite-env.d.ts │ ├── tsconfig.json │ ├── tsconfig.node.json │ └── vite.config.ts └── tsconfig.json /.changeset/README.md: -------------------------------------------------------------------------------- 1 | # Changesets 2 | 3 | Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works 4 | with multi-package repos, or single-package repos to help you version and publish your code. You can 5 | find the full documentation for it [in our repository](https://github.com/changesets/changesets) 6 | 7 | We have a quick list of common questions to get you started engaging with this project in 8 | [our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md) 9 | -------------------------------------------------------------------------------- /.changeset/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://unpkg.com/@changesets/config@1.6.3/schema.json", 3 | "changelog": ["@changesets/changelog-github", { "repo": "statelyai/xstate" }], 4 | "commit": false, 5 | "linked": [], 6 | "access": "public", 7 | "baseBranch": "main", 8 | "ignore": ["@xstate/immer", "@xstate/inspect"], 9 | "___experimentalUnsafeOptions_WILL_CHANGE_IN_PATCH": { 10 | "onlyUpdatePeerDependentsWhenOutOfRange": true, 11 | "useCalculatedVersionForSnapshots": true 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /.git-blame-ignore-revs: -------------------------------------------------------------------------------- 1 | # prettier formatting 2 | 71183da18ae6b0b6b2e8f0c52ea9976232e54f41 3 | 94037fe9c429839f0508ddcd287718b659276e3b 4 | f51bf4d8907307ace083a0decb34668176c7fad3 5 | 6 | # lint fixes 7 | 8bff3b8ad57516e9816278b77ff5e0fffafd85ca 8 | aeec38a6ef56bb534ff8bc968b95107ff54959cc 9 | -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: davidkpiano 4 | patreon: # Replace with a single Patreon username 5 | open_collective: xstate 6 | ko_fi: # Replace with a single Ko-fi username 7 | tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel 8 | community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry 9 | liberapay: # Replace with a single Liberapay username 10 | issuehunt: # Replace with a single IssueHunt username 11 | otechie: # Replace with a single Otechie username 12 | custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2'] 13 | -------------------------------------------------------------------------------- /.github/actions/ci-checks/action.yml: -------------------------------------------------------------------------------- 1 | name: 'CI checks' 2 | runs: 3 | using: 'composite' 4 | steps: 5 | - name: Build 6 | run: pnpm build 7 | shell: bash 8 | 9 | - name: ESLint 10 | run: pnpm lint --no-cache 11 | shell: bash 12 | 13 | - name: Typecheck 14 | run: pnpm typecheck 15 | shell: bash 16 | 17 | - name: Test 18 | run: pnpm test --silent 19 | shell: bash 20 | 21 | - name: Svelte Check 22 | run: pnpm --filter @xstate/svelte svelte-check 23 | shell: bash 24 | 25 | - name: Knip 26 | run: pnpm knip 27 | shell: bash 28 | -------------------------------------------------------------------------------- /.github/actions/ci-setup/action.yml: -------------------------------------------------------------------------------- 1 | name: 'CI setup' 2 | runs: 3 | using: 'composite' 4 | steps: 5 | - name: Install pnpm 6 | uses: pnpm/action-setup@v4 7 | 8 | - name: Use Node.js 22.x 9 | uses: actions/setup-node@v4 10 | with: 11 | node-version: 22.x 12 | cache: 'pnpm' 13 | registry-url: 'https://registry.npmjs.org' 14 | 15 | - name: Install Dependencies 16 | run: pnpm install 17 | shell: bash 18 | -------------------------------------------------------------------------------- /.github/workflows/nodejs.yml: -------------------------------------------------------------------------------- 1 | name: Node CI 2 | 3 | on: 4 | push: 5 | branches: 6 | - main 7 | - next 8 | pull_request: 9 | branches: 10 | - '**' 11 | 12 | permissions: 13 | contents: read # to fetch code (actions/checkout) 14 | 15 | jobs: 16 | build: 17 | timeout-minutes: 20 18 | 19 | runs-on: ubuntu-latest 20 | 21 | steps: 22 | - uses: actions/checkout@v4 23 | - uses: ./.github/actions/ci-setup 24 | - uses: ./.github/actions/ci-checks 25 | -------------------------------------------------------------------------------- /.node-version: -------------------------------------------------------------------------------- 1 | 22.14.0 2 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | pnpm-lock.yaml 2 | /docs 3 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "printWidth": 80, 3 | "tabWidth": 2, 4 | "useTabs": false, 5 | "semi": true, 6 | "singleQuote": true, 7 | "trailingComma": "none", 8 | "bracketSpacing": true, 9 | "plugins": ["prettier-plugin-jsdoc"], 10 | "tsdoc": true 11 | } 12 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "typescript.tsdk": "node_modules/typescript/lib" 3 | } 4 | -------------------------------------------------------------------------------- /docs/.vuepress/components/mermaid.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 19 | -------------------------------------------------------------------------------- /docs/.vuepress/public/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statelyai/xstate/f9d04bbfb0d043da0451562531437f51ca8c8b07/docs/.vuepress/public/android-chrome-192x192.png -------------------------------------------------------------------------------- /docs/.vuepress/public/android-chrome-256x256.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statelyai/xstate/f9d04bbfb0d043da0451562531437f51ca8c8b07/docs/.vuepress/public/android-chrome-256x256.png -------------------------------------------------------------------------------- /docs/.vuepress/public/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statelyai/xstate/f9d04bbfb0d043da0451562531437f51ca8c8b07/docs/.vuepress/public/apple-touch-icon.png -------------------------------------------------------------------------------- /docs/.vuepress/public/browserconfig.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | #da532c 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /docs/.vuepress/public/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statelyai/xstate/f9d04bbfb0d043da0451562531437f51ca8c8b07/docs/.vuepress/public/favicon-16x16.png -------------------------------------------------------------------------------- /docs/.vuepress/public/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statelyai/xstate/f9d04bbfb0d043da0451562531437f51ca8c8b07/docs/.vuepress/public/favicon-32x32.png -------------------------------------------------------------------------------- /docs/.vuepress/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statelyai/xstate/f9d04bbfb0d043da0451562531437f51ca8c8b07/docs/.vuepress/public/favicon.ico -------------------------------------------------------------------------------- /docs/.vuepress/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "XState Viz", 3 | "name": "XState Visualizer", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /docs/.vuepress/public/mstile-150x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statelyai/xstate/f9d04bbfb0d043da0451562531437f51ca8c8b07/docs/.vuepress/public/mstile-150x150.png -------------------------------------------------------------------------------- /docs/.vuepress/public/site.webmanifest: -------------------------------------------------------------------------------- 1 | { 2 | "name": "", 3 | "short_name": "", 4 | "icons": [ 5 | { 6 | "src": "/android-chrome-192x192.png", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | }, 10 | { 11 | "src": "/android-chrome-256x256.png", 12 | "sizes": "256x256", 13 | "type": "image/png" 14 | } 15 | ], 16 | "theme_color": "#ffffff", 17 | "background_color": "#ffffff", 18 | "display": "standalone" 19 | } 20 | -------------------------------------------------------------------------------- /docs/.vuepress/public/stately.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statelyai/xstate/f9d04bbfb0d043da0451562531437f51ca8c8b07/docs/.vuepress/public/stately.png -------------------------------------------------------------------------------- /docs/.vuepress/styles/palette.styl: -------------------------------------------------------------------------------- 1 | $accentColor = #40A4E3 2 | -------------------------------------------------------------------------------- /docs/.vuepress/theme/WORKAROUND.md: -------------------------------------------------------------------------------- 1 | Workaround based on [this comment](https://github.com/vuejs/vuepress/issues/1802#issuecomment-533890727) 2 | Implementation contained in this `.vuepress/theme` directory [details](https://github.com/rundeck/docs/commit/1e0f1cd066ee4dc1007c34a41b86929443f00fba) 3 | 4 | To remove this workaround, simply remove `docs/.vuepress/theme` directory 5 | -------------------------------------------------------------------------------- /docs/about/basic-statechart.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statelyai/xstate/f9d04bbfb0d043da0451562531437f51ca8c8b07/docs/about/basic-statechart.png -------------------------------------------------------------------------------- /docs/about/deep-history-state-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statelyai/xstate/f9d04bbfb0d043da0451562531437f51ca8c8b07/docs/about/deep-history-state-icon.png -------------------------------------------------------------------------------- /docs/about/final-state-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statelyai/xstate/f9d04bbfb0d043da0451562531437f51ca8c8b07/docs/about/final-state-icon.png -------------------------------------------------------------------------------- /docs/about/history-state-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statelyai/xstate/f9d04bbfb0d043da0451562531437f51ca8c8b07/docs/about/history-state-icon.png -------------------------------------------------------------------------------- /docs/about/initial-state-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statelyai/xstate/f9d04bbfb0d043da0451562531437f51ca8c8b07/docs/about/initial-state-icon.png -------------------------------------------------------------------------------- /docs/about/initial-state.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statelyai/xstate/f9d04bbfb0d043da0451562531437f51ca8c8b07/docs/about/initial-state.png -------------------------------------------------------------------------------- /docs/about/statechart-with-parallel-state.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statelyai/xstate/f9d04bbfb0d043da0451562531437f51ca8c8b07/docs/about/statechart-with-parallel-state.png -------------------------------------------------------------------------------- /docs/about/statechart-with-parent-and-child-states.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statelyai/xstate/f9d04bbfb0d043da0451562531437f51ca8c8b07/docs/about/statechart-with-parent-and-child-states.png -------------------------------------------------------------------------------- /docs/fr/guides/internal.md: -------------------------------------------------------------------------------- 1 | # Internal Transitions 2 | 3 | See [the **Internal Transtions** docs](./transitions.md#internal-transitions). 4 | -------------------------------------------------------------------------------- /docs/fr/packages/xstate-dev/index.md: -------------------------------------------------------------------------------- 1 | # @xstate/devtools 2 | 3 | Developer tools for XState. 4 | 5 | ## Quick Start 6 | 7 | - Run `npm install` 8 | - Run `npm start` to build the `/panel` in development mode 9 | - Go to [`chrome://extensions`](chrome://extensions) and **Load unpacked** this directory (`/packages/xstate-dev`) 10 | - Select the `XState` extension in the dev tools 11 | -------------------------------------------------------------------------------- /docs/fr/recipes/deno.md: -------------------------------------------------------------------------------- 1 | # Usage with Deno 2 | 3 | [Deno](https://deno.land/) is an alternate TypeScript/JavaScript runtime, similar to NodeJS, but has built-in TypeScript support and is not intantly compatable with most npm packages. 4 | 5 | So to run XState on Deno, you need to import it differently, via [Skypack](https://www.skypack.dev/). Packages are 'installed' at runtime; no more `/node_modules`! 6 | 7 | ```js 8 | import { createMachine } from 'https://cdn.skypack.dev/xstate'; 9 | ``` 10 | 11 | You can see it [in action here](https://www.mycompiler.io/view/B8EgR64). 12 | -------------------------------------------------------------------------------- /docs/fr/recipes/rxjs.md: -------------------------------------------------------------------------------- 1 | # Usage with RxJS 2 | 3 | The [interpreted machine](../guides/interpretation.md) (i.e., `service`) is subscribable. 4 | 5 | ```js 6 | import { createMachine, interpret } from 'xstate'; 7 | import { from } from 'rxjs'; 8 | 9 | const machine = createMachine(/* ... */); 10 | const service = interpret(machine).start(); 11 | 12 | const state$ = from(service); 13 | 14 | state$.subscribe((state) => { 15 | // ... 16 | }); 17 | ``` 18 | -------------------------------------------------------------------------------- /docs/fr/sandboxes/todomvc/.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | indent_style = tab 5 | end_of_line = lf 6 | charset = utf-8 7 | trim_trailing_whitespace = true 8 | insert_final_newline = true 9 | 10 | [package.json] 11 | indent_style = space 12 | indent_size = 2 13 | 14 | [*.md] 15 | trim_trailing_whitespace = false 16 | -------------------------------------------------------------------------------- /docs/fr/sandboxes/todomvc/.gitattributes: -------------------------------------------------------------------------------- 1 | * text=auto 2 | -------------------------------------------------------------------------------- /docs/fr/sandboxes/todomvc/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | -------------------------------------------------------------------------------- /docs/fr/sandboxes/todomvc/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import 'todomvc-app-css/index.css'; 4 | 5 | import { Todos } from './Todos'; 6 | 7 | ReactDOM.render(, document.querySelector('#app')); 8 | -------------------------------------------------------------------------------- /docs/fr/sandboxes/todomvc/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "index.js", 3 | "private": true, 4 | "dependencies": { 5 | "@xstate/react": "^0.1.0", 6 | "classnames": "latest", 7 | "react": "next", 8 | "react-dom": "next", 9 | "todomvc-app-css": "^2.0.0", 10 | "todomvc-common": "^1.0.0", 11 | "uuid-v4": "0.1.0", 12 | "xstate": "latest" 13 | }, 14 | "keywords": [ 15 | "hooks", 16 | "statechart", 17 | "state machine", 18 | "xstate", 19 | "react" 20 | ], 21 | "name": "xstate-todomvc-fr", 22 | "description": "The TodoMVC app implemented with React (using hooks) and XState version 4." 23 | } 24 | -------------------------------------------------------------------------------- /docs/fr/sandboxes/todomvc/useHashChange.js: -------------------------------------------------------------------------------- 1 | import { useEffect } from 'react'; 2 | 3 | export function useHashChange(onHashChange) { 4 | useEffect(() => { 5 | window.addEventListener('hashchange', onHashChange); 6 | 7 | return () => window.removeEventListener('hashchange', onHashChange); 8 | }, []); 9 | } 10 | -------------------------------------------------------------------------------- /docs/fr/updates/README.md: -------------------------------------------------------------------------------- 1 | --- 2 | updatesIndex: true 3 | --- 4 | 5 | # Updates 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /docs/fr/visualizer/command-palette.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statelyai/xstate/f9d04bbfb0d043da0451562531437f51ca8c8b07/docs/fr/visualizer/command-palette.png -------------------------------------------------------------------------------- /docs/fr/visualizer/fit-to-view.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statelyai/xstate/f9d04bbfb0d043da0451562531437f51ca8c8b07/docs/fr/visualizer/fit-to-view.png -------------------------------------------------------------------------------- /docs/fr/visualizer/guard-error.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statelyai/xstate/f9d04bbfb0d043da0451562531437f51ca8c8b07/docs/fr/visualizer/guard-error.png -------------------------------------------------------------------------------- /docs/fr/visualizer/hand.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statelyai/xstate/f9d04bbfb0d043da0451562531437f51ca8c8b07/docs/fr/visualizer/hand.png -------------------------------------------------------------------------------- /docs/fr/visualizer/keyboard-shortcuts.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statelyai/xstate/f9d04bbfb0d043da0451562531437f51ca8c8b07/docs/fr/visualizer/keyboard-shortcuts.png -------------------------------------------------------------------------------- /docs/fr/visualizer/reset-canvas.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statelyai/xstate/f9d04bbfb0d043da0451562531437f51ca8c8b07/docs/fr/visualizer/reset-canvas.png -------------------------------------------------------------------------------- /docs/fr/visualizer/reset.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statelyai/xstate/f9d04bbfb0d043da0451562531437f51ca8c8b07/docs/fr/visualizer/reset.png -------------------------------------------------------------------------------- /docs/fr/visualizer/share-menu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statelyai/xstate/f9d04bbfb0d043da0451562531437f51ca8c8b07/docs/fr/visualizer/share-menu.png -------------------------------------------------------------------------------- /docs/fr/visualizer/syntax-error.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statelyai/xstate/f9d04bbfb0d043da0451562531437f51ca8c8b07/docs/fr/visualizer/syntax-error.png -------------------------------------------------------------------------------- /docs/fr/visualizer/theme-all-hallows-eve.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statelyai/xstate/f9d04bbfb0d043da0451562531437f51ca8c8b07/docs/fr/visualizer/theme-all-hallows-eve.png -------------------------------------------------------------------------------- /docs/fr/visualizer/theme-amy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statelyai/xstate/f9d04bbfb0d043da0451562531437f51ca8c8b07/docs/fr/visualizer/theme-amy.png -------------------------------------------------------------------------------- /docs/fr/visualizer/theme-atom-one-dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statelyai/xstate/f9d04bbfb0d043da0451562531437f51ca8c8b07/docs/fr/visualizer/theme-atom-one-dark.png -------------------------------------------------------------------------------- /docs/fr/visualizer/theme-blackboard.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statelyai/xstate/f9d04bbfb0d043da0451562531437f51ca8c8b07/docs/fr/visualizer/theme-blackboard.png -------------------------------------------------------------------------------- /docs/fr/visualizer/theme-cobalt.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statelyai/xstate/f9d04bbfb0d043da0451562531437f51ca8c8b07/docs/fr/visualizer/theme-cobalt.png -------------------------------------------------------------------------------- /docs/fr/visualizer/theme-garden-of-atlantis.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statelyai/xstate/f9d04bbfb0d043da0451562531437f51ca8c8b07/docs/fr/visualizer/theme-garden-of-atlantis.png -------------------------------------------------------------------------------- /docs/fr/visualizer/theme-martian-night.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statelyai/xstate/f9d04bbfb0d043da0451562531437f51ca8c8b07/docs/fr/visualizer/theme-martian-night.png -------------------------------------------------------------------------------- /docs/fr/visualizer/theme-merbivore-soft.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statelyai/xstate/f9d04bbfb0d043da0451562531437f51ca8c8b07/docs/fr/visualizer/theme-merbivore-soft.png -------------------------------------------------------------------------------- /docs/fr/visualizer/theme-monokai.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statelyai/xstate/f9d04bbfb0d043da0451562531437f51ca8c8b07/docs/fr/visualizer/theme-monokai.png -------------------------------------------------------------------------------- /docs/fr/visualizer/theme-night-owl.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statelyai/xstate/f9d04bbfb0d043da0451562531437f51ca8c8b07/docs/fr/visualizer/theme-night-owl.png -------------------------------------------------------------------------------- /docs/fr/visualizer/theme-poimandres.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statelyai/xstate/f9d04bbfb0d043da0451562531437f51ca8c8b07/docs/fr/visualizer/theme-poimandres.png -------------------------------------------------------------------------------- /docs/fr/visualizer/theme-tomorrow-night.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statelyai/xstate/f9d04bbfb0d043da0451562531437f51ca8c8b07/docs/fr/visualizer/theme-tomorrow-night.png -------------------------------------------------------------------------------- /docs/fr/visualizer/theme-xstate-viz.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statelyai/xstate/f9d04bbfb0d043da0451562531437f51ca8c8b07/docs/fr/visualizer/theme-xstate-viz.png -------------------------------------------------------------------------------- /docs/fr/visualizer/transition-error.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statelyai/xstate/f9d04bbfb0d043da0451562531437f51ca8c8b07/docs/fr/visualizer/transition-error.png -------------------------------------------------------------------------------- /docs/fr/visualizer/tweet.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statelyai/xstate/f9d04bbfb0d043da0451562531437f51ca8c8b07/docs/fr/visualizer/tweet.png -------------------------------------------------------------------------------- /docs/fr/visualizer/view-controls.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statelyai/xstate/f9d04bbfb0d043da0451562531437f51ca8c8b07/docs/fr/visualizer/view-controls.png -------------------------------------------------------------------------------- /docs/fr/visualizer/zoom-in.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statelyai/xstate/f9d04bbfb0d043da0451562531437f51ca8c8b07/docs/fr/visualizer/zoom-in.png -------------------------------------------------------------------------------- /docs/fr/visualizer/zoom-out.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statelyai/xstate/f9d04bbfb0d043da0451562531437f51ca8c8b07/docs/fr/visualizer/zoom-out.png -------------------------------------------------------------------------------- /docs/guides/internal.md: -------------------------------------------------------------------------------- 1 | # Internal Transitions 2 | 3 | See [the **Internal Transitions** docs](./transitions.md#internal-transitions). 4 | -------------------------------------------------------------------------------- /docs/packages/xstate-dev/index.md: -------------------------------------------------------------------------------- 1 | # @xstate/devtools 2 | 3 | :::warning These XState v4 docs are no longer maintained 4 | 5 | XState v5 is out now! [Read more about XState v5](https://stately.ai/blog/2023-12-01-xstate-v5) and [check out the XState v5 docs](https://stately.ai/docs/xstate). 6 | 7 | ::: 8 | 9 | Developer tools for XState. 10 | 11 | ## Quick Start 12 | 13 | - Run `npm install` 14 | - Run `npm start` to build the `/panel` in development mode 15 | - Go to [`chrome://extensions`](chrome://extensions) and **Load unpacked** this directory (`/packages/xstate-dev`) 16 | - Select the `XState` extension in the dev tools 17 | -------------------------------------------------------------------------------- /docs/roadmap/README.md: -------------------------------------------------------------------------------- 1 | --- 2 | reviewed: 2022-07-05 3 | styleGuideVersion: 0 4 | --- 5 | 6 | # Roadmap 7 | 8 | :::warning These XState v4 docs are no longer maintained 9 | 10 | XState v5 is out now! [Read more about XState v5](https://stately.ai/blog/2023-12-01-xstate-v5) and [check out the XState v5 docs](https://stately.ai/docs/xstate). 11 | 12 | ::: 13 | 14 | Find [our live roadmap](https://feedback.stately.ai). 15 | -------------------------------------------------------------------------------- /docs/sandboxes/todomvc/.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | indent_style = tab 5 | end_of_line = lf 6 | charset = utf-8 7 | trim_trailing_whitespace = true 8 | insert_final_newline = true 9 | 10 | [package.json] 11 | indent_style = space 12 | indent_size = 2 13 | 14 | [*.md] 15 | trim_trailing_whitespace = false 16 | -------------------------------------------------------------------------------- /docs/sandboxes/todomvc/.gitattributes: -------------------------------------------------------------------------------- 1 | * text=auto 2 | -------------------------------------------------------------------------------- /docs/sandboxes/todomvc/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | -------------------------------------------------------------------------------- /docs/sandboxes/todomvc/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import 'todomvc-app-css/index.css'; 4 | 5 | import { Todos } from './Todos'; 6 | 7 | ReactDOM.render(, document.querySelector('#app')); 8 | -------------------------------------------------------------------------------- /docs/sandboxes/todomvc/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "index.js", 3 | "private": true, 4 | "dependencies": { 5 | "@xstate/react": "^0.1.0", 6 | "classnames": "latest", 7 | "react": "next", 8 | "react-dom": "next", 9 | "todomvc-app-css": "^2.0.0", 10 | "todomvc-common": "^1.0.0", 11 | "uuid-v4": "0.1.0", 12 | "xstate": "latest" 13 | }, 14 | "keywords": [ 15 | "hooks", 16 | "statechart", 17 | "state machine", 18 | "xstate", 19 | "react" 20 | ], 21 | "name": "xstate-todomvc", 22 | "description": "The TodoMVC app implemented with React (using hooks) and XState version 4." 23 | } 24 | -------------------------------------------------------------------------------- /docs/sandboxes/todomvc/useHashChange.js: -------------------------------------------------------------------------------- 1 | import { useEffect } from 'react'; 2 | 3 | export function useHashChange(onHashChange) { 4 | useEffect(() => { 5 | window.addEventListener('hashchange', onHashChange); 6 | 7 | return () => window.removeEventListener('hashchange', onHashChange); 8 | }, []); 9 | } 10 | -------------------------------------------------------------------------------- /docs/updates/2023-01-26.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 'New Stately docs!' 3 | date: 2023-01-26 4 | description: 'Our new Stately Studio and XState docs are now available at stately.ai/docs.' 5 | styleGuideVersion: 0 6 | updateType: docs 7 | --- 8 | 9 |

{{ $frontmatter.title }}

10 |

{{ new Date($frontmatter.date).toLocaleString('en-US',{ month:'long', day:'numeric', year:'numeric' }) }}

11 | 12 | We will keep these docs alive so we don’t break any of your existing bookmarks to your favorite reference pages. But further documentation will be added to [the Stately docs](https://stately.ai/docs?source=xstate-docs). 13 | -------------------------------------------------------------------------------- /docs/updates/README.md: -------------------------------------------------------------------------------- 1 | --- 2 | updatesIndex: true 3 | --- 4 | 5 | # Updates 6 | 7 | :::warning These XState v4 docs are no longer maintained 8 | 9 | XState v5 is out now! [Read more about XState v5](https://stately.ai/blog/2023-12-01-xstate-v5) and [check out the XState v5 docs](https://stately.ai/docs/xstate). 10 | 11 | ::: 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /docs/visualizer/command-palette.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statelyai/xstate/f9d04bbfb0d043da0451562531437f51ca8c8b07/docs/visualizer/command-palette.png -------------------------------------------------------------------------------- /docs/visualizer/fit-to-view.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statelyai/xstate/f9d04bbfb0d043da0451562531437f51ca8c8b07/docs/visualizer/fit-to-view.png -------------------------------------------------------------------------------- /docs/visualizer/guard-error.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statelyai/xstate/f9d04bbfb0d043da0451562531437f51ca8c8b07/docs/visualizer/guard-error.png -------------------------------------------------------------------------------- /docs/visualizer/hand.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statelyai/xstate/f9d04bbfb0d043da0451562531437f51ca8c8b07/docs/visualizer/hand.png -------------------------------------------------------------------------------- /docs/visualizer/keyboard-shortcuts.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statelyai/xstate/f9d04bbfb0d043da0451562531437f51ca8c8b07/docs/visualizer/keyboard-shortcuts.png -------------------------------------------------------------------------------- /docs/visualizer/reset-canvas.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statelyai/xstate/f9d04bbfb0d043da0451562531437f51ca8c8b07/docs/visualizer/reset-canvas.png -------------------------------------------------------------------------------- /docs/visualizer/reset.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statelyai/xstate/f9d04bbfb0d043da0451562531437f51ca8c8b07/docs/visualizer/reset.png -------------------------------------------------------------------------------- /docs/visualizer/share-menu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statelyai/xstate/f9d04bbfb0d043da0451562531437f51ca8c8b07/docs/visualizer/share-menu.png -------------------------------------------------------------------------------- /docs/visualizer/syntax-error.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statelyai/xstate/f9d04bbfb0d043da0451562531437f51ca8c8b07/docs/visualizer/syntax-error.png -------------------------------------------------------------------------------- /docs/visualizer/theme-all-hallows-eve.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statelyai/xstate/f9d04bbfb0d043da0451562531437f51ca8c8b07/docs/visualizer/theme-all-hallows-eve.png -------------------------------------------------------------------------------- /docs/visualizer/theme-amy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statelyai/xstate/f9d04bbfb0d043da0451562531437f51ca8c8b07/docs/visualizer/theme-amy.png -------------------------------------------------------------------------------- /docs/visualizer/theme-atom-one-dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statelyai/xstate/f9d04bbfb0d043da0451562531437f51ca8c8b07/docs/visualizer/theme-atom-one-dark.png -------------------------------------------------------------------------------- /docs/visualizer/theme-blackboard.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statelyai/xstate/f9d04bbfb0d043da0451562531437f51ca8c8b07/docs/visualizer/theme-blackboard.png -------------------------------------------------------------------------------- /docs/visualizer/theme-cobalt.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statelyai/xstate/f9d04bbfb0d043da0451562531437f51ca8c8b07/docs/visualizer/theme-cobalt.png -------------------------------------------------------------------------------- /docs/visualizer/theme-garden-of-atlantis.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statelyai/xstate/f9d04bbfb0d043da0451562531437f51ca8c8b07/docs/visualizer/theme-garden-of-atlantis.png -------------------------------------------------------------------------------- /docs/visualizer/theme-martian-night.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statelyai/xstate/f9d04bbfb0d043da0451562531437f51ca8c8b07/docs/visualizer/theme-martian-night.png -------------------------------------------------------------------------------- /docs/visualizer/theme-merbivore-soft.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statelyai/xstate/f9d04bbfb0d043da0451562531437f51ca8c8b07/docs/visualizer/theme-merbivore-soft.png -------------------------------------------------------------------------------- /docs/visualizer/theme-monokai.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statelyai/xstate/f9d04bbfb0d043da0451562531437f51ca8c8b07/docs/visualizer/theme-monokai.png -------------------------------------------------------------------------------- /docs/visualizer/theme-night-owl.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statelyai/xstate/f9d04bbfb0d043da0451562531437f51ca8c8b07/docs/visualizer/theme-night-owl.png -------------------------------------------------------------------------------- /docs/visualizer/theme-poimandres.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statelyai/xstate/f9d04bbfb0d043da0451562531437f51ca8c8b07/docs/visualizer/theme-poimandres.png -------------------------------------------------------------------------------- /docs/visualizer/theme-tomorrow-night.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statelyai/xstate/f9d04bbfb0d043da0451562531437f51ca8c8b07/docs/visualizer/theme-tomorrow-night.png -------------------------------------------------------------------------------- /docs/visualizer/theme-xstate-viz.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statelyai/xstate/f9d04bbfb0d043da0451562531437f51ca8c8b07/docs/visualizer/theme-xstate-viz.png -------------------------------------------------------------------------------- /docs/visualizer/transition-error.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statelyai/xstate/f9d04bbfb0d043da0451562531437f51ca8c8b07/docs/visualizer/transition-error.png -------------------------------------------------------------------------------- /docs/visualizer/tweet.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statelyai/xstate/f9d04bbfb0d043da0451562531437f51ca8c8b07/docs/visualizer/tweet.png -------------------------------------------------------------------------------- /docs/visualizer/view-controls.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statelyai/xstate/f9d04bbfb0d043da0451562531437f51ca8c8b07/docs/visualizer/view-controls.png -------------------------------------------------------------------------------- /docs/visualizer/zoom-in.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statelyai/xstate/f9d04bbfb0d043da0451562531437f51ca8c8b07/docs/visualizer/zoom-in.png -------------------------------------------------------------------------------- /docs/visualizer/zoom-out.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statelyai/xstate/f9d04bbfb0d043da0451562531437f51ca8c8b07/docs/visualizer/zoom-out.png -------------------------------------------------------------------------------- /docs/zh/guides/internal.md: -------------------------------------------------------------------------------- 1 | # 内部 Transitions 2 | 3 | See [the **Internal Transitions** docs](./transitions.md#internal-transitions). 4 | -------------------------------------------------------------------------------- /docs/zh/packages/xstate-dev/index.md: -------------------------------------------------------------------------------- 1 | # @xstate/devtools 2 | 3 | Developer tools for XState. 4 | 5 | ## Quick Start 6 | 7 | - Run `npm install` 8 | - Run `npm start` to build the `/panel` in development mode 9 | - Go to [`chrome://extensions`](chrome://extensions) and **Load unpacked** this directory (`/packages/xstate-dev`) 10 | - Select the `XState` extension in the dev tools 11 | -------------------------------------------------------------------------------- /docs/zh/recipes/deno.md: -------------------------------------------------------------------------------- 1 | # 与 Deno 一起使用 2 | 3 | [Deno](https://deno.land/) is an alternate TypeScript/JavaScript runtime, similar to NodeJS, but has built-in TypeScript support and is not intantly compatible with most npm packages. 4 | 5 | So to run XState on Deno, you need to import it differently, via [Skypack](https://www.skypack.dev/). Packages are 'installed' at runtime; no more `/node_modules`! 6 | 7 | ```js 8 | import { createMachine } from 'https://cdn.skypack.dev/xstate'; 9 | ``` 10 | 11 | You can see it [in action here](https://www.mycompiler.io/view/B8EgR64). 12 | -------------------------------------------------------------------------------- /docs/zh/recipes/rxjs.md: -------------------------------------------------------------------------------- 1 | # 与 RxJS 一起使用 2 | 3 | The [interpreted machine](../guides/interpretation.md) (i.e., `service`) is subscribable. 4 | 5 | ```js 6 | import { createMachine, interpret } from 'xstate'; 7 | import { from } from 'rxjs'; 8 | 9 | const machine = createMachine(/* ... */); 10 | const service = interpret(machine).start(); 11 | 12 | const state$ = from(service); 13 | 14 | state$.subscribe((state) => { 15 | // ... 16 | }); 17 | ``` 18 | -------------------------------------------------------------------------------- /docs/zh/sandboxes/todomvc/.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | indent_style = tab 5 | end_of_line = lf 6 | charset = utf-8 7 | trim_trailing_whitespace = true 8 | insert_final_newline = true 9 | 10 | [package.json] 11 | indent_style = space 12 | indent_size = 2 13 | 14 | [*.md] 15 | trim_trailing_whitespace = false 16 | -------------------------------------------------------------------------------- /docs/zh/sandboxes/todomvc/.gitattributes: -------------------------------------------------------------------------------- 1 | * text=auto 2 | -------------------------------------------------------------------------------- /docs/zh/sandboxes/todomvc/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | -------------------------------------------------------------------------------- /docs/zh/sandboxes/todomvc/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import 'todomvc-app-css/index.css'; 4 | 5 | import { Todos } from './Todos'; 6 | 7 | ReactDOM.render(, document.querySelector('#app')); 8 | -------------------------------------------------------------------------------- /docs/zh/sandboxes/todomvc/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "index.js", 3 | "private": true, 4 | "dependencies": { 5 | "@xstate/react": "^0.1.0", 6 | "classnames": "latest", 7 | "react": "next", 8 | "react-dom": "next", 9 | "todomvc-app-css": "^2.0.0", 10 | "todomvc-common": "^1.0.0", 11 | "uuid-v4": "0.1.0", 12 | "xstate": "latest" 13 | }, 14 | "keywords": [ 15 | "hooks", 16 | "statechart", 17 | "state machine", 18 | "xstate", 19 | "react" 20 | ], 21 | "name": "xstate-todomvc-zh", 22 | "description": "The TodoMVC app implemented with React (using hooks) and XState version 4." 23 | } 24 | -------------------------------------------------------------------------------- /docs/zh/sandboxes/todomvc/useHashChange.js: -------------------------------------------------------------------------------- 1 | import { useEffect } from 'react'; 2 | 3 | export function useHashChange(onHashChange) { 4 | useEffect(() => { 5 | window.addEventListener('hashchange', onHashChange); 6 | 7 | return () => window.removeEventListener('hashchange', onHashChange); 8 | }, []); 9 | } 10 | -------------------------------------------------------------------------------- /docs/zh/updates/2021-10-14.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: '新的更新部分！' 3 | date: 2021-10-18 4 | description: '欢迎来到文档的新更新部分。' 5 | reviewed: 2021-10-18 6 | styleGuideVersion: 0 7 | updateType: docs 8 | --- 9 | 10 |

{{ $frontmatter.title }}

11 |

{{ new Date($frontmatter.date).toLocaleString('en-US',{ month:'long', day:'numeric', year:'numeric' }) }}

12 | 13 | 欢迎来到文档的新更新部分！ 我们希望让你能够轻松地跟上我们文档中的变化，尤其是在我们在接下来的几个月中进行改进时。 我们还将添加更多文档来帮助你开始使用 XState。 14 | 15 | 每次更新，我们都会让你知道发生了哪些变化、新增了哪些内容以及是否删除了任何内容。 16 | -------------------------------------------------------------------------------- /docs/zh/updates/2021-10-15.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: '添加 Visualizer 介绍' 3 | date: 2021-10-19 4 | description: '想知道 Visualizer 是什么以及它是如何工作的？ 现在你可以在奉献部分阅读它：什么是 XState？' 5 | reviewed: 2021-10-19 6 | styleGuideVersion: 0 7 | updateType: docs 8 | --- 9 | 10 |

{{ $frontmatter.title }}

11 |

{{ new Date($frontmatter.date).toLocaleString('en-US',{ month:'long', day:'numeric', year:'numeric' }) }}

12 | 13 | 想知道 Visualizer 是什么以及它是如何工作的？ 现在你可以在奉献部分阅读它： [What is XState?](./docs/visualizer)？ 14 | 15 | 我们将更新介绍性文档，并在未来添加对更多 Stately 产品的介绍。 16 | 17 | 如果你对 Visualizer 介绍有任何反馈，或应添加到文档中的任何其他内容，请在 [Stately Discord](https://discord.gg/xstate) 中告诉我们。 18 | -------------------------------------------------------------------------------- /docs/zh/updates/README.md: -------------------------------------------------------------------------------- 1 | --- 2 | updatesIndex: true 3 | --- 4 | 5 | # 更新 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /docs/zh/visualizer/command-palette.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statelyai/xstate/f9d04bbfb0d043da0451562531437f51ca8c8b07/docs/zh/visualizer/command-palette.png -------------------------------------------------------------------------------- /docs/zh/visualizer/fit-to-view.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statelyai/xstate/f9d04bbfb0d043da0451562531437f51ca8c8b07/docs/zh/visualizer/fit-to-view.png -------------------------------------------------------------------------------- /docs/zh/visualizer/guard-error.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statelyai/xstate/f9d04bbfb0d043da0451562531437f51ca8c8b07/docs/zh/visualizer/guard-error.png -------------------------------------------------------------------------------- /docs/zh/visualizer/hand.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statelyai/xstate/f9d04bbfb0d043da0451562531437f51ca8c8b07/docs/zh/visualizer/hand.png -------------------------------------------------------------------------------- /docs/zh/visualizer/keyboard-shortcuts.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statelyai/xstate/f9d04bbfb0d043da0451562531437f51ca8c8b07/docs/zh/visualizer/keyboard-shortcuts.png -------------------------------------------------------------------------------- /docs/zh/visualizer/reset-canvas.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statelyai/xstate/f9d04bbfb0d043da0451562531437f51ca8c8b07/docs/zh/visualizer/reset-canvas.png -------------------------------------------------------------------------------- /docs/zh/visualizer/reset.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statelyai/xstate/f9d04bbfb0d043da0451562531437f51ca8c8b07/docs/zh/visualizer/reset.png -------------------------------------------------------------------------------- /docs/zh/visualizer/share-menu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statelyai/xstate/f9d04bbfb0d043da0451562531437f51ca8c8b07/docs/zh/visualizer/share-menu.png -------------------------------------------------------------------------------- /docs/zh/visualizer/syntax-error.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statelyai/xstate/f9d04bbfb0d043da0451562531437f51ca8c8b07/docs/zh/visualizer/syntax-error.png -------------------------------------------------------------------------------- /docs/zh/visualizer/theme-all-hallows-eve.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statelyai/xstate/f9d04bbfb0d043da0451562531437f51ca8c8b07/docs/zh/visualizer/theme-all-hallows-eve.png -------------------------------------------------------------------------------- /docs/zh/visualizer/theme-amy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statelyai/xstate/f9d04bbfb0d043da0451562531437f51ca8c8b07/docs/zh/visualizer/theme-amy.png -------------------------------------------------------------------------------- /docs/zh/visualizer/theme-atom-one-dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statelyai/xstate/f9d04bbfb0d043da0451562531437f51ca8c8b07/docs/zh/visualizer/theme-atom-one-dark.png -------------------------------------------------------------------------------- /docs/zh/visualizer/theme-blackboard.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statelyai/xstate/f9d04bbfb0d043da0451562531437f51ca8c8b07/docs/zh/visualizer/theme-blackboard.png -------------------------------------------------------------------------------- /docs/zh/visualizer/theme-cobalt.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statelyai/xstate/f9d04bbfb0d043da0451562531437f51ca8c8b07/docs/zh/visualizer/theme-cobalt.png -------------------------------------------------------------------------------- /docs/zh/visualizer/theme-garden-of-atlantis.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statelyai/xstate/f9d04bbfb0d043da0451562531437f51ca8c8b07/docs/zh/visualizer/theme-garden-of-atlantis.png -------------------------------------------------------------------------------- /docs/zh/visualizer/theme-martian-night.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statelyai/xstate/f9d04bbfb0d043da0451562531437f51ca8c8b07/docs/zh/visualizer/theme-martian-night.png -------------------------------------------------------------------------------- /docs/zh/visualizer/theme-merbivore-soft.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statelyai/xstate/f9d04bbfb0d043da0451562531437f51ca8c8b07/docs/zh/visualizer/theme-merbivore-soft.png -------------------------------------------------------------------------------- /docs/zh/visualizer/theme-monokai.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statelyai/xstate/f9d04bbfb0d043da0451562531437f51ca8c8b07/docs/zh/visualizer/theme-monokai.png -------------------------------------------------------------------------------- /docs/zh/visualizer/theme-night-owl.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statelyai/xstate/f9d04bbfb0d043da0451562531437f51ca8c8b07/docs/zh/visualizer/theme-night-owl.png -------------------------------------------------------------------------------- /docs/zh/visualizer/theme-poimandres.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statelyai/xstate/f9d04bbfb0d043da0451562531437f51ca8c8b07/docs/zh/visualizer/theme-poimandres.png -------------------------------------------------------------------------------- /docs/zh/visualizer/theme-tomorrow-night.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statelyai/xstate/f9d04bbfb0d043da0451562531437f51ca8c8b07/docs/zh/visualizer/theme-tomorrow-night.png -------------------------------------------------------------------------------- /docs/zh/visualizer/theme-xstate-viz.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statelyai/xstate/f9d04bbfb0d043da0451562531437f51ca8c8b07/docs/zh/visualizer/theme-xstate-viz.png -------------------------------------------------------------------------------- /docs/zh/visualizer/transition-error.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statelyai/xstate/f9d04bbfb0d043da0451562531437f51ca8c8b07/docs/zh/visualizer/transition-error.png -------------------------------------------------------------------------------- /docs/zh/visualizer/tweet.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statelyai/xstate/f9d04bbfb0d043da0451562531437f51ca8c8b07/docs/zh/visualizer/tweet.png -------------------------------------------------------------------------------- /docs/zh/visualizer/view-controls.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statelyai/xstate/f9d04bbfb0d043da0451562531437f51ca8c8b07/docs/zh/visualizer/view-controls.png -------------------------------------------------------------------------------- /docs/zh/visualizer/zoom-in.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statelyai/xstate/f9d04bbfb0d043da0451562531437f51ca8c8b07/docs/zh/visualizer/zoom-in.png -------------------------------------------------------------------------------- /docs/zh/visualizer/zoom-out.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statelyai/xstate/f9d04bbfb0d043da0451562531437f51ca8c8b07/docs/zh/visualizer/zoom-out.png -------------------------------------------------------------------------------- /examples/7guis-1-counter-vue/.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 | -------------------------------------------------------------------------------- /examples/7guis-1-counter-vue/.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"] 3 | } 4 | -------------------------------------------------------------------------------- /examples/7guis-1-counter-vue/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Xstate + Vue: 7 GUIs -- 1. Counter 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /examples/7guis-1-counter-vue/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@xstate/example-7guis-1-counter-vue", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vue-tsc && vite build", 9 | "preview": "vite preview" 10 | }, 11 | "dependencies": { 12 | "@xstate/vue": "^3.1.4", 13 | "vue": "^3.5.16", 14 | "xstate": "^5.19.4" 15 | }, 16 | "devDependencies": { 17 | "@vitejs/plugin-vue": "^4.6.2", 18 | "typescript": "^5.8.3", 19 | "vite": "^5.4.19", 20 | "vue-tsc": "^1.8.27" 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /examples/7guis-1-counter-vue/src/App.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 8 | -------------------------------------------------------------------------------- /examples/7guis-1-counter-vue/src/Counter.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 14 | -------------------------------------------------------------------------------- /examples/7guis-1-counter-vue/src/counterMachine.ts: -------------------------------------------------------------------------------- 1 | import { setup, assign } from 'xstate'; 2 | 3 | export const counterMachine = setup({ 4 | types: { 5 | context: {} as { count: number }, 6 | events: {} as { type: 'increase' } 7 | } 8 | }).createMachine({ 9 | context: { 10 | count: 0 11 | }, 12 | id: 'Counter', 13 | initial: 'ready', 14 | states: { 15 | ready: { 16 | on: { 17 | increase: { 18 | target: 'ready', 19 | actions: assign({ 20 | count: ({ context }) => context.count + 1 21 | }) 22 | } 23 | } 24 | } 25 | } 26 | }); 27 | -------------------------------------------------------------------------------- /examples/7guis-1-counter-vue/src/main.ts: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue'; 2 | import './style.css'; 3 | import App from './App.vue'; 4 | 5 | createApp(App).mount('#app'); 6 | -------------------------------------------------------------------------------- /examples/7guis-1-counter-vue/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /examples/7guis-1-counter-vue/src/vue-shim.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.vue' { 2 | import { ComponentOptions } from 'vue'; 3 | const component: ComponentOptions; 4 | export default component; 5 | } 6 | -------------------------------------------------------------------------------- /examples/7guis-1-counter-vue/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 | -------------------------------------------------------------------------------- /examples/7guis-1-counter-vue/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite'; 2 | import vue from '@vitejs/plugin-vue'; 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [vue()] 7 | }); 8 | -------------------------------------------------------------------------------- /examples/7guis-2-temperature-vue/.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 | -------------------------------------------------------------------------------- /examples/7guis-2-temperature-vue/.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"] 3 | } 4 | -------------------------------------------------------------------------------- /examples/7guis-2-temperature-vue/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 7GUIs - 2. Temperature Converter 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /examples/7guis-2-temperature-vue/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@xstate/example-7guis-2-temperature-vue", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vue-tsc && vite build", 9 | "preview": "vite preview" 10 | }, 11 | "dependencies": { 12 | "@xstate/vue": "^3.1.4", 13 | "vue": "^3.5.16", 14 | "xstate": "^5.19.4" 15 | }, 16 | "devDependencies": { 17 | "@vitejs/plugin-vue": "^4.6.2", 18 | "typescript": "^5.8.3", 19 | "vite": "^5.4.19", 20 | "vue-tsc": "^1.8.27" 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /examples/7guis-2-temperature-vue/src/App.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 8 | -------------------------------------------------------------------------------- /examples/7guis-2-temperature-vue/src/main.ts: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue'; 2 | import './style.css'; 3 | import App from './App.vue'; 4 | 5 | createApp(App).mount('#app'); 6 | -------------------------------------------------------------------------------- /examples/7guis-2-temperature-vue/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /examples/7guis-2-temperature-vue/src/vue-shim.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.vue' { 2 | import { ComponentOptions } from 'vue'; 3 | const component: ComponentOptions; 4 | export default component; 5 | } 6 | -------------------------------------------------------------------------------- /examples/7guis-2-temperature-vue/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 | -------------------------------------------------------------------------------- /examples/7guis-2-temperature-vue/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite'; 2 | import vue from '@vitejs/plugin-vue'; 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [vue()] 7 | }); 8 | -------------------------------------------------------------------------------- /examples/7guis-counter-react/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | dist 4 | dist-ssr 5 | *.local 6 | -------------------------------------------------------------------------------- /examples/7guis-counter-react/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | XState Example: 7GUIs Counter 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /examples/7guis-counter-react/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "0.0.0", 3 | "scripts": { 4 | "dev": "vite", 5 | "build": "tsc && vite build", 6 | "serve": "vite preview" 7 | }, 8 | "dependencies": { 9 | "@xstate/react": "^4.1.3", 10 | "react": "^17.0.2", 11 | "react-dom": "^17.0.2", 12 | "xstate": "^5.19.4" 13 | }, 14 | "devDependencies": { 15 | "@types/react": "^17.0.87", 16 | "@types/react-dom": "^17.0.26", 17 | "@vitejs/plugin-react-refresh": "^1.3.6", 18 | "typescript": "^5.8.3", 19 | "vite": "^5.4.19" 20 | }, 21 | "name": "@xstate/example-7guis-counter-react" 22 | } 23 | -------------------------------------------------------------------------------- /examples/7guis-counter-react/readme.md: -------------------------------------------------------------------------------- 1 | # 7GUIs Counter 2 | 3 | This is an implementation of [the 7GUIs counter](https://eugenkiss.github.io/7guis/tasks#counter) built with: 4 | 5 | - XState v5 6 | - React 7 | - TypeScript 8 | - Vite 9 | 10 | ## [Open in CodeSandbox](https://codesandbox.io/p/sandbox/github/statelyai/xstate/tree/main/examples/7guis-counter-react) 11 | 12 | [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/statelyai/xstate/tree/main/examples/7guis-counter-react) 13 | -------------------------------------------------------------------------------- /examples/7guis-counter-react/src/App.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './App.css'; 3 | import { useMachine } from '@xstate/react'; 4 | import { counterMachine } from './counterMachine'; 5 | 6 | function App() { 7 | const [state, send] = useMachine(counterMachine); 8 | 9 | return ( 10 |
11 | {state.context.count} 12 | 13 |
14 | ); 15 | } 16 | 17 | export default App; 18 | -------------------------------------------------------------------------------- /examples/7guis-counter-react/src/counterMachine.ts: -------------------------------------------------------------------------------- 1 | import { createMachine, assign } from 'xstate'; 2 | 3 | interface CounterContext { 4 | count: number; 5 | } 6 | 7 | type CounterEvent = { 8 | type: 'INCREMENT'; 9 | }; 10 | 11 | export const counterMachine = createMachine({ 12 | types: {} as { 13 | context: CounterContext; 14 | events: CounterEvent; 15 | }, 16 | id: 'counter', 17 | context: { count: 0 }, 18 | on: { 19 | INCREMENT: { 20 | actions: assign({ count: ({ context }) => context.count + 1 }) 21 | } 22 | } 23 | }); 24 | -------------------------------------------------------------------------------- /examples/7guis-counter-react/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /examples/7guis-counter-react/src/main.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | 6 | ReactDOM.render( 7 | 8 | 9 | , 10 | document.getElementById('root') 11 | ); 12 | -------------------------------------------------------------------------------- /examples/7guis-counter-react/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /examples/7guis-counter-react/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ESNext", 4 | "lib": ["DOM", "DOM.Iterable", "ESNext"], 5 | "allowJs": false, 6 | "skipLibCheck": false, 7 | "esModuleInterop": false, 8 | "allowSyntheticDefaultImports": true, 9 | "strict": true, 10 | "forceConsistentCasingInFileNames": true, 11 | "module": "ESNext", 12 | "moduleResolution": "Node", 13 | "resolveJsonModule": true, 14 | "isolatedModules": true, 15 | "noEmit": true, 16 | "jsx": "react" 17 | }, 18 | "include": ["./src"] 19 | } 20 | -------------------------------------------------------------------------------- /examples/7guis-counter-react/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite'; 2 | import reactRefresh from '@vitejs/plugin-react-refresh'; 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [reactRefresh()] 7 | }); 8 | -------------------------------------------------------------------------------- /examples/7guis-flight-booker-react/.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { browser: true, es2020: true }, 4 | extends: [ 5 | 'eslint:recommended', 6 | 'plugin:@typescript-eslint/recommended', 7 | 'plugin:react-hooks/recommended' 8 | ], 9 | ignorePatterns: ['dist', '.eslintrc.cjs'], 10 | parser: '@typescript-eslint/parser', 11 | plugins: ['react-refresh'], 12 | rules: { 13 | 'react-refresh/only-export-components': [ 14 | 'warn', 15 | { allowConstantExport: true } 16 | ] 17 | } 18 | }; 19 | -------------------------------------------------------------------------------- /examples/7guis-flight-booker-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 | -------------------------------------------------------------------------------- /examples/7guis-flight-booker-react/README.md: -------------------------------------------------------------------------------- 1 | # XState v5 + React - 7GUIs Flight Booker 2 | 3 | The 7GUIs Fligt Booker App built with: 4 | 5 | - React 18 6 | - XState 5 7 | - Typescript 8 | - Vite 9 | 10 | Visit the [7GUIs project](https://eugenkiss.github.io/7guis/tasks#flight/ 'Flight Booker') for more info. 11 | 12 | ## Screenshots 13 | 14 | ![App Screenshot](public/flight-booker.png) 15 | 16 | [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/statelyai/xstate/tree/main/examples/7guis-flight-booker-react) 17 | -------------------------------------------------------------------------------- /examples/7guis-flight-booker-react/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React + TS 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /examples/7guis-flight-booker-react/public/flight-booker.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statelyai/xstate/f9d04bbfb0d043da0451562531437f51ca8c8b07/examples/7guis-flight-booker-react/public/flight-booker.jpg -------------------------------------------------------------------------------- /examples/7guis-flight-booker-react/public/flight-booker.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statelyai/xstate/f9d04bbfb0d043da0451562531437f51ca8c8b07/examples/7guis-flight-booker-react/public/flight-booker.png -------------------------------------------------------------------------------- /examples/7guis-flight-booker-react/src/components/DateInput.tsx: -------------------------------------------------------------------------------- 1 | type Props = { 2 | isValidDate: boolean; 3 | } & Input; 4 | 5 | function DateInput({ isValidDate, ...props }: Props) { 6 | return ( 7 | 11 | ); 12 | } 13 | 14 | export default DateInput; 15 | -------------------------------------------------------------------------------- /examples/7guis-flight-booker-react/src/components/Header.tsx: -------------------------------------------------------------------------------- 1 | function Header({ children }: { children: React.ReactNode }) { 2 | return ( 3 |
4 |

{children}

5 |
6 | ); 7 | } 8 | export default Header; 9 | -------------------------------------------------------------------------------- /examples/7guis-flight-booker-react/src/components/index.ts: -------------------------------------------------------------------------------- 1 | import Header from './Header'; 2 | import BookButton from './BookButton'; 3 | import DateSelector from './DateInput'; 4 | import TripSelector from './TripSelector'; 5 | 6 | export { Header, BookButton, DateSelector, TripSelector }; 7 | -------------------------------------------------------------------------------- /examples/7guis-flight-booker-react/src/main.tsx: -------------------------------------------------------------------------------- 1 | import './styles/reset.css'; 2 | import './styles/styles.css'; 3 | 4 | import React from 'react'; 5 | import ReactDOM from 'react-dom/client'; 6 | import FlightContext from './machines/flightMachine.ts'; 7 | import App from './App.tsx'; 8 | 9 | ReactDOM.createRoot(document.getElementById('root')!).render( 10 | 11 | 12 | 13 | 14 | 15 | ); 16 | -------------------------------------------------------------------------------- /examples/7guis-flight-booker-react/src/utils/index.ts: -------------------------------------------------------------------------------- 1 | // CONSTANTS 2 | export const TODAY = new Date().toISOString().split('T')[0]; 3 | 4 | export const TOMORROW = new Date(Date.now() + 86400000) 5 | .toISOString() 6 | .split('T')[0]; 7 | 8 | // Emulate async operation 9 | export function sleep(ms: number) { 10 | return new Promise((resolve) => setTimeout(resolve, ms)); 11 | } 12 | -------------------------------------------------------------------------------- /examples/7guis-flight-booker-react/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /examples/7guis-flight-booker-react/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "skipLibCheck": true, 5 | "module": "ESNext", 6 | "moduleResolution": "bundler", 7 | "allowSyntheticDefaultImports": true, 8 | "strict": true 9 | }, 10 | "include": ["vite.config.ts"] 11 | } 12 | -------------------------------------------------------------------------------- /examples/7guis-flight-booker-react/types.d.ts: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | declare global { 4 | type Input = React.InputHTMLAttributes; 5 | type Select = React.SelectHTMLAttributes; 6 | 7 | type EventType = 'BOOK_DEPART' | 'BOOK_RETURN'; 8 | 9 | type FlightData = { 10 | departDate: string; 11 | returnDate: string; 12 | }; 13 | 14 | type TripSelectorProps = { 15 | isBooking: boolean; 16 | isBooked: boolean; 17 | tripType: 'oneWay' | 'roundTrip'; 18 | } & React.InputHTMLAttributes; 19 | } 20 | -------------------------------------------------------------------------------- /examples/7guis-flight-booker-react/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite'; 2 | import tsconfigPaths from 'vite-tsconfig-paths'; 3 | import react from '@vitejs/plugin-react'; 4 | 5 | // https://vitejs.dev/config/ 6 | export default defineConfig({ 7 | plugins: [react(), tsconfigPaths()] 8 | }); 9 | -------------------------------------------------------------------------------- /examples/7guis-temperature-react/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | dist 4 | dist-ssr 5 | *.local 6 | -------------------------------------------------------------------------------- /examples/7guis-temperature-react/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | XState Example: 7GUIs Temperature Converter 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /examples/7guis-temperature-react/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "0.0.0", 3 | "scripts": { 4 | "dev": "vite", 5 | "build": "tsc && vite build", 6 | "serve": "vite preview" 7 | }, 8 | "dependencies": { 9 | "@xstate/react": "^4.1.3", 10 | "react": "^17.0.2", 11 | "react-dom": "^17.0.2", 12 | "xstate": "^5.19.4" 13 | }, 14 | "devDependencies": { 15 | "@types/react": "^17.0.87", 16 | "@types/react-dom": "^17.0.26", 17 | "@vitejs/plugin-react-refresh": "^1.3.6", 18 | "typescript": "^5.8.3", 19 | "vite": "^5.4.19" 20 | }, 21 | "name": "@xstate/example-7guis-temperature-react" 22 | } 23 | -------------------------------------------------------------------------------- /examples/7guis-temperature-react/readme.md: -------------------------------------------------------------------------------- 1 | # 7GUIs Temperature 2 | 3 | This is an implementation of [the 7GUIs temperature converter](https://eugenkiss.github.io/7guis/tasks#temp) built with: 4 | 5 | - XState v5 6 | - React 7 | - TypeScript 8 | - Vite 9 | 10 | ## [Open in CodeSandbox](https://codesandbox.io/p/sandbox/github/statelyai/xstate/tree/main/examples/7guis-temperature-react) 11 | 12 | [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/statelyai/xstate/tree/main/examples/7guis-temperature-react) 13 | -------------------------------------------------------------------------------- /examples/7guis-temperature-react/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /examples/7guis-temperature-react/src/main.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | 6 | ReactDOM.render( 7 | 8 | 9 | , 10 | document.getElementById('root') 11 | ); 12 | -------------------------------------------------------------------------------- /examples/7guis-temperature-react/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /examples/7guis-temperature-react/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ESNext", 4 | "lib": ["DOM", "DOM.Iterable", "ESNext"], 5 | "allowJs": false, 6 | "skipLibCheck": false, 7 | "esModuleInterop": false, 8 | "allowSyntheticDefaultImports": true, 9 | "strict": true, 10 | "forceConsistentCasingInFileNames": true, 11 | "module": "ESNext", 12 | "moduleResolution": "Node", 13 | "resolveJsonModule": true, 14 | "isolatedModules": true, 15 | "noEmit": true, 16 | "jsx": "react" 17 | }, 18 | "include": ["./src"] 19 | } 20 | -------------------------------------------------------------------------------- /examples/7guis-temperature-react/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite'; 2 | import reactRefresh from '@vitejs/plugin-react-refresh'; 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [reactRefresh()] 7 | }); 8 | -------------------------------------------------------------------------------- /examples/counter/.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 | -------------------------------------------------------------------------------- /examples/counter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + TS 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /examples/counter/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@xstate/example-counter", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "tsc && vite build", 9 | "preview": "vite preview" 10 | }, 11 | "devDependencies": { 12 | "typescript": "^5.8.3", 13 | "vite": "^5.4.19" 14 | }, 15 | "dependencies": { 16 | "xstate": "^5.19.4" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /examples/counter/readme.md: -------------------------------------------------------------------------------- 1 | # Simple counter 2 | 3 | This is an implementation of a simple counter, built with: 4 | 5 | - XState v5 6 | - TypeScript 7 | - Vite 8 | 9 | ## [Open in CodeSandbox](https://codesandbox.io/p/sandbox/github/statelyai/xstate/tree/main/examples/counter) 10 | 11 | [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/statelyai/xstate/tree/main/examples/counter) 12 | -------------------------------------------------------------------------------- /examples/counter/src/counterMachine.ts: -------------------------------------------------------------------------------- 1 | import { assign, createMachine } from 'xstate'; 2 | 3 | export const counterMachine = createMachine({ 4 | id: 'counter', 5 | context: { 6 | count: 0 7 | }, 8 | on: { 9 | increment: { 10 | actions: assign({ 11 | count: ({ context }) => context.count + 1 12 | }) 13 | }, 14 | decrement: { 15 | actions: assign({ 16 | count: ({ context }) => context.count - 1 17 | }) 18 | } 19 | } 20 | }); 21 | -------------------------------------------------------------------------------- /examples/counter/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /examples/counter/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ESNext", 4 | "useDefineForClassFields": true, 5 | "module": "ESNext", 6 | "lib": ["ESNext", "DOM"], 7 | "moduleResolution": "Node", 8 | "strict": true, 9 | "resolveJsonModule": true, 10 | "isolatedModules": true, 11 | "esModuleInterop": true, 12 | "noEmit": true, 13 | "noUnusedLocals": true, 14 | "noUnusedParameters": true, 15 | "noImplicitReturns": true, 16 | "skipLibCheck": true 17 | }, 18 | "include": ["src"] 19 | } 20 | -------------------------------------------------------------------------------- /examples/express-workflow/machine.ts: -------------------------------------------------------------------------------- 1 | import { createMachine, assign } from 'xstate'; 2 | 3 | export const machine = createMachine({ 4 | id: 'counter', 5 | initial: 'green', 6 | context: { 7 | cycles: 0 8 | }, 9 | states: { 10 | green: { 11 | on: { 12 | TIMER: 'yellow' 13 | } 14 | }, 15 | yellow: { 16 | on: { 17 | TIMER: 'red' 18 | } 19 | }, 20 | red: { 21 | on: { 22 | TIMER: { 23 | target: 'green', 24 | actions: assign({ 25 | cycles: ({ context }) => context.cycles + 1 26 | }) 27 | } 28 | } 29 | } 30 | } 31 | }); 32 | -------------------------------------------------------------------------------- /examples/express-workflow/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es2016", 4 | "module": "commonjs", 5 | "strict": true, 6 | "esModuleInterop": true, 7 | "skipLibCheck": true, 8 | "forceConsistentCasingInFileNames": true 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /examples/fetch/README.md: -------------------------------------------------------------------------------- 1 | # Fetch 2 | 3 | This is a simple fetch example built with: 4 | 5 | - XState v5 6 | - Parcel 7 | 8 | ## [Open in CodeSandbox](https://codesandbox.io/p/sandbox/github/statelyai/xstate/tree/main/examples/fetch) 9 | 10 | [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/statelyai/xstate/tree/main/examples/fetch) 11 | -------------------------------------------------------------------------------- /examples/fetch/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | XState Fetch Example 4 | 5 | 6 | 7 | 8 |
9 |

Open the console to see the output

10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /examples/fetch/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@xstate/example-fetch", 3 | "version": "1.0.0", 4 | "private": true, 5 | "main": "index.html", 6 | "author": "David Khourshid", 7 | "license": "MIT", 8 | "scripts": { 9 | "start": "parcel index.html --open", 10 | "build": "parcel build index.html" 11 | }, 12 | "dependencies": { 13 | "parcel-bundler": "^1.12.5", 14 | "xstate": "^5.19.4" 15 | }, 16 | "devDependencies": { 17 | "typescript": "^5.8.3" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /examples/friends-list-react/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | dist 4 | dist-ssr 5 | *.local 6 | -------------------------------------------------------------------------------- /examples/friends-list-react/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | XState Template: React + TypeScript 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /examples/friends-list-react/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "0.0.0", 3 | "scripts": { 4 | "start": "vite", 5 | "dev": "vite", 6 | "build": "tsc && vite build", 7 | "serve": "vite preview" 8 | }, 9 | "dependencies": { 10 | "@xstate/react": "^4.1.3", 11 | "react": "^17.0.2", 12 | "react-dom": "^17.0.2", 13 | "xstate": "^5.19.4" 14 | }, 15 | "devDependencies": { 16 | "@types/react": "^17.0.87", 17 | "@types/react-dom": "^17.0.26", 18 | "@vitejs/plugin-react-refresh": "^1.3.6", 19 | "typescript": "^5.8.3", 20 | "vite": "^5.4.19" 21 | }, 22 | "name": "@xstate/example-friends-list-react" 23 | } 24 | -------------------------------------------------------------------------------- /examples/friends-list-react/readme.md: -------------------------------------------------------------------------------- 1 | # React list 2 | 3 | This is a React list built with: 4 | 5 | - XState v5 6 | - React 7 | - TypeScript 8 | - Vite 9 | 10 | ## [Open in CodeSandbox](https://codesandbox.io/p/sandbox/github/statelyai/xstate/tree/main/examples/friends-list-react) 11 | 12 | [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/statelyai/xstate/tree/main/examples/friends-list-react) 13 | -------------------------------------------------------------------------------- /examples/friends-list-react/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /examples/friends-list-react/src/main.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | 6 | ReactDOM.render( 7 | 8 | 9 | , 10 | document.getElementById('root') 11 | ); 12 | -------------------------------------------------------------------------------- /examples/friends-list-react/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /examples/friends-list-react/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ESNext", 4 | "lib": ["DOM", "DOM.Iterable", "ESNext"], 5 | "allowJs": false, 6 | "skipLibCheck": false, 7 | "esModuleInterop": false, 8 | "allowSyntheticDefaultImports": true, 9 | "strict": true, 10 | "forceConsistentCasingInFileNames": true, 11 | "module": "ESNext", 12 | "moduleResolution": "Node", 13 | "resolveJsonModule": true, 14 | "isolatedModules": true, 15 | "noEmit": true, 16 | "jsx": "react" 17 | }, 18 | "include": ["./src"] 19 | } 20 | -------------------------------------------------------------------------------- /examples/friends-list-react/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite'; 2 | import reactRefresh from '@vitejs/plugin-react-refresh'; 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [reactRefresh()] 7 | }); 8 | -------------------------------------------------------------------------------- /examples/local-store-counter-react/README.md: -------------------------------------------------------------------------------- 1 | # Counter example (`@xstate/store`) 2 | 3 | This is a simple counter example, built with: 4 | 5 | - [XState Store](https://github.com/statelyai/xstate/tree/main/packages/xstate-store) 6 | - React 7 | - TypeScript 8 | - Vite 9 | 10 | ## [Open in CodeSandbox](https://codesandbox.io/p/sandbox/github/statelyai/xstate/tree/main/examples/store-counter-react) 11 | 12 | [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/statelyai/xstate/tree/main/examples/store-counter-react) 13 | -------------------------------------------------------------------------------- /examples/local-store-counter-react/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React + TS 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /examples/local-store-counter-react/src/main.tsx: -------------------------------------------------------------------------------- 1 | import { StrictMode } from 'react'; 2 | import { createRoot } from 'react-dom/client'; 3 | import App from './App.tsx'; 4 | import './index.css'; 5 | 6 | createRoot(document.getElementById('root')!).render( 7 | 8 | 9 | 10 | ); 11 | -------------------------------------------------------------------------------- /examples/local-store-counter-react/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /examples/local-store-counter-react/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "files": [], 3 | "references": [ 4 | { "path": "./tsconfig.app.json" }, 5 | { "path": "./tsconfig.node.json" } 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /examples/local-store-counter-react/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2022", 4 | "lib": ["ES2023"], 5 | "module": "ESNext", 6 | "skipLibCheck": true, 7 | 8 | /* Bundler mode */ 9 | "moduleResolution": "bundler", 10 | "allowImportingTsExtensions": true, 11 | "isolatedModules": true, 12 | "moduleDetection": "force", 13 | "noEmit": true, 14 | 15 | /* Linting */ 16 | "strict": true, 17 | "noUnusedLocals": true, 18 | "noUnusedParameters": true, 19 | "noFallthroughCasesInSwitch": true 20 | }, 21 | "include": ["vite.config.ts"] 22 | } 23 | -------------------------------------------------------------------------------- /examples/local-store-counter-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 | -------------------------------------------------------------------------------- /examples/mongodb-credit-check-api/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "tabWidth": 2, 3 | "useTabs": false 4 | } 5 | -------------------------------------------------------------------------------- /examples/mongodb-credit-check-api/models/creditProfile.ts: -------------------------------------------------------------------------------- 1 | import { ObjectId } from "mongodb"; 2 | 3 | export default class CreditProfile { 4 | constructor( 5 | public SSN: string, 6 | public LastName: string, 7 | public FirstName: string, 8 | public GavUnionScore: number, 9 | public EquiGavinScore: number, 10 | public GavperianScore: number, 11 | public ErrorMessage: string, 12 | public MiddleScore: number, 13 | public InterestRateOptions: number[], 14 | public _id?: ObjectId, 15 | ) {} 16 | } 17 | -------------------------------------------------------------------------------- /examples/mongodb-credit-check-api/models/creditReport.ts: -------------------------------------------------------------------------------- 1 | import { ObjectId } from "mongodb"; 2 | 3 | export default class CreditReport { 4 | constructor( 5 | public ssn: string, 6 | public bureauName: string, 7 | public creditScore: number, 8 | public _id?: ObjectId, 9 | ) {} 10 | } 11 | -------------------------------------------------------------------------------- /examples/mongodb-credit-check-api/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es2016", 4 | "module": "commonjs", 5 | "strict": true, 6 | "esModuleInterop": true, 7 | "skipLibCheck": true, 8 | "forceConsistentCasingInFileNames": true 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /examples/mongodb-persisted-state/.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 | -------------------------------------------------------------------------------- /examples/mongodb-persisted-state/TaskQueue.ts: -------------------------------------------------------------------------------- 1 | export class TaskQueue { 2 | private taskQueue: (() => Promise)[] = []; 3 | private status: 'idle' | 'processing' = 'idle'; 4 | 5 | private async processQueue(): Promise { 6 | if (this.status === 'processing') return; 7 | this.status = 'processing'; 8 | 9 | while (this.taskQueue.length > 0) { 10 | const task = this.taskQueue.shift(); 11 | if (task) await task(); 12 | } 13 | this.status = 'idle'; 14 | } 15 | 16 | async addTask(task: () => Promise): Promise { 17 | this.taskQueue.push(task); 18 | await this.processQueue(); 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /examples/mongodb-persisted-state/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@xstate/example-mongodb-persisted-state", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "start": "vite-node --script ./main.ts", 8 | "build": "tsc && vite build", 9 | "preview": "vite preview" 10 | }, 11 | "devDependencies": { 12 | "ts-node": "^10.9.2", 13 | "typescript": "^5.8.3", 14 | "vite": "^5.4.19", 15 | "vite-node": "^0.31.4" 16 | }, 17 | "dependencies": { 18 | "mongodb": "^6.16.0", 19 | "xstate": "^5.19.4" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /examples/mongodb-persisted-state/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2020", 4 | "useDefineForClassFields": true, 5 | "module": "ESNext", 6 | "lib": ["ES2020", "DOM", "DOM.Iterable"], 7 | "skipLibCheck": true, 8 | "esModuleInterop": true, 9 | 10 | /* Bundler mode */ 11 | "moduleResolution": "bundler", 12 | "allowImportingTsExtensions": true, 13 | "resolveJsonModule": true, 14 | "isolatedModules": true, 15 | "noEmit": true, 16 | 17 | /* Linting */ 18 | "strict": true, 19 | "noUnusedLocals": true, 20 | "noUnusedParameters": true, 21 | "noFallthroughCasesInSwitch": true 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /examples/persisted-donut-maker/.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 | -------------------------------------------------------------------------------- /examples/persisted-donut-maker/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@xstate/example-persisted-donut-maker", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "start": "vite-node --script ./main.ts", 8 | "build": "tsc && vite build", 9 | "preview": "vite preview" 10 | }, 11 | "devDependencies": { 12 | "typescript": "^5.8.3", 13 | "vite": "^5.4.19", 14 | "vite-node": "^0.31.4" 15 | }, 16 | "dependencies": { 17 | "xstate": "^5.19.4" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /examples/persisted-donut-maker/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2020", 4 | "useDefineForClassFields": true, 5 | "module": "ESNext", 6 | "lib": ["ES2020", "DOM", "DOM.Iterable"], 7 | "skipLibCheck": true, 8 | 9 | /* Bundler mode */ 10 | "moduleResolution": "bundler", 11 | "allowImportingTsExtensions": true, 12 | "resolveJsonModule": true, 13 | "isolatedModules": true, 14 | "noEmit": true, 15 | 16 | /* Linting */ 17 | "strict": true, 18 | "noUnusedLocals": true, 19 | "noUnusedParameters": true, 20 | "noFallthroughCasesInSwitch": true 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /examples/snake-react/.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { browser: true, es2020: true }, 4 | extends: [ 5 | 'eslint:recommended', 6 | 'plugin:@typescript-eslint/recommended', 7 | 'plugin:react-hooks/recommended' 8 | ], 9 | ignorePatterns: ['dist', '.eslintrc.cjs'], 10 | parser: '@typescript-eslint/parser', 11 | plugins: ['react-refresh'], 12 | rules: { 13 | 'react-refresh/only-export-components': [ 14 | 'warn', 15 | { allowConstantExport: true } 16 | ] 17 | } 18 | }; 19 | -------------------------------------------------------------------------------- /examples/snake-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 | -------------------------------------------------------------------------------- /examples/snake-react/README.md: -------------------------------------------------------------------------------- 1 | # React Snake 2 | 3 | This is an implementation of the game Snake built with: 4 | 5 | - XState v5 6 | - React 7 | - TypeScript 8 | - Vite 9 | 10 | ## [Open in CodeSandbox](https://codesandbox.io/p/sandbox/github/statelyai/xstate/tree/main/examples/snake-react) 11 | 12 | [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/statelyai/xstate/tree/main/examples/snake-react) 13 | 14 | Adapted from https://github.com/josmithua/xsnake 15 | -------------------------------------------------------------------------------- /examples/snake-react/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | XState Example: Snake 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /examples/snake-react/src/main.tsx: -------------------------------------------------------------------------------- 1 | import './index.css'; 2 | import * as ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | const rootElement = document.getElementById('root'); 6 | ReactDOM.render(, rootElement); 7 | -------------------------------------------------------------------------------- /examples/snake-react/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /examples/snake-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 | -------------------------------------------------------------------------------- /examples/snake-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 | -------------------------------------------------------------------------------- /examples/stopwatch/.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 | -------------------------------------------------------------------------------- /examples/stopwatch/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + TS 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /examples/stopwatch/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@xstate/example-stopwatch", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "tsc && vite build", 9 | "preview": "vite preview" 10 | }, 11 | "devDependencies": { 12 | "typescript": "^5.8.3", 13 | "vite": "^5.4.19" 14 | }, 15 | "dependencies": { 16 | "xstate": "^5.19.4" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /examples/stopwatch/readme.md: -------------------------------------------------------------------------------- 1 | # Stopwatch 2 | 3 | This is a simple stopwatch, built with: 4 | 5 | - XState v5 6 | - TypeScript 7 | - Vite 8 | 9 | ## [Open in CodeSandbox](https://codesandbox.io/p/sandbox/github/statelyai/xstate/tree/main/examples/stopwatch) 10 | 11 | [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/statelyai/xstate/tree/main/examples/stopwatch) 12 | -------------------------------------------------------------------------------- /examples/stopwatch/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /examples/stopwatch/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ESNext", 4 | "useDefineForClassFields": true, 5 | "module": "ESNext", 6 | "lib": ["ESNext", "DOM"], 7 | "moduleResolution": "Node", 8 | "strict": true, 9 | "resolveJsonModule": true, 10 | "isolatedModules": true, 11 | "esModuleInterop": true, 12 | "noEmit": true, 13 | "noUnusedLocals": true, 14 | "noUnusedParameters": true, 15 | "noImplicitReturns": true, 16 | "skipLibCheck": true 17 | }, 18 | "include": ["src"] 19 | } 20 | -------------------------------------------------------------------------------- /examples/store-counter-react/README.md: -------------------------------------------------------------------------------- 1 | # Counter example (`@xstate/store`) 2 | 3 | This is a simple counter example, built with: 4 | 5 | - [XState Store](https://github.com/statelyai/xstate/tree/main/packages/xstate-store) 6 | - React 7 | - TypeScript 8 | - Vite 9 | 10 | ## [Open in CodeSandbox](https://codesandbox.io/p/sandbox/github/statelyai/xstate/tree/main/examples/store-counter-react) 11 | 12 | [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/statelyai/xstate/tree/main/examples/store-counter-react) 13 | -------------------------------------------------------------------------------- /examples/store-counter-react/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React + TS 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /examples/store-counter-react/src/main.tsx: -------------------------------------------------------------------------------- 1 | import { StrictMode } from 'react'; 2 | import { createRoot } from 'react-dom/client'; 3 | import App from './App.tsx'; 4 | import './index.css'; 5 | 6 | createRoot(document.getElementById('root')!).render( 7 | 8 | 9 | 10 | ); 11 | -------------------------------------------------------------------------------- /examples/store-counter-react/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /examples/store-counter-react/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "files": [], 3 | "references": [ 4 | { "path": "./tsconfig.app.json" }, 5 | { "path": "./tsconfig.node.json" } 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /examples/store-counter-react/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2022", 4 | "lib": ["ES2023"], 5 | "module": "ESNext", 6 | "skipLibCheck": true, 7 | 8 | /* Bundler mode */ 9 | "moduleResolution": "bundler", 10 | "allowImportingTsExtensions": true, 11 | "isolatedModules": true, 12 | "moduleDetection": "force", 13 | "noEmit": true, 14 | 15 | /* Linting */ 16 | "strict": true, 17 | "noUnusedLocals": true, 18 | "noUnusedParameters": true, 19 | "noFallthroughCasesInSwitch": true 20 | }, 21 | "include": ["vite.config.ts"] 22 | } 23 | -------------------------------------------------------------------------------- /examples/store-counter-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 | -------------------------------------------------------------------------------- /examples/tic-tac-toe-react/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | React tic tac toe Example 7 | 8 | 9 |
10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /examples/tic-tac-toe-react/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "0.0.0", 3 | "scripts": { 4 | "dev": "vite", 5 | "build": "tsc && vite build", 6 | "serve": "vite preview" 7 | }, 8 | "dependencies": { 9 | "@xstate/react": "^4.1.3", 10 | "react": "^17.0.2", 11 | "react-dom": "^17.0.2", 12 | "xstate": "^5.19.4" 13 | }, 14 | "devDependencies": { 15 | "@types/react": "^17.0.87", 16 | "@types/react-dom": "^17.0.26", 17 | "typescript": "^5.8.3", 18 | "vite": "^5.4.19" 19 | }, 20 | "name": "@xstate/example-tic-tac-toe-react" 21 | } 22 | -------------------------------------------------------------------------------- /examples/tic-tac-toe-react/readme.md: -------------------------------------------------------------------------------- 1 | # React tic-tac-toe 2 | 3 | This is an implementation of tic-tac-toe built with: 4 | 5 | - XState v5 6 | - React 7 | - TypeScript 8 | - Vite 9 | 10 | ## [Open in CodeSandbox](https://codesandbox.io/p/sandbox/github/statelyai/xstate/tree/main/examples/tic-tac-toe-react) 11 | 12 | [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/statelyai/xstate/tree/main/examples/tic-tac-toe-react) 13 | -------------------------------------------------------------------------------- /examples/tic-tac-toe-react/src/main.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | ReactDOM.render( 6 | 7 | 8 | , 9 | document.getElementById('root') 10 | ); 11 | -------------------------------------------------------------------------------- /examples/tic-tac-toe-react/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /examples/tic-tac-toe-react/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ESNext", 4 | "lib": ["DOM", "DOM.Iterable", "ESNext"], 5 | "allowJs": false, 6 | "skipLibCheck": false, 7 | "esModuleInterop": false, 8 | "allowSyntheticDefaultImports": true, 9 | "strict": true, 10 | "forceConsistentCasingInFileNames": true, 11 | "module": "ESNext", 12 | "moduleResolution": "Node", 13 | "resolveJsonModule": true, 14 | "isolatedModules": true, 15 | "noEmit": true, 16 | "jsx": "react" 17 | }, 18 | "include": ["./src"] 19 | } 20 | -------------------------------------------------------------------------------- /examples/tiles/.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 | -------------------------------------------------------------------------------- /examples/tiles/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React + TS 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /examples/tiles/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@xstate/example-tiles", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "tsc && vite build", 9 | "preview": "vite preview" 10 | }, 11 | "dependencies": { 12 | "@xstate/react": "^4.1.3", 13 | "react": "^18.3.1", 14 | "react-dom": "^18.3.1", 15 | "xstate": "^5.19.4" 16 | }, 17 | "devDependencies": { 18 | "@types/react": "^18.3.23", 19 | "@types/react-dom": "^18.3.7", 20 | "@vitejs/plugin-react": "^4.5.0", 21 | "typescript": "^5.8.3", 22 | "vite": "^5.4.19" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /examples/tiles/readme.md: -------------------------------------------------------------------------------- 1 | # Tiles game 2 | 3 | This is a simple tiles game, built with: 4 | 5 | - XState v5 6 | - React 7 | - TypeScript 8 | - Vite 9 | 10 | ## [Open in CodeSandbox](https://codesandbox.io/p/sandbox/github/statelyai/xstate/tree/main/examples/tiles) 11 | 12 | [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/statelyai/xstate/tree/main/examples/tiles) 13 | -------------------------------------------------------------------------------- /examples/tiles/src/main.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import App from './App'; 4 | import './index.css'; 5 | 6 | ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render( 7 | 8 | 9 | 10 | ); 11 | -------------------------------------------------------------------------------- /examples/tiles/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /examples/tiles/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ESNext", 4 | "useDefineForClassFields": true, 5 | "lib": ["DOM", "DOM.Iterable", "ESNext"], 6 | "allowJs": false, 7 | "skipLibCheck": true, 8 | "esModuleInterop": false, 9 | "allowSyntheticDefaultImports": true, 10 | "strict": true, 11 | "forceConsistentCasingInFileNames": true, 12 | "module": "ESNext", 13 | "moduleResolution": "Node", 14 | "resolveJsonModule": true, 15 | "isolatedModules": true, 16 | "noEmit": true, 17 | "jsx": "react-jsx" 18 | }, 19 | "include": ["src"], 20 | "references": [{ "path": "./tsconfig.node.json" }] 21 | } 22 | -------------------------------------------------------------------------------- /examples/tiles/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "module": "ESNext", 5 | "moduleResolution": "Node", 6 | "allowSyntheticDefaultImports": true 7 | }, 8 | "include": ["vite.config.ts"] 9 | } 10 | -------------------------------------------------------------------------------- /examples/tiles/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 | -------------------------------------------------------------------------------- /examples/timer/.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 | -------------------------------------------------------------------------------- /examples/timer/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React + TS 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /examples/timer/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@xstate/example-timer", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "tsc && vite build", 9 | "preview": "vite preview" 10 | }, 11 | "dependencies": { 12 | "@xstate/react": "^4.1.3", 13 | "react": "^18.3.1", 14 | "react-dom": "^18.3.1", 15 | "xstate": "^5.19.4" 16 | }, 17 | "devDependencies": { 18 | "@types/react": "^18.3.23", 19 | "@types/react-dom": "^18.3.7", 20 | "@vitejs/plugin-react": "^4.5.0", 21 | "typescript": "^5.8.3", 22 | "vite": "^5.4.19" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /examples/timer/readme.md: -------------------------------------------------------------------------------- 1 | # Timer 2 | 3 | This is a timer, built with: 4 | 5 | - XState v5 6 | - React 7 | - TypeScript 8 | - Vite 9 | 10 | ## [Open in CodeSandbox](https://codesandbox.io/p/sandbox/github/statelyai/xstate/tree/main/examples/timer) 11 | 12 | [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/statelyai/xstate/tree/main/examples/timer) 13 | -------------------------------------------------------------------------------- /examples/timer/src/main.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import App from './App'; 4 | import './index.css'; 5 | 6 | ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render( 7 | 8 | 9 | 10 | ); 11 | -------------------------------------------------------------------------------- /examples/timer/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /examples/timer/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ESNext", 4 | "useDefineForClassFields": true, 5 | "lib": ["DOM", "DOM.Iterable", "ESNext"], 6 | "allowJs": false, 7 | "skipLibCheck": true, 8 | "esModuleInterop": false, 9 | "allowSyntheticDefaultImports": true, 10 | "strict": true, 11 | "forceConsistentCasingInFileNames": true, 12 | "module": "ESNext", 13 | "moduleResolution": "Node", 14 | "resolveJsonModule": true, 15 | "isolatedModules": true, 16 | "noEmit": true, 17 | "jsx": "react-jsx" 18 | }, 19 | "include": ["src"], 20 | "references": [{ "path": "./tsconfig.node.json" }] 21 | } 22 | -------------------------------------------------------------------------------- /examples/timer/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "module": "ESNext", 5 | "moduleResolution": "Node", 6 | "allowSyntheticDefaultImports": true 7 | }, 8 | "include": ["vite.config.ts"] 9 | } 10 | -------------------------------------------------------------------------------- /examples/timer/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 | -------------------------------------------------------------------------------- /examples/todomvc-react/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | dist 4 | dist-ssr 5 | *.local 6 | -------------------------------------------------------------------------------- /examples/todomvc-react/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Vite App 7 | 8 | 9 |
10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /examples/todomvc-react/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /examples/todomvc-react/src/main.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | import 'todomvc-common/base.css'; 6 | import 'todomvc-app-css/index.css'; 7 | 8 | ReactDOM.render( 9 | 10 | 11 | , 12 | document.getElementById('root') 13 | ); 14 | -------------------------------------------------------------------------------- /examples/todomvc-react/src/useHashChange.ts: -------------------------------------------------------------------------------- 1 | import { useEffect } from 'react'; 2 | 3 | export function useHashChange(onHashChange: (ev: HashChangeEvent) => void) { 4 | useEffect(() => { 5 | window.addEventListener('hashchange', onHashChange); 6 | 7 | return () => window.removeEventListener('hashchange', onHashChange); 8 | }, [onHashChange]); 9 | } 10 | -------------------------------------------------------------------------------- /examples/todomvc-react/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ESNext", 4 | "lib": ["DOM", "DOM.Iterable", "ESNext"], 5 | "types": [], 6 | "allowJs": false, 7 | "skipLibCheck": false, 8 | "esModuleInterop": false, 9 | "allowSyntheticDefaultImports": true, 10 | "strict": true, 11 | "forceConsistentCasingInFileNames": true, 12 | "module": "ESNext", 13 | "moduleResolution": "Node", 14 | "resolveJsonModule": true, 15 | "isolatedModules": true, 16 | "noEmit": true, 17 | "jsx": "react" 18 | }, 19 | "include": ["src"] 20 | } 21 | -------------------------------------------------------------------------------- /examples/todomvc-react/vite.config.ts: -------------------------------------------------------------------------------- 1 | import * as reactPlugin from 'vite-plugin-react'; 2 | import type { UserConfig } from 'vite'; 3 | 4 | const config: UserConfig = { 5 | jsx: 'react', 6 | plugins: [reactPlugin] 7 | }; 8 | 9 | export default config; 10 | -------------------------------------------------------------------------------- /examples/toggle/.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 | -------------------------------------------------------------------------------- /examples/toggle/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + TS 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /examples/toggle/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@xstate/example-toggle", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "tsc && vite build", 9 | "preview": "vite preview" 10 | }, 11 | "devDependencies": { 12 | "typescript": "^5.8.3", 13 | "vite": "^5.4.19" 14 | }, 15 | "dependencies": { 16 | "xstate": "^5.19.4" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /examples/toggle/readme.md: -------------------------------------------------------------------------------- 1 | # Toggle 2 | 3 | This is a simple toggle, built with: 4 | 5 | - XState v5 6 | - TypeScript 7 | - Vite 8 | 9 | ## [Open in CodeSandbox](https://codesandbox.io/p/sandbox/github/statelyai/xstate/tree/main/examples/toggle) 10 | 11 | [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/statelyai/xstate/tree/main/examples/toggle) 12 | -------------------------------------------------------------------------------- /examples/toggle/src/toggleMachine.ts: -------------------------------------------------------------------------------- 1 | import { createMachine } from 'xstate'; 2 | 3 | export const toggleMachine = createMachine({ 4 | id: 'toggle', 5 | initial: 'inactive', 6 | states: { 7 | inactive: { 8 | on: { 9 | toggle: 'active' 10 | } 11 | }, 12 | active: { 13 | on: { 14 | toggle: 'inactive' 15 | } 16 | } 17 | } 18 | }); 19 | -------------------------------------------------------------------------------- /examples/toggle/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /examples/toggle/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ESNext", 4 | "useDefineForClassFields": true, 5 | "module": "ESNext", 6 | "lib": ["ESNext", "DOM"], 7 | "moduleResolution": "Node", 8 | "strict": true, 9 | "resolveJsonModule": true, 10 | "isolatedModules": true, 11 | "esModuleInterop": true, 12 | "noEmit": true, 13 | "noUnusedLocals": true, 14 | "noUnusedParameters": true, 15 | "noImplicitReturns": true, 16 | "skipLibCheck": true 17 | }, 18 | "include": ["src"] 19 | } 20 | -------------------------------------------------------------------------------- /examples/trivia-game-example/.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { browser: true, es2020: true }, 4 | extends: [ 5 | 'eslint:recommended', 6 | 'plugin:@typescript-eslint/recommended', 7 | 'plugin:react-hooks/recommended' 8 | ], 9 | ignorePatterns: ['dist', '.eslintrc.cjs'], 10 | parser: '@typescript-eslint/parser', 11 | plugins: ['react-refresh'], 12 | rules: { 13 | 'react-refresh/only-export-components': [ 14 | 'warn', 15 | { allowConstantExport: true } 16 | ] 17 | } 18 | }; 19 | -------------------------------------------------------------------------------- /examples/trivia-game-example/.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 | -------------------------------------------------------------------------------- /examples/trivia-game-example/postcss.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {} 5 | } 6 | }; 7 | -------------------------------------------------------------------------------- /examples/trivia-game-example/src/App.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statelyai/xstate/f9d04bbfb0d043da0451562531437f51ca8c8b07/examples/trivia-game-example/src/App.css -------------------------------------------------------------------------------- /examples/trivia-game-example/src/common/constants.ts: -------------------------------------------------------------------------------- 1 | const RICK_AND_MORTY_API = 'https://rickandmortyapi.com/api/character'; 2 | 3 | export { RICK_AND_MORTY_API }; 4 | 5 | export function getRandomNumber(): number { 6 | return Math.floor(Math.random() * 400); 7 | } 8 | -------------------------------------------------------------------------------- /examples/trivia-game-example/src/components/layout/BigTitle.tsx: -------------------------------------------------------------------------------- 1 | const App = () => { 2 | return ( 3 |
4 |
5 | 9 |
10 |
11 | ); 12 | }; 13 | 14 | export default App; 15 | -------------------------------------------------------------------------------- /examples/trivia-game-example/src/components/styled/ImgBack.tsx: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const ImgBack = styled.div` 4 | width: 10%; 5 | float: left; 6 | `; 7 | -------------------------------------------------------------------------------- /examples/trivia-game-example/src/context/AppContext.tsx: -------------------------------------------------------------------------------- 1 | import { createActorContext } from '@xstate/react'; 2 | import triviaMachine from '../triviaMachine'; 3 | 4 | export const TriviaMachineContext = createActorContext(triviaMachine); 5 | -------------------------------------------------------------------------------- /examples/trivia-game-example/src/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | -------------------------------------------------------------------------------- /examples/trivia-game-example/src/main.tsx: -------------------------------------------------------------------------------- 1 | import ReactDOM from 'react-dom/client'; 2 | import App from './App.tsx'; 3 | import './index.css'; 4 | import { BrowserRouter } from 'react-router-dom'; 5 | 6 | ReactDOM.createRoot(document.getElementById('root')!).render( 7 | 8 | 9 | 10 | ); 11 | -------------------------------------------------------------------------------- /examples/trivia-game-example/src/pages/Home.tsx: -------------------------------------------------------------------------------- 1 | import BigTitle from '../components/layout/BigTitle'; 2 | import StartGame from '../components/game/StartGame'; 3 | import GeneralModal from '../components/layout/Modal'; 4 | 5 | const App: React.FC = () => { 6 | return ( 7 | <> 8 | 9 | 10 | 11 | 12 | ); 13 | }; 14 | 15 | export default App; 16 | -------------------------------------------------------------------------------- /examples/trivia-game-example/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /examples/trivia-game-example/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | export default { 3 | content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'], 4 | theme: { 5 | extend: {} 6 | }, 7 | plugins: [] 8 | }; 9 | -------------------------------------------------------------------------------- /examples/trivia-game-example/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "skipLibCheck": true, 5 | "module": "ESNext", 6 | "moduleResolution": "bundler", 7 | "allowSyntheticDefaultImports": true, 8 | "strict": true 9 | }, 10 | "include": ["vite.config.ts"] 11 | } 12 | -------------------------------------------------------------------------------- /examples/trivia-game-example/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite'; 2 | import react from '@vitejs/plugin-react'; 3 | import { resolve } from 'path'; 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | resolve: { 8 | alias: { 9 | '~bootstrap': resolve(__dirname, 'node_modules/bootstrap') 10 | } 11 | } 12 | }); 13 | -------------------------------------------------------------------------------- /examples/workflow-accumulate-room-readings/.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 | -------------------------------------------------------------------------------- /examples/workflow-accumulate-room-readings/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@xstate/example-workflow-accumulate-room-readings", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "start": "vite-node --script ./main.ts", 8 | "build": "tsc && vite build", 9 | "preview": "vite preview" 10 | }, 11 | "devDependencies": { 12 | "typescript": "^5.8.3", 13 | "vite": "^5.4.19", 14 | "vite-node": "^0.31.4" 15 | }, 16 | "dependencies": { 17 | "cockatiel": "^3.2.1", 18 | "xstate": "^5.19.4" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /examples/workflow-accumulate-room-readings/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2020", 4 | "useDefineForClassFields": true, 5 | "module": "ESNext", 6 | "lib": ["ES2020", "DOM", "DOM.Iterable"], 7 | "skipLibCheck": true, 8 | 9 | /* Bundler mode */ 10 | "moduleResolution": "bundler", 11 | "allowImportingTsExtensions": true, 12 | "resolveJsonModule": true, 13 | "isolatedModules": true, 14 | "noEmit": true, 15 | 16 | /* Linting */ 17 | "strict": true, 18 | "noUnusedLocals": true, 19 | "noUnusedParameters": true, 20 | "noFallthroughCasesInSwitch": true 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /examples/workflow-applicant-request/.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 | -------------------------------------------------------------------------------- /examples/workflow-applicant-request/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@xstate/example-workflow-applicant-request", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "start": "vite-node --script ./main.ts", 8 | "build": "tsc && vite build", 9 | "preview": "vite preview" 10 | }, 11 | "devDependencies": { 12 | "typescript": "^5.8.3", 13 | "vite": "^5.4.19", 14 | "vite-node": "^0.31.4" 15 | }, 16 | "dependencies": { 17 | "ts-node": "^10.9.2", 18 | "xstate": "^5.19.4" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /examples/workflow-applicant-request/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2020", 4 | "useDefineForClassFields": true, 5 | "module": "ESNext", 6 | "lib": ["ES2020", "DOM", "DOM.Iterable"], 7 | "skipLibCheck": true, 8 | 9 | /* Bundler mode */ 10 | "moduleResolution": "bundler", 11 | "allowImportingTsExtensions": true, 12 | "resolveJsonModule": true, 13 | "isolatedModules": true, 14 | "noEmit": true, 15 | 16 | /* Linting */ 17 | "strict": true, 18 | "noUnusedLocals": true, 19 | "noUnusedParameters": true, 20 | "noFallthroughCasesInSwitch": true 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /examples/workflow-async-function/.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 | -------------------------------------------------------------------------------- /examples/workflow-async-function/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@xstate/example-workflow-async-function", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "start": "vite-node --script ./main.ts", 8 | "build": "tsc && vite build", 9 | "preview": "vite preview" 10 | }, 11 | "devDependencies": { 12 | "typescript": "^5.8.3", 13 | "vite": "^5.4.19", 14 | "vite-node": "^0.31.4" 15 | }, 16 | "dependencies": { 17 | "xstate": "^5.19.4" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /examples/workflow-async-function/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2020", 4 | "useDefineForClassFields": true, 5 | "module": "ESNext", 6 | "lib": ["ES2020", "DOM", "DOM.Iterable"], 7 | "skipLibCheck": true, 8 | 9 | /* Bundler mode */ 10 | "moduleResolution": "bundler", 11 | "allowImportingTsExtensions": true, 12 | "resolveJsonModule": true, 13 | "isolatedModules": true, 14 | "noEmit": true, 15 | 16 | /* Linting */ 17 | "strict": true, 18 | "noUnusedLocals": true, 19 | "noUnusedParameters": true, 20 | "noFallthroughCasesInSwitch": true 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /examples/workflow-async-subflow/.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 | -------------------------------------------------------------------------------- /examples/workflow-async-subflow/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@xstate/example-workflow-async-subflow", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "start": "vite-node --script ./main.ts", 8 | "build": "tsc && vite build", 9 | "preview": "vite preview" 10 | }, 11 | "devDependencies": { 12 | "typescript": "^5.8.3", 13 | "vite": "^5.4.19", 14 | "vite-node": "^0.31.4" 15 | }, 16 | "dependencies": { 17 | "xstate": "^5.19.4" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /examples/workflow-async-subflow/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2020", 4 | "useDefineForClassFields": true, 5 | "module": "ESNext", 6 | "lib": ["ES2020", "DOM", "DOM.Iterable"], 7 | "skipLibCheck": true, 8 | 9 | /* Bundler mode */ 10 | "moduleResolution": "bundler", 11 | "allowImportingTsExtensions": true, 12 | "resolveJsonModule": true, 13 | "isolatedModules": true, 14 | "noEmit": true, 15 | 16 | /* Linting */ 17 | "strict": true, 18 | "noUnusedLocals": true, 19 | "noUnusedParameters": true, 20 | "noFallthroughCasesInSwitch": true 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /examples/workflow-book-lending/.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 | -------------------------------------------------------------------------------- /examples/workflow-book-lending/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@xstate/example-workflow-book-lending", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "start": "vite-node --script ./main.ts", 8 | "build": "tsc && vite build", 9 | "preview": "vite preview" 10 | }, 11 | "devDependencies": { 12 | "typescript": "^5.8.3", 13 | "vite": "^5.4.19", 14 | "vite-node": "^0.31.4" 15 | }, 16 | "dependencies": { 17 | "cockatiel": "^3.2.1", 18 | "xstate": "^5.19.4" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /examples/workflow-book-lending/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2020", 4 | "useDefineForClassFields": true, 5 | "module": "ESNext", 6 | "lib": ["ES2020", "DOM", "DOM.Iterable"], 7 | "skipLibCheck": true, 8 | 9 | /* Bundler mode */ 10 | "moduleResolution": "bundler", 11 | "allowImportingTsExtensions": true, 12 | "resolveJsonModule": true, 13 | "isolatedModules": true, 14 | "noEmit": true, 15 | 16 | /* Linting */ 17 | "strict": true, 18 | "noUnusedLocals": true, 19 | "noUnusedParameters": true, 20 | "noFallthroughCasesInSwitch": true 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /examples/workflow-car-auction-bids/.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 | -------------------------------------------------------------------------------- /examples/workflow-car-auction-bids/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@xstate/example-workflow-car-auction-bids", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "start": "vite-node --script ./main.ts", 8 | "build": "tsc && vite build", 9 | "preview": "vite preview" 10 | }, 11 | "devDependencies": { 12 | "typescript": "^5.8.3", 13 | "vite": "^5.4.19", 14 | "vite-node": "^0.31.4" 15 | }, 16 | "dependencies": { 17 | "xstate": "^5.19.4" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /examples/workflow-car-auction-bids/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2020", 4 | "useDefineForClassFields": true, 5 | "module": "ESNext", 6 | "lib": ["ES2020", "DOM", "DOM.Iterable"], 7 | "skipLibCheck": true, 8 | 9 | /* Bundler mode */ 10 | "moduleResolution": "bundler", 11 | "allowImportingTsExtensions": true, 12 | "resolveJsonModule": true, 13 | "isolatedModules": true, 14 | "noEmit": true, 15 | 16 | /* Linting */ 17 | "strict": true, 18 | "noUnusedLocals": true, 19 | "noUnusedParameters": true, 20 | "noFallthroughCasesInSwitch": true 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /examples/workflow-car-vitals/.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 | -------------------------------------------------------------------------------- /examples/workflow-car-vitals/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@xstate/example-workflow-car-vitals", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "start": "vite-node --script ./main.ts", 8 | "build": "tsc && vite build", 9 | "preview": "vite preview" 10 | }, 11 | "devDependencies": { 12 | "typescript": "^5.8.3", 13 | "vite": "^5.4.19", 14 | "vite-node": "^0.31.4" 15 | }, 16 | "dependencies": { 17 | "cockatiel": "^3.2.1", 18 | "xstate": "^5.19.4" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /examples/workflow-car-vitals/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2020", 4 | "useDefineForClassFields": true, 5 | "module": "ESNext", 6 | "lib": ["ES2020", "DOM", "DOM.Iterable"], 7 | "skipLibCheck": true, 8 | 9 | /* Bundler mode */ 10 | "moduleResolution": "bundler", 11 | "allowImportingTsExtensions": true, 12 | "resolveJsonModule": true, 13 | "isolatedModules": true, 14 | "noEmit": true, 15 | 16 | /* Linting */ 17 | "strict": true, 18 | "noUnusedLocals": true, 19 | "noUnusedParameters": true, 20 | "noFallthroughCasesInSwitch": true 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /examples/workflow-check-inbox/.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 | -------------------------------------------------------------------------------- /examples/workflow-check-inbox/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@xstate/example-workflow-check-inbox", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "start": "vite-node --script ./main.ts", 8 | "build": "tsc && vite build", 9 | "preview": "vite preview" 10 | }, 11 | "devDependencies": { 12 | "typescript": "^5.8.3", 13 | "vite": "^5.4.19", 14 | "vite-node": "^0.31.4" 15 | }, 16 | "dependencies": { 17 | "xstate": "^5.19.4" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /examples/workflow-check-inbox/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2020", 4 | "useDefineForClassFields": true, 5 | "module": "ESNext", 6 | "lib": ["ES2020", "DOM", "DOM.Iterable"], 7 | "skipLibCheck": true, 8 | 9 | /* Bundler mode */ 10 | "moduleResolution": "bundler", 11 | "allowImportingTsExtensions": true, 12 | "resolveJsonModule": true, 13 | "isolatedModules": true, 14 | "noEmit": true, 15 | 16 | /* Linting */ 17 | "strict": true, 18 | "noUnusedLocals": true, 19 | "noUnusedParameters": true, 20 | "noFallthroughCasesInSwitch": true 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /examples/workflow-credit-check/.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 | -------------------------------------------------------------------------------- /examples/workflow-credit-check/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@xstate/example-workflow-credit-check", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "start": "vite-node --script ./main.ts", 8 | "build": "tsc && vite build", 9 | "preview": "vite preview" 10 | }, 11 | "devDependencies": { 12 | "typescript": "^5.8.3", 13 | "vite": "^5.4.19", 14 | "vite-node": "^0.31.4" 15 | }, 16 | "dependencies": { 17 | "xstate": "^5.19.4" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /examples/workflow-credit-check/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2020", 4 | "useDefineForClassFields": true, 5 | "module": "ESNext", 6 | "lib": ["ES2020", "DOM", "DOM.Iterable"], 7 | "skipLibCheck": true, 8 | 9 | /* Bundler mode */ 10 | "moduleResolution": "bundler", 11 | "allowImportingTsExtensions": true, 12 | "resolveJsonModule": true, 13 | "isolatedModules": true, 14 | "noEmit": true, 15 | 16 | /* Linting */ 17 | "strict": true, 18 | "noUnusedLocals": true, 19 | "noUnusedParameters": true, 20 | "noFallthroughCasesInSwitch": true 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /examples/workflow-event-based-service/.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 | -------------------------------------------------------------------------------- /examples/workflow-event-based-service/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@xstate/example-workflow-event-based-service", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "start": "vite-node --script ./main.ts", 8 | "build": "tsc && vite build", 9 | "preview": "vite preview" 10 | }, 11 | "devDependencies": { 12 | "typescript": "^5.8.3", 13 | "vite": "^5.4.19", 14 | "vite-node": "^0.31.4" 15 | }, 16 | "dependencies": { 17 | "xstate": "^5.19.4" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /examples/workflow-event-based-service/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2020", 4 | "useDefineForClassFields": true, 5 | "module": "ESNext", 6 | "lib": ["ES2020", "DOM", "DOM.Iterable"], 7 | "skipLibCheck": true, 8 | 9 | /* Bundler mode */ 10 | "moduleResolution": "bundler", 11 | "allowImportingTsExtensions": true, 12 | "resolveJsonModule": true, 13 | "isolatedModules": true, 14 | "noEmit": true, 15 | 16 | /* Linting */ 17 | "strict": true, 18 | "noUnusedLocals": true, 19 | "noUnusedParameters": true, 20 | "noFallthroughCasesInSwitch": true 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /examples/workflow-event-based/.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 | -------------------------------------------------------------------------------- /examples/workflow-event-based/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@xstate/example-workflow-event-based", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "start": "vite-node --script ./main.ts", 8 | "build": "tsc && vite build", 9 | "preview": "vite preview" 10 | }, 11 | "devDependencies": { 12 | "typescript": "^5.8.3", 13 | "vite": "^5.4.19", 14 | "vite-node": "^0.31.4" 15 | }, 16 | "dependencies": { 17 | "xstate": "^5.19.4" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /examples/workflow-event-based/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2020", 4 | "useDefineForClassFields": true, 5 | "module": "ESNext", 6 | "lib": ["ES2020", "DOM", "DOM.Iterable"], 7 | "skipLibCheck": true, 8 | 9 | /* Bundler mode */ 10 | "moduleResolution": "bundler", 11 | "allowImportingTsExtensions": true, 12 | "resolveJsonModule": true, 13 | "isolatedModules": true, 14 | "noEmit": true, 15 | 16 | /* Linting */ 17 | "strict": true, 18 | "noUnusedLocals": true, 19 | "noUnusedParameters": true, 20 | "noFallthroughCasesInSwitch": true 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /examples/workflow-event-greeting/.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 | -------------------------------------------------------------------------------- /examples/workflow-event-greeting/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@xstate/example-workflow-event-greeting", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "start": "vite-node --script ./main.ts", 8 | "build": "tsc && vite build", 9 | "preview": "vite preview" 10 | }, 11 | "devDependencies": { 12 | "typescript": "^5.8.3", 13 | "vite": "^5.4.19", 14 | "vite-node": "^0.31.4" 15 | }, 16 | "dependencies": { 17 | "xstate": "^5.19.4" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /examples/workflow-event-greeting/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2020", 4 | "useDefineForClassFields": true, 5 | "module": "ESNext", 6 | "lib": ["ES2020", "DOM", "DOM.Iterable"], 7 | "skipLibCheck": true, 8 | 9 | /* Bundler mode */ 10 | "moduleResolution": "bundler", 11 | "allowImportingTsExtensions": true, 12 | "resolveJsonModule": true, 13 | "isolatedModules": true, 14 | "noEmit": true, 15 | 16 | /* Linting */ 17 | "strict": true, 18 | "noUnusedLocals": true, 19 | "noUnusedParameters": true, 20 | "noFallthroughCasesInSwitch": true 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /examples/workflow-filling-water/.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 | -------------------------------------------------------------------------------- /examples/workflow-filling-water/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@xstate/example-workflow-filling-water", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "start": "vite-node --script ./main.ts", 8 | "build": "tsc && vite build", 9 | "preview": "vite preview" 10 | }, 11 | "devDependencies": { 12 | "typescript": "^5.8.3", 13 | "vite": "^5.4.19", 14 | "vite-node": "^0.31.4" 15 | }, 16 | "dependencies": { 17 | "cockatiel": "^3.2.1", 18 | "xstate": "^5.19.4" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /examples/workflow-filling-water/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2020", 4 | "useDefineForClassFields": true, 5 | "module": "ESNext", 6 | "lib": ["ES2020", "DOM", "DOM.Iterable"], 7 | "skipLibCheck": true, 8 | 9 | /* Bundler mode */ 10 | "moduleResolution": "bundler", 11 | "allowImportingTsExtensions": true, 12 | "resolveJsonModule": true, 13 | "isolatedModules": true, 14 | "noEmit": true, 15 | 16 | /* Linting */ 17 | "strict": true, 18 | "noUnusedLocals": true, 19 | "noUnusedParameters": true, 20 | "noFallthroughCasesInSwitch": true 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /examples/workflow-finalize-college-app/.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 | -------------------------------------------------------------------------------- /examples/workflow-finalize-college-app/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@xstate/example-workflow-finalize-college-app", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "start": "vite-node --script ./main.ts", 8 | "build": "tsc && vite build", 9 | "preview": "vite preview" 10 | }, 11 | "devDependencies": { 12 | "typescript": "^5.8.3", 13 | "vite": "^5.4.19", 14 | "vite-node": "^0.31.4" 15 | }, 16 | "dependencies": { 17 | "xstate": "^5.19.4" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /examples/workflow-finalize-college-app/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2020", 4 | "useDefineForClassFields": true, 5 | "module": "ESNext", 6 | "lib": ["ES2020", "DOM", "DOM.Iterable"], 7 | "skipLibCheck": true, 8 | 9 | /* Bundler mode */ 10 | "moduleResolution": "bundler", 11 | "allowImportingTsExtensions": true, 12 | "resolveJsonModule": true, 13 | "isolatedModules": true, 14 | "noEmit": true, 15 | 16 | /* Linting */ 17 | "strict": true, 18 | "noUnusedLocals": true, 19 | "noUnusedParameters": true, 20 | "noFallthroughCasesInSwitch": true 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /examples/workflow-greeting/.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 | -------------------------------------------------------------------------------- /examples/workflow-greeting/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@xstate/example-workflow-greeting", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "start": "vite-node --script ./main.ts", 8 | "build": "tsc && vite build", 9 | "preview": "vite preview" 10 | }, 11 | "devDependencies": { 12 | "typescript": "^5.8.3", 13 | "vite": "^5.4.19", 14 | "vite-node": "^0.31.4" 15 | }, 16 | "dependencies": { 17 | "xstate": "^5.19.4" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /examples/workflow-greeting/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2020", 4 | "useDefineForClassFields": true, 5 | "module": "ESNext", 6 | "lib": ["ES2020", "DOM", "DOM.Iterable"], 7 | "skipLibCheck": true, 8 | 9 | /* Bundler mode */ 10 | "moduleResolution": "bundler", 11 | "allowImportingTsExtensions": true, 12 | "resolveJsonModule": true, 13 | "isolatedModules": true, 14 | "noEmit": true, 15 | 16 | /* Linting */ 17 | "strict": true, 18 | "noUnusedLocals": true, 19 | "noUnusedParameters": true, 20 | "noFallthroughCasesInSwitch": true 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /examples/workflow-hello/.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 | -------------------------------------------------------------------------------- /examples/workflow-hello/main.ts: -------------------------------------------------------------------------------- 1 | import { createMachine, createActor } from 'xstate'; 2 | 3 | // https://github.com/serverlessworkflow/specification/tree/main/examples#hello-world-example 4 | export const workflow = createMachine({ 5 | id: 'helloworld', 6 | initial: 'Hello State', 7 | states: { 8 | 'Hello State': { 9 | type: 'final', 10 | output: { 11 | result: 'Hello World!' 12 | } 13 | } 14 | } 15 | }); 16 | 17 | const actor = createActor(workflow); 18 | 19 | actor.subscribe({ 20 | complete() { 21 | console.log('workflow completed', actor.getSnapshot().output); 22 | } 23 | }); 24 | 25 | actor.start(); 26 | -------------------------------------------------------------------------------- /examples/workflow-hello/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@xstate/example-workflow-hello", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "start": "vite-node --script ./main.ts", 8 | "build": "tsc && vite build", 9 | "preview": "vite preview" 10 | }, 11 | "devDependencies": { 12 | "typescript": "^5.8.3", 13 | "vite": "^4.5.14", 14 | "vite-node": "^0.31.4" 15 | }, 16 | "dependencies": { 17 | "xstate": "^5.19.4" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /examples/workflow-hello/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2020", 4 | "useDefineForClassFields": true, 5 | "module": "ESNext", 6 | "lib": ["ES2020", "DOM", "DOM.Iterable"], 7 | "skipLibCheck": true, 8 | 9 | /* Bundler mode */ 10 | "moduleResolution": "bundler", 11 | "allowImportingTsExtensions": true, 12 | "resolveJsonModule": true, 13 | "isolatedModules": true, 14 | "noEmit": true, 15 | 16 | /* Linting */ 17 | "strict": true, 18 | "noUnusedLocals": true, 19 | "noUnusedParameters": true, 20 | "noFallthroughCasesInSwitch": true 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /examples/workflow-math-problem/.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 | -------------------------------------------------------------------------------- /examples/workflow-math-problem/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@xstate/example-workflow-math-problem", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "start": "vite-node --script ./main.ts", 8 | "build": "tsc && vite build", 9 | "preview": "vite preview" 10 | }, 11 | "devDependencies": { 12 | "typescript": "^5.8.3", 13 | "vite": "^4.5.14", 14 | "vite-node": "^0.31.4" 15 | }, 16 | "dependencies": { 17 | "xstate": "^5.19.4" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /examples/workflow-math-problem/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2020", 4 | "useDefineForClassFields": true, 5 | "module": "ESNext", 6 | "lib": ["ES2020", "DOM", "DOM.Iterable"], 7 | "skipLibCheck": true, 8 | 9 | /* Bundler mode */ 10 | "moduleResolution": "bundler", 11 | "allowImportingTsExtensions": true, 12 | "resolveJsonModule": true, 13 | "isolatedModules": true, 14 | "noEmit": true, 15 | 16 | /* Linting */ 17 | "strict": true, 18 | "noUnusedLocals": true, 19 | "noUnusedParameters": true, 20 | "noFallthroughCasesInSwitch": true 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /examples/workflow-media-scanner/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@xstate/example-workflow-media-scanner", 3 | "version": "1.0.0", 4 | "main": "index.js", 5 | "license": "MIT", 6 | "scripts": { 7 | "start": "ts-node src/index.ts" 8 | }, 9 | "dependencies": { 10 | "@types/node": "^20.17.57", 11 | "fs-extra": "^11.3.0", 12 | "mv": "^2.1.1", 13 | "node-ffprobe": "^3.0.0", 14 | "ts-node": "^10.9.2", 15 | "typescript": "^5.8.3", 16 | "winston": "^3.17.0", 17 | "xstate": "^5.19.4" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /examples/workflow-media-scanner/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "module": "commonjs", 4 | "esModuleInterop": true, 5 | "target": "es6", 6 | "moduleResolution": "node", 7 | "sourceMap": true, 8 | "outDir": "dist" 9 | }, 10 | "lib": ["es2020"] 11 | } 12 | -------------------------------------------------------------------------------- /examples/workflow-monitor-job/.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 | -------------------------------------------------------------------------------- /examples/workflow-monitor-job/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@xstate/example-workflow-monitor-job", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "start": "vite-node --script ./main.ts", 8 | "build": "tsc && vite build", 9 | "preview": "vite preview" 10 | }, 11 | "devDependencies": { 12 | "typescript": "^5.8.3", 13 | "vite": "^4.5.14", 14 | "vite-node": "^0.31.4" 15 | }, 16 | "dependencies": { 17 | "xstate": "^5.19.4" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /examples/workflow-monitor-job/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2020", 4 | "useDefineForClassFields": true, 5 | "module": "ESNext", 6 | "lib": ["ES2020", "DOM", "DOM.Iterable"], 7 | "skipLibCheck": true, 8 | 9 | /* Bundler mode */ 10 | "moduleResolution": "bundler", 11 | "allowImportingTsExtensions": true, 12 | "resolveJsonModule": true, 13 | "isolatedModules": true, 14 | "noEmit": true, 15 | 16 | /* Linting */ 17 | "strict": true, 18 | "noUnusedLocals": true, 19 | "noUnusedParameters": true, 20 | "noFallthroughCasesInSwitch": true 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /examples/workflow-monitor-patient/.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 | -------------------------------------------------------------------------------- /examples/workflow-monitor-patient/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@xstate/example-workflow-monitor-patient", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "start": "vite-node --script ./main.ts", 8 | "build": "tsc && vite build", 9 | "preview": "vite preview" 10 | }, 11 | "devDependencies": { 12 | "typescript": "^5.8.3", 13 | "vite": "^4.5.14", 14 | "vite-node": "^0.31.4" 15 | }, 16 | "dependencies": { 17 | "xstate": "^5.19.4" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /examples/workflow-monitor-patient/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2020", 4 | "useDefineForClassFields": true, 5 | "module": "ESNext", 6 | "lib": ["ES2020", "DOM", "DOM.Iterable"], 7 | "skipLibCheck": true, 8 | 9 | /* Bundler mode */ 10 | "moduleResolution": "bundler", 11 | "allowImportingTsExtensions": true, 12 | "resolveJsonModule": true, 13 | "isolatedModules": true, 14 | "noEmit": true, 15 | 16 | /* Linting */ 17 | "strict": true, 18 | "noUnusedLocals": true, 19 | "noUnusedParameters": true, 20 | "noFallthroughCasesInSwitch": true 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /examples/workflow-new-patient-onboarding/.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 | -------------------------------------------------------------------------------- /examples/workflow-new-patient-onboarding/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@xstate/example-workflow-new-patient-onboarding", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "start": "vite-node --script ./main.ts", 8 | "build": "tsc && vite build", 9 | "preview": "vite preview" 10 | }, 11 | "devDependencies": { 12 | "typescript": "^5.8.3", 13 | "vite": "^4.5.14", 14 | "vite-node": "^0.31.4" 15 | }, 16 | "dependencies": { 17 | "cockatiel": "^3.2.1", 18 | "xstate": "^5.19.4" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /examples/workflow-new-patient-onboarding/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2020", 4 | "useDefineForClassFields": true, 5 | "module": "ESNext", 6 | "lib": ["ES2020", "DOM", "DOM.Iterable"], 7 | "skipLibCheck": true, 8 | 9 | /* Bundler mode */ 10 | "moduleResolution": "bundler", 11 | "allowImportingTsExtensions": true, 12 | "resolveJsonModule": true, 13 | "isolatedModules": true, 14 | "noEmit": true, 15 | 16 | /* Linting */ 17 | "strict": true, 18 | "noUnusedLocals": true, 19 | "noUnusedParameters": true, 20 | "noFallthroughCasesInSwitch": true 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /examples/workflow-parallel/.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 | -------------------------------------------------------------------------------- /examples/workflow-parallel/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@xstate/example-workflow-parallel", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "start": "vite-node --script ./main.ts", 8 | "build": "tsc && vite build", 9 | "preview": "vite preview" 10 | }, 11 | "devDependencies": { 12 | "typescript": "^5.8.3", 13 | "vite": "^4.5.14", 14 | "vite-node": "^0.31.4" 15 | }, 16 | "dependencies": { 17 | "xstate": "^5.19.4" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /examples/workflow-parallel/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2020", 4 | "useDefineForClassFields": true, 5 | "module": "ESNext", 6 | "lib": ["ES2020", "DOM", "DOM.Iterable"], 7 | "skipLibCheck": true, 8 | 9 | /* Bundler mode */ 10 | "moduleResolution": "bundler", 11 | "allowImportingTsExtensions": true, 12 | "resolveJsonModule": true, 13 | "isolatedModules": true, 14 | "noEmit": true, 15 | 16 | /* Linting */ 17 | "strict": true, 18 | "noUnusedLocals": true, 19 | "noUnusedParameters": true, 20 | "noFallthroughCasesInSwitch": true 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /examples/workflow-provision-orders/.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 | -------------------------------------------------------------------------------- /examples/workflow-provision-orders/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@xstate/example-workflow-provision-orders", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "start": "vite-node --script ./main.ts", 8 | "build": "tsc && vite build", 9 | "preview": "vite preview" 10 | }, 11 | "devDependencies": { 12 | "typescript": "^5.8.3", 13 | "vite": "^4.5.14", 14 | "vite-node": "^0.31.4" 15 | }, 16 | "dependencies": { 17 | "xstate": "^5.19.4" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /examples/workflow-provision-orders/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2020", 4 | "useDefineForClassFields": true, 5 | "module": "ESNext", 6 | "lib": ["ES2020", "DOM", "DOM.Iterable"], 7 | "skipLibCheck": true, 8 | 9 | /* Bundler mode */ 10 | "moduleResolution": "bundler", 11 | "allowImportingTsExtensions": true, 12 | "resolveJsonModule": true, 13 | "isolatedModules": true, 14 | "noEmit": true, 15 | 16 | /* Linting */ 17 | "strict": true, 18 | "noUnusedLocals": true, 19 | "noUnusedParameters": true, 20 | "noFallthroughCasesInSwitch": true 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /examples/workflow-purchase-order-deadline/.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 | -------------------------------------------------------------------------------- /examples/workflow-purchase-order-deadline/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@xstate/example-workflow-purchase-order-deadline", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "start": "vite-node --script ./main.ts", 8 | "build": "tsc && vite build", 9 | "preview": "vite preview" 10 | }, 11 | "devDependencies": { 12 | "typescript": "^5.8.3", 13 | "vite": "^4.5.14", 14 | "vite-node": "^0.31.4" 15 | }, 16 | "dependencies": { 17 | "cockatiel": "^3.2.1", 18 | "xstate": "^5.19.4" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /examples/workflow-purchase-order-deadline/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2020", 4 | "useDefineForClassFields": true, 5 | "module": "ESNext", 6 | "lib": ["ES2020", "DOM", "DOM.Iterable"], 7 | "skipLibCheck": true, 8 | 9 | /* Bundler mode */ 10 | "moduleResolution": "bundler", 11 | "allowImportingTsExtensions": true, 12 | "resolveJsonModule": true, 13 | "isolatedModules": true, 14 | "noEmit": true, 15 | 16 | /* Linting */ 17 | "strict": true, 18 | "noUnusedLocals": true, 19 | "noUnusedParameters": true, 20 | "noFallthroughCasesInSwitch": true 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /examples/workflow-reusing-functions/.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 | -------------------------------------------------------------------------------- /examples/workflow-reusing-functions/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@xstate/example-workflow-reusing-functions", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "start": "vite-node --script ./main.ts", 8 | "build": "tsc && vite build", 9 | "preview": "vite preview" 10 | }, 11 | "devDependencies": { 12 | "typescript": "^5.8.3", 13 | "vite": "^4.5.14", 14 | "vite-node": "^0.31.4" 15 | }, 16 | "dependencies": { 17 | "xstate": "^5.19.4" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /examples/workflow-reusing-functions/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2020", 4 | "useDefineForClassFields": true, 5 | "module": "ESNext", 6 | "lib": ["ES2020", "DOM", "DOM.Iterable"], 7 | "skipLibCheck": true, 8 | 9 | /* Bundler mode */ 10 | "moduleResolution": "bundler", 11 | "allowImportingTsExtensions": true, 12 | "resolveJsonModule": true, 13 | "isolatedModules": true, 14 | "noEmit": true, 15 | 16 | /* Linting */ 17 | "strict": true, 18 | "noUnusedLocals": true, 19 | "noUnusedParameters": true, 20 | "noFallthroughCasesInSwitch": true 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /examples/workflow-send-cloudevent/.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 | -------------------------------------------------------------------------------- /examples/workflow-send-cloudevent/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@xstate/example-workflow-send-cloudevent", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "start": "vite-node --script ./main.ts", 8 | "build": "tsc && vite build", 9 | "preview": "vite preview" 10 | }, 11 | "devDependencies": { 12 | "typescript": "^5.8.3", 13 | "vite": "^4.5.14", 14 | "vite-node": "^0.31.4" 15 | }, 16 | "dependencies": { 17 | "xstate": "^5.19.4" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /examples/workflow-send-cloudevent/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2020", 4 | "useDefineForClassFields": true, 5 | "module": "ESNext", 6 | "lib": ["ES2020", "DOM", "DOM.Iterable"], 7 | "skipLibCheck": true, 8 | 9 | /* Bundler mode */ 10 | "moduleResolution": "bundler", 11 | "allowImportingTsExtensions": true, 12 | "resolveJsonModule": true, 13 | "isolatedModules": true, 14 | "noEmit": true, 15 | 16 | /* Linting */ 17 | "strict": true, 18 | "noUnusedLocals": true, 19 | "noUnusedParameters": true, 20 | "noFallthroughCasesInSwitch": true 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /packages/core/.gitignore: -------------------------------------------------------------------------------- 1 | es 2 | dist 3 | lib 4 | node_modules 5 | -------------------------------------------------------------------------------- /packages/core/actions/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "dist/xstate-actions.cjs.js", 3 | "module": "dist/xstate-actions.esm.js", 4 | "umd:main": "dist/xstate-actions.umd.min.js", 5 | "preconstruct": { 6 | "umdName": "XStateActions" 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /packages/core/actor/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "dist/xstate-actor.cjs.js", 3 | "module": "dist/xstate-actor.esm.js" 4 | } 5 | -------------------------------------------------------------------------------- /packages/core/actors/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "dist/xstate-actors.cjs.js", 3 | "module": "dist/xstate-actors.esm.js", 4 | "umd:main": "dist/xstate-actors.umd.min.js", 5 | "preconstruct": { 6 | "umdName": "XStateActors" 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /packages/core/dev/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "dist/xstate-dev.cjs.js", 3 | "module": "dist/xstate-dev.esm.js", 4 | "umd:main": "dist/xstate-dev.umd.min.js", 5 | "preconstruct": { 6 | "umdName": "XStateDev" 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /packages/core/guards/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "dist/xstate-guards.cjs.js", 3 | "module": "dist/xstate-guards.esm.js", 4 | "umd:main": "dist/xstate-guards.umd.min.js", 5 | "preconstruct": { 6 | "umdName": "XStateGuards" 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /packages/core/invoke/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "dist/xstate-invoke.cjs.js", 3 | "module": "dist/xstate-invoke.esm.js" 4 | } 5 | -------------------------------------------------------------------------------- /packages/core/src/constants.ts: -------------------------------------------------------------------------------- 1 | export const STATE_DELIMITER = '.'; 2 | export const TARGETLESS_KEY = ''; 3 | export const NULL_EVENT = ''; 4 | export const STATE_IDENTIFIER = '#'; 5 | export const WILDCARD = '*'; 6 | export const XSTATE_INIT = 'xstate.init'; 7 | export const XSTATE_ERROR = 'xstate.error'; 8 | export const XSTATE_STOP = 'xstate.stop'; 9 | -------------------------------------------------------------------------------- /packages/core/src/false.ts: -------------------------------------------------------------------------------- 1 | export default false; 2 | -------------------------------------------------------------------------------- /packages/core/src/memo.ts: -------------------------------------------------------------------------------- 1 | const cache = new WeakMap(); 2 | 3 | export function memo(object: any, key: string, fn: () => T): T { 4 | let memoizedData = cache.get(object); 5 | 6 | if (!memoizedData) { 7 | memoizedData = { [key]: fn() }; 8 | cache.set(object, memoizedData); 9 | } else if (!(key in memoizedData)) { 10 | memoizedData[key] = fn(); 11 | } 12 | 13 | return memoizedData[key]; 14 | } 15 | -------------------------------------------------------------------------------- /packages/core/src/reportUnhandledError.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * This function makes sure that unhandled errors are thrown in a separate 3 | * macrotask. It allows those errors to be detected by global error handlers and 4 | * reported to bug tracking services without interrupting our own stack of 5 | * execution. 6 | * 7 | * @param err Error to be thrown 8 | */ 9 | export function reportUnhandledError(err: unknown) { 10 | setTimeout(() => { 11 | throw err; 12 | }); 13 | } 14 | -------------------------------------------------------------------------------- /packages/core/src/symbolObservable.ts: -------------------------------------------------------------------------------- 1 | export const symbolObservable: typeof Symbol.observable = (() => 2 | (typeof Symbol === 'function' && Symbol.observable) || 3 | '@@observable')() as any; 4 | -------------------------------------------------------------------------------- /packages/core/src/true.ts: -------------------------------------------------------------------------------- 1 | export default true; 2 | -------------------------------------------------------------------------------- /packages/core/test/fixtures/scxml/assign-current-small-step/test0.json: -------------------------------------------------------------------------------- 1 | { 2 | "initialConfiguration": ["a"], 3 | "events": [ 4 | { 5 | "event": { "name": "t" }, 6 | "nextConfiguration": ["c"] 7 | } 8 | ] 9 | } 10 | -------------------------------------------------------------------------------- /packages/xstate-graph/src/actorScope.ts: -------------------------------------------------------------------------------- 1 | import { AnyActorScope, createEmptyActor } from 'xstate'; 2 | 3 | export function createMockActorScope(): AnyActorScope { 4 | const emptyActor = createEmptyActor(); 5 | return { 6 | self: emptyActor, 7 | logger: console.log, 8 | id: '', 9 | sessionId: Math.random().toString(32).slice(2), 10 | defer: () => {}, 11 | system: emptyActor.system, // TODO: mock system? 12 | stopChild: () => {}, 13 | emit: () => {}, 14 | actionExecutor: () => {} 15 | }; 16 | } 17 | -------------------------------------------------------------------------------- /packages/xstate-graph/src/index.ts: -------------------------------------------------------------------------------- 1 | export { TestModel, createTestModel } from './TestModel.ts'; 2 | export { adjacencyMapToArray, getAdjacencyMap } from './adjacency.ts'; 3 | export { 4 | getStateNodes, 5 | joinPaths, 6 | serializeEvent, 7 | serializeSnapshot, 8 | toDirectedGraph 9 | } from './graph.ts'; 10 | export type { AdjacencyMap, AdjacencyValue } from './graph.ts'; 11 | export { getPathsFromEvents } from './pathFromEvents.ts'; 12 | export * from './pathGenerators.ts'; 13 | export { getShortestPaths } from './shortestPaths.ts'; 14 | export { getSimplePaths } from './simplePaths.ts'; 15 | export * from './types.ts'; 16 | -------------------------------------------------------------------------------- /packages/xstate-inspect/assets/inspector.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statelyai/xstate/f9d04bbfb0d043da0451562531437f51ca8c8b07/packages/xstate-inspect/assets/inspector.png -------------------------------------------------------------------------------- /packages/xstate-inspect/server/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "dist/xstate-inspect-server.cjs.js", 3 | "module": "dist/xstate-inspect-server.esm.js" 4 | } 5 | -------------------------------------------------------------------------------- /packages/xstate-inspect/src/index.ts: -------------------------------------------------------------------------------- 1 | export { 2 | inspect, 3 | createWindowReceiver, 4 | createWebSocketReceiver, 5 | createDevTools 6 | } from './browser.ts'; 7 | export * from './types.ts'; 8 | -------------------------------------------------------------------------------- /packages/xstate-react/src/false.ts: -------------------------------------------------------------------------------- 1 | export default false; 2 | -------------------------------------------------------------------------------- /packages/xstate-react/src/index.ts: -------------------------------------------------------------------------------- 1 | export { createActorContext } from './createActorContext.ts'; 2 | export { shallowEqual } from './shallowEqual.ts'; 3 | export { useActor } from './useActor.ts'; 4 | export { useActorRef } from './useActorRef.ts'; 5 | export { useSelector } from './useSelector.ts'; 6 | 7 | // deprecated 8 | export { useMachine } from './useMachine.ts'; 9 | -------------------------------------------------------------------------------- /packages/xstate-react/src/true.ts: -------------------------------------------------------------------------------- 1 | export default true; 2 | -------------------------------------------------------------------------------- /packages/xstate-solid/src/index.ts: -------------------------------------------------------------------------------- 1 | export { useActor } from './useActor.ts'; 2 | export { useActorRef } from './useActorRef.ts'; 3 | export { useMachine } from './useMachine.ts'; 4 | export { fromActorRef } from './fromActorRef.ts'; 5 | -------------------------------------------------------------------------------- /packages/xstate-solid/src/useMachine.ts: -------------------------------------------------------------------------------- 1 | import type { 2 | ActorOptions, 3 | AnyStateMachine, 4 | ConditionalRequired, 5 | IsNotNever, 6 | RequiredActorOptionsKeys 7 | } from 'xstate'; 8 | import { useActor } from './useActor.ts'; 9 | 10 | /** @alias useActor */ 11 | export function useMachine( 12 | machine: TMachine, 13 | ...[options]: ConditionalRequired< 14 | [ 15 | options?: ActorOptions & { 16 | [K in RequiredActorOptionsKeys]: unknown; 17 | } 18 | ], 19 | IsNotNever> 20 | > 21 | ) { 22 | return useActor(machine, options); 23 | } 24 | -------------------------------------------------------------------------------- /packages/xstate-store/react/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "dist/xstate-store-react.cjs.js", 3 | "module": "dist/xstate-store-react.esm.js" 4 | } 5 | -------------------------------------------------------------------------------- /packages/xstate-store/solid/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "dist/xstate-store-solid.cjs.js", 3 | "module": "dist/xstate-store-solid.esm.js" 4 | } 5 | -------------------------------------------------------------------------------- /packages/xstate-svelte/src/index.ts: -------------------------------------------------------------------------------- 1 | export { useActor } from './useActor.ts'; 2 | export { useActorRef } from './useActorRef.ts'; 3 | export { useMachine } from './useMachine.ts'; 4 | export { useSelector } from './useSelector.ts'; 5 | -------------------------------------------------------------------------------- /packages/xstate-svelte/svelte.config.js: -------------------------------------------------------------------------------- 1 | const { babel } = require('svelte-preprocess'); 2 | 3 | module.exports = { 4 | preprocess: [ 5 | babel({ 6 | rootMode: 'upward' 7 | }) 8 | ] 9 | }; 10 | -------------------------------------------------------------------------------- /packages/xstate-svelte/test/UseActorNonPersistentSubscriptionChild.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 |
7 |
{$snapshot.context.count}
8 | 14 |
15 | -------------------------------------------------------------------------------- /packages/xstate-svelte/test/interpreterAsReadable.svelte: -------------------------------------------------------------------------------- 1 | 21 | 22 |
$count
23 | -------------------------------------------------------------------------------- /packages/xstate-svelte/test/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@tsconfig/svelte/tsconfig.json", 3 | "compilerOptions": { 4 | "strict": true, 5 | "types": ["jest", "node"], 6 | "moduleResolution": "node16", 7 | "module": "node16", 8 | "allowImportingTsExtensions": true, 9 | "noEmit": true, 10 | "verbatimModuleSyntax": false 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /packages/xstate-vue/src/false.ts: -------------------------------------------------------------------------------- 1 | export default false; 2 | -------------------------------------------------------------------------------- /packages/xstate-vue/src/index.ts: -------------------------------------------------------------------------------- 1 | export { useActor } from './useActor.ts'; 2 | export { useActorRef } from './useActorRef.ts'; 3 | export { useMachine } from './useMachine.ts'; 4 | export { useSelector } from './useSelector.ts'; 5 | -------------------------------------------------------------------------------- /packages/xstate-vue/src/true.ts: -------------------------------------------------------------------------------- 1 | export default true; 2 | -------------------------------------------------------------------------------- /packages/xstate-vue/test/UseSelectorWithTransitionLogic.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /packages/xstate-vue/test/vue-shim.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.vue' { 2 | import { ComponentOptions } from 'vue'; 3 | const component: ComponentOptions; 4 | export default component; 5 | } 6 | -------------------------------------------------------------------------------- /patches/@vue__test-utils@2.4.6.patch: -------------------------------------------------------------------------------- 1 | diff --git a/package.json b/package.json 2 | index f03807161632cb489eecf6514616f25436c043a5..c3760d607fed88b81f2989fb7e4b619e78597f3d 100644 3 | --- a/package.json 4 | +++ b/package.json 5 | @@ -11,8 +11,8 @@ 6 | "types": "./dist/index.d.ts", 7 | "node": "./dist/vue-test-utils.cjs.js", 8 | "import": "./dist/vue-test-utils.esm-bundler.mjs", 9 | - "browser": "./dist/vue-test-utils.browser.js", 10 | "require": "./dist/vue-test-utils.cjs.js", 11 | + "browser": "./dist/vue-test-utils.browser.js", 12 | "default": "./dist/vue-test-utils.cjs.js" 13 | }, 14 | "./package.json": "./package.json" 15 | -------------------------------------------------------------------------------- /patches/solid-testing-library@0.3.0.patch: -------------------------------------------------------------------------------- 1 | diff --git a/package.json b/package.json 2 | index 684d655831a193fc24f94b28f734d5f62b404685..410ba5f622c32c05e65e418c4ee328bc69b8b05c 100644 3 | --- a/package.json 4 | +++ b/package.json 5 | @@ -7,6 +7,7 @@ 6 | "types": "./dist/index.d.ts", 7 | "exports": { 8 | ".": { 9 | + "types": "./dist/index.d.ts", 10 | "require": "./dist/index.cjs", 11 | "import": "./dist/index.mjs" 12 | } 13 | -------------------------------------------------------------------------------- /pnpm-workspace.yaml: -------------------------------------------------------------------------------- 1 | packages: 2 | - 'docs' 3 | - 'packages/*' 4 | - 'scripts/*' 5 | -------------------------------------------------------------------------------- /scripts/ensure-pnpm.js: -------------------------------------------------------------------------------- 1 | if (!/pnpm\/9/.test(process.env.npm_config_user_agent)) { 2 | throw new Error('Please use `pnpm@^9` for installs.'); 3 | } 4 | -------------------------------------------------------------------------------- /scripts/jest-resolver.js: -------------------------------------------------------------------------------- 1 | /** @type {import('jest-resolve').SyncResolver} */ 2 | module.exports = (path, options) => { 3 | return options.defaultResolver(path, { 4 | ...options, 5 | conditions: Array.from( 6 | new Set([...(options.conditions || []), 'development', 'require']) 7 | ) 8 | }); 9 | }; 10 | -------------------------------------------------------------------------------- /scripts/jest-utils/console-spies.js: -------------------------------------------------------------------------------- 1 | const spyOnConsole = (method) => 2 | jest.spyOn(console, method).mockImplementation(() => {}); 3 | 4 | module.exports.spyOnConsole = spyOnConsole; 5 | 6 | module.exports.consoleSpies = { 7 | error: spyOnConsole('error'), 8 | info: spyOnConsole('info'), 9 | log: spyOnConsole('log'), 10 | warn: spyOnConsole('warn') 11 | }; 12 | -------------------------------------------------------------------------------- /scripts/jest-utils/index.d.ts: -------------------------------------------------------------------------------- 1 | export declare function sleep(ms: number): Promise; 2 | export declare function clearConsoleMocks(): void; 3 | -------------------------------------------------------------------------------- /scripts/jest-utils/index.js: -------------------------------------------------------------------------------- 1 | const { consoleSpies } = require('./console-spies'); 2 | 3 | module.exports.clearConsoleMocks = () => 4 | Object.values(consoleSpies).forEach((spy) => spy.mockClear()); 5 | 6 | module.exports.sleep = (ms) => new Promise((res) => setTimeout(res, ms)); 7 | -------------------------------------------------------------------------------- /scripts/jest-utils/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "name": "@xstate-repo/jest-utils", 4 | "version": "0.0.0" 5 | } 6 | -------------------------------------------------------------------------------- /scripts/jest-utils/setup.d.ts: -------------------------------------------------------------------------------- 1 | import 'jest'; 2 | 3 | declare global { 4 | namespace jest { 5 | interface Matchers { 6 | toMatchMockCallsInlineSnapshot(snapshot?: string): R; 7 | } 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /templates/react-ts/.codesandbox/template.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "XState + React", 3 | "description": "Official Stately.ai template for XState v5, React, and TypeScript", 4 | "iconUrl": "https://raw.githubusercontent.com/statelyai/public-assets/main/logos/logomark-white.png", 5 | "tags": ["xstate", "state", "react", "typescript"], 6 | "published": true 7 | } 8 | -------------------------------------------------------------------------------- /templates/react-ts/.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 | -------------------------------------------------------------------------------- /templates/react-ts/README.md: -------------------------------------------------------------------------------- 1 | # XState React TypeScript template 2 | 3 | A starting point template for using XState with React and TypeScript. Create a feedback form using a simple state machine. 4 | 5 | Using [Vite](https://vitejs.dev/) as a build tool and to run the local development server. 6 | 7 | ## [➡️ Open in CodeSandbox](https://codesandbox.io/p/sandbox/github/statelyai/xstate/tree/main/templates/react-ts?file=%2Fsrc%2FfeedbackMachine.ts) 8 | 9 | [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/statelyai/xstate/tree/main/templates/react-ts?file=%2Fsrc%2FfeedbackMachine.ts) 10 | -------------------------------------------------------------------------------- /templates/react-ts/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React + TS 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /templates/react-ts/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-ts", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "tsc && vite build", 9 | "preview": "vite preview" 10 | }, 11 | "dependencies": { 12 | "@statelyai/inspect": "^0.2.5", 13 | "@xstate/react": "^4.1.3", 14 | "react": "^18.3.1", 15 | "react-dom": "^18.3.1", 16 | "xstate": "^5.19.4" 17 | }, 18 | "devDependencies": { 19 | "@types/react": "^18.3.23", 20 | "@types/react-dom": "^18.3.7", 21 | "@vitejs/plugin-react": "^4.5.0", 22 | "typescript": "^5.8.3", 23 | "vite": "^5.4.19" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /templates/react-ts/src/main.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import App from './App'; 4 | import './index.css'; 5 | 6 | ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render( 7 | 8 | 9 | 10 | ); 11 | -------------------------------------------------------------------------------- /templates/react-ts/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /templates/react-ts/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "module": "ESNext", 5 | "moduleResolution": "Node", 6 | "allowSyntheticDefaultImports": true 7 | }, 8 | "include": ["vite.config.ts"] 9 | } 10 | -------------------------------------------------------------------------------- /templates/react-ts/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 | -------------------------------------------------------------------------------- /templates/svelte-ts/.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 | -------------------------------------------------------------------------------- /templates/svelte-ts/.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": ["svelte.svelte-vscode"] 3 | } 4 | -------------------------------------------------------------------------------- /templates/svelte-ts/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + Svelte + TS 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /templates/svelte-ts/src/main.ts: -------------------------------------------------------------------------------- 1 | import './index.css'; 2 | import './app.css'; 3 | import App from './App.svelte'; 4 | 5 | const app = new App({ 6 | target: document.getElementById('app')! 7 | }); 8 | 9 | export default app; 10 | -------------------------------------------------------------------------------- /templates/svelte-ts/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | -------------------------------------------------------------------------------- /templates/svelte-ts/svelte.config.js: -------------------------------------------------------------------------------- 1 | import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'; 2 | 3 | export default { 4 | // Consult https://svelte.dev/docs#compile-time-svelte-preprocess 5 | // for more information about preprocessors 6 | preprocess: vitePreprocess() 7 | }; 8 | -------------------------------------------------------------------------------- /templates/svelte-ts/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "skipLibCheck": true, 5 | "module": "ESNext", 6 | "moduleResolution": "bundler" 7 | }, 8 | "include": ["vite.config.ts"] 9 | } 10 | -------------------------------------------------------------------------------- /templates/svelte-ts/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite'; 2 | import { svelte } from '@sveltejs/vite-plugin-svelte'; 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [svelte()] 7 | }); 8 | -------------------------------------------------------------------------------- /templates/vanilla-ts/.codesandbox/template.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "XState", 3 | "description": "Official Stately.ai template for XState v5, TypeScript", 4 | "iconUrl": "https://raw.githubusercontent.com/statelyai/public-assets/main/logos/logomark-white.png", 5 | "tags": ["xstate", "state", "typescript"], 6 | "published": true 7 | } 8 | -------------------------------------------------------------------------------- /templates/vanilla-ts/.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 | -------------------------------------------------------------------------------- /templates/vanilla-ts/README.md: -------------------------------------------------------------------------------- 1 | # XState TypeScript template 2 | 3 | A starting point template for using XState with TypeScript. Create feedback form logic using a simple state machine. 4 | 5 | Using [Vite](https://vitejs.dev/) as a build tool and to run the local development server. 6 | 7 | ## [➡️ Open in CodeSandbox](https://codesandbox.io/p/sandbox/github/statelyai/xstate/tree/main/templates/vanilla-ts?file=%2Fsrc%2FfeedbackMachine.ts) 8 | 9 | [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/statelyai/xstate/tree/main/templates/vanilla-ts?file=%2Fsrc%2FfeedbackMachine.ts) 10 | -------------------------------------------------------------------------------- /templates/vanilla-ts/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + TS 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /templates/vanilla-ts/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vanilla-ts", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "tsc && vite build", 9 | "preview": "vite preview" 10 | }, 11 | "devDependencies": { 12 | "typescript": "^5.8.3", 13 | "vite": "^5.4.19" 14 | }, 15 | "dependencies": { 16 | "@statelyai/inspect": "^0.2.5", 17 | "xstate": "^5.19.4" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /templates/vanilla-ts/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /templates/vanilla-ts/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ESNext", 4 | "useDefineForClassFields": true, 5 | "module": "ESNext", 6 | "lib": ["ESNext", "DOM"], 7 | "moduleResolution": "Node", 8 | "strict": true, 9 | "resolveJsonModule": true, 10 | "isolatedModules": true, 11 | "esModuleInterop": true, 12 | "noEmit": true, 13 | "noUnusedLocals": true, 14 | "noUnusedParameters": true, 15 | "noImplicitReturns": true, 16 | "skipLibCheck": true 17 | }, 18 | "include": ["src"] 19 | } 20 | -------------------------------------------------------------------------------- /templates/vue-ts/.codesandbox/template.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "XState + Vue", 3 | "description": "Official Stately.ai template for XState v5, Vue, and TypeScript", 4 | "iconUrl": "https://raw.githubusercontent.com/statelyai/public-assets/main/logos/logomark-white.png", 5 | "tags": ["xstate", "state", "vue", "typescript"], 6 | "published": true 7 | } 8 | -------------------------------------------------------------------------------- /templates/vue-ts/.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 | -------------------------------------------------------------------------------- /templates/vue-ts/.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"] 3 | } 4 | -------------------------------------------------------------------------------- /templates/vue-ts/README.md: -------------------------------------------------------------------------------- 1 | # XState Vue TypeScript template 2 | 3 | A starting point template for using XState with Vue and TypeScript. Create a feedback form using a simple state machine. 4 | 5 | Using [Vite](https://vitejs.dev/) as a build tool and to run the local development server. 6 | 7 | ## [➡️ Open in CodeSandbox](https://codesandbox.io/p/sandbox/github/statelyai/xstate/tree/main/templates/vue-ts?file=%2Fsrc%2FfeedbackMachine.ts) 8 | 9 | [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/statelyai/xstate/tree/main/templates/vue-ts?file=%2Fsrc%2FfeedbackMachine.ts) 10 | -------------------------------------------------------------------------------- /templates/vue-ts/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + Vue + TS 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /templates/vue-ts/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-ts", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vue-tsc && vite build", 9 | "preview": "vite preview" 10 | }, 11 | "dependencies": { 12 | "@statelyai/inspect": "^0.2.5", 13 | "@xstate/vue": "^3.1.4", 14 | "vue": "^3.5.16", 15 | "xstate": "^5.19.4" 16 | }, 17 | "devDependencies": { 18 | "@vitejs/plugin-vue": "^5.2.4", 19 | "typescript": "^5.8.3", 20 | "vite": "^5.4.19", 21 | "vue-tsc": "^1.8.27" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /templates/vue-ts/src/App.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /templates/vue-ts/src/main.ts: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue'; 2 | import './style.css'; 3 | import App from './App.vue'; 4 | 5 | createApp(App).mount('#app'); 6 | -------------------------------------------------------------------------------- /templates/vue-ts/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /templates/vue-ts/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 | -------------------------------------------------------------------------------- /templates/vue-ts/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite'; 2 | import vue from '@vitejs/plugin-vue'; 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [vue()] 7 | }); 8 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "esnext", 4 | "isolatedModules": true, 5 | "moduleResolution": "node16", 6 | "module": "node16", 7 | "allowImportingTsExtensions": true, 8 | "noEmit": true, 9 | "skipLibCheck": true, 10 | "resolveJsonModule": true, 11 | "jsx": "react-jsx", 12 | "lib": ["es2019", "ESNext.Promise", "dom"], 13 | "strict": true, 14 | "stripInternal": true 15 | }, 16 | "exclude": ["**/examples", "**/templates"] 17 | } 18 | --------------------------------------------------------------------------------