Add autofix to template-no-unknown-arguments-for-builtin-components: rename args and migrate events

Mirrors upstream's autofix:
- @elementId/@disabled/@class/@tabindex/etc. → HTML attribute rename
- @click/@focus/etc. → {{on "event" expr}} modifier migration
- Remove-only autofix for deprecated-but-unmigratable args (@TagName, @bubbles, @init)
Truly unknown args still report without fix.

Author: johanrd

lib/rules/template-no-unknown-arguments-for-builtin-components.js

@@ -382,6 +382,17 @@ function checkRequired(nodeMeta, node, seen, context) {
   }
 }
 
+// Rename `@argName=value` to `newName=value` — strips the `@` and swaps
+// the identifier. Used when a deprecated argument has a direct HTML
+// attribute replacement (e.g. `@elementId` -> `id`).
+function buildRenameFix(attr, newName) {
+  return (fixer) => {
+    const nameStart = attr.range[0];
+    const nameEnd = nameStart + attr.name.length;
+    return fixer.replaceTextRange([nameStart, nameEnd], newName);
+  };
+}
+
 /** @type {import('eslint').Rule.RuleModule} */
 module.exports = {
   meta: {
@@ -392,7 +403,7 @@ module.exports = {
       url: 'https://github.com/ember-cli/eslint-plugin-ember/tree/master/docs/rules/template-no-unknown-arguments-for-builtin-components.md',
       templateMode: 'both',
     },
-    fixable: null,
+    fixable: 'code',
     schema: [],
     messages: {
       unknownArgument: '{{message}}',
@@ -410,6 +421,83 @@ module.exports = {
   create(context) {
     const sourceCode = context.sourceCode;
 
+    // Remove the attribute entirely (including any preceding whitespace that
+    // separates it from the previous token).
+    function buildRemovalFix(attr) {
+      return (fixer) => {
+        const text = sourceCode.getText();
+        const attrStart = attr.range[0];
+        const attrEnd = attr.range[1];
+
+        let removeStart = attrStart;
+        while (removeStart > 0 && /\s/.test(text[removeStart - 1])) {
+          removeStart--;
+        }
+
+        return fixer.removeRange([removeStart, attrEnd]);
+      };
+    }
+
+    // Migrate `@eventName={{expr}}` to `{{on "htmlEvent" expr}}` modifier
+    // (or `{{on "htmlEvent" (helper ...params)}}` when the value is a call).
+    // Only safe when the attribute value is a mustache expression.
+    function buildEventMigrationFix(attr, htmlEventName) {
+      return (fixer) => {
+        const valueText = sourceCode.getText(attr.value);
+        // Strip outer `{{` and `}}` to get the expression text.
+        let inner = valueText;
+        if (inner.startsWith('{{') && inner.endsWith('}}')) {
+          inner = inner.slice(2, -2).trim();
+        }
+        // If the value has parameters (e.g. `action this.click`), wrap as
+        // a sub-expression so the modifier receives a single callable.
+        const hasParams =
+          attr.value &&
+          attr.value.type === 'GlimmerMustacheStatement' &&
+          Array.isArray(attr.value.params) &&
+          attr.value.params.length > 0;
+        const expr = hasParams ? `(${inner})` : inner;
+        const modifier = `{{on "${htmlEventName}" ${expr}}}`;
+        return fixer.replaceTextRange([attr.range[0], attr.range[1]], modifier);
+      };
+    }
+
+    function buildFix(node, attr) {
+      const tagMeta = KnownArguments[node.tag];
+      if (!tagMeta) {
+        return null;
+      }
+      const deprecatedArgs = tagMeta.deprecatedArguments || {};
+      const deprecatedEvents = tagMeta.deprecatedEvents || {};
+
+      if (attr.name in deprecatedArgs) {
+        const replacement = deprecatedArgs[attr.name];
+        if (replacement) {
+          // Rename to the equivalent HTML attribute.
+          return buildRenameFix(attr, replacement);
+        }
+        // No replacement attribute — just remove the deprecated arg.
+        return buildRemovalFix(attr);
+      }
+
+      if (attr.name in deprecatedEvents) {
+        const replacement = deprecatedEvents[attr.name];
+        if (!replacement) {
+          // No replacement event (e.g. `@bubbles`) — just remove.
+          return buildRemovalFix(attr);
+        }
+        // Only migrate to `{{on}}` when the value is a mustache expression.
+        // Otherwise (string literal, valueless), leave unfixed.
+        if (attr.value && attr.value.type === 'GlimmerMustacheStatement') {
+          return buildEventMigrationFix(attr, replacement);
+        }
+        return null;
+      }
+
+      // Truly unknown argument (typo) — no autofix.
+      return null;
+    }
+
     return {
       GlimmerElementNode(node) {
         if (!node.tag || !node.attributes) {
@@ -451,12 +539,14 @@ module.exports = {
           }
         }
 
-        // Report unknown/deprecated arguments
+        // Report unknown/deprecated arguments.
         for (const attr of warns) {
+          const fix = buildFix(node, attr);
           context.report({
             node: attr,
             messageId: 'unknownArgument',
             data: { message: getErrorMessage(node.tag, attr.name) },
+            fix: fix || null,
           });
         }
 

tests/lib/rules/template-no-unknown-arguments-for-builtin-components.js

@@ -135,55 +135,72 @@ ruleTester.run('template-no-unknown-arguments-for-builtin-components', rule, {
       errors: [{ messageId: 'conflictArgument' }, { messageId: 'conflictArgument' }],
     },
     {
+      // Deprecated argument without a replacement attribute — autofixed by removal.
       code: '<template><LinkTo @route="info" @model={{this.model}} @tagName="button" /></template>',
-      output: null,
+      output: '<template><LinkTo @route="info" @model={{this.model}} /></template>',
       errors: [{ messageId: 'unknownArgument' }],
     },
     {
+      // Deprecated argument with replacement — autofixed by renaming to the HTML attribute.
       code: '<template><LinkTo @route="info" @model={{this.model}} @elementId="superstar" /></template>',
-      output: null,
+      output: '<template><LinkTo @route="info" @model={{this.model}} id="superstar" /></template>',
       errors: [{ messageId: 'unknownArgument' }],
     },
     {
+      // Deprecated event with a helper invocation value — migrated to an `{{on}}` modifier with the helper as a sub-expression.
       code: '<template><LinkTo @route="info" @model={{this.model}} @doubleClick={{action this.click}} /></template>',
-      output: null,
+      output:
+        '<template><LinkTo @route="info" @model={{this.model}} {{on "dblclick" (action this.click)}} /></template>',
       errors: [{ messageId: 'unknownArgument' }],
     },
     {
+      // Deprecated argument without a replacement attribute — autofixed by removal.
       code: '<template><Input @value="1" @bubbles={{false}} /></template>',
-      output: null,
+      output: '<template><Input @value="1" /></template>',
       errors: [{ messageId: 'unknownArgument' }],
     },
     {
+      // Two deprecated arguments on Input — both renamed to HTML attributes.
       code: '<template><Input @value="1" @elementId="42" @disabled="disabled" /></template>',
-      output: null,
+      output: '<template><Input @value="1" id="42" disabled="disabled" /></template>',
       errors: [{ messageId: 'unknownArgument' }, { messageId: 'unknownArgument' }],
     },
     {
+      // Deprecated event with a simple path value — migrated to an `{{on}}` modifier.
       code: '<template><Input @value="1" @key-up={{ths.onKeyUp}} /></template>',
-      output: null,
+      output: '<template><Input @value="1" {{on "keyup" ths.onKeyUp}} /></template>',
       errors: [{ messageId: 'unknownArgument' }],
     },
     {
+      // Deprecated argument without a replacement attribute — autofixed by removal.
       code: '<template><Textarea @value="1" @bubbles={{false}} /></template>',
-      output: null,
+      output: '<template><Textarea @value="1" /></template>',
       errors: [{ messageId: 'unknownArgument' }],
     },
     {
+      // Deprecated argument with replacement — autofixed by renaming to the HTML attribute.
       code: '<template><Textarea @value="1" @elementId="42" /></template>',
-      output: null,
+      output: '<template><Textarea @value="1" id="42" /></template>',
       errors: [{ messageId: 'unknownArgument' }],
     },
     {
+      // Deprecated event with a simple path value — migrated to an `{{on}}` modifier.
       code: '<template><Textarea @value="1" @key-up={{ths.onKeyUp}} /></template>',
-      output: null,
+      output: '<template><Textarea @value="1" {{on "keyup" ths.onKeyUp}} /></template>',
       errors: [{ messageId: 'unknownArgument' }],
     },
     {
+      // Truly unknown/typo argument — not autofixed.
       code: '<template> <LinkTo class="auk-search-results-list__item" @route={{@route}} @models={{this.models}} @random="test" @query={{@query}} ...attributes >Hello</LinkTo></template>',
       output: null,
       errors: [{ messageId: 'unknownArgument' }],
     },
+    {
+      // Deprecated event with a string-literal value — cannot migrate to `{{on}}`, so no autofix.
+      code: '<template><Input @value="1" @click="noop" /></template>',
+      output: null,
+      errors: [{ messageId: 'unknownArgument' }],
+    },
 
     // Missing required arguments
     {
@@ -271,12 +288,12 @@ hbsRuleTester.run('template-no-unknown-arguments-for-builtin-components', rule,
     },
     {
       code: '<LinkTo @route="info" @model={{this.model}} @tagName="button" />',
-      output: null,
+      output: '<LinkTo @route="info" @model={{this.model}} />',
       errors: [{ message: 'Passing the "@tagName" argument to <LinkTo /> is deprecated.' }],
     },
     {
       code: '<LinkTo @route="info" @model={{this.model}} @elementId="superstar" />',
-      output: null,
+      output: '<LinkTo @route="info" @model={{this.model}} id="superstar" />',
       errors: [
         {
           message: `Passing the "@elementId" argument to <LinkTo /> is deprecated.
@@ -286,7 +303,8 @@ Instead, please pass the attribute directly, i.e. "<LinkTo id={{...}} />" instea
     },
     {
       code: '<LinkTo @route="info" @model={{this.model}} @doubleClick={{action this.click}} />',
-      output: null,
+      output:
+        '<LinkTo @route="info" @model={{this.model}} {{on "dblclick" (action this.click)}} />',
       errors: [
         {
           message: `Passing the "@doubleClick" argument to <LinkTo /> is deprecated.
@@ -296,12 +314,12 @@ Instead, please use the {{on}} modifier, i.e. "<LinkTo {{on "dblclick" ...}} />"
     },
     {
       code: '<Input @value="1" @bubbles={{false}} />',
-      output: null,
+      output: '<Input @value="1" />',
       errors: [{ message: 'Passing the "@bubbles" argument to <Input /> is deprecated.' }],
     },
     {
       code: '<Input @value="1" @elementId="42" @disabled="disabled" />',
-      output: null,
+      output: '<Input @value="1" id="42" disabled="disabled" />',
       errors: [
         {
           message: `Passing the "@elementId" argument to <Input /> is deprecated.
@@ -315,7 +333,7 @@ Instead, please pass the attribute directly, i.e. "<Input disabled={{...}} />" i
     },
     {
       code: '<Input @value="1" @key-up={{ths.onKeyUp}} />',
-      output: null,
+      output: '<Input @value="1" {{on "keyup" ths.onKeyUp}} />',
       errors: [
         {
           message: `Passing the "@key-up" argument to <Input /> is deprecated.
@@ -325,12 +343,12 @@ Instead, please use the {{on}} modifier, i.e. "<Input {{on "keyup" ...}} />" ins
     },
     {
       code: '<Textarea @value="1" @bubbles={{false}} />',
-      output: null,
+      output: '<Textarea @value="1" />',
       errors: [{ message: 'Passing the "@bubbles" argument to <Textarea /> is deprecated.' }],
     },
     {
       code: '<Textarea @value="1" @elementId="42" />',
-      output: null,
+      output: '<Textarea @value="1" id="42" />',
       errors: [
         {
           message: `Passing the "@elementId" argument to <Textarea /> is deprecated.
@@ -340,7 +358,7 @@ Instead, please pass the attribute directly, i.e. "<Textarea id={{...}} />" inst
     },
     {
       code: '<Textarea @value="1" @key-up={{ths.onKeyUp}} />',
-      output: null,
+      output: '<Textarea @value="1" {{on "keyup" ths.onKeyUp}} />',
       errors: [
         {
           message: `Passing the "@key-up" argument to <Textarea /> is deprecated.