// Patterns r11

Toggle

Two states, one verb. The smallest useful machine — and the one you reach for whenever a boolean has started growing edge cases.

Code

panel.fsl

import { sm } from 'jssm';

const panel = sm`
  closed 'toggle' → open;
  open   'toggle' → closed;
`;

panel.go('toggle');
panel.state(); // → 'open'

Graph

Notes

Reach for this whenever you find yourself adding a third boolean to a component. open / opening / closed is a different machine — and once you write it as one, the bugs go away.