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

prettier · Aug 26, 2020 · ebe9e07 · ebe9e07
1 parent 5a12f52
commit ebe9e07
Show file tree

Hide file tree

Showing 5 changed files with 115 additions and 10 deletions.
diff --git a/changelog_unreleased/vue/pr-9052.md b/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" />
 ```
diff --git 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
@@ -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
@@ -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
@@ -0,0 +1 @@
+<custom lang="markdown" />