Merge pull request #2535 from johanrd/autofix-complex/attribute-order

Restore autofix: `template-attribute-order`

Author: NullVoxPopuli

README.md

@@ -405,7 +405,7 @@ rules in templates can be disabled with eslint directives with mustache or html
 | [order-in-models](docs/rules/order-in-models.md)                               | enforce proper order of properties in models                                   |    | 🔧 |    |
 | [order-in-routes](docs/rules/order-in-routes.md)                               | enforce proper order of properties in routes                                   |    | 🔧 |    |
 | [template-attribute-indentation](docs/rules/template-attribute-indentation.md) | enforce proper indentation of attributes and arguments in multi-line templates |    |    |    |
-| [template-attribute-order](docs/rules/template-attribute-order.md)             | enforce consistent ordering of attributes in template elements                 |    |    |    |
+| [template-attribute-order](docs/rules/template-attribute-order.md)             | enforce consistent ordering of attributes in template elements                 |    | 🔧 |    |
 | [template-block-indentation](docs/rules/template-block-indentation.md)         | enforce consistent indentation for block statements and their children         |    |    |    |
 | [template-eol-last](docs/rules/template-eol-last.md)                           | require or disallow newline at the end of template files                       |    | 🔧 |    |
 | [template-linebreak-style](docs/rules/template-linebreak-style.md)             | enforce consistent linebreaks in templates                                     |    | 🔧 |    |

docs/rules/template-attribute-order.md

@@ -1,5 +1,7 @@
 # ember/template-attribute-order
 
+🔧 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 -->
 
 Enforces a consistent ordering of attributes in template elements. This helps improve readability and maintainability of templates.

lib/rules/template-attribute-order.js

@@ -9,7 +9,7 @@ module.exports = {
       strictGts: true,
       url: 'https://github.com/ember-cli/eslint-plugin-ember/tree/master/docs/rules/template-attribute-order.md',
     },
-    fixable: null,
+    fixable: 'code',
     schema: [
       {
         type: 'object',
@@ -30,6 +30,8 @@ module.exports = {
   },
 
   create(context) {
+    const sourceCode = context.sourceCode || context.getSourceCode();
+
     const options = context.options[0] || {};
     const order = options.order || [
       'class',
@@ -92,6 +94,14 @@ module.exports = {
                   position: 'before',
                   expectedAttr: previous.name,
                 },
+                fix(fixer) {
+                  const currentText = sourceCode.getText(current);
+                  const previousText = sourceCode.getText(previous);
+                  return [
+                    fixer.replaceTextRange(previous.range, currentText),
+                    fixer.replaceTextRange(current.range, previousText),
+                  ];
+                },
               });
               break;
             }

tests/lib/rules/template-attribute-order.js

@@ -12,22 +12,52 @@ ruleTester.run('template-attribute-order', rule, {
     '<template><button class="btn" role="button" aria-label="Submit"></button></template>',
     '<template><input type="text" name="username" value=""></template>',
     '<template><div data-test-id="foo"></div></template>',
+    // Single attribute - no ordering needed
+    '<template><div class="foo"></div></template>',
+    // All same category
+    '<template><div aria-label="x" aria-hidden="true"></div></template>',
+    // Correct full order
+    '<template><input class="x" id="y" role="r" aria-label="l" data-test-foo="1" type="text" name="n" value="v" placeholder="p" disabled></template>',
   ],
 
   invalid: [
     {
       code: '<template><div id="bar" class="foo"></div></template>',
-      output: null,
+      output: '<template><div class="foo" id="bar"></div></template>',
       errors: [{ messageId: 'wrongOrder' }],
     },
     {
       code: '<template><button aria-label="Submit" role="button"></button></template>',
-      output: null,
+      output: '<template><button role="button" aria-label="Submit"></button></template>',
       errors: [{ messageId: 'wrongOrder' }],
     },
     {
       code: '<template><input name="username" type="text"></template>',
-      output: null,
+      output: '<template><input type="text" name="username"></template>',
+      errors: [{ messageId: 'wrongOrder' }],
+    },
+    // Multiple attributes out of order (3 attrs, fully reversed)
+    {
+      code: '<template><div name="x" id="y" class="z"></div></template>',
+      output: '<template><div id="y" name="x" class="z"></div></template>',
+      errors: [{ messageId: 'wrongOrder' }, { messageId: 'wrongOrder' }],
+    },
+    // Unknown attributes go last
+    {
+      code: '<template><div custom="x" class="y"></div></template>',
+      output: '<template><div class="y" custom="x"></div></template>',
+      errors: [{ messageId: 'wrongOrder' }],
+    },
+    // data-test- prefix before type
+    {
+      code: '<template><input type="text" data-test-input="true"></template>',
+      output: '<template><input data-test-input="true" type="text"></template>',
+      errors: [{ messageId: 'wrongOrder' }],
+    },
+    // Multiline attributes
+    {
+      code: '<template><div\n  name="x"\n  class="y"\n></div></template>',
+      output: '<template><div\n  class="y"\n  name="x"\n></div></template>',
       errors: [{ messageId: 'wrongOrder' }],
     },
   ],