fix: avoid unwanted whitespace in glimmer components (#6178)

prettier · Jun 5, 2019 · 90308eb · 90308eb
1 parent 2e6191f
commit 90308eb
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 14 deletions.
diff --git a/CHANGELOG.unreleased.md b/CHANGELOG.unreleased.md
@@ -458,6 +458,35 @@ export type Foo = [
 ];
 ```
 
+### Handlebars: Avoid adding unwanted whitespace after components ([#6178] by [@GavinJoyce])
+
+Previously, Prettier added a space before `/>` and a line break after, even when at the start of a line. Now, that extra space and line break is no longer present.
+
+<!-- prettier-ignore -->
+```hbs
+// Input
+<div>
+  <UserGreeting
+    @aVeryLongArgumentNameThatIsStillGoing={{@alsoAVeryLongArgument}}
+  />
+</div>
+
+// Output (Prettier stable)
+<div>
+  <UserGreeting
+    @aVeryLongArgumentNameThatIsStillGoing={{@alsoAVeryLongArgument}}
+   />
+
+</div>
+
+// Output (Prettier master)
+<div>
+  <UserGreeting
+    @aVeryLongArgumentNameThatIsStillGoing={{@alsoAVeryLongArgument}}
+  />
+</div>
+```
+
 [#5979]: https://github.com/prettier/prettier/pull/5979
 [#6038]: https://github.com/prettier/prettier/pull/6038
 [#6086]: https://github.com/prettier/prettier/pull/6086
@@ -481,6 +510,7 @@ export type Foo = [
 [#6152]: https://github.com/prettier/prettier/pull/6152
 [#6159]: https://github.com/prettier/prettier/pull/6159
 [#6172]: https://github.com/prettier/prettier/pull/6172
+[#6178]: https://github.com/prettier/prettier/pull/6178
 [@belochub]: https://github.com/belochub
 [@brainkim]: https://github.com/brainkim
 [@duailibe]: https://github.com/duailibe
@@ -491,3 +521,4 @@ export type Foo = [
 [@sosukesuzuki]: https://github.com/sosukesuzuki
 [@thorn0]: https://github.com/thorn0
 [@bakkot]: https://github.com/bakkot
+[@GavinJoyce]: https://github.com/GavinJoyce
diff --git a/src/language-handlebars/printer-glimmer.js b/src/language-handlebars/printer-glimmer.js
@@ -54,7 +54,8 @@ function print(path, options, print) {
       const hasChildren = n.children.length > 0;
       const isVoid =
         (isGlimmerComponent && !hasChildren) || voidTags.indexOf(n.tag) !== -1;
-      const closeTag = isVoid ? concat([" />", softline]) : ">";
+      const closeTagForNoBreak = isVoid ? concat([" />", softline]) : ">";
+      const closeTagForBreak = isVoid ? "/>" : ">";
       const getParams = (path, print) =>
         indent(
           concat([
@@ -69,18 +70,6 @@ function print(path, options, print) {
           ])
         );
 
-      // The problem here is that I want to not break at all if the children
-      // would not break but I need to force an indent, so I use a hardline.
-      /**
-       * What happens now:
-       * <div>
-       *   Hello
-       * </div>
-       * ==>
-       * <div>Hello</div>
-       * This is due to me using hasChildren to decide to put the hardline in.
-       * I would rather use a {DOES THE WHOLE THING NEED TO BREAK}
-       */
       return concat([
         group(
           concat([
@@ -89,7 +78,7 @@ function print(path, options, print) {
             getParams(path, print),
             n.blockParams.length ? ` as |${n.blockParams.join(" ")}|` : "",
             ifBreak(softline, ""),
-            closeTag
+            ifBreak(closeTagForBreak, closeTagForNoBreak)
           ])
         ),
         group(

diff --git a/tests/glimmer/__snapshots__/jsfmt.spec.js.snap b/tests/glimmer/__snapshots__/jsfmt.spec.js.snap
@@ -292,6 +292,12 @@ printWidth: 80
 <UserGreeting @name="Ricardo" @greeting="Olá" />
 {{@greeting}}, {{@name}}!
 
+<div>
+  <UserGreeting
+    @aVeryLongArgumentNameThatIsStillGoing={{@alsoAVeryLongArgument}}
+  />
+</div>
+
 <Form as |f|>
   <f.input @title="hello" />
   <f.input>hello</f.input>
@@ -315,6 +321,11 @@ printWidth: 80
 ,
 {{@name}}
 !
+<div>
+  <UserGreeting
+    @aVeryLongArgumentNameThatIsStillGoing={{@alsoAVeryLongArgument}}
+  />
+</div>
 <Form as |f|>
   <f.input @title="hello" />
   <f.input>
@@ -344,6 +355,12 @@ singleQuote: true
 <UserGreeting @name="Ricardo" @greeting="Olá" />
 {{@greeting}}, {{@name}}!
 
+<div>
+  <UserGreeting
+    @aVeryLongArgumentNameThatIsStillGoing={{@alsoAVeryLongArgument}}
+  />
+</div>
+
 <Form as |f|>
   <f.input @title="hello" />
   <f.input>hello</f.input>
@@ -367,6 +384,11 @@ singleQuote: true
 ,
 {{@name}}
 !
+<div>
+  <UserGreeting
+    @aVeryLongArgumentNameThatIsStillGoing={{@alsoAVeryLongArgument}}
+  />
+</div>
 <Form as |f|>
   <f.input @title="hello" />
   <f.input>

diff --git a/tests/glimmer/component.hbs b/tests/glimmer/component.hbs
@@ -1,6 +1,12 @@
 <UserGreeting @name="Ricardo" @greeting="Olá" />
 {{@greeting}}, {{@name}}!
 
+<div>
+  <UserGreeting
+    @aVeryLongArgumentNameThatIsStillGoing={{@alsoAVeryLongArgument}}
+  />
+</div>
+
 <Form as |f|>
   <f.input @title="hello" />
   <f.input>hello</f.input>