sappho

📃 Flexible global rune-based state management for Svelte 5+

Usage:

Define your stores:

import { reader, writer, persister } from 'sappho';

export const poemStore = writer<string>(
    "Parisian whiskers Prowls Montmartre's cobblestones Seine reflects moonlight"
);
export const readableOnlyPoemStore = reader(poemStore);

export const persistedPoemStore = persister<string>('Storage Key', 'Your content here');

Usage in svelte files:

<script lang="ts">
    import { poemStore, persistedPoemStore } from '$lib/stores/poemStore';

    let poem = poemStore;
    let persistedPoem = persistedPoemStore;

    function handleClick() {
        poem.state = '';
        persistedPoem.state = '';
    }
</script>

<div class="mt-40 text-black text-3xl">{poem.state}</div>
<div class="mt-40 text-black text-3xl">{persistedPoem.state}</div>
<input bind:value={poem.state} />
<input bind:value={persistedPoem.state} />
<button onclick={handleClick}>Clear Poem</button>

TODO:

• Add better derived stores