Merge pull request #2562 from NullVoxPopuli/nvp/template-lint-extract-rule-template-no-passed-in-event-handlers

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,69 @@
+# ember/template-no-passed-in-event-handlers
+
+<!-- end auto-generated rule header -->
+
+It is possible to pass e.g. `@click` to an Ember component to override the default `click` event handler. For tagless components this will trigger an assertion though and can't be used as legitimate API, and for Glimmer components it will not work out of the box, like in Ember components, either.
+
+This rule scans potential component invocations for these patterns and flags them as issues.
+
+## Examples
+
+This rule **forbids** the following:
+
+```hbs
+<Foo @click={{this.handleClick}} />
+```
+
+```hbs
+<Foo @keyPress={{this.handleClick}} />
+```
+
+```hbs
+{{foo click=this.handleClick}}
+```
+
+This rule **allows** the following:
+
+```hbs
+<Foo @onClick={{this.handleClick}} />
+```
+
+```hbs
+<Foo @myCustomClickHandler={{this.handleClick}} />
+```
+
+```hbs
+<Foo @onKeyPress={{this.handleClick}} />
+```
+
+```hbs
+{{foo onClick=this.handleClick}}
+```
+
+## Configuration
+
+- boolean - `true` to enable / `false` to disable
+  - object -- An object with the following keys:
+    - `ignore` -- An object with the following keys/values:
+      - key: string -- The name of the element or mustache statement to ignore event handlers for
+      - value: array -- Event handler names. Event handler names should exclude the @ when specifying those intended for named arguments. This rule will ensure both non-named arguments and named arguments are both ignored appropriately.
+
+      eg.
+
+      Given the following configuration:
+
+      ```json
+      {
+        "ignore": {
+          "MyButton": ["click"]
+        }
+      }
+      ```
+
+## Migration
+
+- create explicit component APIs for these events (e.g. `@click` -> `@onClick`)
+
+## References
+
+- <https://api.emberjs.com/ember/release/classes/Component#event-handler-methods>

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

@@ -0,0 +1,146 @@
+// 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;
+        }
+        const ignoredAttrs = ignoreConfig[path.original] || [];
+
+        for (const pair of node.hash.pairs) {
+          if (ignoredAttrs.includes(pair.key)) {
+            continue;
+          }
+          if (isEventName(pair.key)) {
+            context.report({
+              node: pair,
+              messageId: 'unexpected',
+              data: { name: pair.key },
+            });
+          }
+        }
+      },
+    };
+  },
+};