feat(holocron-module-register-plugin): move to webpack 5

lerna.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.8.2",
+  "version": "independent",
   "packages": [
     "packages/*"
   ],

packages/holocron-module-register-webpack-plugin/CHANGELOG.md

@@ -3,6 +3,19 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 2.0.0 (2023-10-13)
+
+
+### Features
+
+* **holocron-module-register-plugin:** move to webpack 5 ([3d20f15](https://github.com/americanexpress/holocron/commit/3d20f15830c3daf23a764566fe0ee7b0d636007d))
+
+
+### BREAKING CHANGES
+
+* **holocron-module-register-plugin:** This change is breaking as it directely
+interacts with webpacks source structure, which is changed in v5
+
 # [1.8.0](https://github.com/americanexpress/holocron/compare/v1.7.0...v1.8.0) (2023-08-18)
 
 **Note:** Version bump only for package holocron-module-register-webpack-plugin

packages/holocron-module-register-webpack-plugin/HolocronModuleRegisterPlugin.js

@@ -12,7 +12,6 @@
  * under the License.
  */
 
-const { ConcatSource } = require('webpack-sources');
 const ModuleFilenameHelpers = require('webpack/lib/ModuleFilenameHelpers');
 
 function HolocronModuleRegisterPlugin(moduleName, holocronModuleName = 'holocronModule') {
@@ -31,14 +30,12 @@ HolocronModuleRegisterPlugin.prototype.apply = function apply(compiler) {
         chunk.files
           .filter(ModuleFilenameHelpers.matchObject.bind(undefined, options))
           .forEach((file) => {
-            // eslint-disable-next-line no-param-reassign
-            compilation.assets[file] = new ConcatSource(
-              '(function() {',
-              '\n',
-              compilation.assets[file],
-              '\n',
-              `Holocron.registerModule("${moduleName}", ${holocronModuleName});})();`
-            );
+            const source = compilation.assets[file];
+            // descend into the source and inject the registration within the iife
+            // The last two symbols are always the closing of the iife, then a `;`
+            // Therefore, insert the registration immediately before the iife closes
+            // eslint-disable-next-line no-underscore-dangle
+            source._source._children.splice(-2, 0, `;Holocron.registerModule("${moduleName}", ${holocronModuleName});`);
           });
       });
 

packages/holocron-module-register-webpack-plugin/__tests__/HolocronModuleRegisterPlugin.spec.js

@@ -20,7 +20,7 @@ const fs = require('fs');
 const path = require('path');
 // FIXME: RANDOMBYTESREQUEST via terser-webpack-plugin may be an open handle
 const webpack = require('webpack');
-const merge = require('webpack-merge');
+const { merge } = require('webpack-merge');
 const crypto = require('crypto');
 const HolocronModuleRegisterPlugin = require('../HolocronModuleRegisterPlugin');
 
@@ -34,10 +34,11 @@ const buildPath = path.join(fixturesPath, 'build');
 
 const webpackOptions = {
   entry: path.join(fixturesPath, 'SomeModule.js'),
+  devtool: 'source-map',
   output: {
     path: buildPath,
   },
-  plugins: [new HolocronModuleRegisterPlugin('some-module')],
+  plugins: [new HolocronModuleRegisterPlugin('some-module', 'SomeModule')],
 };
 
 function waitForWebpack(options) {
@@ -64,9 +65,9 @@ describe('HolocronModuleRegisterPlugin', () => {
     await waitForWebpack(options);
 
     const fileContents = fs.readFileSync(path.join(buildPath, outputFileName)).toString();
-    expect(fileContents.startsWith('(function() {')).toBe(true);
+    expect(fileContents.startsWith('/******/ (() => { // webpackBootstrap')).toBe(true);
     expect(fileContents).toContain('const SomeModule = () => null;');
-    expect(fileContents.endsWith('Holocron.registerModule("some-module", holocronModule);})();')).toBe(true);
+    expect(fileContents).toContain('Holocron.registerModule("some-module", SomeModule);');
   });
 
   it('should wrap the contents in an IIFE that registers the module in production', async () => {
@@ -75,6 +76,7 @@ describe('HolocronModuleRegisterPlugin', () => {
     const outputFileName = 'webpack-test-output-prod.js';
 
     const options = merge(webpackOptions, {
+      devtool: false,
       mode: 'production',
       output: {
         filename: outputFileName,
@@ -84,7 +86,9 @@ describe('HolocronModuleRegisterPlugin', () => {
     await waitForWebpack(options);
     const fileContents = fs.readFileSync(path.join(buildPath, outputFileName)).toString();
     expect(fileContents).toContain('()=>null');
-    expect(fileContents.endsWith('Holocron.registerModule("some-module",holocronModule);')).toBe(true);
+    // This tests an implementation detail to some extent,
+    // but webpack is being too clever in this instance not to
+    expect(fileContents).toContain('Holocron.registerModule("some-module",(()=>null))})();');
   });
 
   it('should not wrap the contents of a non-main chunk an IIFE that registers the module', async () => {
@@ -103,9 +107,9 @@ describe('HolocronModuleRegisterPlugin', () => {
     await waitForWebpack(options);
 
     const fileContents = fs.readFileSync(path.join(buildPath, outputFileName)).toString();
-    expect(fileContents.startsWith('(function() {')).toBe(true);
+    expect(fileContents.startsWith('/******/ (() => { // webpackBootstrap')).toBe(true);
     expect(fileContents).toContain('const ModuleWithAsyncImport = () =>');
-    expect(fileContents.endsWith('Holocron.registerModule("some-module", holocronModule);})();')).toBe(true);
+    expect(fileContents).toContain('Holocron.registerModule("some-module", SomeModule);');
     const asyncChunkContents = fs.readFileSync(path.join(buildPath, `async-import.${outputFileName}`)).toString();
     expect(asyncChunkContents).toContain('() => \'Hello, world\'');
     expect(asyncChunkContents).not.toContain('Holocron.registerModule("some-module"');
@@ -130,6 +134,6 @@ describe('HolocronModuleRegisterPlugin', () => {
 
     await waitForWebpack(options);
     const fileContents = fs.readFileSync(path.join(buildPath, outputFileName)).toString();
-    expect(fileContents.endsWith(`Holocron.registerModule("${moduleName}", ${holocronModuleName});})();`)).toBe(true);
+    expect(fileContents).toContain('Holocron.registerModule("some-module", holocronModule-some-module);');
   });
 });

packages/holocron-module-register-webpack-plugin/package.json

@@ -1,6 +1,6 @@
 {
   "name": "holocron-module-register-webpack-plugin",
-  "version": "1.8.0",
+  "version": "2.0.0",
   "keywords": [
     "holocron",
     "amex",
@@ -27,9 +27,12 @@
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "license": "Apache-2.0",
-  "dependencies": {
-    "webpack": "^4.29.5",
-    "webpack-sources": "^1.3.0"
+  "peerDependencies": {
+    "webpack": "5.x"
+  },
+  "devDependencies": {
+    "webpack": "^5.88.2",
+    "webpack-merge": "^5.9.0"
   },
   "repository": {
     "type": "git",
@@ -39,8 +42,5 @@
   "homepage": "https://github.com/americanexpress/holocron",
   "bugs": {
     "url": "https://github.com/americanexpress/holocron/issues"
-  },
-  "devDependencies": {
-    "webpack-merge": "^4.2.1"
   }
 }