Merge pull request #2429 from NullVoxPopuli/nvp/template-lint-extract-rule-template-no-element-event-actions

Extract rule: template-no-element-event-actions

Author: NullVoxPopuli

README.md

@@ -198,6 +198,7 @@ rules in templates can be disabled with eslint directives with mustache or html
 | [template-no-block-params-for-html-elements](docs/rules/template-no-block-params-for-html-elements.md) | disallow block params on HTML elements                          |    |    |    |
 | [template-no-capital-arguments](docs/rules/template-no-capital-arguments.md)                           | disallow capital arguments (use lowercase @arg instead of @Arg) |    |    |    |
 | [template-no-debugger](docs/rules/template-no-debugger.md)                                             | disallow {{debugger}} in templates                              |    |    |    |
+| [template-no-element-event-actions](docs/rules/template-no-element-event-actions.md)                   | disallow element event actions (use {{on}} modifier instead)    |    |    |    |
 | [template-no-log](docs/rules/template-no-log.md)                                                       | disallow {{log}} in templates                                   |    |    |    |
 
 ### Components

docs/rules/template-no-element-event-actions.md

@@ -0,0 +1,49 @@
+# ember/template-no-element-event-actions
+
+<!-- end auto-generated rule header -->
+
+Disallow using element event actions (e.g., `onclick={{action}}`) in templates. Use the `{{on}}` modifier instead.
+
+## Rule Details
+
+This rule disallows the use of element event actions in templates.
+
+## Examples
+
+Examples of **incorrect** code for this rule:
+
+```gjs
+<template>
+  <button onclick={{this.handleClick}}>Click</button>
+</template>
+```
+
+```gjs
+<template>
+  <div onmouseenter={{this.handleHover}}>Hover</div>
+</template>
+```
+
+Examples of **correct** code for this rule:
+
+```gjs
+<template>
+  <button {{on "click" this.handleClick}}>Click</button>
+</template>
+```
+
+```gjs
+<template>
+  <div {{on "mouseenter" this.handleHover}}>Hover</div>
+</template>
+```
+
+## Options
+
+| Name                  | Type      | Default | Description                                                                                                       |
+| --------------------- | --------- | ------- | ----------------------------------------------------------------------------------------------------------------- |
+| `requireActionHelper` | `boolean` | `false` | When `true`, only flags events using `{{action ...}}`; when `false`, flags any dynamic value on event attributes. |
+
+## References
+
+- [Ember Octane migration guide](https://guides.emberjs.com/release/upgrading/current-edition/action-on-and-fn/)

lib/rules/template-no-element-event-actions.js

@@ -0,0 +1,72 @@
+/** @type {import('eslint').Rule.RuleModule} */
+module.exports = {
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description: 'disallow element event actions (use {{on}} modifier instead)',
+      category: 'Best Practices',
+      recommended: false,
+      url: 'https://github.com/ember-cli/eslint-plugin-ember/tree/master/docs/rules/template-no-element-event-actions.md',
+    },
+    fixable: null,
+    schema: [
+      {
+        type: 'object',
+        properties: {
+          requireActionHelper: { type: 'boolean' },
+        },
+        additionalProperties: false,
+      },
+    ],
+    messages: {
+      noElementEventActions: 'Do not use element event actions. Use the `on` modifier instead.',
+    },
+    strictGjs: true,
+    strictGts: true,
+  },
+
+  create(context) {
+    const options = context.options[0] || {};
+    const requireActionHelper = options.requireActionHelper || false;
+
+    return {
+      GlimmerElementNode(node) {
+        if (!node.attributes) {
+          return;
+        }
+
+        for (const attr of node.attributes) {
+          if (attr.type !== 'GlimmerAttrNode' || !attr.name) {
+            continue;
+          }
+          const name = attr.name.toLowerCase();
+          if (!name.startsWith('on')) {
+            continue;
+          }
+          // Skip non-event attributes like "once", "open", etc.
+          if (name.length <= 2) {
+            continue;
+          }
+
+          // If requireActionHelper is true, only flag when the value uses {{action ...}}
+          if (requireActionHelper) {
+            if (
+              attr.value?.type === 'GlimmerMustacheStatement' &&
+              attr.value.path?.original === 'action'
+            ) {
+              context.report({ node: attr, messageId: 'noElementEventActions' });
+            }
+          } else {
+            // Flag any mustache value on event attributes
+            if (
+              attr.value?.type === 'GlimmerMustacheStatement' ||
+              attr.value?.type === 'GlimmerConcatStatement'
+            ) {
+              context.report({ node: attr, messageId: 'noElementEventActions' });
+            }
+          }
+        }
+      },
+    };
+  },
+};

tests/lib/rules/template-no-element-event-actions.js

@@ -0,0 +1,73 @@
+const { RuleTester } = require('eslint');
+const rule = require('../../../lib/rules/template-no-element-event-actions');
+
+const ruleTester = new RuleTester({
+  parser: require.resolve('ember-eslint-parser'),
+  parserOptions: { ecmaVersion: 2022, sourceType: 'module' },
+});
+
+ruleTester.run('template-no-element-event-actions', rule, {
+  valid: [
+    {
+      filename: 'my-component.gjs',
+      code: `
+        import Component from '@glimmer/component';
+        export default class MyComponent extends Component {
+          <template>
+            <button {{on "click" this.handleClick}}>Click</button>
+          </template>
+        }
+      `,
+      output: null,
+    },
+    {
+      filename: 'my-component.gjs',
+      code: `
+        import Component from '@glimmer/component';
+        export default class MyComponent extends Component {
+          <template>
+            <div>No events</div>
+          </template>
+        }
+      `,
+      output: null,
+    },
+  ],
+
+  invalid: [
+    {
+      filename: 'my-component.gjs',
+      code: `
+        import Component from '@glimmer/component';
+        export default class MyComponent extends Component {
+          <template>
+            <button onclick={{this.handleClick}}>Click</button>
+          </template>
+        }
+      `,
+      output: null,
+      errors: [
+        {
+          messageId: 'noElementEventActions',
+        },
+      ],
+    },
+    {
+      filename: 'my-component.gjs',
+      code: `
+        import Component from '@glimmer/component';
+        export default class MyComponent extends Component {
+          <template>
+            <div onmouseenter={{this.handleHover}}>Hover</div>
+          </template>
+        }
+      `,
+      output: null,
+      errors: [
+        {
+          messageId: 'noElementEventActions',
+        },
+      ],
+    },
+  ],
+});