elm-root-defender

Protect the root of your Elm Document or Application from things that mutate HTML body tags

latest

npm

Version: 1.0.3

Version published: 3 years ago

Maintainers: 1

Created: 4 years ago

Source

Elm Root Defender

Problem

Sneaky browser extensions can crash Elm Browser.Document and Browser.Application apps by mutating the body of your HTML page. This happens because Elm's Virtual-DOM implementation assumes it has full control over its root node. In practice, it doesn't because the web is a weird and wooly world.

Solution

Create an element in your HTML page that's dedicated to your app, rather than letting Elm assume control over the whole body element, and use this Webpack plugin to replace the outputted Elm Virtual-DOM code to look for that element.

In your index.html:

<body>
  <div id="my-app"></div>
</body>

In your webpack.config.js, add this plugin like so, where 'my-app' is the id attribute of your app's root node in your HTML. It could be any valid id attribute string.

new ElmRootDefender('my-app')

More complete webpack.config.js for reference:

const HtmlWebpackPlugin = require('html-webpack-plugin')
const ElmRootDefender = require('elm-root-defender')
const path = require('path')

module.exports = {
  devServer: {
    compress: false,
    https: false,
    port: 8000,
    static: {
      directory: path.join(__dirname, 'dist')
    },
    watchFiles: ['src/**/*.elm', 'src/**/*.js', 'src/**/*.html', 'src/**/*.css']
  },
  entry: './src/index.js',
  module: {
    rules: [
      {
        test: /\.elm$/,
        exclude: [/elm-stuff/, /node_modules/, /review/],
        use: 'elm-webpack-loader'
      }, {
        test: /\.s[ac]ss$/i,
        use: ['style-loader', 'css-loader', 'sass-loader']
      }
    ]
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'index.js',
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'src/index.html'
    }),
    new ElmRootDefender('my-app') // This is the good stuff here!
  ],
  target: 'web',
}

For even more context, see the source code of our little sample app we use to test this:

https://github.com/Pilatch/elm-root-defender/tree/master/test/sample-project

Keywords

FAQs

What is elm-root-defender?

Is elm-root-defender well maintained?

Package last updated on 14 Jul 2023

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install