New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[new] Add prefer-read-only-props rule #2110

Open
wants to merge 6 commits into
base: master
from

Conversation

4 participants
@drx
Copy link
Contributor

drx commented Jan 3, 2019

This adds a rule to enforce that flow types for props are read-only (covariant). This was requested in #1454 and #1869.

I added a fixer for the rule, which I tested on a decently large codebase at Flexport (5000+ files) with thousands of violations.

One interesting note is that declaredPropTypes doesn't recognize foo in props: $ReadOnly<{foo: bar}> as a prop. In this case that's OK, because that wouldn't give a warning anyway.

Fixes #1454. Fixes #1869.

@ljharb ljharb added the new rule label Jan 3, 2019

@ljharb

This comment has been minimized.

Copy link
Collaborator

ljharb commented Jan 3, 2019

It'd be great if we could separate out the fixes into a separate PR from the new rule.

}

Object.keys(component.declaredPropTypes).forEach(propName => {
const prop = component.declaredPropTypes[propName];

This comment has been minimized.

@alexzherdev

alexzherdev Jan 3, 2019

Contributor

So cool to see the propTypes detection in use 👍

@alexzherdev

This comment has been minimized.

Copy link
Contributor

alexzherdev commented Jan 3, 2019

@drx to clarify this bit:

Worse yet, because declaredPropTypes is an object, those helper properties can overwrite actual props.

Do you mean that if we wrongly detect something as a prop, it can overwrite the metadata for an actual prop with the same name?

drx added some commits Jan 3, 2019

@drx drx force-pushed the drx:master branch from ae0150a to a1deb95 Jan 3, 2019

@drx

This comment has been minimized.

Copy link
Contributor

drx commented Jan 3, 2019

It'd be great if we could separate out the fixes into a separate PR from the new rule.

Done! #2111

@alexzherdev Yeah, if you have something like:

type Props = {
  foo: string,
}

class Hello extends React.Component<Props> {
  renderHelper = ({foo}: {foo: string}) => {
    return <div />;
  }
  render() {
    return <div>{this.props.used}</div>;
  }
}

The metadata (including the loc) might be overwritten by the renderHelper foo, I have had this happen while running fixes which is how I discovered this.

@ljharb ljharb added the flow label Jan 3, 2019

@ljharb

ljharb approved these changes Jan 3, 2019

Copy link
Collaborator

ljharb left a comment

Looks great!

(I'm going to hold off merging it for awhile while the 7.12 release settles down)

@ljharb ljharb requested review from EvHaus and yannickcr Jan 3, 2019

@drx

This comment has been minimized.

Copy link
Contributor

drx commented Jan 3, 2019

Thanks!

@EvHaus

EvHaus approved these changes Jan 4, 2019

Copy link
Collaborator

EvHaus left a comment

LGTM. I'm looking forward to using this one.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment