Demo

Installation

npm i sveltejs-valtio

Usage

// store.tsimport{proxy}from'sveltejs-valtio';exportconststate=proxy({count:0});

<scriptlang="ts">import {useSnapshot }from'sveltejs-valtio'import {state }from'./store'const snap=useSnapshot(state)</script><buttonon:click={()=>state.count++}>  Clicks: {$snap.count}</button>

Utilities

derive

import{derive}from'sveltejs-valtio';// create a base proxyconststate=proxy({count:1,});// create a derived proxyconstderived=derive({doubled:(get)=>get(state).count*2,});// alternatively, attach derived properties to an existing proxyderive({tripled:(get)=>get(state).count*3,},{proxy:state,},);

proxyWithComputed

importmemoizefrom'proxy-memoize';import{proxyWithComputed}from'sveltejs-valtio';conststate=proxyWithComputed({count:1,},{doubled:memoize((snap)=>snap.count*2),},);// Computed values accept custom setters too:conststate2=proxyWithComputed({firstName:'Alec',lastName:'Baldwin',},{fullName:{get:memoize((snap)=>`${snap.firstName}${snap.lastName}`),set:(state,newValue)=>{[state.firstName,state.lastName]=newValue.split(' ');},},},);// if you want a computed value to derive from another computed, you must declare the dependency first:conststate=proxyWithComputed({count:1,},{doubled:memoize((snap)=>snap.count*2),quadrupled:memoize((snap)=>snap.doubled*2),},);

proxyWithHistory

import{proxyWithHistory}from'sveltejs-valtio';conststate=proxyWithHistory({count:0});console.log(state.value);// ---> { count: 0 }state.value.count+=1;console.log(state.value);// ---> { count: 1 }state.undo();console.log(state.value);// ---> { count: 0 }state.redo();console.log(state.value);// ---> { count: 1 }