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

button-has-type: support trivial ternary expressions #2748

Merged
merged 1 commit into from Aug 13, 2020
Merged

button-has-type: support trivial ternary expressions #2748

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
7 changes: 7 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
Expand Up @@ -3,6 +3,13 @@ All notable changes to this project will be documented in this file.
This project adheres to [Semantic Versioning](http://semver.org/).
This change log adheres to standards from [Keep a CHANGELOG](http://keepachangelog.com).

## Unreleased

### Added
* [`button-has-type`]: support trivial ternary expressions ([#2748][] @Hypnosphi)

[#2748]: https://github.com/yannickcr/eslint-plugin-react/pull/2748

## [7.20.6] - 2020.08.12

### Fixed
Expand Down
4 changes: 4 additions & 0 deletions docs/rules/button-has-type.md
View file
Open in desktop
Expand Up @@ -24,12 +24,14 @@ var Hello = <span type="foo">Hello</span>
var Hello = <button type="button">Hello</button>
var Hello = <button type="submit">Hello</button>
var Hello = <button type="reset">Hello</button>
var Hello = <button type={condition ? "button" : "submit"}>Hello</button>

var Hello = React.createElement('span', {}, 'Hello')
var Hello = React.createElement('span', {type: 'foo'}, 'Hello')
var Hello = React.createElement('button', {type: 'button'}, 'Hello')
var Hello = React.createElement('button', {type: 'submit'}, 'Hello')
var Hello = React.createElement('button', {type: 'reset'}, 'Hello')
var Hello = React.createElement('button', {type: condition ? 'button' : 'submit'}, 'Hello')
```

## Rule Options
Expand All @@ -50,8 +52,10 @@ The following patterns are considered errors when using `"react/button-has-type"

```jsx
var Hello = <button type="reset">Hello</button>
var Hello = <button type={condition ? "button" : "reset"}>Hello</button>

var Hello = React.createElement('button', {type: 'reset'}, 'Hello')
var Hello = React.createElement('button', {type: condition ? "button" : "reset"}, 'Hello')
```

## When Not To Use It
Expand Down
37 changes: 31 additions & 6 deletions lib/rules/button-has-type.js
View file
Open in desktop
Expand Up @@ -72,6 +72,13 @@ module.exports = {
});
}

function reportComplex(node) {
context.report({
node,
message: 'The button type attribute must be specified by a static string or a trivial ternary expression'
});
}

function checkValue(node, value) {
const q = (x) => `"${x}"`;
if (!(value in configuration)) {
Expand All @@ -87,6 +94,27 @@ module.exports = {
}
}

function checkExpression(node, expression) {
switch (expression.type) {
case 'Literal':
checkValue(node, expression.value);
return;
case 'TemplateLiteral':
if (expression.expressions.length === 0) {
checkValue(node, expression.quasis[0].value.raw);
} else {
reportComplex(expression);
}
return;
case 'ConditionalExpression':
checkExpression(node, expression.consequent);
checkExpression(node, expression.alternate);
return;
default:
reportComplex(expression);
}
}

return {
JSXElement(node) {
if (node.openingElement.name.name !== 'button') {
Expand All @@ -101,10 +129,7 @@ module.exports = {
}

if (typeProp.value.type === 'JSXExpressionContainer') {
context.report({
node: typeProp,
message: 'The button type attribute must be specified by a static string'
});
checkExpression(node, typeProp.value.expression);
return;
}

Expand All @@ -128,12 +153,12 @@ module.exports = {
const props = node.arguments[1].properties;
const typeProp = props.find((prop) => prop.key && prop.key.name === 'type');

if (!typeProp || typeProp.value.type !== 'Literal') {
if (!typeProp) {
reportMissing(node);
return;
}

checkValue(node, typeProp.value.value);
checkExpression(node, typeProp.value);
}
};
}
Expand Down
121 changes: 118 additions & 3 deletions tests/lib/rules/button-has-type.js
View file
Open in desktop
Expand Up @@ -32,15 +32,30 @@ ruleTester.run('button-has-type', rule, {
{code: '<button type="button"/>'},
{code: '<button type="submit"/>'},
{code: '<button type="reset"/>'},
{code: '<button type={"button"}/>'},
{code: '<button type={\'button\'}/>'},
{code: '<button type={`button`}/>'},
{code: '<button type={condition ? "button" : "submit"}/>'},
{code: '<button type={condition ? \'button\' : \'submit\'}/>'},
{code: '<button type={condition ? `button` : `submit`}/>'},
{
code: '<button type="button"/>',
options: [{reset: false}]
},
{code: 'React.createElement("span")'},
{code: 'React.createElement("span", {type: "foo"})'},
{code: 'React.createElement("button", {type: "button"})'},
{code: 'React.createElement("button", {type: \'button\'})'},
{code: 'React.createElement("button", {type: `button`})'},
{code: 'React.createElement("button", {type: "submit"})'},
{code: 'React.createElement("button", {type: \'submit\'})'},
{code: 'React.createElement("button", {type: `submit`})'},
{code: 'React.createElement("button", {type: "reset"})'},
{code: 'React.createElement("button", {type: \'reset\'})'},
{code: 'React.createElement("button", {type: `reset`})'},
{code: 'React.createElement("button", {type: condition ? "button" : "submit"})'},
{code: 'React.createElement("button", {type: condition ? \'button\' : \'submit\'})'},
{code: 'React.createElement("button", {type: condition ? `button` : `submit`})'},
{
code: 'React.createElement("button", {type: "button"})',
options: [{reset: false}]
Expand Down Expand Up @@ -73,13 +88,31 @@ ruleTester.run('button-has-type', rule, {
{
code: '<button type={foo}/>',
errors: [{
message: 'The button type attribute must be specified by a static string'
message: 'The button type attribute must be specified by a static string or a trivial ternary expression'
}]
},
{
code: '<button type={"foo"}/>',
errors: [{
message: 'The button type attribute must be specified by a static string'
message: '"foo" is an invalid value for button type attribute'
Hypnosphi marked this conversation as resolved.
Show resolved Hide resolved
}]
},
{
code: '<button type={\'foo\'}/>',
errors: [{
message: '"foo" is an invalid value for button type attribute'
}]
},
{
code: '<button type={`foo`}/>',
errors: [{
message: '"foo" is an invalid value for button type attribute'
}]
},
{
code: '<button type={`button${foo}`}/>',
errors: [{
message: 'The button type attribute must be specified by a static string or a trivial ternary expression'
}]
},
{
Expand All @@ -89,12 +122,56 @@ ruleTester.run('button-has-type', rule, {
message: '"reset" is a forbidden value for button type attribute'
}]
},
{
code: '<button type={condition ? "button" : foo}/>',
errors: [{
message: 'The button type attribute must be specified by a static string or a trivial ternary expression'
}]
},
{
code: '<button type={condition ? "button" : "foo"}/>',
errors: [{
message: '"foo" is an invalid value for button type attribute'
}]
},
{
code: '<button type={condition ? "button" : "reset"}/>',
options: [{reset: false}],
errors: [{
message: '"reset" is a forbidden value for button type attribute'
}]
},
{
code: '<button type={condition ? foo : "button"}/>',
errors: [{
message: 'The button type attribute must be specified by a static string or a trivial ternary expression'
}]
},
{
code: '<button type={condition ? "foo" : "button"}/>',
errors: [{
message: '"foo" is an invalid value for button type attribute'
}]
},
{
code: '<button type={condition ? "reset" : "button"}/>',
options: [{reset: false}],
errors: [{
message: '"reset" is a forbidden value for button type attribute'
}]
},
{
code: 'React.createElement("button")',
errors: [{
message: 'Missing an explicit type attribute for button'
}]
},
{
code: 'React.createElement("button", {type: foo})',
errors: [{
message: 'The button type attribute must be specified by a static string or a trivial ternary expression'
}]
},
{
code: 'React.createElement("button", {type: "foo"})',
errors: [{
Expand All @@ -108,6 +185,44 @@ ruleTester.run('button-has-type', rule, {
message: '"reset" is a forbidden value for button type attribute'
}]
},
{
code: 'React.createElement("button", {type: condition ? "button" : foo})',
errors: [{
message: 'The button type attribute must be specified by a static string or a trivial ternary expression'
}]
},
{
code: 'React.createElement("button", {type: condition ? "button" : "foo"})',
errors: [{
message: '"foo" is an invalid value for button type attribute'
}]
},
{
code: 'React.createElement("button", {type: condition ? "button" : "reset"})',
options: [{reset: false}],
errors: [{
message: '"reset" is a forbidden value for button type attribute'
}]
},
{
code: 'React.createElement("button", {type: condition ? foo : "button"})',
errors: [{
message: 'The button type attribute must be specified by a static string or a trivial ternary expression'
}]
},
{
code: 'React.createElement("button", {type: condition ? "foo" : "button"})',
errors: [{
message: '"foo" is an invalid value for button type attribute'
}]
},
{
code: 'React.createElement("button", {type: condition ? "reset" : "button"})',
options: [{reset: false}],
errors: [{
message: '"reset" is a forbidden value for button type attribute'
}]
},
{
code: 'Foo.createElement("button")',
errors: [{
Expand All @@ -122,7 +237,7 @@ ruleTester.run('button-has-type', rule, {
{
code: 'function Button({ type, ...extraProps }) { const button = type; return <button type={button} {...extraProps} />; }',
errors: [{
message: 'The button type attribute must be specified by a static string'
message: 'The button type attribute must be specified by a static string or a trivial ternary expression'
}]
}
]
Expand Down