DOM-modifying JS libraries possible without Native code?

Dave_Doty 2018-03-13 23:37:32 UTC #1

I looked around for a long time for a way to embed a code editor (such as Ace or CodeMirror) in an Elm application. Most things didn’t work, or had unexpected behavior, probably due to the fact that those JC libraries modify the DOM, which Elm doesn’t play well with.

I tried every option on this list, and the only thing that I was able to get working is this: https://github.com/DenisKolodin/elm-ace

It uses native code, in some way that I don’t fully understand, to be able to embed the Ace code editor in an Elm application (as opposed to what I think Ellie does, which is to have a JS application with Elm components, keeping the editor itself away from Elm). My question in the subject line may be misplaced, in the sense that I’m not sure whether DOM-modifying is the crucial idea here.

Perhaps it will never be the case that a DOM-modifying library such as Ace could ever be used within an Elm application, so perhaps the answer is “this will never happen, so there will be no embeddable code editor for Elm until someone writes one from scratch in Elm”. If I’m wrong about there, is there an “officially suggested” way to handle this, now that native code will be out?

Chadtech 2018-03-14 00:34:31 UTC #2

I dont think a native module is necessary to implement an ace code editor in an Elm application. I think you could do it just with custom elements (https://github.com/webcomponents/custom-elements) @luke mentioned them in another thread and said he uses them at work in their Elm code base. We actually do the same thing where I work.

They work like this.
0 You can make custom html elements like <ace-editor/> in your DOM.
1 You can write a bit of code that automatically runs when an <ace-editor/> is rendered.
2 That code can initialize an ace editor and render it inside your <ace-editor/> tag.

Put those parts together, and that means that you can make your project work in such a way that whenever Elm renders an <ace-editor/> a bit of JavaScript fires up and does the rest of the work rendering an ace editor in that element.

luke 2018-03-14 00:53:02 UTC #3

Ellie is full Elm application that manages CodeMirror instances with ports:

github.com

lukewestby/ellie/blob/master/client/src/Pages/Editor/Layout/View.elm#L101-L105


[ div
    [ id config.elmId
    , Attributes.cond (style "display" "none") <| config.model.editorCollapse == Model.JustHtmlOpen
    ]
    []

github.com

lukewestby/ellie/blob/master/client/src/Ellie/CodeMirror.elm#L19-L22


port ellieCodeMirrorOut : Value -> Cmd msg




port ellieCodeMirrorIn : (Value -> msg) -> Sub msg

github.com

lukewestby/ellie/blob/master/client/src/Ellie/CodeMirror/Runner.js#L11


import OpbeatRunner from '../Opbeat/Runner'
import CodeMirrorLoader from './Loader'


const start = (CodeMirror, app) => {
const linterFormatDiv = document.createElement('div')


CodeMirror.registerHelper('lint', 'elm', (text, options, instance) => {
  return instance.__ellie_errors || []
})


app.ports.ellieCodeMirrorOut.subscribe(data => {
  requestAnimationFrame(() => {
    switch (data.tag) {
      case 'Setup':
        setup(data.id, data.options)
        return


      case 'UpdateLinter':
        updateLinter(data.id, data.messages)
        return

It works because Elm doesn’t think there are any children in that div, so it doesn’t bother to try and mess with any of the children and the CodeMirror content is left alone to do what it wants.

In the next iteration of Ellie this will all be accomplished inside of a custom element:

github.com

lukewestby/ellie/blob/server-purs/client/src/Ellie/Ui/CodeEditor.elm#L70


Attr <| property "linterMessages" <| Encode.list <| List.map linterMessageEncoder messages




onChange : (String -> msg) -> Attribute msg
onChange tagger =
Attr <| on "change" (Decode.map tagger (Decode.at [ "target", "editorValue" ] Decode.string))




view : List (Attribute msg) -> Html msg
view attributes =
Html.node "code-editor" (List.map unattr attributes) []




type Severity
= Error
| Warning




type alias Position =
{ line : Int
, column : Int

github.com

lukewestby/ellie/blob/server-purs/client/src/Ellie/Ui/CodeEditor.js#L43


  timeout = setTimeout(later, wait)
}
}


const initialize = () => {
return load().then(CodeMirror => {
  CodeMirror.registerHelper('lint', 'elm', (text, options, instance) => {
    return instance._errors || []
  })


  customElements.define('code-editor', class CodeEditor extends HTMLElement {
    constructor() {
      super()
      this._linterFormatDiv = document.createElement('div')
      this._ready = false
      this._value = ''
      this._tabSize = 4
      this._readOnly = false
      this._mode = 'htmlmixed'
      this._instance = null
      this._errors = []

It works for the same reasons as above, but is nicer from a state management perspective. As far as I’m concerned, using a custom element is the recommended way to embed JavaScript-based DOM widgets when your browsers support them, and ports will work just fine for this use-case otherwise.

joakin 2018-03-14 11:34:02 UTC #4

This is a very interesting solution.

I’ve tried looking into the browser support, here:

https://caniuse.com/#search=custom%20element

And it seems there is a v0 and v1.

v1 seems to be supported as far as custom html elements goes in Chrome, Firefox and Safari, but there is zero support for IE/Edge.

I think it is important to outline the browser support when suggesting these solutions.

A couple of questions:

Does anyone know the difference between v0 and v1?
Is there a custom elements polyfill for IE/Edge?

mfeineis 2018-03-14 13:05:07 UTC #5

The difference is noticable so you’ll need a polyfill for the v0 browsers. WebComponents.org has you covered for IE11+/Edge

rupert 2018-03-19 15:39:39 UTC #7

@luke I have a question about using customElements. You must be polyfilling this in Ellie, yes? As it works on MS Edge. I looked at the source code but could not easily find where it is polyfilled.

The example you posted above is on the ‘server-purs’ branch. So I wonder if this is not production code? I am guessing this is currently something you are experimenting with in a branch?

luke 2018-03-19 16:29:31 UTC #8

It’s in progress and will be published in conjunction with the 0.19 public release. I haven’t installed the polyfill for Ellie yet, but I wouldn’t call it an experiment either. We’re using a custom element in production at NoRedInk for this exact purpose as well. Our error reporting shows occasional runtime errors for very old versions of browsers that we do not support, but all of the browsers in our support range work with the polyfill, including Edge and IE11.

mfeineis 2018-03-19 16:50:12 UTC #9

Yepp, CustomElements are here to stay. So happy