How to use $effect with a non-Svelte object

[mitkury]

When we reference non-Svelte objects in Svelte components, is it okay to mutate those objects from $effect, as well as subscribe to changes from $effect and then mutate $state from callbacks?

Here is a an example in a playground to show what I mean.

Changing a non-Svelte object from $effect:

let emojisGen = new RandomEmojis();
let emojisCount = $state(9);
let interval = $state(3);
let showEmojis = $state(true);

$effect(() => {
  emojisGen.setup(emojisCount, interval);
});

Subscribing to changes from a non-Svelte object:

let emojis = $state(emojisGen.getEmojis());

$effect(() => {
  emojisGen.observe(onNewEmojisGen);

  return () => {
    emojisGen.unobserve(onNewEmojisGen);
  };
});

function onNewEmojisGen() {
  emojis = emojisGen.getEmojis();
}

[brunnerh]

Sure.

Something similar to the observe/unobserve is often done with browser objects like MutationObserver/IntersectionObserver. Or you have an object like a MediaQueryList that dispatches events so you have addEventListener/removeEventListener.

(If the effect is not dependent on DOM state updates, you could switch to $effect.pre.)

[mitkury]

Now it seems obvious, and there's a mention in the docs:

you can also create your own effects with the $effect rune, which is useful when you need to synchronize an external system (whether that’s a library, or a element, or something across a network)

But at the start of the day, I wasn't so sure how to integrate my system in Svelte, so I went exploring derived before arriving at an idea: "just use effect to subscribe and mutate the state of that system".

I bet a simple example in the docs or a reference to mine or a similar playground that explores $effect with an "external system" would be useful for others.

[brunnerh]

You could open up a documentation issue regarding this.