svelte-valtio

svelte-valtio serves as a wrapper for valtio, enabling its use within Svelte. The stores created by it can be interchangeably utilized with Svelte's native stores.

proxyWritable store

The proxyWritable store is similar to Svelte's writable store but it's powered by Valtio's proxy. You can use it in the same way as Svelte's writable.

import {proxyWritable} from "svelte-valtio"

const count = proxyWritable(0)

proxyReadable store

The proxyReadable store mimics the behavior of Svelte's readable store.

import {proxyReadable} from "svelte-valtio"

const config = proxyReadable({env:"PROD",port:1000})

proxyDerived store

proxyDerived store can be used in the same manner as Svelte's derived store. However, this variant has a Valtio proxy incorporated within it. It can accommodate any stores, irrespective of whether they are created using svelte-valtio or svelte/store.

import {proxyWritable, proxyDerived} from "svelte-valtio"
import {writable} from "svelte/store"

const id = proxyWritable(1)
const users = writable([
    {id:1, name:"sami"},
    {id:2, name:"alsubhi"}
])

const selectedUser = proxyDerived([id, users], ($id, $users)=>{
    return $users.find((user)=>user.id === $id)
})

Usage In Components

You can easily integrate these stores into your Svelte components. Here's an example where we bind the id to an input field and display the selected user.

<script>
import {proxyWritable, proxyDerived} from "svelte-valtio";
import {writable} from "svelte/store";

const id = proxyWritable(1);
const users = writable([
    {id: 1, name: "sami"},
    {id: 2, name: "alsubhi"}
]);

const selectedUser = proxyDerived([id, users], ($id, $users) => {
    return $users.find((user) => user.id === $id);
});
</script>

<div>
    <input type="number" bind:value={$id} min="1" max="2">
    <p>Selected User: {$selectedUser ? $selectedUser.name : 'User not found'}</p>
</div>

In this example, the id value changes as the user types into the input field. This triggers the selectedUser store to automatically update and display the name of the selected user. If the id doesn't correspond to any user in the users store, 'User not found' is displayed.

Listening to Part of a Store

With Svelte-Valtio, you can establish reactivity on specific sections of a store. This feature is applicable to proxyWritable, proxyReadable, and proxyDerived stores. The reactivity triggers only when changes occur in the part of the store you are listening to.

Consider the following example with a proxyWritable store:

import {proxyWritable} from "svelte-valtio";

const carCompany = proxyWritable({
    name: 'Tesla',
    model: 'Model 3',
    year: 2023,
    batterySizes: ['Standard', 'Long Range', 'Performance']
});

In order to listen for changes in a specific key within the store, you can use the selectKey function. For instance, to listen to the model key, you would set up as follows:

const modelName = carCompany.selectKey((v) => v, "model");

In this case, modelName is a proxyReadable store that only reacts to changes in the model key of the carCompany store. Modifications to other keys such as name, year, or batterySizes will not initiate updates in modelName.

Similarly, to listen to a particular object within the store, you can employ the select function. To listen to the batterySizes object, you can set it up like so:

const batterySizes = carCompany.select((v) => v.batterySizes);

Here, batterySizes is a proxyReadable store that will only respond to alterations in the batterySizes list within the carCompany store. Changes to other keys will not impact batterySizes. This provides more granular control over your reactivity system, ensuring efficient updates.