Actual WeakSet Use Cases

Andrea Giammarchi andrea.giammarchi at gmail.com
Tue Apr 23 19:53:56 UTC 2019


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 <scottrudiger at gmail.com>
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 <michalwadas at gmail.com>
> wrote:
>
>> You can't do "branding" by properties on frozen objects.
>>
>> On Tue, 23 Apr 2019, 13:44 Andy Earnshaw, <andyearnshaw at gmail.com> 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 <
>>> andrea.giammarchi at gmail.com> 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 <joe at trusktr.io> 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 <joe at trusktr.io> 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
>>>>> es-discuss at mozilla.org
>>>>> https://mail.mozilla.org/listinfo/es-discuss
>>>>>
>>>> _______________________________________________
>>>> es-discuss mailing list
>>>> es-discuss at mozilla.org
>>>> https://mail.mozilla.org/listinfo/es-discuss
>>>>
>>> _______________________________________________
>>> es-discuss mailing list
>>> es-discuss at mozilla.org
>>> https://mail.mozilla.org/listinfo/es-discuss
>>>
>> _______________________________________________
>> es-discuss mailing list
>> es-discuss at mozilla.org
>> https://mail.mozilla.org/listinfo/es-discuss
>>
> _______________________________________________
> es-discuss mailing list
> es-discuss at mozilla.org
> https://mail.mozilla.org/listinfo/es-discuss
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://mail.mozilla.org/pipermail/es-discuss/attachments/20190423/93c42686/attachment.html>


More information about the es-discuss mailing list