Could store.observer be automatically cancelled on component destruction?

[aphitiel]

When destroying a component, observers observing component state get cancelled automatically while observers on store stay alive.

oncreate() {
  this.observe(...  // Gets cancelled
  this.store.observe(... // Stays alive

This came as a surprise to me, with a bit of foot-gun potential. Would it make sense to autocancel store-observers, too?

Here is a slightly contrived REPL. Nested.html has observers spammig the console. The store.observer keeps logging after pressing the button.

[Rich-Harris]

I'm not sure there's a good way to achieve this — when you call this.store.observe, the store has no way of knowing which component called it, so there's no way to remove the observer when the component is destroyed. It's basically like any other listener on an external object, you have to remove it manually:

oncreate() {
  const observer = this.store.observe('foo', ...);
  this.on('destroy', observer.cancel);
}

[Conduitry]

I was thinking it's possible maybe to monkeypatch the instance of store that each component gets. But that does seem fairly ugly. It's probably best to make component authors deal with this, or perhaps to provide something in svelte-extras that registers an observer and automatically deregisters it when a particular module is destroyed.

[ekhaled]

Can we not do this.observe('$foo', ....)?

[Rich-Harris]

@ekhaled's suggestion should work, but doesn't (in dev mode, at least) due to a bug: https://svelte.technology/repl?version=1.55.0&gist=7a951686a98f98bfad9c21d240ade73b

Monkey-patching would be a bit gross — I think this.on('destroy', observer.cancel) is a reasonable expectation.

[Rich-Harris]

Fixed the bug with observing $foo in dev mode, so I think we should close this.

[aphitiel]

Perfect, thanks a lot! Observing $foo actually was the first thing I tried, but didn't see it in the docs. Glad it's supposed to work!