Skip to content

Commit dede8e9

Browse files
makxcaljharb
makxca
authored and
ljharb
committed
[New] forbid-dom-props: Add disallowedValues option for forbidden props
Closes #3876
1 parent 8501c29 commit dede8e9

4 files changed

Lines changed: 266 additions & 10 deletions

File tree

‎CHANGELOG.md‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ This change log adheres to standards from [Keep a CHANGELOG](https://keepachange
1313
* [`jsx-no-leaked-render`]: add `ignoreAttributes` option ([#3441][] @aleclarson)
1414
* [`jsx-sort-props`]: add `sortFirst` option ([#3965][] @loderunner)
1515
* [`jsx-no-literals`]: add `restrictedAttributes` option ([#3950][] @ushiboy)
16+
* [`forbid-dom-props`]: Add `disallowedValues` option for forbidden props ([#3877][] @makxca)
1617

1718
### Fixed
1819
* [`no-unknown-property`]: allow `onLoad` on `body` ([#3923][] @DerekStapleton)
@@ -34,8 +35,9 @@ This change log adheres to standards from [Keep a CHANGELOG](https://keepachange
3435
[#3930]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3930
3536
[#3928]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3928
3637
[#3923]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3923
37-
[#3441]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3441
38+
[#3877]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3877
3839
[#3729]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3729
40+
[#3441]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3441
3941

4042
## [7.37.5] - 2025.04.03
4143

‎docs/rules/forbid-dom-props.md‎

Lines changed: 47 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -46,18 +46,63 @@ Examples of **correct** code for this rule:
4646

4747
### `forbid`
4848

49-
An array of strings, with the names of props that are forbidden. The default value of this option `[]`.
49+
An array of strings, with the names of props that are forbidden. The default value of this option is `[]`.
5050
Each array element can either be a string with the property name or object specifying the property name, an optional
51-
custom message, and a DOM nodes disallowed list (e.g. `<div />`):
51+
custom message, DOM nodes disallowed list (e.g. `<div />`), and a list of prohibited values:
5252

5353
```js
5454
{
5555
"propName": "someProp",
5656
"disallowedFor": ["DOMNode", "AnotherDOMNode"],
57+
"disallowedValues": ["someValue"],
5758
"message": "Avoid using someProp"
5859
}
5960
```
6061

62+
Example of **incorrect** code for this rule, when configured with `{ forbid: [{ propName: 'someProp', disallowedFor: ['span'] }] }`.
63+
64+
```jsx
65+
const First = (props) => (
66+
<span someProp="bar" />
67+
);
68+
```
69+
70+
Example of **correct** code for this rule, when configured with `{ forbid: [{ propName: 'someProp', disallowedFor: ['span'] }] }`.
71+
72+
```jsx
73+
const First = (props) => (
74+
<div someProp="bar" />
75+
);
76+
```
77+
78+
Examples of **incorrect** code for this rule, when configured with `{ forbid: [{ propName: 'someProp', disallowedValues: ['someValue'] }] }`.
79+
80+
```jsx
81+
const First = (props) => (
82+
<div someProp="someValue" />
83+
);
84+
```
85+
86+
```jsx
87+
const First = (props) => (
88+
<span someProp="someValue" />
89+
);
90+
```
91+
92+
Examples of **correct** code for this rule, when configured with `{ forbid: [{ propName: 'someProp', disallowedValues: ['someValue'] }] }`.
93+
94+
```jsx
95+
const First = (props) => (
96+
<Foo someProp="someValue" />
97+
);
98+
```
99+
100+
```jsx
101+
const First = (props) => (
102+
<div someProp="value" />
103+
);
104+
```
105+
61106
### Related rules
62107

63108
- [forbid-component-props](./forbid-component-props.md)

‎lib/rules/forbid-dom-props.js‎

Lines changed: 30 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -18,23 +18,33 @@ const DEFAULTS = [];
1818
// Rule Definition
1919
// ------------------------------------------------------------------------------
2020

21+
/** @typedef {{ disallowList: null | string[]; message: null | string; disallowedValues: string[] | null }} ForbidMapType */
2122
/**
22-
* @param {Map<string, object>} forbidMap // { disallowList: null | string[], message: null | string }
23+
* @param {Map<string, ForbidMapType>} forbidMap
2324
* @param {string} prop
25+
* @param {string} propValue
2426
* @param {string} tagName
2527
* @returns {boolean}
2628
*/
27-
function isForbidden(forbidMap, prop, tagName) {
29+
function isForbidden(forbidMap, prop, propValue, tagName) {
2830
const options = forbidMap.get(prop);
29-
return options && (
30-
typeof tagName === 'undefined'
31-
|| !options.disallowList
31+
32+
if (!options) {
33+
return false;
34+
}
35+
36+
return (
37+
!options.disallowList
3238
|| options.disallowList.indexOf(tagName) !== -1
39+
) && (
40+
!options.disallowedValues
41+
|| options.disallowedValues.indexOf(propValue) !== -1
3342
);
3443
}
3544

3645
const messages = {
3746
propIsForbidden: 'Prop "{{prop}}" is forbidden on DOM Nodes',
47+
propIsForbiddenWithValue: 'Prop "{{prop}}" with value "{{propValue}}" is forbidden on DOM Nodes',
3848
};
3949

4050
/** @type {import('eslint').Rule.RuleModule} */
@@ -70,6 +80,13 @@ module.exports = {
7080
type: 'string',
7181
},
7282
},
83+
disallowedValues: {
84+
type: 'array',
85+
uniqueItems: true,
86+
items: {
87+
type: 'string',
88+
},
89+
},
7390
message: {
7491
type: 'string',
7592
},
@@ -90,6 +107,7 @@ module.exports = {
90107
const propName = typeof value === 'string' ? value : value.propName;
91108
return [propName, {
92109
disallowList: typeof value === 'string' ? null : (value.disallowedFor || null),
110+
disallowedValues: typeof value === 'string' ? null : (value.disallowedValues || null),
93111
message: typeof value === 'string' ? null : value.message,
94112
}];
95113
}));
@@ -103,17 +121,22 @@ module.exports = {
103121
}
104122

105123
const prop = node.name.name;
124+
const propValue = node.value.value;
106125

107-
if (!isForbidden(forbid, prop, tag)) {
126+
if (!isForbidden(forbid, prop, propValue, tag)) {
108127
return;
109128
}
110129

111130
const customMessage = forbid.get(prop).message;
131+
const isValuesListSpecified = forbid.get(prop).disallowedValues !== null;
132+
const message = customMessage || (isValuesListSpecified && messages.propIsForbiddenWithValue) || messages.propIsForbidden;
133+
const messageId = !customMessage && ((isValuesListSpecified && 'propIsForbiddenWithValue') || 'propIsForbidden');
112134

113-
report(context, customMessage || messages.propIsForbidden, !customMessage && 'propIsForbidden', {
135+
report(context, message, messageId, {
114136
node,
115137
data: {
116138
prop,
139+
propValue,
117140
},
118141
});
119142
},

‎tests/lib/rules/forbid-dom-props.js‎

Lines changed: 186 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -112,6 +112,75 @@ ruleTester.run('forbid-dom-props', rule, {
112112
},
113113
],
114114
},
115+
{
116+
code: `
117+
const First = (props) => (
118+
<div someProp="someValue" />
119+
);
120+
`,
121+
options: [
122+
{
123+
forbid: [
124+
{
125+
propName: 'someProp',
126+
disallowedValues: [],
127+
},
128+
],
129+
},
130+
],
131+
},
132+
{
133+
code: `
134+
const First = (props) => (
135+
<Foo someProp="someValue" />
136+
);
137+
`,
138+
options: [
139+
{
140+
forbid: [
141+
{
142+
propName: 'someProp',
143+
disallowedValues: ['someValue'],
144+
},
145+
],
146+
},
147+
],
148+
},
149+
{
150+
code: `
151+
const First = (props) => (
152+
<div someProp="value" />
153+
);
154+
`,
155+
options: [
156+
{
157+
forbid: [
158+
{
159+
propName: 'someProp',
160+
disallowedValues: ['someValue'],
161+
},
162+
],
163+
},
164+
],
165+
},
166+
{
167+
code: `
168+
const First = (props) => (
169+
<div someProp="someValue" />
170+
);
171+
`,
172+
options: [
173+
{
174+
forbid: [
175+
{
176+
propName: 'someProp',
177+
disallowedValues: ['someValue'],
178+
disallowedFor: ['span'],
179+
},
180+
],
181+
},
182+
],
183+
},
115184
]),
116185

117186
invalid: parsers.all([
@@ -191,6 +260,58 @@ ruleTester.run('forbid-dom-props', rule, {
191260
},
192261
],
193262
},
263+
{
264+
code: `
265+
const First = (props) => (
266+
<span otherProp="bar" />
267+
);
268+
`,
269+
options: [
270+
{
271+
forbid: [
272+
{
273+
propName: 'otherProp',
274+
disallowedFor: ['span'],
275+
},
276+
],
277+
},
278+
],
279+
errors: [
280+
{
281+
messageId: 'propIsForbidden',
282+
data: { prop: 'otherProp' },
283+
line: 3,
284+
column: 17,
285+
type: 'JSXAttribute',
286+
},
287+
],
288+
},
289+
{
290+
code: `
291+
const First = (props) => (
292+
<div someProp="someValue" />
293+
);
294+
`,
295+
options: [
296+
{
297+
forbid: [
298+
{
299+
propName: 'someProp',
300+
disallowedValues: ['someValue'],
301+
},
302+
],
303+
},
304+
],
305+
errors: [
306+
{
307+
messageId: 'propIsForbiddenWithValue',
308+
data: { prop: 'someProp', propValue: 'someValue' },
309+
line: 3,
310+
column: 16,
311+
type: 'JSXAttribute',
312+
},
313+
],
314+
},
194315
{
195316
code: `
196317
const First = (props) => (
@@ -324,5 +445,70 @@ ruleTester.run('forbid-dom-props', rule, {
324445
},
325446
],
326447
},
448+
{
449+
code: `
450+
const First = (props) => (
451+
<div className="foo">
452+
<input className="boo" />
453+
<span className="foobar">Foobar</span>
454+
<div otherProp="bar" />
455+
<p thirdProp="foo" />
456+
<div thirdProp="baz" />
457+
<p thirdProp="bar" />
458+
<p thirdProp="baz" />
459+
</div>
460+
);
461+
`,
462+
options: [
463+
{
464+
forbid: [
465+
{
466+
propName: 'className',
467+
disallowedFor: ['div', 'span'],
468+
message: 'Please use class instead of ClassName',
469+
},
470+
{ propName: 'otherProp', message: 'Avoid using otherProp' },
471+
{
472+
propName: 'thirdProp',
473+
disallowedFor: ['p'],
474+
disallowedValues: ['bar', 'baz'],
475+
message: 'Do not use thirdProp with values bar and baz on p',
476+
},
477+
],
478+
},
479+
],
480+
errors: [
481+
{
482+
message: 'Please use class instead of ClassName',
483+
line: 3,
484+
column: 16,
485+
type: 'JSXAttribute',
486+
},
487+
{
488+
message: 'Please use class instead of ClassName',
489+
line: 5,
490+
column: 19,
491+
type: 'JSXAttribute',
492+
},
493+
{
494+
message: 'Avoid using otherProp',
495+
line: 6,
496+
column: 18,
497+
type: 'JSXAttribute',
498+
},
499+
{
500+
message: 'Do not use thirdProp with values bar and baz on p',
501+
line: 9,
502+
column: 16,
503+
type: 'JSXAttribute',
504+
},
505+
{
506+
message: 'Do not use thirdProp with values bar and baz on p',
507+
line: 10,
508+
column: 16,
509+
type: 'JSXAttribute',
510+
},
511+
],
512+
},
327513
]),
328514
});

0 commit comments

Comments
 (0)