StateMachine

<StateMachine
  @chart={{xstateStateChartObject}}
  as |fsm|>
</StateMachine>

<StateMachine /> is a renderless component that eases rendering of different states from within templates using XState State Machine and Statechart objects.

Please note: This component is currently a gradual replacement for StateChart, which has a less ergonmic interface. Guard and Action component are currently omitted due to a preference to use entries to define those instead of components (which is WIP)

Arguments

The component currently yields 1 contextual components:

• <fsm.State />: Used for rendering matching certain states (also see State Component)

and 2 further objects:

• fsm.dispatch: An action to dispatch an xstate event
• fsm.state: The state object itself for usage in the state-matches helper

Example

<StateMachine
  @chart={{xstateStateChartObject}}
  as |fsm|>
    <fsm.State @matches="idle">
      Currently Idle
    </fsm.State>
    <fsm.State @matches="loading">
      Currently Loading
    </fsm.State>
    <fsm.State @matches={{array 'loading' 'idle'}}>
      Idle and loading
      <button disabled={{state-matches fsm.state "loading"}} onclick={{action fsm.dispatch "START"}}>Load</button>
    </fsm.State>
</StateMachine>

See

• Component Source Code
• Template Source Code