Stateless Components: the final test?

Author: iamdustan

src/handlers/__tests__/propTypeHandler-test.js

@@ -184,6 +184,16 @@ describe('propTypeHandler', () => {
     );
   });
 
+  describe('stateless component', () => {
+    test(
+      propTypesSrc => template(`
+        var Component = (props) => <div />;
+        Component.propTypes = ${propTypesSrc};
+      `),
+      src => statement(src)
+    );
+  });
+
   it('does not error if propTypes cannot be found', () => {
     var definition = expression('{fooBar: 42}');
     expect(() => propTypeHandler(documentation, definition))

src/utils/getMemberExpressionValuePath.js

@@ -33,9 +33,15 @@ function resolveName(path) {
     return path.get('id', 'name').value
   }
 
-  if (types.FunctionExpression.check(path.node)) {
-    console.log('TODO: handle FunctionExpression');
-    // return path.get('id', 'name').value
+  if (
+    types.FunctionExpression.check(path.node) ||
+    types.ArrowFunctionExpression.check(path.node)
+  ) {
+    if (!types.VariableDeclarator.check(path.parent.node)) {
+      return;
+    }
+
+    return path.parent.get('id', 'name').value;
   }
 
   throw new TypeError(
@@ -57,13 +63,14 @@ export default function getMemberExpressionValuePath(
   variableDefinition: NodePath,
   memberName: string
 ): ?NodePath {
-  if (typeof memberName === 'undefined') return;
-
-
   var localName = resolveName(variableDefinition);
   var program = getRoot(variableDefinition);
 
-  if (!localName) return;
+  if (!localName) {
+    // likely an immediately exported and therefore nameless/anonymous node
+    // passed in
+    return;
+  }
 
   var result;
   recast.visit(program, {

src/utils/getMemberValuePath.js

@@ -23,6 +23,9 @@ var SYNONYMS = {
 };
 
 var LOOKUP_METHOD = {
+  [types.ArrowFunctionExpression.name]: getMemberExpressionValuePath,
+  [types.FunctionExpression.name]: getMemberExpressionValuePath,
+  [types.FunctionDeclaration.name]: getMemberExpressionValuePath,
   [types.VariableDeclaration.name]: getMemberExpressionValuePath,
   [types.ObjectExpression.name]: getPropertyValuePath,
   [types.ClassDeclaration.name]: getClassMemberValuePath,
@@ -33,7 +36,12 @@ function isSupportedDefinitionType({node}) {
   return types.ObjectExpression.check(node) ||
     types.ClassDeclaration.check(node) ||
     types.ClassExpression.check(node) ||
-    types.VariableDeclaration.check(node);
+
+    // potential stateless function component
+    types.VariableDeclaration.check(node) ||
+    types.ArrowFunctionExpression.check(node) ||
+    types.FunctionDeclaration.check(node) ||
+    types.FunctionExpression.check(node);
 }
 
 /**
@@ -55,10 +63,11 @@ export default function getMemberValuePath(
 ): ?NodePath {
   if (!isSupportedDefinitionType(componentDefinition)) {
     throw new TypeError(
-      'Got unsupported definition type. Definition must either be an ' +
-      'ObjectExpression, ClassDeclaration, ClassExpression, or a ' +
-      'VariableDeclaration. Got "' +
-      componentDefinition.node.type + '" instead.'
+      'Got unsupported definition type. Definition must be one of ' +
+      'ObjectExpression, ClassDeclaration, ClassExpression,' +
+      'VariableDeclaration, ArrowFunctionExpression, FunctionExpression, or ' +
+      'FunctionDeclaration. Got "' + componentDefinition.node.type + '" + 
+      'instead.'
     );
   }