[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, '')); },
+ }
  ),
  ],
  });