Extract rule: template-no-passed-in-event-handlers

Author: NullVoxPopuli

README.md

@@ -259,6 +259,7 @@ rules in templates can be disabled with eslint directives with mustache or html
 | [template-no-obsolete-elements](docs/rules/template-no-obsolete-elements.md)                                       | disallow obsolete HTML elements                                              |    |    |    |
 | [template-no-outlet-outside-routes](docs/rules/template-no-outlet-outside-routes.md)                               | disallow {{outlet}} outside of route templates                               |    |    |    |
 | [template-no-page-title-component](docs/rules/template-no-page-title-component.md)                                 | disallow usage of ember-page-title component                                 |    |    |    |
+| [template-no-passed-in-event-handlers](docs/rules/template-no-passed-in-event-handlers.md)                         | disallow passing event handlers directly as component arguments              |    |    |    |
 | [template-no-positional-data-test-selectors](docs/rules/template-no-positional-data-test-selectors.md)             | disallow positional data-test-* params in curly invocations                  |    |    |    |
 | [template-no-potential-path-strings](docs/rules/template-no-potential-path-strings.md)                             | disallow potential path strings in attribute values                          |    |    |    |
 | [template-no-redundant-fn](docs/rules/template-no-redundant-fn.md)                                                 | disallow unnecessary usage of (fn) helper                                    |    |    |    |

docs/rules/template-no-passed-in-event-handlers.md

