mirror of https://github.com/hashicorp/consul
…
|
||
---|---|---|
.. | ||
README.mdx | ||
index.hbs | ||
index.js |
README.mdx
--- class: ember --- # StateMachine ```hbs <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 | 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 1 contextual components: - `<fsm.State />`: Used for rendering matching certain states ([also see State Component](../state/README.mdx)) 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 ```hbs <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](./index.js) - [Template Source Code](./index.hbs) ---