Working with Turbolinks about elm-rails

[kirchner]

I think, when using turbolinks, rather then adding an event listener for DOMContentLoaded , you have to use the events provided by turbolinks (here is a list). So the js loading your elm app should look sth like this:

document.addEventListener('turbolinks:load', () => {
  const node = document.getElementById('elm-container');

  Elm.Main.embed(node);
});

You still could run into the problem that your elm app is loaded several times on revisits to the page containing this javascript. (Not on hard reloads using the browser.)

[aaronshim]

@kirchner Are there suggestions on how to avoid the problem of the Elm app loading several times? I've tried the following approach but I'm wondering whether there are saner solutions:

document.addEventListener('turbolinks:load', () => {

  // Only load if Elm hasn't previously loaded
  if (document.getElementsByClassName('elm-already-run').length == 0) {

    // Use global state to mark as already having run-- eww!
    let marker = document.createElement('div');
    marker.className = 'elm-already-run';
    document.body.appendChild(marker);
    
    const node = document.getElementById('elm-container');
    Elm.Main.embed(node);
  }
})

[kirchner]

@aaronshim we ended up doing sth like this

// app/javascript/packs/elm_app.js

import Elm from ‘ElmApp/Main’

$(“#elm-container”).empty();

const container = $(“#elm-container”)
const flags = JSON.parse($(“#elm-flags”).data(“data-flags”))

var app = Elm.ElmApp.Main.embed(container, flags)

where the html template looks like this

// app/views/foos/show.html.slim

#elm-container
#elm-flags(data-flags[email protected]_json)

= javascript_pack_tag “elm_app”

probably not so much better i think =)