[Fix] no-invalid-html-attribute: ensure error messages are correct

Author: mdjermanovic

CHANGELOG.md

@@ -9,6 +9,7 @@ This change log adheres to standards from [Keep a CHANGELOG](https://keepachange
 * [`boolean-prop-naming`]: avoid a crash with a non-TSTypeReference type ([#3718][] @developer-bandi)
 * [`jsx-no-leaked-render`]: invalid report if left side is boolean ([#3746][] @akulsr0)
 * [`jsx-closing-bracket-location`]: message shows `{{details}}` when there are no details ([#3759][] @mdjermanovic)
+* [`no-invalid-html-attribute`]: ensure error messages are correct ([#3759][] @mdjermanovic, @ljharb)
 
 [#3759]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3759
 [#3746]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3746

lib/rules/no-invalid-html-attribute.js

@@ -238,8 +238,8 @@ const messages = {
   suggestRemoveDefault: '"remove {{attributeName}}"',
   suggestRemoveEmpty: '"remove empty attribute {{attributeName}}"',
   suggestRemoveInvalid: '“remove invalid attribute {{reportingValue}}”',
-  suggestRemoveWhitespaces: 'remove whitespaces in “{{reportingValue}}”',
-  suggestRemoveNonString: 'remove non-string value in “{{reportingValue}}”',
+  suggestRemoveWhitespaces: 'remove whitespaces in “{{attributeName}}”',
+  suggestRemoveNonString: 'remove non-string value in “{{attributeName}}”',
 };
 
 function splitIntoRangedParts(node, regex) {
@@ -259,27 +259,37 @@ function splitIntoRangedParts(node, regex) {
 
 function checkLiteralValueNode(context, attributeName, node, parentNode, parentNodeName) {
   if (typeof node.value !== 'string') {
+    const data = { attributeName, reportingValue: node.value };
+
     report(context, messages.onlyStrings, 'onlyStrings', {
       node,
-      data: { attributeName },
+      data,
       suggest: [
         Object.assign(
           getMessageData('suggestRemoveNonString', messages.suggestRemoveNonString),
-          { fix(fixer) { return fixer.remove(parentNode); } }
+          {
+            data,
+            fix(fixer) { return fixer.remove(parentNode); },
+          }
         ),
       ],
     });
     return;
   }
 
   if (!node.value.trim()) {
+    const data = { attributeName, reportingValue: node.value };
+
     report(context, messages.noEmpty, 'noEmpty', {
       node,
-      data: { attributeName },
+      data,
       suggest: [
         Object.assign(
           getMessageData('suggestRemoveEmpty', messages.suggestRemoveEmpty),
-          { fix(fixer) { return fixer.remove(node.parent); } }
+          {
+            data,
+            fix(fixer) { return fixer.remove(node.parent); },
+          }
         ),
       ],
     });
@@ -291,32 +301,44 @@ function checkLiteralValueNode(context, attributeName, node, parentNode, parentN
     const allowedTags = VALID_VALUES.get(attributeName).get(singlePart.value);
     const reportingValue = singlePart.reportingValue;
 
-    const suggest = [
-      Object.assign(
-        getMessageData('suggestRemoveInvalid', messages.suggestRemoveInvalid),
-        { fix(fixer) { return fixer.removeRange(singlePart.range); } }
-      ),
-    ];
-
     if (!allowedTags) {
       const data = {
         attributeName,
         reportingValue,
       };
+
       report(context, messages.neverValid, 'neverValid', {
         node,
         data,
-        suggest,
+        suggest: [
+          Object.assign(
+            getMessageData('suggestRemoveInvalid', messages.suggestRemoveInvalid),
+            {
+              data,
+              fix(fixer) { return fixer.removeRange(singlePart.range); },
+            }
+          ),
+        ],
       });
     } else if (!allowedTags.has(parentNodeName)) {
+      const data = {
+        attributeName,
+        reportingValue,
+        elementName: parentNodeName,
+      };
+
       report(context, messages.notValidFor, 'notValidFor', {
         node,
-        data: {
-          attributeName,
-          reportingValue,
-          elementName: parentNodeName,
-        },
-        suggest,
+        data,
+        suggest: [
+          Object.assign(
+            getMessageData('suggestRemoveInvalid', messages.suggestRemoveInvalid),
+            {
+              data,
+              fix(fixer) { return fixer.removeRange(singlePart.range); },
+            }
+          ),
+        ],
       });
     }
   }
@@ -360,7 +382,10 @@ function checkLiteralValueNode(context, attributeName, node, parentNode, parentN
         suggest: [
           Object.assign(
             getMessageData('suggestRemoveWhitespaces', messages.suggestRemoveWhitespaces),
-            { fix(fixer) { return fixer.removeRange(whitespacePart.range); } }
+            {
+              data: { attributeName },
+              fix(fixer) { return fixer.removeRange(whitespacePart.range); },
+            }
           ),
         ],
       });
@@ -371,7 +396,10 @@ function checkLiteralValueNode(context, attributeName, node, parentNode, parentN
         suggest: [
           Object.assign(
             getMessageData('suggestRemoveWhitespaces', messages.suggestRemoveWhitespaces),
-            { fix(fixer) { return fixer.replaceTextRange(whitespacePart.range, '\u0020'); } }
+            {
+              data: { attributeName },
+              fix(fixer) { return fixer.replaceTextRange(whitespacePart.range, '\u0020'); },
+            }
           ),
         ],
       });
@@ -390,16 +418,21 @@ function checkAttribute(context, node) {
       COMPONENT_ATTRIBUTE_MAP.get(attribute).values(),
       (tagName) => `"<${tagName}>"`
     ).join(', ');
+    const data = {
+      attributeName: attribute,
+      tagNames,
+    };
+
     report(context, messages.onlyMeaningfulFor, 'onlyMeaningfulFor', {
       node: node.name,
-      data: {
-        attributeName: attribute,
-        tagNames,
-      },
+      data,
       suggest: [
         Object.assign(
           getMessageData('suggestRemoveDefault', messages.suggestRemoveDefault),
-          { fix(fixer) { return fixer.remove(node); } }
+          {
+            data,
+            fix(fixer) { return fixer.remove(node); },
+          }
         ),
       ],
     });
@@ -409,13 +442,15 @@ function checkAttribute(context, node) {
   function fix(fixer) { return fixer.remove(node); }
 
   if (!node.value) {
+    const data = { attributeName: attribute };
+
     report(context, messages.emptyIsMeaningless, 'emptyIsMeaningless', {
       node: node.name,
-      data: { attributeName: attribute },
+      data,
       suggest: [
         Object.assign(
           getMessageData('suggestRemoveEmpty', messages.suggestRemoveEmpty),
-          { fix }
+          { data, fix }
         ),
       ],
     });
@@ -435,24 +470,28 @@ function checkAttribute(context, node) {
   }
 
   if (node.value.expression.type === 'ObjectExpression') {
+    const data = { attributeName: attribute };
+
     report(context, messages.onlyStrings, 'onlyStrings', {
       node: node.value,
-      data: { attributeName: attribute },
+      data,
       suggest: [
         Object.assign(
           getMessageData('suggestRemoveDefault', messages.suggestRemoveDefault),
-          { fix }
+          { data, fix }
         ),
       ],
     });
   } else if (node.value.expression.type === 'Identifier' && node.value.expression.name === 'undefined') {
+    const data = { attributeName: attribute };
+
     report(context, messages.onlyStrings, 'onlyStrings', {
       node: node.value,
-      data: { attributeName: attribute },
+      data,
       suggest: [
         Object.assign(
           getMessageData('suggestRemoveDefault', messages.suggestRemoveDefault),
-          { fix }
+          { data, fix }
         ),
       ],
     });
@@ -476,16 +515,21 @@ function checkPropValidValue(context, node, value, attribute) {
 
   const validTagSet = validTags.get(value.value);
   if (!validTagSet) {
+    const data = {
+      attributeName: attribute,
+      reportingValue: value.value,
+    };
+
     report(context, messages.neverValid, 'neverValid', {
       node: value,
-      data: {
-        attributeName: attribute,
-        reportingValue: value.value,
-      },
+      data,
       suggest: [
         Object.assign(
           getMessageData('suggestRemoveInvalid', messages.suggestRemoveInvalid),
-          { fix(fixer) { return fixer.replaceText(value, value.raw.replace(value.value, '')); } }
+          {
+            data,
+            fix(fixer) { return fixer.replaceText(value, value.raw.replace(value.value, '')); },
+          }
         ),
       ],
     });