Merge pull request #2652 from johanrd/night_fix/template-no-link-to-tagname

Post-merge-review: Fix `template-no-link-to-tagname`: only flag `@tagName`, not bare `tagName`, on angle-bracket `<LinkTo>`

Author: NullVoxPopuli

lib/rules/template-no-link-to-tagname.js

@@ -1,14 +1,3 @@
-/**
- * @param {any} node
- * @returns {boolean}
- */
-function isLinkToComponent(node) {
-  if (node.type === 'GlimmerElementNode') {
-    return node.tag === 'LinkTo' || node.tag === 'link-to';
-  }
-  return false;
-}
-
 /** @type {import('eslint').Rule.RuleModule} */
 module.exports = {
   meta: {
@@ -21,7 +10,8 @@ module.exports = {
     },
     schema: [],
     messages: {
-      noLinkToTagname: 'tagName attribute on LinkTo is deprecated',
+      noLinkToTagname:
+        '@tagName on <LinkTo> is not supported (removed in Ember 4.0). <LinkTo> always renders an <a> element.',
     },
     originallyFrom: {
       name: 'ember-template-lint',
@@ -32,6 +22,27 @@ module.exports = {
   },
 
   create(context) {
+    const filename = context.filename;
+    const isStrictMode = filename.endsWith('.gjs') || filename.endsWith('.gts');
+
+    // In HBS, `LinkTo` almost always refers to Ember's router link component; a
+    // user-defined `link-to` could shadow it, but detecting that in classic HBS
+    // would require resolver-level info the rule doesn't have.
+    // In GJS/GTS, LinkTo must be explicitly imported from '@ember/routing'
+    // (and may be renamed, e.g. `import { LinkTo as Link } from '@ember/routing'`).
+    // local alias → true
+    const importedLinkComponents = new Map();
+
+    function isLinkToComponent(node) {
+      if (node.type !== 'GlimmerElementNode') {
+        return false;
+      }
+      if (isStrictMode) {
+        return importedLinkComponents.has(node.tag);
+      }
+      return node.tag === 'LinkTo' || node.tag === 'link-to';
+    }
+
     function checkHashPairsForTagName(node) {
       if (!node.hash || !node.hash.pairs) {
         return;
@@ -46,14 +57,27 @@ module.exports = {
     }
 
     return {
+      ImportDeclaration(node) {
+        if (!isStrictMode) {
+          return;
+        }
+        if (node.source.value !== '@ember/routing') {
+          return;
+        }
+        for (const specifier of node.specifiers) {
+          if (specifier.type === 'ImportSpecifier' && specifier.imported.name === 'LinkTo') {
+            importedLinkComponents.set(specifier.local.name, true);
+          }
+        }
+      },
+
       GlimmerElementNode(node) {
         if (!isLinkToComponent(node)) {
           return;
         }
 
         const tagNameAttr = node.attributes.find(
-          (attr) =>
-            attr.type === 'GlimmerAttrNode' && (attr.name === 'tagName' || attr.name === '@tagName')
+          (attr) => attr.type === 'GlimmerAttrNode' && attr.name === '@tagName'
         );
 
         if (tagNameAttr) {

tests/lib/rules/template-no-link-to-tagname.js

@@ -10,7 +10,7 @@ ruleTester.run('template-no-link-to-tagname', rule, {
   valid: [
     {
       filename: 'test.gjs',
-      code: '<template><LinkTo @route="index">Home</LinkTo></template>',
+      code: 'import { LinkTo } from \'@ember/routing\';\n<template><LinkTo @route="index">Home</LinkTo></template>',
       output: null,
     },
     {
@@ -24,6 +24,24 @@ ruleTester.run('template-no-link-to-tagname', rule, {
       output: null,
     },
 
+    // User-authored LinkTo component (no @ember/routing import) — should NOT be flagged
+    {
+      filename: 'test.gjs',
+      code: '<template><LinkTo @tagName="button">Home</LinkTo></template>',
+      output: null,
+    },
+    {
+      filename: 'test.gts',
+      code: '<template><LinkTo @tagName="button">Home</LinkTo></template>',
+      output: null,
+    },
+
+    // Bare tagName (without @) is just an HTML attribute, not flagged
+    {
+      filename: 'test.gjs',
+      code: 'import { LinkTo } from \'@ember/routing\';\n<template><LinkTo @route="index" tagName="button">Home</LinkTo></template>',
+      output: null,
+    },
     '<template><Foo @route="routeName" @tagName="button">Link text</Foo></template>',
     '<template><LinkTo @route="routeName">Link text</LinkTo></template>',
     '<template>{{#link-to "routeName"}}Link text{{/link-to}}</template>',
@@ -35,19 +53,26 @@ ruleTester.run('template-no-link-to-tagname', rule, {
   invalid: [
     {
       filename: 'test.gjs',
-      code: '<template><LinkTo @route="index" tagName="button">Home</LinkTo></template>',
+      code: 'import { LinkTo } from \'@ember/routing\';\n<template><LinkTo @route="about" @tagName="span">About</LinkTo></template>',
       output: null,
       errors: [{ messageId: 'noLinkToTagname' }],
     },
     {
-      filename: 'test.gjs',
-      code: '<template><LinkTo @route="about" @tagName="span">About</LinkTo></template>',
+      filename: 'test.gts',
+      code: 'import { LinkTo } from \'@ember/routing\';\n<template><LinkTo @route="about" @tagName="span">About</LinkTo></template>',
       output: null,
       errors: [{ messageId: 'noLinkToTagname' }],
     },
+    // Renamed import
     {
       filename: 'test.gjs',
-      code: '<template><link-to @route="contact" tagName="div">Contact</link-to></template>',
+      code: 'import { LinkTo as Link } from \'@ember/routing\';\n<template><Link @tagName="button">x</Link></template>',
+      output: null,
+      errors: [{ messageId: 'noLinkToTagname' }],
+    },
+    {
+      filename: 'test.gts',
+      code: 'import { LinkTo as Link } from \'@ember/routing\';\n<template><Link @route="index" @tagName="button">x</Link></template>',
       output: null,
       errors: [{ messageId: 'noLinkToTagname' }],
     },
@@ -80,6 +105,8 @@ const hbsRuleTester = new RuleTester({
 
 hbsRuleTester.run('template-no-link-to-tagname', rule, {
   valid: [
+    // Bare tagName (without @) is just an HTML attribute, not flagged
+    '<LinkTo @route="index" tagName="button">Home</LinkTo>',
     '<Foo @route="routeName" @tagName="button">Link text</Foo>',
     '<LinkTo @route="routeName">Link text</LinkTo>',
     '{{#link-to "routeName"}}Link text{{/link-to}}',
@@ -91,17 +118,42 @@ hbsRuleTester.run('template-no-link-to-tagname', rule, {
     {
       code: '<LinkTo @route="routeName" @tagName="button">Link text</LinkTo>',
       output: null,
-      errors: [{ message: 'tagName attribute on LinkTo is deprecated' }],
+      errors: [
+        {
+          message:
+            '@tagName on <LinkTo> is not supported (removed in Ember 4.0). <LinkTo> always renders an <a> element.',
+        },
+      ],
+    },
+    {
+      code: '<link-to @route="contact" @tagName="div">Contact</link-to>',
+      output: null,
+      errors: [
+        {
+          message:
+            '@tagName on <LinkTo> is not supported (removed in Ember 4.0). <LinkTo> always renders an <a> element.',
+        },
+      ],
     },
     {
       code: '{{#link-to "routeName" tagName="button"}}Link text{{/link-to}}',
       output: null,
-      errors: [{ message: 'tagName attribute on LinkTo is deprecated' }],
+      errors: [
+        {
+          message:
+            '@tagName on <LinkTo> is not supported (removed in Ember 4.0). <LinkTo> always renders an <a> element.',
+        },
+      ],
     },
     {
       code: '{{link-to "Link text" "routeName" tagName="button"}}',
       output: null,
-      errors: [{ message: 'tagName attribute on LinkTo is deprecated' }],
+      errors: [
+        {
+          message:
+            '@tagName on <LinkTo> is not supported (removed in Ember 4.0). <LinkTo> always renders an <a> element.',
+        },
+      ],
     },
   ],
 });