From df7072953e322fd4bd6ab7f969f9ed762736c550 Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Sun, 28 Apr 2019 21:59:00 -0700
Subject: [PATCH] Initial support for importing prop types

---
 package.json                                  |   3 +-
 src/__tests__/__snapshots__/main-test.js.snap | 141 ++++++++++++++++++
 src/__tests__/fixtures/component_27.tsx       |   2 +-
 src/__tests__/fixtures/component_28.tsx       |  21 +++
 src/__tests__/fixtures/component_29.tsx       |  17 +++
 src/__tests__/fixtures/component_30.js        |  13 ++
 src/__tests__/fixtures/component_31.js        |   9 ++
 src/__tests__/fixtures/component_32.js        |   8 +
 src/babelParser.js                            |  12 +-
 .../__tests__/propDocblockHandler-test.js     |   2 +-
 src/utils/getMemberValuePath.js               |   2 +-
 src/utils/isReactComponentClass.js            |   2 +-
 src/utils/resolveImportedValue.js             | 113 ++++++++++++++
 src/utils/resolveToModule.js                  |   2 +-
 src/utils/resolveToValue.js                   |  68 +++++++--
 yarn.lock                                     |   7 +
 16 files changed, 399 insertions(+), 23 deletions(-)
 create mode 100644 src/__tests__/fixtures/component_28.tsx
 create mode 100644 src/__tests__/fixtures/component_29.tsx
 create mode 100644 src/__tests__/fixtures/component_30.js
 create mode 100644 src/__tests__/fixtures/component_31.js
 create mode 100644 src/__tests__/fixtures/component_32.js
 create mode 100644 src/utils/resolveImportedValue.js

diff --git a/package.json b/package.json
index 65b22b5c663..118b3e90f9f 100644
--- a/package.json
+++ b/package.json
@@ -43,7 +43,8 @@
     "commander": "^2.19.0",
     "doctrine": "^3.0.0",
     "node-dir": "^0.1.10",
