feat!: build cleanup and remove dependency on html-webpack-new-relic-…

…plugin (#217)

BREAKING CHANGE: This PR performs some surgery on the code that loads our New Relic browser agent into our MFEs. Because of that, we're making this a breaking change and reminding MFE application owners to verify their app is still sending data to New Relic after updating. We have tested these changes in the frontend-build/example app, but you're responsible for double-checking your app's integration.

Also:

cleaning up a warning about HotModuleReplacementPlugin, which stated that the plugin doesn't need to be included explicitly if hot: true has been specified.
bumping webpack-dev-server into a real release, instead of a beta.
Adding an .nvmrc file set to node 12.

Commit messages:

* fix: build cleanup and remove dependency on html-webpack-new-relic-plugin

Also cleaning up a warning about HotModuleReplacementPlugin and bumping webpack-dev-server into a real release, instead of a beta.

* fix: cleaning up lint and changing import/export to be node-friendly

* feat!: updating new relic script to latest version

BREAKING CHANGE: Applications should mindfully update to this version and ensure that their New Relic tracking is still working.  The snippet has been changed but can't easily be tested in development.

* fix: review feedback

1. Pre-pending the NR script to the head
2. Adding a detailed comment about how to update the snippet
3. Adding a snippet version number (1212)

* feat: pulling in tests and license from html-webpack-new-relic-plugin

* build: add an nvmrc pinning the repo to v12 of node

* test: linting the test file for html-webpack-new-relic-plugin

.nvmrc

@@ -0,0 +1 @@
+12

config/webpack.dev-stage.config.js

@@ -8,7 +8,6 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
 const path = require('path');
 const PostCssAutoprefixerPlugin = require('autoprefixer');
 const PostCssRTLCSS = require('postcss-rtlcss');
-const { HotModuleReplacementPlugin } = require('webpack');
 const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
 
 const commonConfig = require('./webpack.common.config.js');
@@ -159,10 +158,6 @@ module.exports = merge(commonConfig, {
       path: path.resolve(process.cwd(), '.env.development-stage'),
       systemvars: true,
     }),
-    // when the --hot option is not passed in as part of the command
-    // the HotModuleReplacementPlugin has to be specified in the Webpack configuration
-    // https://webpack.js.org/configuration/dev-server/#devserver-hot
-    new HotModuleReplacementPlugin(),
     new ReactRefreshWebpackPlugin(),
   ],
   // This configures webpack-dev-server which serves bundles from memory and provides live

config/webpack.dev.config.js

@@ -8,7 +8,6 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
 const path = require('path');
 const PostCssAutoprefixerPlugin = require('autoprefixer');
 const PostCssRTLCSS = require('postcss-rtlcss');
-const { HotModuleReplacementPlugin } = require('webpack');
 const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
 
 const commonConfig = require('./webpack.common.config.js');
@@ -159,10 +158,6 @@ module.exports = merge(commonConfig, {
       path: path.resolve(process.cwd(), '.env.development'),
       systemvars: true,
     }),
-    // when the --hot option is not passed in as part of the command
-    // the HotModuleReplacementPlugin has to be specified in the Webpack configuration
-    // https://webpack.js.org/configuration/dev-server/#devserver-hot
-    new HotModuleReplacementPlugin(),
     new ReactRefreshWebpackPlugin(),
   ],
   // This configures webpack-dev-server which serves bundles from memory and provides live

config/webpack.prod.config.js

@@ -7,14 +7,14 @@ const { merge } = require('webpack-merge');
 const CssNano = require('cssnano');
 const Dotenv = require('dotenv-webpack');
 const dotenv = require('dotenv');
