https://github.com/kenkunz/svelte-fsm

Tiny, expressive finite state machines for svelte
https://github.com/kenkunz/svelte-fsm

Last synced: 14 days ago
JSON representation

Tiny, expressive finite state machines for svelte

• Host: GitHub
• URL: https://github.com/kenkunz/svelte-fsm
• Owner: kenkunz
• License: mit
• Created: 2021-05-14T19:33:09.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2023-02-21T04:42:49.000Z (almost 2 years ago)
• Last Synced: 2024-11-26T11:08:49.253Z (16 days ago)
• Language: JavaScript
• Size: 80.1 KB
• Stars: 277
• Watchers: 3
• Forks: 9
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE.md

Awesome Lists containing this project

• awesome-svelte-stores - svelte-fsm

README

        
# Svelte FSM



A tiny, simple, expressive, pramgmatic [Finite State

Machine](https://en.wikipedia.org/wiki/Finite-state_machine) (FSM) library, optimized for

[Svelte](https://svelte.dev).

* **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](#usage-overview) below)

* **pragmatic:** prioritizes developer happiness over strict adherance to FSM or Statechart

  formalizations

* **Svelte-optimized:** implements Svelte's

  [store contract](https://svelte.dev/docs#Store_contract);

  philosophically aligned – feels at-home in a Svelte codebase

## Quick Start

### Installation

```bash

npm install svelte-fsm

```

### Create your first FSM and use it in a Svelte component

```svelte

  import fsm from 'svelte-fsm';

  const simpleSwitch = fsm('off', {

    off: { toggle: 'on' },

    on: { toggle: 'off' }

  });

  {$simpleSwitch}

```

## 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







* Watch the **[Lightning Talk](https://youtu.be/3_D-3HPUdEI)** from

  **[Svelte Summit Fall 2021](https://sveltesummit.com/)**

* Review the **[Full Documentation](https://github.com/kenkunz/svelte-fsm/wiki)**

* Check out the **[Examples](https://github.com/kenkunz/svelte-fsm/wiki/Examples)**




## Contributors

* Thank you **[@ivanhofer](https://github.com/ivanhofer)** for contributing `TypeScript`

  declarations, resulting in an improved developer experience.

* Thank you **[@morungos](https://github.com/morungos)** for contributing a fix for

  [#8](https://github.com/kenkunz/svelte-fsm/issues/8) (derived stores) by eliminating `subscribe`

  overloading.