Add scope checking to template-no-arguments-for-html-elements

Author: NullVoxPopuli

lib/rules/template-no-arguments-for-html-elements.js

@@ -18,6 +18,7 @@ module.exports = {
   },
 
   create(context) {
+    const sourceCode = context.sourceCode;
     const HTML_ELEMENTS = new Set([
       'a',
       'abbr',
@@ -137,6 +138,13 @@ module.exports = {
           return;
         }
 
+        // If the tag name is a variable in scope, it's being used as a component, not an HTML element
+        const scope = sourceCode.getScope(node.parent);
+        const isVariable = scope.references.some((ref) => ref.identifier === node.parts[0]);
+        if (isVariable) {
+          return;
+        }
+
         // Check for @arguments
         for (const attr of node.attributes) {
           if (attr.type === 'GlimmerAttrNode' && attr.name.startsWith('@')) {

tests/lib/rules/template-no-arguments-for-html-elements.js

@@ -13,6 +13,11 @@ ruleTester.run('template-no-arguments-for-html-elements', rule, {
     '<template><MyComponent @title="Hello" @onClick={{this.handler}} /></template>',
     '<template><CustomButton @disabled={{true}} /></template>',
     '<template><input value={{this.value}} /></template>',
+    `let div = <template>{{@greeting}}</template>
+
+<template>
+  <div @greeting="hello" />
+</template>`
   ],
 
   invalid: [