Skip to content

Commit 1fcd0eb

Browse files
makxcamakxca
committed
[New] forbid-dom-props: Add disallowedValues option for forbidden props
Discussion: #3876
1 parent e6b5b41 commit 1fcd0eb

File tree

4 files changed

+268
-9
lines changed

4 files changed

+268
-9
lines changed

‎CHANGELOG.md

+5
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,11 @@ This change log adheres to standards from [Keep a CHANGELOG](https://keepachange
77

88
## Unreleased
99

10+
### Added
11+
* [`forbid-dom-props`]: Add `disallowedValues` option for forbidden props ([#3876][] @makxca)
12+
13+
[#3876]: https://github.com/jsx-eslint/eslint-plugin-react/issues/3876
14+
1015
## [7.37.4] - 2025.01.12
1116

1217
### Fixed

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

+47-2
Original file line numberDiff line numberDiff line change
@@ -44,18 +44,63 @@ Examples of **correct** code for this rule:
4444

4545
### `forbid`
4646

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

5151
```js
5252
{
5353
"propName": "someProp",
5454
"disallowedFor": ["DOMNode", "AnotherDOMNode"],
55+
"disallowedValues": ["someValue"],
5556
"message": "Avoid using someProp"
5657
}
5758
```
5859

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

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

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

+30-7
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

+186
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)