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

Allow skipping prop-types validation when not declared #846

Merged
merged 4 commits into from
Oct 1, 2016
Merged

Allow skipping prop-types validation when not declared #846

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
cc5211e
Allow skipping prop-types validation when not declared
pfhayes Sep 16, 2016
01c54d6
Add more tests
pfhayes Sep 17, 2016
4290802
Add one more propTypes test
pfhayes Sep 19, 2016
175ffdf
Style fix
pfhayes Sep 19, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions docs/rules/prop-types.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,6 +109,7 @@ This rule can take one argument to ignore some specific props during validation.
* `enabled`: for enabling the rule. 0=off, 1=warn, 2=error. Defaults to 0.
* `ignore`: optional array of props name to ignore during validation.
* `customValidators`: optional array of validators used for propTypes validation.
* `skipUndeclared`: only error on components that have a propTypes block declared

### As for "exceptions"

Expand Down
9 changes: 7 additions & 2 deletions lib/rules/prop-types.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,9 @@ module.exports = {
items: {
type: 'string'
}
},
skipUndeclared: {
type: 'boolean'
}
},
additionalProperties: false
Expand All @@ -54,6 +57,7 @@ module.exports = {
var configuration = context.options[0] || {};
var ignored = configuration.ignore || [];
var customValidators = configuration.customValidators || [];
var skipUndeclared = configuration.skipUndeclared || false;
// Used to track the type annotations in scope.
// Necessary because babel's scopes do not track type annotations.
var stack = null;
Expand Down Expand Up @@ -134,7 +138,6 @@ module.exports = {
* @returns {Boolean} True if we are declaring a prop, false if not.
*/
function isPropTypesDeclaration(node) {

// Special case for class properties
// (babel-eslint does not expose property name so we have to rely on tokens)
if (node && node.type === 'ClassProperty') {
Expand Down Expand Up @@ -179,10 +182,12 @@ module.exports = {
* @returns {Boolean} True if the component must be validated, false if not.
*/
function mustBeValidated(component) {
var isSkippedByConfig = skipUndeclared && typeof component.declaredPropTypes === 'undefined';
return Boolean(
component &&
component.usedPropTypes &&
!component.ignorePropsValidation
!component.ignorePropsValidation &&
!isSkippedByConfig
);
}

Expand Down
135 changes: 135 additions & 0 deletions tests/lib/rules/prop-types.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1305,6 +1305,62 @@ ruleTester.run('prop-types', rule, {
'}'
].join('\n'),
parser: 'babel-eslint'
}, {
code: [
'var Hello = React.createClass({',
' render: function() {',
' return <div>{this.props.name}</div>;',
' }',
'});'
].join('\n'),
options: [{skipUndeclared: true}],
parserOptions: parserOptions
}, {
code: [
'var Hello = React.createClass({',
' render: function() {',
' return <div>{this.props.name}</div>;',
' }',
'});'
].join('\n'),
options: [{skipUndeclared: true}],
parserOptions: parserOptions
}, {
code: [
'class Hello extends React.Component {',
' render() {',
' return <div>{this.props.name}</div>;',
' }',
'}'
].join('\n'),
options: [{skipUndeclared: true}],
parserOptions: parserOptions
}, {
code: [
'var Hello = React.createClass({',
' propTypes: {',
' name: React.PropTypes.object.isRequired',
' },',
' render: function() {',
' return <div>{this.props.name}</div>;',
' }',
'});'
].join('\n'),
options: [{skipUndeclared: true}],
parserOptions: parserOptions
}, {
code: [
'var Hello = React.createClass({',
' propTypes: {',
' name: React.PropTypes.object.isRequired',
' },',
' render: function() {',
' return <div>{this.props.name}</div>;',
' }',
'});'
].join('\n'),
options: [{skipUndeclared: false}],
parserOptions: parserOptions
}
],

Expand Down Expand Up @@ -2312,6 +2368,85 @@ ruleTester.run('prop-types', rule, {
column: 27,
type: 'Property'
}]
}, {
code: [
'var Hello = React.createClass({',
' propTypes: {},',
' render: function() {',
' return <div>{this.props.firstname}</div>;',
' }',
'});'
].join('\n'),
options: [{skipUndeclared: true}],
parserOptions: parserOptions,
errors: [{
message: '\'firstname\' is missing in props validation',
line: 4,
column: 29
}]
}, {
code: [
'var Hello = function(props) {',
' return <div>{props.firstname}</div>;',
'};',
'Hello.propTypes = {}'
].join('\n'),
options: [{skipUndeclared: true}],
parserOptions: parserOptions,
errors: [{
message: '\'firstname\' is missing in props validation',
line: 2,
column: 22
}]
}, {
code: [
'class Hello extends React.Component {',
' static get propTypes() {',
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

actually this would be static propTypes = () => { - i don't think propTypes is expected to be anything but a data property.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I copied how the other static propTypes were declared in this file. upon closer inspection, this file is inconsistent in how it declares static proptypes. I see three different types:

static get propTypes() {
static propTypes = {
static propTypes: {

do you think I should introduce a fourth type? i'm also happy to consolidate them but I think that is outside the scope of this PR

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, I'm not sure why we have the getter version, and the "fourth" type is in fact the most standard. The third type there isn't actually valid because of the static keyword, but I think you mean its use in React.createClass, which is fine.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's not worry about consolidating them in this PR, but please do add a Hello.propTypes = { … } variant.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

sure thing - I've added that as an additional case

' return {};',
' }',
' render() {',
' return <div>{this.props.firstname}</div>;',
' }',
'}'
].join('\n'),
options: [{skipUndeclared: true}],
parserOptions: parserOptions,
errors: [{
message: '\'firstname\' is missing in props validation',
line: 6,
column: 29
}]
}, {
code: [
'class Hello extends React.Component {',
' render() {',
' return <div>{this.props.firstname}</div>;',
' }',
'}',
'Hello.propTypes = {};'
].join('\n'),
options: [{skipUndeclared: true}],
parserOptions: parserOptions,
errors: [{
message: '\'firstname\' is missing in props validation',
line: 3,
column: 29
}]
}, {
code: [
'var Hello = React.createClass({',
' render: function() {',
' return <div>{this.props.firstname}</div>;',
' }',
'});'
].join('\n'),
options: [{skipUndeclared: false}],
parserOptions: parserOptions,
errors: [{
message: '\'firstname\' is missing in props validation',
line: 3,
column: 29
}]
}
]
});