It was really easy in Elm 0.18, to add <script> tag with some javascript that will be executed when the element appears in DOM.

div [] [

node “script” [type_ “application/javascript”]

[text “alert(‘whatever’)”]

]



To prevent XSS attacks, Elm 0.19 strips the <script> tags in Elm generated HTML. In our project we had used this trick at a couple of places like to display WYSIWYG editor etc. When upgrading our app to 0.19, as expected the WYSIWYG editor stopped working.

This could be solved with custom elements, but I found it too complex for my taste. A quick Google foo landed me to Arrive.js, it uses Mutation Observers for watching DOM elements creation or removal. It gives us document.arrive and document.leave events that are invoked when an element is added or removed from DOM respectively.

document.arrive("#barContainer", () => {

// your javascript code

}) document.leave("#barContainer", () => {

// your javascript code

})

For the sake of a demo, let’s integrate D3.js in our Elm app. Here we wait for appropriate element creation, then render the chart.

Most interesting part of our Elm app, is the view function, here we simply create the appropriate DOM element depending on the state.