[Fix] jsx-handler-names: support ignoring component names

akulsr0 · akulsr0 · commit 1625b1a69dc9 · 2024-06-21T11:50:26.000+05:30
diff --git a/docs/rules/jsx-handler-names.md b/docs/rules/jsx-handler-names.md
@@ -34,7 +34,8 @@ Examples of **correct** code for this rule:
   "eventHandlerPrefix": <eventHandlerPrefix>,
   "eventHandlerPropPrefix": <eventHandlerPropPrefix>,
   "checkLocalVariables": <boolean>,
-  "checkInlineFunction": <boolean>
+  "checkInlineFunction": <boolean>,
+  "ignoreComponentNames": Array<string>
 }]
 ...
 ```
@@ -43,6 +44,7 @@ Examples of **correct** code for this rule:
 - `eventHandlerPropPrefix`: Prefix for props that are used as event handlers. Defaults to `on`
 - `checkLocalVariables`: Determines whether event handlers stored as local variables are checked. Defaults to `false`
 - `checkInlineFunction`: Determines whether event handlers set as inline functions are checked. Defaults to `false`
+- `ignoreComponentNames`: Array of regex, when matched with component name, ignores the rule on that component. Defaults to `[]`
 
 ## When Not To Use It
 
diff --git a/lib/rules/jsx-handler-names.js b/lib/rules/jsx-handler-names.js
@@ -39,6 +39,11 @@ module.exports = {
             eventHandlerPropPrefix: { type: 'string' },
             checkLocalVariables: { type: 'boolean' },
             checkInlineFunction: { type: 'boolean' },
+            ignoreComponentNames: {
+              type: 'array',
+              uniqueItems: true,
+              items: { type: 'string' },
+            },
           },
           additionalProperties: false,
         }, {
@@ -51,6 +56,11 @@ module.exports = {
             },
             checkLocalVariables: { type: 'boolean' },
             checkInlineFunction: { type: 'boolean' },
+            ignoreComponentNames: {
+              type: 'array',
+              uniqueItems: true,
+              items: { type: 'string' },
+            },
           },
           additionalProperties: false,
         }, {
@@ -63,6 +73,11 @@ module.exports = {
             eventHandlerPropPrefix: { type: 'string' },
             checkLocalVariables: { type: 'boolean' },
             checkInlineFunction: { type: 'boolean' },
+            ignoreComponentNames: {
+              type: 'array',
+              uniqueItems: true,
+              items: { type: 'string' },
+            },
           },
           additionalProperties: false,
         }, {
@@ -78,6 +93,16 @@ module.exports = {
           },
           additionalProperties: false,
         },
+        {
+          type: 'object',
+          properties: {
+            ignoreComponentNames: {
+              type: 'array',
+              uniqueItems: true,
+              items: { type: 'string' },
+            },
+          },
+        },
       ],
     }],
   },
@@ -111,8 +136,17 @@ module.exports = {
 
     const checkInlineFunction = !!configuration.checkInlineFunction;
 
+    const ignoreComponentNames = configuration.ignoreComponentNames || [];
+
     return {
       JSXAttribute(node) {
+        const componentName = node.parent.name.name;
+
+        const isComponentNameIgnored = ignoreComponentNames.some((ignoredComponentNameRegex) => {
+          const isIgnored = new RegExp(ignoredComponentNameRegex).test(componentName);
+          return isIgnored;
+        });
+
         if (
           !node.value
           || !node.value.expression
@@ -124,6 +158,7 @@ module.exports = {
               : !node.value.expression.object
             )
           )
+          || isComponentNameIgnored
         ) {
           return;
         }
diff --git a/tests/lib/rules/jsx-handler-names.js b/tests/lib/rules/jsx-handler-names.js
@@ -181,6 +181,24 @@ ruleTester.run('jsx-handler-names', rule, {
       code: '<TestComponent someProp={props.onChange} />',
       options: [{ eventHandlerPropPrefix: false }],
     },
+    {
+      code: '<ComponentFromOtherLibraryBar customPropNameBar={handleSomething} />;',
+      options: [{ checkLocalVariables: true, ignoreComponentNames: ['ComponentFromOtherLibraryBar'] }],
+    },
+    {
+      code: `
+        function App() {
+          return (
+            <>
+              <MyLibInput customPropNameBar={handleSomething} />;
+              <MyLibCheckbox customPropNameBar={handleSomething} />;
+              <MyLibButtom customPropNameBar={handleSomething} />;
+            </>
+          )
+        }
+      `,
+      options: [{ checkLocalVariables: true, ignoreComponentNames: ['^MyLib'] }],
+    },
   ]),
 
   invalid: parsers.all([
@@ -369,5 +387,33 @@ ruleTester.run('jsx-handler-names', rule, {
         },
       ],
     },
+    {
+      code: `
+        function App() {
+          return (
+            <>
+              <MyLibInput customPropNameBar={handleInput} />;
+              <MyLibCheckbox customPropNameBar={handleCheckbox} />;
+              <MyLibButtom customPropNameBar={handleButton} />;
+            </>
+          )
+        }
+      `,
+      options: [{ checkLocalVariables: true, ignoreComponentNames: ['^MyLibrary'] }],
+      errors: [
+        {
+          messageId: 'badPropKey',
+          data: { propValue: 'handleInput', handlerPropPrefix: 'on' },
+        },
+        {
+          messageId: 'badPropKey',
+          data: { propValue: 'handleCheckbox', handlerPropPrefix: 'on' },
+        },
+        {
+          messageId: 'badPropKey',
+          data: { propValue: 'handleButton', handlerPropPrefix: 'on' },
+        },
+      ],
+    },
   ]),
 });
