dynajoe / elm-hot-loader

Hot Module Replacement for Elm using webpack.

Elm Hot Loader

Hot code swapping for Elm.

This loader injects HMR support code to the Elm module generated by elm-webpack-loader.

Change Log

0.5.0

• Elm 0.18 support

0.4.0

• Add event callback see fluxxu#18

0.3.3

• Better elm-lang/websocket support (thanks to @rundis)

0.3.1

• Don't error when there are no ports (thanks to @glenjamin)

0.3.0

• Elm 0.17 support
• swap port and EmptyAction are gone. Enable this loader and it just works.
• Incoming ports still work after hot swapping

Installation

$ npm install --save elm-webpack-loader elm-hot-loader

Usage

Documentation: Using loaders

In your webpack.config.js file:

module.exports = {
  module: {
    loaders: [{
      test: /\.elm$/,
      exclude: [/elm-stuff/, /node_modules/],
      loader: 'elm-hot!elm-webpack'
    }]
  }
};

If you don't use elm-webpack-loader to compile Elm, just make sure webpack uses elm-hot to load your compiled js file. Add this to your webpack config file:

loaders: [
  // ...
  {
      test: /[YOUR_COMPILED_JS_FILE_NAME_HERE]\.js$/,
      loader: 'elm-hot'
  }
  // ...
]

You should also add the --hot flag when starting webpack.

Dependency

This loader relies on elm-webpack-loader to compile Elm to JS.

Example

You can find an example project at elm-hot-loader-starter.