Vue: Fix format on self-closing and empty blocks (#9055)

Author: fisker

changelog_unreleased/vue/pr-9052.md

@@ -1,20 +1,25 @@
-#### 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">
 
 </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" />
 ```

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),
         ]);

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"]

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"]
+);

tests/vue/multiparser/void-element.vue

@@ -0,0 +1 @@
+<custom lang="markdown" />