api

frontend/web/api-doc/webpack/_config-builder.js

@@ -0,0 +1,150 @@
+/**
+ * @prettier
+ */
+
+import path from "path"
+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 projectBasePath = path.join(__dirname, "../")
+
+const baseRules = [
+  {
+    test: /\.jsx?$/,
+    include: [
+      path.join(projectBasePath, "src"),
+      path.join(projectBasePath, "node_modules", "object-assign-deep"),
+    ],
+    loader: "babel-loader",
+    options: {
+      retainLines: true,
+      cacheDirectory: true,
+    },
+  },
+  { test: /\.(txt|yaml)$/,
+    type: "asset/source",
+  },
+  {
+    test: /\.(png|jpg|jpeg|gif|svg)$/,
+    type: "asset/inline",
+  },
+]
+
+export default function buildConfig(
+  {
+    minimize = true,
+    mangle = true,
+    sourcemaps = true,
+    includeDependencies = true,
+  },
+  customConfig
+) {
+  const gitInfo = getRepoInfo()
+
+  var plugins = [
+    new webpack.DefinePlugin({
+      buildInfo: JSON.stringify({
+        PACKAGE_VERSION: pkg.version,
+        GIT_COMMIT: gitInfo.hash,
+        GIT_DIRTY: gitInfo.dirty,
+        BUILD_TIME: new Date().toUTCString(),
+      }),
+    }),
+    new webpack.ProvidePlugin({
+      process: "process/browser",
+      Buffer: ["buffer", "Buffer"],
+    }),
+  ]
+
+  const completeConfig = deepExtend(
+    {},
+    {
+      mode: "production",
+
+      entry: {},
+
+      output: {
+        path: path.join(projectBasePath, "dist"),
+        publicPath: "/dist",
+        filename: "[name].js",
+        chunkFilename: "[name].js",
+        globalObject: "this",
+        library: {
+          // when esm, library.name should be unset, so do not define here
+          // when esm, library.export should be unset, so do not define here
+          type: "umd",
+        }
+      },
+
+      target: "web",
+
+
+      module: {
+        rules: baseRules,
+      },
+
+      externals: includeDependencies
+        ? {
+            esprima: "esprima",
+          }
+        : [nodeExternals({
+          importType: (moduleName) => {
+            return `commonjs ${moduleName}`
+          }})],
+      resolve: {
+        modules: [path.join(projectBasePath, "./src"), "node_modules"],
+        extensions: [".web.js", ".js", ".jsx", ".json", ".less"],
+        alias: {
+          // these aliases make sure that we don't bundle same libraries twice
+          // when the versions of these libraries diverge between swagger-js and swagger-ui
+          "@babel/runtime-corejs3": path.resolve(__dirname, "..", "node_modules/@babel/runtime-corejs3"),
+          "js-yaml": path.resolve(__dirname, "..", "node_modules/js-yaml"),
+          "lodash": path.resolve(__dirname, "..", "node_modules/lodash"),
+          "react-is": path.resolve(__dirname, "..", "node_modules/react-is"),
+          "safe-buffer": path.resolve(__dirname, "..", "node_modules/safe-buffer"),
+        },
+        fallback: {
+          fs: false,
+          stream: require.resolve("stream-browserify"),
+        },
+      },
+
+      // If we're mangling, size is a concern -- so use trace-only sourcemaps
+      // Otherwise, provide heavy souremaps suitable for development
+      devtool: sourcemaps
+        ? minimize
+          ? "nosources-source-map"
+          : "cheap-module-source-map"
+        : false,
+
+      performance: {
+        hints: "error",
+        maxEntrypointSize: 1153434,
+        maxAssetSize: 1153434,
+      },
+
+      optimization: {
+        minimize: !!minimize,
+        minimizer: [
+          compiler =>
+            new TerserPlugin({
+              terserOptions: {
+                mangle: !!mangle,
+              },
+            }).apply(compiler)
+        ],
+      },
+    },
+    customConfig
+  )
+
+  // deepExtend mangles Plugin instances, this doesn't
+  completeConfig.plugins = plugins.concat(customConfig.plugins || [])
+
+  return completeConfig
+}

