Skip to content

Commit

Permalink
[New] add allowDataUpperCase option to no-unknown-property rule
Browse files Browse the repository at this point in the history
Fixes #3643
  • Loading branch information
HermanBilous committed Oct 23, 2023
1 parent 9da1bb0 commit 0187bd6
Show file tree
Hide file tree
Showing 3 changed files with 37 additions and 5 deletions.
3 changes: 2 additions & 1 deletion docs/rules/no-unknown-property.md
Original file line number Diff line number Diff line change
Expand Up @@ -51,12 +51,13 @@ var AtomPanel = <atom-panel class="foo"></atom-panel>;

```js
...
"react/no-unknown-property": [<enabled>, { ignore: <ignore> }]
"react/no-unknown-property": [<enabled>, { ignore: <ignore>, allowDataUpperCase: <allowDataUpperCase> }]
...
```

- `enabled`: for enabling the rule. 0=off, 1=warn, 2=error. Defaults to 0.
- `ignore`: optional array of property and attribute names to ignore during validation.
- `allowDataUpperCase`: optional (default: `true`), allow for data-\* attributes to contain upper-case letters. React will issue a warning when data-\* attributes contain upper-case letters. In order to catch such attributes, set `allowDataUpperCase` option to `false`.

If you are using a library that passes something as a prop to JSX elements, it is recommended to add those props to the ignored properties.

Expand Down
23 changes: 19 additions & 4 deletions lib/rules/no-unknown-property.js
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ const report = require('../util/report');

const DEFAULTS = {
ignore: [],
allowDataUpperCase: true,
};

const DOM_ATTRIBUTE_NAMES = {
Expand Down Expand Up @@ -418,15 +419,19 @@ function normalizeAttributeCase(name) {

/**
* Checks if an attribute name is a valid `data-*` attribute:
* if the name starts with "data-" and has alphanumeric words (browsers require lowercase, but React and TS lowercase them),
* if the name starts with "data-" and has alphanumeric words,
* not start with any casing of "xml", and separated by hyphens (-) (which is also called "kebab case" or "dash case"),
* then the attribute is a valid data attribute.
*
* Accepts option to allow upper-case letters (react will lowercase them, but will throw a warning)
*
* @param {String} name - Attribute name to be tested
* @param {Boolean} allowUpperCase - Allow "data-*" to contain upper-case letters
* @returns {boolean} Result
*/
function isValidDataAttribute(name) {
return /^data(-[^:]*)*$/.test(name) && !/^data-xml/i.test(name);
function isValidDataAttribute(name, allowUpperCase) {
const basicAttributeRegexp = allowUpperCase ? /^data(-[^:]*)*$/ : /^data(-[a-z1-9]*)*$/;
return basicAttributeRegexp.test(name) && !/^data-xml/i.test(name);
}

/**
Expand Down Expand Up @@ -516,6 +521,10 @@ module.exports = {
type: 'string',
},
},
allowDataUpperCase: {
type: 'boolean',
default: true,
},
},
additionalProperties: false,
}],
Expand All @@ -526,6 +535,12 @@ module.exports = {
return (context.options[0] && context.options[0].ignore) || DEFAULTS.ignore;
}

function getAllowDataUpperCase() {
return (context.options[0] && typeof context.options[0].allowDataUpperCase !== 'undefined')
? context.options[0].allowDataUpperCase
: DEFAULTS.allowDataUpperCase;
}

return {
JSXAttribute(node) {
const ignoreNames = getIgnoreConfig();
Expand All @@ -540,7 +555,7 @@ module.exports = {
return;
}

if (isValidDataAttribute(name)) { return; }
if (isValidDataAttribute(name, getAllowDataUpperCase())) { return; }

if (isValidAriaAttribute(name)) { return; }

Expand Down
16 changes: 16 additions & 0 deletions tests/lib/rules/no-unknown-property.js
Original file line number Diff line number Diff line change
Expand Up @@ -99,6 +99,10 @@ ruleTester.run('no-unknown-property', rule, {
{ code: '<div data-index-number="1234"></div>;' },
{ code: '<div data-e2e-id="5678"></div>;' },
{ code: '<div data-testID="bar" data-under_sCoRe="bar" />;' },
{
code: '<div data-testID="bar" data-under_sCoRe="bar" />;',
options: [{ allowDataUpperCase: true }],
},
// Ignoring should work
{
code: '<div class="bar"></div>;',
Expand Down Expand Up @@ -573,6 +577,18 @@ ruleTester.run('no-unknown-property', rule, {
},
],
},
{
code: '<div data-UPPERCASE="invalid" />',
errors: [
{
messageId: 'unknownProp',
data: {
name: 'data-UPPERCASE',
},
},
],
options: [{ allowDataUpperCase: false }],
},
{
code: '<div abbr="abbr" />',
errors: [
Expand Down

0 comments on commit 0187bd6

Please sign in to comment.