Fork me on GitHub

Toggle

Ported from Stately's XState Toggle example.

This ports Stately's XState Toggle example into SCXML. It keeps the same small two-state shape while adding explicit set and reset events for the live browser panel.

Toggle state
inactive
The modeled switch is disabled.
Toggle count
0
Trace

SCXML source

<scxml datamodel="ecmascript"
       initial="inactive"
       name="ToggleExample"
       version="1.0"
       xmlns="http://www.w3.org/2005/07/scxml">
  <datamodel>
    <data id="enabled" expr="false"/>
    <data id="toggleCount" expr="0"/>
  </datamodel>

  <state id="inactive">
    <onentry>
      <assign location="enabled" expr="false"/>
      <send event="trace"><content expr="'Toggle is inactive.'"/></send>
    </onentry>
    <transition event="TOGGLE SET_ACTIVE" target="active">
      <assign location="toggleCount" expr="toggleCount + 1"/>
    </transition>
  </state>

  <state id="active">
    <onentry>
      <assign location="enabled" expr="true"/>
      <send event="trace"><content expr="'Toggle is active.'"/></send>
    </onentry>
    <transition event="TOGGLE SET_INACTIVE" target="inactive">
      <assign location="toggleCount" expr="toggleCount + 1"/>
    </transition>
    <transition event="RESET" target="inactive">
      <assign location="toggleCount" expr="0"/>
    </transition>
  </state>
</scxml>