Allow lang attribute of <template> to be empty (#12394)

Co-authored-by: niklasvatn <niklas@vatn.se>
Co-authored-by: fisker Cheung <lionkay@gmail.com>

changelog_unreleased/vue/12394.md

@@ -0,0 +1,49 @@
+#### Allow `lang` attribute of `<template>` to be empty (#12394 by @HallvardMM)
+
+Template tag should allow empty string lang="" or undefined lang
+
+<!-- prettier-ignore -->
+```vue
+<!-- Input -->
+<template lang="">
+  <v-app-bar>
+    <v-menu offset-y>
+      <template></template>
+    </v-menu>
+  </v-app-bar>
+</template>
+
+<template lang>
+  <v-app-bar>
+    <v-menu offset-y>
+      <template></template>
+    </v-menu>
+  </v-app-bar>
+</template>
+
+<!-- Prettier stable -->
+SyntaxError: Unexpected closing tag "v-menu". It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags (5:5)
+[error]   3 |     <v-menu offset-y>
+[error]   4 |       <template></template>
+[error] > 5 |     </v-menu>
+[error]     |     ^^^^^^^^^
+[error]   6 |   </v-app-bar>
+[error]   7 | </template>
+
+<!-- Prettier main -->
+<template lang="">
+  <v-app-bar>
+    <v-menu offset-y>
+      <template></template>
+    </v-menu>
+  </v-app-bar>
+</template>
+
+<template lang>
+  <v-app-bar>
+    <v-menu offset-y>
+      <template></template>
+    </v-menu>
+  </v-app-bar>
+</template>
+```

src/language-html/parser-html.js

@@ -421,7 +421,11 @@ module.exports = {
           !hasParent &&
           (tagName !== "template" ||
             attrs.some(
-              ({ name, value }) => name === "lang" && value !== "html"
+              ({ name, value }) =>
+                name === "lang" &&
+                value !== "html" &&
+                value !== "" &&
+                value !== undefined
             ))
         ) {
           return require("angular-html-parser").TagContentType.RAW_TEXT;

tests/format/vue/vue/__snapshots__/jsfmt.spec.js.snap

@@ -4154,6 +4154,22 @@ semi: false
     some-component(tag='<some-tag>')
 </template>
 
+<template lang="">
+  <v-app-bar>
+    <v-menu offset-y>
+      <template></template>
+    </v-menu>
+  </v-app-bar>
+</template>
+
+<template lang>
+  <v-app-bar>
+    <v-menu offset-y>
+      <template></template>
+    </v-menu>
+  </v-app-bar>
+</template>
+
 =====================================output=====================================
 <template lang="pug">
   .test
@@ -4172,6 +4188,22 @@ semi: false
     some-component(tag='<some-tag>')
 </template>
 
+<template lang="">
+  <v-app-bar>
+    <v-menu offset-y>
+      <template></template>
+    </v-menu>
+  </v-app-bar>
+</template>
+
+<template lang>
+  <v-app-bar>
+    <v-menu offset-y>
+      <template></template>
+    </v-menu>
+  </v-app-bar>
+</template>
+
 ================================================================================
 `;
 
@@ -4203,6 +4235,22 @@ trailingComma: "none"
     some-component(tag='<some-tag>')
 </template>
 
+<template lang="">
+  <v-app-bar>
+    <v-menu offset-y>
+      <template></template>
+    </v-menu>
+  </v-app-bar>
+</template>
+
+<template lang>
+  <v-app-bar>
+    <v-menu offset-y>
+      <template></template>
+    </v-menu>
+  </v-app-bar>
+</template>
+
 =====================================output=====================================
 <template lang="pug">
   .test
@@ -4221,6 +4269,22 @@ trailingComma: "none"
     some-component(tag='<some-tag>')
 </template>
 
+<template lang="">
+  <v-app-bar>
+    <v-menu offset-y>
+      <template></template>
+    </v-menu>
+  </v-app-bar>
+</template>
+
+<template lang>
+  <v-app-bar>
+    <v-menu offset-y>
+      <template></template>
+    </v-menu>
+  </v-app-bar>
+</template>
+
 ================================================================================
 `;
 
@@ -4251,6 +4315,22 @@ printWidth: 80
     some-component(tag='<some-tag>')
 </template>
 
+<template lang="">
+  <v-app-bar>
+    <v-menu offset-y>
+      <template></template>
+    </v-menu>
+  </v-app-bar>
+</template>
+
+<template lang>
+  <v-app-bar>
+    <v-menu offset-y>
+      <template></template>
+    </v-menu>
+  </v-app-bar>
+</template>
+
 =====================================output=====================================
 <template lang="pug">
   .test
@@ -4269,6 +4349,22 @@ printWidth: 80
     some-component(tag='<some-tag>')
 </template>
 
+<template lang="">
+  <v-app-bar>
+    <v-menu offset-y>
+      <template></template>
+    </v-menu>
+  </v-app-bar>
+</template>
+
+<template lang>
+  <v-app-bar>
+    <v-menu offset-y>
+      <template></template>
+    </v-menu>
+  </v-app-bar>
+</template>
+
 ================================================================================
 `;
 

tests/format/vue/vue/template-lang.vue

@@ -18,3 +18,19 @@
   #container
     some-component(tag='<some-tag>')
 </template>
+
+<template lang="">
+  <v-app-bar>
+    <v-menu offset-y>
+      <template></template>
+    </v-menu>
+  </v-app-bar>
+</template>
+
+<template lang>
+  <v-app-bar>
+    <v-menu offset-y>
+      <template></template>
+    </v-menu>
+  </v-app-bar>
+</template>