@xstate/store-svelte

Svelte adapter for @xstate/store.

Installation

npm install @xstate/store-svelte

Quickstart

<script>
import { createStore, useSelector } from '@xstate/store-svelte';
// ...

const store = createStore({
  context: { count: 0 },
  on: {
    inc: (ctx) => ({ ...ctx, count: ctx.count + 1 })
  }
});

const count = useSelector(store, (s) => s.context.count);
</script>

<button on:click={() => store.send({ type: 'inc' })}>
  Count: {$count}
</button>

API

useSelector(store, selector?, compare?)

Creates a Svelte readable store that subscribes to an XState store and returns a selected value.

<script>
import { createStore, useSelector } from '@xstate/store-svelte';
// ...

const store = createStore({
  context: { count: 0 },
  on: {
    inc: (ctx) => ({ ...ctx, count: ctx.count + 1 })
  }
});

const count = useSelector(store, (s) => s.context.count);
// or without selector (returns full snapshot)
const snapshot = useSelector(store);
</script>

<div>{$count}</div>

Arguments:

• store - Store created with createStore()
• selector? - Function to select a value from snapshot
• compare? - Equality function (default: ===)

Returns: Svelte readable store

Re-exports

All exports from @xstate/store are re-exported, including createStore, createStoreWithProducer, createAtom, and more.

See the XState Store docs for the full API, and the Svelte-specific docs for more Svelte examples.