How to synchronized stores

[ProphetLamb]

A recent requirement had me synchronize certain properties in a settings (localstorage backed) store with certain properties in superforms form store.

• If the user changes the settings the form changes.
• If the user changes the form the settings change.

The settings are not always available, therefore bind:ing to the settings store instead of the form wasn't possible here. Furthermore, superforms only respects the form store for an entirely client-side use:enhance "request".

No easy solution, bummer.

1. Try to $: if reactively assign stores to synchronize the properties, first the one, then the other way.
   => Cyclic reference error.
2. Try the same but with subscribe(sender => update(receiver => ...))
   => You guessed it; infinite loop.
3. Try to protect the update by checking a reentry lock for zero state.reentry += 1; update(receiver => ...); state.reentry -= 1
   => Still; finite loop

Let's investigate. The writable.set executes a global queue of pending event sequentially, not recursively.

The trace of the order of operation looks like so:

one enter depth=0
one update two depth=1
one exit depth=0
two enter depth=0
two update one depth=1
two exit depth=0
...

Instead of this:

one enter depth=0
one update two depth=1
two enter depth=1
two update one depth=2
...
two exit depth=1
one exit depth=0

The solution is to unsubscribe the other store subscriber, before updating (so that it is never added to the Set of pending events) and then immediately resubscribe:

import type { Unsubscriber, Writable } from "svelte/store";

function noop() { }

class State {
  unsubscribeOne = noop
  unsubscribeTwo = noop

  unsubscribe() {
    this.unsubscribeOne()
    this.unsubscribeTwo()
    this.unsubscribeOne = noop
    this.unsubscribeTwo = noop
  }
}

export function synchronize<T>(one: Writable<T>, two: Writable<T>, get: (item: T) => { [K in keyof T]?: T[K] }): Unsubscriber {
  let state = new State();
  createSubscribeOne()
  createSubscribeTwo()

  function createSubscribeOne() {
    state.unsubscribeOne = subscribePreventReenty(one, two, 'one', () => {
      state.unsubscribeTwo()
      return () => {
        createSubscribeTwo()
      }
    });
  }
  function createSubscribeTwo() {
    state.unsubscribeTwo = subscribePreventReenty(two, one, 'two', () => {
      state.unsubscribeOne()
      return () => {
        createSubscribeOne()
      }
    });
  }

  function subscribePreventReenty(sender: Writable<T>, receiver: Writable<T>, name: string, resubscribeReceiver: () => (() => void)) {
    let initial = true
    return sender.subscribe(sender => {
      if (initial) {
        console.log(`${name}: initial`)
        initial = false
        return
      }
      console.log(`${name}: begin`)
      var subscribe = resubscribeReceiver()
      receiver.update(receiver => {
        console.log(`${name}: update other`)
        return { ...receiver, ...get(sender) }
      })
      console.log(`${name}: end`)
      subscribe()
    })
  }
  return state.unsubscribe
}

Is there a feature to synchronize stores, without this hack-job of a solution? Does anyone have a better idea on how to solve this?

onMount(
	synchronize(loadoutForm, localSettings, (o) => {
		return { league: o.league, ... };
	})
)

Now that I think about it a parameter in the writable.update(Updater<T>) function to force the set safe_not_equal check into either branch would be neat...

type PostUpdateState = "default" | "unchanged" | "modified";

export type Updater<T> = (value: T) => T | (value: T) => (T, PostUpdateState);

Thanks a lot in advance. Merry Christmas everyone!

[coryvirok]

I'm not sure if this is what you're after, but I've encountered similar requirements as you describe before. In my scenario, the changes were made by a user to a form. Instead of using bind:value={value} on the input, I added a on:input handler that would update the store and then set the input's value explicitly using a derived store.

eg:

<script>
  const store1 = writable('') // build from local storage
  const store2 = writable('') // build from superforms
  const store3 = derived([store1, store2], ([$store1, $store2]) => {
    // choose value from either store1 or 2
    return $store1 ?? $store2
  })
</script>

synchronized input 1:
<input type='text' on:input={(e) => set(store1, e.target.value)} value={$store3} />
synchronized input 2:
<input type='text' on:input={(e) => set(store2, e.target.value)} value={$store3} />

[Pandoks]

I have a similar use case but I have two superforms. superform 1 is a subset of superform 2 but I want them synchronized. I'm having trouble figuring it out. (ie. superform 1: username email, superform 2: username, email, password) I only want to synchornize username and email.