Implementing proper cleanup of components when destroyed

[jahaganiev]

Discussed in #438

^{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, 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.