Compound States
In a heirarchy of states, compound states are parents. They contain atomic, parallel or other compound states.
Usage
Use compound(...)
to create state configuration and
resolveState(...)
to initialize it.
import { atomic, compound, emitEvent, resolveState } from 'hine'; const toggleConfig = compound('toggle', { initial: 'inactive', children: [ atomic('inactive', { on: { toggle: 'active' }, }), atomic('active', { on: { toggle: 'inactive' }, }), ], }); const toggleState = resolveState(toggleConfig); emitEvent(toggleState, 'toggle');
Active Children
Active states are those that can receive and handle emitted events at a particular time. Compound states have exactly one active child state. This is in contrast to parallel states, where all children are simultaneously active, and atomic states which have no children.
// Always `true` for compound states console.log(toggleState.activeChildren.length === 1);
Children
Compound states must have at least one child and specify the initial active child when the state is initialized.
const activeChildCount = toggleState.activeChildren.length; const childCount = toggleState.children.size; // Always `true` for compound states console.log(activeChildCount === 1); console.log(childCount >= activeChildCount);
Hooks
Compound states accept hooks such as afterEntry
and
beforeExit
. Hooks respond to life-cycle events of a state.
import { atomic, compound, emitEvent, resolveState } from 'hine'; import { logEvent } from './analytics.js'; const toggleConfig = compound('toggle', { initial: 'inactive', children: [ atomic('inactive', { on: { toggle: 'active' }, }), atomic('active', { hooks: { afterEntry: () => logEvent('active start'), beforeExit: () => logEvent('active end'), }, on: { toggle: 'inactive' }, }), ], }); const toggleState = resolveState(toggleConfig); emitEvent(toggleState, 'toggle');
When toggleState
receives a 'toggle'
event while inactive,
it will transition to the active state and log 'active start'
. When
toggleState
then transitions out of the active state, it will log
'active end'
.