Javascript-State-Machine

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()