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 { defineConfig } from 'vite'
import elmPlugin from 'vite-plugin-elm'

export default defineConfig({
  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 { defineConfig } from 'vite'
import elmPlugin from 'vite-plugin-elm'

export default defineConfig({
  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