Stateless Components

src/__tests__/main-test.js

@@ -99,4 +99,81 @@ describe('main', () => {
     `);
   });
 
+  describe('Stateless Component definition: ArrowFunctionExpression', () => {
+    test(`
+      import React, {PropTypes} from "React";
+
+      /**
+        * Example component description
+        */
+      let Component = props => <div />;
+      Component.displayName = 'ABC';
+      Component.defaultProps = {
+          foo: true
+      };
+
+      Component.propTypes = {
+        /**
+        * Example prop description
+        */
+        foo: PropTypes.bool
+      };
+
+      export default Component;
+    `);
+  });
+
+  describe('Stateless Component definition: FunctionDeclaration', () => {
+    test(`
+      import React, {PropTypes} from "React";
+
+      /**
+      * Example component description
+      */
+      function Component (props) {
+        return <div />;
+      }
+
+      Component.displayName = 'ABC';
+      Component.defaultProps = {
+          foo: true
+      };
+
+      Component.propTypes = {
+        /**
+        * Example prop description
+        */
+        foo: PropTypes.bool
+      };
+
+      export default Component;
+    `);
+  });
+
+  describe('Stateless Component definition: FunctionExpression', () => {
+    test(`
+      import React, {PropTypes} from "React";
+
+      /**
+      * Example component description
+      */
+      let Component = function(props) {
+        return React.createElement('div', null);
+      }
+
+      Component.displayName = 'ABC';
+      Component.defaultProps = {
+          foo: true
+      };
+
+      Component.propTypes = {
+        /**
+        * Example prop description
+        */
+        foo: PropTypes.bool
+      };
+
+      export default Component;
+    `);
+  });
 });

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/resolver/__tests__/findAllComponentDefinitions-test.js

@@ -149,4 +149,46 @@ describe('findAllComponentDefinitions', () => {
     });
   });
 
+  describe('stateless components', () => {
+
+    it('finds stateless components', () => {
+      var source = `
+        import React from 'React';
+        let ComponentA = () => <div />;
+        function ComponentB () { return React.createElement('div', null); }
+        const ComponentC = function(props) { return <div>{props.children}</div>; };
+        var Obj = {
+          component() { if (true) { return <div />; } }
+        };
+      `;
+
+      var result = parse(source);
+      expect(Array.isArray(result)).toBe(true);
+      expect(result.length).toBe(4);
+    });
+
+    it('finds React.createElement, independent of the var name', () => {
+      var source = `
+        import AlphaBetters from 'react';
+        function ComponentA () { return AlphaBetters.createElement('div', null); }
+        function ComponentB () { return 7; }
+      `;
+
+      var result = parse(source);
+      expect(Array.isArray(result)).toBe(true);
+      expect(result.length).toBe(1);
+    });
+
+    it('does not process X.createClass of other modules', () => {
+      var source = `
+        import R from 'FakeReact';
+        const ComponentA = () => R.createElement('div', null);
+      `;
+
+      var result = parse(source);
+      expect(Array.isArray(result)).toBe(true);
+      expect(result.length).toBe(0);
+    });
+  });
+
 });

src/resolver/__tests__/findExportedComponentDefinition-test.js

@@ -106,6 +106,40 @@ describe('findExportedComponentDefinition', () => {
       });
     });
 
+    describe('stateless components', () => {
+
+      it('finds stateless component with JSX', () => {
+        var source = `
+          var React = require("React");
+          var Component = () => <div />;
+          module.exports = Component;
+        `;
+
+        expect(parse(source)).toBeDefined();
+      });
+
+      it('finds stateless components with React.createElement, independent of the var name', () => {
+        var source = `
+          var R = require("React");
+          var Component = () => R.createElement('div', {});
+          module.exports = Component;
+        `;
+
+        expect(parse(source)).toBeDefined();
+      });
+
+      it('does not process X.createElement of other modules', () => {
+        var source = `
+          var R = require("NoReact");
+          var Component = () => R.createElement({});
+          module.exports = Component;
+        `;
+
+        expect(parse(source)).toBeUndefined();
+      });
+
+    });
+
     describe('module.exports = <C>; / exports.foo = <C>;', () => {
 
       describe('React.createClass', () => {
@@ -449,6 +483,75 @@ describe('findExportedComponentDefinition', () => {
         });
       });
 
+      describe.only('stateless components', () => {
+
+        it('finds named exports', () => {
+          var source = `
+            import React from 'React';
+            export var somethingElse = 42,
+              Component = () => <div />;
+          `;
+          var result = parse(source);
+          expect(result).toBeDefined();
+          expect(result.node.type).toBe('ArrowFunctionExpression');
+
+          source = `
+            import React from 'React';
+            export let Component = () => <div />,
+              somethingElse = 42;
+          `;
+          result = parse(source);
+          expect(result).toBeDefined();
+          expect(result.node.type).toBe('ArrowFunctionExpression');
+
+          source = `
+            import React from 'React';
+            export const something = 21,
+              Component = () => <div />,
+              somethingElse = 42;
+          `;
+          result = parse(source);
+          expect(result).toBeDefined();
+          expect(result.node.type).toBe('ArrowFunctionExpression');
+
+          source = `
+            import React from 'React';
+            export var somethingElse = function() {};
+            export let Component = () => <div />
+          `;
+          result = parse(source);
+          expect(result).toBeDefined();
+          expect(result.node.type).toBe('ArrowFunctionExpression');
+        });
+
+        it('errors if multiple components are exported', () => {
+          var source = `
+            import React from 'React';
+            export var ComponentA = () => <div />
+            export var ComponentB = () => <div />
+          `;
+          expect(() => parse(source)).toThrow();
+
+          source = `
+            import React from 'React';
+            export var ComponentA = () => <div />
+            var ComponentB  = () => <div />
+            export {ComponentB};
+          `;
+          expect(() => parse(source)).toThrow();
+        });
+
+        it('accepts multiple definitions if only one is exported', () => {
+          var source = `
+            import React from 'React';
+            var ComponentA  = class extends React.Component {}
+            export var ComponentB = function() { return <div />; };
+          `;
+          var result = parse(source);
+          expect(result).toBeDefined();
+          expect(result.node.type).toBe('FunctionExpression');
+        });
+      });
     });
 
     describe('export {<C>};', () => {
@@ -566,6 +669,65 @@ describe('findExportedComponentDefinition', () => {
 
       });
 
+      describe('stateless components', () => {
+
+        it('finds exported specifiers', () => {
+          var source = `
+            import React from 'React';
+            var foo = 42;
+            function Component = () { return <div />; }
+            export {foo, Component};
+          `;
+          var result = parse(source);
+          expect(result).toBeDefined();
+          expect(result.node.type).toBe('ClassExpression');
+
+          source = `
+            import React from 'React';
+            var foo = 42;
+            var Component = () => <div />;
+            export {Component, foo};
+          `;
+          result = parse(source);
+          expect(result).toBeDefined();
+          expect(result.node.type).toBe('ClassExpression');
+
+          source = `
+            import React from 'React';
+            var foo = 42;
+            var baz = 21;
+            var Component = function () { return <div />; }
+            export {foo, Component as bar, baz};
+          `;
+          result = parse(source);
+          expect(result).toBeDefined();
+          expect(result.node.type).toBe('ClassExpression');
+        });
+
+        it('errors if multiple components are exported', () => {
+          var source = `
+            import React from 'React';
+            var ComponentA = () => <div />;
+            function ComponentB() { return <div />; }
+            export {ComponentA as foo, ComponentB};
+          `;
+
+          expect(() => parse(source)).toThrow();
+        });
+
+        it('accepts multiple definitions if only one is exported', () => {
+          var source = `
+            import React from 'React';
+            var ComponentA = () => <div />;
+            var ComponentB = () => <div />;
+            export {ComponentA};
+          `;
+          var result = parse(source);
+          expect(result).toBeDefined();
+          expect(result.node.type).toBe('ArrowFunctionExpression');
+        });
+
+      });
     });
 
     // Only applies to classes

src/resolver/findAllComponentDefinitions.js

@@ -12,6 +12,7 @@
 
 import isReactComponentClass from '../utils/isReactComponentClass';
 import isReactCreateClassCall from '../utils/isReactCreateClassCall';
+import isStatelessComponent from '../utils/isStatelessComponent';
 import normalizeClassDefinition from '../utils/normalizeClassDefinition';
 import resolveToValue from '../utils/resolveToValue';
 
@@ -34,7 +35,19 @@ export default function findAllReactCreateClassCalls(
     return false;
   }
 
+  function statelessVisitor(path) {
+    if (isStatelessComponent(path)) {
+      // TODO: normalizeStatelessDefinition to pick up propTypes
+      definitions.push(path);
+    }
+    return false;
+  }
+
   recast.visit(ast, {
+    visitFunctionDeclaration: statelessVisitor,
+    visitFunctionExpression: statelessVisitor,
+    visitProperty: statelessVisitor,
+    visitArrowFunctionExpression: statelessVisitor,
     visitClassExpression: classVisitor,
     visitClassDeclaration: classVisitor,
     visitCallExpression: function(path) {

src/resolver/findExportedComponentDefinition.js

@@ -12,6 +12,7 @@
 import isExportsOrModuleAssignment from '../utils/isExportsOrModuleAssignment';
 import isReactComponentClass from '../utils/isReactComponentClass';
 import isReactCreateClassCall from '../utils/isReactCreateClassCall';
+import isStatelessComponent from '../utils/isStatelessComponent';
 import normalizeClassDefinition from '../utils/normalizeClassDefinition';
 import resolveExportDeclaration from '../utils/resolveExportDeclaration';
 import resolveToValue from '../utils/resolveToValue';
@@ -24,7 +25,7 @@ function ignore() {
 }
 
 function isComponentDefinition(path) {
-  return isReactCreateClassCall(path) || isReactComponentClass(path);
+  return isReactCreateClassCall(path) || isReactComponentClass(path) || isStatelessComponent(path);
 }
 
 function resolveDefinition(definition, types) {
@@ -37,6 +38,8 @@ function resolveDefinition(definition, types) {
   } else if(isReactComponentClass(definition)) {
     normalizeClassDefinition(definition);
     return definition;
+  } else if (isStatelessComponent(definition)) {
+    return definition;
   }
   return null;
 }
@@ -51,7 +54,7 @@ function resolveDefinition(definition, types) {
  * If a definition is part of the following statements, it is considered to be
  * exported:
  *
- * modules.exports = Defintion;
+ * modules.exports = Definition;
  * exports.foo = Definition;
  * export default Definition;
  * export var Definition = ...;