Skip to content

kenkunz/svelte-fsm

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

72 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Svelte FSM

Svelte FSM logo

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 and states
  • 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)
  • 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

Svelte Summit video

Contributors

  • Thank you @ivanhofer for contributing TypeScript declarations, resulting in an improved developer experience.
  • Thank you @morungos for contributing a fix for #8 (derived stores) by eliminating subscribe overloading.

About

Tiny, expressive finite state machines for svelte

Resources

License

Stars

Watchers

Forks

Packages

No packages published