feat(oneAppBundler): Migrate to Webpack v5

.github/workflows/health-check.yml

@@ -10,7 +10,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node: [ '16.x', '18.x' ]
+        node: [ '18.x' ]
     name: Node ${{ matrix.node }}
     steps:
     - name: Checkout

.github/workflows/tests.yml

@@ -11,7 +11,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node: [ '16.x', '18.x' ]
+        node: [ '18.x' ]
     name: Node ${{ matrix.node }}
     steps:
       - name: Checkout

jest.cjs.config.js

@@ -33,8 +33,8 @@ module.exports = {
   },
   roots: [
     'packages/eslint-plugin-one-app',
-    'packages/one-app-bundler',
     'packages/one-app-locale-bundler',
+    'packages/one-app-server-bundler',
     'packages/one-app-runner',
   ],
 };

jest.esm.config.js

@@ -27,6 +27,8 @@ module.exports = {
     '!**/__test_fixtures__/**',
     '!**/node_modules/**',
     '!**/build/**',
+    '!packages/*/bin/**',
+    '!packages/*/test-utils.js',
     '!packages/*/test-results/**',
     '!packages/*/jest.esm.setup.js',
     // Despite it not being in the root, coverage reports see this package
@@ -35,5 +37,6 @@ module.exports = {
   ],
   roots: [
     'packages/one-app-dev-bundler',
+    'packages/one-app-bundler',
   ],
 };

package.json

@@ -17,8 +17,8 @@
     "test": "yarn test:unit",
     "test:lint": "eslint --ext js,jsx,snap,md .",
     "test:unit": "yarn test:unit:cjs && yarn test:unit:esm",
-    "test:unit:cjs": "cross-env NODE_ENV=production jest --config=jest.cjs.config.js",
-    "test:unit:esm": "cross-env NODE_ENV=production jest --config=jest.esm.config.js",
+    "test:unit:cjs": "cross-env NODE_ENV=production jest --run-in-band --config=jest.cjs.config.js",
+    "test:unit:esm": "cross-env NODE_ENV=production jest --run-in-band --config=jest.esm.config.js",
     "test:git-history": "commitlint --from origin/main --to HEAD",
     "posttest": "yarn test:lint && yarn test:git-history && yarn test:lockfile",
     "test:lockfile": "lockfile-lint --path yarn.lock --allowed-hosts registry.yarnpkg.com --validate-https",
@@ -52,4 +52,4 @@
       "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
     }
   }
-}
+}

packages/one-app-bundler/.eslintrc.json

@@ -0,0 +1,8 @@
+{
+  "extends": "amex",
+  "rules": {
+    "no-console": 0,
+    "import/extensions": 0, // ECMAscript modules explicitly require all extensions for relative imports
+    "unicorn/import-index": 0 // ECMAscript modules explicitly require no folder imports
+  }
+}

packages/one-app-bundler/README.md

