Originally posted by **langscot** August 12, 2024
A lot of JavaScript frameworks (React, Vue, SvelteKit, etc.) rely on the handy `HSStaticMethods.autoInit()`method. This is often ran whenever the DOM conditionally re-renders (page change, user logged in, tab navigation, etc.). Whilst this is a good fix, it results in the respective collections array for each plugin growing in size for the duration of the session (without page refresh).
To get around this, we can look to the `HSStaticMethods.cleanCollection()` method, which flushes out the instances from each collection array. So, we could call this clean method before we call the auto intialize method. However, the clean method does not "cleanup" the event listeners or other elements added by the components `init()` methods. This results in things breaking. An example is an overlay toggle, which may have previously "destroyed" overlay instances' `onClick` event listeners attached, resulting in multiple backdrops being shown.
[See my fork](https://github.com/langscot/-clipe-preline), where I have added an abstract method `destroy()` on the `HSBasePlugin` class, and have made the `HSStaticMethods.cleanCollection()` method call this `destroy()` for each instance of `HSBasePlugin` in the respective collection arrays.
I have only really implemented a proper `destroy()` method for the `HSOverlay` class, which removes all event listeners from any DOM elements. This has fixed my issue where multiple backdrops would appear when clicking an open modal button.
Would the maintainers be open to implementing such a mechanism for cleanup, if so, I would be happy to put in the effort to create an issue, discuss a proper design solution, and implement/contribute to a PR. If not, no worries, I will continue to use my fork.
Discussed in https://github.com/htmlstreamofficial/preline/discussions/438