baahu

import { b, machine, emit } from 'baahu';
 
const Toggle = machine({
  id: 'toggle',
  initial: 'inactive',
  context: () => ({}),
  when: {
    inactive: { on: { TOGGLE: { to: 'active' } } },
    active: { on: { TOGGLE: { to: 'inactive' } } },
  },
  render: state => (
    <div>
      <h3>{state}</h3>
      <button onClick={() => emit({ type: 'TOGGLE' })}>Toggle</button>
    </div>
  ),
});

import { b, machine, emit } from 'baahu';
 
/** returns a function that is called by baahu. emit the
 * provided event after the specified time */
function delayedEmit(event, delayMS) {
  return () => setTimeout(() => emit(event, 'light'), delayMS);
}
 
/**
 * you can make your own abstractions like `delayedEmit`
 * for entry/exit/"do" actions.
 *
 * embracing js/ts (as opposed to shipping with every
 * possible abstraction) keeps baahu fast and light!
 */
 
const Light = machine({
  id: 'light',
  initial: 'red',
  context: () => ({
    streetsCrossed: 0,
  }),
  when: {
    red: {
      entry: delayedEmit({ type: 'START' }, 3000),
      on: {
        START: {
          to: 'green',
        },
        CROSS: {
          do: () => alert('JAYWALKING'),
        },
      },
    },
    yellow: {
      entry: delayedEmit({ type: 'STOP' }, 1500),
      on: {
        STOP: {
          to: 'red',
        },
        CROSS: {
          do: ctx => ctx.streetsCrossed++,
        },
      },
    },
    green: {
      entry: delayedEmit({ type: 'SLOW_DOWN' }, 2500),
      on: {
        SLOW_DOWN: {
          to: 'yellow',
        },
        CROSS: {
          do: ctx => ctx.streetsCrossed++,
        },
      },
    },
  },
  render: (state, ctx) => (
    <div>
      <h3>{state}</h3>
      {/* this is a targeted event: 
        only the machine with the specified
        id will be checked */}
      <button onClick={() => emit({ type: 'CROSS' }, 'light')}>
        Cross the Street
      </button>
      <p>Time(s) street crossed: {ctx.streetsCrossed}</p>
    </div>
  ),
});