Connect Stores to Element connected/disconnected lifecycle

[eddyloewen]

Currently the only way to init things in Stores is the constructor. But it is unsafe to use browser globals in there. And also there is no chance to eg remove document listeners.

[quarkus]

Hmm ... not sure about that ?

As long as the last element referencing the store will be removed from the document at some point there will be no hard reference to the store which would allow GC to clean up at some point?

And if its a singleton than it wight as well persist, right ?

Also we might want to move this to discussions, shall we ?

[eddyloewen]

It is not about the store itself. I thought about other things you do/register from the store.

import { Store } from '@webtides/element-js';

export default class MatchMediaStore extends Store {
    _mediaQueryList;
    matches;

    _onMatchMedia = (e) => {
        this.matches = e.matches;
        this.requestUpdate();
    };

    constructor(mediaQueryString) {
        super();
        this._mediaQueryList = window.matchMedia(mediaQueryString);

        this.matches = this._mediaQueryList.matches;
        this.requestUpdate();
        this._mediaQueryList.addEventListener('change', this._onMatchMedia);
    }
}

It is porbably not the worst, but there is currently no way to remove added event listeners again. But I think what is more important is the fact that this code is not SSR safe since we cannot use/have window in the constructor in the server. For custom elements we can put all client related code in connected() and it will be fine. For stores the only place to init something is the constructor.

I have seen something alike for lit: https://github.com/lit/lit/blob/main/packages/reactive-element/src/reactive-controller.ts#L53C1-L53C38

[quarkus]

Understood .. but since the store is not referenced anywhere i assume the internals will get cleaned up eventually. Maybe naiive but in theory .. . https://developer.mozilla.org/en-US/docs/Web/JavaScript/Memory_management#:~:text=//%20The%20object%20that%20was%20originally%20in%20%27x%27%20has%20now%20zero%0A//%20references%20to%20it.%20It%20can%20be%20garbage%2Dcollected.

As for the client/server part ... there is always the possibility to expose a dedicated on/off/pause function that could be used by elements only clientside || serverside.

I don't like the idea too much of coupling them Store and Element even more (although they are already for the autoUpdate).

Also its quite hard to decide when a (singleton or shared) store becomes void as it might be referenced during runtime. The only Option i can think of is to maybe proxy the observers list and destroy whenever that becomes empty !? But that also sounds like we'll introduce quite a few runtime issues ...