Support for arrow functions?

[daoanhnhat1995]

When generate docs, arrow functions are not detected.

[fkling]

Can you provide an example of the code, the output you are getting and the output your are expecting?

I suspect this is a duplicate of #147 .

[daoanhnhat1995]

@fkling I was tracing #147 and #137, and tried with installing react-docgen@next. However, results still didn't include my arrow functions.

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;

Result from this doesn't include my functions above:

{
  "description": "React component that display current time at current location.",
  "methods": [],
  "props": {
    "title": {
      "type": {
        "name": "string"
      },
      "required": false,
      "description": "A text display current's user identity,\n \"Nobody\" if no one is detected in the background,\n \"Hi, ..name\" if an user is detected"
    }
  }
}

However, if i change all arrow functions to regular functions, results are expected:

{
  "description": "React component that display current time at current location.\nBy parsing new Date() from browser.",
  "methods": [
    {
      "name": "updateClock",
      "docblock": "Update clock state with new time",
      "modifiers": [],
      "params": [],
      "returns": null,
      "description": "Update clock state with new time"
    },
    {
      "name": "getTime",
      "docblock": "Parse current Date object\n\n@return {Object} currentTime\n@return {int} currentTime.hour\n@return {int} currentTime.minutes\n@return {string} currentTime.ampm \"am\" or \"pm\"\n@return {string} currentTime.dayOfWeek \n@return {string} currentTime.month\n@return {int} currentTime.date",
      "modifiers": [],
      "params": [],
      "returns": {
        "description": "currentTime",
        "type": {
          "name": "Object"
        }
      },
      "description": "Parse current Date object"
    },
    {
      "name": "setTimer",
      "docblock": "Update current clock for every 1 second",
      "modifiers": [],
      "params": [],
      "returns": null,
      "description": "Update current clock for every 1 second"
    }
  ],
  "props": {
    "title": {
      "type": {
        "name": "string"
      },
      "required": false,
      "description": "A text display current's user identity,\n \"Nobody\" if no one is detected in the background,\n \"Hi, ..name\" if an user is detected"
    }
  }
}

[fkling]

Thank you for the info! So you expect those public fields to be listed in methods? That's indeed a different issue. I guess we could detect whether the value resolves to a function and include it if it is.