Svelte
The Svelte adapter returns store objects that follow Svelte store expectations. Import from @ilokesto/state/svelte.
Plain writable store
<script lang="ts">
import { create } from '@ilokesto/state/svelte';
const counter = create({ count: 0, label: 'Clicks' });
const count = counter.select((state) => state.count);
const increment = () => counter.update((state) => ({ ...state, count: state.count + 1 }));
</script>
<button on:click={increment}>
{$count}
</button>Plain state is writable and includes set, update, setState, select, writeOnly, and readOnly.
Reducer readable store
<script lang="ts">
import { create } from '@ilokesto/state/svelte';
type Action = { type: 'increment' } | { type: 'reset' };
const reduce = (state: { count: number }, action: Action) => {
if (action.type === 'increment') return { count: state.count + 1 };
if (action.type === 'reset') return { count: 0 };
return state;
};
const counter = create(reduce, { count: 0 });
const count = counter.select((state) => state.count);
</script>
<button on:click={() => counter.dispatch({ type: 'increment' })}>
{$count}
</button>Reducer state is readable because writes should go through dispatch.
Outside component code
const current = counter.readOnly((state) => state.count);
const setCounter = counter.writeOnly();
setCounter((state) => ({ ...state, count: state.count + 1 }));Caveats
subscribeimmediately calls the subscriber with current state, matching Svelte expectations.selectcreates a readable store for one projection.- In reducer mode, prefer
dispatch; direct writable methods are not exposed.