Skip to content

Commit a561e62

Browse files
makxcamakxca
committed
[New] forbid-dom-props: Add valueRegex option for forbidden props
Discussion: #3876
1 parent efc021f commit a561e62

File tree

4 files changed

+242
-9
lines changed

4 files changed

+242
-9
lines changed

‎CHANGELOG.md

+4
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,10 @@ This change log adheres to standards from [Keep a CHANGELOG](https://keepachange
1111
* [`no-unknown-property`]: support `onBeforeToggle`, `popoverTarget`, `popoverTargetAction` attributes ([#3865][] @acusti)
1212
* [types] fix types of flat configs ([#3874][] @ljharb)
1313

14+
### Added
15+
* [`forbid-dom-props`]: Add `valueRegex` option for forbidden props ([#3876][] @makxca)
16+
17+
[#3876]: https://github.com/jsx-eslint/eslint-plugin-react/issues/3876
1418
[#3874]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3874
1519
[#3865]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3865
1620

‎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 specific regular expression for prohibited prop values:
5050

5151
```js
5252
{
5353
"propName": "someProp",
5454
"disallowedFor": ["DOMNode", "AnotherDOMNode"],
55+
"valueRegex": "^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', valueRegex: '^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', valueRegex: '^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,37 @@ const DEFAULTS = [];
1818
// Rule Definition
1919
// ------------------------------------------------------------------------------
2020

21+
/** @typedef {{ disallowList: null | string[]; message: null | string; valueRegex: null | RegExp }} 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+
if (typeof tagName === 'undefined') {
37+
return true;
38+
}
39+
40+
return (
41+
!options.disallowList
3242
|| options.disallowList.indexOf(tagName) !== -1
43+
) && (
44+
!options.valueRegex
45+
|| options.valueRegex.test(propValue)
3346
);
3447
}
3548

3649
const messages = {
3750
propIsForbidden: 'Prop "{{prop}}" is forbidden on DOM Nodes',
51+
propIsForbiddenWithValue: 'Prop "{{prop}}" with value "{{propValue}}" is forbidden on DOM Nodes',
3852
};
3953

4054
/** @type {import('eslint').Rule.RuleModule} */
@@ -70,6 +84,9 @@ module.exports = {
7084
type: 'string',
7185
},
7286
},
87+
valueRegex: {
88+
type: 'string',
89+
},
7390
message: {
7491
type: 'string',
7592
},
@@ -91,6 +108,7 @@ module.exports = {
91108
return [propName, {
92109
disallowList: typeof value === 'string' ? null : (value.disallowedFor || null),
93110
message: typeof value === 'string' ? null : value.message,
111+
valueRegex: typeof value.valueRegex === 'string' ? new RegExp(value.valueRegex) : null,
94112
}];
95113
}));
96114

@@ -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 isRegexSpecified = forbid.get(prop).valueRegex !== null;
132+
const message = customMessage || (isRegexSpecified && messages.propIsForbiddenWithValue) || messages.propIsForbidden;
133+
const messageId = !customMessage && ((isRegexSpecified && '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

+161
Original file line numberDiff line numberDiff line change
@@ -112,6 +112,58 @@ ruleTester.run('forbid-dom-props', rule, {
112112
},
113113
],
114114
},
115+
{
116+
code: `
117+
const First = (props) => (
118+
<Foo someProp="someValue" />
119+
);
120+
`,
121+
options: [
122+
{
123+
forbid: [
124+
{
125+
propName: 'someProp',
126+
valueRegex: '^someValue$',
127+
},
128+
],
129+
},
130+
],
131+
},
132+
{
133+
code: `
134+
const First = (props) => (
135+
<div someProp="value" />
136+
);
137+
`,
138+
options: [
139+
{
140+
forbid: [
141+
{
142+
propName: 'someProp',
143+
valueRegex: '^someValue$',
144+
},
145+
],
146+
},
147+
],
148+
},
149+
{
150+
code: `
151+
const First = (props) => (
152+
<div someProp="someValue" />
153+
);
154+
`,
155+
options: [
156+
{
157+
forbid: [
158+
{
159+
propName: 'someProp',
160+
valueRegex: '^someValue$',
161+
disallowedFor: ['span'],
162+
},
163+
],
164+
},
165+
],
166+
},
115167
]),
116168

117169
invalid: parsers.all([
@@ -191,6 +243,57 @@ ruleTester.run('forbid-dom-props', rule, {
191243
},
192244
],
193245
},
246+
{
247+
code: `
248+
const First = (props) => (
249+
<span otherProp="bar" />
250+
);
251+
`,
252+
options: [
253+
{
254+
forbid: [
255+
{
256+
propName: 'otherProp',
257+
disallowedFor: ['span'],
258+
},
259+
],
260+
},
261+
],
262+
errors: [
263+
{
264+
messageId: 'propIsForbidden',
265+
data: { prop: 'otherProp' },
266+
line: 3,
267+
column: 17,
268+
type: 'JSXAttribute',
269+
},
270+
],
271+
},
272+
{
273+
code: `
274+
const First = (props) => (
275+
<div someProp="someValue" />
276+
);
277+
`,
278+
options: [
279+
{
280+
forbid: [
281+
{
282+
propName: 'someProp',
283+
valueRegex: '^someValue$',
284+
},
285+
],
286+
},
287+
],
288+
errors: [
289+
{
290+
messageId: 'propIsForbiddenWithValue',
291+
line: 3,
292+
column: 16,
293+
type: 'JSXAttribute',
294+
},
295+
],
296+
},
194297
{
195298
code: `
196299
const First = (props) => (
@@ -324,5 +427,63 @@ ruleTester.run('forbid-dom-props', rule, {
324427
},
325428
],
326429
},
430+
{
431+
code: `
432+
const First = (props) => (
433+
<div className="foo">
434+
<input className="boo" />
435+
<span className="foobar">Foobar</span>
436+
<div otherProp="bar" />
437+
<p thirdProp="bar" />
438+
<div thirdProp="baz" />
439+
<p thirdProp="baz" />
440+
</div>
441+
);
442+
`,
443+
options: [
444+
{
445+
forbid: [
446+
{
447+
propName: 'className',
448+
disallowedFor: ['div', 'span'],
449+
message: 'Please use class instead of ClassName',
450+
},
451+
{ propName: 'otherProp', message: 'Avoid using otherProp' },
452+
{
453+
propName: 'thirdProp',
454+
disallowedFor: ['p'],
455+
valueRegex: '^baz$',
456+
message: 'Do not use thirdProp with value baz on p',
457+
},
458+
],
459+
},
460+
],
461+
errors: [
462+
{
463+
message: 'Please use class instead of ClassName',
464+
line: 3,
465+
column: 16,
466+
type: 'JSXAttribute',
467+
},
468+
{
469+
message: 'Please use class instead of ClassName',
470+
line: 5,
471+
column: 19,
472+
type: 'JSXAttribute',
473+
},
474+
{
475+
message: 'Avoid using otherProp',
476+
line: 6,
477+
column: 18,
478+
type: 'JSXAttribute',
479+
},
480+
{
481+
message: 'Do not use thirdProp with value baz on p',
482+
line: 9,
483+
column: 16,
484+
type: 'JSXAttribute',
485+
},
486+
],
487+
},
327488
]),
328489
});

0 commit comments

Comments
 (0)