Action lifecycle in custom elements

[arackaf]

Is this about svelte@next? This project is currently in a pre-release stage and breaking changes may occur at any time. Please do not post any kind of bug reports or questions on GitHub about it.

No.

Describe the bug

Right now, when you put an action on a component that's compiled into a custom element, the action runs immediately, upon creation, with the destroy callback never running.

It would seem that the more correct behavior would be for the action to run when the web component is connected, with the destroy callback running when disconnected.

The fix would likely be related to the code in this PR, which hasn't quite merged yet

#4522

Logs

n/a

To Reproduce

No repro - I've never been able to get custom elements to run in the REPL.

Expected behavior
A clear and concise description of what you expected to happen.

See above.

Stacktraces
If you have a stack trace to include, we recommend putting inside a <details> block for the sake of the thread's readability:

Stack trace

Stack trace goes here...

• Your browser and the version: (e.x. Chrome 52.1, Firefox 48.0, IE 10)

Chrome

• Your operating system: (e.x. OS X 10, Ubuntu Linux 19.10, Windows XP, etc)

Mac

• Svelte version (Please check you can reproduce the issue with the latest release!)

3.32.3

• Whether your project uses Webpack or Rollup

webpack

Severity
How severe an issue is this bug to you? Is this annoying, blocking some users, blocking an upgrade or blocking your usage of Svelte entirely?

Minor

Note: the more honest and specific you are here the more we will take you seriously.

Additional context
Add any other context about the problem here.

[hontas]

Could you provide a small code example to illustrate the problem?

[arackaf]

@hontas sure. This is the one example I happen to have, but this applies to any action. So if you have this function / action

export function slotChildAdded(slotEl, { onChild, onAttributesChanged } = {}) {
  let mutationObserver;
  slotEl.addEventListener("slotchange", slotChangeHandler);

  function slotChangeHandler(evt) {
    const el = slotEl.assignedElements()[0];

    if (el != null) {
      // mutating children not supported
      slotEl.removeEventListener("slotchange", slotChangeHandler);
      onChild && onChild(el);

      if (onAttributesChanged) {
        handleElementsAttributes(el, onAttributesChanged);
        mutationObserver = new MutationObserver(handleElementsAttributes.bind(null, el, onAttributesChanged));
        mutationObserver.observe(el, { attributes: true, childList: false, subtree: false });
      }
    }
  }
  return {
    destroy() {
      mutationObserver && mutationObserver.disconnect();
      slotEl.removeEventListener("slotchange", slotChangeHandler);
    }
  };
}

which is used like this

<slot name="slot1" use:slotChildAdded={{ onChild: slotChildExists, onAttributesChanged: inputAttributesChanged }}></slot>

then, ideally, the action should run when the web component is connected, with the destroy function running on disconnect. Instead, it currently runs when created with the destroy callback never running (sound familiar?)

add_actions.ts in src/compiler/compile/render_dom/wrappers/shared seems like the relevant module, with more subtle integration with the Block class, but I don't have the expertise in the Svelte codebase to know exactly what the solution should look at.

[hontas]

It seems like a tricky beast since the the action-destroy call is ultimately triggered by componentInstance.$destroy that does not run on disconnect which was the initial problem I was trying to solve in #4522

So from how it looks now I wouldn't use (pun intended) the use-directive with custom elements.

But I think you can make it work by doing something like this instead:

<script>
import { onMount } from 'svelte';

let slotEl;

function mutatingSlot(slot, { onChild, onAttributeChange }) {
  const el = slot.assignedElements()[0];
  let mutationObserver;
  
  if (el) {
    onChild(el);

    mutationObserver = new MutationObserver(onAttributeChange);
    mutationObserver.observe(el, { attributes: true, childList: false, subtree: false });
  }

  return () => {
    mutationObserver && mutationObserver.disconnect();
  };
}

const onChild = (el) => {};
const onAttributeChange = ([MutationRecord]) => {};

onMount(() => {
  const onDestroy = mutatingSlot(slotEl, { onChild, onAttributeChange });

  return () => {
    onDestroy()
  };
});
</script>

<slot bind:this={slotEl} />

Good luck!

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[arackaf]

bread goes stale, not issues

[nolanlawson]

I noticed this same issue (nolanlawson/emoji-picker-element#152 (comment)) while I was trying to migrate to the new lifecycle behavior from #4522. I was using ResizeObserver instead of MutationObserver, but the effect is the same.

It's worth noting that browsers can be smart about automatically GC'ing event listeners and *Observers (Resize/Intersection/Mutation) when the elements they're observing are no longer referenced, but they don't necessarily do that. The thread in this Chrome bug is very informative about that. (TLDR: not all of the browsers GC ResizeObserver/IntersectionObserver when they could.)

Just spitballing, but I can see three potential solutions:

1. Don't use actions in custom elements (:cry:)
2. Have actions return an object with an unmount function as well as destroy (would create a disparity between Svelte components used as custom elements and those that aren't, but would solve the problem)
3. Use FinalizationRegistry or some other fancy mechanism to automatically call element.$destroy() when the element is no longer referenced anywhere (feels a bit over-complex, and has middling browser support, but maybe it's the most straightforward solution)

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.