feat(build): expose true ESM bundle as primary artifact (#7937)

Refs #7907
Refs #7831

config/jest/jest.artifact.config.js

@@ -4,4 +4,5 @@ module.exports = {
   rootDir: path.join(__dirname, '..', '..'),
   testEnvironment: 'jsdom',
   testMatch: ['**/test/build-artifacts/**/*.js'],
+  transformIgnorePatterns: ['/node_modules/(?!(swagger-client|react-syntax-highlighter)/)'],
 };

package-lock.json

@@ -6,7 +6,7 @@
   "packages": {
     "": {
       "name": "swagger-ui",
-      "version": "4.8.0",
+      "version": "4.8.1",
       "license": "Apache-2.0",
       "dependencies": {
         "@babel/runtime-corejs3": "^7.16.8",
@@ -128,6 +128,7 @@
         "webpack-bundle-size-analyzer": "^3.1.0",
         "webpack-cli": "^4.9.2",
         "webpack-dev-server": "^4.7.4",
+        "webpack-node-externals": "=3.0.0",
         "webpack-stats-plugin": "=1.0.3"
       }
     },
@@ -24883,6 +24884,15 @@
         "node": ">=10.0.0"
       }
     },
+    "node_modules/webpack-node-externals": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/webpack-node-externals/-/webpack-node-externals-3.0.0.tgz",
+      "integrity": "sha512-LnL6Z3GGDPht/AigwRh2dvL9PQPFQ8skEpVrWZXLWBYmqcaojHNN0onvHzie6rq7EWKrrBfPYqNEzTJgiwEQDQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/webpack-stats-plugin": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/webpack-stats-plugin/-/webpack-stats-plugin-1.0.3.tgz",
@@ -44207,6 +44217,12 @@
         "wildcard": "^2.0.0"
       }
     },
+    "webpack-node-externals": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/webpack-node-externals/-/webpack-node-externals-3.0.0.tgz",
+      "integrity": "sha512-LnL6Z3GGDPht/AigwRh2dvL9PQPFQ8skEpVrWZXLWBYmqcaojHNN0onvHzie6rq7EWKrrBfPYqNEzTJgiwEQDQ==",
+      "dev": true
+    },
     "webpack-stats-plugin": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/webpack-stats-plugin/-/webpack-stats-plugin-1.0.3.tgz",

package.json

@@ -180,6 +180,7 @@
     "webpack-bundle-size-analyzer": "^3.1.0",
     "webpack-cli": "^4.9.2",
     "webpack-dev-server": "^4.7.4",
+    "webpack-node-externals": "=3.0.0",
     "webpack-stats-plugin": "=1.0.3"
   },
   "config": {

webpack/_config-builder.js

@@ -3,16 +3,13 @@
  */
 
 import path from "path"
-import fs from "fs"
 import deepExtend from "deep-extend"
 import webpack from "webpack"
 import TerserPlugin from "terser-webpack-plugin"
+import nodeExternals from "webpack-node-externals"
 
 import { getRepoInfo } from "./_helpers"
 import pkg from "../package.json"
-const nodeModules = fs.readdirSync("node_modules").filter(function(x) {
-  return x !== ".bin"
-})
 
 const projectBasePath = path.join(__dirname, "../")
 
@@ -30,7 +27,7 @@ const baseRules = [
     },
   },
   { test: /\.(txt|yaml)$/,
-    type: "asset/source", 
+    type: "asset/source",
   },
   {
     test: /\.(png|jpg|jpeg|gif|svg)$/,
@@ -93,24 +90,12 @@ export default function buildConfig(
 
       externals: includeDependencies
         ? {
-            // json-react-schema/deeper depends on buffertools, which fails.
+            esprima: "esprima",
-            buffertools: true,
-            esprima: true,
           }
-        : (context, request, cb) => {
+        : [nodeExternals({
-            // webpack injects some stuff into the resulting file,
+          importType: (moduleName) => {
-            // these libs need to be pulled in to keep that working.
+            return `commonjs ${moduleName}`
-            var exceptionsForWebpack = ["ieee754", "base64-js"]
+          }})],
-            if (
-              nodeModules.indexOf(request) !== -1 ||
-              exceptionsForWebpack.indexOf(request) !== -1
-            ) {
-              cb(null, "commonjs " + request)
-              return
-            }
-            cb()
-          },
-
       resolve: {
         modules: [path.join(projectBasePath, "./src"), "node_modules"],
         extensions: [".web.js", ".js", ".jsx", ".json", ".less"],

webpack/es-bundle-core.babel.js

@@ -2,17 +2,17 @@
  * @prettier
  */
 
- /** Dev Note: 
+ /** Dev Note:
  * StatsWriterPlugin is disabled by default; uncomment to enable
  * when enabled, rebuilding the bundle will cause error for assetSizeLimit,
  * which we want to keep out of CI/CD
  * post build, cli command: npx webpack-bundle-analyzer <path>
- */ 
+ */
 
 import configBuilder from "./_config-builder"
 import { DuplicatesPlugin } from "inspectpack/plugin"
 import { WebpackBundleSizeAnalyzerPlugin } from "webpack-bundle-size-analyzer"
-// import path from "path"
+import nodeExternals from "webpack-node-externals"
 // import { StatsWriterPlugin } from "webpack-stats-plugin"
 
 const result = configBuilder(
@@ -28,17 +28,32 @@ const result = configBuilder(
         "./src/index.js",
       ],
     },
+    experiments: {
+      outputModule: true,
+    },
     output: {
+      module: true,
+      libraryTarget: "module",
       library: {
-        type: "commonjs2",
+        type: "module",
-        export: "default",
+      },
+      environment: {
+        module: true,
       },
     },
+    externalsType: "module",
+    externals: [
+      {
+        esprima: "esprima",
+      },
+      nodeExternals({
+        importType: (moduleName) => {
+          return `module ${moduleName}`
+      }})
+    ],
     plugins: [
       new DuplicatesPlugin({
-        // emit compilation warning or error? (Default: `false`)
         emitErrors: false,
-        // display full duplicates information? (Default: `false`)
         verbose: false,
       }),
       new WebpackBundleSizeAnalyzerPlugin("log.es-bundle-core-sizes.swagger-ui.txt"),
@@ -50,4 +65,5 @@ const result = configBuilder(
   }
 )
 
+
 export default result

webpack/es-bundle.babel.js

@@ -2,12 +2,12 @@
  * @prettier
  */
 
-/** Dev Note: 
+/** Dev Note:
  * StatsWriterPlugin is disabled by default; uncomment to enable
  * when enabled, rebuilding the bundle will cause error for assetSizeLimit,
  * which we want to keep out of CI/CD
  * post build, cli command: npx webpack-bundle-analyzer <path>
- */ 
+ */
 
 import configBuilder from "./_config-builder"
 import { DuplicatesPlugin } from "inspectpack/plugin"