Toggle (on/off)

🏷️ transitions
🏷️ events

About

A state-machine modelling a binary control, demonstrating simple transitions.

Try it

Did you see that?

Try toggling on and off, and refreshing the page.

Notice how the state-machine can be resumed in either state.

Toggle

Definition

Tip

View this and other example's source and test on GitHub

toggleMachine.ts

import { defineMachine } from "yay-machine";

export interface ToggleState {
  readonly name: "off" | "on";
}

export interface ToggleEvent {
  readonly type: "TOGGLE";
}

export const toggleMachine = defineMachine<ToggleState, ToggleEvent>({
  initialState: { name: "off" },
  states: {
    off: {
      on: { TOGGLE: { to: "on" } },
    },
    on: {
      on: { TOGGLE: { to: "off" } },
    },
  },
});

Usage

import assert from "assert";
import { toggleMachine } from "./toggleMachine";

const toggle = toggleMachine.newInstance().start();
assert.deepStrictEqual(toggle.state, { name: "off" });

toggle.send({ type: "TOGGLE" });
assert.deepStrictEqual(toggle.state, { name: "on" });

toggle.send({ type: "TOGGLE" });
assert.deepStrictEqual(toggle.state, { name: "off" });