ProductPromotion
Logo

Elm

made by https://0x3d.site

GitHub - hmsk/vite-plugin-elm: A plugin for Vite enables you to compile an Elm application/document/element
A plugin for Vite enables you to compile an Elm application/document/element - hmsk/vite-plugin-elm
Visit Site

GitHub - hmsk/vite-plugin-elm: A plugin for Vite enables you to compile an Elm application/document/element

GitHub - hmsk/vite-plugin-elm: A plugin for Vite enables you to compile an Elm application/document/element

vite-plugin-elm

npm npm next channel GitHub Workflow Status

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()

Setup

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.

Options

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.

image

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.

Static Assets Handling

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]" ] []

Helper package

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" ] []

Combine multiple main files (Experimental)

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'

Acknowledgement

License

MIT

More Resources
to explore the angular.

mail [email protected] to add your project or resources here ๐Ÿ”ฅ.

Related Articles
to learn about angular.

FAQ's
to learn more about Angular JS.

mail [email protected] to add more queries here ๐Ÿ”.

More Sites
to check out once you're finished browsing here.

0x3d
https://www.0x3d.site/
0x3d is designed for aggregating information.
NodeJS
https://nodejs.0x3d.site/
NodeJS Online Directory
Cross Platform
https://cross-platform.0x3d.site/
Cross Platform Online Directory
Open Source
https://open-source.0x3d.site/
Open Source Online Directory
Analytics
https://analytics.0x3d.site/
Analytics Online Directory
JavaScript
https://javascript.0x3d.site/
JavaScript Online Directory
GoLang
https://golang.0x3d.site/
GoLang Online Directory
Python
https://python.0x3d.site/
Python Online Directory
Swift
https://swift.0x3d.site/
Swift Online Directory
Rust
https://rust.0x3d.site/
Rust Online Directory
Scala
https://scala.0x3d.site/
Scala Online Directory
Ruby
https://ruby.0x3d.site/
Ruby Online Directory
Clojure
https://clojure.0x3d.site/
Clojure Online Directory
Elixir
https://elixir.0x3d.site/
Elixir Online Directory
Elm
https://elm.0x3d.site/
Elm Online Directory
Lua
https://lua.0x3d.site/
Lua Online Directory
C Programming
https://c-programming.0x3d.site/
C Programming Online Directory
C++ Programming
https://cpp-programming.0x3d.site/
C++ Programming Online Directory
R Programming
https://r-programming.0x3d.site/
R Programming Online Directory
Perl
https://perl.0x3d.site/
Perl Online Directory
Java
https://java.0x3d.site/
Java Online Directory
Kotlin
https://kotlin.0x3d.site/
Kotlin Online Directory
PHP
https://php.0x3d.site/
PHP Online Directory
React JS
https://react.0x3d.site/
React JS Online Directory
Angular
https://angular.0x3d.site/
Angular JS Online Directory