frontend/web/api-doc/webpack/_helpers.js

@@ -0,0 +1,17 @@
+/**
+ * @prettier
+ */
+
+import { gitDescribeSync } from "git-describe"
+
+export function getRepoInfo() {
+  try {
+    return gitDescribeSync(__dirname)
+  } catch (e) {
+    console.error(e)
+    return {
+      hash: "noGit",
+      dirty: false,
+    }
+  }
+}

frontend/web/api-doc/webpack/bundle.babel.js

@@ -0,0 +1,54 @@
+/**
+ * @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-bundle": [
+        "./src/index.js",
+      ],
+    },
+    output: {
+      globalObject: "this",
+      library: {
+        name: "SwaggerUIBundle",
+        export: "default",
+      },
+    },
+    plugins: [
+      new DuplicatesPlugin({
+        // emit compilation warning or error? (Default: `false`)
+        emitErrors: false,
+        // display full duplicates information? (Default: `false`)
+        verbose: false,
+      }),
+      new WebpackBundleSizeAnalyzerPlugin("log.bundle-sizes.swagger-ui.txt"),
+      // new StatsWriterPlugin({
+      //   filename: path.join("log.bundle-stats.swagger-ui.json"),
+      //   fields: null,
+      // }),
+    ],
+  }
+)
+
+export default result

frontend/web/api-doc/webpack/core.babel.js

@@ -0,0 +1,31 @@
+/**
+ * @prettier
+ */
+
+import configBuilder from "./_config-builder"
+
+const result = configBuilder(
+  {
+    minimize: true,
+    mangle: true,
+    sourcemaps: true,
+    includeDependencies: false,
+  },
+  {
+    entry: {
+      "swagger-ui": [
+        "./src/index.js",
+      ],
+    },
+
+    output: {
+      globalObject: "this",
+      library: {
+        name: "SwaggerUICore",
+        export: "default",
+      },
+    },
+  }
+)
+
+export default result

frontend/web/api-doc/webpack/dev-e2e.babel.js

@@ -0,0 +1,76 @@
+/**
+ * @prettier
+ */
+
+import path from "path"
+
+import configBuilder from "./_config-builder"
+import styleConfig from "./stylesheets.babel"
+
+// Pretty much the same as devConfig, but with changes to port and static.directory
+const devE2eConfig = configBuilder(
+  {
+    minimize: false,
+    mangle: false,
+    sourcemaps: true,
+    includeDependencies: true,
+  },
+  {
+    mode: "development",
+    entry: {
+      "swagger-ui-bundle": [
+        "./src/core/index.js",
+      ],
+      "swagger-ui-standalone-preset": [
+        "./src/standalone/index.js",
+      ],
+      "swagger-ui": "./src/style/main.scss",
+    },
+
+    performance: {
+      hints: false
+    },
+
+    output: {
+      filename: "[name].js",
+      chunkFilename: "[id].js",
+      library: {
+        name: "[name]",
+        export: "default",
+      },
+      publicPath: "/",
+    },
+
+    devServer: {
+      allowedHosts: "all", // for development within VMs
+      headers: {
+        "Access-Control-Allow-Origin": "*",
+        "Access-Control-Allow-Methods": "*",
+        "Access-Control-Allow-Headers": "*",
+      },
+      port: 3230,
+      host: "0.0.0.0",
+      hot: true,
+      static: {
+        directory: path.join(__dirname, "../", "test", "e2e-cypress", "static"),
+        publicPath: "/",
+      },
+      client: {
+        logging: "info",
+        progress: true,
+      },
+      devMiddleware: {},
+    },
+  },
+)
+
+// mix in the style config's plugins and loader rules
+
+devE2eConfig.plugins = [...devE2eConfig.plugins, ...styleConfig.plugins]
+
+devE2eConfig.module.rules = [
+  ...devE2eConfig.module.rules,
+  ...styleConfig.module.rules,
+]
+
+export default devE2eConfig

frontend/web/api-doc/webpack/dev.babel.js

