Potential ViewTransitions memory leak with Svelte components

[jerzakm]

Astro Info

Astro                    v3.0.9
Node                     v19.7.0
System                   Windows (x64)
Package Manager          npm
Output                   static
Adapter                  none
Integrations             auto-import
                         @astrojs/tailwind
                         @astrojs/svelte
                         @astrojs/mdx
                         @astrojs/preact

If this issue only occurs in one browser, which browser is a problem?

No response

Describe the Bug

We're having issues with a potential memory leak - if you navigate in the docs several times (especially on an intensive route like /extras examples) - the amount of DOM nodes and JS listeners jumps up drastically.

It seems that Svelte components and listeners aren't destroyed on navigation. I thought it'd get fixed by this PR but I doesn't help our case
#8264

Let me know if it's maybe something that we're doing wrong or if I can help in any way to pinpoint it better.

I created this PR to anchor the docs in time as a reproduction. The fastest way to cause the leak is to click through the sidebar of Extras

What's the expected result?

Dom/listener numbers closer to this

Link to Minimal Reproducible Example

threlte/threlte#601

Participation

• I am willing to submit a pull request for this issue.

[matthewp]

Thanks for the heads up. Will create a demo project and see what happens.

[roryhen]

Hey guys, I just happened to be reading the code for the Svelte integration out of interest for my own use-case, and I noticed that there was a missing reference to element in the file, so the unmount event never gets fired. Which led me to find this issue. Hope the info helps:

astro/packages/integrations/svelte/client.js

Line 28 in f3f62a5

element.addEventListener('astro:unmount', () => component.$destroy(), { once: true });

[matthewp]

Good catch, @natemoo-re should this be the target variable instead?