bug: Memory leak for components produced by the dist output target

[seregindev]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Stencil Version

4.25.0

Current Behavior

Components created by the output target dist still have the a memory leak.

The latest fix of that issue indeed fixed half of the problems. If we take a look closer we'll see that:

1. introduced a new function that removes items from the WeakMap here
2. this function will be called in the disconnectedCallback here

And that works perfectly for the type dist-custom-elements. In the second point, we can see that this function is called.

But for the type dist this function wasn't called here

---

To reproduce that I've created an empty project here. That project has two types of output: dist and dist-custom-elements.

If we run the build command and compare the output results we'll next thing: the function deleteHostRef will be called only in the specific dist-custom-elements output type.

I've also tried to modify the output of the dist by adding the hostRefs cleaning, but it didn't change the result. I guess I'm missing something here:

Demo

I recorded a small demo to check that. The app renders 121 components, so I removed all those components with the console and then checked the memory.

In the first part, I perform a memory test for the dist output target. We see that the components are still stored in memory.

In the second part I connect files generated by the dist-custom-elements and do the same but there are no components.

Expected Behavior

I guess if we add the deleteHostRef for the disconnectedCallback here it might fix the issue.

System Info

Steps to Reproduce

1. Clone the repo: https://github.com/seregindev/stencil-memory-test
2. run npm i && npm run build
3. Compare the outputs
4. Connect components generated by the dist
5. Delete components and measure memory
6. Components are still kept
7. Connect components generated by the dist
8. Delete components and measure memory
9. Components are removed

More here: https://www.youtube.com/watch?v=UC41uNGhGmg

Code Reproduction URL

https://github.com/seregindev/stencil-memory-test

Additional Information

No response

[christian-bromann]

This has been released in @stencil/core@4.25.2

[seregindev]

Many thanks @christian-bromann! I just tested and there is no more memory leak! Great job 💪