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.

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"
}

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" }.

Install snowpack-plugin-elm, for instance with npm install --save-dev snowpack-plugin-elm.

Then add the plugin to your Snowpack config, e.g. snowpack.config.json

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

or with plugin options

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

cd example
npm install
npx snowpack dev
# and then change src/Sandbox1.elm

As described in this Snowpack guide:

1. Clone this repo and cd into it.

2. Run npm link to expose the plugin globally (in regard to your development machine).

3. Create a new, example Snowpack project in a different location for testing

4. 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)

5. In your example Snowpack project, add snowpack-plugin-elm to the snowpack.config.json along with any plugin options you’d like to test.

Execute npm test to start the integration tests.

After I got it running, I would like to merge the changes into https://github.com/klazuka/elm-hot so the esm builds could be used in multiple tools (e.g. webpack, parcel2, vite), and then use elm-hot inside this plugin.

Maybe it will make sense to have different hmr.js files that elm-hot can insert as necessary (configurable with flags).

• In ./example/
  • npx snowpack dev renders Sandbox1.elm
  • Add HMR for changes to Sandbox1.elm
  • Add HMR for changes to Indirect.elm (needs Snowpack >= 2.14.0)
  • Fix npx snowpack build (tries to build Indirect.elm which does not export a main)
• Convert ./example to a playwright test
• Add tests
  • For a Browser.sandbox (see ./example/)
  • For a Browser.element (with ports)
  • For a Browser.document
  • For a Browser.application (with URL change)
• Run tests in parallel from temp folders on random ports
• Enhance tests
  • Test that the browser page reloads after incompatible change elm-hot page.waitForNavigation/1
• Ask for feedback
  • On https://www.pika.dev/npm/snowpack/discuss/319
  • In elm slack