wickedElements <https://github.com/WebReflection/wicked-elements#wickedelements> is one example:
1. you register CSS selectors used through MutationObserver, so that connected nodes are passed to the 'connected' listener 2. you setup nodes in such listener only if these were not already setup 3. any other disconnect/connect event won't bother nodes setup, if these already handled The disconnected <https://github.com/WebReflection/disconnected#disconnected> utility (used in hyperHTML and lighterhtml): if the node part of the group that has been connected or disconnected was observed, meaning that the WeakSet knew it already, then the event triggers, otherwise nothing happens. In both cases the pattern is pretty similar: const observed = new WeakSet; const observe = node => { observed.add(node); }; const magic = event => { console.log('magic', event.currentTarget); }; const addMagicIfObserved = node => { if (observed.has(node)) node.addListener('magic', magic); for (const child of node.children) addMagicIfObserved(child); }; new MutationObserver(mutations => { for (const mutation of mutations) { for (const node of mutation.addedNodes) { addMagicIfObserved(node); } } }).observe(document, {childList: true, subtree: true}); The list of pros is pretty simple too: 1. with modules scoped utilities, you don't leak undesired details 2. you don't need to cleanup after or change state *unless* you provide a way to stop observing Regards On Tue, Apr 23, 2019 at 9:27 PM Scott Rudiger <[email protected]> wrote: > Would anyone mind sharing some examples of the use cases Andrea and Andy > mentioned? > > On Tue, Apr 23, 2019 at 6:32 AM Michał Wadas <[email protected]> > wrote: > >> You can't do "branding" by properties on frozen objects. >> >> On Tue, 23 Apr 2019, 13:44 Andy Earnshaw, <[email protected]> wrote: >> >>> This is pretty much what I used it for in a previous job role. We loaded >>> and unloaded various iframes, registering APIs and custom elements inside >>> them, adding the `window` object to a WeakSet so the initialisation only >>> ran once. >>> >>> On Tue, 23 Apr 2019 at 10:26, Andrea Giammarchi < >>> [email protected]> wrote: >>> >>>> WeakSet can be very useful in general to avoid *any* object to be >>>> visited/setup twice, not just those coming from user-land classes. >>>> >>>> Circular references, mixins, DOM nodes one-off events handling, and so >>>> on and so fort. >>>> >>>> On Mon, Apr 22, 2019 at 8:26 PM #!/JoePea <[email protected]> wrote: >>>> >>>>> (I edited the broken format of my previous post) >>>>> >>>>> What other use cases are there? >>>>> >>>>> On Mon, Apr 22, 2019 at 11:20 AM #!/JoePea <[email protected]> wrote: >>>>> >>>>>> > WeakSets are perfect for branding and are how I would expect web >>>>>> platform class branding to be explained. >>>>>> > >>>>>> > ```js >>>>>> > const foos = new WeakSet(); >>>>>> > >>>>>> > class Foo { >>>>>> > constructor() { >>>>>> > foos.add(this); >>>>>> > } >>>>>> > >>>>>> > method() { >>>>>> > if (!foos.has(this)) { >>>>>> > throw new TypeError("Foo.prototype.method called on an >>>>>> incompatible object!"); >>>>>> > } >>>>>> > } >>>>>> > } >>>>>> > ``` >>>>>> >>>>>> Just curious, is that effectively the same as what the (current) >>>>>> [private fields proposal]( >>>>>> https://github.com/tc39/proposal-class-fields) offers? >>>>>> >>>>>> ```js >>>>>> class Foo { >>>>>> #isFoo = true >>>>>> >>>>>> method() { >>>>>> if (this.#isFoo) { >>>>>> throw new TypeError("Foo.prototype.method called on an >>>>>> incompatible object!"); >>>>>> } >>>>>> } >>>>>> } >>>>>> ``` >>>>>> >>>>>> - Joe >>>>>> >>>>> _______________________________________________ >>>>> es-discuss mailing list >>>>> [email protected] >>>>> https://mail.mozilla.org/listinfo/es-discuss >>>>> >>>> _______________________________________________ >>>> es-discuss mailing list >>>> [email protected] >>>> https://mail.mozilla.org/listinfo/es-discuss >>>> >>> _______________________________________________ >>> es-discuss mailing list >>> [email protected] >>> https://mail.mozilla.org/listinfo/es-discuss >>> >> _______________________________________________ >> es-discuss mailing list >> [email protected] >> https://mail.mozilla.org/listinfo/es-discuss >> > _______________________________________________ > es-discuss mailing list > [email protected] > https://mail.mozilla.org/listinfo/es-discuss >
_______________________________________________ es-discuss mailing list [email protected] https://mail.mozilla.org/listinfo/es-discuss
