fix(vue,ng): do not normalize tag names (#5526)

prettier · Nov 23, 2018 · cdac955 · cdac955
1 parent b2eadd2
commit cdac955
Show file tree

Hide file tree

Showing 5 changed files with 74 additions and 16 deletions.
diff --git a/src/language-html/parser-html.js b/src/language-html/parser-html.js
@@ -7,7 +7,7 @@ const createError = require("../common/parser-create-error");
 const { Node } = require("./ast");
 const { parseIeConditionalComment } = require("./conditional-comment");
 
-function ngHtmlParser(input, canSelfClose) {
+function ngHtmlParser(input, { recognizeSelfClosing, normalizeTagName }) {
   const parser = require("angular-html-parser");
   const {
     RecursiveVisitor,
@@ -26,7 +26,9 @@ function ngHtmlParser(input, canSelfClose) {
     getHtmlTagDefinition
   } = require("angular-html-parser/lib/compiler/src/ml_parser/html_tags");
 
-  const { rootNodes, errors } = parser.parse(input, { canSelfClose });
+  const { rootNodes, errors } = parser.parse(input, {
+    canSelfClose: recognizeSelfClosing
+  });
 
   if (errors.length !== 0) {
     const { msg, span } = errors[0];
@@ -97,8 +99,9 @@ function ngHtmlParser(input, canSelfClose) {
   const normalizeName = node => {
     if (node instanceof Element) {
       if (
-        !node.namespace ||
-        node.namespace === node.tagDefinition.implicitNamespacePrefix
+        normalizeTagName &&
+        (!node.namespace ||
+          node.namespace === node.tagDefinition.implicitNamespacePrefix)
       ) {
         node.name = lowerCaseIfFn(
           node.name,
@@ -161,20 +164,15 @@ function ngHtmlParser(input, canSelfClose) {
   return rootNodes;
 }
 
-function _parse(
-  text,
-  options,
-  recognizeSelfClosing = false,
-  shouldParseFrontMatter = true
-) {
+function _parse(text, options, parserOptions, shouldParseFrontMatter = true) {
   const { frontMatter, content } = shouldParseFrontMatter
     ? parseFrontMatter(text)
     : { frontMatter: null, content: text };
 
   const rawAst = {
     type: "root",
     sourceSpan: { start: { offset: 0 }, end: { offset: text.length } },
-    children: ngHtmlParser(content, recognizeSelfClosing)
+    children: ngHtmlParser(content, parserOptions)
   };
 
   if (frontMatter) {
@@ -190,7 +188,7 @@ function _parse(
     const subAst = _parse(
       fakeContent + realContent,
       options,
-      recognizeSelfClosing,
+      parserOptions,
       false
     );
     const ParseSourceSpan = subAst.children[0].sourceSpan.constructor;
@@ -249,11 +247,17 @@ function locEnd(node) {
   return node.sourceSpan.end.offset;
 }
 
-function createParser({ recognizeSelfClosing }) {
+function createParser({
+  recognizeSelfClosing = false,
+  normalizeTagName = false
+} = {}) {
   return {
     preprocess: text => text.replace(/\r\n?/g, "\n"),
     parse: (text, parsers, options) =>
-      _parse(text, options, recognizeSelfClosing),
+      _parse(text, options, {
+        recognizeSelfClosing,
+        normalizeTagName
+      }),
     hasPragma,
     astFormat: "html",
     locStart,
@@ -263,8 +267,8 @@ function createParser({ recognizeSelfClosing }) {
 
 module.exports = {
   parsers: {
-    html: createParser({ recognizeSelfClosing: false }),
-    angular: createParser({ recognizeSelfClosing: false }),
+    html: createParser({ normalizeTagName: true }),
+    angular: createParser(),
     vue: createParser({ recognizeSelfClosing: true })
   }
 };
diff --git a/tests/html_angular/__snapshots__/jsfmt.spec.js.snap b/tests/html_angular/__snapshots__/jsfmt.spec.js.snap
@@ -10550,3 +10550,31 @@ bindon-ngModel
 -->
 
 `;
+
+exports[`tag-name.component.html - angular-verify 1`] = `
+<Table></Table>
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+<Table></Table>
+
+`;
+
+exports[`tag-name.component.html - angular-verify 2`] = `
+<Table></Table>
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+<Table></Table>
+
+`;
+
+exports[`tag-name.component.html - angular-verify 3`] = `
+<Table></Table>
+~
+<Table></Table>
+
+`;
+
+exports[`tag-name.component.html - angular-verify 4`] = `
+<Table></Table>
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+<Table></Table>
+
+`;
diff --git a/tests/html_angular/tag-name.component.html b/tests/html_angular/tag-name.component.html
@@ -0,0 +1 @@
+<Table></Table>
diff --git a/tests/html_vue/__snapshots__/jsfmt.spec.js.snap b/tests/html_vue/__snapshots__/jsfmt.spec.js.snap
@@ -1222,6 +1222,28 @@ exports[`self_closing_style.vue - vue-verify 2`] = `
 
 `;
 
+exports[`tag-name.vue - vue-verify 1`] = `
+<template>
+  <Table></Table>
+</template>
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+<template>
+  <Table></Table>
+</template>
+
+`;
+
+exports[`tag-name.vue - vue-verify 2`] = `
+<template>
+  <Table></Table>
+</template>
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+<template>
+  <Table></Table>
+</template>
+
+`;
+
 exports[`template.vue - vue-verify 1`] = `
 <!--copied from https://github.com/gitlabhq/gitlabhq/blob/master/app/assets/javascripts/vue_shared/components/content_viewer/viewers/image_viewer.vue-->
 <template>

diff --git a/tests/html_vue/tag-name.vue b/tests/html_vue/tag-name.vue
@@ -0,0 +1,3 @@
+<template>
+  <Table></Table>
+</template>