Example XState Project: Gas Pump
The gas pump example project uses XState to implement a basic gas pump as if it were an integration of three separate applications, each using a statechart unknown to the other applications, but potentially dependent on them. This was important to prove conceptually for potential use in a multi-team enterprise setting.
This was accomplished by using two separate registries:
- A Statechart Registry for each application's statecharts
- A UI Component Registry to map UI Components (plain HTML & JS - no framework) to available actions
The Statechart Registry is used to assemble a "Super Statechart" to manage shared context and cross-statechart communication. This was easily achieved by virtue of each application's statechart being subjugated to the Super Statechart, which gave each app's statechart a shared context and enabled communication via the
It was also necessary to merge the configuration options, which also provided a rudimentary opportunity to detect conflicts. For example, if two independent statecharts defined a
hasCredit guard, the conflict needed to be detected to fail the formation of the Super Statechart.
XState Tutorials and Presentations
- Working with State Machines in Angular
- Formal Forms with State Machines by David Khourshid | React Next 2019
A model where an actor is the fundamental unit of computation including processing, storage, and communication
The language of the web until WASM takes over
Abstract representations of system state at a given point in time
A visual formalism for complex systems