elm-hot

This package provides the core infrastructure needed for doing hot code swapping in Elm. It supports Elm 0.19 only.

This low-level package is intended for authors of Elm application servers.

If you're looking for something that's easier to use, and you're willing to use Webpack, see elm-hot-webpack-loader, which is built using this package. Another option is Parcel which has built-in support for Elm and this package.

The goal of this package is to provide a reusable core that can be used to provide hot code swapping support in a variety of environments--not just Webpack.

Changelog

1.1.5

update dependencies

1.1.4

fixed a bug where HMR failed because Browser.Navigation.Key changed location
fixed a crash when the app's Model contains Json.Encode.null

1.1.3

fixed a crash when using Elm debugger and elm/browser 1.0.2

1.1.2

fixed a bug where HMR would not work for very small ("toy") Elm projects

1.1.1

added support for Elm 0.19.1

1.0.1

bug fixes

1.0.0

improved Browser.application support (Browser.Navigation.Key can be stored anywhere in your model now)

0.9.1

separated the Webpack loader out into its own package
exposed core API

0.9.0

first release

Installing `elm-hot` core API

$ npm install --save elm-hot

Core API

function inject(str)

Injects the hot code swapping functionality into a compiled Elm app.

takes the Javascript code emitted by the Elm compiler as an input string
returns a string containing the injected code ready to be eval-ed in the browser.

Example of how the core API could be used

const elmHot = require('elm-hot');
const {compileToStringSync} = require('node-elm-compiler');
const injectedCode = elmHot.inject(compileToStringSync(["src/Main.elm"], {}));

In order to provide something similar to webpack-dev-server with hot module reloading, an application server could be developed to do the following:

serve a modified version of the app developer's index.html to receive push events from the server
watch .elm files on disk for changes
whenever a source file changes, push an event to the client notifying it that it should fetch new code from the server
when the client receives the event:
- fetch the new code (the server will re-compile the Elm code and use elm-hot to inject the hot-code-swapping logic)
- the client deletes the old Elm object and calls eval() on the new code from the server

I have implemented something similar to this for the integration tests. See test/server.js and test/client.js for inspiration.

The above description is probably a bit too vague, so if you would like more details, create an issue.

Attribution

Elm hot code swapping is based on the work of Flux Xu's elm-hot-loader.

humio/elm-hot