Command store with live updating

The command store that I built yesterday is great for creating a log of operations. But what if you want to show changes in realtime. If a value is databound to a field, that could mean updating on every key press.

It would be easier to have 2 stores:

1. A “live” store that can be mutated directly, ie. with data binding.
2. A command store where changes are applied once committed.

Implementation

We define 2 stores, effectively duplicating the data:

let store = writable(initialstate)
let commandStore = commandStore(initialstate, commands)

And then our inputs bind directly to the “live” store:

<input type="color" bind:value={$store.settings.background} on:blur={save}/>

The save() function is only called after we leave the field, that avoids creating a command on each key press:

function save() {
  commandStore.execute('updateSettings', {
    background: $store.settings.background
  })
}

Code

https://svelte.dev/repl/e780caa61d4248288e76ab76cc04ca95?version=3.37.0

Demo

Notes

• What happens if on:blur hasn’t fired yet, and the user closes the tab. Currenty, that change in lost.