svelte.js

// On each page load, any element with a [data-svelte] attribute gets injected with
// the component defined in this attribute. Eg `data-svelte="poker"` will load the
// `poker.svelte` component into that element.

const req = require.context('../', true, /\.(svelte)$/i);
const components = {}
req.keys().map(key => {
  const name = key.match(/\w+/)[0];	
  components[name] =  req(key).default || req(key)
});

let apps = [];
document.addEventListener('turbolinks:load', () => {
  const targets = document.querySelectorAll('[data-svelte]')

  targets.forEach(target => {
    const app = new components[target.dataset.svelte]({
      target: target,
      props: target.dataset
    });
    apps.push(app);    
  });
})

document.addEventListener('turbolinks:before-cache', () => {
  apps.forEach((app) => {
    app.$destroy();
  });
  apps = [];
})