Migrate EuiTable and a bunch of other stuff to TS (elastic#2212)

* WIP - migrating all kinds of things to TS * More WIP * Various type fixes * Fix tests * Change quirky syntax * Update changelog * Fix ts->proptype script by 1. not duplicating PropTypes import 2. supporting circular dependencies * Type fixes * Remove old type defs and fix some types * Fix some more old type def cruft * more exports * remove SPACING type
thompsongl · Sep 10, 2019 · a74f65e · a74f65e
1 parent d5608e9
commit a74f65e
Show file tree

Hide file tree

Showing 139 changed files with 1,815 additions and 2,463 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,7 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
 - Fixed `EuiSuperDatePicker` to update `asyncInterval.isStopped` on a `isPaused` prop change. ([#2250](https://github.com/elastic/eui/pull/2250))
+- Converted table, popover, buttons, pagination, outside click detector, focus trap, context menu, and panel to TypeScript ([#2212](https://github.com/elastic/eui/pull/2212))
 
 ## [`13.5.0`](https://github.com/elastic/eui/tree/v13.5.0)
 

diff --git a/package.json b/package.json
@@ -85,6 +85,7 @@
     "@types/react-is": "~16.3.0",
     "@types/react-virtualized": "^9.18.6",
     "@types/resize-observer-browser": "^0.1.1",
+    "@types/tabbable": "^3.1.0",
     "@types/uuid": "^3.4.4",
     "@typescript-eslint/eslint-plugin": "^1.9.0",
     "@typescript-eslint/parser": "^1.9.0",

diff --git a/scripts/babel/proptypes-from-ts-props/index.js b/scripts/babel/proptypes-from-ts-props/index.js
@@ -5,6 +5,8 @@ const path = require('path');
 const babelTemplate = require('babel-template');
 const babelCore = require('@babel/core');
 
+const importedDefinitionsCache = new Map();
+
 // react-docgen does not understand typescript annotations
 function stripTypeScript(filename, ast) {
   return babelCore.transform(
@@ -809,6 +811,16 @@ const typeDefinitionExtractors = {
         return [];
       }
 
+      if (importedDefinitionsCache.has(resolvedPath)) {
+        return importedDefinitionsCache.get(resolvedPath);
+      }
+
+      // to support circular dependencies, create & pre-cache the array of imported dependencies
+      // this array is directly mutated after parsing the subsequent files, supporting
+      // the circular nature as values settle into the correct locations
+      const importedDefinitions = [];
+      importedDefinitionsCache.set(resolvedPath, importedDefinitions);
+
       // load & parse the imported file
       const ast = parse(fs.readFileSync(resolvedPath).toString());
 
@@ -840,18 +852,15 @@ const typeDefinitionExtractors = {
       );
 
       // for each importedTypeName, fully resolve the type information
-      const importedDefinitions = definitions.reduce(
-        (importedDefinitions, { name, definition }) => {
+      definitions.forEach(
+        ({ name, definition }) => {
           if (importedTypeNames.includes(name)) {
             // this type declaration is imported by the parent script
             const propTypes = getPropTypesForNode(definition, true, state);
             propTypes.isAlreadyResolved = true; // when getPropTypesForNode is called on this node later, tell it to skip processing
             importedDefinitions.push({ name, definition: propTypes });
           }
-
-          return importedDefinitions;
-        },
-        []
+        }
       );
 
       // reset typeDefinitions and continue processing the original file
@@ -1026,7 +1035,7 @@ function processComponentDeclaration(typeDefinition, path, state) {
 
   // import PropTypes library if it isn't already
   const proptypesBinding = getVariableBinding(path, 'PropTypes');
-  if (proptypesBinding == null) {
+  if (proptypesBinding == null && state.get('hasInjectedPropTypes') !== true) {
     let targetNode;
     // find the first statement in the program and import PropTypes there
     targetNode = path;
@@ -1043,6 +1052,7 @@ function processComponentDeclaration(typeDefinition, path, state) {
         types.stringLiteral('prop-types')
       )
     );
+    state.set('hasInjectedPropTypes', true);
   }
 }
 
@@ -1268,3 +1278,7 @@ module.exports = function propTypesFromTypeScript({ types }) {
     },
   };
 };
+
+module.exports.clearImportCache = function clearImportCache() {
+  importedDefinitionsCache.clear();
+}
diff --git a/scripts/babel/proptypes-from-ts-props/index.test.js b/scripts/babel/proptypes-from-ts-props/index.test.js
@@ -10,6 +10,9 @@ const babelOptions = {
   ],
   filename: 'somefile.tsx',
 };
+const babelPlugin = require('./index');
+
+beforeEach(() => babelPlugin.clearImportCache());
 
 describe('proptypes-from-ts-props', () => {
 

diff --git a/src-docs/src/i18ntokens.json b/src-docs/src/i18ntokens.json
@@ -421,11 +421,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 329,
+        "line": 337,
         "column": 14
       },
       "end": {
-        "line": 332,
+        "line": 340,
         "column": 16
       }
     },
@@ -661,95 +661,95 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 37,
+        "line": 61,
         "column": 6
       },
       "end": {
-        "line": 41,
+        "line": 65,
         "column": 57
       }
     },
-    "filepath": "src/components/pagination/pagination.js"
+    "filepath": "src/components/pagination/pagination.tsx"
   },
   {
     "token": "euiPagination.previousPage",
     "defString": "Previous page",
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 57,
+        "line": 81,
         "column": 4
       },
       "end": {
-        "line": 57,
+        "line": 81,
         "column": 72
       }
     },
-    "filepath": "src/components/pagination/pagination.js"
+    "filepath": "src/components/pagination/pagination.tsx"
   },
   {
     "token": "euiPagination.pageOfTotal",
     "defString": "Page {page} of {total}",
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 75,
+        "line": 99,
         "column": 6
       },
       "end": {
-        "line": 79,
+        "line": 103,
         "column": 53
       }
     },