@@ -0,0 +1,98 @@
+# ember/template-no-passed-in-event-handlers
+
+<!-- end auto-generated rule header -->
+
+Disallows passing Ember event handler names directly as component arguments.
+
+Passing Ember DOM event names as component arguments (e.g., `@click`, `@submit`, `@keyDown`) is discouraged. Use the `{{on}}` modifier on the element instead for explicit event binding.
+
+## Rule Details
+
+This rule detects component arguments whose name (without the `@` prefix) matches an Ember DOM event name. Only PascalCase component invocations are checked (built-in `Input` and `Textarea` are excluded).
+
+The checked event names are:
+
+`touchStart`, `touchMove`, `touchEnd`, `touchCancel`, `keyDown`, `keyUp`, `keyPress`, `mouseDown`, `mouseUp`, `contextMenu`, `click`, `doubleClick`, `mouseMove`, `mouseEnter`, `mouseLeave`, `focusIn`, `focusOut`, `submit`, `change`, `input`, `dragStart`, `drag`, `dragEnter`, `dragLeave`, `dragOver`, `dragEnd`, `drop`
+
+## Examples
+
+Examples of **incorrect** code for this rule:
+
+```gjs
+<template>
+  <MyComponent @click={{this.handleClick}} />
+</template>
+```
+
+```gjs
+<template>
+  <MyComponent @submit={{this.handleSubmit}} />
+</template>
+```
+
+```gjs
+<template>
+  <CustomButton @mouseEnter={{this.handleHover}} />
+</template>
+```
+
+Examples of **correct** code for this rule:
+
+```gjs
+<template>
+  <MyComponent @action={{this.handleAction}} />
+</template>
+```
+
+```gjs
+<template>
+  <button {{on "click" this.handleClick}}>Click</button>
+</template>
+```
+
+```gjs
+<template>
+  <MyComponent @value={{this.value}} @onChange={{this.updateValue}} />
+</template>
+```
+
+## Options
+
+| Name     | Type     | Default | Description                                                                                        |
+| -------- | -------- | ------- | -------------------------------------------------------------------------------------------------- |
+| `ignore` | `object` | `{}`    | Per-component exceptions. Keys are component names, values are arrays of argument names to ignore. |
+
+```js
+module.exports = {
+  rules: {
+    'ember/template-no-passed-in-event-handlers': [
+      'error',
+      {
+        ignore: {
+          MyComponent: ['@click', '@submit'],
+        },
+      },
+    ],
+  },
+};
+```
+
+## Migration
+
+Replace:
+
+```gjs
+<MyComponent @click={{this.handleClick}} />
+```
+
+With:
+
+```gjs
+<MyComponent>
+  <button {{on "click" this.handleClick}}>Click</button>
+</MyComponent>
+```
+
+## References
+
+- [eslint-plugin-ember template-no-passed-in-event-handlers](https://github.com/ember-cli/eslint-plugin-ember/blob/master/docs/rules/template-no-passed-in-event-handlers.md)

lib/rules/template-no-passed-in-event-handlers.js

@@ -0,0 +1,141 @@
+// Comprehensive Ember event handler names
+const EMBER_EVENTS = new Set([
+  'touchStart',
+  'touchMove',
+  'touchEnd',
+  'touchCancel',
+  'keyDown',
+  'keyUp',
+  'keyPress',
+  'mouseDown',
+  'mouseUp',
+  'contextMenu',
+  'click',
+  'doubleClick',
+  'mouseMove',
+  'mouseEnter',
+  'mouseLeave',
+  'focusIn',
+  'focusOut',
+  'submit',
+  'change',
+  'input',
+  'dragStart',
+  'drag',
+  'dragEnter',
+  'dragLeave',
+  'dragOver',
+  'dragEnd',
+  'drop',
+]);
+
+function isEventName(name) {
+  return EMBER_EVENTS.has(name);
+}
+
+/** @type {import('eslint').Rule.RuleModule} */
+module.exports = {
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description: 'disallow passing event handlers directly as component arguments',
+      category: 'Best Practices',
+      url: 'https://github.com/ember-cli/eslint-plugin-ember/tree/master/docs/rules/template-no-passed-in-event-handlers.md',
+      templateMode: 'both',
+    },
+    fixable: null,
+    schema: [
+      {
+        type: 'object',
+        properties: {
+          ignore: {
+            type: 'object',
+            additionalProperties: {
+              type: 'array',
+              items: { type: 'string' },
+            },
+          },
+        },
+        additionalProperties: false,
+      },
+    ],
+    messages: {
+      unexpected:
+        'Event handler "@{{name}}" should not be passed as a component argument. Use the `on` modifier instead.',
+    },
+    originallyFrom: {
+      name: 'ember-template-lint',
+      rule: 'lib/rules/no-passed-in-event-handlers.js',
+      docs: 'docs/rule/no-passed-in-event-handlers.md',
+      tests: 'test/unit/rules/no-passed-in-event-handlers-test.js',
+    },
+  },
+
+  create(context) {
+    const options = context.options[0] || {};
+    const ignoreConfig = options.ignore || {};
+
+    return {
+      GlimmerElementNode(node) {
+        // Only check component invocations (PascalCase)
+        if (!/^[A-Z]/.test(node.tag)) {
+          return;
+        }
+        // Skip built-in Input/Textarea
+        if (node.tag === 'Input' || node.tag === 'Textarea') {
+          return;
+        }
+
+        if (!node.attributes) {
+          return;
+        }
+
+        const ignoredAttrs = ignoreConfig[node.tag] || [];
+
+        for (const attr of node.attributes) {
+          if (!attr.name || !attr.name.startsWith('@')) {
+            continue;
+          }
+          const argName = attr.name.slice(1);
+
+          // Check ignore config
+          if (ignoredAttrs.includes(attr.name)) {
+            continue;
+          }
+
+          if (isEventName(argName)) {
+            context.report({
+              node: attr,
+              messageId: 'unexpected',
+              data: { name: argName },
+            });
+          }
+        }
+      },
+
+      GlimmerMustacheStatement(node) {
+        const path = node.path;
+        if (!path || path.type !== 'GlimmerPathExpression') {
+          return;
+        }
+        // Skip built-in input/textarea
+        if (path.original === 'input' || path.original === 'textarea') {
+          return;
+        }
+        // Check hash pairs for event handler names
+        if (!node.hash || !node.hash.pairs) {
+          return;
+        }
+        for (const pair of node.hash.pairs) {
+          if (isEventName(pair.key)) {
+            context.report({
+              node: pair,
+              messageId: 'unexpected',
+              data: { name: pair.key },
+            });
+          }
+        }
+      },
+    };
+  },
+};