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

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)
 

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",

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();
+}

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', () => {
 

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",