Snowpack Elm Plugin

This plugin adds support for the Elm language to any Snowpack project.
With it, you can import *.elm files and have them compile to JavaScript modules including Hot Module Replacement (HMR).

Usage

Have a look at the example folder. The interesting bits are the snowpack configuration and how to import an Elm app in a .js file or in a .html file.

But in general, you will be able to import it like this:

// Both default and named import is supported
import Elm from './Main.elm';
// import { Elm } from './Main.elm';

Elm.Main.init({
  //...
});

Getting started

If this is your first time using Snowpack, please follow their tutorial. Or you can just start with npx snowpack init.

Install snowpack-plugin-elm, for instance with npm install --save-dev snowpack-plugin-elm or another node.js package manager.

Then add the plugin to your Snowpack config, e.g. in snowpack.config.json, either in the simplest way

{
  ...
  "plugins": [
    "snowpack-plugin-elm"
  ],
}

or with plugin options

{
  ...
  "plugins": [
    [ "snowpack-plugin-elm", { "debugger": "dev", "optimize": "build" } ]
  ],
}

Then you can import your Elm code inside a .html or .js file

import Elm from './Main.elm';
Elm.Main.init({
  node: document.body,
  flags: {},
});

Plugin options

Default values:

{
  "verbose": false,
  // When to enable Elm's time-traveling debugger
  "debugger": "dev", // One of "never", "dev" (only on `snowpack dev`) or "always"
  "optimize": "build", // One of "never", "build" (only on `snowpack build`) or "always"
  "root": "", // same as the `root` folder of the snowpack config
}

Note: The Elm debugger needs information that is stripped away when using optimize, so a setting like { "debugger": "always", "optimize": "build" } would fail and is rejected by the plugin.
If you want to e.g. have a build with an enabled debugger, you need to use { "debugger": "always", "optimize": "never" }.

Development

First, clone this repository.

Tests

Execute npm test to start the integration tests and follow the plugin behavior with the test suite.

For more information, set the verbose variable to true.

To use it on another project

As described in this Snowpack guide:

Clone this repo and cd into it.
Run npm link to expose the plugin globally (in regard to your development machine).
Create a new, example Snowpack project in a different location for testing
In your example Snowpack project, run npm install && npm link snowpack-plugin-elm.
- Be aware that npm install will remove your linked plugin, so on any install, you will need to redo the npm link snowpack-plugin-elm.
- (The alternative would be to use npm install --save-dev <folder_to_this_repo>, which would create the "symlink-like" entry in your example Snowpack project’s package.json)
In your example Snowpack project, add snowpack-plugin-elm to the snowpack.config.json along with any plugin options you’d like to test.