Cleanup van.derive listener

[Atmos4]

In a context implementation I attempted with van-element (see Codepen) I am trying to cleanup van.derive after a context consumer unmounts.

So far I just prevent callback execution with a flag, but my understanding is that it will still be in the _listeners array

Is there a better, more idiomatic way to remove a state's listener?

(this context implementation is roughly following the webcomponent context proposal. Haven't tested, but my gut feeling is that it is also a viable pure VanJS approach to context providers and consumers)

[Atmos4]

It seems like my approach kinda works and the state's listener will be garbage collected after a GC cycle 🤔

If anyone has some more time and fresh eyes to test it out, I would appreciate it greatly 🙏

[Tao-VanJS]

I'm confused by your example. The van.derive is defined in the provide function. Thus we would expect it to be GC-ed when the provider is unmounted, not when a consumer is unmounted, right?

[Atmos4]

That is right. I don't fully understand why the listener gets GC-ed. That is what I am trying to figure out...

[Tao-VanJS]

Are you sure the listener is indeed GC-ed? I am not seeing provide (thus van.derive) being called multiple times.

[Atmos4]

What I am trying to achieve is what you described above: van.derive clearing when the unsubscribe method is called.

let subscribed = true;
function unsubscribe(){
  subscribed = false;
}
van.derive(() => subscribed && callback(someStateVal, unsubscribe));

[Atmos4]

@Tao-VanJS I edited the Codepen, adding the following in the provider:

van.derive(() => console.log(val.val, val._listeners.length));

This way it is a bit clearer to see when the listeners get GC-ed. On my computer it happens if the value has changed once.
(maybe it's not even GC, maybe it's just how van.derive is supposed to work 🤔 when it can't capture any deps, it just clears)

[Atmos4]

BTW here is another implementation of the same context using pure VanJS
https://codepen.io/atmos4/pen/YzgWXGN

The GC in the example doesn't work because I removed the unmount part (specific to van-element)

[Tao-VanJS]

I tried this example manually. I am not seeing GC happening when the consumer is removed. _listeners are not being removed.

[Atmos4]

This example is not supposed to work, because I removed the unmount part, my bad for not specifying it in the message

[Tao-VanJS]

Ah.., I think I know the reason now:

For the derivation:

van.derive(() => sub && e.callback(s.val, () => (sub = false)));

Whenever it's called, it recalculates the dependencies on-the-fly and updates corresponding listeners based on it. Thus, when sub is true, the derivation depends on s. When sub becomes false (after unmount), the derivation won't depend on s anymore, which is why you're seeing the listeners get cleaned up.

[Atmos4]

Thank you for your help 🙏