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' .