Extract rule: template-no-duplicate-id

NullVoxPopuli · NullVoxPopuli · commit 3b4ba9600278 · 2026-03-10T18:27:26.000-04:00
diff --git a/README.md b/README.md
@@ -202,6 +202,7 @@ rules in templates can be disabled with eslint directives with mustache or html
 | [template-no-capital-arguments](docs/rules/template-no-capital-arguments.md)                           | disallow capital arguments (use lowercase @arg instead of @Arg) |    |    |    |
 | [template-no-chained-this](docs/rules/template-no-chained-this.md)                                     | disallow redundant `this.this` in templates                     |    | 🔧 |    |
 | [template-no-debugger](docs/rules/template-no-debugger.md)                                             | disallow {{debugger}} in templates                              |    |    |    |
+| [template-no-duplicate-id](docs/rules/template-no-duplicate-id.md)                                     | disallow duplicate id attributes                                |    |    |    |
 | [template-no-element-event-actions](docs/rules/template-no-element-event-actions.md)                   | disallow element event actions (use {{on}} modifier instead)    |    |    |    |
 | [template-no-inline-event-handlers](docs/rules/template-no-inline-event-handlers.md)                   | disallow DOM event handler attributes                           |    |    |    |
 | [template-no-inline-styles](docs/rules/template-no-inline-styles.md)                                   | disallow inline styles                                          |    |    |    |
