From 752de70860c46b66093cbe115b477abfe010fec7 Mon Sep 17 00:00:00 2001 From: ashbhir Date: Sat, 9 Mar 2019 02:53:22 +0530 Subject: [PATCH] [New] add `jsx-props-no-spreading` --- CHANGELOG.md | 1 + README.md | 1 + docs/rules/jsx-props-no-spreading.md | 109 +++++++++++++++ index.js | 1 + lib/rules/jsx-props-no-spreading.js | 96 +++++++++++++ tests/lib/rules/jsx-props-no-spreading.js | 157 ++++++++++++++++++++++ 6 files changed, 365 insertions(+) create mode 100644 docs/rules/jsx-props-no-spreading.md create mode 100644 lib/rules/jsx-props-no-spreading.js create mode 100644 tests/lib/rules/jsx-props-no-spreading.js diff --git a/CHANGELOG.md b/CHANGELOG.md index 159a8911c4..bd88079c45 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2497,3 +2497,4 @@ If you're still not using React 15 you can keep the old behavior by setting the [`jsx-props-no-multi-spaces`]: docs/rules/jsx-props-no-multi-spaces.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 diff --git a/README.md b/README.md index ed7797bbfb..926a965abd 100644 --- a/README.md +++ b/README.md @@ -172,6 +172,7 @@ Enable the rules that you would like to use. * [react/jsx-fragments](docs/rules/jsx-fragments.md): Enforce shorthand or standard form for React fragments * [react/jsx-pascal-case](docs/rules/jsx-pascal-case.md): Enforce PascalCase for user-defined JSX components * [react/jsx-props-no-multi-spaces](docs/rules/jsx-props-no-multi-spaces.md): Disallow multiple spaces between inline JSX props (fixable) +* [react/jsx-props-no-spreading](docs/rules/jsx-props-no-spreading.md): Disallow JSX props spreading * [react/jsx-sort-default-props](docs/rules/jsx-sort-default-props.md): Enforce default props alphabetical sorting * [react/jsx-sort-props](docs/rules/jsx-sort-props.md): Enforce props alphabetical sorting (fixable) * [react/jsx-space-before-closing](docs/rules/jsx-space-before-closing.md): Validate spacing before closing bracket in JSX (fixable) diff --git a/docs/rules/jsx-props-no-spreading.md b/docs/rules/jsx-props-no-spreading.md new file mode 100644 index 0000000000..bc03b32abc --- /dev/null +++ b/docs/rules/jsx-props-no-spreading.md @@ -0,0 +1,109 @@ +# Disallow JSX props spreading (react/jsx-props-no-spreading) + +Enforces that there is no spreading for any JSX attribute. This enhances readability of code by being more explicit about what props are received by the component. It is also good for maintainability by avoiding passing unintentional extra props and allowing react to emit warnings when invalid HTML props are passed to HTML elements. + +## Rule Details + +The following patterns are considered warnings: + +```jsx + + + +``` + +The following patterns are **not** considered warnings: + +```jsx +const {src, alt} = props; +const {one_prop, two_prop} = otherProps; + +{alt} +``` + + +## Rule Options + +```js +... +"react/jsx-props-no-spreading": [{ + "html": "ignore" / "enforce", + "custom": "ignore" / "enforce", + "exceptions": [] +}] +... +``` + +### html + +`html` set to `ignore` will ignore all html jsx tags like `div`, `img` etc. Default is set to `enforce`. + +The following patterns are **not** considered warnings when `html` is set to `ignore`: + +```jsx + +``` + +The following patterns are still considered warnings: + +```jsx + +``` + +### custom + +`custom` set to `ignore` will ignore all custom jsx tags like `App`, `MyCustomComponent` etc. Default is set to `enforce`. + +The following patterns are **not** considered warnings when `custom` is set to `ignore`: + +```jsx + +``` + +The following patterns are still considered warnings: +```jsx + +``` + +### exceptions + +An "exception" will always flip the resulting html or custom setting for that component - ie, html set to `ignore`, with an exception of `div` will enforce on an `div`; custom set to `enforce` with an exception of `Foo` will ignore `Foo`. + +```js +{ "exceptions": ["Image", "img"] } +``` + +The following patterns are **not** considered warnings: + +```jsx +const {src, alt} = props; + + +``` + +The following patterns are considered warnings: +```jsx + +``` + +```js +{ "html": "ignore", "exceptions": ["MyCustomComponent", "img"] } +``` + +The following patterns are **not** considered warnings: + +```jsx +const {src, alt} = props; +const {one_prop, two_prop} = otherProps; +{alt} + +``` + +The following patterns are considered warnings: +```jsx + +``` + +## When Not To Use It + +If you are not using JSX or have lots of props to be passed or the props spreading is used inside HOC. diff --git a/index.js b/index.js index 9c6746896b..79cf2d997a 100644 --- a/index.js +++ b/index.js @@ -38,6 +38,7 @@ const allRules = { 'jsx-pascal-case': require('./lib/rules/jsx-pascal-case'), 'jsx-fragments': require('./lib/rules/jsx-fragments'), 'jsx-props-no-multi-spaces': require('./lib/rules/jsx-props-no-multi-spaces'), + 'jsx-props-no-spreading': require('./lib/rules/jsx-props-no-spreading'), 'jsx-sort-default-props': require('./lib/rules/jsx-sort-default-props'), 'jsx-sort-props': require('./lib/rules/jsx-sort-props'), 'jsx-space-before-closing': require('./lib/rules/jsx-space-before-closing'), diff --git a/lib/rules/jsx-props-no-spreading.js b/lib/rules/jsx-props-no-spreading.js new file mode 100644 index 0000000000..f8915d8337 --- /dev/null +++ b/lib/rules/jsx-props-no-spreading.js @@ -0,0 +1,96 @@ +/** + * @fileoverview Prevent JSX prop spreading + * @author Ashish Gambhir + */ +'use strict'; + +const docsUrl = require('../util/docsUrl'); + +// ------------------------------------------------------------------------------ +// Constants +// ------------------------------------------------------------------------------ + +const OPTIONS = {ignore: 'ignore', enforce: 'enforce'}; +const DEFAULTS = {html: OPTIONS.enforce, custom: OPTIONS.enforce, exceptions: []}; + +// ------------------------------------------------------------------------------ +// Rule Definition +// ------------------------------------------------------------------------------ + +module.exports = { + meta: { + docs: { + description: 'Prevent JSX prop spreading', + category: 'Best Practices', + recommended: false, + url: docsUrl('jsx-props-no-spreading') + }, + schema: [{ + allOf: [{ + type: 'object', + properties: { + html: { + enum: [OPTIONS.enforce, OPTIONS.ignore] + }, + custom: { + enum: [OPTIONS.enforce, OPTIONS.ignore] + }, + exceptions: { + type: 'array', + items: { + type: 'string', + uniqueItems: true + } + } + } + }, { + not: { + type: 'object', + required: ['html', 'custom'], + properties: { + html: { + enum: [OPTIONS.ignore] + }, + custom: { + enum: [OPTIONS.ignore] + }, + exceptions: { + type: 'array', + minItems: 0, + maxItems: 0 + } + } + } + }] + }] + }, + + create: function (context) { + const configuration = context.options[0] || {}; + const ignoreHtmlTags = (configuration.html || DEFAULTS.html) === OPTIONS.ignore; + const ignoreCustomTags = (configuration.custom || DEFAULTS.custom) === OPTIONS.ignore; + const exceptions = configuration.exceptions || DEFAULTS.exceptions; + const isException = (tag, allExceptions) => allExceptions.indexOf(tag) !== -1; + return { + JSXSpreadAttribute: function (node) { + const tagName = node.parent.name.name; + const isHTMLTag = tagName && tagName[0] !== tagName[0].toUpperCase(); + const isCustomTag = tagName && tagName[0] === tagName[0].toUpperCase(); + if (isHTMLTag && + ((ignoreHtmlTags && !isException(tagName, exceptions)) || + (!ignoreHtmlTags && isException(tagName, exceptions)))) { + return; + } + if (isCustomTag && + ((ignoreCustomTags && !isException(tagName, exceptions)) || + (!ignoreCustomTags && isException(tagName, exceptions)))) { + return; + } + context.report({ + node: node, + message: 'Prop spreading is forbidden' + }); + } + }; + } +}; diff --git a/tests/lib/rules/jsx-props-no-spreading.js b/tests/lib/rules/jsx-props-no-spreading.js new file mode 100644 index 0000000000..ac4f28fffc --- /dev/null +++ b/tests/lib/rules/jsx-props-no-spreading.js @@ -0,0 +1,157 @@ +/** + * @fileoverview Tests for jsx-props-no-spreading + */ +'use strict'; + +// ----------------------------------------------------------------------------- +// Requirements +// ----------------------------------------------------------------------------- + +const rule = require('../../../lib/rules/jsx-props-no-spreading'); +const RuleTester = require('eslint').RuleTester; + +const parserOptions = { + ecmaVersion: 2018, + sourceType: 'module', + ecmaFeatures: { + jsx: true + } +}; + +// ----------------------------------------------------------------------------- +// Tests +// ----------------------------------------------------------------------------- + +const ruleTester = new RuleTester({parserOptions}); +const expectedError = {message: 'Prop spreading is forbidden'}; + +ruleTester.run('jsx-props-no-spreading', rule, { + valid: [{ + code: [ + 'const {one_prop, two_prop} = props;', + '' + ].join('\n') + }, { + code: [ + 'const {one_prop, two_prop} = props;', + '
' + ].join('\n') + }, { + code: [ + 'const newProps = {...props};', + '' + ].join('\n') + }, { + code: [ + 'const props = {src: "dummy.jpg", alt: "dummy"};', + '', + ' ', + ' ', + '' + ].join('\n'), + options: [{exceptions: ['Image', 'img']}] + }, { + code: [ + 'const props = {src: "dummy.jpg", alt: "dummy"};', + 'const { src, alt } = props;', + '', + ' ', + ' {alt}/', + '' + ].join('\n'), + options: [{custom: 'ignore'}] + }, { + code: [ + 'const props = {src: "dummy.jpg", alt: "dummy"};', + 'const { src, alt } = props;', + '', + ' ', + ' ', + '' + ].join('\n'), + options: [{custom: 'enforce', html: 'ignore', exceptions: ['Image']}] + }, { + code: [ + 'const props = {src: "dummy.jpg", alt: "dummy"};', + 'const { src, alt } = props;', + '', + ' ', + ' {alt}/', + '
', + '' + ].join('\n'), + options: [{html: 'ignore'}] + }], + + invalid: [{ + code: [ + '' + ].join('\n'), + errors: [expectedError] + }, { + code: [ + '
' + ].join('\n'), + errors: [expectedError] + }, { + code: [ + '' + ].join('\n'), + errors: [expectedError] + }, { + code: [ + 'const props = {src: "dummy.jpg", alt: "dummy"};', + '', + ' ', + ' ', + '' + ].join('\n'), + options: [{exceptions: ['Image', 'img']}], + errors: [expectedError] + }, { + code: [ + 'const props = {src: "dummy.jpg", alt: "dummy"};', + 'const { src, alt } = props;', + '', + ' ', + ' ', + '' + ].join('\n'), + options: [{custom: 'ignore'}], + errors: [expectedError] + }, { + code: [ + 'const props = {src: "dummy.jpg", alt: "dummy"};', + 'const { src, alt } = props;', + '', + ' ', + ' ', + '' + ].join('\n'), + options: [{html: 'ignore', exceptions: ['Image', 'img']}], + errors: [expectedError] + }, { + code: [ + 'const props = {src: "dummy.jpg", alt: "dummy"};', + 'const { src, alt } = props;', + '', + ' ', + ' ', + '
', + '' + ].join('\n'), + options: [{custom: 'ignore', html: 'ignore', exceptions: ['Image', 'img']}], + errors: [expectedError, expectedError] + }, { + code: [ + 'const props = {src: "dummy.jpg", alt: "dummy"};', + 'const { src, alt } = props;', + '', + ' ', + ' ', + '' + ].join('\n'), + options: [{html: 'ignore'}], + errors: [expectedError] + }] +});