perf: oas-form bloat reduction and bundle overhauls

packages/api-explorer/package.json

@@ -11,7 +11,7 @@
     "directory": "packages/api-explorer"
   },
   "scripts": {
-    "build": "webpack --config webpack.prod.js",
+    "build": "webpack --config webpack.config.js",
     "lint": "eslint . --ext js --ext jsx",
     "pretest": "npm run lint && npm run prettier",
     "prettier": "prettier --list-different --write \"./**/**.{js,jsx}\"",
@@ -61,8 +61,7 @@
     "react-dom": "^16.14.0",
     "terser-webpack-plugin": "^4.1.0",
     "webpack": "^4.41.0",
-    "webpack-cli": "^3.3.9",
-    "webpack-merge": "^5.1.3"
+    "webpack-cli": "^3.3.9"
   },
   "prettier": "@readme/eslint-config/prettier"
 }

packages/api-explorer/src/form-components/MultiSchemaField.jsx

@@ -227,7 +227,6 @@ class MultiSchemaField extends Component {
     const {
       baseType,
       disabled,
-      errorSchema,
       formData,
       idPrefix,
       idSchema,
@@ -274,7 +273,6 @@ class MultiSchemaField extends Component {
           <div className="form-group">
             <SchemaField
               disabled={disabled}
-              errorSchema={errorSchema}
               formData={selectedValue}
               idPrefix={idPrefix}
               idSchema={idSchema}
@@ -292,7 +290,6 @@ class MultiSchemaField extends Component {
           {option !== null && (
             <SchemaField
               disabled={disabled}
-              errorSchema={errorSchema}
               formData={formData}
               idPrefix={idPrefix}
               idSchema={idSchema}

packages/api-explorer/src/form-components/SchemaField.jsx

@@ -63,19 +63,18 @@ function getTypeLabel(schema) {
 }
 
 function CustomTemplateShell(props) {
-  const { classNames, help, errors, children } = props;
+  const { classNames, help, children } = props;
 
   return (
     <div className={`${classNames} param`}>
       {children}
-      {errors && <div className="errors">{errors}</div>}
       {help && <div className="help">{help}</div>}
     </div>
   );
 }
 
 function CustomTemplate(props) {
-  const { id, classNames, label, help, required, description, errors, children, schema, onKeyChange } = props;
+  const { id, classNames, label, help, required, description, children, schema, onKeyChange } = props;
 
   const EditLabel = (
     <input defaultValue={label} id={`${id}-key`} onBlur={event => onKeyChange(event.target.value)} type="text" />
@@ -92,7 +91,6 @@ function CustomTemplate(props) {
         {description && <div className="description">{description}</div>}
       </span>
       {children && <div className="children">{children}</div>}
-      {errors && <div className="errors">{errors}</div>}
       {help && <div className="help">{help}</div>}
     </div>
   );
@@ -172,7 +170,6 @@ CustomTemplate.propTypes = {
   children: PropTypes.node.isRequired,
   classNames: PropTypes.string.isRequired,
   description: PropTypes.node.isRequired,
-  errors: PropTypes.node.isRequired,
   help: PropTypes.node.isRequired,
   id: PropTypes.node.isRequired,
   label: PropTypes.string,
@@ -188,7 +185,6 @@ CustomTemplate.defaultProps = {
 CustomTemplateShell.propTypes = {
   children: PropTypes.node.isRequired,
   classNames: PropTypes.string.isRequired,
-  errors: PropTypes.node.isRequired,
   help: PropTypes.node.isRequired,
 };
 

packages/api-explorer/webpack.config.js

@@ -1,24 +1,33 @@
 const path = require('path');
+const webpack = require('webpack');
+const TerserPlugin = require('terser-webpack-plugin');
 
 module.exports = {
   entry: ['whatwg-fetch', './src/index.jsx'],
-  externals: {
-    '@readme/markdown': '@readme/markdown',
-    '@readme/variable': '@readme/variable',
-    react: {
-      root: 'React',
-      commonjs: 'react',
-      commonjs2: 'react',
-      amd: 'react',
-    },
-    'react-dom': {
-      root: 'ReactDOM',
-      commonjs2: 'react-dom',
-      commonjs: 'react-dom',
-      amd: 'react-dom',
-      umd: 'react-dom',
+  externals: [
+    '@readme/markdown',
+    '@readme/variable',
+    {
+      react: {
+        root: 'React',
+        commonjs: 'react',
+        commonjs2: 'react',
+        amd: 'react',
+      },
+      'react-dom': {
+        root: 'ReactDOM',
+        commonjs2: 'react-dom',
+        commonjs: 'react-dom',
+        amd: 'react-dom',
+        umd: 'react-dom',
+      },
     },
-  },
+
+    // `@readme/ui` loads this in for the search components but unfortunately we aren't able to exclude this from being
+    // compiled into our dist, despite not using that component. If we treat it as a Webpack external it will thankfully
+    // be ignored.
+    'react-instantsearch-dom',
+  ],
   module: {
     rules: [
       {
@@ -45,11 +54,20 @@ module.exports = {
       },
     ],
   },
+  optimization: {
+    minimize: true,
+    minimizer: [new TerserPlugin()],
+  },
   output: {
     path: path.resolve(__dirname, 'dist'),
     filename: 'index.js',
     libraryTarget: 'commonjs2',
   },
+  plugins: [
+    new webpack.DefinePlugin({
+      'process.env.NODE_ENV': JSON.stringify('production'),
+    }),
+  ],
   resolve: {
     extensions: ['.js', '.json', '.jsx'],
   },