@@ -0,0 +1,121 @@
+/**
+ * @prettier
+ */
+
+import path from "path"
+import ReactRefreshWebpackPlugin from "@pmmmwh/react-refresh-webpack-plugin"
+import HtmlWebpackPlugin from "html-webpack-plugin"
+import { HtmlWebpackSkipAssetsPlugin } from "html-webpack-skip-assets-plugin"
+
+import configBuilder from "./_config-builder"
+import styleConfig from "./stylesheets.babel"
+
+const projectBasePath = path.join(__dirname, "../")
+const isDevelopment = process.env.NODE_ENV !== "production"
+
+const devConfig = configBuilder(
+  {
+    minimize: false,
+    mangle: false,
+    sourcemaps: true,
+    includeDependencies: true,
+  },
+  {
+    mode: "development",
+    entry: {
+      "swagger-ui-bundle": [
+        "./src/core/index.js",
+      ],
+      "swagger-ui-standalone-preset": [
+        "./src/standalone/index.js",
+      ],
+      "swagger-ui": "./src/style/main.scss",
+      vendors: ["react-refresh/runtime"],
+    },
+
+    performance: {
+      hints: false
+    },
+
+    output: {
+      filename: "[name].js",
+      chunkFilename: "[id].js",
+      library: {
+        name: "[name]",
+        export: "default",
+      },
+      publicPath: "/",
+    },
+
+    devServer: {
+      allowedHosts: "all", // for development within VMs
+      headers: {
+        "Access-Control-Allow-Origin": "*",
+        "Access-Control-Allow-Methods": "*",
+        "Access-Control-Allow-Headers": "*",
+      },
+      port: 3200,
+      host: "0.0.0.0",
+      hot: true,
+      static: {
+        directory: path.resolve(projectBasePath, "dev-helpers"),
+        publicPath: "/",
+      },
+      client: {
+        logging: "info",
+        progress: true,
+      },
+    },
+
+    module: {
+      rules: [
+        {
+          test: /\.jsx?$/,
+          include: [
+            path.join(projectBasePath, "src"),
+            path.join(projectBasePath, "node_modules", "object-assign-deep"),
+          ],
+          loader: "babel-loader",
+          options: {
+            retainLines: true,
+            cacheDirectory: true,
+            plugins: [isDevelopment && require.resolve("react-refresh/babel")].filter(Boolean),
+          },
+        },
+        {
+          test: /\.(txt|yaml)$/,
+          type: "asset/source",
+        },
+        {
+          test: /\.(png|jpg|jpeg|gif|svg)$/,
+          type: "asset/inline",
+        },
+      ],
+    },
+
+    plugins: [
+      isDevelopment && new ReactRefreshWebpackPlugin({ library: "[name]" }),
+      new HtmlWebpackPlugin({
+        template: path.join(projectBasePath, "dev-helpers", "index.html"),
+      }),
+      new HtmlWebpackSkipAssetsPlugin({
+        skipAssets: [/swagger-ui\.js/],
+      }),
+    ].filter(Boolean),
+
+    optimization: {
+      runtimeChunk: "single", // for multiple entry points using ReactRefreshWebpackPlugin
+    },
+  },
+)
+
+// mix in the style config's plugins and loader rules
+
+devConfig.plugins = [...devConfig.plugins, ...styleConfig.plugins]
+
+devConfig.module.rules = [
+  ...devConfig.module.rules,
+  ...styleConfig.module.rules,
+]
+
+export default devConfig

frontend/web/api-doc/webpack/es-bundle-core.babel.js

