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
prettier · Jun 4, 2021 · 3cd28ca · 3cd28ca
1 parent c3c300d
commit 3cd28ca
Show file tree

Hide file tree

Showing 4 changed files with 111 additions and 14 deletions.
diff --git a/changelog_unreleased/handlebars/10958.md 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
@@ -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
@@ -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
@@ -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
+/>