Merge pull request #2530 from johanrd/autofix/no-action-modifiers

Restore autofix: `template-no-action-modifiers`

Author: NullVoxPopuli

README.md

@@ -202,7 +202,7 @@ rules in templates can be disabled with eslint directives with mustache or html
 | Name                                                                                                         | Description                                                                  | 💼 | 🔧 | 💡 |
 | :----------------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------- | :- | :- | :- |
 | [template-builtin-component-arguments](docs/rules/template-builtin-component-arguments.md)                   | disallow setting certain attributes on builtin components                    |    |    |    |
-| [template-no-action-modifiers](docs/rules/template-no-action-modifiers.md)                                   | disallow usage of {{action}} modifiers                                       |    |    |    |
+| [template-no-action-modifiers](docs/rules/template-no-action-modifiers.md)                                   | disallow usage of {{action}} modifiers                                       |    | 🔧 |    |
 | [template-no-action-on-submit-button](docs/rules/template-no-action-on-submit-button.md)                     | disallow action attribute on submit buttons                                  |    |    |    |
 | [template-no-args-paths](docs/rules/template-no-args-paths.md)                                               | disallow args.foo paths in templates, use @foo instead                       |    | 🔧 |    |
 | [template-no-arguments-for-html-elements](docs/rules/template-no-arguments-for-html-elements.md)             | disallow @arguments on HTML elements                                         |    |    |    |

docs/rules/template-no-action-modifiers.md

@@ -1,5 +1,7 @@
 # ember/template-no-action-modifiers
 
+🔧 This rule is automatically fixable by the [`--fix` CLI option](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix).
+
 <!-- end auto-generated rule header -->
 
 💼 This rule is enabled in the following [configs](https://github.com/ember-cli/eslint-plugin-ember#-configurations): `strict-gjs`, `strict-gts`.

lib/rules/template-no-action-modifiers.js

@@ -9,7 +9,7 @@ module.exports = {
       strictGts: true,
       url: 'https://github.com/ember-cli/eslint-plugin-ember/tree/master/docs/rules/template-no-action-modifiers.md',
     },
-    fixable: null,
+    fixable: 'code',
     schema: [
       {
         oneOf: [
@@ -40,6 +40,7 @@ module.exports = {
   create(context) {
     const firstOption = context.options[0];
     const allowlist = Array.isArray(firstOption) ? firstOption : firstOption?.allowlist || [];
+    const sourceCode = context.sourceCode ?? context.getSourceCode();
 
     function checkForActionModifier(node) {
       if (
@@ -49,9 +50,35 @@ module.exports = {
         node.path.head?.type !== 'AtHead' &&
         node.path.head?.type !== 'ThisHead'
       ) {
+        // Only offer autofix when the first param is a path expression
+        const maybePath = node.params?.[0];
+        const canFix = maybePath && maybePath.type === 'GlimmerPathExpression';
+
         context.report({
           node,
           messageId: 'noActionModifier',
+          fix: canFix
+            ? (fixer) => {
+                const args = node.params.slice(1);
+                const pathText = sourceCode.getText(maybePath);
+
+                let replacement;
+                if (args.length === 0) {
+                  // {{action this.handleClick}} → {{on "click" this.handleClick}}
+                  replacement = `on "click" ${pathText}`;
+                } else {
+                  // {{action this.handleClick "arg"}} → {{on "click" (fn this.handleClick "arg")}}
+                  const argsText = args.map((a) => sourceCode.getText(a)).join(' ');
+                  replacement = `on "click" (fn ${pathText} ${argsText})`;
+                }
+
+                const lastParam = node.params.at(-1);
+                return fixer.replaceTextRange(
+                  [node.path.range[0], lastParam.range[1]],
+                  replacement
+                );
+              }
+            : null,
         });
       }
     }

tests/lib/rules/template-no-action-modifiers.js

@@ -18,7 +18,6 @@ ruleTester.run('template-no-action-modifiers', rule, {
       code: '<template><button {{action "save"}}>Save</button></template>',
       options: [{ allowlist: ['button'] }],
     },
-    // Array shorthand config format (matching ember-template-lint)
     {
       code: '<template><button {{action "save"}}>Save</button></template>',
       options: [['button']],
@@ -27,34 +26,40 @@ ruleTester.run('template-no-action-modifiers', rule, {
 
   invalid: [
     {
+      // String literal first param — no autofix
       code: '<template><button {{action "save"}}>Save</button></template>',
       output: null,
-      errors: [
-        {
-          message: 'Do not use action modifiers. Use on modifier with a function instead.',
-          type: 'GlimmerElementModifierStatement',
-        },
-      ],
+      errors: [{ messageId: 'noActionModifier' }],
     },
     {
       code: '<template><div {{action "onClick"}}>Click me</div></template>',
       output: null,
-      errors: [
-        {
-          message: 'Do not use action modifiers. Use on modifier with a function instead.',
-          type: 'GlimmerElementModifierStatement',
-        },
-      ],
+      errors: [{ messageId: 'noActionModifier' }],
     },
     {
       code: '<template><form {{action "submit" on="submit"}}>Submit</form></template>',
       output: null,
-      errors: [
-        {
-          message: 'Do not use action modifiers. Use on modifier with a function instead.',
-          type: 'GlimmerElementModifierStatement',
-        },
-      ],
+      errors: [{ messageId: 'noActionModifier' }],
+    },
+    {
+      // Path expression — autofix: {{action this.handleClick}} → {{on "click" this.handleClick}}
+      code: '<template><button {{action this.handleClick}}>Save</button></template>',
+      output: '<template><button {{on "click" this.handleClick}}>Save</button></template>',
+      errors: [{ messageId: 'noActionModifier' }],
+    },
+    {
+      // Path with args — autofix wraps in (fn ...)
+      code: '<template><button {{action this.handleClick "arg1"}}>Save</button></template>',
+      output:
+        '<template><button {{on "click" (fn this.handleClick "arg1")}}>Save</button></template>',
+      errors: [{ messageId: 'noActionModifier' }],
+    },
+    {
+      // Path with multiple args
+      code: '<template><button {{action this.handleClick "arg1" "arg2"}}>Save</button></template>',
+      output:
+        '<template><button {{on "click" (fn this.handleClick "arg1" "arg2")}}>Save</button></template>',
+      errors: [{ messageId: 'noActionModifier' }],
     },
   ],
 });