Add lifecycle methods check to no-typos rule

[haridusenadeera]

no-typos rule currently checks for class properties (defaultProps, childContextTypes etc.) only.

My attempt is to make sure that react lifecycle methods also do not have any casing typos.

The following patterns are considered warnings:

class MyComponent extends React.Component {
  componentwillMount() {}
}

class MyComponent extends React.Component {
  ComponentWillReceiveProps() {}
}

class MyComponent extends React.Component {
  componentdidupdate() {}
}

The following patterns are not considered warnings:

class MyComponent extends React.Component {
  componentWillMount() {}
}

class MyComponent extends React.Component {
  componentWillReceiveProps() {}
}

class MyComponent extends React.Component {
  componentDidUpdate() {}
}

I'm open to improvements to this rule. Thanks!

[jseminck]

Very good, thanks a lot! I was planning on doing this but haven't had time. This is some-what part of this issue: #843 (casing typos would be the first step, further the actual typos can be looked into).

I added a few initial comments.

[jseminck]

I think we should rename the reportErrorIfCasingTypo function as well to contain something like ifClassProperty.

[jseminck]

Do we need the check for utils.isReturningJSX() ? This is used to detect Stateless Function Component, which does not contain user defined lifecycle methods.

[haridusenadeera]

Ahh, I misunderstood the purpose of that util function. I guess we do not need to check for that then.

[jseminck]

I guess we need tests for all lifecycle methods, not just a few.

Additionally, we'll need some valid tests for a class that is not a React component. that can still have any lifecycle method defined with any kind of casing typo.

Lastly, I do not know if we should support this kind of syntax. It seems to work ( https://jsfiddle.net/69z2wepo/82794/ ) but I have never seen anyone do it. @ljharb what do you think of this?

class Hello extends React.Component {
	render() {
  	return <div>Hello {this.props.name}</div>;
  }
}

Hello.prototype.componentDidMount = function() {
  console.log("component has mounted");
}

ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('container')
);

[jseminck]

What about render? Though React already warns about this when running the code, but still having the error show early is nice.

No `render` method found on the returned component instance: you may have forgotten to define `render`.

[haridusenadeera]

Yeah I agree. I will add render method

[haridusenadeera]

Thanks for the quick review! I've made changes according to your comments.

[jseminck]

Looks very good to me. Thanks a lot for the contribution! 🎉

I hope we can get some review from the core maintainers as well. I think it would be great if we could release this together with the initial no-typos rule.

[jseminck]

@haridusenadeera it seems some conflict was created after changes in master. Could you please rebase your changes and fix it? Thanks!

@ljharb could you please assign some of the core contributors as reviewer for this PR? I think it would be great if it can be considered for the next release. Thanks!