Introduce TypeScript support into the dev & build systems (elastic#1317)

* initial setup for TS in codebase

* Running TypeScript in jest tests

* use ts-jest 23.1.4 for json5 babelrc support

* include typescript sources and declarations in output to lib

* ts defs to proptypes

* ts-to-proptype conversion interacting with react-docgen

* Convert Array<> types to prop types

* Refactor how required/optional types are passed

* Array tests, understand object/shape types

* Fixed bug in Array type support, added full support for union types

* Understands intersections, unknown types resolve to PropTypes.any

* Correctly resolving typescript type imports through files

* Support typescript conversion to element and node prop types

* Clean up some bugs

* compile type declarations into types/ directory

* iteration

* iteration

* property merging generated and written defs

* updated yarn.lock

* don't generate ts defs when linting

* Default TS typechecking to not emit files

* clean up and fix a lot of TS issues

* better TS import resolving

* point types at eui.d.ts

* get passing tests

* fixed ts issues

* typescript support via babel

* remove ts-jest

* progress on the babel plugin

* majority of babel ts->proptype plugin functioning

* typescript defs to proptype babel plugin passing all test

* babel plugin for ts->proptypes is working

* small cleanup

* small cleanup

* fix test runner

* update spacer test file to tsx

* typescript -> proptypes now understands shorthand array type syntax

* clean up ts->proptypes script

* convert spacer example doc to tsx

* ts build cleanup

* don't need to ignore the types dir 3 times

* dtsgenerator is not a distributed dependency

* validate typescript code during build

* small cleanup

* support ts enums in proptype generation

* PR feedback

* Added more comments to the typescript->proptype babel plugin; fixed bug in importing files

* Add support for 'keyof typeof [object expression]'

* horizontal rule conversion to ts

* Update src/components/horizontal_rule/horizontal_rule.tsx

Co-Authored-By: snide <[email protected]>

* feedback

* feedback

* Updated yeoman templates for typescript

* Update docs code gen to point at @elastic/eui more often

* Update yeoman generator for docs

* don't require 'public' keyword on public class methods

* changelog

.babelrc.js

@@ -11,10 +11,12 @@ module.exports = {
       "useBuiltIns": "usage",
       "modules": process.env.BABEL_MODULES ? process.env.BABEL_MODULES : "commonjs" // babel's default is commonjs
     }],
