[New] jsx-handler-names: support namespaced component names

Author: ljharb

CHANGELOG.md

@@ -8,6 +8,7 @@ This change log adheres to standards from [Keep a CHANGELOG](https://keepachange
 
 ### Added
 * [`jsx-props-no-multi-spaces`]: improve autofix for multi-line ([#3930][] @justisb)
+* [`jsx-handler-names`]: support namespaced component names ([#3943][] @takuji)
 
 ### Fixed
 * [`no-unknown-property`]: allow `onLoad` on `body` ([#3923][] @DerekStapleton)
@@ -21,6 +22,7 @@ This change log adheres to standards from [Keep a CHANGELOG](https://keepachange
 [#3978]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3978
 [#3958]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3958
 [#3980]: https://github.com/jsx-eslint/eslint-plugin-react/issues/3980
+[#3943]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3943
 [#3942]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3942
 [#3930]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3930
 [#3923]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3923

docs/rules/jsx-handler-names.md

@@ -46,7 +46,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 glob strings, when matched with component name, ignores the rule on that component. Defaults to `[]`
+- `ignoreComponentNames`: Array of glob strings, when matched with component name, ignores the rule on that component. Defaults to `[]`. Supports namespaced component names (e.g., `A.TestComponent`, `A.MyLib*`)
 
 ## When Not To Use It
 

lib/rules/jsx-handler-names.js

@@ -27,6 +27,18 @@ function isInlineHandler(node) {
   return node.value.expression.type === 'ArrowFunctionExpression';
 }
 
+function getComponentName(node) {
+  if (node.type === 'JSXIdentifier') {
+    return node.name;
+  }
+  if (node.type === 'JSXMemberExpression') {
+    return `${getComponentName(node.object)}.${node.property.name}`;
+  }
+  if (node.type === 'JSXNamespacedName') {
+    return `${node.namespace.name}:${node.name.name}`;
+  }
+}
+
 /** @type {import('eslint').Rule.RuleModule} */
 module.exports = {
   meta: {
@@ -141,7 +153,7 @@ module.exports = {
 
     return {
       JSXAttribute(node) {
-        const componentName = node.parent.name.name;
+        const componentName = getComponentName(node.parent.name);
 
         const isComponentNameIgnored = ignoreComponentNames.some((ignoredComponentNamePattern) => minimatch(
           componentName,

tests/lib/rules/jsx-handler-names.js

@@ -199,6 +199,24 @@ ruleTester.run('jsx-handler-names', rule, {
       `,
       options: [{ checkLocalVariables: true, ignoreComponentNames: ['MyLib*'] }],
     },
+    {
+      code: '<A.TestComponent customPropNameBar={handleSomething} />',
+      options: [{ checkLocalVariables: true, ignoreComponentNames: ['A.TestComponent'] }],
+    },
+    {
+      code: `
+        function App() {
+          return (
+            <div>
+              <A.MyLibInput customPropNameBar={handleSomething} />;
+              <A.MyLibCheckbox customPropNameBar={handleSomething} />;
+              <A.MyLibButtom customPropNameBar={handleSomething} />;
+            </div>
+          )
+        }
+      `,
+      options: [{ checkLocalVariables: true, ignoreComponentNames: ['A.MyLib*'] }],
+    },
   ]),
 
   invalid: parsers.all([
@@ -415,5 +433,15 @@ ruleTester.run('jsx-handler-names', rule, {
         },
       ],
     },
+    {
+      code: '<A.TestComponent onChange={onChange} />',
+      options: [{ checkLocalVariables: true, ignoreComponentNames: ['B.TestComponent', 'TestComponent', 'Test*'] }],
+      errors: [
+        {
+          messageId: 'badHandlerName',
+          data: { propKey: 'onChange', handlerPrefix: 'handle' },
+        },
+      ],
+    },
   ]),
 });