Product
Secure Your AI-Generated Code with Socket MCP
Socket MCP brings real-time security checks to AI-generated code, helping developers catch risky dependencies before they enter the codebase.
By Alexandros Kapravelos - May 28, 2025
🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more →
vite-plugin-elm-watch
Advanced tools
vite-plugin-elm-watch
Use Vite and Elm with reliable HMR and full-color error messages
vite-plugin-elm-watch
🚨 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!
Installation
npm install -D vite-plugin-elm-watch
Usage
// 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()
Features
- Import
*.elmfiles directly from JavaScript or TypeScript - Reliable HMR powered by elm-watch
- Full-color, friendly compiler messages in the browser
- Jump to problem from your browser in one click
- JS minification step is included
- React output mode for easy interop with existing components
Screenshots
Options
mode
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.
Known issues
- When in a React app, swapping a ".elm" component with a ".tsx" will causes issues with unmounting.
- React calls
removeChildinternally on the initial DOM node, before our component can runapp.unmount(). This leads to a runtime exception!
- React calls
FAQs
Use Vite and Elm with reliable HMR and full-color error messages
The npm package vite-plugin-elm-watch receives a total of 336 weekly downloads. As such, vite-plugin-elm-watch popularity was classified as not popular.
We found that vite-plugin-elm-watch demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Package last updated on 18 Apr 2025
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Related posts
Security News
NIST Under Federal Audit for NVD Processing Backlog and Delays
As vulnerability data bottlenecks grow, the federal government is formally investigating NIST’s handling of the National Vulnerability Database.
By Sarah Gooding - May 27, 2025
Research
Security News
60 Malicious npm Packages Leak Network and Host Data in Active Malware Campaign
Socket’s Threat Research Team has uncovered 60 npm packages using post-install scripts to silently exfiltrate hostnames, IP addresses, DNS servers, and user directories to a Discord-controlled endpoint.
By Kirill Boychenko - May 23, 2025