[GSOC] Automatic Documentation System for TypeScript Components

.babelrc.js

@@ -24,13 +24,8 @@ module.exports = {
     "@babel/plugin-syntax-dynamic-import",
     "pegjs-inline-precompile",
     "./scripts/babel/proptypes-from-ts-props",
+    "./scripts/babel/react-docgen-typescript",
     "add-module-exports",
-    [
-      "react-docgen",
-      {
-        "resolver": "findAllExportedComponentDefinitions"
-      }
-    ],
     // stage 3
     "@babel/proposal-object-rest-spread",
     // stage 2

package.json

@@ -29,7 +29,7 @@
     "test-unit": "cross-env NODE_ENV=test jest --config ./scripts/jest/config.json",
     "test-a11y": "node ./scripts/a11y-testing",
     "test-staged": "yarn lint && node scripts/test-staged.js",
-    "start-test-server": "BABEL_MODULES=false NODE_ENV=puppeteer webpack-dev-server --config src-docs/webpack.config.js --port 9999",
+    "start-test-server": "BABEL_MODULES=false NODE_ENV=puppeteer NODE_OPTIONS=--max-old-space-size=4096 webpack-dev-server --config src-docs/webpack.config.js --port 9999",
     "test-visual": "wdio test/wdio.conf.js",
     "yo-component": "yo ./generator-eui/app/component.js",
     "test-visual-tests": "node ./scripts/run-visual-tests.js",
@@ -128,7 +128,6 @@
     "babel-plugin-dynamic-import-node": "^2.2.0",
     "babel-plugin-inline-react-svg": "^1.0.1",
     "babel-plugin-pegjs-inline-precompile": "^0.1.0",
-    "babel-plugin-react-docgen": "^3.1.0",
     "babel-template": "^6.26.0",
     "cache-loader": "^2.0.1",
     "chai": "^4.1.2",
@@ -191,6 +190,7 @@
     "puppeteer": "^2.0.0",
     "raw-loader": "^0.5.1",
     "react": "^16.12.0",
+    "react-docgen-typescript": "^1.17.1",
     "react-dom": "^16.12.0",
     "react-redux": "^5.1.2",
     "react-router": "^5.2.0",

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

@@ -1,3 +1,23 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+/* eslint-disable @typescript-eslint/no-var-requires */
 /* eslint-disable new-cap */
 
 const fs = require('fs');
@@ -471,8 +491,7 @@ function getPropTypesForNode(node, optional, state) {
 
       if (
         types.isLiteral(propType) ||
-        (types.isIdentifier(propType) &&
-          propType.name === 'undefined')
+        (types.isIdentifier(propType) && propType.name === 'undefined')
       ) {
         // can't use a literal straight, wrap it with PropTypes.oneOf([ the_literal ])
         propType = convertLiteralToOneOf(types, propType);
@@ -511,7 +530,7 @@ function getPropTypesForNode(node, optional, state) {
     // translates intersections (Foo & Bar & Baz) to a shape with the types' members (Foo, Bar, Baz) merged together
     case 'TSIntersectionType':
       const usableNodes = [...node.types].filter(node => {
-        let nodePropTypes = getPropTypesForNode(node, true, state);
+        const nodePropTypes = getPropTypesForNode(node, true, state);
 
         if (
           types.isMemberExpression(nodePropTypes) &&
@@ -526,7 +545,8 @@ function getPropTypesForNode(node, optional, state) {
           !types.isCallExpression(nodePropTypes) ||
           !types.isMemberExpression(nodePropTypes.callee) ||
           nodePropTypes.callee.object.name !== 'PropTypes' ||
-          (nodePropTypes.callee.property.name !== 'shape' && nodePropTypes.callee.property.name !== 'oneOfType')
+          (nodePropTypes.callee.property.name !== 'shape' &&
+            nodePropTypes.callee.property.name !== 'oneOfType')
         ) {
           return false;
         }
@@ -712,9 +732,15 @@ function getPropTypesForNode(node, optional, state) {
                   (types.isIdentifier(propertyPropType) &&
                     propertyPropType.name === 'undefined')
                 ) {
-                  propertyPropType = convertLiteralToOneOf(types, propertyPropType);
+                  propertyPropType = convertLiteralToOneOf(
+                    types,
+                    propertyPropType
+                  );
                   if (!property.optional) {
-                    propertyPropType = makePropTypeRequired(types, propertyPropType);
+                    propertyPropType = makePropTypeRequired(
+                      types,
+                      propertyPropType
+                    );
                   }
                 }
 
@@ -1085,7 +1111,7 @@ const typeDefinitionExtractors = {
         return [];
       }
 
-      const cacheKey = `${sourceFilename}_${resolvedPath}`
+      const cacheKey = `${sourceFilename}_${resolvedPath}`;
       if (importedDefinitionsCache.has(cacheKey)) {
         return importedDefinitionsCache.get(cacheKey);
       }
@@ -1562,8 +1588,7 @@ module.exports = function propTypesFromTypeScript({ types }) {
                 types.isIdentifier(variableDeclarator.init.callee.object) &&
                 variableDeclarator.init.callee.object.name === 'React' &&
                 types.isIdentifier(variableDeclarator.init.callee.property) &&
-                variableDeclarator.init.callee.property.name === 'forwardRef')
-            )
+                variableDeclarator.init.callee.property.name === 'forwardRef'))
           ) {
             // props for the component come from the second argument to the type params
             const typeDefinition =