Security News
JavaScript Leaders Demand Oracle Release the JavaScript Trademark
In an open letter, JavaScript community leaders urge Oracle to give up the JavaScript trademark, arguing that it has been effectively abandoned through nonuse.
vite-plugin-elm
Advanced tools
A plugin that enables us to compile an Elm application, document, or element within your Vite project. In development, hot module replacement works to some extent.
import { Elm } from './MyApplication.elm'
Elm.MyApplication.init()
npm i -D vite-plugin-elm
In vite.config.(js|ts)
:
import { defineConfig } from 'vite'
import elmPlugin from 'vite-plugin-elm'
export default defineConfig({
plugins: [elmPlugin()]
})
Then you can import a .elm
file and run it like:
import { Elm } from './Hello.elm'
// Mount "Hello" Browser.{element,document} on #root
Elm.Hello.init({
node: document.getElementById('root'),
flags: "Initial Message"
})
You can explore the /example
directory to experiment with an actual Vite project. Additionally, this functional website can serve as a helpful resource to learn how to use it effectively.
debug
(Default: process.env.NODE_ENV !== 'production'
)You can control the debug mode of Elm, which toggles the Elm Debugger, by providing a boolean value.
elmPlugin({ debug: false })
When set to false
, it disables debug mode in both development and production. Conversely, setting it to true
enables debug mode even in production. It's important to note that when the production build has debug mode enabled, Elm's compiler optimizations do not take place.
optimize
(Default: !debug && process.env.NODE_ENV === 'production'
)You can control build optimization by providing a boolean value, which can be useful for using Debug
functions in your Elm code.
elmPlugin({ debug: false, optimize: false })
When set to true
, it optimizes the build and prohibits the usage of Debug Elm functions. If you specify the optimize attribute, you must indicate whether debugging is needed. This is because you might want to have debug traces for the purpose of observing all actions, not necessarily for debugging specific issues.
This plugin supports importing assets by using a specific tag [VITE_PLUGIN_ELM_ASSET:<path to asset>]
to leverage Vite's asset handling. When your Elm code contains a tag, this plugin replaces that string with the imported asset. It's important to note that the string should be a standalone string without any concatenation.
Html.img [ Html.Attributes.src "[VITE_PLUGIN_ELM_ASSET:/assets/logo.jpg]" ] []
We can simplify the tagging process by using the Elm package elm-vite-plugin-helper
:
elm install hmsk/elm-vite-plugin-helper
import VitePluginHelper
Html.img [ Html.Attributes.src <| VitePluginHelper.asset "/assets/logo.png?inline" ] []
By passing importing paths via the with
URL-ish parameter(s), the plugin compiles multiple main files in a single compilation process. This results in a single Elm export that contains multiple properties, each corresponding to a given main file. This feature helps reduce the bundle size when compared to importing each file separately because common modules and Elm core code are not repeated.
// `Elm.App` and `Elm.Another`, both can work as like importing individually.
import { Elm } from './App.elm?with=./Another.elm'
Elm.App.init({
node: document.getElementById('rootForApp'),
})
Elm.Another.init({
node: document.getElementById('rootForAnother'),
})
For 3+ main files:
import { Elm } from './App.elm?with=./Another.elm&with=./YetAnother.elm'
FAQs
Compile Elm with vite
The npm package vite-plugin-elm receives a total of 3,469 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
In an open letter, JavaScript community leaders urge Oracle to give up the JavaScript trademark, arguing that it has been effectively abandoned through nonuse.
Security News
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
Security News
Floating dependency ranges in npm can introduce instability and security risks into your project by allowing unverified or incompatible versions to be installed automatically, leading to unpredictable behavior and potential conflicts.