Using the history pseudo-state in SCXML

If you're using something like SCION to manage interactivity in your JavaScript app, it's good to know about the <history> pseudo-state.

The standard for SCXML has this to say about <history>:

The <history> pseudo-state allows a state machine to remember its state configuration. A <transition> taking the <history> state as its target will return the state machine to this recorded configuration.

…which didn't help me at all. So I took a stab at it anyway, and I've got to say it's a lot more intuitive than it might sound.

<scxml initial="initial-default">

    <state id="initial-default">
        <transition event="ready" target="idle"/>
    </state>

    <state id="preferences-closed">

        <history id="hist-resume" type="deep" />

        <state id="idle">
            <transition event="begin-transition" target="animating"/>
            <transition event="toggle-preferences" target="preferences-open"/>
        </state>

        <state id="animating">
            <transition event="finish-transition" target="idle"/>
        </state>

    </state>

    <state id="preferences-open">
        <transition event="toggle-preferences" target="hist-resume"/>
    </state>

</scxml>

In this example, we have a preferences mode that, when engaged, effectively pauses everything until we leave the mode.

Since the <history> pseudo-state keeps track of the exact state the interpreter was in before leaving the parent preferences-closed state, we can return to exactly that state by targeting it in the transition from preferences-open. Since it uses type="deep", any sibling states like idle can be as complex as needed and we can still return to whatever state it was in.

This is just an illustrative example since I couldn't find any comprehensible examples elsewhere on the internet. Let me know if you'd like to see more description!