|
| 1 | +# Nano Stores Svelte |
| 2 | + |
| 3 | +<img align="right" width="92" height="92" title="Nano Stores logo" |
| 4 | + src="https://nanostores.github.io/nanostores/logo.svg"> |
| 5 | + |
| 6 | +Svelte 5 ([runes](https://svelte.dev/docs/svelte/what-are-runes)) integration |
| 7 | +for **[Nano Stores]**, a tiny state manager with many atomic tree-shakable |
| 8 | +stores. |
| 9 | + |
| 10 | +- **Small.** Less than 1 KB. Zero dependencies. |
| 11 | +- **Fast.** With small atomic and derived stores, you do not need to update |
| 12 | + every component on every store change. |
| 13 | +- **Tree Shakable.** The chunk contains only stores used by components |
| 14 | + in the chunk. |
| 15 | +- Built on [`createSubscriber`], so it shares one subscription per store |
| 16 | + between all readers and stays correct under SSR. |
| 17 | +- Was designed to move logic from components to stores. |
| 18 | +- It has good **TypeScript** support. |
| 19 | + |
| 20 | +```svelte |
| 21 | +<script> |
| 22 | + import { useStore } from '@nanostores/svelte' |
| 23 | +
|
| 24 | + import { profile } from '../stores/profile.js' |
| 25 | +
|
| 26 | + let user = useStore(profile) |
| 27 | +</script> |
| 28 | +
|
| 29 | +<header>Hi, {user.current.name}</header> |
| 30 | +``` |
| 31 | + |
| 32 | +[Nano Stores]: https://github.com/nanostores/nanostores/ |
| 33 | +[`createSubscriber`]: https://svelte.dev/docs/svelte/svelte-reactivity#createSubscriber |
| 34 | + |
| 35 | +--- |
| 36 | + |
| 37 | +<img src="https://cdn.evilmartians.com/badges/logo-no-label.svg" alt="" width="22" height="16" /> Made at <b><a href="https://evilmartians.com/devtools?utm_source=nanostores-svelte&utm_campaign=devtools-button&utm_medium=github">Evil Martians</a></b>, product consulting for <b>developer tools</b>. |
| 38 | + |
| 39 | +--- |
| 40 | + |
| 41 | + |
| 42 | +## Install |
| 43 | + |
| 44 | +```sh |
| 45 | +npm install nanostores @nanostores/svelte |
| 46 | +``` |
| 47 | + |
| 48 | +Requires Svelte `>=5.7.0` (when [`createSubscriber`] was added). |
| 49 | + |
| 50 | + |
| 51 | +## Usage |
| 52 | + |
| 53 | +`useStore(store)` returns a reactive holder. Read `.current` to get the store’s |
| 54 | +value. As long as you read `.current` inside a reactive context — markup, |
| 55 | +`$derived`, or `$effect` — the component updates whenever the store changes. |
| 56 | + |
| 57 | +```svelte |
| 58 | +<script> |
| 59 | + import { useStore } from '@nanostores/svelte' |
| 60 | +
|
| 61 | + import { router } from '../stores/router.js' |
| 62 | +
|
| 63 | + let page = useStore(router) |
| 64 | +</script> |
| 65 | +
|
| 66 | +{#if page.current.route === 'home'} |
| 67 | + <HomePage /> |
| 68 | +{:else} |
| 69 | + <Error404 /> |
| 70 | +{/if} |
| 71 | +``` |
| 72 | + |
| 73 | +Because `.current` is read every time, derive from it the same way you would |
| 74 | +from any other rune: |
| 75 | + |
| 76 | +```svelte |
| 77 | +<script> |
| 78 | + import { useStore } from '@nanostores/svelte' |
| 79 | +
|
| 80 | + import { profile } from '../stores/profile.js' |
| 81 | +
|
| 82 | + let user = useStore(profile) |
| 83 | + let name = $derived(user.current.name) |
| 84 | +</script> |
| 85 | +``` |
| 86 | + |
| 87 | +The store is only kept mounted while at least one component reads its `.current` |
| 88 | +in an effect, and it unmounts (after Nano Stores’ unmount delay) once the last |
| 89 | +reader is gone. |
| 90 | + |
| 91 | + |
| 92 | +### Why not Svelte’s store contract? |
| 93 | + |
| 94 | +Every Nano Store implements [Svelte’s store contract], so historically you could |
| 95 | +use the `$store` auto-subscription directly. As Svelte moves from stores to |
| 96 | +runes, `useStore` is the runes-native replacement: it has no dependency on the |
| 97 | +store contract and plugs straight into Svelte’s signal graph. |
| 98 | + |
| 99 | +[Svelte’s store contract]: https://svelte.dev/docs/svelte/stores |
| 100 | + |
| 101 | + |
| 102 | +## Store Naming |
| 103 | + |
| 104 | +Nano Stores conventionally prefixes store names with `$` (`$profile`). Svelte |
| 105 | +**reserves the `$` prefix** for runes, so a `$`-prefixed identifier cannot be |
| 106 | +imported or declared inside `.svelte`, `.svelte.js`, or `.svelte.ts` files. |
| 107 | + |
| 108 | +Either drop the prefix for stores used from Svelte: |
| 109 | + |
| 110 | +```js |
| 111 | +// stores/profile.js |
| 112 | +import { atom } from 'nanostores' |
| 113 | + |
| 114 | +export let profile = atom({ name: 'Anna' }) |
| 115 | +``` |
| 116 | + |
| 117 | +…or alias the prefix away on import: |
| 118 | + |
| 119 | +```svelte |
| 120 | +<script> |
| 121 | + import { useStore } from '@nanostores/svelte' |
| 122 | +
|
| 123 | + import { $profile as profile } from '../stores/profile.js' |
| 124 | +
|
| 125 | + let user = useStore(profile) |
| 126 | +</script> |
| 127 | +``` |
| 128 | + |
| 129 | + |
| 130 | +## Options |
| 131 | + |
| 132 | +### Keys |
| 133 | + |
| 134 | +For [`map`](https://github.com/nanostores/nanostores#maps) and |
| 135 | +[`deepMap`](https://github.com/nanostores/nanostores#deep-maps) stores, use the |
| 136 | +`keys` option to re-evaluate only when specific keys change: |
| 137 | + |
| 138 | +```svelte |
| 139 | +<script> |
| 140 | + import { useStore } from '@nanostores/svelte' |
| 141 | +
|
| 142 | + import { settings } from '../stores/settings.js' |
| 143 | +
|
| 144 | + let theme = useStore(settings, { keys: ['theme'] }) |
| 145 | +</script> |
| 146 | +
|
| 147 | +<main class={theme.current.theme}>…</main> |
| 148 | +``` |
| 149 | + |
| 150 | +`.current` always returns the whole store value; the `keys` option only narrows |
| 151 | +which changes trigger an update. |
| 152 | + |
| 153 | + |
| 154 | +## Server-Side Rendering |
| 155 | + |
| 156 | +`useStore` is SSR-safe. When `.current` is read outside of an effect — as it is |
| 157 | +during server rendering — it simply returns the current store value without |
| 158 | +subscribing, so no listeners leak on the server. |
0 commit comments