Skip to content

klazuka/elm-hot

Folders and files

NameName
Last commit message
Last commit date

Latest commit

fb2dc49 · May 11, 2021

History

87 Commits
May 11, 2021
Nov 20, 2019
Jan 27, 2021
Jan 27, 2021
Aug 26, 2018
Aug 26, 2018
Jan 27, 2021
May 11, 2021
May 11, 2021
Jul 21, 2020

Repository files navigation

elm-hot

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.6

  • more lenient search for Browser.Navigation.Key in the generated JS
  • updated dependencies

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.