adding link tag to head

158 views

Skip to first unread message

Robert Walter

unread,

Jun 23, 2016, 7:38:06 AM6/23/16

to Elm Discuss

Hello,

I think I went down the rabbit hole too fast and got something working which I don't understand why/how it works.

Context: I try to the Ace editor in my Elm application. I found this discussion here, that helped me to first embed my generated "aceIntegration.js" into a HTML page that has also features an Ace editor.

As Ryan Rempel points out in the mentioned thread, it would be nicer if one could include the JS component in their Elm program, so I tried his suggestion using juicy-ace-editor, a custom element wrapper around Ace to enable its integration by using a DOM node.

I tried to understand how I could add a "link tag" to my elm rendering logic so that I can integrate the juicy-ace-editor tag and use it in Elm. The result's like this:

port module AceIntegration exposing (..)


import Html exposing (div, node, text)
import Html.Attributes exposing (rel, href)


main =
  div []
  [ 
    node "link" 
      [ rel "import"
      , href "bower_components/juicy-ace-editor/juicy-ace-editor.html"
      ] [ ]    
  
  , node "juicy-ace-editor" [ ] 
      [ text "my editor content"]
  ]

<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>ACE with Elm</title>
    <script src="./aceIntegration.js"></script>
    <script>window.Elm = require('./aceIntegration.js');</script>
  </head>

  <body>
  </body>

  <script type="text/javascript">
    Elm.AceIntegration.fullscreen();
  </script>

</html>

Notice that I use the HTML above as main entry point for electron to run this as a desktop app, just as a side note. But it works (the Ace editor is there and I can use it). What I cannot quite wrap my head around (since I found this by pure brute-force) is the way I create the link node in Elm and actually make juicy-ace-editor available? Is Elm taking care of adding that to the head node of the DOM somehow? Is it not necessary to have this "link node" as a child of the "head node"? Looking at the generated AceIntegration.js didn't really help me understand this yet, and yes, I'm new to web development.

Also, I'm curious if there is a better way to integrate a JS component that can modify the DOM? If this is fine, I plan to use the exposed "change" event of "juicy-ace-editor" to get notified about changes in my Elm program.