When using Turbolinks 5 events are not bound after using the browser Back button

[Mitcheljager]

I have a component that's simply a button that console.logs when clicked:

// application.js
import Rails from "@rails/ujs"
import Turbolinks from "turbolinks"

Rails.start()
Turbolinks.start()

import WebpackerSvelte from "webpacker-svelte"
import Button from "../src/components/form/Button.svelte"

WebpackerSvelte.setup({ Button })

// src/components/form/Button.svelte
<a on:click={ () => console.log("clicky") }>Click me</a>

This works as you would expect. Now when I navigate away from this page and then press the back button in the browser the button still renders (as it was cached by Turbolinks) but the click event no longer fires.

Disabling caching in Turbolinks fixes the issue, but caching would be nice to keep.

[Mitcheljager]

I've managed to fix it myself by emptying the element before caching.

document.addEventListener("turbolinks:before-cache", function() {
  const svelteComponents = document.querySelectorAll("[data-svelte-component]")
  svelteComponents.forEach(element => element.innerHTML = null)
})