From ebe9e07716f0ec1e04efc661bec754321e1c937e Mon Sep 17 00:00:00 2001
From: fisker Cheung <lionkay@gmail.com>
Date: Wed, 26 Aug 2020 11:19:34 +0800
Subject: [PATCH] Vue: Fix format on self-closing and empty blocks (#9055)

---
 changelog_unreleased/vue/pr-9052.md           |  7 +-
 src/language-html/printer-html.js             | 22 +++---
 .../__snapshots__/jsfmt.spec.js.snap          | 70 +++++++++++++++++++
 tests/vue/multiparser/jsfmt.spec.js           | 25 ++++++-
 tests/vue/multiparser/void-element.vue        |  1 +
 5 files changed, 115 insertions(+), 10 deletions(-)
 create mode 100644 tests/vue/multiparser/void-element.vue

diff --git a/changelog_unreleased/vue/pr-9052.md b/changelog_unreleased/vue/pr-9052.md
index 06cbc594b4f9..c7b8a6459f2d 100644
--- a/changelog_unreleased/vue/pr-9052.md
+++ b/changelog_unreleased/vue/pr-9052.md
@@ -1,10 +1,11 @@
-#### Fix format blocks with `src` attribute ([#9052](https://github.com/prettier/prettier/pull/9052) by [@fisker](https://github.com/fisker))
+#### Fix self-closing blocks and blocks with `src` attribute format ([#9052](https://github.com/prettier/prettier/pull/9052), [#9055](https://github.com/prettier/prettier/pull/9055) by [@fisker](https://github.com/fisker))
 
 <!-- prettier-ignore -->
 ```vue
 <!-- Input -->
 <custom lang="markdown" src="./foo.md"></custom>
 <custom lang="markdown" src="./foo.md" />
+<custom lang="markdown" />
 
 <!-- Prettier stable -->
 <custom lang="markdown" src="./foo.md">
@@ -12,9 +13,13 @@
 </custom>
 <custom lang="markdown" src="./foo.md"
 
+/>
+<custom lang="markdown"
+
 />
 
 <!-- Prettier master -->
 <custom lang="markdown" src="./foo.md"></custom>
 <custom lang="markdown" src="./foo.md" />
+<custom lang="markdown" />
 ```
diff --git a/src/language-html/printer-html.js b/src/language-html/printer-html.js
index fc8e99a13f06..0beeea66333c 100644
--- a/src/language-html/printer-html.js
+++ b/src/language-html/printer-html.js
@@ -72,24 +72,30 @@ function embed(path, print, textToDoc, options) {
         return;
       }
 
-      if (isVueNonHtmlBlock(node, options)) {
+      if (!node.isSelfClosing && isVueNonHtmlBlock(node, options)) {
         const parser = inferScriptParser(node, options);
         if (!parser) {
           return;
         }
 
-        const doc = textToDoc(
-          htmlTrimPreserveIndentation(getNodeContent(node, options)),
-          { parser },
-          { stripTrailingHardline: true }
-        );
+        const content = getNodeContent(node, options);
+        let isEmpty = /^\s*$/.test(content);
+        let doc = "";
+        if (!isEmpty) {
+          doc = textToDoc(
+            htmlTrimPreserveIndentation(content),
+            { parser },
+            { stripTrailingHardline: true }
+          );
+          isEmpty = doc === "";
+        }
 
         return concat([
           printOpeningTagPrefix(node, options),
           group(printOpeningTag(path, options, print)),
-          hardline,
+          isEmpty ? "" : hardline,
           doc,
-          hardline,
+          isEmpty ? "" : hardline,
           printClosingTag(node, options),
           printClosingTagSuffix(node, options),
         ]);
diff --git a/tests/vue/multiparser/__snapshots__/jsfmt.spec.js.snap b/tests/vue/multiparser/__snapshots__/jsfmt.spec.js.snap
index 4d1047328e9f..a921d3a0dbee 100644
--- a/tests/vue/multiparser/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/vue/multiparser/__snapshots__/jsfmt.spec.js.snap
@@ -102,6 +102,62 @@ export default {
 ================================================================================
 `;
 
+exports[`snippet: empty format 1`] = `
+====================================options=====================================
+parsers: ["vue"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<custom lang="markdown"></custom>
+=====================================output=====================================
+<custom lang="markdown"></custom>
+
+================================================================================
+`;
+
+exports[`snippet: new line format 1`] = `
+====================================options=====================================
+parsers: ["vue"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<custom lang="markdown">
+ 
+</custom>
+=====================================output=====================================
+<custom lang="markdown"></custom>
+
+================================================================================
+`;
+
+exports[`snippet: non-space format 1`] = `
+====================================options=====================================
+parsers: ["vue"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<custom lang="markdown">
+   
+</custom>
+=====================================output=====================================
+<custom lang="markdown"></custom>
+
+================================================================================
+`;
+
+exports[`snippet: spaces format 1`] = `
+====================================options=====================================
+parsers: ["vue"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<custom lang="markdown">   </custom>
+=====================================output=====================================
+<custom lang="markdown"></custom>
+
+================================================================================
+`;
+
 exports[`template-bind.vue format 1`] = `
 ====================================options=====================================
 parsers: ["vue"]
@@ -164,6 +220,20 @@ printWidth: 80
 ================================================================================
 `;
 
+exports[`void-element.vue format 1`] = `
+====================================options=====================================
+parsers: ["vue"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<custom lang="markdown" />
+
+=====================================output=====================================
+<custom lang="markdown" />
+
+================================================================================
+`;
+
 exports[`vue-component.vue format 1`] = `
 ====================================options=====================================
 parsers: ["vue"]
diff --git a/tests/vue/multiparser/jsfmt.spec.js b/tests/vue/multiparser/jsfmt.spec.js
index 2fd7eede986d..ca3a7b5ccebe 100644
--- a/tests/vue/multiparser/jsfmt.spec.js
+++ b/tests/vue/multiparser/jsfmt.spec.js
@@ -1 +1,24 @@
-run_spec(__dirname, ["vue"]);
+run_spec(
+  {
+    dirname: __dirname,
+    snippets: [
+      {
+        name: "empty",
+        code: '<custom lang="markdown"></custom>',
+      },
+      {
+        name: "spaces",
+        code: '<custom lang="markdown">   </custom>',
+      },
+      {
+        name: "new line",
+        code: '<custom lang="markdown">\n \n</custom>',
+      },
+      {
+        name: "non-space",
+        code: '<custom lang="markdown">\n \u2005 \n</custom>',
+      },
+    ],
+  },
+  ["vue"]
+);
diff --git a/tests/vue/multiparser/void-element.vue b/tests/vue/multiparser/void-element.vue
new file mode 100644
index 000000000000..5bd25ee7d7be
--- /dev/null
+++ b/tests/vue/multiparser/void-element.vue
@@ -0,0 +1 @@
+<custom lang="markdown" />