fluxxu/elm-hot-loader

Hot Module Replacement for Elm using webpack.

No longer maintained!

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 #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:

With webpack 2+

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

With webpack 1

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:

With webpack 2+

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

With webpack 1

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.