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

Author: takuji

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