This repository implements TodoMVC project (TodoMVC) utilizing XState by David K. and NX
- Clone this repository
- Run
npm install
- Run Angular app:
npx ng serve todos
- Run React app:
npx ng serve todos-react
(you'd need different ports if you run both at the same time) - Check
localhost:{port}
(default to 4200)
xstate
provides a nice APIs to implement State Machine
in the application. Two Machines todosMachine
and todoMachine
are re-used for both Angular and React applications.
The project uses TodoMVC
template and the library todomvc-app-css
for the CSS
.
On the Angular side, this project utilized Observable View Model
pattern to transform the State Machine
context to data to be used on the template with the async
pipe.
The Machines are set up in TodosMachineService
and TodoMachineService
.
On the React side, this project uses React Hooks
and @xstate/react
to wire up the Machines to React components.