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 type="module" 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 "+" ]
    ]

Compiling multiple files into a single JS output

You can use the with query param to compile multiple Elm sources into the same bundle. This can help you keep the bundle size smaller, because things like the runtime and common code are shared.

index.js:

import { Elm } from "./Main.elm?with=./MainB.elm&with=./MainC.elm";

Elm.Main.init({ node: document.getElementById("root") });
Elm.MainB.init({ node: document.getElementById("rootB") });
Elm.MainC.init({ node: document.getElementById("rootC") });

This will do the equivalent of this command:

elm make Main.elm MainB.elm MainC.elm

The with param can be used multiple times to include multiple extra Elm programs.

Beware of 2 things:

Path base: The paths given in the with param values are relative to the directory of the first file in the import statement (in this case Main.elm), NOT relative to the JS file that contains the import statement.
Unintentional Duplication: If you import an import line with with params in multiple JS files but the query string is not exactly the same, parcel will treat it as a different asset and duplicate the content.

To avoid those pitfalls, it's recommended to use this extra resolver package, when making heavy use of with params (i.e. importing the bundles in more than 1 JS file, using the with more than 2 times)

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.