<script>
import { stetson } from "stetson";
const counter = stetson(0).actions((s) => ({
up: () => s.value++,
reset: () => (s.value = 0),
}));
const todos = stetson([]).actions((store) => ({
add(text) {
store.value.push({ text, done: false, id: String(Math.random()) });
},
toggle(id) {
const item = store.value.find(g => g.id === id);
if (item) {
item.done = !item.done;
}
},
}));
</script>
<h1>Introducing stetson</h1>
<h3>Counter</h3>
<button on:click={counter.up}>{$counter} (click me)</button>
<button on:click={counter.reset}>reset</button>
<h3>Todo app</h3>
<div style="display:flex; flex-direction:column">
{#each $todos as todo}
<label>
<input type="checkbox" checked={todo.done} on:click={() => todos.toggle(todo.id)} />
{todo.text}
</label>
{/each}
{#key $todos.length}