[Fix] jsx-no-literals: new config for allowedProps

Fixes #3003

Author: thiagofelix

docs/rules/jsx-no-literals.md

@@ -33,12 +33,13 @@ The supported options are:
 - `noStrings` (default: `false`) - Enforces no string literals used as children, wrapped or unwrapped.
 - `allowedStrings` - An array of unique string values that would otherwise warn, but will be ignored.
 - `ignoreProps` (default: `false`) - When `true` the rule ignores literals used in props, wrapped or unwrapped.
+- `allowedProps` - An array of unique property names that would otherwise warn, but will be ignored.
 - `noAttributeStrings` (default: `false`) - Enforces no string literals used in attributes when set to `true`.
 
 To use, you can specify as follows:
 
 ```js
-"react/jsx-no-literals": [<enabled>, {"noStrings": true, "allowedStrings": ["allowed"], "ignoreProps": false, "noAttributeStrings": true }]
+"react/jsx-no-literals": [<enabled>, {"noStrings": true, "allowedStrings": ["allowed"], "ignoreProps": false, "allowedProps": ["allowed"], "noAttributeStrings": true }]
 ```
 
 Examples of **incorrect** code for this rule, with the above configuration:
@@ -116,6 +117,11 @@ var Hello = <Text {...props} />
 var Hello = <div class={xx} />
 ```
 
+```jsx
+// an allowed property
+var Hello = <div allowed='foo'>allowed</div>
+```
+
 ```jsx
 // cache
 class Comp1 extends Component {

lib/rules/jsx-no-literals.js

@@ -51,6 +51,13 @@ module.exports = {
         ignoreProps: {
           type: 'boolean',
         },
+        allowedProps: {
+          type: 'array',
+          uniqueItems: true,
+          items: {
+            type: 'string',
+          },
+        },
         noAttributeStrings: {
           type: 'boolean',
         },
@@ -63,11 +70,13 @@ module.exports = {
     const defaults = {
       noStrings: false,
       allowedStrings: [],
+      allowedProps: [],
       ignoreProps: false,
       noAttributeStrings: false,
     };
     const config = Object.assign({}, defaults, context.options[0] || {});
     config.allowedStrings = new Set(config.allowedStrings.map(trimIfString));
+    config.allowedProps = new Set(config.allowedProps.map(trimIfString));
 
     function defaultMessageId() {
       const ancestorIsJSXElement = arguments.length >= 1 && arguments[0];
@@ -98,8 +107,9 @@ module.exports = {
 
       function isParentNodeStandard() {
         if (!/^[\s]+$/.test(node.value) && typeof node.value === 'string' && parent.type.includes('JSX')) {
+
           if (config.noAttributeStrings) {
-            return parent.type === 'JSXAttribute' || parent.type === 'JSXElement';
+            return (parent.type === 'JSXAttribute' || parent.type === 'JSXElement') && !config.allowedProps.has(parent.name?.name);
           }
           if (!config.noAttributeStrings) {
             return parent.type !== 'JSXAttribute';
@@ -163,8 +173,9 @@ module.exports = {
 
       JSXAttribute(node) {
         const isNodeValueString = node && node.value && node.value.type === 'Literal' && typeof node.value.value === 'string' && !config.allowedStrings.has(node.value.value);
+        const isAllowedProp = config.allowedProps.has(node.name.name);
 
-        if (config.noStrings && !config.ignoreProps && isNodeValueString) {
+        if (config.noStrings && !config.ignoreProps && isNodeValueString && !isAllowedProp) {
           const messageId = 'invalidPropValue';
           reportLiteralNode(node, messageId);
         }

tests/lib/rules/jsx-no-literals.js

@@ -296,6 +296,23 @@ ruleTester.run('jsx-no-literals', rule, {
       `,
       options: [{ noStrings: true, allowedStrings: ['—', '—'] }],
     },
+    {
+      code: `
+        <img alt='blank image'></img>
+      `,
+      options: [{ noStrings: true, allowedProps: ['alt'] }],
+    },
+    {
+      code: `
+        class Comp1 extends Component {
+          asdf() {}
+          render() {
+            return <Foo bar={this.asdf} class='xx' />;
+          }
+        }
+      `,
+      options: [{ noStrings: true, allowedProps: ['class'] }],
+    },
   ]),
 
   invalid: parsers.all([
@@ -457,7 +474,7 @@ ruleTester.run('jsx-no-literals', rule, {
         },
         {
           messageId: 'noStringsInJSX',
-          data: { text: '\'Test\'' },
+          data: { text: "'Test'" },
         },
       ],
     },
@@ -475,7 +492,7 @@ ruleTester.run('jsx-no-literals', rule, {
         },
         {
           messageId: 'noStringsInJSX',
-          data: { text: '\'Test\'' },
+          data: { text: "'Test'" },
         },
       ],
     },
@@ -542,7 +559,7 @@ ruleTester.run('jsx-no-literals', rule, {
       ],
     },
     {
-      code: '<Foo bar={`foo` + \'bar\'} />',
+      code: "<Foo bar={`foo` + 'bar'} />",
       options: [{ noStrings: true, ignoreProps: false }],
       errors: [
         {
@@ -551,7 +568,7 @@ ruleTester.run('jsx-no-literals', rule, {
         },
         {
           messageId: 'noStringsInJSX',
-          data: { text: '\'bar\'' },
+          data: { text: "'bar'" },
         },
       ],
     },
@@ -570,12 +587,12 @@ ruleTester.run('jsx-no-literals', rule, {
       ],
     },
     {
-      code: '<Foo bar={\'foo\' + `bar`} />',
+      code: "<Foo bar={'foo' + `bar`} />",
       options: [{ noStrings: true, ignoreProps: false }],
       errors: [
         {
           messageId: 'noStringsInJSX',
-          data: { text: '\'foo\'' },
+          data: { text: "'foo'" },
         },
         {
           messageId: 'noStringsInJSX',
@@ -591,11 +608,13 @@ ruleTester.run('jsx-no-literals', rule, {
           }
         }
       `,
-      options: [{ noStrings: true, allowedStrings: ['asd'], ignoreProps: false }],
+      options: [
+        { noStrings: true, allowedStrings: ['asd'], ignoreProps: false },
+      ],
       errors: [
         {
           messageId: 'noStringsInJSX',
-          data: { text: '\'foo\'' },
+          data: { text: "'foo'" },
         },
         {
           messageId: 'noStringsInJSX',
@@ -604,12 +623,12 @@ ruleTester.run('jsx-no-literals', rule, {
       ],
     },
     {
-      code: '<Foo bar={\'bar\'} />',
+      code: "<Foo bar={'bar'} />",
       options: [{ noStrings: true, ignoreProps: false }],
       errors: [
         {
           messageId: 'noStringsInJSX',
-          data: { text: '\'bar\'' },
+          data: { text: "'bar'" },
         },
       ],
     },
@@ -621,7 +640,7 @@ ruleTester.run('jsx-no-literals', rule, {
       errors: [
         {
           messageId: 'noStringsInAttributes',
-          data: { text: '\'blank image\'' },
+          data: { text: "'blank image'" },
         },
       ],
     },