Valdres

Quick Start with Svelte

Install

npm install valdres valdres-svelte

Create your first atom

// store.ts
import { atom } from "valdres"

export const countAtom = atom(0)

Use it in a component

<script>
  import { watch } from "valdres-svelte"
  import { countAtom } from "./store"

  const count = watch(countAtom)
</script>

<div>
  <p>Count: {count.value}</p>
  <button onclick={() => count.set(c => c + 1)}>Increment</button>
</div>

Provide a store

Use setValdresContext in your root layout:

<script>
  import { setValdresContext } from "valdres-svelte"

  setValdresContext()
</script>

<slot />

Read-only values

Use readable for read-only subscriptions:

<script>
  import { readable } from "valdres-svelte"
  import { countAtom } from "./store"

  const count = readable(countAtom)
</script>

<p>The count is {count.value}</p>

Next steps