@@ -401,19 +401,3 @@ You can specify which version of One App you module is compatible with by simply
   }
 }
 ```
-
-### Other Available Scripts
-
-The following scripts are provided by `one-app-bundler` and used by `one-app`.
-
-**`npm run build:bundle`**
-
-This would bundle one app.
-
-**`npm run serve-module ../path-to-your-one-app-module`**
-
-This would serve your module locally.
-
-**`npm run drop-module ../path-to-your-one-app-module`**
-
-This would stop serving your module locally.

packages/one-app-bundler/__tests__/.eslintrc.json

@@ -3,6 +3,14 @@
   "rules": {
     "no-console": 0, // CLI's are allowed to use console
     "unicorn/no-process-exit": 0, // CLI's are allowed to exit
-    "unicorn/prefer-spread": 0 // Spread is not always semantically identical
+    "unicorn/prefer-spread": 0, // Spread is not always semantically identical
+    "import/extensions": 0, // ECMAscript modules explicitly require all extensions for relative imports
+    "unicorn/import-index": 0, // ECMAscript modules explicitly require no folder imports
+    "jest/no-large-snapshots": [ // The snapshot for the common config is now this long
+      "error",
+      {
+        "maxSize": 58
+      }
+    ]
   }
 }

packages/one-app-bundler/__tests__/bin/bundle-module.spec.js

@@ -19,7 +19,10 @@ jest.mock('@americanexpress/one-app-dev-bundler', () => ({
   devBuildModule: async () => undefined,
   bundleExternalFallbacks: async () => undefined,
 }));
-jest.mock('../../bin/webpack-bundle-module', () => jest.fn());
+
+jest.mock('../../bin/webpack-bundle-module', () => ({
+  webpackBundleModule: jest.fn(),
+}));
 
 jest.spyOn(console, 'info');
 

packages/one-app-bundler/__tests__/bin/webpack-bundle-module.spec.js

@@ -46,64 +46,78 @@ describe('bundle-module', () => {
     process.argv = argv;
   });
 
-  it('should bundle language packs', () => {
+  it('should bundle language packs', async () => {
+    expect.assertions(2);
     process.argv = [];
-    require('../../bin/webpack-bundle-module');
+    const { webpackBundleModule } = require('../../bin/webpack-bundle-module');
+    await webpackBundleModule();
     expect(localeBundler).toHaveBeenCalledTimes(1);
     expect(localeBundler).toHaveBeenCalledWith(false);
   });
 
-  it('should bundle the module for the server', () => {
+  it('should bundle the module for the server', async () => {
+    expect.assertions(4);
     process.argv = [];
-    require('../../bin/webpack-bundle-module');
+    const { webpackBundleModule } = require('../../bin/webpack-bundle-module');
+    await webpackBundleModule();
 
     expect(webpack).toHaveBeenCalledTimes(3);
     expect(webpack).toHaveBeenCalledWith(serverConfig, 'cb(node, true)');
     expect(webpack.mock.calls[0][0]).not.toHaveProperty('watch');
     expect(webpack.mock.calls[0][0]).not.toHaveProperty('watchOptions');
   });
 
-  it('should bundle the module for modern browsers', () => {
+  it('should bundle the module for modern browsers', async () => {
+    expect.assertions(4);
     process.argv = [];
-    require('../../bin/webpack-bundle-module');
+    const { webpackBundleModule } = require('../../bin/webpack-bundle-module');
+    await webpackBundleModule();
 
     expect(webpack).toHaveBeenCalledTimes(3);
     expect(webpack).toHaveBeenCalledWith(clientConfig('modern'), 'cb(browser, true)');
     expect(webpack.mock.calls[1][0]).not.toHaveProperty('watch');
     expect(webpack.mock.calls[1][0]).not.toHaveProperty('watchOptions');
   });
 
-  it('should bundle the module for legacy browsers', () => {
+  it('should bundle the module for legacy browsers', async () => {
+    expect.assertions(4);
     process.argv = [];
-    require('../../bin/webpack-bundle-module');
+    const { webpackBundleModule } = require('../../bin/webpack-bundle-module');
+    await webpackBundleModule();
 
     expect(webpack).toHaveBeenCalledTimes(3);
     expect(webpack).toHaveBeenCalledWith(clientConfig('legacy'), 'cb(legacyBrowser, true)');
     expect(webpack.mock.calls[2][0]).not.toHaveProperty('watch');
     expect(webpack.mock.calls[2][0]).not.toHaveProperty('watchOptions');
   });
 
-  it('should use the locale bundler\'s watch mode', () => {
+  it('should use the locale bundler\'s watch mode', async () => {
+    expect.assertions(2);
     process.argv = ['--watch'];
-    require('../../bin/webpack-bundle-module');
+    const { webpackBundleModule } = require('../../bin/webpack-bundle-module');
+    await webpackBundleModule();
     expect(localeBundler).toHaveBeenCalledTimes(1);
     expect(localeBundler).toHaveBeenCalledWith(true);
   });
 
-  it('should bundle module for legacy browsers when disableDevelopmentLegacyBundle is false', () => {
+  it('should bundle module for legacy browsers when disableDevelopmentLegacyBundle is false', async () => {
+    expect.assertions(2);
     jest.mock('../../utils/getConfigOptions', () => jest.fn(() => ({ disableDevelopmentLegacyBundle: false })));
     process.argv = [];
-    require('../../bin/webpack-bundle-module');
+    const { webpackBundleModule } = require('../../bin/webpack-bundle-module');
+    await webpackBundleModule();
 
     expect(webpack).toHaveBeenCalledTimes(3);
     expect(webpack).toHaveBeenCalledWith(clientConfig('legacy'), 'cb(legacyBrowser, true)');
   });
 
-  it('should not bundle module for legacy browsers when disableDevelopmentLegacyBundle is true', () => {
+  it('should not bundle module for legacy browsers when disableDevelopmentLegacyBundle is true', async () => {
+    expect.assertions(2);
     process.env.NODE_ENV = 'development';
     jest.mock('../../utils/getConfigOptions', () => jest.fn(() => ({ disableDevelopmentLegacyBundle: true })));
     process.argv = [];
-    require('../../bin/webpack-bundle-module');
+    const { webpackBundleModule } = require('../../bin/webpack-bundle-module');
+    await webpackBundleModule();
 
     expect(webpack).toHaveBeenCalledTimes(2);
     expect(webpack).not.toHaveBeenCalledWith(clientConfig('legacy'), 'cb(legacyBrowser, true)');

packages/one-app-bundler/__tests__/utils/__snapshots__/extendWebpackConfig.spec.js.snap

@@ -62,9 +62,9 @@ Object {
 }
 `;
 
