How to trigger a function when a $state changes

[KieranP]

I have a settings.svelte.ts file. Inside, there are dozens of different settings. When one of them changes, I want to be able to trigger a function, e.g.

const ignoredReposSet = fetchAsSet('ignoredPrereleases') // fetchAsSet loads stringified json array, parses into JS Set
export const ignoredRepos = $state(ignoredReposSet)

import { ignoredRepos } from 'settings.svelte.ts'

function ignoreRepo(repo) {
  ignoredRepos.add(repo)
  localStorage.setItem(key, JSON.stringify([...ignoredRepos]))
}

The issue is that I need to add that localStorage line each time I change ignoredRepos.

I'm looking for way to do something like this:

const ignoredReposSet = fetchAsSet('ignoredPrereleases')
export const ignoredRepos = $state(ignoredReposSet, (value) => {
  localStorage.setItem(key, JSON.stringify([...value]))
})

import { ignoredRepos } from 'settings.svelte.ts'

function ignoreRepo(repo) {
  ignoredRepos.add(repo)
}

That way, if ignoredRepos has one added/removed, the localStorage code will always be run, and it is tied to the $state rune. But obviously this doesn't exist.

There is $effect, but I would need to define 15 $effect blocks for 15 settings, because one effect block would call a bunch of local storage sets if just one changes.

Any ideas for something cleaner?

[brunnerh]

But obviously this doesn't exist.

Well, it could exist, but the PR for it is stuck in limbo.

Meanwhile, you would usually use an $effect for that.

$effect(() => {
    localStorage.setItem(key, JSON.stringify([...ignoredRepos]));
});

As long as you read the object deeply (which JSON.stringify does), the effect will trigger on any change to the object.

(Note that the $effect will trigger at least once on component mount. So if e.g. the ignoredRepos state is invalid at that point, you might have to guard against that. Note that the guard condition has to be stateful as well, otherwise the $effect will not rerun once the condition changes.)

[KieranP]

The issue with $effect is that with 15 settings, I'd need 15 $effect blocks, which isn't great. And if I put them all in one $effect block, changing one setting would cause the whole set to run, which isn't great either. So either way, not a very clean pattern. Shame that #15069 is stalled, it would have been exactly what I needed.

[webJose]

Just use a persisted state implementation, like the svelte-persisted-state NPM package. The runed package also has an implementation.

[brunnerh]

Yes, the $state + $effect can be extracted to a function or class, though usually at the cost of having to access the value via a property instead of directly. But that is probably still better than duplicating $effect everywhere.