Rails 6 & Svelte with preloaded data

README.md

Rails 6 & Svelte with preloaded data

rails new rails-6-svelte --webpack=svelte
cd rails-6-svelte
rails generate controller welcome index

app.svelte

<!-- 
app/javascript/app.svelte
-->

<script>
  export let name;
</script>

<style>
  h1 {
    color: #FF3E00;
  }
</style>

<h1>Hello {name}!</h1>

index.html.erb

<!--
app/views/welcome/index.html.erb
-->

<%= svelte_component("app", {name: "preloaded data"}) %>

svelte_app.js

//
// app/javascript/packs/svelte_app.js
//

/* eslint no-console: 0 */
// Run this by adding <%= javascript_pack_tag 'svelte_app' %> to the head of
// your layout file, like app/views/layouts/application.html.erb.

context = require.context("../", false, /.svelte/);

document.addEventListener("turbolinks:load", () => {
  if (window.initializedSvelteComponents) {
    window.initializedSvelteComponents.forEach(component => {
      component.$destroy();
    });
  }

  window.initializedSvelteComponents = [];

  context.keys().forEach(file => {
    const componentName = file.replace(/\.\/|\.svelte/g, "");
    const targetSvelteName = `svelte-${componentName}-root`;

    const root = document.querySelector(`[svelte-root=${targetSvelteName}]`);
    root.removeAttribute("svelte-root");

    if (root.childNodes.length > 0) {
      root.childNodes.forEach(el => {
        el.remove();
      });
    }

    const requiredApp = require(`../${componentName}.svelte`);

    const props = root.getAttribute("data-props");
    root.removeAttribute("data-props");
    let parsedProps = {};
    if (props) {
      parsedProps = JSON.parse(props);
    }

    const component = new requiredApp.default({
      target: root,
      props: parsedProps
    });

    window.initializedSvelteComponents.push(component);
  });
});

svelte_helper.rb

#
# app/helpers/svelte_helper.rb
#

module SvelteHelper
  def svelte_component(name, props = {})
    name = name.to_s
    options = {}
    options[:'data-props'] = props.to_json.html_safe if props.present?
    options[:'svelte-root'] = "svelte-#{name.dasherize}-root"
    content_tag(:div, nil, options)
  end
end

Result