-exports[`extendWebpackConfig should use the correct trailing slash on windows 1`] = `
+exports[`extendWebpackConfig should use the provided requiredExternals configured, resolved to the js file 1`] = `
 Object {
-  "test": StringMatching /ajv\\\\\\\\\\$/,
+  "test": StringMatching /ajv\\.js\\$/,
   "use": Array [
     Object {
       "loader": "@americanexpress/one-app-bundler/webpack/loaders/externals-loader",
@@ -77,9 +77,9 @@ Object {
 }
 `;
 
-exports[`extendWebpackConfig should use the correct trailing slash on windows 2`] = `
+exports[`extendWebpackConfig should use the provided requiredExternals configured, resolved to the js file 2`] = `
 Object {
-  "test": StringMatching /lodash\\\\\\\\\\$/,
+  "test": StringMatching /lodash\\.js\\$/,
   "use": Array [
     Object {
       "loader": "@americanexpress/one-app-bundler/webpack/loaders/externals-loader",
@@ -92,54 +92,7 @@ Object {
 }
 `;
 
-exports[`extendWebpackConfig should use the correct trailing slash on windows 3`] = `
-Object {
-  "test": "/path/src/index",
-  "use": Array [
-    Object {
-      "loader": "@americanexpress/one-app-bundler/webpack/loaders/validate-required-externals-loader",
-      "options": Object {
-        "requiredExternals": Array [
-          "ajv",
-          "lodash",
-        ],
-      },
-    },
-  ],
-}
-`;
-
-exports[`extendWebpackConfig should use the provided requiredExternals configured 1`] = `
-Object {
-  "test": StringMatching /ajv\\\\/\\$/,
-  "use": Array [
-    Object {
-      "loader": "@americanexpress/one-app-bundler/webpack/loaders/externals-loader",
-      "options": Object {
-        "bundleTarget": undefined,
-        "externalName": "ajv",
-      },
-    },
-  ],
-}
-`;
-
-exports[`extendWebpackConfig should use the provided requiredExternals configured 2`] = `
-Object {
-  "test": StringMatching /lodash\\\\/\\$/,
-  "use": Array [
-    Object {
-      "loader": "@americanexpress/one-app-bundler/webpack/loaders/externals-loader",
-      "options": Object {
-        "bundleTarget": undefined,
-        "externalName": "lodash",
-      },
-    },
-  ],
-}
-`;
-
-exports[`extendWebpackConfig should use the provided requiredExternals configured 3`] = `
+exports[`extendWebpackConfig should use the provided requiredExternals configured, resolved to the js file 3`] = `
 Object {
   "test": "/path/src/index",
   "use": Array [

packages/one-app-bundler/__tests__/utils/__snapshots__/getConfigOptions.spec.js.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports['getConfigOptions should throw when a user attempts to provide an app provided external 1'] = '"@americanexpress/one-app-bundler: Attempted to bundle @americanexpress/one-app-ducks, but modules cannot provide externals that One App includes."';
+exports[`getConfigOptions should throw when a user attempts to provide an app provided external 1`] = `"@americanexpress/one-app-bundler: Attempted to bundle @americanexpress/one-app-ducks, but modules cannot provide externals that One App includes."`;
 
-exports['getConfigOptions should throw when a user attempts to use an app provided external from the root module 1'] = '"@americanexpress/one-app-bundler: Attempted to bundle @americanexpress/one-app-router, but modules cannot provide externals that One App includes."';
+exports[`getConfigOptions should throw when a user attempts to use an app provided external from the root module 1`] = `"@americanexpress/one-app-bundler: Attempted to bundle @americanexpress/one-app-router, but modules cannot provide externals that One App includes."`;
 
-exports['getConfigOptions should throw when a user includes both requiredExternals and providedExternals configs 1'] = '"@americanexpress/one-app-bundler: Modules cannot configure both requiredExternals and providedExternals. See README for details."';
+exports[`getConfigOptions should throw when a user includes both requiredExternals and providedExternals configs 1`] = `"@americanexpress/one-app-bundler: Modules cannot configure both requiredExternals and providedExternals. See README for details."`;