fix(ng,vue): do not normalize attribute names (#5549)

prettier · Nov 26, 2018 · a7528eb · a7528eb
1 parent 4af3dd4
commit a7528eb
Show file tree

Hide file tree

Showing 3 changed files with 89 additions and 17 deletions.
diff --git a/src/language-html/parser-html.js b/src/language-html/parser-html.js
@@ -7,7 +7,10 @@ const createError = require("../common/parser-create-error");
 const { Node } = require("./ast");
 const { parseIeConditionalComment } = require("./conditional-comment");
 
-function ngHtmlParser(input, { recognizeSelfClosing, normalizeTagName }) {
+function ngHtmlParser(
+  input,
+  { recognizeSelfClosing, normalizeTagName, normalizeAttributeName }
+) {
   const parser = require("angular-html-parser");
   const {
     RecursiveVisitor,
@@ -109,19 +112,21 @@ function ngHtmlParser(input, { recognizeSelfClosing, normalizeTagName }) {
         );
       }
 
-      const CURRENT_HTML_ELEMENT_ATTRIBUTES =
-        HTML_ELEMENT_ATTRIBUTES[node.name] || Object.create(null);
-      node.attrs.forEach(attr => {
-        if (!attr.namespace) {
-          attr.name = lowerCaseIfFn(
-            attr.name,
-            lowerCasedAttrName =>
-              node.name in HTML_ELEMENT_ATTRIBUTES &&
-              (lowerCasedAttrName in HTML_ELEMENT_ATTRIBUTES["*"] ||
-                lowerCasedAttrName in CURRENT_HTML_ELEMENT_ATTRIBUTES)
-          );
-        }
-      });
+      if (normalizeAttributeName) {
+        const CURRENT_HTML_ELEMENT_ATTRIBUTES =
+          HTML_ELEMENT_ATTRIBUTES[node.name] || Object.create(null);
+        node.attrs.forEach(attr => {
+          if (!attr.namespace) {
+            attr.name = lowerCaseIfFn(
+              attr.name,
+              lowerCasedAttrName =>
+                node.name in HTML_ELEMENT_ATTRIBUTES &&
+                (lowerCasedAttrName in HTML_ELEMENT_ATTRIBUTES["*"] ||
+                  lowerCasedAttrName in CURRENT_HTML_ELEMENT_ATTRIBUTES)
+            );
+          }
+        });
+      }
     }
   };
 
@@ -249,14 +254,16 @@ function locEnd(node) {
 
 function createParser({
   recognizeSelfClosing = false,
-  normalizeTagName = false
+  normalizeTagName = false,
+  normalizeAttributeName = false
 } = {}) {
   return {
     preprocess: text => text.replace(/\r\n?/g, "\n"),
     parse: (text, parsers, options) =>
       _parse(text, options, {
         recognizeSelfClosing,
-        normalizeTagName
+        normalizeTagName,
+        normalizeAttributeName
       }),
     hasPragma,
     astFormat: "html",
@@ -267,7 +274,10 @@ function createParser({
 
 module.exports = {
   parsers: {
-    html: createParser({ normalizeTagName: true }),
+    html: createParser({
+      normalizeTagName: true,
+      normalizeAttributeName: 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
@@ -1,5 +1,66 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`attr-name.component.html 1`] = `
+====================================options=====================================
+parsers: ["angular"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<div someDirective itemType="x"></div>
+
+=====================================output=====================================
+<div someDirective itemType="x"></div>
+
+================================================================================
+`;
+
+exports[`attr-name.component.html 2`] = `
+====================================options=====================================
+parsers: ["angular"]
+printWidth: 80
+trailingComma: "es5"
+                                                                                | printWidth
+=====================================input======================================
+<div someDirective itemType="x"></div>
+
+=====================================output=====================================
+<div someDirective itemType="x"></div>
+
+================================================================================
+`;
+
+exports[`attr-name.component.html 3`] = `
+====================================options=====================================
+parsers: ["angular"]
+printWidth: 1
+ | printWidth
+=====================================input======================================
+<div someDirective itemType="x"></div>
+
+=====================================output=====================================
+<div
+  someDirective
+  itemType="x"
+></div>
+
+================================================================================
+`;
+
+exports[`attr-name.component.html 4`] = `
+====================================options=====================================
+htmlWhitespaceSensitivity: "ignore"
+parsers: ["angular"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<div someDirective itemType="x"></div>
+
+=====================================output=====================================
+<div someDirective itemType="x"></div>
+
+================================================================================
+`;
+
 exports[`attributes.component.html 1`] = `
 ====================================options=====================================
 parsers: ["angular"]

diff --git a/tests/html_angular/attr-name.component.html b/tests/html_angular/attr-name.component.html
@@ -0,0 +1 @@
+<div someDirective itemType="x"></div>