@@ -0,0 +1,87 @@
+/**
+ * @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 nodeExternals from "webpack-node-externals"
+// import { StatsWriterPlugin } from "webpack-stats-plugin"
+
+const minimize = true
+const sourcemaps = true
+
+const result = configBuilder(
+  {
+    minimize,
+    mangle: true,
+    sourcemaps,
+    includeDependencies: false,
+  },
+  {
+    entry: {
+      "swagger-ui-es-bundle-core": [
+        "./src/index.js",
+      ],
+    },
+    experiments: {
+      outputModule: true,
+    },
+    output: {
+      module: true,
+      libraryTarget: "module",
+      library: {
+        type: "module",
+      },
+      environment: {
+        module: true,
+      },
+    },
+    devtool: sourcemaps && minimize ? "source-map" : false,
+    externalsType: "module",
+    externals: [
+      {
+        esprima: "esprima",
+      },
+      nodeExternals({
+        allowlist: [
+          /object\/define-property/, // @babel/runtime-corejs3 import which makes fragment work with Jest
+          "deep-extend", // uses Buffer as global symbol
+          "randombytes", // uses require('safe-buffer')
+          "sha.js", // uses require('safe-buffer')
+          "xml", // uses require('stream')
+          /process\/browser/, // is injected via ProvidePlugin
+          /readable-stream/, // byproduct of buffer ProvidePlugin injection
+          "util-deprecate", // dependency of readable-stream
+          "inherits", // dependency of readable-stream
+          "events", // dependency of readable-stream
+          /safe-buffer/, // contained in resolve.alias
+          /string_decoder/, // byproduct of buffer ProvidePlugin injection
+          "buffer", // buffer is injected via ProvidePlugin
+        ],
+        importType: (moduleName) => {
+          return `module ${moduleName}`
+      }})
+    ],
+    plugins: [
+      new DuplicatesPlugin({
+        emitErrors: 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

frontend/web/api-doc/webpack/es-bundle.babel.js

@@ -0,0 +1,54 @@
+/**
+ * @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: {
+      globalObject: "this",
+      library: {
+        type: "commonjs2",
+        export: "default",
+      },
+    },
+    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

frontend/web/api-doc/webpack/standalone.babel.js

@@ -0,0 +1,28 @@
+/**
+ * @prettier
+ */
+
+import configBuilder from "./_config-builder"
+
+const result = configBuilder(
+  {
+    minimize: true,
+    mangle: true,
+    sourcemaps: true,
+  },
+  {
+    entry: {
+      "swagger-ui-standalone-preset": ["./src/standalone/index.js"],
+    },
+
+    output: {
+      globalObject: "this",
+      library: {
+        name: "SwaggerUIStandalonePreset",
+        export: "default",
+      },
+    },
+  }
+)
+
+export default result

frontend/web/api-doc/webpack/stylesheets.babel.js

@@ -0,0 +1,86 @@
+/**
+ * @prettier
+ */
+
+// NOTE: this config *does not* inherit from `_config-builder`.
+// It is also used in the dev config.
+
+import path from "path"
+import MiniCssExtractPlugin from "mini-css-extract-plugin"
+
+export default {
+  mode: "production",
+
+  entry: {
+    "swagger-ui": "./src/style/main.scss",
+  },
+
+  module: {
+    rules: [
+      {
+        test: [/\.(scss)(\?.*)?$/],
+        use: [
+          {
+            loader: MiniCssExtractPlugin.loader,
+          },
+          {
+            loader: "css-loader",
+            options: { sourceMap: true },
+          },
+          {
+            loader: "postcss-loader",
+            options: {
+              postcssOptions: {
+                sourceMap: true,
+                plugins: [
+                  require("cssnano")(),
+                  "postcss-preset-env" // applies autoprefixer
+                ],
+
+              }
+            },
+          },
+          {
+            loader: "sass-loader",
+            options: {
+              // Prefer `dart-sass`
+              implementation: require("sass"),
+              sourceMap: true,
+              sassOptions: {
+                // `fibers` package is not compatible with Node.js v16.0.0 or later
+                fiber: false, // disable auto attempt to load `fiber`
+                // sourceMapContents: "true", // if sourceMap: true, sassOptions.sourceMapContents is ignored
+              },
+            },
+          },
+        ],
+      },
+    ],
+  },
+
+  plugins: [
+    new MiniCssExtractPlugin({
+      filename: "[name].css",
+    }),
+  ],
+
+  devtool: "source-map",
+
+  output: {
+    path: path.join(__dirname, "../", "dist"),
+    publicPath: "/dist",
+  },
+
+  optimization: {
+    splitChunks: {
+      cacheGroups: {
+        styles: {
+          name: "styles",
+          test: /\.css$/,
+          chunks: "all",
+          enforce: true,
+        },
+      },
+    },
+  },
+}