Update to Webpack 5

.babelrc.js

@@ -19,7 +19,7 @@ module.exports = {
     ["@babel/env", {
       // `targets` property set via `.browserslistrc`
       "useBuiltIns": process.env.NO_COREJS_POLYFILL ? false : "usage",
-      "corejs": 3,
+      "corejs": process.env.NO_COREJS_POLYFILL ? undefined : 3,
       "modules": process.env.BABEL_MODULES ? process.env.BABEL_MODULES === 'false' ? false : process.env.BABEL_MODULES : "commonjs" // babel's default is commonjs
     }],
     ["@babel/typescript", { isTSX: true, allExtensions: true }],

DEVELOPER_GUIDE.md

@@ -24,7 +24,7 @@ nvm install
 
 ### Start documentation server
 
-You can run the documentation locally at [http://localhost:8030/](http://localhost:8030/) by running the following.
+You can run the documentation locally at [http://localhost:8030/](http://localhost:8030/) by running the following. Yarn may give error about failing to install Puppeteer, but you will still be able to do everything except run a11y tests.
 
 ```
 yarn

i18ntokens.json

@@ -187,12 +187,12 @@
       "start": {
         "line": 191,
         "column": 8,
-        "index": 5650
+        "index": 5638
       },
       "end": {
         "line": 193,
         "column": 40,
-        "index": 5750
+        "index": 5738
       }
     },
     "filepath": "src/components/bottom_bar/bottom_bar.tsx"
@@ -205,12 +205,12 @@
       "start": {
         "line": 217,
         "column": 14,
-        "index": 6647
+        "index": 6635
       },
       "end": {
         "line": 221,
         "column": 16,
-        "index": 6920
+        "index": 6908
       }
     },
     "filepath": "src/components/bottom_bar/bottom_bar.tsx"
@@ -223,12 +223,12 @@
       "start": {
         "line": 223,
         "column": 14,
-        "index": 6953
+        "index": 6941
       },
       "end": {
         "line": 226,
         "column": 16,
-        "index": 7150
+        "index": 7138
       }
     },
     "filepath": "src/components/bottom_bar/bottom_bar.tsx"

package.json

@@ -12,7 +12,7 @@
     "*.scss"
   ],
   "scripts": {
-    "start": "cross-env BABEL_MODULES=false webpack-dev-server --inline --hot --config=src-docs/webpack.config.js",
+    "start": "cross-env BABEL_MODULES=false webpack-dev-server --hot --config=src-docs/webpack.config.js",
     "test-docker": "node ./scripts/test-docker.js",
     "sync-docs": "node ./scripts/docs-sync.js",
     "build-docs": "cross-env BABEL_MODULES=false cross-env NODE_ENV=production NODE_OPTIONS=--max-old-space-size=4096 webpack --config=src-docs/webpack.config.js",
@@ -51,6 +51,9 @@
     "**/ansi-regex": "^5.0.1",
     "cacache/y18n": "^4.0.1",
     "**/glob-parent": "^6.0.1",
+    "**/svgo/js-yaml": "^3.13.1",
+    "**/@types/express": "4.17.13",
+    "**/@types/express-serve-static-core": "4.17.30",
     "babel-plugin-inline-react-svg/svgo/js-yaml": "^3.13.1",
     "webpack-dev-server/selfsigned": "^2.0.1",
     "**/eslint/shelljs": "^0.8.5",
@@ -62,11 +65,10 @@
     "codesandbox/**/pacote": "^12.0.0",
     "yo/meow": "^9.0.0",
     "**/stylelint/micromatch": "^3.1.0",
-    "webpack/**/serialize-javascript": "^3.1.0",
     "**/scss-tokenizer": "^0.4.3",
     "**/node-notifier": "^10.0.1",
     "**/got": "^11.8.5",
-    "**/postcss": "^7.0.39",
+    "**/postcss": "^8.4.21",
     "**/eslint": "^7.10.0",
     "**/har-validator": "^5.1.5",
     "**/d3-color": "^3.1.0",
@@ -122,16 +124,16 @@
   "devDependencies": {
     "@faker-js/faker": "^7.6.0",
     "@axe-core/puppeteer": "^4.1.1",
-    "@babel/cli": "^7.10.5",
-    "@babel/core": "^7.11.4",
-    "@babel/plugin-proposal-class-properties": "^7.10.4",
-    "@babel/plugin-proposal-object-rest-spread": "^7.11.0",
+    "@babel/cli": "^7.21.0",
+    "@babel/core": "^7.21.0",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/plugin-proposal-object-rest-spread": "^7.20.7",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@babel/plugin-transform-async-to-generator": "^7.10.4",
-    "@babel/plugin-transform-runtime": "^7.11.0",
-    "@babel/preset-env": "^7.11.0",
-    "@babel/preset-react": "^7.10.4",
-    "@babel/preset-typescript": "^7.12.1",
+    "@babel/plugin-transform-async-to-generator": "^7.20.7",
+    "@babel/plugin-transform-runtime": "^7.21.0",
+    "@babel/preset-env": "^7.20.2",
+    "@babel/preset-react": "^7.18.6",
+    "@babel/preset-typescript": "^7.21.0",
     "@elastic/charts": "^30.2.0",
     "@elastic/datemath": "^5.0.3",
     "@elastic/eslint-config-kibana": "^0.15.0",
@@ -150,12 +152,12 @@
     "@types/uuid": "^8.3.0",
     "@typescript-eslint/eslint-plugin": "^4.8.1",
     "@typescript-eslint/parser": "^4.8.1",
-    "autoprefixer": "^9.8.6",
+    "autoprefixer": "^10.4.14",
     "axe-core": "^4.1.1",
     "babel-core": "7.0.0-bridge.0",
     "babel-eslint": "^10.1.0",
     "babel-jest": "^24.1.0",
-    "babel-loader": "^8.1.0",
+    "babel-loader": "^9.1.2",
     "babel-plugin-add-module-exports": "^1.0.2",
     "babel-plugin-dynamic-import-node": "^2.3.3",
     "babel-plugin-inline-react-svg": "^1.1.1",
@@ -164,12 +166,12 @@
     "cache-loader": "^4.1.0",
     "chalk": "^4.1.0",
     "chokidar": "^3.4.2",
-    "circular-dependency-plugin": "^5.2.0",
+    "circular-dependency-plugin": "^5.2.2",
     "codesandbox": "^2.1.16",
     "core-js": "^3.6.5",
     "cross-env": "^7.0.2",
-    "css-loader": "^4.2.2",
-    "cssnano": "^4.1.11",
+    "css-loader": "^6.7.3",
+    "cssnano": "^5.1.15",
     "deasync": "^0.1.20",
     "dedent": "^0.7.0",
     "dts-generator": "^3.0.0",
@@ -190,23 +192,26 @@
     "eslint-plugin-react": "^7.21.3",
     "eslint-plugin-react-hooks": "^4.1.2",
     "expose-gc": "^1.0.0",
-    "file-loader": "^6.1.0",
+    "file-loader": "^6.2.0",
     "findup": "^0.1.5",
-    "fork-ts-checker-webpack-plugin": "^5.1.0",
+    "fork-ts-checker-webpack-plugin": "^8.0.0",
     "get-port": "^5.1.1",
     "glob": "^7.1.6",
     "html": "^1.0.0",
     "html-format": "^1.0.1",
-    "html-webpack-plugin": "^4.4.1",
+    "html-webpack-plugin": "^5.5.0",
     "jest": "^24.1.0",
     "jest-cli": "^24.1.0",
     "moment": "^2.27.0",
     "moment-timezone": "^0.5.31",
+    "node-polyfill-webpack-plugin": "^2.0.1",
     "node-sass": "^8.0.0",
+    "os-browserify": "^0.3.0",
+    "path-browserify": "^1.0.1",
     "pegjs": "^0.10.0",
-    "postcss-cli": "^7.1.2",
-    "postcss-inline-svg": "^4.1.0",
-    "postcss-loader": "^4.0.1",
+    "postcss-cli": "^10.1.0",
+    "postcss-inline-svg": "^6.0.0",
+    "postcss-loader": "^7.0.2",
     "pre-commit": "^1.2.2",
     "prettier": "^2.1.2",
     "prop-types": "^15.6.0",
@@ -229,17 +234,17 @@
     "sass-extract": "^2.1.0",
     "sass-lint": "^1.13.1",
     "sass-lint-auto-fix": "^0.21.2",
-    "sass-loader": "^10.0.1",
+    "sass-loader": "^13.2.0",
     "sass-vars-to-js-loader": "^2.1.1",
     "shelljs": "^0.8.4",
     "start-server-and-test": "^1.11.3",
-    "style-loader": "^1.2.1",
-    "terser-webpack-plugin": "^4.1.0",
+    "style-loader": "^3.3.1",
+    "terser-webpack-plugin": "^5.3.7",
     "typescript": "4.0.5",
-    "url-loader": "^4.1.0",
-    "webpack": "^4.44.1",
-    "webpack-cli": "^3.3.12",
-    "webpack-dev-server": "^3.11.0",
+    "url-loader": "^4.1.1",
+    "webpack": "^5.76.0",
+    "webpack-cli": "^5.0.1",
+    "webpack-dev-server": "^4.12.0",
     "yeoman-generator": "^5.7.0",
     "yo": "^4.3.1"
   },

scripts/babel/proptypes-from-ts-props/index.test.ts

@@ -496,11 +496,11 @@ const FooComponent: React.SFC<IFooProps> = () => {
 
           expect(result.code).toBe(`import React from 'react';
 import PropTypes from "prop-types";
-var Foo;
-(function (Foo) {
+var Foo = /*#__PURE__*/function (Foo) {
   Foo["bar"] = "BAR";
   Foo["baz"] = "BAZ";
-})(Foo || (Foo = {}));
+  return Foo;
+}(Foo || {});
 ;
 const FooComponent = () => {
   return <div>Hello World</div>;
@@ -527,11 +527,11 @@ const FooComponent: React.SFC<IFooProps> = () => {
 
           expect(result.code).toBe(`import React from 'react';
 import PropTypes from "prop-types";
-var Foo;
-(function (Foo) {
+var Foo = /*#__PURE__*/function (Foo) {
   Foo[Foo["bar"] = 3] = "bar";
   Foo[Foo["baz"] = 54] = "baz";
-})(Foo || (Foo = {}));
+  return Foo;
+}(Foo || {});
 ;
 const FooComponent = () => {
   return <div>Hello World</div>;
@@ -559,12 +559,12 @@ const FooComponent: React.SFC<IFooProps> = () => {
 
           expect(result.code).toBe(`import React from 'react';
 import PropTypes from "prop-types";
-var Foo;
-(function (Foo) {
+var Foo = /*#__PURE__*/function (Foo) {
   Foo["bar"] = "BAR";
   Foo[Foo["baz"] = 5] = "baz";
   Foo[Foo["buzz"] = false] = "buzz";
-})(Foo || (Foo = {}));
+  return Foo;
+}(Foo || {});
 ;
 const FooComponent = () => {
   return <div>Hello World</div>;
@@ -591,11 +591,11 @@ const FooComponent: React.SFC<IFooProps> = () => {
 
           expect(result.code).toBe(`import React from 'react';
 import PropTypes from "prop-types";
-var Foo;
-(function (Foo) {
+var Foo = /*#__PURE__*/function (Foo) {
   Foo["bar"] = "BAR";
   Foo["baz"] = "BAZ";
-})(Foo || (Foo = {}));
+  return Foo;
+}(Foo || {});
 ;
 const FooComponent = () => {
   return <div>Hello World</div>;
@@ -2556,7 +2556,7 @@ export { Foo };
         babelOptions
       );
 
-      expect(result.code).toBe('');
+      expect(result.code).toBe('export {};');
     });
 
     it('removes multiple type export from ExportNamedDeclaration', () => {
@@ -2569,7 +2569,7 @@ export { Foo, Bar };
         babelOptions
       );
 
-      expect(result.code).toBe('');
+      expect(result.code).toBe('export {};');
     });
 
     it('removes type exports from ExportNamedDeclaration, leaving legitimate exports', () => {
@@ -2666,7 +2666,7 @@ export type Foo = string;
         babelOptions
       );
 
-      expect(result.code).toBe('');
+      expect(result.code).toBe('export {};');
     });
 
     it('removes 3rd-party type exports', () => {

scripts/compile-oui.js

@@ -308,6 +308,55 @@ function compileBundle() {
     }
   });
   console.log(chalk.green('✔ Finished test utils files'));
+
+  console.log('Building chart theme module...');
+  execSync(
+    'webpack --entry-reset ./themes/charts/themes.ts -o dist/oui_charts_theme.js --output-enabled-library-types="commonjs" --config=src/webpack.config.js',
+    {
+      stdio: 'inherit',
+    }
+  );
+  dtsGenerator({
+    prefix: '',
+    out: 'dist/oui_charts_theme.d.ts',
+    baseDir: path.resolve(__dirname, '..', 'src/themes/charts/'),
+    files: ['themes.ts'],
+    resolveModuleId() {
+      return '@opensearch-project/oui/dist/oui_charts_theme';
+    },
+    resolveModuleImport(params) {
+      if (params.importedModuleId === '../../components/common') {
+        return '@opensearch-project/oui/src/components/common';
+      }
+      return null;
+    }
+  });
+
+  /* OUI -> EUI Aliases */
+  execSync(
+    'webpack --entry-reset ./themes/charts/themes.ts -o dist/eui_charts_theme.js --output-enabled-library-types="commonjs" --config=src/webpack.config.js',
+    {
+      stdio: 'inherit',
+    }
+  );
+  dtsGenerator({
+    prefix: '',
+    out: 'dist/eui_charts_theme.d.ts',
+    baseDir: path.resolve(__dirname, '..', 'src/themes/charts/'),
+    files: ['themes.ts'],
+    resolveModuleId() {
+      return '@elastic/eui/dist/eui_charts_theme';
+    },
+    resolveModuleImport(params) {
+      if (params.importedModuleId === '../../components/common') {
+        return '@elastic/eui/src/components/common';
+      }
+      return null;
+    }
+  });
+  /* End of Aliases */
+
+  console.log(chalk.green('✔ Finished chart theme module'));
 }
 
 /* OUI -> EUI Aliases */

src-docs/src/views/markdown_editor/markdown_editor_with_plugins.js

@@ -19,6 +19,8 @@ import {
   DataGenerator,
 } from '@elastic/charts';
 
+import { OUI_CHARTS_THEME_LIGHT } from '../../../../src/themes/charts/themes';
+
 import {
   getDefaultOuiMarkdownParsingPlugins,
   getDefaultOuiMarkdownProcessingPlugins,
@@ -246,7 +248,7 @@ const ChartMarkdownRenderer = ({ palette, categories }) => {
   return (
     <Chart size={{ height: 320 }}>
       <Settings
-        theme={[customColors]}
+        theme={[customColors, OUI_CHARTS_THEME_LIGHT]}
         showLegend={false}
         showLegendDisplayValue={false}
       />