Skip to content
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.

Sign up for GitHub

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

Jump to bottom

[New] add prefer-exact-props rule #1547

Merged
merged 1 commit into from Aug 9, 2021
Merged

[New] add prefer-exact-props rule #1547

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
125 changes: 64 additions & 61 deletions CHANGELOG.md
View file
Open in desktop
Expand Up @@ -7,6 +7,7 @@ This change log adheres to standards from [Keep a CHANGELOG](http://keepachangel

### Added
* [`jsx-no-useless-fragments`]: add option to allow single expressions in fragments ([#3006][] @mattdarveniza)
* add [`prefer-exact-props`] rule ([#1547][] @jomasti)

### Fixed
* component detection: use `estraverse` to improve component detection ([#2992][] @Wesitos)
Expand All @@ -29,6 +30,7 @@ This change log adheres to standards from [Keep a CHANGELOG](http://keepachangel
[#2998]: https://github.com/yannickcr/eslint-plugin-react/pull/2998
[#2994]: https://github.com/yannickcr/eslint-plugin-react/pull/2994
[#2992]: https://github.com/yannickcr/eslint-plugin-react/pull/2992
[#1547]: https://github.com/yannickcr/eslint-plugin-react/pull/1547

## [7.24.0] - 2021.05.27

Expand Down Expand Up @@ -3304,98 +3306,99 @@ If you're still not using React 15 you can keep the old behavior by setting the

[`react/jsx-runtime`]: https://github.com/yannickcr/eslint-plugin-react/blob/HEAD/index.js#L163-L176

[`boolean-prop-naming`]: docs/rules/boolean-prop-naming.md
[`button-has-type`]: docs/rules/button-has-type.md
[`default-props-match-prop-types`]: docs/rules/default-props-match-prop-types.md
[`destructuring-assignment`]: docs/rules/destructuring-assignment.md
[`display-name`]: docs/rules/display-name.md
[`forbid-component-props`]: docs/rules/forbid-component-props.md
[`forbid-dom-props`]: docs/rules/forbid-dom-props.md
[`forbid-elements`]: docs/rules/forbid-elements.md
[`forbid-foreign-prop-types`]: docs/rules/forbid-foreign-prop-types.md
[`forbid-prop-types`]: docs/rules/forbid-prop-types.md
[`no-array-index-key`]: docs/rules/no-array-index-key.md
[`no-children-prop`]: docs/rules/no-children-prop.md
[`no-danger`]: docs/rules/no-danger.md
[`no-danger-with-children`]: docs/rules/no-danger-with-children.md
[`no-deprecated`]: docs/rules/no-deprecated.md
[`no-did-mount-set-state`]: docs/rules/no-did-mount-set-state.md
[`no-did-update-set-state`]: docs/rules/no-did-update-set-state.md
[`no-direct-mutation-state`]: docs/rules/no-direct-mutation-state.md
[`no-find-dom-node`]: docs/rules/no-find-dom-node.md
[`no-is-mounted`]: docs/rules/no-is-mounted.md
[`no-multi-comp`]: docs/rules/no-multi-comp.md
[`no-render-return-value`]: docs/rules/no-render-return-value.md
[`no-set-state`]: docs/rules/no-set-state.md
[`no-string-refs`]: docs/rules/no-string-refs.md
[`no-unescaped-entities`]: docs/rules/no-unescaped-entities.md
[`no-unknown-property`]: docs/rules/no-unknown-property.md
[`no-unused-prop-types`]: docs/rules/no-unused-prop-types.md
[`no-will-update-set-state`]: docs/rules/no-will-update-set-state.md
[`prefer-es6-class`]: docs/rules/prefer-es6-class.md
[`prefer-stateless-function`]: docs/rules/prefer-stateless-function.md
[`prop-types`]: docs/rules/prop-types.md
[`react-in-jsx-scope`]: docs/rules/react-in-jsx-scope.md
[`require-optimization`]: docs/rules/require-optimization.md
[`require-render-return`]: docs/rules/require-render-return.md
[`self-closing-comp`]: docs/rules/self-closing-comp.md
[`sort-comp`]: docs/rules/sort-comp.md
[`sort-prop-types`]: docs/rules/sort-prop-types.md
[`style-prop-object`]: docs/rules/style-prop-object.md
[`function-component-definition`]: docs/rules/function-component-definition.md
[`jsx-boolean-value`]: docs/rules/jsx-boolean-value.md
[`jsx-child-element-spacing`]: docs/rules/jsx-child-element-spacing.md
[`jsx-closing-bracket-location`]: docs/rules/jsx-closing-bracket-location.md
[`jsx-closing-tag-location`]: docs/rules/jsx-closing-tag-location.md
[`jsx-curly-brace-presence`]: docs/rules/jsx-curly-brace-presence.md
[`jsx-curly-newline`]: docs/rules/jsx-curly-newline.md
[`jsx-curly-spacing`]: docs/rules/jsx-curly-spacing.md
[`jsx-equals-spacing`]: docs/rules/jsx-equals-spacing.md
[`jsx-filename-extension`]: docs/rules/jsx-filename-extension.md
[`jsx-first-prop-new-line`]: docs/rules/jsx-first-prop-new-line.md
[`jsx-fragments`]: docs/rules/jsx-fragments.md
[`jsx-handler-names`]: docs/rules/jsx-handler-names.md
[`jsx-indent`]: docs/rules/jsx-indent.md
[`jsx-indent-props`]: docs/rules/jsx-indent-props.md
[`jsx-indent`]: docs/rules/jsx-indent.md
[`jsx-key`]: docs/rules/jsx-key.md
[`jsx-max-depth`]: docs/rules/jsx-max-depth.md
[`jsx-max-props-per-line`]: docs/rules/jsx-max-props-per-line.md
[`jsx-newline`]: docs/rules/jsx-newline.md
[`jsx-no-bind`]: docs/rules/jsx-no-bind.md
[`jsx-no-comment-textnodes`]: docs/rules/jsx-no-comment-textnodes.md
[`jsx-no-constructed-context-values`]: docs/rules/jsx-no-constructed-context-values.md
[`jsx-no-duplicate-props`]: docs/rules/jsx-no-duplicate-props.md
[`jsx-no-literals`]: docs/rules/jsx-no-literals.md
[`jsx-no-script-url`]: docs/rules/jsx-no-script-url.md
[`jsx-no-target-blank`]: docs/rules/jsx-no-target-blank.md
[`jsx-no-undef`]: docs/rules/jsx-no-undef.md
[`jsx-no-useless-fragment`]: docs/rules/jsx-no-useless-fragment.md
[`jsx-one-expression-per-line`]: docs/rules/jsx-one-expression-per-line.md
[`jsx-pascal-case`]: docs/rules/jsx-pascal-case.md
[`require-default-props`]: docs/rules/require-default-props.md
[`jsx-props-no-multi-spaces`]: docs/rules/jsx-props-no-multi-spaces.md
[`jsx-props-no-spreading`]: docs/rules/jsx-props-no-spreading.md
[`jsx-props-no-spreading`]: docs/rules/jsx-props-no-spreading.md
[`jsx-sort-default-props`]: docs/rules/jsx-sort-default-props.md
[`jsx-sort-prop-types`]: docs/rules/sort-prop-types.md
[`jsx-sort-props`]: docs/rules/jsx-sort-props.md
[`jsx-space-before-closing`]: docs/rules/jsx-space-before-closing.md
[`jsx-tag-spacing`]: docs/rules/jsx-tag-spacing.md
[`jsx-uses-react`]: docs/rules/jsx-uses-react.md
[`jsx-uses-vars`]: docs/rules/jsx-uses-vars.md
[`jsx-wrap-multilines`]: docs/rules/jsx-wrap-multilines.md
[`void-dom-elements-no-children`]: docs/rules/void-dom-elements-no-children.md
[`default-props-match-prop-types`]: docs/rules/default-props-match-prop-types.md
[`no-redundant-should-component-update`]: docs/rules/no-redundant-should-component-update.md
[`jsx-closing-tag-location`]: docs/rules/jsx-closing-tag-location.md
[`no-unused-state`]: docs/rules/no-unused-state.md
[`boolean-prop-naming`]: docs/rules/boolean-prop-naming.md
[`no-typos`]: docs/rules/no-typos.md
[`jsx-sort-prop-types`]: docs/rules/sort-prop-types.md
[`require-extension`]: docs/rules/require-extension.md
[`no-comment-textnodes`]: docs/rules/jsx-no-comment-textnodes.md
[`wrap-multilines`]: docs/rules/jsx-wrap-multilines.md
[`jsx-curly-brace-presence`]: docs/rules/jsx-curly-brace-presence.md
[`jsx-one-expression-per-line`]: docs/rules/jsx-one-expression-per-line.md
[`destructuring-assignment`]: docs/rules/destructuring-assignment.md
[`no-access-state-in-setstate`]: docs/rules/no-access-state-in-setstate.md
[`button-has-type`]: docs/rules/button-has-type.md
[`forbid-dom-props`]: docs/rules/forbid-dom-props.md
[`jsx-child-element-spacing`]: docs/rules/jsx-child-element-spacing.md
[`no-adjacent-inline-elements`]: docs/rules/no-adjacent-inline-elements.md
[`no-array-index-key`]: docs/rules/no-array-index-key.md
[`no-children-prop`]: docs/rules/no-children-prop.md
[`no-comment-textnodes`]: docs/rules/jsx-no-comment-textnodes.md
[`no-danger-with-children`]: docs/rules/no-danger-with-children.md
[`no-danger`]: docs/rules/no-danger.md
[`no-deprecated`]: docs/rules/no-deprecated.md
[`no-did-mount-set-state`]: docs/rules/no-did-mount-set-state.md
[`no-did-update-set-state`]: docs/rules/no-did-update-set-state.md
[`no-direct-mutation-state`]: docs/rules/no-direct-mutation-state.md
[`no-find-dom-node`]: docs/rules/no-find-dom-node.md
[`no-is-mounted`]: docs/rules/no-is-mounted.md
[`no-multi-comp`]: docs/rules/no-multi-comp.md
[`no-redundant-should-component-update`]: docs/rules/no-redundant-should-component-update.md
[`no-render-return-value`]: docs/rules/no-render-return-value.md
[`no-set-state`]: docs/rules/no-set-state.md
[`no-string-refs`]: docs/rules/no-string-refs.md
[`no-this-in-sfc`]: docs/rules/no-this-in-sfc.md
[`jsx-sort-default-props`]: docs/rules/jsx-sort-default-props.md
[`jsx-max-depth`]: docs/rules/jsx-max-depth.md
[`jsx-props-no-multi-spaces`]: docs/rules/jsx-props-no-multi-spaces.md
[`no-typos`]: docs/rules/no-typos.md
[`no-unescaped-entities`]: docs/rules/no-unescaped-entities.md
[`no-unknown-property`]: docs/rules/no-unknown-property.md
[`no-unsafe`]: docs/rules/no-unsafe.md
[`jsx-fragments`]: docs/rules/jsx-fragments.md
[`jsx-props-no-spreading`]: docs/rules/jsx-props-no-spreading.md
[`no-unstable-nested-components`]: docs/rules/no-unstable-nested-components.md
[`no-unused-prop-types`]: docs/rules/no-unused-prop-types.md
[`no-unused-state`]: docs/rules/no-unused-state.md
[`no-will-update-set-state`]: docs/rules/no-will-update-set-state.md
[`prefer-es6-class`]: docs/rules/prefer-es6-class.md
[`prefer-exact-props`]: docs/rules/prefer-exact-props.md
[`prefer-read-only-props`]: docs/rules/prefer-read-only-props.md
[`prefer-stateless-function`]: docs/rules/prefer-stateless-function.md
[`prop-types`]: docs/rules/prop-types.md
[`react-in-jsx-scope`]: docs/rules/react-in-jsx-scope.md
[`require-default-props`]: docs/rules/require-default-props.md
[`require-extension`]: docs/rules/require-extension.md
[`require-optimization`]: docs/rules/require-optimization.md
[`require-render-return`]: docs/rules/require-render-return.md
[`self-closing-comp`]: docs/rules/self-closing-comp.md
[`sort-comp`]: docs/rules/sort-comp.md
[`sort-prop-types`]: docs/rules/sort-prop-types.md
[`state-in-constructor`]: docs/rules/state-in-constructor.md
[`jsx-props-no-spreading`]: docs/rules/jsx-props-no-spreading.md
[`static-property-placement`]: docs/rules/static-property-placement.md
[`jsx-curly-newline`]: docs/rules/jsx-curly-newline.md
[`jsx-no-useless-fragment`]: docs/rules/jsx-no-useless-fragment.md
[`jsx-no-script-url`]: docs/rules/jsx-no-script-url.md
[`no-adjacent-inline-elements`]: docs/rules/no-adjacent-inline-elements.md
[`function-component-definition`]: docs/rules/function-component-definition.md
[`jsx-newline`]: docs/rules/jsx-newline.md
[`jsx-no-constructed-context-values`]: docs/rules/jsx-no-constructed-context-values.md
[`no-unstable-nested-components`]: docs/rules/no-unstable-nested-components.md
[`style-prop-object`]: docs/rules/style-prop-object.md
[`void-dom-elements-no-children`]: docs/rules/void-dom-elements-no-children.md
[`wrap-multilines`]: docs/rules/jsx-wrap-multilines.md
4 changes: 3 additions & 1 deletion README.md
View file
Open in desktop
Expand Up @@ -53,7 +53,9 @@ You should also specify settings that will be shared across all the plugin rules
// The names of any function used to wrap propTypes, e.g. `forbidExtraProps`. If this isn't set, any propTypes wrapped in a function will be skipped.
"forbidExtraProps",
{"property": "freeze", "object": "Object"},
{"property": "myFavoriteWrapper"}
{"property": "myFavoriteWrapper"},
// for rules that check exact prop wrappers
{"property": "forbidExtraProps", "exact": true}
],
"componentWrapperFunctions": [
// The name of any function used to wrap components, e.g. Mobx `observer` function. If this isn't set, components wrapped by these functions will be skipped.
Expand Down
140 changes: 140 additions & 0 deletions docs/rules/prefer-exact-props.md
View file
Open in desktop
@@ -0,0 +1,140 @@
# Prefer exact proptype definitions (react/prefer-exact-props)

Recommends options to ensure only exact prop definitions are used when writing components. This recommends solutions for PropTypes or for Flow types.

In React, you can define prop types for components using propTypes. Such an example is below:

```jsx
class Foo extends React.Component {
render() {
return <p>{this.props.bar}</p>;
}
}

Foo.propTypes = {
bar: PropTypes.string
};
```

The problem with this is that the consumer of the component could still pass in extra props. There could even be a typo for expected props. In order to prevent those situations, one could use the npm package [prop-types-exact](https://www.npmjs.com/package/prop-types-exact) to warn when unexpected props are passed to the component.

One can also define props for a component using Flow types. Such an example is below:

```jsx
class Foo extends React.Component {
props: {
bar: string
}

render() {
return <p>{this.props.bar}</p>;
}
}
```

In this case, one could instead enforce only the exact props being used by using exact type objects, like below:

```jsx
class Foo extends React.Component {
props: {|
bar: string
}|

render() {
return <p>{this.props.bar}</p>;
}
}
```

See the [Flow docs](https://flow.org/en/docs/types/objects/#toc-exact-object-types) on exact object types for more information.

## Rule Details

This rule will only produce errors for prop types when combined with the appropriate entries in `propWrapperFunctions`. For example:

```json
{
"settings": {
"propWrapperFunctions": [
{"property": "exact", "exact": true}
]
}
}
```

The following patterns are considered warnings:

```jsx
class Component extends React.Component {
render() {
return <div />;
}
}
Component.propTypes = {
foo: PropTypes.string
};
```

```jsx
class Component extends React.Component {
static propTypes = {
foo: PropTypes.string
}
render() {
return <div />;
}
}
```

```jsx
class Component extends React.Component {
props: {
foo: string
}
render() {
return <div />;
}
}
```

```jsx
function Component(props: { foo: string }) {
return <div />;
}
```

```jsx
type Props = {
foo: string
}
function Component(props: Props) {
return <div />;
}
```

The following patterns are **not** considered warnings:

```jsx
type Props = {|
foo: string
|}
function Component(props: Props) {
return <div />;
}
```

```jsx
import exact from 'prop-types-exact';
jomasti marked this conversation as resolved.
Show resolved Hide resolved
class Component extends React.Component {
render() {
return <div />;
}
}
Component.propTypes = exact({
foo: PropTypes.string
});
```

## When Not To Use It

If you aren't concerned about extra props being passed to a component or potential spelling errors for existing props aren't a common nuisance, then you can leave this rule off.
1 change: 1 addition & 0 deletions index.js
View file
Open in desktop
Expand Up @@ -81,6 +81,7 @@ const allRules = {
'no-unused-state': require('./lib/rules/no-unused-state'),
'no-will-update-set-state': require('./lib/rules/no-will-update-set-state'),
'prefer-es6-class': require('./lib/rules/prefer-es6-class'),
'prefer-exact-props': require('./lib/rules/prefer-exact-props'),
'prefer-read-only-props': require('./lib/rules/prefer-read-only-props'),
'prefer-stateless-function': require('./lib/rules/prefer-stateless-function'),
'prop-types': require('./lib/rules/prop-types'),
Expand Down