Provide update as second argument parameter to stores

[stephane-vanraes]

Describe the problem

Currently the constructor for a writable store takes as a second argument function that is fired when the store gets a first subscriber, the return of this is fired when the store goes from 1 to 0 subscriber.
This function gives you access to the set function of the store, but in some cases it might be beneficial to actually have access to the update instead.

This would allow to do something like for example this

const store1 = writable()
const store2 = (() => {
   const { subscribe } = writable([], update=> {
     return store1.subscribe(value => {
       update(current => [...current, value])
     })
   })
   return { subscribe }
})()

Describe the proposed solution

Not 100% sure

• change the signature ? the update function can be used a set as well (breaking change though)
• add a third argument ?

Alternatives considered

Use some kind of construction with a temporary variable

const store1 = writable()
const store2 = (() => {
   let arr = []
   const { subscribe } = writable(arr, set=> {
     return store1.subscribe(value => {
      arr = [...arr, value]
       set(arr)
     })
   })
   return { subscribe }
})()

Importance

nice to have

[dummdidumm]

Another possible non-breaking-change-way: writable(initialVal, (set, update) => ..)

[rmunn]

The example use cases look like something that would be easier with derived stores, at least if derived stores also got the same (set, update) treatment that @dummdidumm suggested:

const store1 = writable()
const store2 = derived(store1, (value, (set, update)) => {
  update(current => [...current, value])
}, []);

[stephane-vanraes]

Not really, a derived store just maps one thing in another, it doesn't hold it's own state.

[rmunn]

Derived stores do hold their own state, and if you use the (value, set) form, you can choose whether or not to update that state. E.g.,

const even = derived(count, (value, set) => {
  if (value % 2 === 0) {
    set(value);
  }
});

This isn't a simple map, because it's dropping half the values (assuming count is linked to a count.update(x => x + 1) button) and only updating the derived store half the time.

Derived stores using set are actually quite powerful. Here's a debouncer in just ten eight lines of code (two blank lines don't really count), and the core functionality is just two lines:

import { derived } from 'svelte/store'

const noop = (x) => x;

export function debounce(input, timeoutMs, fn = noop) {
	return derived(input, (newValue, set) => {
		const timeout = setTimeout(() => set(fn(newValue)), timeoutMs);
		return () => clearTimeout(timeout);
	});
}

[WHenderson]

The (non-breaking) solution I came up with for my store library was to have the update function as a property on the set function.

Would be great if svelte adopted the same syntax, but I'm obviously biased 😊

See: https://whenderson.github.io/stores-mono/modules/_crikey_stores_svelte.html#derive

[stephane-vanraes]

@WHenderson just a heads-up you should check Svelte v4, this issue has been fixed as a "breaking change" and your custom store is likely no longer compatible with the expectation users might have. Relevant PR: #6750

[WHenderson]

Thanks @stephane-vanraes , I appreciate the heads up :-)