diff --git a/docs/rules/template-no-duplicate-id.md b/docs/rules/template-no-duplicate-id.md
@@ -0,0 +1,46 @@
+# ember/template-no-duplicate-id
+
+<!-- end auto-generated rule header -->
+
+Valid HTML requires that `id` attribute values are unique.
+
+This rule does a basic check to ensure that `id` attribute values are not the same.
+
+## Examples
+
+This rule **forbids** the following:
+
+```gjs
+<template><div id='id-00'></div><div id='id-00'></div></template>
+```
+
+This rule **allows** the following:
+
+```gjs
+<template><div id={{this.divId}}></div></template>
+```
+
+```gjs
+<template><div id='concat-{{this.divId}}'></div></template>
+```
+
+```gjs
+<template>
+  <MyComponent as |inputProperties|>
+    <Input id={{inputProperties.id}} />
+    <div id={{inputProperties.abc}} />
+  </MyComponent>
+
+  <MyComponent as |inputProperties|>
+    <Input id={{inputProperties.id}} />
+  </MyComponent>
+</template>
+```
+
+## Migration
+
+For best results, it is recommended to generate `id` attribute values when they are needed, to ensure that they are not duplicates.
+
+## References
+
+- <https://www.w3.org/TR/2011/WD-html5-20110525/elements.html#the-id-attribute>
diff --git a/lib/rules/template-no-duplicate-id.js b/lib/rules/template-no-duplicate-id.js
@@ -0,0 +1,238 @@
+const IGNORE_IDS = new Set(['{{unique-id}}', '{{(unique-id)}}']);
+
+function isControlFlowHelper(node) {
+  if (node.type === 'GlimmerBlockStatement' && node.path?.type === 'GlimmerPathExpression') {
+    return ['if', 'unless', 'each', 'each-in', 'let', 'with'].includes(node.path.original);
+  }
+  return false;
+}
+
+function isIfUnless(node) {
+  if (node.type === 'GlimmerBlockStatement' && node.path?.type === 'GlimmerPathExpression') {
+    return ['if', 'unless'].includes(node.path.original);
+  }
+  return false;
+}
+
+/** @type {import('eslint').Rule.RuleModule} */
+module.exports = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description: 'disallow duplicate id attributes',
+      category: 'Best Practices',
+      url: 'https://github.com/ember-cli/eslint-plugin-ember/tree/master/docs/rules/template-no-duplicate-id.md',
+      templateMode: 'both',
+    },
+    schema: [],
+    messages: { duplicate: 'ID attribute values must be unique' },
+    originallyFrom: {
+      name: 'ember-template-lint',
+      rule: 'lib/rules/no-duplicate-id.js',
+      docs: 'docs/rule/no-duplicate-id.md',
+      tests: 'test/unit/rules/no-duplicate-id-test.js',
+    },
+  },
+  create(context) {
+    const sourceCode = context.getSourceCode();
+    // Stack-based conditional scoping to handle if/else branches
+    let seenIdStack = [];
+    let conditionalStack = [];
+    let conditionalReportedDuplicates = [];
+
+    function enterTemplate() {
+      seenIdStack = [new Set()];
+      conditionalStack = [];
+      conditionalReportedDuplicates = [];
+    }
+
+    function isDuplicateId(id) {
+      for (const seenIds of seenIdStack) {
+        if (seenIds.has(id)) {
+          return true;
+        }
+      }
+      return false;
+    }
+
+    function addId(id) {
+      seenIdStack.at(-1).add(id);
+      if (conditionalStack.length > 0) {
+        conditionalStack.at(-1).add(id);
+      }
+    }
+
+    function enterConditional() {
+      conditionalStack.push(new Set());
+      conditionalReportedDuplicates.push(new Set());
+    }
+
+    function exitConditional() {
+      const idsInConditional = conditionalStack.pop();
+      conditionalReportedDuplicates.pop();
+      if (conditionalStack.length > 0) {
+        for (const id of idsInConditional) {
+          conditionalStack.at(-1).add(id);
+        }
+      } else {
+        seenIdStack.push(idsInConditional);
+      }
+    }
+
+    function enterConditionalBranch() {
+      seenIdStack.push(new Set());
+    }
+
+    function exitConditionalBranch() {
+      seenIdStack.pop();
+    }
+
+    function resolveIdValue(valueNode, node) {
+      if (!valueNode) {
+        return null;
+      }
+
+      switch (valueNode.type) {
+        case 'GlimmerTextNode': {
+          return valueNode.chars || null;
+        }
+        case 'GlimmerStringLiteral': {
+          return valueNode.value || null;
+        }
+        case 'GlimmerMustacheStatement': {
+          // Try to resolve {{...}} - if it's a string literal path, use value
+          if (valueNode.path?.type === 'GlimmerStringLiteral') {
+            return valueNode.path.value;
+          }
+          // For path expressions, use the source text as a best-effort unique key
+          return sourceCode.getText(valueNode);
+        }
+        case 'GlimmerConcatStatement': {
+          // Concatenate resolved parts
+          if (valueNode.parts) {
+            return valueNode.parts
+              .map((part) => {
+                if (part.type === 'GlimmerTextNode') {
+                  return part.chars;
+                }
+                if (
+                  part.type === 'GlimmerMustacheStatement' &&
+                  part.path?.type === 'GlimmerStringLiteral'
+                ) {
+                  return part.path.value;
+                }
+                return sourceCode.getText(part);
+              })
+              .join('');
+          }
+          return sourceCode.getText(valueNode);
+        }
+        default: {
+          return sourceCode.getText(valueNode);
+        }
+      }
+    }
+
+    function logIfDuplicate(reportNode, id) {
+      if (!id) {
+        return;
+      }
+      if (IGNORE_IDS.has(id)) {
+        return;
+      }
+      if (isDuplicateId(id)) {
+        // If inside a conditional, only report each duplicate ID once across branches
+        if (conditionalReportedDuplicates.length > 0) {
+          const reported = conditionalReportedDuplicates.at(-1);
+          if (reported.has(id)) {
+            return;
+          }
+          reported.add(id);
+        }
+        context.report({ node: reportNode, messageId: 'duplicate' });
+      } else {
+        addId(id);
+      }
+    }
+
+    return {
+      GlimmerTemplate() {
+        enterTemplate();
+      },
+      'GlimmerTemplate:exit'() {
+        seenIdStack = [new Set()];
+        conditionalStack = [];
+        conditionalReportedDuplicates = [];
+      },
+
+      GlimmerElementNode(node) {
+        // If element has block params, enter a scope
+        if (node.blockParams && node.blockParams.length > 0) {
+          seenIdStack.push(new Set());
+        }
+
+        // Check id, @id, @elementId attributes
+        const idAttrNames = new Set(['id', '@id', '@elementId']);
+        for (const attr of node.attributes || []) {
+          if (idAttrNames.has(attr.name)) {
+            const id = resolveIdValue(attr.value, node);
+            logIfDuplicate(attr, id);
+          }
+        }
+      },
+
+      'GlimmerElementNode:exit'(node) {
+        if (node.blockParams && node.blockParams.length > 0) {
+          seenIdStack.pop();
+        }
+      },
+
+      // Handle hash pairs in mustache/block statements (e.g., {{input elementId="foo"}})
+      GlimmerMustacheStatement(node) {
+        if (node.hash && node.hash.pairs) {
+          for (const pair of node.hash.pairs) {
+            if (['elementId', 'id'].includes(pair.key)) {
+              if (pair.value?.type === 'GlimmerStringLiteral') {
+                logIfDuplicate(pair, pair.value.value);
+              }
+            }
+          }
+        }
+      },
+
+      GlimmerBlockStatement(node) {
+        if (isControlFlowHelper(node)) {
+          enterConditional();
+        } else if (node.hash && node.hash.pairs) {
+          for (const pair of node.hash.pairs) {
+            if (['elementId', 'id'].includes(pair.key)) {
+              if (pair.value?.type === 'GlimmerStringLiteral') {
+                logIfDuplicate(pair, pair.value.value);
+              }
+            }
+          }
+        }
+      },
+
+      'GlimmerBlockStatement:exit'(node) {
+        if (isControlFlowHelper(node)) {
+          exitConditional();
+        }
+      },
+
+      GlimmerBlock(node) {
+        const parent = node.parent;
+        if (parent && isIfUnless(parent)) {
+          enterConditionalBranch();
+        }
+      },
+
+      'GlimmerBlock:exit'(node) {
+        const parent = node.parent;
+        if (parent && isIfUnless(parent)) {
+          exitConditionalBranch();
+        }
+      },
+    };
+  },
+};
diff --git a/tests/lib/rules/template-no-duplicate-id.js b/tests/lib/rules/template-no-duplicate-id.js
