Elm

You can import Elm files like any another JavaScript files.

The npm package elm needs to be manually installed beforehand. You'll also need a elm.json configuration file (run yarn elm init to get started and modify it if necessary).

index.html:
<!DOCTYPE html>
<div id="root"></div>
<script src="index.js"></script>
index.js:
import { Elm } from "./Main.elm";

Elm.Main.init({ node: document.getElementById("root") });
Main.elm:
module Main exposing (..)

import Browser

import Html exposing
(Html, button, div, text)
import Html.Events exposing (onClick)

main =
Browser.sandbox { init = init, update = update, view = view }

type alias Model = Int

init : Model
init =
0

type Msg = Increment | Decrement

update : Msg -> Model -> Model
update msg model =
case msg of
Increment ->
model + 1

Decrement ->
model - 1


view : Model -> Html Msg
view model =
div []
[ button [ onClick Decrement ] [ text "-" ]
, div [] [ text (String.fromInt model) ]
, button [ onClick Increment ] [ text "+" ]
]

ΒΆ Time-travelling debugger

Elm's debug mode is automatically enabled when not building for production (it is disabled automatically with parcel build). You can set the environment variable PARCEL_ELM_NO_DEBUG=1 to disable it even in development mode.