62 lines
1.7 KiB
Plaintext
62 lines
1.7 KiB
Plaintext
---
|
|
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)
|
|
|
|
---
|