From f9624f0cdab4c6de1fc221ab5b743bf9c080cc9d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Johan=20R=C3=B8ed?= <johanroed@gmail.com>
Date: Mon, 13 Apr 2026 17:21:10 +0200
Subject: [PATCH 1/2] Add autofix to
 template-no-unknown-arguments-for-builtin-components: rename args and migrate
 events
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 ...nknown-arguments-for-builtin-components.js | 94 ++++++++++++++++++-
 ...nknown-arguments-for-builtin-components.js | 54 +++++++----
 2 files changed, 128 insertions(+), 20 deletions(-)

diff --git a/lib/rules/template-no-unknown-arguments-for-builtin-components.js b/lib/rules/template-no-unknown-arguments-for-builtin-components.js
index 5b2c36a793..043e73a110 100644
--- a/lib/rules/template-no-unknown-arguments-for-builtin-components.js
+++ b/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,
           });
         }
 
diff --git a/tests/lib/rules/template-no-unknown-arguments-for-builtin-components.js b/tests/lib/rules/template-no-unknown-arguments-for-builtin-components.js
index 48f62799a0..aedabbac69 100644
--- a/tests/lib/rules/template-no-unknown-arguments-for-builtin-components.js
+++ b/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.

From 33faa9bc447f0b8614377aa2735233fc444addab Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Johan=20R=C3=B8ed?= <johanroed@gmail.com>
Date: Mon, 13 Apr 2026 18:07:01 +0200
Subject: [PATCH 2/2] Update docs: add fixable icon now that autofix is
 implemented

---
 README.md                                                       | 2 +-
 .../template-no-unknown-arguments-for-builtin-components.md     | 2 ++
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 6294da41dd..5477e02842 100644
--- a/README.md
+++ b/README.md
@@ -418,7 +418,7 @@ rules in templates can be disabled with eslint directives with mustache or html
 | [template-no-scope-outside-table-headings](docs/rules/template-no-scope-outside-table-headings.md)                         | disallow scope attribute outside th elements                      |    |    |    |
 | [template-no-shadowed-elements](docs/rules/template-no-shadowed-elements.md)                                               | disallow ambiguity with block param names shadowing HTML elements |    |    |    |
 | [template-no-unbalanced-curlies](docs/rules/template-no-unbalanced-curlies.md)                                             | disallow unbalanced mustache curlies                              |    |    |    |
-| [template-no-unknown-arguments-for-builtin-components](docs/rules/template-no-unknown-arguments-for-builtin-components.md) | disallow unknown arguments for built-in components                |    |    |    |
+| [template-no-unknown-arguments-for-builtin-components](docs/rules/template-no-unknown-arguments-for-builtin-components.md) | disallow unknown arguments for built-in components                |    | 🔧 |    |
 
 ### Routes
 
diff --git a/docs/rules/template-no-unknown-arguments-for-builtin-components.md b/docs/rules/template-no-unknown-arguments-for-builtin-components.md
index fa454ec909..7626bb0fa6 100644
--- a/docs/rules/template-no-unknown-arguments-for-builtin-components.md
+++ b/docs/rules/template-no-unknown-arguments-for-builtin-components.md
@@ -1,5 +1,7 @@
 # ember/template-no-unknown-arguments-for-builtin-components
 
+🔧 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 -->
 
 The builtin components `LinkTo`, `Input`, `Textarea` has list of allowed arguments, and some argument names may be mistyped, this rule trying to highlight possible typos, checking for unknown arguments, also, some components has conflicted and required arguments, rule addressing this behavior.