-    "recast": "^0.17.6"
+    "recast": "^0.17.6",
+    "resolve": "^1.10.1"
   },
   "devDependencies": {
     "@babel/cli": "^7.0.0",
diff --git a/src/__tests__/__snapshots__/main-test.js.snap b/src/__tests__/__snapshots__/main-test.js.snap
index 3652dd82b4f..6e9b91c15a2 100644
--- a/src/__tests__/__snapshots__/main-test.js.snap
+++ b/src/__tests__/__snapshots__/main-test.js.snap
@@ -1421,3 +1421,144 @@ Object {
   },
 }
 `;
+
+exports[`main fixtures processes component "component_28.tsx" without errors 1`] = `
+Object {
+  "description": "This is a typescript component with imported prop types",
+  "displayName": "ImportedComponent",
+  "methods": Array [],
+  "props": Object {
+    "foo": Object {
+      "description": "",
+      "required": true,
+      "tsType": Object {
+        "name": "string",
+      },
+    },
+  },
+}
+`;
+
+exports[`main fixtures processes component "component_29.tsx" without errors 1`] = `
+Object {
+  "description": "This is a typescript component with imported prop types",
+  "displayName": "ImportedExtendedComponent",
+  "methods": Array [],
+  "props": Object {
+    "bar": Object {
+      "description": "",
+      "required": true,
+      "tsType": Object {
+        "name": "number",
+      },
+    },
+    "foo": Object {
+      "description": "",
+      "required": true,
+      "tsType": Object {
+        "name": "string",
+      },
+    },
+  },
+}
+`;
+
+exports[`main fixtures processes component "component_30.js" without errors 1`] = `
+Object {
+  "description": "",
+  "displayName": "CustomButton",
+  "methods": Array [],
+  "props": Object {
+    "children": Object {
+      "description": "",
+      "required": true,
+      "type": Object {
+        "name": "string",
+      },
+    },
+    "color": Object {
+      "description": "",
+      "required": false,
+      "type": Object {
+        "name": "string",
+      },
+    },
+    "onClick": Object {
+      "description": "",
+      "required": false,
+      "type": Object {
+        "name": "func",
+      },
+    },
+    "style": Object {
+      "description": "",
+      "required": false,
+      "type": Object {
+        "name": "object",
+      },
+    },
+  },
+}
+`;
+
+exports[`main fixtures processes component "component_31.js" without errors 1`] = `
+Object {
+  "description": "",
+  "displayName": "SuperCustomButton",
+  "methods": Array [],
+  "props": Object {
+    "children": Object {
+      "description": "",
+      "required": true,
+      "type": Object {
+        "name": "string",
+      },
+    },
+    "onClick": Object {
+      "description": "",
+      "required": false,
+      "type": Object {
+        "name": "func",
+      },
+    },
+    "style": Object {
+      "description": "",
+      "required": false,
+      "type": Object {
+        "name": "object",
+      },
+    },
+  },
+}
+`;
+
+exports[`main fixtures processes component "component_32.js" without errors 1`] = `
+Object {
+  "description": "",
+  "displayName": "SuperDuperCustomButton",
+  "methods": Array [],
+  "props": Object {
+    "children": Object {
+      "description": "",
+      "required": true,
+      "type": Object {
+        "name": "string",
+      },
+    },
+    "onClick": Object {
+      "description": "",
+      "required": false,
+      "type": Object {
+        "name": "func",
+      },
+    },
+    "style": Object {
+      "description": "",
+      "required": false,
+      "type": Object {
+        "name": "object",
+      },
+    },
+  },
+}
+`;
diff --git a/src/__tests__/fixtures/component_27.tsx b/src/__tests__/fixtures/component_27.tsx
index 9cd7c4187ae..b7c84d7dfb5 100644
--- a/src/__tests__/fixtures/component_27.tsx
+++ b/src/__tests__/fixtures/component_27.tsx
@@ -8,7 +8,7 @@
 
 import React, { Component } from 'react';
 
-interface Props {
+export interface Props {
   foo: string
 }
 
diff --git a/src/__tests__/fixtures/component_28.tsx b/src/__tests__/fixtures/component_28.tsx
new file mode 100644
index 00000000000..69265650558
--- /dev/null
+++ b/src/__tests__/fixtures/component_28.tsx
@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import React, { Component } from 'react';
+import { Props as ImportedProps } from './component_27';
+
+export default interface ExtendedProps extends ImportedProps {
+  bar: number
+}
+
+/**
+ * This is a typescript component with imported prop types
+ */
+export function ImportedComponent(props: ImportedProps) {
+  return <h1>Hello world</h1>;
+}
diff --git a/src/__tests__/fixtures/component_29.tsx b/src/__tests__/fixtures/component_29.tsx
new file mode 100644
index 00000000000..b0c7b95432a
--- /dev/null
+++ b/src/__tests__/fixtures/component_29.tsx
@@ -0,0 +1,17 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import React, { Component } from 'react';
+import ExtendedProps from './component_28';
+
+/**
+ * This is a typescript component with imported prop types
+ */
+export function ImportedExtendedComponent(props: ExtendedProps) {
+  return <h1>Hello world</h1>;
+}
diff --git a/src/__tests__/fixtures/component_30.js b/src/__tests__/fixtures/component_30.js
new file mode 100644
index 00000000000..4b227a5bc62
--- /dev/null
+++ b/src/__tests__/fixtures/component_30.js
@@ -0,0 +1,13 @@
+import Button from './component_6';
+import PropTypes from 'prop-types';
+
+export function CustomButton({color, ...otherProps}) {
+  return <Button {...otherProps} style={{color}} />;
+}
+
+CustomButton.propTypes = {
+  ...Button.propTypes,
+  color: PropTypes.string
+};
+
+export const sharedProps = Button.propTypes;
diff --git a/src/__tests__/fixtures/component_31.js b/src/__tests__/fixtures/component_31.js
new file mode 100644
index 00000000000..93aeb0153fa
--- /dev/null
+++ b/src/__tests__/fixtures/component_31.js
@@ -0,0 +1,9 @@
+import {CustomButton, sharedProps} from './component_30';
+import PropTypes from 'prop-types';
+
+export function SuperCustomButton({color, ...otherProps}) {
+  return <CustomButton {...otherProps} style={{color}} />;
+}
+
+SuperCustomButton.propTypes = sharedProps;
+export {sharedProps};
diff --git a/src/__tests__/fixtures/component_32.js b/src/__tests__/fixtures/component_32.js
new file mode 100644
index 00000000000..d8f7cc3a014
--- /dev/null
+++ b/src/__tests__/fixtures/component_32.js
@@ -0,0 +1,8 @@
+import {SuperCustomButton, sharedProps} from './component_31';
+import PropTypes from 'prop-types';
+
+export function SuperDuperCustomButton({color, ...otherProps}) {
+  return <SuperCustomButton {...otherProps} style={{color}} />;
+}
+
+SuperDuperCustomButton.propTypes = sharedProps;
diff --git a/src/babelParser.js b/src/babelParser.js
index 7ef995e445a..5202c00033b 100644
--- a/src/babelParser.js
+++ b/src/babelParser.js
@@ -99,13 +99,17 @@ function buildOptions(
 export default function buildParse(options?: Options = {}) {
   const { parserOptions, ...babelOptions } = options;
   const parserOpts = buildOptions(parserOptions, babelOptions);
+  const opts = {
+    parserOpts,
+    ...babelOptions,
+  };
 
   return {
     parse(src: string) {
-      return babel.parseSync(src, {
-        parserOpts,
-        ...babelOptions,
-      });
+      const res = babel.parseSync(src, opts);
+      // Attach options to the Program node, for use when processing imports.
+      res.program.options = opts;
+      return res;
     },
   };
 }
diff --git a/src/handlers/__tests__/propDocblockHandler-test.js b/src/handlers/__tests__/propDocblockHandler-test.js
index 39392b672f6..53c29a5731d 100644
--- a/src/handlers/__tests__/propDocblockHandler-test.js
+++ b/src/handlers/__tests__/propDocblockHandler-test.js
@@ -138,7 +138,7 @@ describe('propDocBlockHandler', () => {
       const definition = parse(
         getSrc(
           `{
-          ...Foo.propTypes,
+          ...Bar.propTypes,
           /**
            * Foo comment
            */
diff --git a/src/utils/getMemberValuePath.js b/src/utils/getMemberValuePath.js
index 9f810d7d9b8..c1462b5d25b 100644
--- a/src/utils/getMemberValuePath.js
+++ b/src/utils/getMemberValuePath.js
@@ -40,7 +40,7 @@ const LOOKUP_METHOD = {
   [types.ClassExpression.name]: getClassMemberValuePath,
 };
 
-function isSupportedDefinitionType({ node }) {
+export function isSupportedDefinitionType({ node }) {
   return (
     types.ObjectExpression.check(node) ||
     types.ClassDeclaration.check(node) ||
diff --git a/src/utils/isReactComponentClass.js b/src/utils/isReactComponentClass.js
index 1df88a5a7c5..6b244245122 100644
--- a/src/utils/isReactComponentClass.js
+++ b/src/utils/isReactComponentClass.js
@@ -69,7 +69,7 @@ export default function isReactComponentClass(path: NodePath): boolean {
   if (!node.superClass) {
     return false;
   }
-  const superClass = resolveToValue(path.get('superClass'));
+  const superClass = resolveToValue(path.get('superClass'), false);
   if (!match(superClass.node, { property: { name: 'Component' } })) {
     return false;
   }
diff --git a/src/utils/resolveImportedValue.js b/src/utils/resolveImportedValue.js
new file mode 100644
index 00000000000..18cced3fbce
--- /dev/null
+++ b/src/utils/resolveImportedValue.js
@@ -0,0 +1,113 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import recast from 'recast';
+import { traverseShallow } from './traverse';
+import resolve from 'resolve';
+import { dirname } from 'path';
+import buildParser, { type Options } from '../babelParser';
+import fs from 'fs';
+
+const {
+  types: { NodePath, namedTypes: types },
+} = recast;
+
+export default function resolveImportedValue(path: NodePath, name: string) {
+  types.ImportDeclaration.assert(path.node);
+
+  // Bail if no filename was provided for the current source file.
+  // Also never traverse into react itself.
+  const source = path.node.source.value;
+  const options = getOptions(path);
+  if (!options || !options.filename || source === 'react') {
+    return null;
+  }
+  
+  // Resolve the imported module using the Node resolver
+  const basedir = dirname(options.filename);
+  let resolvedSource;
+
+  try {
+    resolvedSource = resolve.sync(source, {
+      basedir,
+      extensions: ['.js', '.jsx', '.ts', '.tsx'],
+    });
+  } catch (err) {
+    return null;
+  }
+
+  // Read and parse the code
+  // TODO: cache and reuse
+  const code = fs.readFileSync(resolvedSource);
+  const parseOptions: Options = {
+    ...options,
+    parserOptions: {},
+    filename: resolvedSource,
+  };
+
+  const ast = recast.parse(code, { parser: buildParser(parseOptions) });
+  return findExportedValue(ast.program, name);
+}
+
+// Find the root Program node, which we attached our options too in babelParser.js
+function getOptions(path: NodePath): Options {
+  while (path.parentPath) {
+    path = path.parentPath;
+  }
+
+  if (path.value && path.value.root) {
+    return path.value.root.options || {};
+  }
+
+  return {};
+}
+
+// Traverses the program looking for an export that matches the requested name
+function findExportedValue(ast, name) {
+  let resultPath: ?NodePath = null;
+
+  traverseShallow(ast, {
+    visitExportNamedDeclaration(path: NodePath) {
+      const { declaration, specifiers } = path.node;
+      if (declaration && declaration.id && declaration.id.name === name) {
+        resultPath = path.get('declaration');
+      } else if (declaration && declaration.declarations) {
+        path.get('declaration', 'declarations').each((declPath: NodePath) => {
+          const decl = declPath.node;
+          // TODO: ArrayPattern and ObjectPattern
+          if (
+            types.Identifier.check(decl.id) &&
+            decl.id.name === name &&
+            decl.init
+          ) {
+            resultPath = declPath.get('init');
+          }
+        });
+      } else if (specifiers) {
+        path.get('specifiers').each((specifierPath: NodePath) => {
+          if (specifierPath.node.exported.name === name) {
+            resultPath = specifierPath.get('local');
+          }
+        });
+      }
+
+      return false;
+    },
+    visitExportDefaultDeclaration(path: NodePath) {
+      if (name === 'default') {
+        resultPath = path.get('declaration');
+      }
+
+      return false;
+    },
+    // TODO: visitExportAllDeclaration
+  });
+
+  return resultPath;
+}
diff --git a/src/utils/resolveToModule.js b/src/utils/resolveToModule.js
index 6b3aa94a74f..397ee0c9e02 100644
--- a/src/utils/resolveToModule.js
+++ b/src/utils/resolveToModule.js
@@ -37,7 +37,7 @@ export default function resolveToModule(path: NodePath): ?string {
       return resolveToModule(path.get('callee'));
     case types.Identifier.name:
     case types.JSXIdentifier.name: {
-      const valuePath = resolveToValue(path);
+      const valuePath = resolveToValue(path, false);
       if (valuePath !== path) {
         return resolveToModule(valuePath);
       }
diff --git a/src/utils/resolveToValue.js b/src/utils/resolveToValue.js
index 4dc3f290b93..7c1aed4773c 100644
--- a/src/utils/resolveToValue.js
+++ b/src/utils/resolveToValue.js
@@ -12,6 +12,10 @@ import getMemberExpressionRoot from './getMemberExpressionRoot';
 import getPropertyValuePath from './getPropertyValuePath';
 import { Array as toArray } from './expressionTo';
 import { traverseShallow } from './traverse';
+import resolveImportedValue from './resolveImportedValue';
+import getMemberValuePath, {
+  isSupportedDefinitionType,
+} from './getMemberValuePath';
 
 const {
   types: { NodePath, builders, namedTypes: types },
@@ -39,13 +43,42 @@ function buildMemberExpressionFromPattern(path: NodePath): ?NodePath {
   return null;
 }
 
-function findScopePath(paths: Array<NodePath>, path: NodePath): ?NodePath {
+function findScopePath(
+  paths: Array<NodePath>,
+  path: NodePath,
+  resolveImports: boolean,
+): ?NodePath {
   if (paths.length < 1) {
     return null;
   }
   let resultPath = paths[0];
   const parentPath = resultPath.parent;
 
+  if (
+    resolveImports &&
+    (types.ImportDefaultSpecifier.check(parentPath.node) ||
+      types.ImportSpecifier.check(parentPath.node) ||
+      types.ImportNamespaceSpecifier.check(parentPath.node))
+  ) {
+    let exportName;
+    if (types.ImportDefaultSpecifier.check(parentPath.node)) {
+      exportName = 'default';
+    } else if (types.ImportNamespaceSpecifier.check(parentPath.node)) {
+      exportName = '*';
+    } else {
+      exportName = parentPath.node.imported.name;
+    }
+
+    const resolvedPath = resolveImportedValue(
+      parentPath.parentPath,
+      exportName,
+    );
+
+    if (resolvedPath) {
+      return resolveToValue(resolvedPath, resolveImports);
+    }
+  }
+
   if (
     types.ImportDefaultSpecifier.check(parentPath.node) ||
     types.ImportSpecifier.check(parentPath.node) ||
@@ -66,7 +99,7 @@ function findScopePath(paths: Array<NodePath>, path: NodePath): ?NodePath {
   }
 
   if (resultPath.node !== path.node) {
-    return resolveToValue(resultPath);
+    return resolveToValue(resultPath, resolveImports);
   }
 
   return null;
@@ -76,7 +109,7 @@ function findScopePath(paths: Array<NodePath>, path: NodePath): ?NodePath {
  * Tries to find the last value assigned to `name` in the scope created by
  * `scope`. We are not descending into any statements (blocks).
  */
-function findLastAssignedValue(scope, name) {
+function findLastAssignedValue(scope, name, resolveImports) {
   const results = [];
 
   traverseShallow(scope.path.node, {
@@ -99,7 +132,7 @@ function findLastAssignedValue(scope, name) {
   if (results.length === 0) {
     return null;
   }
-  return resolveToValue(results.pop());
+  return resolveToValue(results.pop(), resolveImports);
 }
 
 /**
@@ -109,14 +142,20 @@ function findLastAssignedValue(scope, name) {
  *
  * Else the path itself is returned.
  */
-export default function resolveToValue(path: NodePath): NodePath {
+export default function resolveToValue(
+  path: NodePath,
+  resolveImports: boolean = true,
+): NodePath {
   const node = path.node;
   if (types.VariableDeclarator.check(node)) {
     if (node.init) {
-      return resolveToValue(path.get('init'));
+      return resolveToValue(path.get('init'), resolveImports);
     }
   } else if (types.MemberExpression.check(node)) {
-    const resolved = resolveToValue(getMemberExpressionRoot(path));
+    const resolved = resolveToValue(
+      getMemberExpressionRoot(path),
+      resolveImports,
+    );
     if (types.ObjectExpression.check(resolved.node)) {
       let propertyPath = resolved;
       for (const propertyName of toArray(path).slice(1)) {
@@ -126,9 +165,12 @@ export default function resolveToValue(path: NodePath): NodePath {
         if (!propertyPath) {
           return path;
         }
-        propertyPath = resolveToValue(propertyPath);
+        propertyPath = resolveToValue(propertyPath, resolveImports);
       }
       return propertyPath;
+    } else if (isSupportedDefinitionType(resolved)) {
+      const memberPath = getMemberValuePath(resolved, path.node.property.name);
+      return memberPath || path;
     }
   } else if (
     types.ImportDefaultSpecifier.check(node) ||
@@ -139,10 +181,10 @@ export default function resolveToValue(path: NodePath): NodePath {
     return path.parentPath.parentPath;
   } else if (types.AssignmentExpression.check(node)) {
     if (node.operator === '=') {
-      return resolveToValue(path.get('right'));
+      return resolveToValue(path.get('right'), resolveImports);
     }
   } else if (types.TypeCastExpression.check(node)) {
-    return resolveToValue(path.get('expression'));
+    return resolveToValue(path.get('expression'), resolveImports);
   } else if (types.Identifier.check(node)) {
     if (
       (types.ClassDeclaration.check(path.parentPath.node) ||
@@ -159,16 +201,16 @@ export default function resolveToValue(path: NodePath): NodePath {
       // The variable may be assigned a different value after initialization.
       // We are first trying to find all assignments to the variable in the
       // block where it is defined (i.e. we are not traversing into statements)
-      resolvedPath = findLastAssignedValue(scope, node.name);
+      resolvedPath = findLastAssignedValue(scope, node.name, resolveImports);
       if (!resolvedPath) {
         const bindings = scope.getBindings()[node.name];
-        resolvedPath = findScopePath(bindings, path);
+        resolvedPath = findScopePath(bindings, path, resolveImports);
       }
     } else {
       scope = path.scope.lookupType(node.name);
       if (scope) {
         const typesInScope = scope.getTypes()[node.name];
-        resolvedPath = findScopePath(typesInScope, path);
+        resolvedPath = findScopePath(typesInScope, path, resolveImports);
       }
     }
     return resolvedPath || path;
diff --git a/yarn.lock b/yarn.lock
index 043c346c98b..45585d1fdd1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3848,6 +3848,13 @@ resolve@^1.10.0, resolve@^1.3.2, resolve@^1.8.1:
   dependencies:
     path-parse "^1.0.6"
 
+resolve@^1.10.1:
+  version "1.10.1"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.10.1.tgz#664842ac960795bbe758221cdccda61fb64b5f18"
+  integrity sha512-KuIe4mf++td/eFb6wkaPbMDnP6kObCaEtIDuHOUED6MNUo4K670KZUHuuvYPZDxNF0WVLw49n06M2m2dXphEzA==
+  dependencies:
+    path-parse "^1.0.6"
+
 restore-cursor@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/restore-cursor/-/restore-cursor-2.0.0.tgz#9f7ee287f82fd326d4fd162923d62129eee0dfaf"