@neesh-studio/svelte-fsm
v1.1.3
Published
Tiny (<1kb), expressive, Svelte-optimized Finite State Machine (FSM) library
Downloads
1
Readme
Svelte FSM
A tiny, simple, expressive, pramgmatic Finite State Machine (FSM) library, optimized for Svelte.
- tiny: under
1kb
(minified); zero dependencies - simple: implements core FSM features, not the kitchen sink
- expressive: FSM constructs are mapped to core JavaScript features (see Usage Overview below)
- pragmatic: prioritizes developer happiness over strict adherance to FSM or Statechart formalizations
- Svelte-optimized: implements Svelte's store contract; philosophically aligned – feels at-home in a Svelte codebase
Quick Start
Installation
npm install svelte-fsm
Create your first FSM and use it in a Svelte component
<script>
import fsm from 'svelte-fsm';
const simpleSwitch = fsm('off', {
off: { toggle: 'on' },
on: { toggle: 'off' }
});
</script>
<button value={$simpleSwitch} on:click={simpleSwitch.toggle}>
{$simpleSwitch}
</button>
Usage Overview
Svelte FSM's API is delightfully simple. FSM constructs are intuitively mapped to core JavaScript language features, resulting in a highly expressive API that's effortless to remember, a joy to write, and natural to read.
- an fsm is defined by calling the default export
fsm()
function with 2 arguments:initial
andstates
- states is just an object consisting of nested
state
objects, which consist of…- transitions – property values or action return values that match another
state
- actions – functions that optionally transition (return a
state
)
- transitions – property values or action return values that match another
- events are invoked on a state machine as function calls, returning the resulting state
- timers (often used in state machines) are available by calling
.debounce(wait)
on any event - context is just… context (i.e., the lexical scope of your fsm)
Next Steps
- Watch the Lightning Talk from Svelte Summit Fall 2021
- Review the Full Documentation
- Check out the Examples
Contributors
Credit to @ivanhofer for contributing TypeScript
declarations, resulting in an improved developer experience.