Although XState is a very nice library, it is perhaps to complicated for common use cases.
import javascriptStateMachine from 'https://cdn.skypack.dev/javascript-state-machine';
const StateMachine = javascriptStateMachine;
function _Demo () {
var fsm = new StateMachine({
init: 'solid',
transitions: [
{ name: 'melt', from: 'solid', to: 'liquid' },
{ name: 'freeze', from: 'liquid', to: 'solid' },
{ name: 'vaporize', from: 'liquid', to: 'gas' },
{ name: 'condense', from: 'gas', to: 'liquid' }
]
});
return fsm;
}
function App () {
return `
<h1>My App - ${Demo.state}</h1>
<button id="melt" onclick="Demo.melt()">Melt</button>
<button id="freeze" onclick="Demo.freeze()">Freeze</button>
<button id="vaporize" onclick="Demo.vaporize()">Vaporize</button>
<button id="condense" onclick="Demo.condense()">Condense</button>
`
}
function render () {
setTimeout(() => {
app.innerHTML = App();
melt.disabled = Demo.can("melt", true) ? null : "disabled"
freeze.disabled = Demo.can("freeze", true) ? null : "disabled"
vaporize.disabled = Demo.can("vaporize", true) ? null : "disabled"
condense.disabled = Demo.can("condense", true) ? null : "disabled"
},0)
}
window.Demo = _Demo()
Demo.onTransition = render
render()