Allow as const syntax in tests (#2733)

* Fix bug in datagrid where columns in Hide fields were cached; added useResettingState

* changelog

* Move type declaration to a jest-friendly place

* Renamed useResettingState -> useDependentState, swapped a useState for a useRef

* Upgraded various babel plugins to support 'as const' syntax in unit tests

* Use appropriate BABEL_MODULES setting for all our various build setups

.babelrc.js

@@ -14,9 +14,10 @@ module.exports = {
         ]
       },
       "useBuiltIns": process.env.NO_COREJS_POLYFILL ? false : "usage",
+      "corejs": "2",
       "modules": process.env.BABEL_MODULES ? process.env.BABEL_MODULES : "commonjs" // babel's default is commonjs
     }],
-    "@babel/typescript",
+    ["@babel/typescript", { isTSX: true, allExtensions: true }],
     "@babel/react"
   ],
   "plugins": [

package.json

@@ -9,10 +9,10 @@
   "docker_image": "node:10",
   "sideEffects": false,
   "scripts": {
-    "start": "webpack-dev-server --port 8030 --inline --hot --config=src-docs/webpack.config.js",
+    "start": "BABEL_MODULES=false webpack-dev-server --port 8030 --inline --hot --config=src-docs/webpack.config.js",
     "test-docker": "docker pull $npm_package_docker_image && docker run --rm -i -e GIT_COMMITTER_NAME=test -e GIT_COMMITTER_EMAIL=test --user=$(id -u):$(id -g) -e HOME=/tmp -v $(pwd):/app -w /app $npm_package_docker_image bash -c 'npm config set spin false && /opt/yarn*/bin/yarn && npm run test && npm run build'",
     "sync-docs": "node ./scripts/docs-sync.js",
-    "build-docs": "cross-env NODE_ENV=production NODE_OPTIONS=--max-old-space-size=4096 webpack --config=src-docs/webpack.config.js",
+    "build-docs": "BABEL_MODULES=false cross-env NODE_ENV=production NODE_OPTIONS=--max-old-space-size=4096 webpack --config=src-docs/webpack.config.js",
     "build": "yarn extract-i18n-strings && node ./scripts/compile-clean.js && node ./scripts/compile-eui.js && node ./scripts/compile-scss.js $npm_package_name",
     "compile-icons": "node ./scripts/compile-icons.js && prettier --write --loglevel=warn \"./src/components/icon/assets/**/*.js\"",
     "extract-i18n-strings": "node ./scripts/babel/fetch-i18n-strings",
@@ -67,14 +67,14 @@
     "uuid": "^3.1.0"
   },
   "devDependencies": {
-    "@babel/cli": "^7.1.2",
-    "@babel/core": "^7.1.2",
-    "@babel/plugin-proposal-class-properties": "^7.1.0",
-    "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
-    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
-    "@babel/preset-env": "^7.1.0",
-    "@babel/preset-react": "^7.0.0",
-    "@babel/preset-typescript": "^7.1.0",
+    "@babel/cli": "^7.8.3",
+    "@babel/core": "^7.8.3",
+    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-proposal-object-rest-spread": "^7.8.3",
+    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+    "@babel/preset-env": "^7.8.3",
+    "@babel/preset-react": "^7.8.3",
+    "@babel/preset-typescript": "^7.8.3",
     "@elastic/charts": "^13.0.0",
     "@elastic/datemath": "^5.0.2",
     "@elastic/eslint-config-kibana": "^0.15.0",
@@ -185,7 +185,7 @@
     "wdio-spec-reporter": "^0.1.4",
     "wdio-visual-regression-service": "silne30/wdio-visual-regression-service#Add_Filename_To_Result",
     "webdriverio": "^4.12.0",
-    "webpack": "^4.23.1",
+    "webpack": "^4.41.5",
     "webpack-cli": "^3.1.2",
     "webpack-dev-server": "^3.1.14",
     "yeoman-generator": "^2.0.1",

scripts/babel/fetch-i18n-strings.js

@@ -56,7 +56,7 @@ function handleJSXPath(path) {
 function traverseFile(filepath) {
   const source = fs.readFileSync(filepath);
   const ast = babel.parse(
-    source,
+    source.toString(),
     {
       ...babelOptions,
       filename: basename(filepath),

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

@@ -17,20 +17,6 @@ function stripTypeScript(filename, ast) {
   }).code;
 }
 
-// .ts file could import types from a .tsx file, so force nested imports to parse JSX
-function forceTSXParsing(opts) {
-  return {
-    ...opts,
-    plugins: opts.plugins.map(plugin => {
-      if (plugin.key.indexOf(`@babel${path.sep}preset-typescript`) !== -1) {
-        plugin.options.isTSX = true;
-        plugin.options.allExtensions = true;
-      }
-      return plugin;
-    }),
-  };
-}
-
 // determine is a node is a TS*, or if it is a proptype that came from one
 function isTSType(node) {
   if (node == null) return false;
@@ -1343,8 +1329,7 @@ module.exports = function propTypesFromTypeScript({ types }) {
               this.file.opts.filename
             ),
             fs: opts.fs || fs,
-            parse: code =>
-              babelCore.parse(code, forceTSXParsing(state.file.opts)),
+            parse: code => babelCore.parse(code, state.file.opts),
           };
 
           // collect named TS type definitions for later reference

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

@@ -2625,7 +2625,7 @@ export { Foo };
         babelOptions
       );
 
-      expect(result.code).toBe(`export {};`);
+      expect(result.code).toBe('');
     });
 
     it('removes multiple type export from ExportNamedDeclaration', () => {
@@ -2638,7 +2638,7 @@ export { Foo, Bar };
         babelOptions
       );
 
-      expect(result.code).toBe(`export {};`);
+      expect(result.code).toBe('');
     });
 
     it('removes type exports from ExportNamedDeclaration, leaving legitimate exports', () => {

scripts/compile-eui.js

@@ -66,11 +66,21 @@ function compileBundle() {
   shell.mkdir('-p', 'dist');
 
   console.log('Building bundle...');
-  execSync('webpack --config=src/webpack.config.js', { stdio: 'inherit' });
+  execSync('webpack --config=src/webpack.config.js', {
+    stdio: 'inherit',
+    env: {
+      ...process.env,
+      BABEL_MODULES: false,
+    },
+  });
 
   console.log('Building minified bundle...');
   execSync('NODE_ENV=production webpack --config=src/webpack.config.js', {
     stdio: 'inherit',
+    env: {
+      ...process.env,
+      BABEL_MODULES: false,
+    },
   });
 
   console.log('Building chart theme module...');

src-docs/webpack.config.js

@@ -41,7 +41,7 @@ const webpackConfig = {
       {
         test: /\.(js|tsx?)$/,
         loaders: useCache(['babel-loader']), // eslint-disable-line react-hooks/rules-of-hooks
-        exclude: /node_modules/,
+        exclude: [/node_modules/, /packages\/react-datepicker/],
       },
       {
         test: /\.scss$/,

src/services/hooks/useDependentState.ts

@@ -3,7 +3,7 @@ import { useEffect, useState, useRef } from 'react';
 export function useDependentState<T>(
   valueFn: (previousState: undefined | T) => T,
   deps: unknown[]
-): [T, React.Dispatch<React.SetStateAction<T>>] {
+) {
   const [state, setState] = useState<T>(valueFn as () => T);
 
   // use ref instead of a state to avoid causing an unnecessary re-render
@@ -22,5 +22,5 @@ export function useDependentState<T>(
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, deps);
 
-  return [state, setState];
+  return [state, setState] as const;
 }