XState Widget

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')
})