Upgrade typescript, react, jest, & enzyme (#1583)

* upgrade to typescript v3, add it as a peerdep to enforce downstream project support * upgrade to typescript v3, add it as a peerdep to enforce downstream project support * Change popover positioning's align type to use undefined instead of null * Upgrade @types/react and @types/prop-types versions * Update TSX files to move default prop values in function signature; upgrade React & ReactDOM to 16.8, upgrade enzyme & related libs to latest * Upgrade jest version * Update render_to_html to latest enzyme adapter * Handle relative import statements in eui.d.ts * SFC -> FunctionComponent * Don't track and pass a name value in context example's state * Some PR feedback * changelog
elastic · Feb 25, 2019 · 6f9afe3 · 6f9afe3
1 parent 4aa139c
commit 6f9afe3
Show file tree

Hide file tree

Showing 79 changed files with 2,423 additions and 2,418 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,11 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-No public interface changes since `7.3.0`.
+**Breaking changes**
+
+- Upgraded TypeScript to 3.3 ([#1583](https://github.com/elastic/eui/pull/1583))
+- Upgraded React to 16.8 ([#1583](https://github.com/elastic/eui/pull/1583))
+- Upgraded Jest to 24.1 ([#1583](https://github.com/elastic/eui/pull/1583))
+- Upgraded Enzyme to 3.9 ([#1583](https://github.com/elastic/eui/pull/1583))
 
 ## [`7.3.0`](https://github.com/elastic/eui/tree/v7.3.0)
 

diff --git a/package.json b/package.json
@@ -77,16 +77,16 @@
     "@elastic/eslint-config-kibana": "^0.15.0",
     "@types/classnames": "^2.2.6",
     "@types/enzyme": "^3.1.13",
-    "@types/jest": "^23.3.9",
-    "@types/react": "^16.3.0",
+    "@types/jest": "^24.0.6",
+    "@types/react": "^16.8.4",
     "@types/react-datepicker": "1.8.0",
     "@types/react-is": "~16.3.0",
     "@types/react-virtualized": "^9.18.6",
     "@types/uuid": "^3.4.4",
     "autoprefixer": "^7.1.5",
     "babel-core": "7.0.0-bridge.0",
     "babel-eslint": "^8.0.1",
-    "babel-jest": "^23.6.0",
+    "babel-jest": "^24.1.0",
     "babel-loader": "^8.0.4",
     "babel-plugin-add-module-exports": "^1.0.0",
     "babel-plugin-inline-react-svg": "^1.0.1",
@@ -102,8 +102,8 @@
     "css-loader": "^0.28.7",
     "cssnano": "^4.0.5",
     "dts-generator": "^2.1.0",
-    "enzyme": "^3.1.0",
-    "enzyme-adapter-react-16.3": "^1.4.1",
+    "enzyme": "^3.9.0",
+    "enzyme-adapter-react-16": "^1.9.1",
     "enzyme-to-json": "^3.3.0",
     "eslint": "^4.9.0",
     "eslint-config-prettier": "^2.9.0",
@@ -123,8 +123,8 @@
     "geckodriver": "^1.11.0",
     "glob": "^7.1.2",
     "html-webpack-plugin": "^3.2.0",
-    "jest": "^23.6.0",
-    "jest-cli": "^23.6.0",
+    "jest": "^24.1.0",
+    "jest-cli": "^24.1.0",
     "jquery": "^3.2.1",
     "markdown-it": "8.4.1",
     "mocha": "^5.0.4",
@@ -141,8 +141,8 @@
     "prompt": "^1.0.0",
     "prop-types": "^15.6.0",
     "raw-loader": "^0.5.1",
-    "react": "^16.3.0",
-    "react-dom": "^16.3.0",
+    "react": "^16.8.0",
+    "react-dom": "^16.8.0",
     "react-redux": "^5.0.6",
     "react-router": "^3.2.0",
     "react-router-redux": "^4.0.8",
@@ -164,7 +164,7 @@
     "tslint": "^5.11.0",
     "tslint-config-prettier": "^1.18.0",
     "tslint-plugin-prettier": "^2.0.1",
-    "typescript": "^2.9.2",
+    "typescript": "^3.3.3",
     "uglifyjs-webpack-plugin": "^2.0.1",
     "url-loader": "^1.0.1",
     "wdio-chromedriver-service": "^0.1.2",
@@ -182,9 +182,11 @@
   },
   "peerDependencies": {
     "@elastic/datemath": "^5.0.2",
+    "@types/react": "^16.8.0",
     "moment": "^2.13.0",
     "prop-types": "^15.5.0",
-    "react": "^16.3",
-    "react-dom": "^16.3"
+    "react": "^16.8",
+    "react-dom": "^16.8",
+    "typescript": "^3.3.0"
   }
 }
diff --git a/scripts/dtsgenerator.js b/scripts/dtsgenerator.js
@@ -78,14 +78,41 @@ const generator = dtsGenerator({
   },
 });
 
+// NOTE: once EUI is all converted to typescript this madness can be deleted forever
 // 1. strip any `/// <reference` lines from the generated eui.d.ts
-// 2. replace any import("src/...") declarations to import("@elastic/src/...")
+// 2. replace any import("src/...") declarations to import("@elastic/eui/src/...")
+// 3. replace any import("./...") declarations to import("@elastic/eui/src/...)
 generator.then(() => {
   const defsFilePath = path.resolve(baseDir, 'eui.d.ts');
+
   fs.writeFileSync(
     defsFilePath,
     fs.readFileSync(defsFilePath).toString()
       .replace(/\/\/\/\W+<reference.*/g, '') // 1.
-      .replace(/import\(\"src\/(.*?)\"\)/g, 'import("@elastic/eui/src/$1")') // 2.
+      .replace(/import\("src\/(.*?)"\)/g, 'import("@elastic/eui/src/$1")') // 2.
+      .replace( // start 3.
+        // find any singular `declare module { ... }` block
+        // {.*?^} matches anything until a } starts a new line (via `m` regex option, and `s` is dotall)
+        //
+        // aren't regex really bad for this? Yes.
+        // However, @babel/preset-typescript doesn't understand some syntax generated in eui.d.ts
+        // and the tooling around typescript's parsing & code generation is lacking and undocumented
+        // so... because this works with the guarantee that the newline-brace combination matches a module...
+        /declare module '(.*?)' {.*?^}/smg,
+        (module, moduleName) => {
+          // `moduleName` is the namespace for this ambient module
+          return module.replace(
+            // replace relative imports by attaching them to the module's namespace
+            /import\("([.]{1,2}\/.*?)"\)/g,
+            (importStatement, importPath) => {
+              const target = path.join(
+                path.dirname(moduleName),
+                importPath
+              );
+              return `import ("${target}")`;
+            }
+          );
+        }
+      ) // end 3.
   );
 });
diff --git a/scripts/jest/setup/enzyme.js b/scripts/jest/setup/enzyme.js
@@ -1,4 +1,4 @@
 import { configure } from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16.3';
+import Adapter from 'enzyme-adapter-react-16';
 
 configure({ adapter: new Adapter() });
diff --git a/src-docs/src/services/string/render_to_html.js b/src-docs/src/services/string/render_to_html.js
@@ -5,7 +5,7 @@ import {
   configure
 } from 'enzyme';
 
-import EnzymeAdapter from 'enzyme-adapter-react-16.3';
+import EnzymeAdapter from 'enzyme-adapter-react-16';
 
 import html from 'html';
 

diff --git a/src-docs/src/views/context/context.js b/src-docs/src/views/context/context.js
@@ -27,7 +27,6 @@ const mappings = {
 export default class extends Component {
   state = {
     language: 'en',
-    name: ''
   }
 
   setLanguage = (language) => this.setState({ language })
@@ -76,7 +75,6 @@ export default class extends Component {
                     {placeholder => (
                       <EuiFieldText
                         placeholder={placeholder}
-                        value={this.state.name}
                       />
                     )}
                   </EuiI18n>

diff --git a/src/components/accessibility/screen_reader.tsx b/src/components/accessibility/screen_reader.tsx
@@ -1,13 +1,13 @@
-import { cloneElement, ReactElement, SFC } from 'react';
+import { cloneElement, ReactElement, FunctionComponent } from 'react';
 import classNames from 'classnames';
 
 export interface EuiScreenReaderOnlyProps {
   children: ReactElement<any>;
 }
 
-export const EuiScreenReaderOnly: SFC<EuiScreenReaderOnlyProps> = ({
-  children,
-}) => {
+export const EuiScreenReaderOnly: FunctionComponent<
+  EuiScreenReaderOnlyProps
+> = ({ children }) => {
   const classes = classNames('euiScreenReaderOnly', children.props.className);
 
   const props = {

diff --git a/src/components/avatar/index.d.ts b/src/components/avatar/index.d.ts
@@ -1,6 +1,6 @@
 import { CommonProps } from '../common';
 
-import { HTMLAttributes, SFC } from 'react';
+import { HTMLAttributes, FunctionComponent } from 'react';
 
 declare module '@elastic/eui' {
 
@@ -19,7 +19,7 @@ declare module '@elastic/eui' {
     type?: AvatarType;
   }
 
-  export const EuiAvatar: SFC<
+  export const EuiAvatar: FunctionComponent<
     CommonProps & HTMLAttributes<HTMLDivElement> & EuiAvatarProps
     >;
 }
diff --git a/src/components/badge/index.d.ts b/src/components/badge/index.d.ts
@@ -1,7 +1,7 @@
 import { IconType } from '../icon'
 /// <reference path="../tool_tip/index.d.ts" />
 
-import { HTMLAttributes, MouseEventHandler, SFC, ReactNode } from 'react';
+import { HTMLAttributes, MouseEventHandler, FunctionComponent, ReactNode } from 'react';
 import { CommonProps } from '../common';
 
 declare module '@elastic/eui' {
@@ -19,7 +19,7 @@ declare module '@elastic/eui' {
     closeButtonProps?: object;
   }
 
-  export const EuiBadge: SFC<
+  export const EuiBadge: FunctionComponent<
     CommonProps & HTMLAttributes<HTMLSpanElement> & HTMLAttributes<HTMLButtonElement> & EuiBadgeProps
   >;
 
@@ -31,7 +31,7 @@ declare module '@elastic/eui' {
     title?: string;
   }
 
-  export const EuiBetaBadge: SFC<
+  export const EuiBetaBadge: FunctionComponent<
     CommonProps & HTMLAttributes<HTMLSpanElement> & EuiBetaBadgeProps
   >;
 }
diff --git a/src/components/badge/notification_badge/badge_notification.tsx b/src/components/badge/notification_badge/badge_notification.tsx
@@ -1,4 +1,4 @@
-import React, { HTMLAttributes, ReactNode, SFC } from 'react';
+import React, { HTMLAttributes, ReactNode, FunctionComponent } from 'react';
 import classNames from 'classnames';
 import { CommonProps } from '../../common';
 
@@ -8,11 +8,9 @@ export interface EuiNotificationBadgeProps
   children?: ReactNode;
 }
 
-export const EuiNotificationBadge: SFC<EuiNotificationBadgeProps> = ({
-  children,
-  className,
-  ...rest
-}) => {
+export const EuiNotificationBadge: FunctionComponent<
+  EuiNotificationBadgeProps
+> = ({ children, className, ...rest }) => {
   const classes = classNames('euiNotificationBadge', className);
 
   return (