+    "@babel/typescript",
     "@babel/react"
   ],
   "plugins": [
     "pegjs-inline-precompile",
+    "./scripts/babel/proptypes-from-ts-props",
     "add-module-exports",
     [
       "react-docgen",

.gitignore

@@ -10,7 +10,6 @@ tmp/
 dist/
 lib/
 es/
-types/
 .idea
 .vscode/
 .DS_Store
@@ -19,3 +18,7 @@ types/
 npm-debug.log
 yarn-error.log
 eui.d.ts
+
+# typescript output
+types/
+eui.d.ts

.npmignore

@@ -5,11 +5,13 @@ tmp/
 wiki/
 generator-eui/
 test/
-types/
 src-docs/
 src-framer/
 .nvmrc
 
+# typescript output
+types/
+
 # ignore everything in `scripts` except postinstall.js
 scripts/!(postinstall.js)
 

CHANGELOG.md

@@ -1,6 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-No public interface changes since `5.2.0`.
+- Introduced TypeScript support, converted `EuiSpacer` and `EuiHorizontalRule` ([#1317](https://github.com/elastic/eui/pull/1317))
 
 ## [`5.2.0`](https://github.com/elastic/eui/tree/v5.2.0)
 

generator-eui/component/index.js

@@ -49,11 +49,11 @@ module.exports = class extends Generator {
       const vars = config.vars = {
         componentName,
         cssClassName,
-        fileName,
+        fileName: fileName.replace('.ts', ''),
       };
 
-      const componentPath = config.componentPath = `${path}/${fileName}.js`;
-      const testPath = config.testPath = `${path}/${fileName}.test.js`;
+      const componentPath = config.componentPath = `${path}/${fileName}.tsx`;
+      const testPath = config.testPath = `${path}/${fileName}.test.tsx`;
       const stylesPath = config.stylesPath = `${path}/_${fileName}.scss`;
       config.stylesImportPath = `./_${fileName}.scss`;
 
@@ -66,24 +66,24 @@ module.exports = class extends Generator {
         );
 
         this.fs.copyTpl(
-          this.templatePath('index.js'),
-          this.destinationPath(`${path}/index.js`),
+          this.templatePath('index.ts'),
+          this.destinationPath(`${path}/index.ts`),
           vars
         );
       }
 
       // Create component file.
       this.fs.copyTpl(
         isStatelessFunction ?
-          this.templatePath('stateless_function.js') :
-          this.templatePath('component.js'),
+          this.templatePath('stateless_function.tsx') :
+          this.templatePath('component.tsx'),
         this.destinationPath(componentPath),
         vars
       );
 
       // Create component test file.
       this.fs.copyTpl(
-        this.templatePath('test.js'),
+        this.templatePath('test.tsx'),
         this.destinationPath(testPath),
         vars
       );
@@ -110,9 +110,8 @@ module.exports = class extends Generator {
   end() {
     const showImportComponentSnippet = () => {
       const componentName = this.config.vars.componentName;
-      const componentPath = this.config.componentPath;
 
-      this.log(chalk.white(`\n// Export component (e.. from component's index.js).`));
+      this.log(chalk.white(`\n// Export component (e.. from component's index.ts).`));
       this.log(
         `${chalk.magenta('export')} {\n` +
         `  ${componentName},\n` +

generator-eui/component/templates/component.js → generator-eui/component/templates/component.tsx

@@ -1,24 +1,24 @@
 import React, {
   Component,
+  HTMLAttributes,
 } from 'react';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import { CommonProps } from '../common';
 
-export class <%= componentName %> extends Component {
-  static propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
-  }
+export type <%= componentName %>Props = HTMLAttributes<HTMLDivElement> & CommonProps & {
+
+};
 
-  constructor(props) {
+export class <%= componentName %> extends Component<<%= componentName %>Props> {
+  constructor(props: <%= componentName %>Props) {
     super(props);
   }
 
   render() {
     const {
       children,
       className,
-      ...rest,
+      ...rest
     } = this.props;
 
     const classes = classNames(

generator-eui/component/templates/stateless_function.tsx

@@ -0,0 +1,24 @@
+import React, { HTMLAttributes, SFC } from 'react';
+import { CommonProps } from '../common';
+import classNames from 'classnames';
+
+export type <%= componentName %>Props = HTMLAttributes<HTMLDivElement> & CommonProps & {
+
+};
+
+export const <%= componentName %>: React.SFC<<%= componentName %>Props> = ({
+  children,
+  className,
+  ...rest
+}) => {
+  const classes = classNames('<%= cssClassName %>', className);
+
+  return (
+    <div
+      className={classes}
+      {...rest}
+    >
+      {children}
+    </div>
+  );
+};

generator-eui/component/templates/test.js → generator-eui/component/templates/test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from 'enzyme';
-import { requiredProps } from '../../test';
+import { requiredProps } from '../../test/required_props';
 
 import { <%= componentName %> } from './<%= fileName %>';
 

generator-eui/documentation/index.js

@@ -86,10 +86,10 @@ module.exports = class extends Generator {
 
       const documentationPageDemoPath
         = config.documentationPageDemoPath
-        = `${path}/${folderName}/${fileName}.js`;
+        = `${path}/${folderName}/${fileName}.tsx`;
 
       this.fs.copyTpl(
-        this.templatePath('documentation_page_demo.js'),
+        this.templatePath('documentation_page_demo.tsx'),
         this.destinationPath(documentationPageDemoPath),
         vars
       );

generator-eui/documentation/templates/documentation_page_demo.js → generator-eui/documentation/templates/documentation_page_demo.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import {
   <%= componentName %>,
-} from '../../../../src/components';
+} from '../../../../src/components/<%= fileName %>';
 
 export default () => (
   <<%= componentName %>>

package.json

@@ -20,7 +20,7 @@
     "lint-es-fix": "eslint --fix --cache --ignore-pattern \"**/*.snap.js\" \"src/**/*.js\" \"src-docs/**/*.js\"",
     "lint-sass": "sass-lint -v --max-warnings 0",
     "lint-sass-fix": "sass-lint-auto-fix -c ./.sass-lint-fix.yml",
-    "lint-ts": "tslint -c ./tslint.yaml -p ./tsconfig.json && tsc -p ./tsconfig.json",
+    "lint-ts": "tslint -c ./tslint.yaml -p ./tsconfig.json && tsc -p ./tsconfig.json --noEmit",
     "lint-ts-fix": "tslint -c ./tslint.yaml -p ./tsconfig.json --fix",
     "lint-framer": "tslint -c ./tslint.yaml -p ./src-framer/tsconfig.json",
     "lint-framer-fix": "tslint -c ./tslint.yaml -p ./src-framer/tsconfig.json --fix",
@@ -68,8 +68,12 @@
     "@babel/polyfill": "^7.0.0",
     "@babel/preset-env": "^7.1.0",
     "@babel/preset-react": "^7.0.0",
+    "@babel/preset-typescript": "^7.1.0",
     "@elastic/eslint-config-kibana": "^0.15.0",
+    "@types/classnames": "^2.2.6",
     "@types/enzyme": "^3.1.13",
+    "@types/jest": "^23.3.9",
+    "@types/lodash": "^4.14.116",
     "@types/react": "^16.0.31",
     "@types/react-virtualized": "^9.18.6",
     "autoprefixer": "^7.1.5",
@@ -81,6 +85,7 @@
     "babel-plugin-inline-react-svg": "^1.0.1",
     "babel-plugin-pegjs-inline-precompile": "^0.1.0",
     "babel-plugin-react-docgen": "^2.0.0",
+    "babel-template": "^6.26.0",
     "chai": "^4.1.2",
     "chai-webdriverio": "^0.4.3",
     "chalk": "^2.4.1",
@@ -105,6 +110,7 @@
     "eslint-plugin-prettier": "^2.6.0",
     "eslint-plugin-react": "^7.4.0",
     "file-loader": "^1.1.11",
+    "fork-ts-checker-webpack-plugin": "^0.4.4",
     "geckodriver": "^1.11.0",
     "glob": "^7.1.2",
     "html-webpack-plugin": "^3.2.0",