Consultant Designer & Developer
Public
Edited
Feb 27, 2023
1 star
toggleMachine.value
inspector = {
const debugIFrame = htl.html`<iframe width=${width} height=${Math.floor(
(width * 9) / 16
)}>`;
// Yield the <iframe>, to put in DOM before calling inspect()
yield debugIFrame;
inspect.inspect({ iframe: debugIFrame });
// Yield again, so that other machine cells are re-run after the inspect is initialised
yield debugIFrame;
}
viewof toggleMachine = {
// 👋 Include the inspector cell reference to re-run the cell once
// xstate inspector is initialised or updated.
inspector;
const machine = xstate.createMachine(toggleMachineConfig);
const input = Inputs.input();
const service = xstate
.interpret(machine, { devTools: true })
.onTransition((state) => {
input.value = state;
input.dispatchEvent(new Event("input"), { bubbles: true });
})
.start();
yield Object.assign(input, { service });
}
toggleMachineConfig = ({
id: "toggle-machine",
initial: "inactive",
states: {
inactive: {
on: { TOGGLE: "active" }
},
active: {
on: { TOGGLE: "inactive" }
}
}
})
toggleMachine
xstate = import("https://cdn.skypack.dev/xstate@4.37.0?min")
inspect =
import("https://cdn.skypack.dev/@xstate/inspect@0.7.1?min")
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
