feat(html): update angular-html-parser (#5565)

- support [`htm`](https://github.com/developit/htm) (`<${Component}>content<//>`, `<div />`) - preserve [bogus comments](https://www.w3.org/TR/html5/syntax.html#bogus-comment-state) (`<! ... >`, `<? ... >`)
prettier · Nov 29, 2018 · 28b938d · 28b938d
1 parent d124bba
commit 28b938d
Show file tree

Hide file tree

Showing 9 changed files with 150 additions and 12 deletions.
diff --git a/package.json b/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.0.0",
+    "angular-html-parser": "1.1.0",
     "camelcase": "4.1.0",
     "chalk": "2.1.0",
     "cjk-regex": "2.0.0",

diff --git a/src/language-html/parser-html.js b/src/language-html/parser-html.js
@@ -9,7 +9,12 @@ const { parseIeConditionalComment } = require("./conditional-comment");
 
 function ngHtmlParser(
   input,
-  { recognizeSelfClosing, normalizeTagName, normalizeAttributeName }
+  {
+    recognizeSelfClosing,
+    normalizeTagName,
+    normalizeAttributeName,
+    allowHtmComponentClosingTags
+  }
 ) {
   const parser = require("angular-html-parser");
   const {
@@ -30,7 +35,8 @@ function ngHtmlParser(
   } = require("angular-html-parser/lib/compiler/src/ml_parser/html_tags");
 
   const { rootNodes, errors } = parser.parse(input, {
-    canSelfClose: recognizeSelfClosing
+    canSelfClose: recognizeSelfClosing,
+    allowHtmComponentClosingTags
   });
 
   if (errors.length !== 0) {
@@ -255,15 +261,17 @@ function locEnd(node) {
 function createParser({
   recognizeSelfClosing = false,
   normalizeTagName = false,
-  normalizeAttributeName = false
+  normalizeAttributeName = false,
+  allowHtmComponentClosingTags = false
 } = {}) {
   return {
     preprocess: text => text.replace(/\r\n?/g, "\n"),
     parse: (text, parsers, options) =>
       _parse(text, options, {
         recognizeSelfClosing,
         normalizeTagName,
-        normalizeAttributeName
+        normalizeAttributeName,
+        allowHtmComponentClosingTags
       }),
     hasPragma,
     astFormat: "html",
@@ -275,8 +283,10 @@ function createParser({
 module.exports = {
   parsers: {
     html: createParser({
+      recognizeSelfClosing: true,
       normalizeTagName: true,
-      normalizeAttributeName: true
+      normalizeAttributeName: true,
+      allowHtmComponentClosingTags: true
     }),
     angular: createParser(),
     vue: createParser({ recognizeSelfClosing: true })

diff --git a/src/language-html/preprocess.js b/src/language-html/preprocess.js
@@ -18,6 +18,7 @@ const PREPROCESS_PIPELINE = [
   extractWhitespaces,
   addCssDisplay,
   addIsSelfClosing,
+  addHasHtmComponentClosingTag,
   addIsSpaceSensitive,
   mergeSimpleElementIntoText
 ];
@@ -401,6 +402,23 @@ function addIsSelfClosing(ast /*, options */) {
   );
 }
 
+function addHasHtmComponentClosingTag(ast, options) {
+  return ast.map(node =>
+    node.type !== "element"
+      ? node
+      : Object.assign(node, {
+          hasHtmComponentClosingTag:
+            node.endSourceSpan &&
+            /^<\s*\/\s*\/\s*>$/.test(
+              options.originalText.slice(
+                node.endSourceSpan.start.offset,
+                node.endSourceSpan.end.offset
+              )
+            )
+        })
+  );
+}
+
 function addCssDisplay(ast, options) {
   return ast.map(node =>
     Object.assign(node, { cssDisplay: getNodeCssStyleDisplay(node, options) })

diff --git a/src/language-html/printer-html.js b/src/language-html/printer-html.js
@@ -313,9 +313,15 @@ function genericPrint(path, options, print) {
     case "comment": {
       return concat([
         printOpeningTagPrefix(node, options),
-        "<!--",
-        concat(replaceNewlines(node.value, literalline)),
-        "-->",
+        concat(
+          replaceNewlines(
+            options.originalText.slice(
+              options.locStart(node),
+              options.locEnd(node)
+            ),
+            literalline
+          )
+        ),
         printClosingTagSuffix(node, options)
       ]);
     }
@@ -839,6 +845,11 @@ function printClosingTagStartMarker(node, options) {
   switch (node.type) {
     case "ieConditionalComment":
       return "<!";
+    case "element":
+      if (node.hasHtmComponentClosingTag) {
+        return "<//";
+      }
+    // fall through
     default:
       return `</${node.rawName}`;
   }

diff --git a/tests/html_comments/__snapshots__/jsfmt.spec.js.snap b/tests/html_comments/__snapshots__/jsfmt.spec.js.snap
@@ -91,6 +91,87 @@ printWidth: 80
 ================================================================================
 `;
 
+exports[`bogus.html 1`] = `
+====================================options=====================================
+parsers: ["html"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<? hello ?>
+<!- world ->
+
+=====================================output=====================================
+<? hello ?>
+<!- world ->
+
+================================================================================
+`;
+
+exports[`bogus.html 2`] = `
+====================================options=====================================
+parsers: ["html"]
+printWidth: 1
+ | printWidth
+=====================================input======================================
+<? hello ?>
+<!- world ->
+
+=====================================output=====================================
+<? hello ?>
+<!- world ->
+
+================================================================================
+`;
+
+exports[`bogus.html 3`] = `
+====================================options=====================================
+parsers: ["html"]
+printWidth: Infinity
+=====================================input======================================
+<? hello ?>
+<!- world ->
+
+=====================================output=====================================
+<? hello ?>
+<!- world ->
+
+================================================================================
+`;
+
+exports[`bogus.html 4`] = `
+====================================options=====================================
+htmlWhitespaceSensitivity: "strict"
+parsers: ["html"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<? hello ?>
+<!- world ->
+
+=====================================output=====================================
+<? hello ?>
+<!- world ->
+
+================================================================================
+`;
+
+exports[`bogus.html 5`] = `
+====================================options=====================================
+htmlWhitespaceSensitivity: "ignore"
+parsers: ["html"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<? hello ?>
+<!- world ->
+
+=====================================output=====================================
+<? hello ?>
+<!- world ->
+
+================================================================================
+`;
+
 exports[`conditional.html 1`] = `
 ====================================options=====================================
 parsers: ["html"]

diff --git a/tests/html_comments/bogus.html b/tests/html_comments/bogus.html
@@ -0,0 +1,2 @@
+<? hello ?>
+<!- world ->
diff --git a/tests/multiparser_js_html/__snapshots__/jsfmt.spec.js.snap b/tests/multiparser_js_html/__snapshots__/jsfmt.spec.js.snap
@@ -55,6 +55,10 @@ html\`\`
 
 html\`<my-element obj=\${obj}></my-element>\`;
 
+html\`  <\${Footer}  >footer      content<//     >  \`
+
+html\`  <div />  \`
+
 =====================================output=====================================
 import { LitElement, html } from "@polymer/lit-element";
 
@@ -98,5 +102,13 @@ html\`
   <my-element obj=\${obj}></my-element>
 \`;
 
+html\`
+  <\${Footer}>footer content<//>
+\`;
+
+html\`
+  <div />
+\`;
+
 ================================================================================
 `;
diff --git a/tests/multiparser_js_html/lit-html.js b/tests/multiparser_js_html/lit-html.js
@@ -46,3 +46,7 @@ const someHtml2 = /* HTML */ `<div      > hello ${world} </div     >`;
 html``
 
 html`<my-element obj=${obj}></my-element>`;
+
+html`  <${Footer}  >footer      content<//     >  `
+
+html`  <div />  `
diff --git a/yarn.lock b/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.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/angular-html-parser/-/angular-html-parser-1.0.0.tgz#57feed04674c170fa56bfcd556cf7b2cd677e170"
+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"
   dependencies:
     tslib "^1.9.3"