Svelte components within hotwired

When using svelte within Hotwired, one of the most critical points is how to clean orphan javascripts.

When you just build svelte elements by svelte mount, and navigate to another page, the html part of the component is gone, but the javascript INSTANCE (not the script or html) stays.

This is solved by the cleanMount helper.

This is nothing else than a wrapper around the svelte mount method, but it adds a reference to a global array together with the reference to the HTML. On turbo:visit it checks for this reference, and, if it is broken, it removes the javascript from the header.

So, the developer is advised, please always to use this helper instead of the svelte mount method and add a trigger within your application.js that cares for the cleaning on every page-visit.