fix(html): preserve content for <template> with unknown lang (#5388)

src/language-html/printer-html.js

@@ -34,7 +34,8 @@ const {
   normalizeParts,
   preferHardlineAsLeadingSpaces,
   replaceDocNewlines,
-  replaceNewlines
+  replaceNewlines,
+  shouldPreserveElementContent
 } = require("./utils");
 const preprocess = require("./preprocess");
 const assert = require("assert");
@@ -442,29 +443,58 @@ function printChildren(path, options, print) {
   );
 
   function printChild(childPath) {
-    if (!hasPrettierIgnore(childPath)) {
-      return print(childPath);
-    }
     const child = childPath.getValue();
-    return concat(
-      [].concat(
-        printOpeningTagPrefix(child),
-        replaceNewlines(
-          options.originalText.slice(
-            options.locStart(child) +
-              (child.prev && needsToBorrowNextOpeningTagStartMarker(child.prev)
-                ? printOpeningTagStartMarker(child).length
-                : 0),
-            options.locEnd(child) -
-              (child.next && needsToBorrowPrevClosingTagEndMarker(child.next)
-                ? printClosingTagEndMarker(child).length
-                : 0)
+
+    if (hasPrettierIgnore(childPath)) {
+      return concat(
+        [].concat(
+          printOpeningTagPrefix(child),
+          replaceNewlines(
+            options.originalText.slice(
+              options.locStart(child) +
+                (child.prev &&
+                needsToBorrowNextOpeningTagStartMarker(child.prev)
+                  ? printOpeningTagStartMarker(child).length
+                  : 0),
+              options.locEnd(child) -
+                (child.next && needsToBorrowPrevClosingTagEndMarker(child.next)
+                  ? printClosingTagEndMarker(child).length
+                  : 0)
+            ),
+            literalline
           ),
-          literalline
-        ),
-        printClosingTagSuffix(child)
-      )
-    );
+          printClosingTagSuffix(child)
+        )
+      );
+    }
+
+    if (shouldPreserveElementContent(childPath)) {
+      return concat(
+        [].concat(
+          printOpeningTagPrefix(child),
+          group(printOpeningTag(childPath, options, print)),
+          replaceNewlines(
+            options.originalText.slice(
+              child.startSourceSpan.end.offset -
+                (child.firstChild &&
+                needsToBorrowParentOpeningTagEndMarker(child.firstChild)
+                  ? printOpeningTagEndMarker(child).length
+                  : 0),
+              child.endSourceSpan.start.offset +
+                (child.lastChild &&
+                needsToBorrowParentClosingTagStartMarker(child.lastChild)
+                  ? printClosingTagStartMarker(child).length
+                  : 0)
+            ),
+            literalline
+          ),
+          printClosingTag(child),
+          printClosingTagSuffix(child)
+        )
+      );
+    }
+
+    return print(childPath);
   }
 
   function printBetweenLine(prevNode, nextNode) {

src/language-html/utils.js

@@ -34,10 +34,16 @@ function mapObject(object, fn) {
   return newObject;
 }
 
-function hasPrettierIgnore(path) {
+function shouldPreserveElementContent(path) {
   const node = path.getValue();
-  if (node.type === "attribute" || node.type === "text") {
-    return false;
+
+  if (
+    node.type === "element" &&
+    node.fullName === "template" &&
+    node.attrMap.lang &&
+    node.attrMap.lang !== "html"
+  ) {
+    return true;
   }
 
   // TODO: handle non-text children in <pre>
@@ -50,6 +56,15 @@ function hasPrettierIgnore(path) {
     return true;
   }
 
+  return false;
+}
+
+function hasPrettierIgnore(path) {
+  const node = path.getValue();
+  if (node.type === "attribute" || node.type === "text") {
+    return false;
+  }
+
   const parentNode = path.getParentNode();
   if (!parentNode) {
     return false;
@@ -614,5 +629,6 @@ module.exports = {
   preferHardlineAsLeadingSpaces,
   preferHardlineAsTrailingSpaces,
   replaceDocNewlines,
-  replaceNewlines
+  replaceNewlines,
+  shouldPreserveElementContent
 };

tests/html_vue/__snapshots__/jsfmt.spec.js.snap

@@ -850,11 +850,7 @@ exports[`pre-child.vue - vue-verify 1`] = `
 <!--
   copied from https://github.com/gitlabhq/gitlabhq/blob/master/app/assets/javascripts/ide/components/jobs/detail.vue
 -->
-<pre
-  ref="buildTrace"
-  class="build-trace mb-0 h-100"
-  @scroll="scrollBuildLog"
->
+<pre ref="buildTrace" class="build-trace mb-0 h-100" @scroll="scrollBuildLog">
   <code
     v-show="!detailJob.isLoading"
     class="bash"
@@ -952,11 +948,7 @@ exports[`pre-child.vue - vue-verify 2`] = `
 <!--
   copied from https://github.com/gitlabhq/gitlabhq/blob/master/app/assets/javascripts/ide/components/jobs/detail.vue
 -->
-<pre
-  ref="buildTrace"
-  class="build-trace mb-0 h-100"
-  @scroll="scrollBuildLog"
->
+<pre ref="buildTrace" class="build-trace mb-0 h-100" @scroll="scrollBuildLog">
   <code
     v-show="!detailJob.isLoading"
     class="bash"
@@ -1242,6 +1234,68 @@ exports[`template.vue - vue-verify 2`] = `
 
 `;
 
+exports[`template-lang.vue - vue-verify 1`] = `
+<template lang="pug">
+  .test
+    #foo
+  .bla
+</template>
+
+<template 
+
+
+   
+   lang='pug'>
+  .test
+    #foo
+  .bla
+</template>
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+<template lang="pug">
+  .test
+    #foo
+  .bla
+</template>
+
+<template lang="pug">
+  .test
+    #foo
+  .bla
+</template>
+
+`;
+
+exports[`template-lang.vue - vue-verify 2`] = `
+<template lang="pug">
+  .test
+    #foo
+  .bla
+</template>
+
+<template 
+
+
+   
+   lang='pug'>
+  .test
+    #foo
+  .bla
+</template>
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+<template lang="pug">
+  .test
+    #foo
+  .bla
+</template>
+
+<template lang="pug">
+  .test
+    #foo
+  .bla
+</template>
+
+`;
+
 exports[`test.vue - vue-verify 1`] = `
 <script>
 </script>

tests/html_vue/template-lang.vue

@@ -0,0 +1,15 @@
+<template lang="pug">
+  .test
+    #foo
+  .bla
+</template>
+
+<template 
+
+
+   
+   lang='pug'>
+  .test
+    #foo
+  .bla
+</template>