npm package: @kineticcafe/svelte-fsm-eventless
Description: Tiny (<1kb), expressive, Svelte-optimized Finite State Machine (FSM) library with support for eventless transitions
Author: Ken Kunz & Stuart Watt
Latest version: 2.0.0

# Svelte FSM with Eventless Transition Support

A tiny, simple, expressive, pragmatic [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](#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

@kineticcafe/svelte-fsm-eventless is an extension to Ken Kunz's excellent
[svelte-fsm][]. The eventless transition support _should_ be sufficient for most
purposes, but it has only been tested for our purposes. You can watch
kenkunz/svelte-fsm#10 for progress on the core implementation of eventless
transitions. When svelte-fsm supports eventless transitions natively, we are
likely to retire this library.

## Quick Start

### Installation

```bash
npm install @kineticcafe/svelte-fsm-eventless
```

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

```svelte
<script>
  import fsm from '@kineticcafe/svelte-fsm-eventless';

  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

<a target="_blank" href="https://youtu.be/3_D-3HPUdEI">
<img alt="Svelte Summit video" align="right" src="https://user-images.githubusercontent.com/35901/145655001-e0b63ed8-b6cf-4729-b24c-e9b98aa30275.png">
</a>

- 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)**

<br clear="all">

## Contributors

This extension would not exist without the excellent base library by
**[kenkunz][]**.

[Finite State Machine]: https://en.wikipedia.org/wiki/Finite-state_machine
[Svelte]: https://svelte.dev
[store contract]: https://svelte.dev/docs#Store_contract
[svelte-fsm]: https://github.com/kenkunz/svelte-fsm
[kenkunz]: https://github.com/kenkunz