Extract rule: template-no-duplicate-attributes

Author: NullVoxPopuli

README.md

@@ -186,6 +186,7 @@ rules in templates can be disabled with eslint directives with mustache or html
 | :----------------------------------------------------------------------------------------- | :-------------------------------------------------------- | :- | :- | :- |
 | [template-builtin-component-arguments](docs/rules/template-builtin-component-arguments.md) | disallow setting certain attributes on builtin components |    |    |    |
 | [template-no-debugger](docs/rules/template-no-debugger.md)                                 | disallow {{debugger}} in templates                        |    |    |    |
+| [template-no-duplicate-attributes](docs/rules/template-no-duplicate-attributes.md)         | disallow duplicate attribute names in templates           |    | 🔧 |    |
 | [template-no-log](docs/rules/template-no-log.md)                                           | disallow {{log}} in templates                             |    |    |    |
 
 ### Components

docs/rules/template-no-duplicate-attributes.md

@@ -0,0 +1,59 @@
+# ember/template-no-duplicate-attributes
+
+🔧 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 -->
+
+Disallows duplicate attribute names in templates.
+
+Duplicate attributes on the same element can lead to unexpected behavior and are often a mistake.
+
+## Rule Details
+
+This rule disallows duplicate attributes on HTML elements, components, and helpers.
+
+## Examples
+
+Examples of **incorrect** code for this rule:
+
+```gjs
+<template>
+  <div class="foo" class="bar"></div>
+</template>
+```
+
+```gjs
+<template>
+  <input type="text" disabled type="email" />
+</template>
+```
+
+```gjs
+<template>
+  {{helper foo="bar" foo="baz"}}
+</template>
+```
+
+Examples of **correct** code for this rule:
+
+```gjs
+<template>
+  <div class="foo bar"></div>
+</template>
+```
+
+```gjs
+<template>
+  <input type="email" disabled />
+</template>
+```
+
+```gjs
+<template>
+  {{helper foo="bar" baz="qux"}}
+</template>
+```
+
+## References
+
+- [eslint-plugin-ember no-duplicate-attributes](https://github.com/eslint-plugin-ember/eslint-plugin-ember/blob/master/docs/rule/no-duplicate-attributes.md)

lib/rules/template-no-duplicate-attributes.js

@@ -0,0 +1,80 @@
+/** @type {import('eslint').Rule.RuleModule} */
+module.exports = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description: 'disallow duplicate attribute names in templates',
+      category: 'Best Practices',
+      strictGjs: true,
+      strictGts: true,
+      url: 'https://github.com/ember-cli/eslint-plugin-ember/tree/master/docs/rules/template-no-duplicate-attributes.md',
+    },
+    fixable: 'code',
+    schema: [],
+    messages: {
+      duplicateElement: "Duplicate attribute '{{name}}' found in the Element.",
+      duplicateBlock: "Duplicate attribute '{{name}}' found in the BlockStatement.",
+      duplicateMustache: "Duplicate attribute '{{name}}' found in the MustacheStatement.",
+      duplicateSubExpr: "Duplicate attribute '{{name}}' found in the SubExpression.",
+    },
+  },
+
+  create(context) {
+    function checkForDuplicates(node, attributes, identifier, messageId) {
+      if (!attributes || attributes.length < 2) {
+        return;
+      }
+
+      const seen = new Map();
+
+      for (const attr of attributes) {
+        const key = attr[identifier];
+        if (seen.has(key)) {
+          context.report({
+            node: attr,
+            messageId,
+            data: { name: key },
+            fix(fixer) {
+              // Remove the duplicate attribute including preceding whitespace
+              const sourceCode = context.sourceCode;
+              const text = sourceCode.getText();
+              const attrStart = attr.range[0];
+              const attrEnd = attr.range[1];
+
+              // Look for whitespace before the attribute
+              let removeStart = attrStart;
+              while (removeStart > 0 && /\s/.test(text[removeStart - 1])) {
+                removeStart--;
+              }
+
+              return fixer.removeRange([removeStart, attrEnd]);
+            },
+          });
+        } else {
+          seen.set(key, attr);
+        }
+      }
+    }
+
+    return {
+      GlimmerElementNode(node) {
+        checkForDuplicates(node, node.attributes, 'name', 'duplicateElement');
+      },
+
+      GlimmerBlockStatement(node) {
+        const attributes = node.hash?.pairs || [];
+        checkForDuplicates(node, attributes, 'key', 'duplicateBlock');
+      },
+
+      GlimmerMustacheStatement(node) {
+        const attributes = node.hash?.pairs || [];
+        checkForDuplicates(node, attributes, 'key', 'duplicateMustache');
+      },
+
+      GlimmerSubExpression(node) {
+        const attributes = node.hash?.pairs || [];
+        checkForDuplicates(node, attributes, 'key', 'duplicateSubExpr');
+      },
+    };
+  },
+};

tests/lib/rules/template-no-duplicate-attributes.js

@@ -0,0 +1,97 @@
+//------------------------------------------------------------------------------
+// Requirements
+//------------------------------------------------------------------------------
+
+const rule = require('../../../lib/rules/template-no-duplicate-attributes');
+const RuleTester = require('eslint').RuleTester;
+
+//------------------------------------------------------------------------------
+// Tests
+//------------------------------------------------------------------------------
+
+const ruleTester = new RuleTester({
+  parser: require.resolve('ember-eslint-parser'),
+  parserOptions: { ecmaVersion: 2022, sourceType: 'module' },
+});
+
+ruleTester.run('template-no-duplicate-attributes', rule, {
+  valid: [
+    `<template>
+      <div class="foo" id="bar"></div>
+    </template>`,
+    `<template>
+      <button type="button" disabled></button>
+    </template>`,
+    `<template>
+      {{helper arg1="a" arg2="b"}}
+    </template>`,
+    `<template>
+      {{#each items as |item|}}
+        {{item}}
+      {{/each}}
+    </template>`,
+  ],
+
+  invalid: [
+    {
+      code: `<template>
+        <div class="foo" class="bar"></div>
+      </template>`,
+      output: `<template>
+        <div class="foo"></div>
+      </template>`,
+      errors: [
+        {
+          message: "Duplicate attribute 'class' found in the Element.",
+          type: 'GlimmerAttrNode',
+        },
+      ],
+    },
+    {
+      code: `<template>
+        <input type="text" disabled type="email" />
+      </template>`,
+      output: `<template>
+        <input type="text" disabled />
+      </template>`,
+      errors: [
+        {
+          message: "Duplicate attribute 'type' found in the Element.",
+          type: 'GlimmerAttrNode',
+        },
+      ],
+    },
+    {
+      code: `<template>
+        {{helper foo="bar" foo="baz"}}
+      </template>`,
+      output: `<template>
+        {{helper foo="bar"}}
+      </template>`,
+      errors: [
+        {
+          message: "Duplicate attribute 'foo' found in the MustacheStatement.",
+          type: 'GlimmerHashPair',
+        },
+      ],
+    },
+    {
+      code: `<template>
+        {{#if condition key="a" key="b"}}
+          content
+        {{/if}}
+      </template>`,
+      output: `<template>
+        {{#if condition key="a"}}
+          content
+        {{/if}}
+      </template>`,
+      errors: [
+        {
+          message: "Duplicate attribute 'key' found in the BlockStatement.",
+          type: 'GlimmerHashPair',
+        },
+      ],
+    },
+  ],
+});