…
|
||
---|---|---|
.. | ||
action | ||
guard | ||
index.hbs | ||
index.js | ||
README.mdx |
--- class: ember --- # StateChart ```hbs <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 | Argument/Attribute | Type | Default | Description | | --- | --- | --- | --- | | `chart` | `object` | | An xstate statechart/state machine object | | `initial` | `String` | The initial value of the state chart itself | The initial state of the machine/chart (defaults to whatever is defined on the object itself) | The component currently yields 3 conextual components: - `<State />`: Used for rendering matching certain states ([also see State Component](../state/README.mdx)) - `<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 ```hbs <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](./index.js) - [Template Source Code](./index.hbs) ---