StateChart

This component is deprecated and is currently undergoing an interface change in <StateMachine />

<StateChart
  @chart={{xstateStateChartObject}}
  as |State Guard Action dispatch state|>
</StateChart>

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

Arguments

The component currently yields 3 conextual components:

• <State />: Used for rendering matching certain states (also see State Component)
• <Action @name="" @exec={{action ""}} />: Used to wire together ember actions to xstate actions.
• <Guard @name="" @cond={{action ""}} />: Used to wire together ember actions or props to xstate guards.

and 2 further objects:

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

Example

<StateChart
  @chart={{xstateStateChartObject}}
  as |State Guard Action dispatch state|>
    <Guard @name="nameOfGuard" @cond={{action "testGuardCondition"}} />
    <Action @name="nameOfAction" @exec={{action "executeAction"}} />
    <State @matches="idle">
      Currently Idle
    </State>
    <State @matches="loading">
      Currently Loading
    </State>
    <State @matches={{array 'loading' 'idle'}}>
      Idle and loading
      <button disabled={{state-matches state "loading"}} onclick={{action dispatch "START"}}>Load</button>
    </State>
</StateChart>

See

• Component Source Code
• Template Source Code