wobsoriano / sveltio

Proxy-state with valtio.

sveltio

State management solution for Svelte using proxies. Powered by valtio.

Installation

pnpm add valtio sveltio

Usage

// store.ts
import { proxy } from 'sveltio'

export const state = proxy({ count: 0 })

Read from snapshots, mutate the source.

<script lang="ts">
  import { useSnapshot } from 'sveltio'
  import { state } from './store'
  const snap = useSnapshot(state)
</script>

<button on:click={() => state.count++}>
  Clicks: {$snap.count}
</button>

Utilities

derive

You can subscribe to some proxies and create a derived proxy.

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, optimizing function calls is possible.

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?

proxyWithHistory

This is a utility function to create a proxy with snapshot history.

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

sveltio's Issues

Difference between derive and proxyWithComputed?

It sounds like both derive and proxyWithComputed can be used to create new attributes that respond to changes in the original state, but sounds like there's a subtle difference?