Post-merge-review: extend allowlist with svg-tags on template-no-block-params-for-html-elements

lib/rules/template-no-block-params-for-html-elements.js

@@ -1,6 +1,10 @@
-/** @type {import('eslint').Rule.RuleModule} */
 const htmlTags = require('html-tags');
+const svgTags = require('svg-tags');
+const { mathmlTagNames } = require('mathml-tag-names');
+
+const ELEMENT_TAGS = new Set([...htmlTags, ...svgTags, ...mathmlTagNames]);
 
+/** @type {import('eslint').Rule.RuleModule} */
 module.exports = {
   meta: {
     type: 'problem',
@@ -20,23 +24,21 @@ module.exports = {
 
   create(context) {
     const sourceCode = context.sourceCode;
-    const HTML_ELEMENTS = new Set(htmlTags);
 
     return {
       GlimmerElementNode(node) {
-        // Check if this is an HTML element (lowercase)
-        if (!HTML_ELEMENTS.has(node.tag)) {
+        if (!ELEMENT_TAGS.has(node.tag)) {
           return;
         }
 
-        // If the tag name is a variable in scope, it's being used as a component, not an HTML element
+        // A known HTML/SVG tag can still be a component if it's bound in scope
+        // (block param, import, local).
         const scope = sourceCode.getScope(node.parent);
         const isVariable = scope.references.some((ref) => ref.identifier === node.parts[0]);
         if (isVariable) {
           return;
         }
 
-        // Check for block params
         if (node.blockParams && node.blockParams.length > 0) {
           context.report({
             node,

package.json

@@ -66,15 +66,17 @@
     "aria-query": "^5.3.2",
     "css-tree": "^3.0.1",
     "editorconfig": "^3.0.2",
-    "ember-eslint-parser": "^0.9.0",
+    "ember-eslint-parser": "^0.10.0",
     "ember-rfc176-data": "^0.3.18",
     "eslint-utils": "^3.0.0",
     "estraverse": "^5.3.0",
     "html-tags": "^3.3.1",
     "lodash.camelcase": "^4.3.0",
     "lodash.kebabcase": "^4.1.1",
+    "mathml-tag-names": "^4.0.0",
     "requireindex": "^1.2.0",
-    "snake-case": "^3.0.3"
+    "snake-case": "^3.0.3",
+    "svg-tags": "^1.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.25.9",

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

@@ -17,6 +17,11 @@ ruleTester.run('template-no-block-params-for-html-elements', rule, {
     '<template><MyComponent as |item|>{{item.name}}</MyComponent></template>',
     '<template>{{#each this.items as |item|}}<li>{{item}}</li>{{/each}}</template>',
     '<template><button>Click</button></template>',
+    // Custom elements aren't in the html-tags/svg-tags allowlists, so they're
+    // not flagged. Accepted false negative — web component namespace is open.
+    '<template><my-element as |x|>{{x}}</my-element></template>',
+    // Namespaced/path component invocations aren't in the allowlists either.
+    '<template><NS.Foo as |x|>{{x}}</NS.Foo></template>',
   ],
 
   invalid: [
@@ -50,5 +55,27 @@ ruleTester.run('template-no-block-params-for-html-elements', rule, {
         },
       ],
     },
+    {
+      // SVG element — in svg-tags allowlist.
+      code: '<template><circle as |r|>{{r}}</circle></template>',
+      output: null,
+      errors: [
+        {
+          message: 'Block params can only be used with components, not HTML elements.',
+          type: 'GlimmerElementNode',
+        },
+      ],
+    },
+    {
+      // MathML element — in mathml-tag-names allowlist.
+      code: '<template><mfrac as |num|>{{num}}</mfrac></template>',
+      output: null,
+      errors: [
+        {
+          message: 'Block params can only be used with components, not HTML elements.',
+          type: 'GlimmerElementNode',
+        },
+      ],
+    },
   ],
 });