Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/wobsoriano/sveltio
Proxy-state with valtio.
https://github.com/wobsoriano/sveltio
proxy state store svelte valtio
Last synced: 3 months ago
JSON representation
Proxy-state with valtio.
- Host: GitHub
- URL: https://github.com/wobsoriano/sveltio
- Owner: wobsoriano
- License: mit
- Created: 2021-09-18T15:09:40.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2024-08-28T02:02:31.000Z (5 months ago)
- Last Synced: 2024-10-17T00:26:51.341Z (3 months ago)
- Topics: proxy, state, store, svelte, valtio
- Language: TypeScript
- Homepage:
- Size: 235 KB
- Stars: 28
- Watchers: 3
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# sveltio
[](https://www.npmjs.com/package/sveltio)  
State management solution for Svelte using proxies. Powered by [valtio](https://github.com/pmndrs/valtio).
## Installation
```sh
pnpm add valtio sveltio
```
## Usage
```ts
// store.ts
import { proxy } from 'sveltio'
export const state = proxy({ count: 0 })
```
Read from snapshots, mutate the source.
```svelte
import { useSnapshot } from 'sveltio'
import { state } from './store'
const snap = useSnapshot(state)
state.count++}>
Clicks: {$snap.count}
```
## Utilities
### `derive`
You can subscribe to some proxies and create a derived proxy.
```ts
import { derive } from 'sveltio/utils'
// create a base proxy
const state = proxy({
count: 1,
})
// create a derived proxy
const derived = derive({
doubled: get => get(state).count * 2,
})
// alternatively, attach derived properties to an existing proxy
derive(
{
tripled: get => get(state).count * 3,
},
{
proxy: state,
},
)
```
### `proxyWithComputed`
You can define own computed properties within a proxy. By combining with a memoization library such as [proxy-memoize](https://github.com/dai-shi/proxy-memoize), optimizing function calls is possible.
```ts
import memoize from 'proxy-memoize'
import { proxyWithComputed } from 'sveltio/utils'
const state = proxyWithComputed(
{
count: 1,
},
{
doubled: memoize(snap => snap.count * 2),
},
)
// Computed values accept custom setters too:
const state2 = 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:
const state = proxyWithComputed(
{
count: 1,
},
{
doubled: memoize(snap => snap.count * 2),
quadrupled: memoize(snap => snap.doubled * 2),
},
)
```
[When to use derive over proxyWithComputed?](https://github.com/wobsoriano/sveltio/issues/1)
### `proxyWithHistory`
This is a utility function to create a proxy with snapshot history.
```ts
import { proxyWithHistory } from 'sveltio/utils'
const state = 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 }
```
## License
MIT