Handle class properties with function values as methods (fixes #182)

Author: fkling

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

@@ -191,3 +191,59 @@ Object {
   ],
 }
 `;
+
+exports[`main fixtures processes component "component_10.js" without errors 1`] = `
+Object {
+  "description": "React component that display current time at current location.",
+  "methods": Array [
+    Object {
+      "description": "Update clock state with new time",
+      "docblock": "Update clock state with new time",
+      "modifiers": Array [],
+      "name": "updateClock",
+      "params": Array [],
+      "returns": null,
+    },
+    Object {
+      "description": "Parse current Date object",
+      "docblock": "Parse current Date object
+
+@returns {Object} currentTime
+   @returns {int} currentTime.hour
+   @returns {int} currentTime.minutes
+   @returns {string} currentTime.ampm \"am\" or \"pm\"
+   @returns {string} currentTime.dayOfWeek
+   @returns {string} currentTime.month
+   @returns {int} currentTime.date",
+      "modifiers": Array [],
+      "name": "getTime",
+      "params": Array [],
+      "returns": Object {
+        "description": "currentTime",
+        "type": Object {
+          "name": "Object",
+        },
+      },
+    },
+    Object {
+      "description": "Update current clock for every 1 second",
+      "docblock": "Update current clock for every 1 second",
+      "modifiers": Array [],
+      "name": "setTimer",
+      "params": Array [],
+      "returns": null,
+    },
+  ],
+  "props": Object {
+    "title": Object {
+      "description": "A text display current\'s user identity,
+ \"Nobody\" if no one is detected in the background,
+ \"Hi, ..name\" if an user is detected",
+      "required": false,
+      "type": Object {
+        "name": "string",
+      },
+    },
+  },
+}
+`;

src/__tests__/fixtures/component_10.js

@@ -0,0 +1,122 @@
+/**
+ * Test for documentation of "arrow function methods."
+ */
+
+import React, { Component } from 'react';
+import styled from 'styled-components';
+
+/**
+ * React component that display current time at current location.
+ */
+class Clock extends Component {
+
+	constructor(props){
+		super(props);
+		const currentTime = new Date();
+		this.state = this.getTime();
+	}
+
+	componentDidMount() {
+		this.setTimer();
+	}
+
+	componentWillUnmount(){
+		// Avoiding timeout still runs when component is unmounted
+		if (this.timeOut) {
+			clearTimeout(this.timeOut);
+		}
+	}
+
+	/**
+	 * Update clock state with new time
+	 *
+	 */
+	updateClock = () => {
+		const currentTime = this.getTime();
+		this.setState(currentTime);
+		this.setTimer();
+	}
+
+	/**
+	 * Parse current Date object
+	 *
+	 * @returns {Object} currentTime
+	 *    @returns {int} currentTime.hour
+	 *    @returns {int} currentTime.minutes
+	 *    @returns {string} currentTime.ampm "am" or "pm"
+	 *    @returns {string} currentTime.dayOfWeek
+	 *    @returns {string} currentTime.month
+	 *    @returns {int} currentTime.date
+	 */
+	getTime = () => {
+		const dateObject = new Date();
+		const dateString = dateObject.toDateString().split(" ");
+		const currentTime = {
+			hours: dateObject.getHours(),
+			minutes: dateObject.getMinutes(),
+			seconds: dateObject.getSeconds(),
+			ampm: dateObject.getHours() >= 12 ? 'pm' : 'am',
+			dayOfWeek: dateString[0],
+			month: dateString[1],
+			date: dateString[2]
+		};
+
+		return currentTime;
+	}
+
+	/**
+	 * Update current clock for every 1 second
+	 *
+	 */
+	setTimer = () => {
+		this.timeOut = setTimeout(()=> {
+			this.updateClock()
+		}, 1000);
+	}
+
+	render(){
+		const {
+			hours,
+			minutes,
+			seconds,
+			ampm,
+			dayOfWeek,
+			month,
+			date
+		} = this.state;
+
+		const ClockContainer = styled.div`
+		color: #fff;
+		font-size: xx-large;
+		float: right;
+		top: 1em;
+		position: relative;
+		`;
+
+		return(
+			<ClockContainer>
+			{ this.props.title } <br />
+			{ dayOfWeek }, { month } { date } <br/>
+			{
+				hours == 0 ? 12 :
+				(hours >12) ? hours - 12 : hours
+			}: {
+				minutes > 9 ? minutes: `0${minutes}`
+			}: {
+				seconds > 9 ? seconds: `0${seconds}`
+			} {ampm} <br/>
+
+			</ClockContainer>
+		);
+	}
+}
+
+Clock.propTypes = {
+	/** A text display current's user identity,
+	 *  "Nobody" if no one is detected in the background,
+	 *  "Hi, ..name" if an user is detected
+	 */
+	title: React.PropTypes.string
+}
+
+export default Clock;

src/handlers/__tests__/componentMethodsHandler-test.js

@@ -26,24 +26,39 @@ describe('componentMethodsHandler', () => {
 
   function test(definition) {
     componentMethodsHandler(documentation, definition);
-    expect(documentation.methods).toEqual([{
-      name: 'foo',
-      docblock: 'The foo method',
-      modifiers: [],
-      returns: {
-        type: {name: 'number'},
+    expect(documentation.methods).toEqual([
+      {
+        name: 'foo',
+        docblock: 'The foo method',
+        modifiers: [],
+        returns: {
+          type: {name: 'number'},
+        },
+        params: [{
+          name: 'bar',
+          type: {name: 'number'},
+        }],
+      },
+      {
+        name: 'baz',
+        docblock: '"arrow function method"',
+        modifiers: [],
+        returns: {
+          type: {name: 'string'},
+        },
+        params: [{
+          name: 'foo',
+          type: {name: 'string'},
+        }],
       },
-      params: [{
+      {
         name: 'bar',
-        type: {name: 'number'},
-      }],
-    }, {
-      name: 'bar',
-      docblock: 'Static function',
-      modifiers: ['static'],
-      returns: null,
-      params: [],
-    }]);
+        docblock: 'Static function',
+        modifiers: ['static'],
+        returns: null,
+        params: [],
+      },
+    ]);
   }
 
   it('extracts the documentation for an ObjectExpression', () => {
@@ -55,6 +70,10 @@ describe('componentMethodsHandler', () => {
         foo(bar: number): number {
           return bar;
         },
+        /**
+         * "arrow function method"
+         */
+        baz: (foo: string): string => {},
         statics: {
           /**
            * Static function
@@ -84,6 +103,11 @@ describe('componentMethodsHandler', () => {
           return bar;
         }
 
+        /**
+         * "arrow function method"
+         */
+        baz = (foo: string): string => {};
+
         /**
          * Static function
          */

src/handlers/componentMethodsHandler.js

@@ -20,22 +20,28 @@ import type Documentation from '../Documentation';
 
 const {types: {namedTypes: types}} = recast;
 
-function getMethodsDoc(methodPaths) {
-  const methods = [];
-
-  methodPaths.forEach((methodPath) => {
-    if (isReactComponentMethod(methodPath)) {
-      return;
-    }
-
-    methods.push(getMethodDocumentation(methodPath));
-  });
-
-  return methods;
-}
+/**
+ * The following values/constructs are considered methods:
+ *
+ * - Method declarations in classes (except "constructor" and React lifecycle
+ *   methods
+ * - Public class fields in classes whose value are a functions
+ * - Object properties whose values are functions
+ */
+function isMethod(path) {
+  const isProbablyMethod =
+    (types.MethodDefinition.check(path.node) &&
+     path.node.kind !== 'constructor'
+    ) ||
+    (types.ClassProperty.check(path.node) &&
+     types.Function.check(path.get('value').node)
+    ) ||
+    (types.Property.check(path.node) &&
+     types.Function.check(path.get('value').node)
+    )
+    ;
 
-function isFunctionExpression(path) {
-  return types.FunctionExpression.check(path.get('value').node)
+  return isProbablyMethod && !isReactComponentMethod(path);
 }
 
 /**
@@ -49,24 +55,21 @@ export default function componentMethodsHandler(
   // Extract all methods from the class or object.
   let methodPaths = [];
   if (isReactComponentClass(path)) {
-    methodPaths = path
-      .get('body', 'body')
-      .filter(p => types.MethodDefinition.check(p.node) && p.node.kind !== 'constructor');
+    methodPaths = path.get('body', 'body').filter(isMethod);
   } else if (types.ObjectExpression.check(path.node)) {
-    methodPaths = path.get('properties').filter(isFunctionExpression);
+    methodPaths = path.get('properties').filter(isMethod);
 
     // Add the statics object properties.
     const statics = getMemberValuePath(path, 'statics');
     if (statics) {
       statics.get('properties').each(p => {
-        if (isFunctionExpression(p)) {
+        if (isMethod(p)) {
           p.node.static = true;
           methodPaths.push(p);
         }
       });
     }
   }
 
-  const methods = getMethodsDoc(methodPaths);
-  documentation.set('methods', methods);
+  documentation.set('methods', methodPaths.map(getMethodDocumentation));
 }