The machine to hook-into.
The current state of the machine.
import m from 'mithril'
import { withHooks as MithrilComponent } from 'mithril-hooks'
import { Statebot } from 'statebot'
import { useStatebot } from 'statebot/hooks/mithril'
let loadMachine = Statebot('loader', {
chart: `
idle ->
waiting ->
loaded | failed ->
idle
`
})
loadMachine.performTransitions(({ emit }) => ({
'idle -> waiting': {
on: 'start-loading',
then: () => {
// Fail half the time for this demo
let fail = Math.random() > 0.5
setTimeout(() => {
fail ? emit('error') : emit('success')
}, 1000)
}
},
'waiting -> loaded': {
on: 'success'
},
'waiting -> failed': {
on: 'error'
}
}))
let { Enter, Emit, inState } = loadMachine
let LoadingButton = MithrilComponent(() => {
let state = useStatebot(loadMachine)
return m(
'button',
{
className: state,
onclick: Emit('start-loading'),
disabled: !inState('idle')
},
inState('idle', 'Load'),
inState('waiting', 'Please wait...'),
inState('loaded', 'Done!'),
inState('failed', 'Whoops!')
)
})
let ResetButton = MithrilComponent(() => {
return m(
'button',
{
onclick: Enter('idle')
},
'Reset'
)
})
For hooking-into Statebots that have life-cycles independent of the components that use them,
useStatebot:You can play around with this one in a CodeSandbox.