svelte-valtio v0.0.3
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.