@watch decorator

[hanc2006]

I have been experimenting this library for a week, because I like it and I would like to integrate it into a real project.

I got a weird error using the sl-include component. This happened when I included an HTML page that contained components that used the disconnectedCallback method for cleanup internal resources (such as remove event listeners, or destroy other components like the popup).

What's up? The sl-include component loads the HTML page content twice. But why? This strange behavior led me to investigate further.

What I found is related to the @watch decorator which requires a component update even when it's not really needed.

So summing up:

1. The sl-include component append the HTML content
2. The sl-include component require an update (because the property is observed with @watch decorator)
3. The sl-include component replace the HTML content previously loaded
4. All the components previously added in the DOM are disconnected and reconnected
5. All component call the internal disconnectedCallback method
6. All components that relay in @query method (or other DOM manipulations) they will fail because the component does not yet exist

This is where the error is throw (this.button is NULL):

I did some testing and I think the decorator should be modified like this:

@claviska what do you think about?

[claviska]

Thanks for bringing this to my attention. I've added a test to <sl-include> to make sure we're only seeing the load occur once.

The core of this problem is in the watch decorator, and there are other things I'm not happy about in its current state. As of now, @watch runs on updated which means both the property has changed and the update has occurred. This can lead to subtle inefficiencies, so I'm in the process of reworking it.

Instead of running on updated, @watch will now run on update. This means we'll be able to tap into the lifecycle earlier and updating props within a watch handler will occur before the render (much more efficient). I'm also adding an option so you can skip the update if the component hasn't updated yet (i.e. before init):

@watch('prop', { waitUntilFirstUpdate: true })
handler() {
  // this will run on change but only after the component has updated at least once
}

Internally, it uses this.hasUpdated to determine if an update has been performed.

This change to @watch also lets us tap into the updated lifecycle by awaiting updateComplete:

@watch('prop')
async handler() {
  await this.updateComplete;

  // this code will run after the next update
}

So now we'll get the best of both worlds — just need to be a bit more conscious about the lifecycle. I'll push my changes once I finish updating the rest of the components.

[claviska]

The @watch decorator was reworked in 16e7287 and the include test was added in 3b2b5ee.

[hanc2006]

I saw the new commit 👍

About the sl-include component I have some issue listening to the sl-load event

Everything works fine if the file to be included does not contain other components that emit the same event (sl-icon). In this case, the event is triggered more times. I don't know if it's a bug, but I solved it like this (file include.ts):

  constructor() {
    super();
    this.addEventListener('sl-load', e => {
      // currentTarget is this component, where the handler runs on it
      // target is one nested child component where the event came from
      if (e.target !== e.currentTarget && e.currentTarget === this) {
        e.stopImmediatePropagation();
      }
    });
  }

[claviska]

Just like click and mousedown, the sl-load event is used by a number of components, including <sl-icon>. The correct way to check for this is not in the component (as this will suppress valid events originating from other components) but in your logic. Something like this:

const include = document.querySelector('sl-include');

include.addEventListener('sl-load', event => {
  if (event.target === include) {
    // The event was emitted from the include
  } else {
    // The event bubbled up from a child element
  }
});

[hanc2006]

👍 At first I used this way. Then I thought it was something to fix...