Overview

Module Flow.StateMachine

A state machine allows for a controlled change from one state to another. It sets up a well-defined set of possible states and what transitions are possible between them. It’s up to you to ‘drive’ the machine, telling it when to transition.

Why?

Behaving according to a current state is a common pattern in programming interactivity. This is often solved by using different variables track state. A downside is that you have to be mindful what variables or conditions alter state as well as when and where to enforce rules about state changes.

A state machine therefore can help you catch errors and makes coding simpler when you know there are a fixed number of well-defined states to handle, and they are only activated according to a logic you have defined.

Importing

// Sub module
import { StateMachine } from "@ixfx/flow.js"
// Eg: StateMachine.init();

// Whole module
import * as Flow from "@ixfx/flow.js"
// Eg: Flow.StateMachine.init();

// From bundle
import { Flow } from "@ixfx"
// Eg: Flow.StateMachine.init();

// And within your HTML's <HEAD> </HEAD> block:
<script type="importmap">{ "imports": { "@ixfx":"/ixfx/index.js", "@ixfx/": "/ixfx/" } }</script>

// Sub module from parent
import { StateMachine } from "@ixfx/flow.js"
// Eg: StateMachine.init();

// Whole parent module
import * as Flow from "@ixfx/flow.js"
// Eg: Flow.StateMachine.init();

// From the bundle
import { Flow } from "@ixfx/bundle.js"
// Eg: Flow.StateMachine.init();

// Sub module from parent
import { StateMachine } from "https://unpkg.com/@ixfx/flow/bundle"
// Eg: StateMachine.init();

// Whole parent module
import * as Flow from "https://unpkg.com/@ixfx/flow/bundle"
// Eg: Flow.StateMachine.init();

// Single module from the bundle
import { Flow } from "https://unpkg.com/@ixfx/bundle"
// Eg: Flow.StateMachine.init();