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:
-
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 thenpm 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)
- Be aware that
-
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 amain
)
-
- 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
- Test that the browser page reloads after incompatible change elm-hot
- Ask for feedback
- On https://www.pika.dev/npm/snowpack/discuss/319
- In elm slack