Avoid repeated blank lines in unformatted Angular and Vue interpolations (#20001)

Co-authored-by: fisker <lionkay@gmail.com>

changelog_unreleased/angular/20001.md

@@ -0,0 +1,23 @@
+#### Avoid adding blank lines to interpolations (#20001 by @vzer200)
+
+<!-- prettier-ignore -->
+```html
+<!-- Input -->
+<div>
+  ({{ a
+  }})
+</div>
+
+<!-- Prettier stable (--embedded-language-formatting=off) -->
+<div>
+  ({{ a
+
+  }})
+</div>
+
+<!-- Prettier main (--embedded-language-formatting=off) -->
+<div>
+  ({{ a
+  }})
+</div>
+```

changelog_unreleased/vue/20001-2.md

@@ -0,0 +1,29 @@
+#### Avoid adding blank lines to interpolations (#20001 by @vzer200)
+
+<!-- prettier-ignore -->
+```html
+<!-- Input -->
+<template>
+  <div>
+    ({{ a
+    }})
+  </div>
+</template>
+
+<!-- Prettier stable (--embedded-language-formatting=off) -->
+<template>
+  <div>
+    ({{ a
+
+    }})
+  </div>
+</template>
+
+<!-- Prettier main (--embedded-language-formatting=off) -->
+<template>
+  <div>
+    ({{ a
+    }})
+  </div>
+</template>
+```

src/language-html/printer-html.js

@@ -3,6 +3,7 @@
  */
 
 import {
+  breakParent,
   fill,
   group,
   hardline,
@@ -30,6 +31,7 @@ import { printChildren } from "./print/children.js";
 import { printElement } from "./print/element.js";
 import { printStartTagComment } from "./print/start-tag-comment.js";
 import {
+  needsToBorrowPrevClosingTagEndMarker,
   printClosingTagEnd,
   printClosingTagSuffix,
   printOpeningTagPrefix,
@@ -90,13 +92,30 @@ function genericPrint(path, options, print) {
       ];
     case "text": {
       if (node.parent.kind === "interpolation") {
+        let { value } = node;
         // replace the trailing literalline with hardline for better readability
         const trailingNewlineRegex = /\n[^\S\n]*$/;
-        const hasTrailingNewline = trailingNewlineRegex.test(node.value);
-        const value = hasTrailingNewline
-          ? node.value.replace(trailingNewlineRegex, "")
-          : node.value;
-        return [replaceEndOfLine(value), hasTrailingNewline ? hardline : ""];
+        const hasTrailingNewline = trailingNewlineRegex.test(value);
+
+        if (hasTrailingNewline) {
+          value = value.replace(trailingNewlineRegex, "");
+        }
+
+        const parts = [replaceEndOfLine(value)];
+
+        if (hasTrailingNewline) {
+          // The interpolation's trailing softline already prints this newline.
+          if (
+            node.parent.next &&
+            needsToBorrowPrevClosingTagEndMarker(node.parent.next)
+          ) {
+            parts.push(breakParent);
+          } else {
+            parts.push(hardline);
+          }
+        }
+
+        return parts;
       }
 
       const prefix = printOpeningTagPrefix(node, options);

tests/format/angular/interpolation/embedded-language-formatting-off/__snapshots__/format.test.js.snap

@@ -0,0 +1,87 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`siblings.html - {"embeddedLanguageFormatting":"off"} format 1`] = `
+====================================options=====================================
+embeddedLanguageFormatting: "off"
+parsers: ["angular"]
+                                                      printWidth: 80 (default) |
+=====================================input======================================
+<div>{{ a
+}}</div>
+<div>{{ a
+}} text</div>
+<div>{{ a
+}}<span>text</span></div>
+<div>{{ a
+}}<!-- comment --></div>
+<div>{{ a
+}}{{ b }}</div>
+<div>({{ a
+
+}})</div>
+
+=====================================output=====================================
+<div>
+  {{ a
+  }}
+</div>
+<div>
+  {{ a
+  }}
+  text
+</div>
+<div>
+  {{ a
+  }}<span>text</span>
+</div>
+<div>
+  {{ a
+  }}<!-- comment -->
+</div>
+<div>
+  {{ a
+  }}{{ b }}
+</div>
+<div>
+  ({{ a
+
+  }})
+</div>
+
+================================================================================
+`;
+
+exports[`trailing-newline.html - {"embeddedLanguageFormatting":"off"} format 1`] = `
+====================================options=====================================
+embeddedLanguageFormatting: "off"
+parsers: ["angular"]
+                                                      printWidth: 80 (default) |
+=====================================input======================================
+<div>
+  aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa ({{ a }})
+</div>
+<div>
+  aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa ({{ a
+  }})
+</div>
+<div>
+  ({{ a
+  }})
+</div>
+
+=====================================output=====================================
+<div>
+  aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa ({{ a
+  }})
+</div>
+<div>
+  aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa ({{ a
+  }})
+</div>
+<div>
+  ({{ a
+  }})
+</div>
+
+================================================================================
+`;

tests/format/angular/interpolation/embedded-language-formatting-off/format.test.js

@@ -0,0 +1 @@
+runFormatTest(import.meta, ["angular"], { embeddedLanguageFormatting: "off" });

tests/format/angular/interpolation/embedded-language-formatting-off/siblings.html

@@ -0,0 +1,13 @@
+<div>{{ a
+}}</div>
+<div>{{ a
+}} text</div>
+<div>{{ a
+}}<span>text</span></div>
+<div>{{ a
+}}<!-- comment --></div>
+<div>{{ a
+}}{{ b }}</div>
+<div>({{ a
+
+}})</div>

tests/format/angular/interpolation/embedded-language-formatting-off/trailing-newline.html

@@ -0,0 +1,11 @@
+<div>
+  aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa ({{ a }})
+</div>
+<div>
+  aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa ({{ a
+  }})
+</div>
+<div>
+  ({{ a
+  }})
+</div>

tests/format/vue/interpolation/embedded-language-formatting-off/__snapshots__/format.test.js.snap

@@ -0,0 +1,45 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`trailing-newline.vue - {"embeddedLanguageFormatting":"off"} format 1`] = `
+====================================options=====================================
+embeddedLanguageFormatting: "off"
+parsers: ["vue"]
+                                                      printWidth: 80 (default) |
+=====================================input======================================
+<template>
+  <div>
+    {{
+      (
+        something.something.very.long.code ??
+        fail("this is even longer to enforce multiple lines")
+      ).toUpperCase()
+    }}.
+  </div>
+  <div>({{ a
+  }})</div>
+  <div>{{ a
+  }}</div>
+</template>
+
+=====================================output=====================================
+<template>
+  <div>
+    {{
+      (
+        something.something.very.long.code ??
+        fail("this is even longer to enforce multiple lines")
+      ).toUpperCase()
+    }}.
+  </div>
+  <div>
+    ({{ a
+    }})
+  </div>
+  <div>
+    {{ a
+    }}
+  </div>
+</template>
+
+================================================================================
+`;

tests/format/vue/interpolation/embedded-language-formatting-off/format.test.js

@@ -0,0 +1 @@
+runFormatTest(import.meta, ["vue"], { embeddedLanguageFormatting: "off" });

tests/format/vue/interpolation/embedded-language-formatting-off/trailing-newline.vue

@@ -0,0 +1,14 @@
+<template>
+  <div>
+    {{
+      (
+        something.something.very.long.code ??
+        fail("this is even longer to enforce multiple lines")
+      ).toUpperCase()
+    }}.
+  </div>
+  <div>({{ a
+  }})</div>
+  <div>{{ a
+  }}</div>
+</template>