Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/Glutnix/xstate-vue-calculator
A javascript calculator built with Xstate and Vue
https://github.com/Glutnix/xstate-vue-calculator
calculator calculator-state-machine composition-api state-machine statechart vue xstate xstate-vue xstate-vue-calculator
Last synced: about 1 month ago
JSON representation
A javascript calculator built with Xstate and Vue
- Host: GitHub
- URL: https://github.com/Glutnix/xstate-vue-calculator
- Owner: Glutnix
- Created: 2020-02-03T23:40:51.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2020-02-10T00:38:17.000Z (almost 5 years ago)
- Last Synced: 2024-08-02T09:26:55.267Z (4 months ago)
- Topics: calculator, calculator-state-machine, composition-api, state-machine, statechart, vue, xstate, xstate-vue, xstate-vue-calculator
- Language: JavaScript
- Homepage: https://codesandbox.io/s/github/Glutnix/xstate-vue-calculator
- Size: 145 KB
- Stars: 12
- Watchers: 3
- Forks: 5
- Open Issues: 0
-
Metadata Files:
- Readme: README.MD
Awesome Lists containing this project
- awesome_xstate - Glutnix/xstate-vue-calculator - Calculator (Awesome XState / Projects)
README
# Xstate Vue Calculator
Based on https://github.com/mukeshsoni/statechart-calculator, but upgraded to XState 4.x and moved to Vue 2.x with Vue Composition API.
* [XState 4.x](https://xstate.js.org/docs/)
* [Vue 2.x](https://vuejs.org/v2/guide/)
* [Vue 2.x Composition API](https://github.com/vuejs/composition-api#readme)
* [@xstate/vue add on](https://github.com/davidkpiano/xstate/tree/master/packages/xstate-vue)[![Edit xstate-vue-calculator](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/Glutnix/xstate-vue-calculator/tree/master/?fontsize=14&hidenavigation=1&module=%2Fsrc%2FcalculatorStategraph.js&theme=dark&view=preview)
👀 See the [calculator's state machine on the XState Visualizer](https://xstate.js.org/viz/?gist=06b130cce5e745cf605eee8a8a646de5)
[![Screenshot of the calculator state machine in the Visualizer](xstate-vis.png)](https://xstate.js.org/viz/?gist=06b130cce5e745cf605eee8a8a646de5)