Minimum Elm Component with Percel and WebComponents

twitter logo github logo ・1 min read

yarn add parcel-bundle node-elm-compiler -D

directories

elements/
  foo.js
  Foo.elm
run.js
index.html # import run.js
package.json

Write elm-foo component

-- elements/Foo.elm
import Html exposing (div, text)
main = div [] [text "foo"]
// elements/foo.js
import { Elm } from "./Foo.elm";

customElements.define(
  "elm-foo",
  class extends HTMLElement {
    connectedCallback() {
      Elm.Main.init({ node: this });
    }
  }
);

Run

Mount this elm-foo element.

// run.js
import "./elements/foo";
document.body.innerHTML = '<elm-foo></elm-foo>'
twitter logo DISCUSS
Classic DEV Post from Oct 9 '17

Is git the be all and end all of version control?

Git was invented by the Linux project in order to move beyond the crappy solutions they had in place before, and since then it has established itself as the de facto standard for version control and software collaboration.

Koutaro Chikuba profile image
Frontend Engineer in Japan.

Sore eyes?

dev.to now has dark mode.

Go to the "misc" section of your settings and select night theme ❤️

(There is also a pink mode)