Handlebars: Fix incorrect classic component syntax formatting (#8593)

* Test: Add test addressing #8584 * Fix: Resolves problem with incorrect component formatting (#8584) * Docs: Add changelog note * Test: Add test for yield formatting case * Fix: Fix handlebars yield opening tag break * Test: Add case for any helper with params * Fix: Fix opening tag for every helper with params * Chore: Revert whitespaces * Chore: Revert whitespaces in tests
prettier · Jun 24, 2020 · aa1088f · aa1088f
1 parent bff049f
commit aa1088f
Show file tree

Hide file tree

Showing 4 changed files with 171 additions and 2 deletions.
diff --git a/changelog_unreleased/handlebars/pr-8593.md b/changelog_unreleased/handlebars/pr-8593.md
@@ -0,0 +1,35 @@
+#### Fix formatting of classic components inside element ([#8593](https://github.com/prettier/prettier/pull/8593) by [@mikoscz](https://github.com/mikoscz)
+
+<!-- prettier-ignore -->
+```hbs
+{{!-- Input --}}
+<div>
+  {{classic-component-with-many-properties
+    class="hello"
+    param=this.someValue
+    secondParam=this.someValue
+    thirdParam=this.someValue
+  }}
+</div>
+
+{{!-- Prettier stable --}}
+<div>
+  {{
+    classic-component-with-many-properties
+    class="hello"
+    param=this.someValue
+    secondParam=this.someValue
+    thirdParam=this.someValue
+  }}
+</div>
+
+{{!-- Prettier master --}}
+<div>
+  {{classic-component-with-many-properties
+    class="hello"
+    param=this.someValue
+    secondParam=this.someValue
+    thirdParam=this.someValue
+  }}
+</div>
+```
diff --git a/src/language-handlebars/printer-glimmer.js b/src/language-handlebars/printer-glimmer.js
@@ -116,12 +116,19 @@ function print(path, options, print) {
       );
     }
     case "MustacheStatement": {
-      const shouldBreakOpeningMustache = isParentOfSomeType(path, [
+      const isParentOfSpecifiedTypes = isParentOfSomeType(path, [
         "AttrNode",
         "ConcatStatement",
-        "ElementNode",
       ]);
 
+      const isChildOfElementNodeAndDoesNotHaveParams =
+        isParentOfSomeType(path, ["ElementNode"]) &&
+        doesNotHaveHashParams(n) &&
+        doesNotHavePositionalParams(n);
+
+      const shouldBreakOpeningMustache =
+        isParentOfSpecifiedTypes || isChildOfElementNodeAndDoesNotHaveParams;
+
       return group(
         concat([
           printOpeningMustache(n),
@@ -659,6 +666,14 @@ function locationToOffset(source, line, column) {
   }
 }
 
+function doesNotHaveHashParams(node) {
+  return node.hash.pairs.length === 0;
+}
+
+function doesNotHavePositionalParams(node) {
+  return node.params.length === 0;
+}
+
 module.exports = {
   print,
   massageAstNode: clean,

diff --git a/tests/handlebars/mustache-statement/__snapshots__/jsfmt.spec.js.snap b/tests/handlebars/mustache-statement/__snapshots__/jsfmt.spec.js.snap
@@ -50,6 +50,27 @@ singleQuote: true
   ...attributes >
 </div>
 
+<div>
+  {{classic-component-with-many-properties
+    class="hello"
+    param=this.someValue
+    secondParam=this.someValue
+    thirdParam=this.someValue
+  }}
+</div>
+
+<div>
+  {{yield (hash
+    title=(component title)
+    header=(component header)
+    language=(component language)
+  )}}
+</div>
+
+<div>
+  {{a-helper "that takes some arguments" this.anotherOne "why not" @aLastOneLongEnoughToBreak}}
+</div>
+
 =====================================output=====================================
 <GlimmerComponent
   @progress={{
@@ -116,6 +137,34 @@ singleQuote: true
   ...attributes
 >
 </div>
+
+<div>
+  {{classic-component-with-many-properties
+    class='hello'
+    param=this.someValue
+    secondParam=this.someValue
+    thirdParam=this.someValue
+  }}
+</div>
+
+<div>
+  {{yield
+    (hash
+      title=(component title)
+      header=(component header)
+      language=(component language)
+    )
+  }}
+</div>
+
+<div>
+  {{a-helper
+    'that takes some arguments'
+    this.anotherOne
+    'why not'
+    @aLastOneLongEnoughToBreak
+  }}
+</div>
 ================================================================================
 `;
 
@@ -168,6 +217,27 @@ printWidth: 80
   ...attributes >
 </div>
 
+<div>
+  {{classic-component-with-many-properties
+    class="hello"
+    param=this.someValue
+    secondParam=this.someValue
+    thirdParam=this.someValue
+  }}
+</div>
+
+<div>
+  {{yield (hash
+    title=(component title)
+    header=(component header)
+    language=(component language)
+  )}}
+</div>
+
+<div>
+  {{a-helper "that takes some arguments" this.anotherOne "why not" @aLastOneLongEnoughToBreak}}
+</div>
+
 =====================================output=====================================
 <GlimmerComponent
   @progress={{
@@ -234,6 +304,34 @@ printWidth: 80
   ...attributes
 >
 </div>
+
+<div>
+  {{classic-component-with-many-properties
+    class="hello"
+    param=this.someValue
+    secondParam=this.someValue
+    thirdParam=this.someValue
+  }}
+</div>
+
+<div>
+  {{yield
+    (hash
+      title=(component title)
+      header=(component header)
+      language=(component language)
+    )
+  }}
+</div>
+
+<div>
+  {{a-helper
+    "that takes some arguments"
+    this.anotherOne
+    "why not"
+    @aLastOneLongEnoughToBreak
+  }}
+</div>
 ================================================================================
 `;
 

diff --git a/tests/handlebars/mustache-statement/basics.hbs b/tests/handlebars/mustache-statement/basics.hbs
@@ -40,3 +40,24 @@
     {{this.class}}"
   ...attributes >
 </div>
+
+<div>
+  {{classic-component-with-many-properties
+    class="hello"
+    param=this.someValue
+    secondParam=this.someValue
+    thirdParam=this.someValue
+  }}
+</div>
+
+<div>
+  {{yield (hash
+    title=(component title)
+    header=(component header)
+    language=(component language)
+  )}}
+</div>
+
+<div>
+  {{a-helper "that takes some arguments" this.anotherOne "why not" @aLastOneLongEnoughToBreak}}
+</div>