Overview
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 moduleimport { StateMachine } from "@ixfx/flow.js"// Eg: StateMachine.init();
// Whole moduleimport * as Flow from "@ixfx/flow.js"// Eg: Flow.StateMachine.init();
// From bundleimport { Flow } from "@ixfx/bundle.js"// Eg: Flow.StateMachine.init();
// And within your HTML's <HEAD> </HEAD> block:<script type="importmap">{ "imports": { "@ixfx/": "/ixfx/" } }</script>
// Sub module from parentimport { StateMachine } from "@ixfx/flow.js"// Eg: StateMachine.init();
// Whole parent moduleimport * as Flow from "@ixfx/flow.js"// Eg: Flow.StateMachine.init();
// From the bundleimport { Flow } from "@ixfx/bundle.js"// Eg: Flow.StateMachine.init();
// Sub module from parentimport { StateMachine } from "https://unpkg.com/@ixfx/flow/bundle"// Eg: StateMachine.init();
// Whole parent moduleimport * as Flow from "https://unpkg.com/@ixfx/flow/bundle"// Eg: Flow.StateMachine.init();
// Single module from the bundleimport { Flow } from "https://unpkg.com/@ixfx/bundle"// Eg: Flow.StateMachine.init();