feat(build): es2015 bundle artifact (#6291)

* es2015 bundle with dependencies via npm script build:es:bundle
* es2015 bundle without dependencies via npm script build:es:bundle
* jest dependency for test:artifact
* migrate babel.config.json to babel.config.js and maintain env support for commonjs and es2015
* remove polyfill
* fix es syntax: replace module.exports with export
* fix es syntax: remove .jsx extension inside import

.eslintrc

@@ -3,6 +3,7 @@ env:
   browser: true
   node: true
   es6: true
+  jest: true
 parserOptions:
   ecmaFeatures:
     jsx: true

.gitignore

@@ -11,9 +11,12 @@ selenium-debug.log
 chromedriver.log
 test/e2e/db.json
 docs/_book
-dist/log*
 
+# dist
 flavors/**/dist/*
+/lib
+/es
+dist/log*
 
 # Cypress
 test/e2e-cypress/screenshots

.mocharc.yaml

@@ -1,3 +1,2 @@
 recursive: true
 require: ['esm','@babel/register','source-map-support', 'test/mocha/setup.js']
-# spec: 'test/mocha/**/*.{js,jsx}'

babel.config.js

@@ -1,5 +1,58 @@
-{
+module.exports = {
   "env": {
+    "commonjs": {
+      "presets": [
+        [
+          "@babel/preset-env",
+          {
+            "debug": false,
+            "modules": "commonjs",
+            "targets": {
+              "node": "8"
+            },
+            "forceAllTransforms": false,
+            "ignoreBrowserslistConfig": true
+          }
+        ],
+        "@babel/preset-react",
+      ],
+      "plugins": [
+        [
+          "@babel/plugin-transform-modules-commonjs",
+          {
+            "loose": true
+          }
+        ],
+        "@babel/proposal-class-properties",
+        "@babel/proposal-object-rest-spread",
+        "@babel/plugin-proposal-optional-chaining",
+      ]
+    },
+    "es": {
+      "presets": [
+        [
+          "@babel/preset-env",
+          {
+            "debug": false,
+            "modules": false
+          }
+        ],
+        "@babel/preset-react",
+      ],
+      "plugins": [
+        [
+          "@babel/plugin-transform-runtime",
+          {
+            "absoluteRuntime": false,
+            "corejs": 2,
+            "version": "^7.10.4"
+          }
+        ],
+        "@babel/proposal-class-properties",
+        "@babel/proposal-object-rest-spread",
+        "@babel/plugin-proposal-optional-chaining",
+      ]
+    },
     "development": {
       "presets": [
         [

config/.eslintrc

@@ -0,0 +1,8 @@
+{
+  "rules": {
+    "import/no-unresolved": 0,
+    "import/extensions": 0,
+    "quotes": ["error", "single"],
+    "semi": ["error", "always"]
+  }
+}

config/jest/jest.artifact-es-bundle-core.config.js

@@ -0,0 +1,7 @@
+const path = require('path');
+
+module.exports = {
+  rootDir: path.join(__dirname, '..', '..'),
+  testEnvironment: 'jsdom',
+  testMatch: ['**/test/build-artifacts/es-bundle-core.js'],
+};

config/jest/jest.artifact-es-bundle.config.js

@@ -0,0 +1,7 @@
+const path = require('path');
+
+module.exports = {
+  rootDir: path.join(__dirname, '..', '..'),
+  testEnvironment: 'jsdom',
+  testMatch: ['**/test/build-artifacts/es-bundle.js'],
+};

config/jest/jest.artifact-umd-bundle.config.js

@@ -0,0 +1,7 @@
+const path = require('path');
+
+module.exports = {
+  rootDir: path.join(__dirname, '..', '..'),
+  testEnvironment: 'jsdom',
+  testMatch: ['**/test/build-artifacts/umd.js'],
+};

package.json

@@ -2,6 +2,7 @@
   "name": "swagger-ui",
   "version": "3.31.1",
   "main": "dist/swagger-ui.js",
+  "module": "dist/swagger-ui-es-bundle.js",
   "homepage": "https://github.com/swagger-api/swagger-ui",
   "repository": "git@github.com:swagger-api/swagger-ui.git",
   "contributors": [
@@ -16,11 +17,13 @@
   "license": "Apache-2.0",
   "scripts": {
     "automated-release": "release-it -VV --config ./release/.release-it.json",
-    "build": "run-p --aggregate-output build-core build-bundle build-standalone build-stylesheets",
+    "build": "run-p --aggregate-output build-core build-bundle build-standalone build-stylesheets build:core:commonjs build:core:es build:es:bundle build:es:bundle:core",
     "build-bundle": "webpack --colors --config webpack/bundle.babel.js",
     "build-core": "webpack --colors --config webpack/core.babel.js",
     "build-standalone": "webpack --colors --config webpack/standalone.babel.js",
     "build-stylesheets": "webpack --colors --config webpack/stylesheets.babel.js",
+    "build:es:bundle": "webpack --colors --config webpack/es-bundle.babel.js",
+    "build:es:bundle:core": "webpack --colors --config webpack/es-bundle-core.babel.js",
     "predev": "npm install",
     "dev": "webpack-dev-server --config webpack/dev.babel.js",
     "deps-license": "license-checker --production --csv --out $npm_package_config_deps_check_dir/licenses.csv && license-checker --development --csv --out $npm_package_config_deps_check_dir/licenses-dev.csv",
@@ -34,6 +37,10 @@
     "just-test-in-node": "cross-env BABEL_ENV=test mocha \"test/mocha/**/*.{js,jsx}\"",
     "test-e2e-cypress": "cypress run",
     "test-e2e-selenium": "sleep 3 && nightwatch test/e2e-selenium/scenarios/ --config test/e2e-selenium/nightwatch.json",
+    "test:artifact": "run-s test:artifact:umd:bundle test:artifact:es:bundle test:artifact:es:bundle:core",
+    "test:artifact:umd:bundle": "npm run build-bundle && cross-env BABEL_ENV=commonjs jest --config ./config/jest/jest.artifact-umd-bundle.config.js",
+    "test:artifact:es:bundle": "npm run build:es:bundle && cross-env BABEL_ENV=commonjs jest --config ./config/jest/jest.artifact-es-bundle.config.js",
+    "test:artifact:es:bundle:core": "npm run build:es:bundle:core && cross-env BABEL_ENV=commonjs jest --config ./config/jest/jest.artifact-es-bundle-core.config.js",
     "e2e-initial-render": "nightwatch test/e2e-selenium/scenarios/ --config test/e2e-selenium/nightwatch.json --group initial-render",
     "mock-api": "json-server --watch test/e2e-selenium/db.json --port 3204",
     "hot-e2e-cypress-server": "webpack-dev-server --config webpack/dev-e2e.babel.js --content-base test/e2e-cypress/static",
@@ -99,6 +106,7 @@
     "@babel/preset-env": "^7.10.2",
     "@babel/preset-react": "^7.10.1",
     "@babel/register": "^7.10.1",
+    "@jest/globals": "=26.4.0",
     "@release-it/conventional-changelog": "=1.1.0",
     "autoprefixer": "^9.0.0",
     "babel-eslint": "^10.0.0",
@@ -130,6 +138,7 @@
     "ignore-assets-webpack-plugin": "^2.0.1",
     "imports-loader": "^0.8.0",
     "inspectpack": "=4.5.2",
+    "jest": "=26.4.0",
     "jsdom": "^11.10.0",
     "json-loader": "^0.5.7",
     "json-merger": "^1.1.2",

src/core/plugins/oas3/components/index.js

@@ -1,6 +1,6 @@
 import Callbacks from "./callbacks"
 import RequestBody from "./request-body"
-import OperationLink from "./operation-link.jsx"
+import OperationLink from "./operation-link"
 import Servers from "./servers"
 import ServersContainer from "./servers-container"
 import RequestBodyEditor from "./request-body-editor"

src/core/window.js

@@ -26,4 +26,4 @@ function makeWindow() {
   return win
 }
 
-module.exports = makeWindow()
+export default makeWindow()

src/index.js

@@ -0,0 +1,3 @@
+import SwaggerUI from "./core"
+
+export default SwaggerUI

src/plugins/topbar/index.js

@@ -1,4 +1,4 @@
-import Topbar from "./topbar.jsx"
+import Topbar from "./topbar"
 
 export default function () {
   return {

test/build-artifacts/.eslintrc

@@ -0,0 +1,14 @@
+{
+  "rules": {
+    "import/no-unresolved": 0,
+    "import/extensions": 0,
+    "quotes": [
+      "error",
+      "single"
+    ],
+    "semi": [
+      "error",
+      "always"
+    ]
+  }
+}

test/build-artifacts/es-bundle-core.js

@@ -0,0 +1,8 @@
+import { describe, expect, test } from '@jest/globals';
+import SwaggerUI from '../../dist/swagger-ui-es-bundle-core';
+
+describe('webpack browser es-bundle-core build', () => {
+  test('should export a function for es-bundle-core', () => {
+    expect(SwaggerUI).toBeInstanceOf(Function);
+  });
+});

test/build-artifacts/es-bundle.js

@@ -0,0 +1,8 @@
+import { describe, expect, test } from '@jest/globals';
+import SwaggerUI from '../../dist/swagger-ui-es-bundle';
+
+describe('webpack browser es-bundle build', () => {
+  test('should export a function for es-bundle', () => {
+    expect(SwaggerUI).toBeInstanceOf(Function);
+  });
+});

test/build-artifacts/umd.js

@@ -0,0 +1,8 @@
+import { describe, expect, test } from '@jest/globals';
+import SwaggerUI from '../../dist/swagger-ui-bundle';
+
+describe('webpack browser umd build', () => {
+  test('should export a function for (umd) bundle', () => {
+    expect(SwaggerUI).toBeInstanceOf(Function);
+  });
+});

webpack/bundle.babel.js

@@ -2,9 +2,18 @@
  * @prettier
  */
 
+/** 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 { StatsWriterPlugin } from "webpack-stats-plugin"
 
 const result = configBuilder(
   {
@@ -16,8 +25,7 @@ const result = configBuilder(
   {
     entry: {
       "swagger-ui-bundle": [
-        "./src/polyfills.js", // TODO: remove?
+        "./src/index.js",
-        "./src/core/index.js",
       ],
     },
     output: {
@@ -31,6 +39,10 @@ const result = configBuilder(
         verbose: false,
       }),
       new WebpackBundleSizeAnalyzerPlugin("log.bundle-sizes.swagger-ui.txt"),
+      // new StatsWriterPlugin({
+      //   filename: path.join("log.bundle-stats.swagger-ui.json"),
+      //   fields: null,
+      // }),
     ]
   }
 )

webpack/core.babel.js

@@ -14,8 +14,8 @@ const result = configBuilder(
   {
     entry: {
       "swagger-ui": [
-        "./src/polyfills.js", // TODO: remove?
+        // "./src/polyfills.js", // TODO: remove?
-        "./src/core/index.js",
+        "./src/index.js",
       ],
     },
 

webpack/es-bundle-core.babel.js

@@ -0,0 +1,51 @@
+/**
+ * @prettier
+ */
+
+ /** 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 { StatsWriterPlugin } from "webpack-stats-plugin"
+
+const result = configBuilder(
+  {
+    minimize: true,
+    mangle: true,
+    sourcemaps: true,
+    includeDependencies: false,
+  },
+  {
+    entry: {
+      "swagger-ui-es-bundle-core": [
+        "./src/index.js",
+      ],
+    },
+    output: {
+      library: "SwaggerUIBundle",
+      libraryTarget: "commonjs2",
+    },
+    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"),
+      // new StatsWriterPlugin({
+      //   filename: path.join("log.es-bundle-core-stats.swagger-ui.json"),
+      //   fields: null,
+      // }),
+    ]
+  }
+)
+
+export default result

webpack/es-bundle.babel.js

@@ -0,0 +1,51 @@
+/**
+ * @prettier
+ */
+
+/** 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 { StatsWriterPlugin } from "webpack-stats-plugin"
+
+const result = configBuilder(
+  {
+    minimize: true,
+    mangle: true,
+    sourcemaps: true,
+    includeDependencies: true,
+  },
+  {
+    entry: {
+      "swagger-ui-es-bundle": [
+        "./src/index.js",
+      ],
+    },
+    output: {
+      library: "SwaggerUIBundle",
+      libraryTarget: "commonjs2",
+    },
+    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-sizes.swagger-ui.txt"),
+      // new StatsWriterPlugin({
+      //   filename: path.join("log.es-bundle-stats.swagger-ui.json"),
+      //   fields: null,
+      // }),
+    ]
+  }
+)
+
+export default result