Babel Classes

[talltyler]

ES6 classes don't map function names correctly. Every function is named 'value'.

[ctumolosus]

Not sure how you are annotating them but this works for me:

import React from 'react';

/**
 * @class TimerExample
 * @extends {React.Component}
 */
class TimerExample extends React.Component {

    /**
     * Called before our render function. The object that is returned is
     * assigned to `this.state`, so we can use it later.
     * @memberOf TimerExample.prototype
     * @method getInitialState
     * @return {Object}
     */
    getInitialState() {
        return { elapsed: 0 };
    }

    /**
     * Called by React when the component has been rendered on the page. We can
     * set the interval here.
     * @memberOf TimerExample.prototype
     * @method componentDidMount
     */
    componentDidMount() {
        this.timer = setInterval(this.tick, 50);
    }

    /**
     * Called immediately before the component is removed from the page and
     * destroyed. We can clear the interval here.
     * @memberOf TimerExample.prototype
     * @method componentWillUnmount
     */
    componentWillUnmount() {
        clearInterval(this.timer);
    }

    /**
     * Called every 50 ms to update the elapsed counter. Calling setState causes
     * the component to be re-rendered.
     * @memberOf TimerExample.prototype
     * @method tick
     */
    tick() {
        this.setState({elapsed: new Date() - this.props.start});
    }

    render() {
        var elapsed = Math.round(this.state.elapsed / 100);

        // This will give a number with one digit after the decimal dot (xx.x):
        var seconds = (elapsed / 10).toFixed(1);

        // Although we return an entire <p> element, react will smartly update
        // only the changed parts, which contain the seconds variable.
        return <p>This example was started <b>{seconds} seconds</b> ago.</p>;
    }
}

export default TimerExample;

[imyzf]

+1, solved after adding @method.

[ctumolosus]

It's probably not the most elegant solution, but until JSDoc provides support for ES6 there isn't much that can be done. Essentially this plugin is transpiling the ES6 files prior to piping them through JSDoc. The comments are maintained, but JSDoc doesn't know how to grab the method name from the transpiled code. So it needs help.

[reyalpsirc]

This doesn't work with arrow functions?