@unlocal/elm-optimizations-webpack-plugin

webpack-elm-optimizations-plugin

Overview

This plugin optimizes Elm compilation output through the use of custom transformations

Right now there is a single optimization implemented, which transforms this:

var same = i === yRefs.length;
while (same && i--)
{
    same = xRefs[i] === yRefs[i];
}

Into this:

var same = i === yRefs.length;
var recheck = [];
while (same && i--)
{
    if (xRefs[i] !== yRefs[i]){
        if (typeof(xRefs[i]) === "object" && !(Array.isArray(xRefs[i])) && xRefs[i]['$'] === undefined){
            recheck.push(i);
        } else {
            same = false;
        }
    }
}
i = recheck.length;
while (same && i--){
    var check = recheck[i];
    for (var key in xRefs[check])
    {
        same = (xRefs[check][key] === yRefs[check][key]);
        if (!same) {break;}
    }
}

Usage

This is a webpack loader plugin, so you'll need an existing Webpack configuration, and you'll need webpack installed.

The plugin itself is written in TypeScript, so you'll also need to compile TypeScript before using the plugin.

So something like:

npm install # Install dependencies
tsc # Compile TypeScript

Your existing webpack configuration likely has a section that looks something like this:

{
    module: {
        rules: [
            {
                test: /\.elm$/,
                use: [
                    {
                        loader: 'elm-webpack-loader',
                        options: {}
                    }
                ]
            }
        ]
    }
}

Add the ElmOptimizationsPlugin as the first entry in order to use the plugin:

{
    module: {
        rules: [
            {
                test: /\.elm$/,
                use: [
                    {
                        loader: "@unlocal/elm-optimizations-webpack-plugin",
                        /** @type ElmOptimizationsPluginOptions */
                        options: {
                            htmlLazy: true,
                        }
                    },
                    {
                        loader: 'elm-webpack-loader',
                        options: {}
                    }
                ]
            }
        ]
    }
}

NOTE: It's very important that ElmOptimizationsPlugin plugin is listed before elm-webpack-loader, because Webpack runs loaders in reverse order of how they are listed. ElmOptimizationsPlugin only works with the output of the Elm compilation, not with Elm sourcecode itself.

Example

You can run a build of the example app in this repo with:

npm run build-dev

And you can have webpack serve the example app in this repo with:

npm run serve-dev

The webpack configuration options are located in the elmSupport function of webpack.config.js.

Publishing

You can verify that npm will receive the right files by first running the npm pack command.

To publish:

1. First, bump the version number.
2. Ensure TypeScript compiles successfully.
3. Run npm run publish