
Security News
Deno 2.2 Improves Dependency Management and Expands Node.js Compatibility
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
vite-plugin-elm
Advanced tools
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()
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.
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.
optimize
(Default: !debug && process.env.NODE_ENV === 'production'
)By giving a boolean, can control build optimization, useful to use Debug
elm functions
import { defineConfig } from 'vite'
import elmPlugin from 'vite-plugin-elm'
export default defineConfig({
plugins: [elmPlugin({ debug: false, optimize: false })]
})
When true, optimize build and forbid usage of Debug
elm functions.
When specify optimize attribute, had to tell if need to debug or not. It's not why you want to make debug traces you want to see all actions.
This plugin supports importing assets by giving a particular tag [VITE_PLUGIN_ELM_ASSET:<path to asset>]
to leverage Vite's asset handling.
When Elm code has a string, this plugin replaces it with an imported asset. That string should be just a string without any concatenation.
Html.img [ Html.Attributes.src "[VITE_PLUGIN_ELM_ASSET:/assets/logo.jpg]" ] []
By using a Elm package elm-vite-plugin-helper
, you can shorten such the tagging:
elm install hmsk/elm-vite-plugin-helper
import VitePluginHelper
Html.img [ Html.Attributes.src <| VitePluginHelper.asset "/assets/logo.png?inline" ] []
FAQs
Compile Elm with vite
The npm package vite-plugin-elm receives a total of 3,164 weekly downloads. As such, vite-plugin-elm popularity was classified as popular.
We found that vite-plugin-elm 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.
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.
Security News
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
Security News
React's CRA deprecation announcement sparked community criticism over framework recommendations, leading to quick updates acknowledging build tools like Vite as valid alternatives.
Security News
Ransomware payment rates hit an all-time low in 2024 as law enforcement crackdowns, stronger defenses, and shifting policies make attacks riskier and less profitable.