Proposal for a state machine with devtools tooling

1-usage.ts

const machine = LIBRARY.StateMachine({
    /* ... json data ... */
}) 

// move to the state
machine.transition('initial')

// move to both states simultaneously
machine.transition(['initial', 'secondary'])

// go to state with immediate flag and stack initial with the existing state
machine.transition('initial', { immediate: true, additive: true })

// a render function provided by the animation library
machine.onUpdate(ANIMATION_LIB.renderState)

// replace configuration
machine.loadJSON(/* ... json data ... */)

// remove all update handlers
machine.dispose()

// ---
// Interfaces
// ---
interface IStateRenderer { 
    (machine: IStateMachine, current: IState, next: IState): any
}

interface IState {
    name: string
    target: any 
    data: {
	// registered type or built-in type
        type: string
        immediate: boolean
    }  
    props: {
        // whatever properties or settings are needed for the state
    }
}

2-devtools usage.ts

const machine = LIBRARY.StateMachine({ ... })

// loaded via separate package
LIBRARY.devtools.tinker(machine)

3-devtools-schema-registration.ts

LIBRARY.devtools.registerSchema([
    {
        type: 'Tween',
        allowAny: true,
        properties:  {
            target: 'string',
            easing: 'cubic-bezier'
        }
    }
]) 

// ---
// Interfaces
// ---
interface ISchema {
    name: string
    props: Record<string, ISchemaProperty | string>
}

interface ISchemaProperty {
    name: string
    type?: string
    subtype?: string
    defaultValue?: any
    allowAny?: boolean
    properties?: Record<string, ISchemaProperty | string>
}