-
-
Notifications
You must be signed in to change notification settings - Fork 2.8k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
a944aa5
commit e0f2872
Showing
6 changed files
with
170 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,25 @@ | ||
# Disallow JSX prop spreading the same expression multiple times (`react/jsx-props-no-spread-multi`) | ||
|
||
<!-- end auto-generated rule header --> | ||
|
||
Enforces that any unique express is only spread once. Generally spreading the same expression twice is an indicator of a mistake since any attribute between the spreads may be overridden when | ||
the intent was not to. Even when that is not the case this will lead to unnecessary computations to be performed. | ||
|
||
## Rule Details | ||
|
||
Examples of **incorrect** code for this rule: | ||
|
||
```jsx | ||
<App {...props} myAttr="1" {...props} /> | ||
``` | ||
|
||
Examples of **correct** code for this rule: | ||
|
||
```jsx | ||
<App myAttr="1" {...props} /> | ||
<App {...props} myAttr="1" /> | ||
``` | ||
|
||
## When Not To Use It | ||
|
||
When spreading the same expression yields different values. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,63 @@ | ||
/** | ||
* @fileoverview Prevent JSX prop spreading the same expression multiple times | ||
* @author Simon Schick | ||
*/ | ||
|
||
'use strict'; | ||
|
||
const docsUrl = require('../util/docsUrl'); | ||
const report = require('../util/report'); | ||
|
||
// ------------------------------------------------------------------------------ | ||
// Rule Definition | ||
// ------------------------------------------------------------------------------ | ||
|
||
const messages = { | ||
noMultiSpreading: 'Spreading the same expression multiple times is forbidden', | ||
}; | ||
|
||
const ignoredAstProperties = new Set(['parent', 'range', 'loc', 'start', 'end', '_babelType']); | ||
|
||
/** | ||
* Filter for JSON.stringify that omits circular and position structures. | ||
* | ||
* @param {string} key | ||
* @param {*} value | ||
* @returns {*} | ||
*/ | ||
const propertyFilter = (key, value) => (ignoredAstProperties.has(key) ? undefined : value); | ||
|
||
module.exports = { | ||
meta: { | ||
docs: { | ||
description: 'Disallow JSX prop spreading the same expression multiple times', | ||
category: 'Best Practices', | ||
recommended: false, | ||
url: docsUrl('jsx-props-no-spread-multi'), | ||
}, | ||
messages, | ||
}, | ||
|
||
create(context) { | ||
return { | ||
JSXOpeningElement(node) { | ||
const spreads = node.attributes.filter((attr) => attr.type === 'JSXSpreadAttribute'); | ||
if (spreads.length < 2) { | ||
return; | ||
} | ||
// We detect duplicate expressions by hashing the ast nodes | ||
const argumentHashes = new Set(); | ||
for (const spread of spreads) { | ||
// TODO: Deep compare ast function? | ||
const hash = JSON.stringify(spread.argument, propertyFilter); | ||
if (argumentHashes.has(hash)) { | ||
report(context, messages.noMultiSpreading, 'noMultiSpreading', { | ||
node: spread, | ||
}); | ||
} | ||
argumentHashes.add(hash); | ||
} | ||
}, | ||
}; | ||
}, | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,78 @@ | ||
/** | ||
* @fileoverview Tests for jsx-props-no-spread-multi | ||
*/ | ||
|
||
'use strict'; | ||
|
||
// ----------------------------------------------------------------------------- | ||
// Requirements | ||
// ----------------------------------------------------------------------------- | ||
|
||
const RuleTester = require('eslint').RuleTester; | ||
const rule = require('../../../lib/rules/jsx-props-no-spread-multi'); | ||
|
||
const parsers = require('../../helpers/parsers'); | ||
|
||
const parserOptions = { | ||
ecmaVersion: 2018, | ||
sourceType: 'module', | ||
ecmaFeatures: { | ||
jsx: true, | ||
}, | ||
}; | ||
|
||
// ----------------------------------------------------------------------------- | ||
// Tests | ||
// ----------------------------------------------------------------------------- | ||
|
||
const ruleTester = new RuleTester({ parserOptions }); | ||
const expectedError = { messageId: 'noMultiSpreading' }; | ||
|
||
ruleTester.run('jsx-props-no-spread-multi', rule, { | ||
valid: parsers.all([ | ||
{ | ||
code: ` | ||
const a = {}; | ||
<App {...a} /> | ||
`, | ||
}, | ||
{ | ||
code: ` | ||
const a = {}; | ||
const b = {}; | ||
<App {...a} {...b} /> | ||
`, | ||
}, | ||
]), | ||
|
||
invalid: parsers.all([ | ||
{ | ||
code: ` | ||
const props = {}; | ||
<App {...props} {...props} /> | ||
`, | ||
errors: [expectedError], | ||
}, | ||
{ | ||
code: ` | ||
const props = {}; | ||
<div {...props} a="a" {...props} /> | ||
`, | ||
errors: [expectedError], | ||
}, | ||
{ | ||
code: ` | ||
const props = {}; | ||
<div {...props} {...props} {...props} /> | ||
`, | ||
errors: [expectedError, expectedError], | ||
}, | ||
{ | ||
code: ` | ||
const func = () => ({}); | ||
<div {...func()} {...func()} /> | ||
`, | ||
errors: [expectedError], | ||
}, | ||
]), | ||
}); |