Support const reference

Author: dyatko

src/typings.ts

@@ -112,7 +112,7 @@ function createExportedClassComponent(m: dom.ModuleDeclaration, componentName: s
 
 function createExportedFunctionalComponent(m: dom.ModuleDeclaration, componentName: string, propTypes: any,
     exportType: dom.DeclarationFlags, interf: dom.InterfaceDeclaration): void {
-  const typeDecl = dom.create.namedTypeReference(`React.SFC${ propTypes ? `<${interf.name}>` : '' }`);
+  const typeDecl = dom.create.namedTypeReference(`React.FC${ propTypes ? `<${interf.name}>` : '' }`);
   const constDecl = dom.create.const(componentName, typeDecl);
   m.members.push(constDecl);
 
@@ -383,6 +383,19 @@ function getPropTypes(ast: AstQuery, componentName: string): any|undefined {
     return getPropTypes(ast, referencedComponentName);
   }
 
+  if (propTypes) {
+    const referencedVariable = ast.query(`
+      //VariableDeclarator[
+        /:id Identifier[@name == '${propTypes.name}']
+      ]
+      /:init *
+    `);
+
+    if (referencedVariable && referencedVariable.length) {
+      return referencedVariable[0];
+    }
+  }
+
   return propTypes;
 }
 

tests/component-without-proptypes.d.ts

@@ -1,12 +1,12 @@
-declare module 'component' {
-  import * as React from 'react';
-
-  export interface TestProps {
-  }
-
-  export default class Test extends React.Component<TestProps, any> {
-    render(): JSX.Element;
-  }
-
-  export const test: React.SFC;
-}
+declare module 'component' {
+  import * as React from 'react';
+
+  export interface TestProps {
+  }
+
+  export default class Test extends React.Component<TestProps, any> {
+    render(): JSX.Element;
+  }
+
+  export const test: React.FC;
+}

tests/const-as-proptypes.d.ts

@@ -0,0 +1,14 @@
+declare module 'component' {
+  import * as React from 'react';
+
+  export type ButtonButtonSize = "sm" | "md" | "lg";
+
+  export interface ButtonProps {
+    buttonSize?: ButtonButtonSize;
+  }
+
+  const Button: React.FC<ButtonProps>;
+
+  export default Button;
+
+}

tests/const-as-proptypes.jsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const buttonPropTypes = {
+  buttonSize: PropTypes.oneOf(['sm', 'md', 'lg'])
+};
+
+export default function Button({ buttonSize }) {
+  return (
+    <button>Test {buttonSize}</button>
+  );
+}
+
+Button.propTypes = buttonPropTypes;

tests/named-export-specifiers.d.ts

@@ -1,11 +1,11 @@
 declare module 'component' {
   import * as React from 'react';
-  
+
   export interface ComponentProps {
     optionalAny?: any;
   }
 
-  export const Component: React.SFC<ComponentProps>;
+  export const Component: React.FC<ComponentProps>;
 
-  export const Component2: React.SFC;
+  export const Component2: React.FC;
 }

tests/parsing-test.ts

@@ -113,9 +113,12 @@ test('Parsing should support an SFC with default export', t => {
 test('Parsing should support an SFC with default export babeled to es6', t => {
   compare(t, 'component', 'stateless-export-as-default.js', 'stateless-export-as-default.d.ts');
 });
-test('Parsing should suppport components that extend PureComponent', t => {
+test('Parsing should support components that extend PureComponent', t => {
   compare(t, 'component', 'pure-component.jsx', 'pure-component.d.ts');
 });
+test('Parsing should support prop-types as reference to constant', t => {
+  compare(t, 'component', 'const-as-proptypes.jsx', 'const-as-proptypes.d.ts');
+});
 test('Parsing should suppport custom eol style', t => {
   textDiff(
     t,

tests/stateless-default-export.d.ts

@@ -1,12 +1,12 @@
-declare module 'component' {
-  import * as React from 'react';
-  
-  export interface ComponentProps {
-    optionalString?: string;
-  }
-
-  const Component: React.SFC<ComponentProps>;
-  export default Component;
-
-  export const Component2: React.SFC;
-}
+declare module 'component' {
+  import * as React from 'react';
+
+  export interface ComponentProps {
+    optionalString?: string;
+  }
+
+  const Component: React.FC<ComponentProps>;
+  export default Component;
+
+  export const Component2: React.FC;
+}

tests/stateless-export-as-default.d.ts

@@ -1,11 +1,11 @@
 declare module 'component' {
   import * as React from 'react';
-  
+
   export interface ComponentProps {
     text: string;
     className?: string;
   }
 
-  const Component: React.SFC<ComponentProps>;
+  const Component: React.FC<ComponentProps>;
   export default Component;
 }

tests/stateless.d.ts

@@ -1,11 +1,11 @@
-declare module 'component' {
-  import * as React from 'react';
-  
-  export interface ComponentProps {
-    optionalAny?: any;
-  }
-
-  export const Component: React.SFC<ComponentProps>;
-
-  export const Component2: React.SFC;
-}
+declare module 'component' {
+  import * as React from 'react';
+
+  export interface ComponentProps {
+    optionalAny?: any;
+  }
+
+  export const Component: React.FC<ComponentProps>;
+
+  export const Component2: React.FC;
+}