[Fix] jsx-boolean-value: make error messages clearer

jsx-eslint · Feb 18, 2024 · b16af66 · b16af66
1 parent 2124d13
commit b16af66
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 40 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -30,6 +30,7 @@ This change log adheres to standards from [Keep a CHANGELOG](https://keepachange
 * [`forbid-elements`]: prevent a crash on `createElement()` ([#3632][] @ljharb)
 
 ### Changed
+* [`jsx-boolean-value`]: make error messages clearer ([#3691][] @developer-bandi)
 * [Refactor] `propTypes`: extract type params to var ([#3634][] @HenryBrown0)
 * [Refactor] [`boolean-prop-naming`]: invert if statement ([#3634][] @HenryBrown0)
 * [Refactor] [`function-component-definition`]: exit early if no type params ([#3634][] @HenryBrown0)
@@ -40,6 +41,7 @@ This change log adheres to standards from [Keep a CHANGELOG](https://keepachange
 * [Docs] [`hook-use-state`]: fix an undefined variable ([#3626][] @chentsulin)
 
 [#3697]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3697
+[#3691]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3691
 [#3690]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3690
 [#3680]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3680
 [#3679]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3679

diff --git a/lib/rules/jsx-boolean-value.js b/lib/rules/jsx-boolean-value.js
@@ -21,19 +21,6 @@ const exceptionsSchema = {
 const ALWAYS = 'always';
 const NEVER = 'never';
 
-const errorData = new WeakMap();
-/**
- * @param {object} exceptions
- * @returns {object}
- */
-function getErrorData(exceptions) {
-  if (!errorData.has(exceptions)) {
-    const exceptionProps = Array.from(exceptions, (name) => `\`${name}\``).join(', ');
-    const exceptionsMessage = exceptions.size > 0 ? ` for the following props: ${exceptionProps}` : '';
-    errorData.set(exceptions, { exceptionsMessage });
-  }
-  return errorData.get(exceptions);
-}
 /**
  * @param {string} configuration
  * @param {Set<string>} exceptions
@@ -62,12 +49,9 @@ function isNever(configuration, exceptions, propName) {
 }
 
 const messages = {
-  omitBoolean: 'Value must be omitted for boolean attributes{{exceptionsMessage}}',
-  omitBoolean_noMessage: 'Value must be omitted for boolean attributes',
-  setBoolean: 'Value must be set for boolean attributes{{exceptionsMessage}}',
-  setBoolean_noMessage: 'Value must be set for boolean attributes',
-  omitPropAndBoolean: 'Value and Prop must be omitted for false attributes{{exceptionsMessage}}',
-  omitPropAndBoolean_noMessage: 'Value and Prop must be omitted for false attributes',
+  omitBoolean: 'Value must be omitted for boolean attribute \`{{propName}}\`',
+  setBoolean: 'Value must be set for boolean attribute \`{{propName}}\`',
+  omitPropAndBoolean: 'Value must be omitted for `false` attribute: \`{{propName}}\`',
 };
 
 module.exports = {
@@ -135,8 +119,8 @@ module.exports = {
           isAlways(configuration, exceptions, propName)
           && value === null
         ) {
-          const data = getErrorData(exceptions);
-          const messageId = data.exceptionsMessage ? 'setBoolean' : 'setBoolean_noMessage';
+          const messageId = 'setBoolean';
+          const data = { propName };
           report(context, messages[messageId], messageId, {
             node,
             data,
@@ -152,8 +136,8 @@ module.exports = {
           && value.type === 'JSXExpressionContainer'
           && value.expression.value === true
         ) {
-          const data = getErrorData(exceptions);
-          const messageId = data.exceptionsMessage ? 'omitBoolean' : 'omitBoolean_noMessage';
+          const messageId = 'omitBoolean';
+          const data = { propName };
           report(context, messages[messageId], messageId, {
             node,
             data,
@@ -169,11 +153,8 @@ module.exports = {
           && value.type === 'JSXExpressionContainer'
           && value.expression.value === false
         ) {
-          const data = getErrorData(exceptions);
-          const messageId = data.exceptionsMessage
-            ? 'omitPropAndBoolean'
-            : 'omitPropAndBoolean_noMessage';
-
+          const messageId = 'omitPropAndBoolean';
+          const data = { propName };
           report(context, messages[messageId], messageId, {
             node,
             data,

diff --git a/tests/lib/rules/jsx-boolean-value.js b/tests/lib/rules/jsx-boolean-value.js
@@ -63,7 +63,10 @@ ruleTester.run('jsx-boolean-value', rule, {
       output: '<App foo />;',
       options: ['never'],
       errors: [
-        { messageId: 'omitBoolean_noMessage' },
+        {
+          messageId: 'omitBoolean',
+          data: { propName: 'foo' },
+        },
       ],
     },
     {
@@ -73,34 +76,43 @@ ruleTester.run('jsx-boolean-value', rule, {
       errors: [
         {
           messageId: 'omitBoolean',
-          data: { exceptionsMessage: ' for the following props: `foo`, `bar`' },
+          data: { propName: 'foo' },
         },
         {
           messageId: 'omitBoolean',
-          data: { exceptionsMessage: ' for the following props: `foo`, `bar`' },
+          data: { propName: 'bar' },
         },
       ],
     },
     {
       code: '<App foo={true} />;',
       output: '<App foo />;',
       errors: [
-        { messageId: 'omitBoolean_noMessage' },
+        {
+          messageId: 'omitBoolean',
+          data: { propName: 'foo' },
+        },
       ],
     },
     {
       code: '<App foo = {true} />;',
       output: '<App foo />;',
       errors: [
-        { messageId: 'omitBoolean_noMessage' },
+        {
+          messageId: 'omitBoolean',
+          data: { propName: 'foo' },
+        },
       ],
     },
     {
       code: '<App foo />;',
       output: '<App foo={true} />;',
       options: ['always'],
       errors: [
-        { messageId: 'setBoolean_noMessage' },
+        {
+          messageId: 'setBoolean',
+          data: { propName: 'foo' },
+        },
       ],
     },
     {
@@ -110,11 +122,11 @@ ruleTester.run('jsx-boolean-value', rule, {
       errors: [
         {
           messageId: 'setBoolean',
-          data: { exceptionsMessage: ' for the following props: `foo`, `bar`' },
+          data: { propName: 'foo' },
         },
         {
           messageId: 'setBoolean',
-          data: { exceptionsMessage: ' for the following props: `foo`, `bar`' },
+          data: { propName: 'bar' },
         },
       ],
     },
@@ -123,8 +135,14 @@ ruleTester.run('jsx-boolean-value', rule, {
       output: '<App   />;',
       options: ['never', { assumeUndefinedIsFalse: true }],
       errors: [
-        { messageId: 'omitPropAndBoolean_noMessage' },
-        { messageId: 'omitPropAndBoolean_noMessage' },
+        {
+          messageId: 'omitPropAndBoolean',
+          data: { propName: 'foo' },
+        },
+        {
+          messageId: 'omitPropAndBoolean',
+          data: { propName: 'bak' },
+        },
       ],
     },
     {
@@ -137,11 +155,30 @@ ruleTester.run('jsx-boolean-value', rule, {
       errors: [
         {
           messageId: 'omitPropAndBoolean',
-          data: { exceptionsMessage: ' for the following props: `baz`, `bak`' },
+          data: { propName: 'baz' },
         },
         {
           messageId: 'omitPropAndBoolean',
-          data: { exceptionsMessage: ' for the following props: `baz`, `bak`' },
+          data: { propName: 'bak' },
+        },
+      ],
+    },
+    {
+      code: '<App foo={true} bar={true} baz />;',
+      output: '<App foo bar baz={true} />;',
+      options: ['always', { never: ['foo', 'bar'] }],
+      errors: [
+        {
+          messageId: 'omitBoolean',
+          data: { propName: 'foo' },
+        },
+        {
+          messageId: 'omitBoolean',
+          data: { propName: 'bar' },
+        },
+        {
+          messageId: 'setBoolean',
+          data: { propName: 'baz' },
         },
       ],
     },