Add support for Flow annotations on stateless components (fixes #467)

Author: yannickcr

lib/rules/prop-types.js

@@ -61,7 +61,7 @@ module.exports = Components.detect(function(context, components, utils) {
    * @param {ASTNode} node The AST node being checked.
    * @returns {Boolean} True if the node is a type annotated props declaration, false if not.
    */
-  function isAnnotatedPropsDeclaration(node) {
+  function isAnnotatedClassPropsDeclaration(node) {
     if (node && node.type === 'ClassProperty') {
       var tokens = context.getFirstTokens(node, 2);
       if (
@@ -76,6 +76,26 @@ module.exports = Components.detect(function(context, components, utils) {
     return false;
   }
 
+   /**
+    * Checks if we are declaring a `props` argument with a flow type annotation.
+    * @param {ASTNode} node The AST node being checked.
+    * @returns {Boolean} True if the node is a type annotated props declaration, false if not.
+    */
+  function isAnnotatedFunctionPropsDeclaration(node) {
+    if (node && node.params && node.params.length) {
+      var tokens = context.getFirstTokens(node.params[0], 2);
+      if (
+        node.params[0].typeAnnotation && (
+          tokens[0].value === 'props' ||
+          (tokens[1] && tokens[1].value === 'props')
+        )
+      ) {
+        return true;
+      }
+    }
+    return false;
+  }
+
   /**
    * Checks if we are declaring a prop
    * @param {ASTNode} node The AST node being checked.
@@ -719,13 +739,33 @@ module.exports = Components.detect(function(context, components, utils) {
     }
   }
 
+  /**
+   * @param {ASTNode} node We expect either an ArrowFunctionExpression,
+   *   FunctionDeclaration, or FunctionExpression
+   */
+  function markAnnotatedFunctionArgumentsAsDeclared(node) {
+    if (!node.params || !node.params.length || !isAnnotatedFunctionPropsDeclaration(node)) {
+      return;
+    }
+    markPropTypesAsDeclared(node, resolveTypeAnnotation(node.params[0]));
+  }
+
+  /**
+   * @param {ASTNode} node We expect either an ArrowFunctionExpression,
+   *   FunctionDeclaration, or FunctionExpression
+   */
+  function handleStatelessComponent(node) {
+    markDestructuredFunctionArgumentsAsUsed(node);
+    markAnnotatedFunctionArgumentsAsDeclared(node);
+  }
+
   // --------------------------------------------------------------------------
   // Public
   // --------------------------------------------------------------------------
 
   return {
     ClassProperty: function(node) {
-      if (isAnnotatedPropsDeclaration(node)) {
+      if (isAnnotatedClassPropsDeclaration(node)) {
         markPropTypesAsDeclared(node, resolveTypeAnnotation(node));
       } else if (isPropTypesDeclaration(node)) {
         markPropTypesAsDeclared(node, node.value);
@@ -745,11 +785,11 @@ module.exports = Components.detect(function(context, components, utils) {
       markPropTypesAsUsed(node);
     },
 
-    FunctionDeclaration: markDestructuredFunctionArgumentsAsUsed,
+    FunctionDeclaration: handleStatelessComponent,
 
-    ArrowFunctionExpression: markDestructuredFunctionArgumentsAsUsed,
+    ArrowFunctionExpression: handleStatelessComponent,
 
-    FunctionExpression: markDestructuredFunctionArgumentsAsUsed,
+    FunctionExpression: handleStatelessComponent,
 
     MemberExpression: function(node) {
       var type;

tests/lib/rules/prop-types.js

@@ -1108,6 +1108,43 @@ ruleTester.run('prop-types', rule, {
         '}'
       ].join('\n'),
       parserOptions: parserOptions
+    }, {
+      // Flow annotations on stateless components
+      code: [
+        'type Props = {',
+        '  firstname: string;',
+        '  lastname: string;',
+        '};',
+        'function Hello(props: Props): React.Element {',
+        '  const {firstname, lastname} = props;',
+        '  return <div>Hello {firstname} {lastname}</div>',
+        '}'
+      ].join('\n'),
+      parser: 'babel-eslint'
+    }, {
+      code: [
+        'type Props = {',
+        '  firstname: string;',
+        '  lastname: string;',
+        '};',
+        'const Hello = function(props: Props): React.Element {',
+        '  const {firstname, lastname} = props;',
+        '  return <div>Hello {firstname} {lastname}</div>',
+        '}'
+      ].join('\n'),
+      parser: 'babel-eslint'
+    }, {
+      code: [
+        'type Props = {',
+        '  firstname: string;',
+        '  lastname: string;',
+        '};',
+        'const Hello = (props: Props): React.Element => {',
+        '  const {firstname, lastname} = props;',
+        '  return <div>Hello {firstname} {lastname}</div>',
+        '}'
+      ].join('\n'),
+      parser: 'babel-eslint'
     }
   ],