+const NewRelicSourceMapPlugin = require('@edx/new-relic-source-map-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const path = require('path');
 const PostCssAutoprefixerPlugin = require('autoprefixer');
 const PostCssRTLCSS = require('postcss-rtlcss');
-const NewRelicSourceMapPlugin = require('@edx/new-relic-source-map-webpack-plugin');
-const HtmlWebpackNewRelicPlugin = require('html-webpack-new-relic-plugin');
 
+const HtmlWebpackNewRelicPlugin = require('../lib/plugins/html-webpack-new-relic-plugin');
 const commonConfig = require('./webpack.common.config.js');
 const presets = require('../lib/presets');
 

lib/plugins/html-webpack-new-relic-plugin/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2018 Dineshkumar Pandiyan <[email protected]>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

lib/plugins/html-webpack-new-relic-plugin/README.md

@@ -0,0 +1,7 @@
+# html-webpack-new-relic-plugin
+
+This plugin comes from https://github.com/victorrodrigues/html-webpack-new-relic-plugin.
+
+We're bringing it into frontend-build so that we can more easily maintain the new relic snippet.  We
+haven't found much value in having it as a separate package - it mostly just adds a step when we're
+trying to keep it up to date.

lib/plugins/html-webpack-new-relic-plugin/index.js

@@ -0,0 +1,3 @@
+const HtmlWebpackNewRelicPlugin = require('./HtmlWebpackNewRelicPlugin');
+
+module.exports = HtmlWebpackNewRelicPlugin;

lib/plugins/html-webpack-new-relic-plugin/test/HtmlWebpackNewRelicPlugin.test.js

@@ -0,0 +1,80 @@
+import fs from 'fs';
+import path from 'path';
+import HtmlWebpackPlugin from 'html-webpack-plugin';
+import webpack from 'webpack';
+
+import HtmlWebpackNewRelicPlugin from '../HtmlWebpackNewRelicPlugin';
+
+const OUTPUT_DIR = path.join(__dirname, './dist');
+
+describe('HtmlWebpackNewRelicPlugin', () => {
+  const testPluginOptions = {
+    accountID: '121212',
+    agentID: '343434',
+    trustKey: '565656',
+    licenseKey: '123456',
+    applicationID: '654321',
+  };
+
+  afterEach(() => {
+    if (fs.existsSync(OUTPUT_DIR)) {
+      fs.rmdirSync(OUTPUT_DIR, { recursive: true, force: true });
+    }
+  });
+
+  it('should append new relic script to body', done => {
+    webpack(
+      {
+        entry: path.resolve(__dirname, 'fixtures', 'entry.js'),
+        output: {
+          path: path.resolve(__dirname, './dist'),
+        },
+        plugins: [
+          new HtmlWebpackPlugin(),
+          new HtmlWebpackNewRelicPlugin(testPluginOptions),
+        ],
+      },
+      (err) => {
+        const htmlFile = path.resolve(OUTPUT_DIR, 'index.html');
+        expect(err).toBeNull();
+        expect(fs.existsSync(htmlFile)).toBe(true);
+
+        const file = fs.readFileSync(
+          path.resolve(OUTPUT_DIR, htmlFile),
+          { encoding: 'utf-8' },
+          (error, data) => data.toString(),
+        );
+
+        Object.entries(testPluginOptions).forEach(([optionName, optionValue]) => {
+          expect(file.indexOf(`${optionName}:"${optionValue}"`)).toBeGreaterThan(-1);
+        });
+        done();
+      },
+    );
+  });
+
+  describe('when its missing configuration variables', () => {
+    function testMissingOption(missingOptionName) {
+      it(`should throw error if ${missingOptionName} is missing`, done => {
+        const compiler = webpack({
+          entry: path.resolve(__dirname, 'fixtures', 'entry.js'),
+          output: {
+            path: path.resolve(__dirname, '../dist'),
+          },
+          plugins: [new HtmlWebpackPlugin()],
+        });
+        const optionsMissingOne = { ...testPluginOptions };
+        delete optionsMissingOne[missingOptionName];
+        expect(() => compiler.options.plugins.push(new HtmlWebpackNewRelicPlugin(optionsMissingOne))).toThrow(
+          `${missingOptionName} argument is required`,
+        );
+
+        done();
+      });
+    }
+
+    Object.keys(testPluginOptions).forEach((key) => {
+      testMissingOption(key);
+    });
+  });
+});

lib/plugins/html-webpack-new-relic-plugin/test/fixtures/entry.js

@@ -0,0 +1 @@
+console.log('Hello World');