Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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)