Improve the logic for determining if class is a React component

[gaearon]

Improve the logic for determining if class is a React component

[gajus]

This is how I would implement isComponentClass:

import _ from 'lodash';

let isComponentClass,
    isComponentIdentifier,
    isReactComponentMemberExpression,
    isReactIdentifier,
    isRenderMethod;

/**
 * @param {Object} node
 * @return {Boolean}
 */
isRenderMethod = (node) => {
    return _.every([
        node.kind === 'method',
        node.key.name === 'render'
    ]);
};

/**
 * @param {Object} node
 * @return {Boolean}
 */
isReactIdentifier = (node) => {
    return _.every([
        node.type === 'Identifier',
        node.name === 'React'
    ]);
};

/**
 * @param {Object} node
 * @return {Boolean}
 */
isComponentIdentifier = (node) => {
    return _.every([
        node.type === 'Identifier',
        node.name === 'Component'
    ]);
}

/**
 * Checks if class extends React.Component.
 *
 * @param {Object} node
 * @return {Boolean}
 */
isReactComponentMemberExpression = (node) => {
    return _.every([
        node.type === 'MemberExpression',
        isReactIdentifier(node.object),
        isComponentIdentifier(node.property)
    ]);
};

/**
 * Checks if class has render method and class extends React.Component.
 * 
 * @param {Object} node
 * @return {Boolean}
 */
isComponentClass = (node) => {
    let hasRenderMethod,
        extendsReactComponent;

    hasRenderMethod = Boolean(_.find(node.body.body, isRenderMethod));
    extendsReactComponent = isReactComponentMemberExpression(node.superClass);

    return _.every([
        hasRenderMethod,
        extendsReactComponent
    ]);
};

However, this assumes that class extends React.Component. I know that some people use Component alias (which I think is too generic for checking). However, it is easy to extend this implementation to detect if class extends React.Component or class extends Component.

[gaearon]

Check if class extends Component.
Check if class extends React.Component.

React classes don't have to extend Component. You can check: it works just fine without it. Moreover, people might have custom base classes. (Yes it's a bad idea, but people do that occasionally.)

[gaearon]

On the other hand, people often add extends Component to appease Flow, so we may as well demand the same. This will also discourage people from inheritance which I guess is a net win. Finally, we can make this configurable like #3 describes, with baseClasses: ['React.Component', 'Component'] being default.

[gajus]

Sounds like a good idea. I am still getting my head around how to write Babel plugins. I am in the midst of writing one myself babel-react-plugin-css-modules, which is an experiment to automate react-css-modules even further.

I am happy to own this issue and send a PR in a window of a few days.

[gaearon]

Let's discuss in #8.