Support for importing types

package.json

@@ -44,6 +44,7 @@
     "commander": "^2.19.0",
     "doctrine": "^3.0.0",
     "node-dir": "^0.1.10",
+    "resolve": "^1.10.1",
     "strip-indent": "^3.0.0"
   },
   "devDependencies": {
@@ -79,5 +80,8 @@
       "src"
     ],
     "testRegex": "/__tests__/.*-test\\.js$"
+  },
+  "browser": {
+    "./dist/utils/resolveImportedValue.js": "./dist/utils/resolveImportedValue.browser.js"
   }
 }

src/__tests__/__snapshots__/main-test.js.snap

@@ -1446,3 +1446,213 @@ Object {
   },
 }
 `;
+
+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 [],
+}
+`;
+
+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",
+      },
+    },
+  },
+}
+`;
+
+exports[`main fixtures processes component "component_33.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",
+      },
+    },
+  },
+}
+`;
+
+exports[`main fixtures processes component "component_34.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",
+      },
+    },
+  },
+}
+`;
+
+exports[`main fixtures processes component "component_35.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_36.js" without errors 1`] = `
+Object {
+  "description": "",
+  "displayName": "SuperDuperCustomButton",
+  "methods": Array [],
+  "props": Object {
+    "size": Object {
+      "defaultValue": Object {
+        "computed": true,
+        "value": "Sizes.EXTRA_LARGE",
+      },
+      "description": "",
+      "required": false,
+      "type": Object {
+        "computed": true,
+        "name": "enum",
+        "value": "Object.values(Sizes)",
+      },
+    },
+  },
+}
+`;

src/__tests__/fixtures/component_27.tsx

@@ -8,7 +8,7 @@
 
 import React, { Component } from 'react';
 
-interface Props {
+export interface Props {
   foo: string
 }
 

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

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;

src/__tests__/fixtures/component_31.js

@@ -0,0 +1,10 @@
+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};
+export * from './component_32';

src/__tests__/fixtures/component_32.js

@@ -0,0 +1,9 @@
+import {SuperCustomButton, sharedProps} from './component_31';
+import PropTypes from 'prop-types';
+
+export function SuperDuperCustomButton({color, ...otherProps}) {
+  return <SuperCustomButton {...otherProps} style={{color}} />;
+}
+
+SuperDuperCustomButton.propTypes = sharedProps;
+export * from './component_31';

src/__tests__/fixtures/component_33.js

@@ -0,0 +1,9 @@
+import * as C31 from './component_32';
+import PropTypes from 'prop-types';
+
+export function SuperDuperCustomButton({color, ...otherProps}) {
+  return <C31.SuperCustomButton {...otherProps} style={{color}} />;
+}
+
+SuperDuperCustomButton.propTypes = C31.sharedProps;
+export {SuperCustomButton} from './component_32';

src/__tests__/fixtures/component_34.js

@@ -0,0 +1,8 @@
+import {SuperCustomButton} from './component_33';
+import PropTypes from 'prop-types';
+
+export function SuperDuperCustomButton({color, ...otherProps}) {
+  return <SuperCustomButton {...otherProps} style={{color}} />;
+}
+
+SuperDuperCustomButton.propTypes = SuperCustomButton.propTypes;

src/__tests__/fixtures/component_35.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>;
+}

src/__tests__/fixtures/component_36.js

@@ -0,0 +1,16 @@
+import { Sizes } from '../common';
+import T from 'prop-types';
+
+function SuperDuperCustomButton() {
+  return <div />;
+}
+
+SuperDuperCustomButton.defaultProps = {
+  size: Sizes.EXTRA_LARGE,
+};
+
+SuperDuperCustomButton.propTypes = {
+  size: T.oneOf(Object.values(Sizes)),
+};
+
+export default SuperDuperCustomButton;

src/babelParser.js

@@ -100,13 +100,17 @@ function buildOptions(
 export default function buildParse(options?: Options = {}): Parser {
   const { parserOptions, ...babelOptions } = options;
   const parserOpts = buildOptions(parserOptions, babelOptions);
+  const opts = {
+    parserOpts,
+    ...babelOptions,
+  };
 
   return {
     parse(src: string): ASTNode {
-      return babel.parseSync(src, {
-        parserOpts,
-        ...babelOptions,
-      });
+      const ast = babel.parseSync(src, opts);
+      // Attach options to the Program node, for use when processing imports.
+      ast.program.options = options;
+      return ast;
     },
   };
 }

src/handlers/__tests__/propDocblockHandler-test.js

@@ -128,7 +128,7 @@ describe('propDocBlockHandler', () => {
       const definition = parse(
         getSrc(
           `{
-          ...Foo.propTypes,
+          ...Bar.propTypes,
           /**
            * Foo comment
            */

src/utils/getMemberValuePath.js

@@ -37,7 +37,7 @@ const LOOKUP_METHOD = {
   [t.ClassExpression.name]: getClassMemberValuePath,
 };
 
-function isSupportedDefinitionType({ node }) {
+export function isSupportedDefinitionType({ node }: NodePath) {
   return (
     t.ObjectExpression.check(node) ||
     t.ClassDeclaration.check(node) ||

src/utils/isReactComponentClass.js

@@ -42,7 +42,7 @@ export default function isReactComponentClass(path: NodePath): boolean {
   }
 
   // React.Component or React.PureComponent
-  const superClass = resolveToValue(path.get('superClass'));
+  const superClass = resolveToValue(path.get('superClass'), false);
   if (
     match(superClass.node, { property: { name: 'Component' } }) ||
     match(superClass.node, { property: { name: 'PureComponent' } })