Use Elm with Vite (powered by elm-watch!)
MIT License
🚨 Warning: This plugin is still experimental, and doesn't quite work as intended. Publishing here to share progress and work through minor bugs!
Use Vite and Elm with reliable HMR and full-color error messages!
npm install -D vite-plugin-elm-watch
// vite.config.js
import { defineConfig } from 'vite'
import elm from 'vite-plugin-elm-watch'
export default defineConfig({
plugins: [elm()]
})
// In src/main.js
import Main from './src/Main.elm'
let app = Main.init()
*.elm
files directly from JavaScript or TypeScriptmode
When using the official Elm CLI, you have access to flags that can add Elm's time-traveling debugger, or optimize your code for production.
This plugin also adds a few additional options for minifying compiled code for production and provides nice defaults in development.
'auto' // Uses "debug" in development and "minify" in production
| 'standard' // Doesn't add any Elm compiler flags
| 'debug' // Adds the `--debug` flag
| 'optimize' // Adds the `--optimize` flag
| 'minify' // Adds the `--optimize` flag and minifies the JS output
output
'default' // Exports standard object with "init" function
| 'react' // Exports a React component that can be dropped into an existing app
This option allows you to specify what your imported Elm code will return. For React apps, we recommend using the 'react'
output so you can easily swap .jsx/.tsx
files with .elm
and things will just work ™️.
Warning: Still working through HMR bugs before this is production ready!
isBodyPatchEnabled
isBodyPatchEnabled : boolean
In production, you might encounter issues caused by third party JS that modify the <body>
element. This only is a problem for folks using Browser.application
, which expects control over the entire <body>
element.
By enabling isBodyPatchEnabled: true
, you'll be able to specify a custom root node. This uses Elm's standard node
field when initializing the app:
// src/main.js
import Main from './src/Main.elm'
let app = Main.init({
node: document.getElementById('elm_root')
})
Note: This will only work if the element has an id
attribute.
A known issue is that Elm will clear out attributes for this root element, so id="elm_root"
won't be visible after Elm loads.
removeChild
internally on the initial DOM node, before our component can run app.unmount()
. This leads to a runtime exception!