fix(vue): tag names are case-sensitive (#5606)

package.json

@@ -20,7 +20,7 @@
     "@glimmer/syntax": "0.30.3",
     "@iarna/toml": "2.0.0",
     "angular-estree-parser": "1.1.5",
-    "angular-html-parser": "1.1.0",
+    "angular-html-parser": "1.2.0",
     "camelcase": "4.1.0",
     "chalk": "2.1.0",
     "cjk-regex": "2.0.0",

src/language-html/parser-html.js

@@ -13,7 +13,8 @@ function ngHtmlParser(
     recognizeSelfClosing,
     normalizeTagName,
     normalizeAttributeName,
-    allowHtmComponentClosingTags
+    allowHtmComponentClosingTags,
+    isTagNameCaseSensitive
   }
 ) {
   const parser = require("angular-html-parser");
@@ -36,7 +37,8 @@ function ngHtmlParser(
 
   const { rootNodes, errors } = parser.parse(input, {
     canSelfClose: recognizeSelfClosing,
-    allowHtmComponentClosingTags
+    allowHtmComponentClosingTags,
+    isTagNameCaseSensitive
   });
 
   if (errors.length !== 0) {
@@ -147,7 +149,9 @@ function ngHtmlParser(
 
   const addTagDefinition = node => {
     if (node instanceof Element) {
-      const tagDefinition = getHtmlTagDefinition(node.name);
+      const tagDefinition = getHtmlTagDefinition(
+        isTagNameCaseSensitive ? node.name : node.name.toLowerCase()
+      );
       if (
         !node.namespace ||
         node.namespace === tagDefinition.implicitNamespacePrefix
@@ -262,7 +266,8 @@ function createParser({
   recognizeSelfClosing = false,
   normalizeTagName = false,
   normalizeAttributeName = false,
-  allowHtmComponentClosingTags = false
+  allowHtmComponentClosingTags = false,
+  isTagNameCaseSensitive = false
 } = {}) {
   return {
     parse: (text, parsers, options) =>
@@ -270,7 +275,8 @@ function createParser({
         recognizeSelfClosing,
         normalizeTagName,
         normalizeAttributeName,
-        allowHtmComponentClosingTags
+        allowHtmComponentClosingTags,
+        isTagNameCaseSensitive
       }),
     hasPragma,
     astFormat: "html",
@@ -288,6 +294,9 @@ module.exports = {
       allowHtmComponentClosingTags: true
     }),
     angular: createParser(),
-    vue: createParser({ recognizeSelfClosing: true })
+    vue: createParser({
+      recognizeSelfClosing: true,
+      isTagNameCaseSensitive: true
+    })
   }
 };

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

@@ -823,6 +823,62 @@ export default {
 ================================================================================
 `;
 
+exports[`case-sensitive-tags.vue 1`] = `
+====================================options=====================================
+parsers: ["vue"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<template>
+	<Input></Input>
+</template>
+
+=====================================output=====================================
+<template>
+  <Input></Input>
+</template>
+
+================================================================================
+`;
+
+exports[`case-sensitive-tags.vue 2`] = `
+====================================options=====================================
+parsers: ["vue"]
+printWidth: 80
+trailingComma: "es5"
+                                                                                | printWidth
+=====================================input======================================
+<template>
+	<Input></Input>
+</template>
+
+=====================================output=====================================
+<template>
+  <Input></Input>
+</template>
+
+================================================================================
+`;
+
+exports[`case-sensitive-tags.vue 3`] = `
+====================================options=====================================
+parsers: ["vue"]
+printWidth: 80
+semi: false
+                                                                                | printWidth
+=====================================input======================================
+<template>
+	<Input></Input>
+</template>
+
+=====================================output=====================================
+<template>
+  <Input></Input>
+</template>
+
+================================================================================
+`;
+
 exports[`custom-block.vue 1`] = `
 ====================================options=====================================
 parsers: ["vue"]

tests/html_vue/case-sensitive-tags.vue

@@ -0,0 +1,3 @@
+<template>
+	<Input></Input>
+</template>

yarn.lock

@@ -675,9 +675,9 @@ angular-estree-parser@1.1.5:
     lines-and-columns "^1.1.6"
     tslib "^1.9.3"
 
-angular-html-parser@1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/angular-html-parser/-/angular-html-parser-1.1.0.tgz#0199c3c675c6bc9e1c7df9b41569c9df99b53f8c"
+angular-html-parser@1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/angular-html-parser/-/angular-html-parser-1.2.0.tgz#9319b8a9e06389aee2449b3a35977442512eccf3"
   dependencies:
     tslib "^1.9.3"