vite-plugin-elm

A plugin enables you to compile an Elm application/document/element on your vite project. Hot module replacement works roughly in development.

import { Elm } from './MyApplication.elm'

Elm.MyApplication.init();

Setup

npm i -D vite-plugin-elm

Update vite.config.(js|ts)

import elmPlugin from 'vite-plugin-elm'

module.exports = {
  plugins: [elmPlugin()]
}

Then you can import .elm file like:

import { Elm } from './Hello.elm'

then

// mount "Hello" Browser.{element,document} on #root
Elm.Hello.init({
  node: document.getElementById('root'),
  flags: "Initial Message"
})

See /example dir to play with an actual vite project. And this working website may help you to learn how to use.

Plugin Options

debug (Default: process.env.NODE_ENV !== 'production')

By giving a boolean, can control debug mode of Elm (means toggle Elm Debugger)

import elmPlugin from 'vite-plugin-elm'

module.exports = {
  plugins: [elmPlugin({ debug: false })]
}

When it's false, disables debug mode in both development and production. Conversely, enables debug mode even in production by true. When production build gets debug mode, Elm's compile optimization doesn't happen.

Acknowledgement

• klazuka/elm-hot for a helpful referrence of the HMR implementation
• ChristophP/elm-esm for publishing IIFE -> ESM logic

License

MIT