How to do something after any dom update by svelte on the page

[itssumitrai]

Hi,

I want to execute a function after any dom update caused by Svelte on the page. I am aware of afterUpdate lifecycle of svelte, which is exactly what I need. But I need it to be any and all Svelte components on a given Sveltekit page. Now of course it would be a pain to add afterUpdate to every component and easy to miss in any component.

The reason for doing it is for custom instrumentation for various interactive elements. Newly added components could have this custom instrumentation which needs to be updated as this element would get added on the dom later.

One working solution is through using MutationObserver for any newly added nodes, which is not ideal as its not great on perf.

I was wondering if anyone has any good workarounds /ideas for this issue.

Thanks.

[stephane-vanraes]

The reason for doing it is for custom instrumentation for various interactive elements. Newly added components could have this custom instrumentation which needs to be updated as this element would get added on the dom later.

What do you mean by "instrumentation" ?
I have the strange feeling you are trying to do something that is already perfectly possible with Svelte without doing something as abstract as detecting any DOM change.

If not, MutationObserver is what you need (but you probably don't)

[itssumitrai]

The reason for doing it is for custom instrumentation for various interactive elements. Newly added components could have this custom instrumentation which needs to be updated as this element would get added on the dom later.

What do you mean by "instrumentation" ? I have the strange feeling you are trying to do something that is already perfectly possible with Svelte without doing something as abstract as detecting any DOM change.

If not, MutationObserver is what you need (but you probably don't)

Maybe I wasn't clear, but when you are working a real production application, you need to track user's interactions on the page. This involves having some kind of instrumentation/analytics/i13n added on the page. We don't use Google analytics but have our own custom analytics library which involves adding some dom attributes to an interactive element. And when the user clicks on such element, there is a payload send to the analytics server, which collects the payload and then the information can be searched through Big data query/ real time grid system, etc.

When a new interactive element is added through Svelte, we need to tell our analytics library that a new interactive element has been added, start tracking it. I am doing it through MutationObserver atm, but if there was something equivalent to a global afterUpdate on Sveltekit that would be perfect.

[stephane-vanraes]

I would turn this around, instead of having the analytics library detect these elements and adding some listener to them, could you make an action that registers the element with the library ?

<button use:trackme>

and for example

function trackme(node) {
   // Something with the analytics library
   // Alternatively even adding click events to the node here ?
}

As the docs state, actions are run whenever the the element appears in the DOM so it is exactly what you need, and since you mention having written the analytics library yourself it should be possible to add some extra functionality to it to support this.

[itssumitrai]

@stephane-vanraes Thanks for the suggestion. Yeah action still needs to be added to all the interactive elements. But that doesn't to be as that bad. I think it might work for my use case. I doubt there can be many alternatives, so I will mark this as an answer.