Git Product home page Git Product logo

vite-plugin-elm's Introduction

vite-plugin-elm

npm GitHub Workflow Status

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

Setup

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.

Plugin Options

debug (Default: process.env.NODE_ENV !== 'production')

By giving a boolean, can control debug mode of Elm (means toggle Elm Debugger)

image

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.

Static Assets Handling

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

Helper package

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

Combine multiple main files (Experimental from 2.7.0-beta.1)

By passing importing path via with URL-ish parameter(s), the plugin compiles multiple main files in a single compilation process. That generates a single Elm export which has multiple properties for each given main files. This way reduces bundle size comparing to a total size of importing each file separately since common modules/Elm core codes 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

vite-plugin-elm's People

Contributors

andrewgryan avatar anmolitor avatar ccapndave avatar dependabot[bot] avatar hmsk avatar icidasset avatar jamesbirtles avatar janwirth avatar klaftertief avatar lindsaykwardell avatar mapmarkus avatar marc136 avatar mattpolzin avatar nnnnathann avatar notgne2 avatar shanekenney avatar wadouk avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.