Open xstate-widget in Script Kit

// Name: xstate widget
import "@johnlindquist/kit"
let { createMachine, interpret } = await npm("xstate")
let initial = 'inactive'
let toggleMachine = createMachine({
id: 'toggle',
initial,
states: {
inactive: { on: { TOGGLE: 'active' } },
active: { on: {TOGGLE: 'inactive'}}
}
})
// Widgets use "petite-vue" templating with state on the root
// This allows to send a state object
let w = await widget(`
<div class="p-4 text-4xl">
<button>Click</button>
<div>{{ value === "active" ? "💚" : "💔"}}<div>
</div>`, {
state: {
value: initial
}
})
let toggleService = interpret(toggleMachine)
.onTransition(state => {
log(state) // ~/.kenv/logs/xstate-widget.log
w.setState(state)
})
.start()
w.onClick(() => {
toggleService.send('TOGGLE')
})