From 3cd28ca80d923db52724305e46bd25833f315371 Mon Sep 17 00:00:00 2001
From: Cyrille David <dcyriller@users.noreply.github.com>
Date: Fri, 4 Jun 2021 12:54:02 +0200
Subject: [PATCH] Preserve attributes order for element node (#10958)

* Preserve attributes order for element node

* Add CHANGELOG

* Add ...arguments in the test

* Apply fisker suggestions

* Simplify further
---
 changelog_unreleased/handlebars/10958.md      | 44 +++++++++++++++++++
 src/language-handlebars/printer-glimmer.js    | 34 ++++++++------
 .../__snapshots__/jsfmt.spec.js.snap          | 35 +++++++++++++++
 tests/format/handlebars/attr-node/order.hbs   | 12 +++++
 4 files changed, 111 insertions(+), 14 deletions(-)
 create mode 100644 changelog_unreleased/handlebars/10958.md
 create mode 100644 tests/format/handlebars/attr-node/order.hbs

diff --git a/changelog_unreleased/handlebars/10958.md b/changelog_unreleased/handlebars/10958.md
new file mode 100644
index 000000000000..1890c5a7779e
--- /dev/null
+++ b/changelog_unreleased/handlebars/10958.md
@@ -0,0 +1,44 @@
+#### Preserve attributes order for element node (#10958 by @dcyriller)
+
+<!-- prettier-ignore -->
+```handlebars
+{{!-- Input --}}
+<MyComponent
+  {{! this is a comment for arg 1}}
+  @arg1="hello"
+  {{on "clik" this.modify}}
+  @arg2="hello"
+  {{! this is a comment for arg 3}}
+  @arg3="hello"
+  @arg4="hello"
+  {{! this is a comment for arg 5}}
+  @arg5="hello"
+  ...arguments
+/>
+{{!-- Prettier stable --}}
+<MyComponent
+  @arg1="hello"
+  @arg2="hello"
+  @arg3="hello"
+  @arg4="hello"
+  @arg5="hello"
+  ...arguments
+  {{on "clik" this.modify}}
+  {{! this is a comment for arg 1}}
+  {{! this is a comment for arg 3}}
+  {{! this is a comment for arg 5}}
+/>
+{{!-- Prettier main --}}
+<MyComponent
+  {{! this is a comment for arg 1}}
+  @arg1="hello"
+  {{on "clik" this.modify}}
+  @arg2="hello"
+  {{! this is a comment for arg 3}}
+  @arg3="hello"
+  @arg4="hello"
+  {{! this is a comment for arg 5}}
+  @arg5="hello"
+  ...arguments
+/>
+```
diff --git a/src/language-handlebars/printer-glimmer.js b/src/language-handlebars/printer-glimmer.js
index ded874597317..66e7ae6e0b1b 100644
--- a/src/language-handlebars/printer-glimmer.js
+++ b/src/language-handlebars/printer-glimmer.js
@@ -418,24 +418,30 @@ function print(path, options, print) {
 
 /* ElementNode print helpers */
 
+function sortByLoc(a, b) {
+  return locStart(a) - locStart(b);
+}
+
 function printStartingTag(path, print) {
   const node = path.getValue();
 
-  const attributesLike = ["attributes", "modifiers", "comments", "blockParams"]
-    .filter((property) => isNonEmptyArray(node[property]))
-    .map((property) => [
-      line,
-      property === "blockParams"
-        ? printBlockParams(node)
-        : join(line, path.map(print, property)),
-    ]);
+  const types = ["attributes", "modifiers", "comments"].filter((property) =>
+    isNonEmptyArray(node[property])
+  );
+  const attributes = types.flatMap((type) => node[type]).sort(sortByLoc);
 
-  return [
-    "<",
-    node.tag,
-    indent(attributesLike),
-    printStartingTagEndMarker(node),
-  ];
+  for (const attributeType of types) {
+    path.each((attributePath) => {
+      const index = attributes.indexOf(attributePath.getValue());
+      attributes.splice(index, 1, [line, print()]);
+    }, attributeType);
+  }
+
+  if (isNonEmptyArray(node.blockParams)) {
+    attributes.push(line, printBlockParams(node));
+  }
+
+  return ["<", node.tag, indent(attributes), printStartingTagEndMarker(node)];
 }
 
 function printChildren(path, options, print) {
diff --git a/tests/format/handlebars/attr-node/__snapshots__/jsfmt.spec.js.snap b/tests/format/handlebars/attr-node/__snapshots__/jsfmt.spec.js.snap
index 525b90080aa0..0dd3610d00c3 100644
--- a/tests/format/handlebars/attr-node/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/format/handlebars/attr-node/__snapshots__/jsfmt.spec.js.snap
@@ -131,6 +131,41 @@ weirdly formatted
 ================================================================================
 `;
 
+exports[`order.hbs format 1`] = `
+====================================options=====================================
+parsers: ["glimmer"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<MyComponent
+  {{! this is a comment for arg 1}}
+  @arg1="hello"
+  {{on "clik" this.modify}}
+  @arg2="hello"
+  {{! this is a comment for arg 3}}
+  @arg3="hello"
+  @arg4="hello"
+  {{! this is a comment for arg 5}}
+  @arg5="hello"
+  ...arguments
+/>
+
+=====================================output=====================================
+<MyComponent
+  {{! this is a comment for arg 1}}
+  @arg1="hello"
+  {{on "clik" this.modify}}
+  @arg2="hello"
+  {{! this is a comment for arg 3}}
+  @arg3="hello"
+  @arg4="hello"
+  {{! this is a comment for arg 5}}
+  @arg5="hello"
+  ...arguments
+/>
+================================================================================
+`;
+
 exports[`quotes.hbs format 1`] = `
 ====================================options=====================================
 parsers: ["glimmer"]
diff --git a/tests/format/handlebars/attr-node/order.hbs b/tests/format/handlebars/attr-node/order.hbs
new file mode 100644
index 000000000000..f79a921b31a5
--- /dev/null
+++ b/tests/format/handlebars/attr-node/order.hbs
@@ -0,0 +1,12 @@
+<MyComponent
+  {{! this is a comment for arg 1}}
+  @arg1="hello"
+  {{on "clik" this.modify}}
+  @arg2="hello"
+  {{! this is a comment for arg 3}}
+  @arg3="hello"
+  @arg4="hello"
+  {{! this is a comment for arg 5}}
+  @arg5="hello"
+  ...arguments
+/>