-    "filepath": "src/components/pagination/pagination.js"
+    "filepath": "src/components/pagination/pagination.tsx"
   },
   {
     "token": "euiPagination.jumpToLastPage",
     "defString": "Jump to the last page, number {pageCount}",
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 120,
+        "line": 144,
         "column": 6
       },
       "end": {
-        "line": 124,
+        "line": 148,
         "column": 31
       }
     },
-    "filepath": "src/components/pagination/pagination.js"
+    "filepath": "src/components/pagination/pagination.tsx"
   },
   {
     "token": "euiPagination.nextPage",
     "defString": "Next page",
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 138,
+        "line": 162,
         "column": 4
       },
       "end": {
-        "line": 138,
+        "line": 162,
         "column": 64
       }
     },
-    "filepath": "src/components/pagination/pagination.js"
+    "filepath": "src/components/pagination/pagination.tsx"
   },
   {
     "token": "euiPopover.screenReaderAnnouncement",
     "defString": "You are in a popup. To exit this popup, hit escape.",
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 442,
+        "line": 589,
         "column": 14
       },
       "end": {
-        "line": 445,
+        "line": 592,
         "column": 16
       }
     },
-    "filepath": "src/components/popover/popover.js"
+    "filepath": "src/components/popover/popover.tsx"
   },
   {
     "token": "euiSelectable.loadingOptions",
@@ -917,47 +917,47 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 50,
+        "line": 49,
         "column": 8
       },
       "end": {
-        "line": 50,
+        "line": 49,
         "column": 72
       }
     },
-    "filepath": "src/components/table/mobile/table_sort_mobile.js"
+    "filepath": "src/components/table/mobile/table_sort_mobile.tsx"
   },
   {
     "token": "euiTablePagination.rowsPerPage",
     "defString": "Rows per page",
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 50,
+        "line": 62,
         "column": 8
       },
       "end": {
-        "line": 53,
+        "line": 65,
         "column": 10
       }
     },
-    "filepath": "src/components/table/table_pagination/table_pagination.js"
+    "filepath": "src/components/table/table_pagination/table_pagination.tsx"
   },
   {
     "token": "euiTablePagination.rowsPerPageOption",
     "defString": "{rowsPerPage} rows",
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 66,
+        "line": 78,
         "column": 8
       },
       "end": {
-        "line": 70,
+        "line": 82,
         "column": 10
       }
     },
-    "filepath": "src/components/table/table_pagination/table_pagination.js"
+    "filepath": "src/components/table/table_pagination/table_pagination.tsx"
   },
   {
     "token": "euiToast.dismissToast",