From 88bcec10ccda8339b281d6425d8ea50e5e4a3867 Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Thu, 11 Oct 2018 16:02:35 +0800
Subject: [PATCH 001/177] feat: support pragma

---
 src/language-html/parser-html.js              |  2 ++
 src/language-html/pragma.js                   | 14 ++++++++++++
 src/language-html/printer-htmlparser2.js      |  2 ++
 .../insert/__snapshots__/jsfmt.spec.js.snap   | 21 ++++++++++++++++++
 tests/html_pragma/insert/jsfmt.spec.js        |  1 +
 tests/html_pragma/insert/with-pragma.html     |  3 +++
 tests/html_pragma/insert/without-pragma.html  |  1 +
 .../require/__snapshots__/jsfmt.spec.js.snap  | 22 +++++++++++++++++++
 tests/html_pragma/require/jsfmt.spec.js       |  1 +
 tests/html_pragma/require/with-pragma.html    |  4 ++++
 tests/html_pragma/require/without-pragma.html |  2 ++
 11 files changed, 73 insertions(+)
 create mode 100644 src/language-html/pragma.js
 create mode 100644 tests/html_pragma/insert/__snapshots__/jsfmt.spec.js.snap
 create mode 100644 tests/html_pragma/insert/jsfmt.spec.js
 create mode 100644 tests/html_pragma/insert/with-pragma.html
 create mode 100644 tests/html_pragma/insert/without-pragma.html
 create mode 100644 tests/html_pragma/require/__snapshots__/jsfmt.spec.js.snap
 create mode 100644 tests/html_pragma/require/jsfmt.spec.js
 create mode 100644 tests/html_pragma/require/with-pragma.html
 create mode 100644 tests/html_pragma/require/without-pragma.html

diff --git a/src/language-html/parser-html.js b/src/language-html/parser-html.js
index 1e3469644242..82d8105e8a94 100644
--- a/src/language-html/parser-html.js
+++ b/src/language-html/parser-html.js
@@ -2,6 +2,7 @@
 
 const parseFrontMatter = require("../utils/front-matter");
 const { HTML_ELEMENT_ATTRIBUTES, HTML_TAGS, mapNode } = require("./utils");
+const { hasPragma } = require("./pragma");
 
 function parse(text, parsers, options, { shouldParseFrontMatter = true } = {}) {
   const { frontMatter, content } = shouldParseFrontMatter
@@ -217,6 +218,7 @@ module.exports = {
   parsers: {
     html: {
       parse,
+      hasPragma,
       astFormat: "htmlparser2",
       locStart,
       locEnd
diff --git a/src/language-html/pragma.js b/src/language-html/pragma.js
new file mode 100644
index 000000000000..650328d4f3ef
--- /dev/null
+++ b/src/language-html/pragma.js
@@ -0,0 +1,14 @@
+"use strict";
+
+function hasPragma(text) {
+  return /^\s*<!--\s*@(format|prettier)\s*-->/.test(text);
+}
+
+function insertPragma(text) {
+  return "<!-- @format -->\n\n" + text.replace(/^\s*\n/, "");
+}
+
+module.exports = {
+  hasPragma,
+  insertPragma
+};
diff --git a/src/language-html/printer-htmlparser2.js b/src/language-html/printer-htmlparser2.js
index 279431e5ef46..f987f6f91879 100644
--- a/src/language-html/printer-htmlparser2.js
+++ b/src/language-html/printer-htmlparser2.js
@@ -34,6 +34,7 @@ const {
 } = require("./utils");
 const preprocess = require("./preprocess");
 const assert = require("assert");
+const { insertPragma } = require("./pragma");
 
 function concat(parts) {
   const newParts = normalizeParts(parts);
@@ -578,6 +579,7 @@ function printClosingTagEndMarker(node) {
 module.exports = {
   preprocess,
   print: genericPrint,
+  insertPragma,
   massageAstNode: clean,
   embed,
   hasPrettierIgnore
diff --git a/tests/html_pragma/insert/__snapshots__/jsfmt.spec.js.snap b/tests/html_pragma/insert/__snapshots__/jsfmt.spec.js.snap
new file mode 100644
index 000000000000..ed4f00c2b849
--- /dev/null
+++ b/tests/html_pragma/insert/__snapshots__/jsfmt.spec.js.snap
@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`with-pragma.html - html-verify 1`] = `
+<!-- @prettier -->
+
+Hello        World
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+<!-- @prettier -->
+
+Hello World
+
+`;
+
+exports[`without-pragma.html - html-verify 1`] = `
+Hello        World
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+<!-- @format -->
+
+Hello World
+
+`;
diff --git a/tests/html_pragma/insert/jsfmt.spec.js b/tests/html_pragma/insert/jsfmt.spec.js
new file mode 100644
index 000000000000..d7461ff2d287
--- /dev/null
+++ b/tests/html_pragma/insert/jsfmt.spec.js
@@ -0,0 +1 @@
+run_spec(__dirname, ["html"], { insertPragma: true });
diff --git a/tests/html_pragma/insert/with-pragma.html b/tests/html_pragma/insert/with-pragma.html
new file mode 100644
index 000000000000..352d2124e5e5
--- /dev/null
+++ b/tests/html_pragma/insert/with-pragma.html
@@ -0,0 +1,3 @@
+<!-- @prettier -->
+
+Hello        World
diff --git a/tests/html_pragma/insert/without-pragma.html b/tests/html_pragma/insert/without-pragma.html
new file mode 100644
index 000000000000..e0a4a305cdb9
--- /dev/null
+++ b/tests/html_pragma/insert/without-pragma.html
@@ -0,0 +1 @@
+Hello        World
diff --git a/tests/html_pragma/require/__snapshots__/jsfmt.spec.js.snap b/tests/html_pragma/require/__snapshots__/jsfmt.spec.js.snap
new file mode 100644
index 000000000000..c5166dceff9e
--- /dev/null
+++ b/tests/html_pragma/require/__snapshots__/jsfmt.spec.js.snap
@@ -0,0 +1,22 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`with-pragma.html - html-verify 1`] = `
+<!-- @prettier -->
+
+<div
+            >  666             </div>
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+<!-- @prettier -->
+
+<div>666</div>
+
+`;
+
+exports[`without-pragma.html - html-verify 1`] = `
+<div
+            >  666             </div>
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+<div
+            >  666             </div>
+
+`;
diff --git a/tests/html_pragma/require/jsfmt.spec.js b/tests/html_pragma/require/jsfmt.spec.js
new file mode 100644
index 000000000000..356f6e9167f4
--- /dev/null
+++ b/tests/html_pragma/require/jsfmt.spec.js
@@ -0,0 +1 @@
+run_spec(__dirname, ["html"], { requirePragma: true });
diff --git a/tests/html_pragma/require/with-pragma.html b/tests/html_pragma/require/with-pragma.html
new file mode 100644
index 000000000000..2dcc4229c8a6
--- /dev/null
+++ b/tests/html_pragma/require/with-pragma.html
@@ -0,0 +1,4 @@
+<!-- @prettier -->
+
+<div
+            >  666             </div>
diff --git a/tests/html_pragma/require/without-pragma.html b/tests/html_pragma/require/without-pragma.html
new file mode 100644
index 000000000000..4b46c5df9d10
--- /dev/null
+++ b/tests/html_pragma/require/without-pragma.html
@@ -0,0 +1,2 @@
+<div
+            >  666             </div>

From a31faad645ba496013ce5eea5573664e6b8b7772 Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Thu, 11 Oct 2018 16:17:12 +0800
Subject: [PATCH 002/177] feat: update inferScriptParser - merge logic from
 language-vue

---
 src/language-html/utils.js                    | 39 ++++++++++++-------
 .../html_css/__snapshots__/jsfmt.spec.js.snap |  2 +-
 .../html_js/__snapshots__/jsfmt.spec.js.snap  | 31 ++++++++-------
 3 files changed, 43 insertions(+), 29 deletions(-)

diff --git a/src/language-html/utils.js b/src/language-html/utils.js
index 1b8eed5f390e..b09ee0cb64b5 100644
--- a/src/language-html/utils.js
+++ b/src/language-html/utils.js
@@ -261,26 +261,37 @@ function hasNonTextChild(node) {
 }
 
 function inferScriptParser(node) {
-  if (
-    node.name === "script" &&
-    ((!node.attribs.lang && !node.attribs.type) ||
+  if (node.name === "script" && !node.attribs.src) {
+    if (
+      (!node.attribs.lang && !node.attribs.type) ||
       node.attribs.type === "text/javascript" ||
       node.attribs.type === "text/babel" ||
-      node.attribs.type === "application/javascript")
-  ) {
-    return "babylon";
-  }
+      node.attribs.type === "application/javascript"
+    ) {
+      return "babylon";
+    }
 
-  if (
-    node.name === "script" &&
-    (node.attribs.type === "application/x-typescript" ||
-      node.attribs.lang === "ts")
-  ) {
-    return "typescript";
+    if (
+      node.attribs.type === "application/x-typescript" ||
+      node.attribs.lang === "ts" ||
+      node.attribs.lang === "tsx"
+    ) {
+      return "typescript";
+    }
   }
 
   if (node.name === "style") {
-    return "css";
+    if (!node.attribs.lang || node.attribs.lang === "postcss") {
+      return "css";
+    }
+
+    if (node.attribs.lang === "scss") {
+      return "scss";
+    }
+
+    if (node.attribs.lang === "less") {
+      return "less";
+    }
   }
 
   return null;
diff --git a/tests/html_css/__snapshots__/jsfmt.spec.js.snap b/tests/html_css/__snapshots__/jsfmt.spec.js.snap
index c3d18195d04e..da15a1497d29 100644
--- a/tests/html_css/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_css/__snapshots__/jsfmt.spec.js.snap
@@ -36,7 +36,7 @@ exports[`less.html - html-verify 1`] = `
 </style>
 
 <style lang="less">
-  @nice-blue: #5B83AD;
+  @nice-blue: #5b83ad;
   @light-blue: @nice-blue + #111;
 
   #header {
diff --git a/tests/html_js/__snapshots__/jsfmt.spec.js.snap b/tests/html_js/__snapshots__/jsfmt.spec.js.snap
index 4b7d036dd4f2..f45f86f89f6a 100644
--- a/tests/html_js/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_js/__snapshots__/jsfmt.spec.js.snap
@@ -246,38 +246,41 @@ exports[`typescript.html - html-verify 1`] = `
   document.body.innerHTML = greeter(user);
 </script>
 <script lang="tsx">
-  class CommentBox extends React.Component<{ url: string, pollInterval: number}, CommentData> {
-    constructor(){
-      super()
+  class CommentBox extends React.Component<
+    { url: string; pollInterval: number },
+    CommentData
+  > {
+    constructor() {
+      super();
       this.state = { data: [] };
     }
     fetchComments() {
       $.ajax({
         url: this.props.url,
-        dataType: 'json',
+        dataType: "json",
         cache: false,
-        success: (data) => this.setState({ data: data }),
+        success: data => this.setState({ data: data }),
         error: (xhr, status, err) => console.error(status, err)
-      })
+      });
     }
     componentDidMount() {
       this.fetchComments();
       setInterval(this.fetchComments.bind(this), this.props.pollInterval);
     }
     render() {
-      let handleCommentSubmit = (comment: { author: string, text: string }) => {
-        console.warn('comment submitted!', comment);
+      let handleCommentSubmit = (comment: { author: string; text: string }) => {
+        console.warn("comment submitted!", comment);
         const updated = this.state.data.slice(0);
         updated.push(comment);
         this.setState({ data: updated });
-      }
+      };
       return (
         <div className="commentBox">
-        <h1>Comments</h1>
-        <CommentList data={this.state.data}/>
-      <CommentForm onCommentSubmit={handleCommentSubmit} />
-      </div>
-    );
+          <h1>Comments</h1>
+          <CommentList data={this.state.data} />
+          <CommentForm onCommentSubmit={handleCommentSubmit} />
+        </div>
+      );
     }
   }
 </script>

From 9ca726010cf8fac073d9c6d44391463d9608c6d8 Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Thu, 11 Oct 2018 16:37:58 +0800
Subject: [PATCH 003/177] refactor: extract htmlparser2

---
 src/language-html/parser-html.js | 31 ++++++++++++++++++-------------
 1 file changed, 18 insertions(+), 13 deletions(-)

diff --git a/src/language-html/parser-html.js b/src/language-html/parser-html.js
index 82d8105e8a94..c1fe269e6dcb 100644
--- a/src/language-html/parser-html.js
+++ b/src/language-html/parser-html.js
@@ -4,11 +4,7 @@ const parseFrontMatter = require("../utils/front-matter");
 const { HTML_ELEMENT_ATTRIBUTES, HTML_TAGS, mapNode } = require("./utils");
 const { hasPragma } = require("./pragma");
 
-function parse(text, parsers, options, { shouldParseFrontMatter = true } = {}) {
-  const { frontMatter, content } = shouldParseFrontMatter
-    ? parseFrontMatter(text)
-    : { frontMatter: null, content: text };
-
+function htmlparser2(text) {
   // Inline the require to avoid loading all the JS if we don't use it
   const Parser = require("htmlparser2/lib/Parser");
   const DomHandler = require("domhandler");
@@ -94,12 +90,20 @@ function parse(text, parsers, options, { shouldParseFrontMatter = true } = {}) {
     lowerCaseTags: true, // preserve lowercase tag names to avoid false check in htmlparser2 and apply the lowercasing later
     lowerCaseAttributeNames: false,
     recognizeSelfClosing: true
-  }).end(content);
+  }).end(text);
+
+  return handler.dom;
+}
+
+function _parse(text, options, shouldParseFrontMatter = true) {
+  const { frontMatter, content } = shouldParseFrontMatter
+    ? parseFrontMatter(text)
+    : { frontMatter: null, content: text };
 
   const ast = normalize(
     {
       type: "root",
-      children: handler.dom,
+      children: htmlparser2(content),
       startIndex: 0,
       endIndex: text.length
     },
@@ -110,17 +114,18 @@ function parse(text, parsers, options, { shouldParseFrontMatter = true } = {}) {
     ast.children.unshift(frontMatter);
   }
 
-  const parseHtml = data =>
-    parse(data, parsers, options, {
-      shouldParseFrontMatter: false
-    });
+  const parseSubHtml = subContent => _parse(subContent, options, false);
 
   return mapNode(ast, node => {
-    const ieConditionalComment = parseIeConditionalComment(node, parseHtml);
+    const ieConditionalComment = parseIeConditionalComment(node, parseSubHtml);
     return ieConditionalComment ? ieConditionalComment : node;
   });
 }
 
+function createParser() {
+  return (text, parsers, options) => _parse(text, options);
+}
+
 function parseIeConditionalComment(node, parseHtml) {
   if (node.type !== "comment") {
     return null;
@@ -217,7 +222,7 @@ function locEnd(node) {
 module.exports = {
   parsers: {
     html: {
-      parse,
+      parse: createParser(),
       hasPragma,
       astFormat: "htmlparser2",
       locStart,

From 1ea66daea52c54b60d761a40e2190297270ff21d Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Thu, 11 Oct 2018 16:40:44 +0800
Subject: [PATCH 004/177] feat: turn off self-closing recognizition

---
 src/language-html/parser-html.js              |  3 +--
 .../__snapshots__/jsfmt.spec.js.snap          | 20 ++++++++++++-------
 2 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/src/language-html/parser-html.js b/src/language-html/parser-html.js
index c1fe269e6dcb..dd95a9ebad39 100644
--- a/src/language-html/parser-html.js
+++ b/src/language-html/parser-html.js
@@ -88,8 +88,7 @@ function htmlparser2(text) {
 
   new CustomParser(handler, {
     lowerCaseTags: true, // preserve lowercase tag names to avoid false check in htmlparser2 and apply the lowercasing later
-    lowerCaseAttributeNames: false,
-    recognizeSelfClosing: true
+    lowerCaseAttributeNames: false
   }).end(text);
 
   return handler.dom;
diff --git a/tests/html_tags/__snapshots__/jsfmt.spec.js.snap b/tests/html_tags/__snapshots__/jsfmt.spec.js.snap
index 5c46c9e45b7c..dfef64379090 100644
--- a/tests/html_tags/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_tags/__snapshots__/jsfmt.spec.js.snap
@@ -210,7 +210,9 @@ exports[`custom-self-closing.html - html-verify 1`] = `
   <span></span>
 </div>
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-<div><ABC /> <span></span></div>
+<div>
+  <ABC> <span></span> </ABC>
+</div>
 
 `;
 
@@ -221,8 +223,9 @@ exports[`custom-self-closing.html - html-verify 2`] = `
 </div>
 ~
 <div>
-  <ABC />
-  <span></span>
+  <ABC>
+    <span></span>
+  </ABC>
 </div>
 
 `;
@@ -233,7 +236,9 @@ exports[`custom-self-closing.html - html-verify 3`] = `
   <span></span>
 </div>
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-<div><ABC /> <span></span></div>
+<div>
+  <ABC> <span></span> </ABC>
+</div>
 
 `;
 
@@ -243,7 +248,9 @@ exports[`custom-self-closing.html - html-verify 4`] = `
   <span></span>
 </div>
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-<div> <ABC /> <span></span> </div>
+<div>
+  <ABC> <span></span></ABC
+></div>
 
 `;
 
@@ -254,8 +261,7 @@ exports[`custom-self-closing.html - html-verify 5`] = `
 </div>
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 <div>
-  <ABC />
-  <span></span>
+  <ABC><span></span></ABC>
 </div>
 
 `;

From fd4037c85c7fde241c96d200e12ae28add1bfeb4 Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Thu, 11 Oct 2018 17:53:09 +0800
Subject: [PATCH 005/177] feat: merge language-vue into language-html

---
 scripts/build/config.js                       |   4 -
 src/common/internal-plugins.js                |  14 +-
 src/language-html/index.js                    |   7 +
 src/language-html/parser-html.js              |  41 +-
 src/language-html/printer-htmlparser2.js      |  21 +-
 src/language-html/utils.js                    |   7 +-
 src/language-js/preprocess.js                 |   6 +-
 src/language-js/printer-estree.js             |   2 +
 src/language-vue/embed.js                     |  48 --
 src/language-vue/index.js                     |  23 -
 src/language-vue/parser-vue.js                | 425 ------------------
 src/language-vue/pragma.js                    |  14 -
 src/language-vue/printer-vue.js               |  45 --
 src/standalone.js                             |   1 -
 .../vue/__snapshots__/jsfmt.spec.js.snap      |   6 +-
 .../__snapshots__/jsfmt.spec.js.snap          |  35 +-
 .../__snapshots__/jsfmt.spec.js.snap          |   8 +-
 .../vue/__snapshots__/jsfmt.spec.js.snap      |   3 +-
 .../__snapshots__/jsfmt.spec.js.snap          |  54 ++-
 tests_config/require_standalone.js            |   1 -
 website/static/service-worker.js              |   1 -
 website/static/worker.js                      |  11 +-
 22 files changed, 121 insertions(+), 656 deletions(-)
 delete mode 100644 src/language-vue/embed.js
 delete mode 100644 src/language-vue/index.js
 delete mode 100644 src/language-vue/parser-vue.js
 delete mode 100644 src/language-vue/pragma.js
 delete mode 100644 src/language-vue/printer-vue.js

diff --git a/scripts/build/config.js b/scripts/build/config.js
index e1fb4eb5be43..b3a32836c8ac 100644
--- a/scripts/build/config.js
+++ b/scripts/build/config.js
@@ -52,10 +52,6 @@ const parsers = [
     input: "src/language-markdown/parser-markdown.js",
     target: "universal"
   },
-  {
-    input: "src/language-vue/parser-vue.js",
-    target: "universal"
-  },
   {
     input: "src/language-handlebars/parser-glimmer.js",
     target: "universal",
diff --git a/src/common/internal-plugins.js b/src/common/internal-plugins.js
index 8fcea3f55cc8..009735124037 100644
--- a/src/common/internal-plugins.js
+++ b/src/common/internal-plugins.js
@@ -107,22 +107,16 @@ module.exports = [
     }
   },
 
-  // HTML
   require("../language-html"),
   {
     parsers: {
+      // HTML
       get html() {
         return eval("require")("../language-html/parser-html").parsers.html;
-      }
-    }
-  },
-
-  // Vue
-  require("../language-vue"),
-  {
-    parsers: {
+      },
+      // Vue
       get vue() {
-        return eval("require")("../language-vue/parser-vue").parsers.vue;
+        return eval("require")("../language-html/parser-html").parsers.vue;
       }
     }
   },
diff --git a/src/language-html/index.js b/src/language-html/index.js
index 3a9be5104135..a569c1297e01 100644
--- a/src/language-html/index.js
+++ b/src/language-html/index.js
@@ -11,6 +11,13 @@ const languages = [
       parsers: ["html"],
       vscodeLanguageIds: ["html"]
     }
+  }),
+  createLanguage(require("linguist-languages/data/vue"), {
+    override: {
+      since: "1.10.0",
+      parsers: ["vue"],
+      vscodeLanguageIds: ["vue"]
+    }
   })
 ];
 
diff --git a/src/language-html/parser-html.js b/src/language-html/parser-html.js
index dd95a9ebad39..ab66c1da61ab 100644
--- a/src/language-html/parser-html.js
+++ b/src/language-html/parser-html.js
@@ -4,7 +4,7 @@ const parseFrontMatter = require("../utils/front-matter");
 const { HTML_ELEMENT_ATTRIBUTES, HTML_TAGS, mapNode } = require("./utils");
 const { hasPragma } = require("./pragma");
 
-function htmlparser2(text) {
+function htmlparser2(text, recognizeSelfClosing) {
   // Inline the require to avoid loading all the JS if we don't use it
   const Parser = require("htmlparser2/lib/Parser");
   const DomHandler = require("domhandler");
@@ -88,13 +88,19 @@ function htmlparser2(text) {
 
   new CustomParser(handler, {
     lowerCaseTags: true, // preserve lowercase tag names to avoid false check in htmlparser2 and apply the lowercasing later
-    lowerCaseAttributeNames: false
+    lowerCaseAttributeNames: false,
+    recognizeSelfClosing
   }).end(text);
 
   return handler.dom;
 }
 
-function _parse(text, options, shouldParseFrontMatter = true) {
+function _parse(
+  text,
+  options,
+  recognizeSelfClosing = false,
+  shouldParseFrontMatter = true
+) {
   const { frontMatter, content } = shouldParseFrontMatter
     ? parseFrontMatter(text)
     : { frontMatter: null, content: text };
@@ -102,7 +108,7 @@ function _parse(text, options, shouldParseFrontMatter = true) {
   const ast = normalize(
     {
       type: "root",
-      children: htmlparser2(content),
+      children: htmlparser2(content, recognizeSelfClosing),
       startIndex: 0,
       endIndex: text.length
     },
@@ -113,7 +119,8 @@ function _parse(text, options, shouldParseFrontMatter = true) {
     ast.children.unshift(frontMatter);
   }
 
-  const parseSubHtml = subContent => _parse(subContent, options, false);
+  const parseSubHtml = subContent =>
+    _parse(subContent, options, recognizeSelfClosing, false);
 
   return mapNode(ast, node => {
     const ieConditionalComment = parseIeConditionalComment(node, parseSubHtml);
@@ -121,10 +128,6 @@ function _parse(text, options, shouldParseFrontMatter = true) {
   });
 }
 
-function createParser() {
-  return (text, parsers, options) => _parse(text, options);
-}
-
 function parseIeConditionalComment(node, parseHtml) {
   if (node.type !== "comment") {
     return null;
@@ -218,14 +221,20 @@ function locEnd(node) {
   return node.endIndex + 1;
 }
 
+function createParser({ recognizeSelfClosing }) {
+  return {
+    parse: (text, parsers, options) =>
+      _parse(text, options, recognizeSelfClosing),
+    hasPragma,
+    astFormat: "htmlparser2",
+    locStart,
+    locEnd
+  };
+}
+
 module.exports = {
   parsers: {
-    html: {
-      parse: createParser(),
-      hasPragma,
-      astFormat: "htmlparser2",
-      locStart,
-      locEnd
-    }
+    html: createParser({ recognizeSelfClosing: false }),
+    vue: createParser({ recognizeSelfClosing: true })
   }
 };
diff --git a/src/language-html/printer-htmlparser2.js b/src/language-html/printer-htmlparser2.js
index f987f6f91879..a301fcc46708 100644
--- a/src/language-html/printer-htmlparser2.js
+++ b/src/language-html/printer-htmlparser2.js
@@ -3,7 +3,7 @@
 const clean = require("./clean");
 const {
   builders,
-  utils: { removeLines, stripTrailingHardline }
+  utils: { stripTrailingHardline }
 } = require("../doc");
 const {
   breakParent,
@@ -16,9 +16,7 @@ const {
   markAsRoot,
   softline
 } = builders;
-const { hasNewlineInRange } = require("../common/util");
 const {
-  normalizeParts,
   dedentString,
   forceBreakChildren,
   forceBreakContent,
@@ -26,8 +24,10 @@ const {
   getCommentData,
   getLastDescendant,
   hasPrettierIgnore,
+  identity,
   inferScriptParser,
   isScriptLikeTag,
+  normalizeParts,
   preferHardlineAsLeadingSpaces,
   replaceDocNewlines,
   replaceNewlines
@@ -108,14 +108,7 @@ function embed(path, print, textToDoc /*, options */) {
           // TODO(azz): We still need to do an entity escape on the attribute.
           singleQuote: true
         });
-        return concat([
-          node.key,
-          '="',
-          hasNewlineInRange(node.value, 0, node.value.length)
-            ? doc
-            : removeLines(doc),
-          '"'
-        ]);
+        return concat([node.key, '="', doc, '"']);
       }
       break;
     }
@@ -153,7 +146,11 @@ function genericPrint(path, options, print) {
                 : ""
               : concat([
                   forceBreakContent(node) ? breakParent : "",
-                  indent(
+                  (isScriptLikeTag(node) &&
+                  node.parent.type === "root" &&
+                  options.parser === "vue"
+                    ? identity
+                    : indent)(
                     concat([
                       node.firstChild.type === "text" &&
                       node.firstChild.isWhiteSpaceSensitive &&
diff --git a/src/language-html/utils.js b/src/language-html/utils.js
index b09ee0cb64b5..94cf296db643 100644
--- a/src/language-html/utils.js
+++ b/src/language-html/utils.js
@@ -155,7 +155,7 @@ function isTrailingSpaceSensitiveNode(node, { next, parent }) {
 }
 
 function isDanglingSpaceSensitiveNode(node) {
-  return !isBlockLikeCssDisplay(node.cssDisplay);
+  return !isBlockLikeCssDisplay(node.cssDisplay) && !isScriptLikeTag(node);
 }
 
 /**
@@ -453,6 +453,10 @@ function normalizeParts(parts) {
   return newParts;
 }
 
+function identity(x) {
+  return x;
+}
+
 module.exports = {
   HTML_ELEMENT_ATTRIBUTES,
   HTML_TAGS,
@@ -467,6 +471,7 @@ module.exports = {
   getNodeCssStyleWhiteSpace,
   getPrevNode,
   hasPrettierIgnore,
+  identity,
   inferScriptParser,
   isDanglingSpaceSensitiveNode,
   isFrontMatterNode,
diff --git a/src/language-js/preprocess.js b/src/language-js/preprocess.js
index 3548cd85dc93..4d632979d9c1 100644
--- a/src/language-js/preprocess.js
+++ b/src/language-js/preprocess.js
@@ -5,8 +5,12 @@ function preprocess(ast, options) {
     case "json":
     case "json5":
     case "json-stringify":
+    case "__js_expression":
       return Object.assign({}, ast, {
-        type: "JsonRoot",
+        type:
+          options.parser === "__js_expression"
+            ? "JsExpressionRoot"
+            : "JsonRoot",
         node: Object.assign({}, ast, { comments: [] })
       });
     default:
diff --git a/src/language-js/printer-estree.js b/src/language-js/printer-estree.js
index 5d56bda833dd..c9aef3a9dbd4 100644
--- a/src/language-js/printer-estree.js
+++ b/src/language-js/printer-estree.js
@@ -352,6 +352,8 @@ function printPathNoParens(path, options, print, args) {
 
   let parts = [];
   switch (n.type) {
+    case "JsExpressionRoot":
+      return path.call(print, "node");
     case "JsonRoot":
       return concat([path.call(print, "node"), hardline]);
     case "File":
diff --git a/src/language-vue/embed.js b/src/language-vue/embed.js
deleted file mode 100644
index 119e9898749f..000000000000
--- a/src/language-vue/embed.js
+++ /dev/null
@@ -1,48 +0,0 @@
-"use strict";
-
-const { concat, hardline } = require("../doc").builders;
-
-function embed(path, print, textToDoc, options) {
-  const node = path.getValue();
-  const parent = path.getParentNode();
-  if (!parent || parent.tag !== "root" || node.unary) {
-    return null;
-  }
-
-  let parser;
-
-  if (node.tag === "style") {
-    const langAttr = node.attrs.find(attr => attr.name === "lang");
-    if (!langAttr || langAttr.value === "postcss") {
-      parser = "css";
-    } else if (langAttr.value === "scss") {
-      parser = "scss";
-    } else if (langAttr.value === "less") {
-      parser = "less";
-    }
-  }
-
-  if (node.tag === "script" && !node.attrs.some(attr => attr.name === "src")) {
-    const langAttr = node.attrs.find(attr => attr.name === "lang");
-    if (!langAttr) {
-      parser = "babylon";
-    } else if (langAttr.value === "ts" || langAttr.value === "tsx") {
-      parser = "typescript";
-    }
-  }
-
-  if (!parser) {
-    return null;
-  }
-
-  return concat([
-    options.originalText.slice(node.start, node.contentStart),
-    hardline,
-    textToDoc(options.originalText.slice(node.contentStart, node.contentEnd), {
-      parser
-    }),
-    options.originalText.slice(node.contentEnd, node.end)
-  ]);
-}
-
-module.exports = embed;
diff --git a/src/language-vue/index.js b/src/language-vue/index.js
deleted file mode 100644
index c6ba7dcd7a83..000000000000
--- a/src/language-vue/index.js
+++ /dev/null
@@ -1,23 +0,0 @@
-"use strict";
-
-const printer = require("./printer-vue");
-const createLanguage = require("../utils/create-language");
-
-const languages = [
-  createLanguage(require("linguist-languages/data/vue"), {
-    override: {
-      since: "1.10.0",
-      parsers: ["vue"],
-      vscodeLanguageIds: ["vue"]
-    }
-  })
-];
-
-const printers = {
-  vue: printer
-};
-
-module.exports = {
-  languages,
-  printers
-};
diff --git a/src/language-vue/parser-vue.js b/src/language-vue/parser-vue.js
deleted file mode 100644
index 7dce2d762b53..000000000000
--- a/src/language-vue/parser-vue.js
+++ /dev/null
@@ -1,425 +0,0 @@
-"use strict";
-
-const { hasPragma } = require("./pragma");
-
-/*!
- * Extracted from vue codebase
- * https://github.com/vuejs/vue/blob/cfd73c2386623341fdbb3ac636c4baf84ea89c2c/src/compiler/parser/html-parser.js
- * HTML Parser By John Resig (ejohn.org)
- * Modified by Juriy "kangax" Zaytsev
- * Original code by Erik Arvidsson, Mozilla Public License
- * http://erik.eae.net/simplehtmlparser/simplehtmlparser.js
- */
-
-/**
- * Make a map and return a function for checking if a key
- * is in that map.
- */
-function makeMap(str, expectsLowerCase) {
-  const map = Object.create(null);
-  const list = str.split(",");
-  const listLength = list.length;
-  for (let i = 0; i < listLength; i++) {
-    map[list[i]] = true;
-  }
-  return expectsLowerCase ? val => map[val.toLowerCase()] : val => map[val];
-}
-
-/**
- * Always return false.
- */
-const no = () => false;
-
-// HTML5 tags https://html.spec.whatwg.org/multipage/indices.html#elements-3
-// Phrasing Content https://html.spec.whatwg.org/multipage/dom.html#phrasing-content
-const isNonPhrasingTag = makeMap(
-  "address,article,aside,base,blockquote,body,caption,col,colgroup,dd," +
-    "details,dialog,div,dl,dt,fieldset,figcaption,figure,footer,form," +
-    "h1,h2,h3,h4,h5,h6,head,header,hgroup,hr,html,legend,li,menuitem,meta," +
-    "optgroup,option,param,rp,rt,source,style,summary,tbody,td,tfoot,th,thead," +
-    "title,tr,track"
-);
-
-// Regular Expressions for parsing tags and attributes
-const attribute = /^\s*([^\s"'<>/=]+)(?:\s*(=)\s*(?:"([^"]*)"+|'([^']*)'+|([^\s"'=<>`]+)))?/;
-// could use https://www.w3.org/TR/1999/REC-xml-names-19990114/#NT-QName
-// but for Vue templates we can enforce a simple charset
-const ncname = "[a-zA-Z_][\\w\\-\\.]*";
-const qnameCapture = `((?:${ncname}\\:)?${ncname})`;
-const startTagOpen = new RegExp(`^<${qnameCapture}`);
-const startTagClose = /^\s*(\/?)>/;
-const endTag = new RegExp(`^<\\/${qnameCapture}[^>]*>`);
-const doctype = /^<!DOCTYPE [^>]+>/i;
-const comment = /^<!--/;
-const conditionalComment = /^<!\[/;
-
-let IS_REGEX_CAPTURING_BROKEN = false;
-"x".replace(/x(.)?/g, (m, g) => {
-  IS_REGEX_CAPTURING_BROKEN = g === "";
-});
-
-// Special Elements (can contain anything)
-const isPlainTextElement = makeMap("script,style,textarea", true);
-const reCache = {};
-
-const decodingMap = {
-  "&lt;": "<",
-  "&gt;": ">",
-  "&quot;": '"',
-  "&amp;": "&",
-  "&#10;": "\n",
-  "&#9;": "\t"
-};
-const encodedAttr = /&(?:lt|gt|quot|amp);/g;
-const encodedAttrWithNewLines = /&(?:lt|gt|quot|amp|#10|#9);/g;
-
-// #5992
-const isIgnoreNewlineTag = makeMap("pre,textarea", true);
-const shouldIgnoreFirstNewline = (tag, html) =>
-  tag && isIgnoreNewlineTag(tag) && html[0] === "\n";
-
-function decodeAttr(value, shouldDecodeNewlines) {
-  const re = shouldDecodeNewlines ? encodedAttrWithNewLines : encodedAttr;
-  return value.replace(re, match => decodingMap[match]);
-}
-
-function parseHTML(html, options) {
-  const stack = [];
-  const expectHTML = options.expectHTML;
-  const isUnaryTag = options.isUnaryTag || no;
-  const canBeLeftOpenTag = options.canBeLeftOpenTag || no;
-  let index = 0;
-  let last;
-  let lastTag;
-  while (html) {
-    last = html;
-    // Make sure we're not in a plaintext content element like script/style
-    if (!lastTag || !isPlainTextElement(lastTag)) {
-      let textEnd = html.indexOf("<");
-      if (textEnd === 0) {
-        // Comment:
-        if (comment.test(html)) {
-          const commentEnd = html.indexOf("-->");
-
-          if (commentEnd >= 0) {
-            if (options.shouldKeepComment) {
-              options.comment(html.substring(4, commentEnd));
-            }
-            advance(commentEnd + 3);
-            continue;
-          }
-        }
-
-        // http://en.wikipedia.org/wiki/Conditional_comment#Downlevel-revealed_conditional_comment
-        if (conditionalComment.test(html)) {
-          const conditionalEnd = html.indexOf("]>");
-
-          if (conditionalEnd >= 0) {
-            advance(conditionalEnd + 2);
-            continue;
-          }
-        }
-
-        // Doctype:
-        const doctypeMatch = html.match(doctype);
-        if (doctypeMatch) {
-          advance(doctypeMatch[0].length);
-          continue;
-        }
-
-        // End tag:
-        const endTagMatch = html.match(endTag);
-        if (endTagMatch) {
-          const curIndex = index;
-          advance(endTagMatch[0].length);
-          parseEndTag(endTagMatch[1], curIndex, index);
-          continue;
-        }
-
-        // Start tag:
-        const startTagMatch = parseStartTag();
-        if (startTagMatch) {
-          handleStartTag(startTagMatch);
-          if (shouldIgnoreFirstNewline(lastTag, html)) {
-            advance(1);
-          }
-          continue;
-        }
-      }
-
-      let text;
-      let rest;
-      let next;
-
-      if (textEnd >= 0) {
-        rest = html.slice(textEnd);
-        while (
-          !endTag.test(rest) &&
-          !startTagOpen.test(rest) &&
-          !comment.test(rest) &&
-          !conditionalComment.test(rest)
-        ) {
-          // < in plain text, be forgiving and treat it as text
-          next = rest.indexOf("<", 1);
-          if (next < 0) {
-            break;
-          }
-          textEnd += next;
-          rest = html.slice(textEnd);
-        }
-        text = html.substring(0, textEnd);
-        advance(textEnd);
-      }
-
-      if (textEnd < 0) {
-        text = html;
-        html = "";
-      }
-
-      if (options.chars && text) {
-        options.chars(text);
-      }
-    } else {
-      let endTagLength = 0;
-      const stackedTag = lastTag.toLowerCase();
-      const reStackedTag =
-        reCache[stackedTag] ||
-        (reCache[stackedTag] = new RegExp(
-          "([\\s\\S]*?)(</" + stackedTag + "[^>]*>)",
-          "i"
-        ));
-      const rest = html.replace(reStackedTag, (all, text, endTag) => {
-        endTagLength = endTag.length;
-        if (!isPlainTextElement(stackedTag) && stackedTag !== "noscript") {
-          text = text
-            .replace(/<!--([\s\S]*?)-->/g, "$1")
-            .replace(/<!\[CDATA\[([\s\S]*?)]]>/g, "$1");
-        }
-        if (shouldIgnoreFirstNewline(stackedTag, text)) {
-          text = text.slice(1);
-        }
-        if (options.chars) {
-          options.chars(text);
-        }
-        return "";
-      });
-      index += html.length - rest.length;
-      html = rest;
-      parseEndTag(stackedTag, index - endTagLength, index);
-    }
-
-    if (html === last) {
-      options.chars && options.chars(html);
-      if (
-        process.env.NODE_ENV !== "production" &&
-        !stack.length &&
-        options.warn
-      ) {
-        options.warn(`Mal-formatted tag at end of template: "${html}"`);
-      }
-      break;
-    }
-  }
-
-  // Clean up any remaining tags
-  parseEndTag();
-
-  function advance(n) {
-    index += n;
-    html = html.substring(n);
-  }
-
-  function parseStartTag() {
-    const start = html.match(startTagOpen);
-    if (start) {
-      const match = {
-        tagName: start[1],
-        attrs: [],
-        start: index
-      };
-      advance(start[0].length);
-      let end;
-      let attr;
-      while (
-        !(end = html.match(startTagClose)) &&
-        (attr = html.match(attribute))
-      ) {
-        advance(attr[0].length);
-        match.attrs.push(attr);
-      }
-      if (end) {
-        match.unarySlash = end[1];
-        advance(end[0].length);
-        match.end = index;
-        return match;
-      }
-    }
-  }
-
-  function handleStartTag(match) {
-    const { tagName, unarySlash } = match;
-
-    if (expectHTML) {
-      if (lastTag === "p" && isNonPhrasingTag(tagName)) {
-        parseEndTag(lastTag);
-      }
-      if (canBeLeftOpenTag(tagName) && lastTag === tagName) {
-        parseEndTag(tagName);
-      }
-    }
-
-    const unary = isUnaryTag(tagName) || !!unarySlash;
-
-    const l = match.attrs.length;
-    const attrs = new Array(l);
-    for (let i = 0; i < l; i++) {
-      const args = match.attrs[i];
-      // hackish work around FF bug https://bugzilla.mozilla.org/show_bug.cgi?id=369778
-      if (IS_REGEX_CAPTURING_BROKEN && args[0].indexOf('""') === -1) {
-        if (args[3] === "") {
-          delete args[3];
-        }
-        if (args[4] === "") {
-          delete args[4];
-        }
-        if (args[5] === "") {
-          delete args[5];
-        }
-      }
-      const value = args[3] || args[4] || args[5] || "";
-      const shouldDecodeNewlines =
-        tagName === "a" && args[1] === "href"
-          ? options.shouldDecodeNewlinesForHref
-          : options.shouldDecodeNewlines;
-      attrs[i] = {
-        name: args[1],
-        value: decodeAttr(value, shouldDecodeNewlines)
-      };
-    }
-
-    if (!unary) {
-      stack.push({
-        tag: tagName,
-        lowerCasedTag: tagName.toLowerCase(),
-        attrs: attrs
-      });
-      lastTag = tagName;
-    }
-
-    if (options.start) {
-      options.start(tagName, attrs, unary, match.start, match.end);
-    }
-  }
-
-  function parseEndTag(tagName, start, end) {
-    let pos;
-    let lowerCasedTagName;
-    if (start == null) {
-      start = index;
-    }
-    if (end == null) {
-      end = index;
-    }
-
-    if (tagName) {
-      lowerCasedTagName = tagName.toLowerCase();
-    }
-
-    // Find the closest opened tag of the same type
-    if (tagName) {
-      for (pos = stack.length - 1; pos >= 0; pos--) {
-        if (stack[pos].lowerCasedTag === lowerCasedTagName) {
-          break;
-        }
-      }
-    } else {
-      // If no tag name is provided, clean shop
-      pos = 0;
-    }
-
-    if (pos >= 0) {
-      // Close all the open elements, up the stack
-      for (let i = stack.length - 1; i >= pos; i--) {
-        if (
-          process.env.NODE_ENV !== "production" &&
-          (i > pos || !tagName) &&
-          options.warn
-        ) {
-          options.warn(`tag <${stack[i].tag}> has no matching end tag.`);
-        }
-        if (options.end) {
-          options.end(stack[i].tag, start, end);
-        }
-      }
-
-      // Remove the open elements from the stack
-      stack.length = pos;
-      lastTag = pos && stack[pos - 1].tag;
-    } else if (lowerCasedTagName === "br") {
-      if (options.start) {
-        options.start(tagName, [], true, start, end);
-      }
-    } else if (lowerCasedTagName === "p") {
-      if (options.start) {
-        options.start(tagName, [], false, start, end);
-      }
-      if (options.end) {
-        options.end(tagName, start, end);
-      }
-    }
-  }
-}
-
-function parse(text /*, parsers, opts*/) {
-  const rootObj = {
-    tag: "root",
-    attrs: [],
-    unary: false,
-    start: 0,
-    contentStart: 0,
-    contentEnd: text.length,
-    end: text.length,
-    children: [],
-    comments: []
-  };
-  const objStack = [rootObj];
-  let obj = rootObj;
-  parseHTML(text, {
-    start: function(tag, attrs, unary, start, end) {
-      const newObj = {
-        tag,
-        attrs,
-        unary,
-        start,
-        children: []
-      };
-      obj.children.push(newObj);
-      if (unary) {
-        newObj.end = end;
-      } else {
-        newObj.contentStart = end;
-        objStack.push(newObj);
-        obj = newObj;
-      }
-    },
-    end: function(tag, start, end) {
-      objStack.pop();
-      obj.contentEnd = start;
-      obj.end = end;
-      obj = objStack[objStack.length - 1];
-    }
-  });
-  return rootObj;
-}
-
-module.exports = {
-  parsers: {
-    vue: {
-      parse,
-      hasPragma,
-      astFormat: "vue",
-      locStart: node => node.start,
-      locEnd: node => node.end
-    }
-  }
-};
diff --git a/src/language-vue/pragma.js b/src/language-vue/pragma.js
deleted file mode 100644
index 650328d4f3ef..000000000000
--- a/src/language-vue/pragma.js
+++ /dev/null
@@ -1,14 +0,0 @@
-"use strict";
-
-function hasPragma(text) {
-  return /^\s*<!--\s*@(format|prettier)\s*-->/.test(text);
-}
-
-function insertPragma(text) {
-  return "<!-- @format -->\n\n" + text.replace(/^\s*\n/, "");
-}
-
-module.exports = {
-  hasPragma,
-  insertPragma
-};
diff --git a/src/language-vue/printer-vue.js b/src/language-vue/printer-vue.js
deleted file mode 100644
index 5a8f54c0f340..000000000000
--- a/src/language-vue/printer-vue.js
+++ /dev/null
@@ -1,45 +0,0 @@
-"use strict";
-
-const embed = require("./embed");
-const { concat, hardline } = require("../doc").builders;
-const { insertPragma } = require("./pragma");
-
-function genericPrint(path, options, print) {
-  const n = path.getValue();
-  const res = [];
-  let index = n.start;
-
-  path.each(childPath => {
-    const child = childPath.getValue();
-    res.push(options.originalText.slice(index, child.start));
-    res.push(childPath.call(print));
-    index = child.end;
-  }, "children");
-
-  // If there are no children, we just print the node from start to end.
-  // Otherwise, index should point to the end of the last child, and we
-  // need to print the closing tag.
-  res.push(options.originalText.slice(index, n.end));
-
-  // Only force a trailing newline if there were any contents.
-  if (n.tag === "root" && n.children.length) {
-    res.push(hardline);
-  }
-
-  return concat(res);
-}
-
-const clean = (ast, newObj) => {
-  delete newObj.start;
-  delete newObj.end;
-  delete newObj.contentStart;
-  delete newObj.contentEnd;
-};
-
-module.exports = {
-  print: genericPrint,
-  embed,
-  insertPragma,
-  massageAstNode: clean,
-  canAttachComment: node => typeof node.tag === "string"
-};
diff --git a/src/standalone.js b/src/standalone.js
index 6ce2a0fb79b5..0aaf0d10eeb3 100644
--- a/src/standalone.js
+++ b/src/standalone.js
@@ -15,7 +15,6 @@ const internalPlugins = [
   require("./language-html"),
   require("./language-js"),
   require("./language-markdown"),
-  require("./language-vue"),
   require("./language-yaml")
 ];
 
diff --git a/tests/insert-pragma/vue/__snapshots__/jsfmt.spec.js.snap b/tests/insert-pragma/vue/__snapshots__/jsfmt.spec.js.snap
index 11feca5eb4e4..24370e332f72 100644
--- a/tests/insert-pragma/vue/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/insert-pragma/vue/__snapshots__/jsfmt.spec.js.snap
@@ -20,8 +20,7 @@ const    x      = 1;
 <script>
 const x = 1;
 </script>
-<style src="./my-component.css">
-</style>
+<style src="./my-component.css"></style>
 
 `;
 
@@ -46,7 +45,6 @@ const    x      = 1;
 <script>
 const x = 1;
 </script>
-<style src="./my-component.css">
-</style>
+<style src="./my-component.css"></style>
 
 `;
diff --git a/tests/multiparser_vue/__snapshots__/jsfmt.spec.js.snap b/tests/multiparser_vue/__snapshots__/jsfmt.spec.js.snap
index 684d5402a9a8..1c3670d05b99 100644
--- a/tests/multiparser_vue/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/multiparser_vue/__snapshots__/jsfmt.spec.js.snap
@@ -63,10 +63,10 @@ exports[`template-bind.vue - vue-verify 1`] = `
 
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 <template>
-    <div v-bind:id=" 'list-'   +  id "></div>
-    <div v-bind:id="  rawId | formatId "></div>
-    <div v-bind:id=" ok ? 'YES' : 'NO' "></div>
-    <button @click=" foo ( arg, 'string' ) "></button>
+  <div v-bind:id="'list-' + id"></div>
+  <div v-bind:id="rawId | formatId"></div>
+  <div v-bind:id="ok ? 'YES' : 'NO'"></div>
+  <button @click="foo(arg, 'string')"></button>
 </template>
 
 `;
@@ -85,11 +85,12 @@ exports[`template-class.vue - vue-verify 1`] = `
 <template>
   <h2
     class="title"
-    :class="{ 'issue-realtime-pre-pulse': preAnimation,
- 'issue-realtime-trigger-pulse': pulseAnimation}"
+    :class="{
+      'issue-realtime-pre-pulse': preAnimation,
+      'issue-realtime-trigger-pulse': pulseAnimation
+    }"
     v-html="titleHtml"
-  >
-  </h2>
+  ></h2>
 </template>
 
 `;
@@ -118,10 +119,12 @@ p { font-size : 2em ; text-align : center ; }
 
   </style >
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-<template >
-  <h1 >{{greeting}}     world</h1 >
-  <script>kikoo ( ) </script>
-</template >
+<template>
+  <h1>{{greeting}} world</h1>
+  <script>
+    kikoo();
+  </script>
+</template>
 
 <script>
 module.exports = {
@@ -133,18 +136,18 @@ module.exports = {
 };
 </script>
 
-<style   scoped >
+<style scoped>
 p {
   font-size: 2em;
   text-align: center;
 }
-</style >
+</style>
 
-<style   lang="postcss" >
+<style lang="postcss">
 p {
   font-size: 2em;
   text-align: center;
 }
-</style >
+</style>
 
 `;
diff --git a/tests/range_vue/__snapshots__/jsfmt.spec.js.snap b/tests/range_vue/__snapshots__/jsfmt.spec.js.snap
index ab6fa7b00001..3b327792eb0e 100644
--- a/tests/range_vue/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/range_vue/__snapshots__/jsfmt.spec.js.snap
@@ -15,8 +15,7 @@ let Prettier        = format => { your.js('though') }
 </style>
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 <template>
-  <p>Templates are not formatted yet ...
-    </p>
+  <p>Templates are not formatted yet ...</p>
 </template>
 
 <script>
@@ -26,7 +25,8 @@ let Prettier = format => {
 </script>
 
 <style>
-.and { css: too !important }
+.and {
+  css: too !important;
+}
 </style>
-
 `;
diff --git a/tests/require-pragma/vue/__snapshots__/jsfmt.spec.js.snap b/tests/require-pragma/vue/__snapshots__/jsfmt.spec.js.snap
index b8b93a41c9d2..cb87d7271519 100644
--- a/tests/require-pragma/vue/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/require-pragma/vue/__snapshots__/jsfmt.spec.js.snap
@@ -17,8 +17,7 @@ const    x      = 1;
 <script>
 const x = 1;
 </script>
-<style src="./my-component.css">
-</style>
+<style src="./my-component.css"></style>
 
 `;
 
diff --git a/tests/vue_examples/__snapshots__/jsfmt.spec.js.snap b/tests/vue_examples/__snapshots__/jsfmt.spec.js.snap
index dfe7afb36a42..f8e26fff16aa 100644
--- a/tests/vue_examples/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/vue_examples/__snapshots__/jsfmt.spec.js.snap
@@ -133,19 +133,26 @@ export default {
 </script>
 
 <template>
-  <li class="card"
-    :class="{ 'user-can-drag': !disabled && issue.id, 'is-disabled': disabled || !issue.id, 'is-active': issueDetailVisible }"
+  <li
+    class="card"
+    :class="{
+      'user-can-drag': !disabled && issue.id,
+      'is-disabled': disabled || !issue.id,
+      'is-active': issueDetailVisible
+    }"
     :index="index"
     :data-issue-id="issue.id"
     @mousedown="mouseDown"
     @mousemove="mouseMove"
-    @mouseup="showIssue($event)">
+    @mouseup="showIssue($event)"
+  >
     <issue-card-inner
       :list="list"
       :issue="issue"
       :issue-link-base="issueLinkBase"
       :root-path="rootPath"
-      :update-filters="true" />
+      :update-filters="true"
+    />
   </li>
 </template>
 
@@ -284,19 +291,26 @@ export default {
 </script>
 
 <template>
-  <li class="card"
-    :class="{ 'user-can-drag': !disabled && issue.id, 'is-disabled': disabled || !issue.id, 'is-active': issueDetailVisible }"
+  <li
+    class="card"
+    :class="{
+      'user-can-drag': !disabled && issue.id,
+      'is-disabled': disabled || !issue.id,
+      'is-active': issueDetailVisible,
+    }"
     :index="index"
     :data-issue-id="issue.id"
     @mousedown="mouseDown"
     @mousemove="mouseMove"
-    @mouseup="showIssue($event)">
+    @mouseup="showIssue($event)"
+  >
     <issue-card-inner
       :list="list"
       :issue="issue"
       :issue-link-base="issueLinkBase"
       :root-path="rootPath"
-      :update-filters="true" />
+      :update-filters="true"
+    />
   </li>
 </template>
 
@@ -307,7 +321,9 @@ exports[`script_src.vue - vue-verify 1`] = `
 <script src="https://www.gstatic.com/firebasejs/4.10.1/firebase-firestore.js"></script>
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 <script src="https://www.gstatic.com/firebasejs/4.10.1/firebase.js"></script>
-<script src="https://www.gstatic.com/firebasejs/4.10.1/firebase-firestore.js"></script>
+<script
+  src="https://www.gstatic.com/firebasejs/4.10.1/firebase-firestore.js"
+></script>
 
 `;
 
@@ -316,7 +332,9 @@ exports[`script_src.vue - vue-verify 2`] = `
 <script src="https://www.gstatic.com/firebasejs/4.10.1/firebase-firestore.js"></script>
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 <script src="https://www.gstatic.com/firebasejs/4.10.1/firebase.js"></script>
-<script src="https://www.gstatic.com/firebasejs/4.10.1/firebase-firestore.js"></script>
+<script
+  src="https://www.gstatic.com/firebasejs/4.10.1/firebase-firestore.js"
+></script>
 
 `;
 
@@ -400,15 +418,11 @@ exports[`test.vue - vue-verify 1`] = `
   </footer>
 </template>
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-<script>
-</script>
+<script></script>
 
 <template>
   <br />
-  <footer>
-    foo
-    <br/>
-  </footer>
+  <footer>foo <br /></footer>
 </template>
 
 `;
@@ -425,15 +439,11 @@ exports[`test.vue - vue-verify 2`] = `
   </footer>
 </template>
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-<script>
-</script>
+<script></script>
 
 <template>
   <br />
-  <footer>
-    foo
-    <br/>
-  </footer>
+  <footer>foo <br /></footer>
 </template>
 
 `;
diff --git a/tests_config/require_standalone.js b/tests_config/require_standalone.js
index 8f01fcecabb7..331ba12a1541 100644
--- a/tests_config/require_standalone.js
+++ b/tests_config/require_standalone.js
@@ -14,7 +14,6 @@ const sources = [
   "parser-markdown.js",
   "parser-postcss.js",
   "parser-typescript.js",
-  "parser-vue.js",
   "parser-yaml.js"
 ].map(filename =>
   fs.readFileSync(path.join(process.env.PRETTIER_DIR, filename), "utf-8")
diff --git a/website/static/service-worker.js b/website/static/service-worker.js
index de5af787c43b..5fe9e2f8873d 100644
--- a/website/static/service-worker.js
+++ b/website/static/service-worker.js
@@ -16,7 +16,6 @@ toolbox.precache([
   "lib/parser-markdown.js",
   "lib/parser-postcss.js",
   "lib/parser-typescript.js",
-  "lib/parser-vue.js",
   "lib/parser-yaml.js",
   "playground.js",
   "https://unpkg.com/sw-toolbox@3.6.0/sw-toolbox.js",
diff --git a/website/static/worker.js b/website/static/worker.js
index cd8cf8d942c0..720a865bd75c 100644
--- a/website/static/worker.js
+++ b/website/static/worker.js
@@ -74,12 +74,6 @@ var parsers = {
     return prettierPlugins.markdown.parsers.mdx;
   },
 
-  // Vue
-  get vue() {
-    importScriptOnce("lib/parser-vue.js");
-    return prettierPlugins.vue.parsers.vue;
-  },
-
   // YAML
   get yaml() {
     importScriptOnce("lib/parser-yaml.js");
@@ -96,6 +90,11 @@ var parsers = {
   get html() {
     importScriptOnce("lib/parser-html.js");
     return prettierPlugins.html.parsers.html;
+  },
+  // Vue
+  get vue() {
+    importScriptOnce("lib/parser-html.js");
+    return prettierPlugins.html.parsers.vue;
   }
 };
 

From 2174ad887d8943eb14f080ddbdde968112d947c5 Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Thu, 11 Oct 2018 17:57:37 +0800
Subject: [PATCH 006/177] fix: force not to break <script src>

---
 src/language-html/printer-htmlparser2.js      | 21 ++++++++++++++++---
 .../__snapshots__/jsfmt.spec.js.snap          |  8 ++-----
 2 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/src/language-html/printer-htmlparser2.js b/src/language-html/printer-htmlparser2.js
index a301fcc46708..a65707b265ba 100644
--- a/src/language-html/printer-htmlparser2.js
+++ b/src/language-html/printer-htmlparser2.js
@@ -354,6 +354,12 @@ function printChildren(path, options, print) {
 
 function printOpeningTag(path, options, print) {
   const node = path.getValue();
+  const forceNotToBreakAttrContent =
+    node.type === "tag" &&
+    node.name === "script" &&
+    node.attributes.length === 1 &&
+    node.attributes[0].key === "src" &&
+    node.children.length === 0;
   return concat([
     printOpeningTagStart(node),
     !node.attributes || node.attributes.length === 0
@@ -374,7 +380,12 @@ function printOpeningTag(path, options, print) {
                  */
                 breakParent
               : "",
-            indent(concat([line, join(line, path.map(print, "attributes"))])),
+            indent(
+              concat([
+                forceNotToBreakAttrContent ? " " : line,
+                join(line, path.map(print, "attributes"))
+              ])
+            ),
             node.firstChild &&
             needsToBorrowParentOpeningTagEndMarker(node.firstChild)
               ? /**
@@ -385,8 +396,12 @@ function printOpeningTag(path, options, print) {
                  */
                 ""
               : node.isSelfClosing
-                ? line
-                : softline
+                ? forceNotToBreakAttrContent
+                  ? " "
+                  : line
+                : forceNotToBreakAttrContent
+                  ? ""
+                  : softline
           ])
         ),
     node.isSelfClosing ? "" : printOpeningTagEnd(node)
diff --git a/tests/vue_examples/__snapshots__/jsfmt.spec.js.snap b/tests/vue_examples/__snapshots__/jsfmt.spec.js.snap
index f8e26fff16aa..8a312e2e3c59 100644
--- a/tests/vue_examples/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/vue_examples/__snapshots__/jsfmt.spec.js.snap
@@ -321,9 +321,7 @@ exports[`script_src.vue - vue-verify 1`] = `
 <script src="https://www.gstatic.com/firebasejs/4.10.1/firebase-firestore.js"></script>
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 <script src="https://www.gstatic.com/firebasejs/4.10.1/firebase.js"></script>
-<script
-  src="https://www.gstatic.com/firebasejs/4.10.1/firebase-firestore.js"
-></script>
+<script src="https://www.gstatic.com/firebasejs/4.10.1/firebase-firestore.js"></script>
 
 `;
 
@@ -332,9 +330,7 @@ exports[`script_src.vue - vue-verify 2`] = `
 <script src="https://www.gstatic.com/firebasejs/4.10.1/firebase-firestore.js"></script>
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 <script src="https://www.gstatic.com/firebasejs/4.10.1/firebase.js"></script>
-<script
-  src="https://www.gstatic.com/firebasejs/4.10.1/firebase-firestore.js"
-></script>
+<script src="https://www.gstatic.com/firebasejs/4.10.1/firebase-firestore.js"></script>
 
 `;
 

From e8a1200451f7667d459778046eb9e843021af3cf Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Thu, 11 Oct 2018 17:59:36 +0800
Subject: [PATCH 007/177] chore: move pragma tests

---
 .../html}/__snapshots__/jsfmt.spec.js.snap                        | 0
 tests/{html_pragma/insert => insert-pragma/html}/jsfmt.spec.js    | 0
 tests/{html_pragma/insert => insert-pragma/html}/with-pragma.html | 0
 .../insert => insert-pragma/html}/without-pragma.html             | 0
 .../html}/__snapshots__/jsfmt.spec.js.snap                        | 0
 tests/{html_pragma/require => require-pragma/html}/jsfmt.spec.js  | 0
 .../{html_pragma/require => require-pragma/html}/with-pragma.html | 0
 .../require => require-pragma/html}/without-pragma.html           | 0
 8 files changed, 0 insertions(+), 0 deletions(-)
 rename tests/{html_pragma/insert => insert-pragma/html}/__snapshots__/jsfmt.spec.js.snap (100%)
 rename tests/{html_pragma/insert => insert-pragma/html}/jsfmt.spec.js (100%)
 rename tests/{html_pragma/insert => insert-pragma/html}/with-pragma.html (100%)
 rename tests/{html_pragma/insert => insert-pragma/html}/without-pragma.html (100%)
 rename tests/{html_pragma/require => require-pragma/html}/__snapshots__/jsfmt.spec.js.snap (100%)
 rename tests/{html_pragma/require => require-pragma/html}/jsfmt.spec.js (100%)
 rename tests/{html_pragma/require => require-pragma/html}/with-pragma.html (100%)
 rename tests/{html_pragma/require => require-pragma/html}/without-pragma.html (100%)

diff --git a/tests/html_pragma/insert/__snapshots__/jsfmt.spec.js.snap b/tests/insert-pragma/html/__snapshots__/jsfmt.spec.js.snap
similarity index 100%
rename from tests/html_pragma/insert/__snapshots__/jsfmt.spec.js.snap
rename to tests/insert-pragma/html/__snapshots__/jsfmt.spec.js.snap
diff --git a/tests/html_pragma/insert/jsfmt.spec.js b/tests/insert-pragma/html/jsfmt.spec.js
similarity index 100%
rename from tests/html_pragma/insert/jsfmt.spec.js
rename to tests/insert-pragma/html/jsfmt.spec.js
diff --git a/tests/html_pragma/insert/with-pragma.html b/tests/insert-pragma/html/with-pragma.html
similarity index 100%
rename from tests/html_pragma/insert/with-pragma.html
rename to tests/insert-pragma/html/with-pragma.html
diff --git a/tests/html_pragma/insert/without-pragma.html b/tests/insert-pragma/html/without-pragma.html
similarity index 100%
rename from tests/html_pragma/insert/without-pragma.html
rename to tests/insert-pragma/html/without-pragma.html
diff --git a/tests/html_pragma/require/__snapshots__/jsfmt.spec.js.snap b/tests/require-pragma/html/__snapshots__/jsfmt.spec.js.snap
similarity index 100%
rename from tests/html_pragma/require/__snapshots__/jsfmt.spec.js.snap
rename to tests/require-pragma/html/__snapshots__/jsfmt.spec.js.snap
diff --git a/tests/html_pragma/require/jsfmt.spec.js b/tests/require-pragma/html/jsfmt.spec.js
similarity index 100%
rename from tests/html_pragma/require/jsfmt.spec.js
rename to tests/require-pragma/html/jsfmt.spec.js
diff --git a/tests/html_pragma/require/with-pragma.html b/tests/require-pragma/html/with-pragma.html
similarity index 100%
rename from tests/html_pragma/require/with-pragma.html
rename to tests/require-pragma/html/with-pragma.html
diff --git a/tests/html_pragma/require/without-pragma.html b/tests/require-pragma/html/without-pragma.html
similarity index 100%
rename from tests/html_pragma/require/without-pragma.html
rename to tests/require-pragma/html/without-pragma.html

From 7f528c812152adf622ef7922ca4c3380b16b9e7c Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Fri, 12 Oct 2018 12:27:25 +0800
Subject: [PATCH 008/177] test: add tests

---
 tests/html_cdata/__snapshots__/jsfmt.spec.js.snap | 8 ++++++++
 tests/html_cdata/example.html                     | 1 +
 tests/html_cdata/jsfmt.spec.js                    | 1 +
 3 files changed, 10 insertions(+)
 create mode 100644 tests/html_cdata/__snapshots__/jsfmt.spec.js.snap
 create mode 100644 tests/html_cdata/example.html
 create mode 100644 tests/html_cdata/jsfmt.spec.js

diff --git a/tests/html_cdata/__snapshots__/jsfmt.spec.js.snap b/tests/html_cdata/__snapshots__/jsfmt.spec.js.snap
new file mode 100644
index 000000000000..ff804cf5041b
--- /dev/null
+++ b/tests/html_cdata/__snapshots__/jsfmt.spec.js.snap
@@ -0,0 +1,8 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`example.html - html-verify 1`] = `
+<span><![CDATA[<sender>John Smith</sender>]]></span>
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+<span><!-- [CDATA[<sender>John Smith</sender>]] --></span>
+
+`;
diff --git a/tests/html_cdata/example.html b/tests/html_cdata/example.html
new file mode 100644
index 000000000000..e62ba2a308f4
--- /dev/null
+++ b/tests/html_cdata/example.html
@@ -0,0 +1 @@
+<span><![CDATA[<sender>John Smith</sender>]]></span>
diff --git a/tests/html_cdata/jsfmt.spec.js b/tests/html_cdata/jsfmt.spec.js
new file mode 100644
index 000000000000..53763df9b20b
--- /dev/null
+++ b/tests/html_cdata/jsfmt.spec.js
@@ -0,0 +1 @@
+run_spec(__dirname, ["html"]);

From f7b85b7b3440ebeaf39eef2fee8db6a9d10bd462 Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Fri, 12 Oct 2018 12:32:01 +0800
Subject: [PATCH 009/177] feat: recognize CDATA

---
 src/language-html/parser-html.js              |  3 +-
 src/language-html/preprocess.js               | 51 +++++++++++++++++++
 .../__snapshots__/jsfmt.spec.js.snap          |  2 +-
 3 files changed, 54 insertions(+), 2 deletions(-)

diff --git a/src/language-html/parser-html.js b/src/language-html/parser-html.js
index ab66c1da61ab..9fc6e599af85 100644
--- a/src/language-html/parser-html.js
+++ b/src/language-html/parser-html.js
@@ -89,7 +89,8 @@ function htmlparser2(text, recognizeSelfClosing) {
   new CustomParser(handler, {
     lowerCaseTags: true, // preserve lowercase tag names to avoid false check in htmlparser2 and apply the lowercasing later
     lowerCaseAttributeNames: false,
-    recognizeSelfClosing
+    recognizeSelfClosing,
+    recognizeCDATA: true
   }).end(text);
 
   return handler.dom;
diff --git a/src/language-html/preprocess.js b/src/language-html/preprocess.js
index a5adcf24cda6..f08b2ccf2709 100644
--- a/src/language-html/preprocess.js
+++ b/src/language-html/preprocess.js
@@ -15,6 +15,7 @@ const LineAndColumn = (m => m.default || m)(require("lines-and-columns"));
 
 const PREPROCESS_PIPELINE = [
   renameScriptAndStyleWithTag,
+  mergeCdataIntoText,
   processDirectives,
   addIsSelfClosing,
   extractWhitespaces,
@@ -31,6 +32,56 @@ function preprocess(ast, options) {
   return ast;
 }
 
+function mergeCdataIntoText(ast, options) {
+  return mapNode(ast, node => {
+    if (node.type === "cdata") {
+      const newNode = Object.assign({}, node, {
+        // we cannot use child.data here since there's no child for whitespace-only text in cdata
+        data: options.originalText.slice(
+          options.locStart(node),
+          options.locEnd(node)
+        )
+      });
+      delete newNode.children;
+      return newNode;
+    }
+
+    if (node.children && node.children.some(child => child.type === "cdata")) {
+      const newChildren = [];
+      for (const child of node.children) {
+        if (child.type !== "text" && child.type !== "cdata") {
+          newChildren.push(child);
+          continue;
+        }
+
+        const newChild =
+          child.type === "text"
+            ? child
+            : Object.assign({}, child, { type: "text" });
+
+        if (
+          newChildren.length === 0 ||
+          newChildren[newChildren.length - 1].type !== "text"
+        ) {
+          newChildren.push(newChild);
+          continue;
+        }
+
+        const lastChild = newChildren.pop();
+        newChildren.push(
+          Object.assign({}, lastChild, {
+            data: lastChild.data + newChild.data,
+            endIndex: newChild.endIndex
+          })
+        );
+      }
+      return Object.assign({}, node, { children: newChildren });
+    }
+
+    return node;
+  });
+}
+
 /** add `startLocation` and `endLocation` field */
 function addStartAndEndLocation(ast, options) {
   const locator = new LineAndColumn(options.originalText);
diff --git a/tests/html_cdata/__snapshots__/jsfmt.spec.js.snap b/tests/html_cdata/__snapshots__/jsfmt.spec.js.snap
index ff804cf5041b..41dd5590442a 100644
--- a/tests/html_cdata/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_cdata/__snapshots__/jsfmt.spec.js.snap
@@ -3,6 +3,6 @@
 exports[`example.html - html-verify 1`] = `
 <span><![CDATA[<sender>John Smith</sender>]]></span>
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-<span><!-- [CDATA[<sender>John Smith</sender>]] --></span>
+<span><![CDATA[<sender>John Smith</sender>]]></span>
 
 `;

From 7ca1eb80bb33578f080ae76a02cae5678d604dae Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Fri, 12 Oct 2018 12:59:00 +0800
Subject: [PATCH 010/177] test: add tests

---
 tests/multiparser_vue/__snapshots__/jsfmt.spec.js.snap | 6 ++++++
 tests/multiparser_vue/template-bind.vue                | 3 +++
 2 files changed, 9 insertions(+)

diff --git a/tests/multiparser_vue/__snapshots__/jsfmt.spec.js.snap b/tests/multiparser_vue/__snapshots__/jsfmt.spec.js.snap
index 1c3670d05b99..f8f63b2cdeac 100644
--- a/tests/multiparser_vue/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/multiparser_vue/__snapshots__/jsfmt.spec.js.snap
@@ -56,6 +56,9 @@ export default {
 exports[`template-bind.vue - vue-verify 1`] = `
 <template>
     <div v-bind:id=" 'list-'   +  id "></div>
+    <div v-bind:id=" &quot;list-&quot;   +  id "></div>
+    <div v-bind:id=" &apos;list-&apos;   +  id "></div>
+    <div v-bind:id=" &apos;&quot;&apos;   +  id "></div>
     <div v-bind:id="  rawId | formatId "></div>
     <div v-bind:id=" ok ? 'YES' : 'NO' "></div>
     <button @click=" foo ( arg, 'string' ) "></button>
@@ -64,6 +67,9 @@ exports[`template-bind.vue - vue-verify 1`] = `
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 <template>
   <div v-bind:id="'list-' + id"></div>
+  <div v-bind:id=" &quot;list-&quot;   +  id "></div>
+  <div v-bind:id=" &apos;list-&apos;   +  id "></div>
+  <div v-bind:id=" &apos;&quot;&apos;   +  id "></div>
   <div v-bind:id="rawId | formatId"></div>
   <div v-bind:id="ok ? 'YES' : 'NO'"></div>
   <button @click="foo(arg, 'string')"></button>
diff --git a/tests/multiparser_vue/template-bind.vue b/tests/multiparser_vue/template-bind.vue
index 165dcced95bc..3c1f9dc7cade 100644
--- a/tests/multiparser_vue/template-bind.vue
+++ b/tests/multiparser_vue/template-bind.vue
@@ -1,5 +1,8 @@
 <template>
     <div v-bind:id=" 'list-'   +  id "></div>
+    <div v-bind:id=" &quot;list-&quot;   +  id "></div>
+    <div v-bind:id=" &apos;list-&apos;   +  id "></div>
+    <div v-bind:id=" &apos;&quot;&apos;   +  id "></div>
     <div v-bind:id="  rawId | formatId "></div>
     <div v-bind:id=" ok ? 'YES' : 'NO' "></div>
     <button @click=" foo ( arg, 'string' ) "></button>

From ab2fa8f9d208feda9e7e4d6b1da3150cfd9af4d9 Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Fri, 12 Oct 2018 13:00:14 +0800
Subject: [PATCH 011/177] fix: escape quotes in js-expression attributes

---
 src/language-html/printer-htmlparser2.js      | 21 ++++++++++++-------
 .../__snapshots__/jsfmt.spec.js.snap          |  6 +++---
 2 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/src/language-html/printer-htmlparser2.js b/src/language-html/printer-htmlparser2.js
index a65707b265ba..e8ce7f9edae1 100644
--- a/src/language-html/printer-htmlparser2.js
+++ b/src/language-html/printer-htmlparser2.js
@@ -3,7 +3,7 @@
 const clean = require("./clean");
 const {
   builders,
-  utils: { stripTrailingHardline }
+  utils: { stripTrailingHardline, mapDoc }
 } = require("../doc");
 const {
   breakParent,
@@ -102,13 +102,18 @@ function embed(path, print, textToDoc /*, options */) {
        * @click="someFunction()"
        */
       if (/(^@)|(^v-)|:/.test(node.key) && !/^\w+$/.test(node.value)) {
-        const doc = textToDoc(node.value, {
-          parser: "__js_expression",
-          // Use singleQuote since HTML attributes use double-quotes.
-          // TODO(azz): We still need to do an entity escape on the attribute.
-          singleQuote: true
-        });
-        return concat([node.key, '="', doc, '"']);
+        return concat([
+          node.key,
+          '="',
+          mapDoc(
+            textToDoc(
+              node.value.replace(/&quot;/g, '"').replace(/&apos;/g, "'"),
+              { parser: "__js_expression", singleQuote: true }
+            ),
+            doc => (typeof doc === "string" ? doc.replace(/"/g, "&quot;") : doc)
+          ),
+          '"'
+        ]);
       }
       break;
     }
diff --git a/tests/multiparser_vue/__snapshots__/jsfmt.spec.js.snap b/tests/multiparser_vue/__snapshots__/jsfmt.spec.js.snap
index f8f63b2cdeac..799470d5f3e8 100644
--- a/tests/multiparser_vue/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/multiparser_vue/__snapshots__/jsfmt.spec.js.snap
@@ -67,9 +67,9 @@ exports[`template-bind.vue - vue-verify 1`] = `
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 <template>
   <div v-bind:id="'list-' + id"></div>
-  <div v-bind:id=" &quot;list-&quot;   +  id "></div>
-  <div v-bind:id=" &apos;list-&apos;   +  id "></div>
-  <div v-bind:id=" &apos;&quot;&apos;   +  id "></div>
+  <div v-bind:id="'list-' + id"></div>
+  <div v-bind:id="'list-' + id"></div>
+  <div v-bind:id="'&quot;' + id"></div>
   <div v-bind:id="rawId | formatId"></div>
   <div v-bind:id="ok ? 'YES' : 'NO'"></div>
   <button @click="foo(arg, 'string')"></button>

From ef57084378cae4696f54f46c23a9840f1d4d7724 Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Fri, 12 Oct 2018 14:50:30 +0800
Subject: [PATCH 012/177] test: add tests

---
 .../__snapshots__/jsfmt.spec.js.snap          | 39 +++++++++++++++++++
 tests/html_interpolation/example.html         | 26 +++++++++++++
 tests/html_interpolation/jsfmt.spec.js        |  1 +
 3 files changed, 66 insertions(+)
 create mode 100644 tests/html_interpolation/__snapshots__/jsfmt.spec.js.snap
 create mode 100644 tests/html_interpolation/example.html
 create mode 100644 tests/html_interpolation/jsfmt.spec.js

diff --git a/tests/html_interpolation/__snapshots__/jsfmt.spec.js.snap b/tests/html_interpolation/__snapshots__/jsfmt.spec.js.snap
new file mode 100644
index 000000000000..258b8dc47366
--- /dev/null
+++ b/tests/html_interpolation/__snapshots__/jsfmt.spec.js.snap
@@ -0,0 +1,39 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`example.html - html-verify 1`] = `
+<div>Fuga magnam facilis. Voluptatem quaerat porro.{{
+
+
+x => {
+    const hello = 'world'
+    return hello;
+}
+
+
+
+}} Magni consectetur in et molestias neque esse voluptatibus voluptas. {{  
+    
+    
+    some_variable 
+
+
+
+}} Eum quia nihil nulla esse. Dolorem asperiores vero est error {{
+
+                    preserve
+
+                    invalid
+                    
+                    interpolation
+
+}} reprehenderit voluptates minus {{console.log(  short_interpolation )}} nemo.</div>
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+<div>
+  Fuga magnam facilis. Voluptatem quaerat porro.{{ x => { const hello = 'world'
+  return hello; } }} Magni consectetur in et molestias neque esse voluptatibus
+  voluptas. {{ some_variable }} Eum quia nihil nulla esse. Dolorem asperiores
+  vero est error {{ preserve invalid interpolation }} reprehenderit voluptates
+  minus {{console.log( short_interpolation )}} nemo.
+</div>
+
+`;
diff --git a/tests/html_interpolation/example.html b/tests/html_interpolation/example.html
new file mode 100644
index 000000000000..a32c4712e35f
--- /dev/null
+++ b/tests/html_interpolation/example.html
@@ -0,0 +1,26 @@
+<div>Fuga magnam facilis. Voluptatem quaerat porro.{{
+
+
+x => {
+    const hello = 'world'
+    return hello;
+}
+
+
+
+}} Magni consectetur in et molestias neque esse voluptatibus voluptas. {{  
+    
+    
+    some_variable 
+
+
+
+}} Eum quia nihil nulla esse. Dolorem asperiores vero est error {{
+
+                    preserve
+
+                    invalid
+                    
+                    interpolation
+
+}} reprehenderit voluptates minus {{console.log(  short_interpolation )}} nemo.</div>
diff --git a/tests/html_interpolation/jsfmt.spec.js b/tests/html_interpolation/jsfmt.spec.js
new file mode 100644
index 000000000000..53763df9b20b
--- /dev/null
+++ b/tests/html_interpolation/jsfmt.spec.js
@@ -0,0 +1 @@
+run_spec(__dirname, ["html"]);

From a158d67c37eae0c6eb34cd6c74d534d7e3d4f8d6 Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Fri, 12 Oct 2018 15:01:05 +0800
Subject: [PATCH 013/177] feat: support interpolation

---
 src/language-html/printer-htmlparser2.js      | 126 ++++++++++++++++--
 .../__snapshots__/jsfmt.spec.js.snap          |  21 ++-
 2 files changed, 131 insertions(+), 16 deletions(-)

diff --git a/src/language-html/printer-htmlparser2.js b/src/language-html/printer-htmlparser2.js
index e8ce7f9edae1..618b9cd384ff 100644
--- a/src/language-html/printer-htmlparser2.js
+++ b/src/language-html/printer-htmlparser2.js
@@ -90,6 +90,20 @@ function embed(path, print, textToDoc /*, options */) {
             ])
           ]);
         }
+      } else {
+        const interpolationTextParts = getInterpolationTextDataParts(
+          node,
+          textToDoc
+        );
+        if (interpolationTextParts) {
+          return fill(
+            [].concat(
+              printOpeningTagPrefix(node),
+              interpolationTextParts,
+              printClosingTagSuffix(node)
+            )
+          );
+        }
       }
       break;
     }
@@ -185,17 +199,7 @@ function genericPrint(path, options, print) {
       return fill(
         [].concat(
           printOpeningTagPrefix(node),
-          node.isWhiteSpaceSensitive
-            ? node.isIndentationSensitive
-              ? replaceNewlines(
-                  node.data.replace(/^\s*?\n|\n\s*?$/g, ""),
-                  literalline
-                )
-              : replaceNewlines(
-                  dedentString(node.data.replace(/^\s*?\n|\n\s*?$/g, "")),
-                  hardline
-                )
-            : join(line, node.data.split(/\s+/)).parts,
+          getTextDataParts(node),
           printClosingTagSuffix(node)
         )
       );
@@ -593,6 +597,106 @@ function printClosingTagEndMarker(node) {
   }
 }
 
+function getTextDataParts(node, data = node.data) {
+  return node.isWhiteSpaceSensitive
+    ? node.isIndentationSensitive
+      ? replaceNewlines(data.replace(/^\s*?\n|\n\s*?$/g, ""), literalline)
+      : replaceNewlines(
+          dedentString(data.replace(/^\s*?\n|\n\s*?$/g, "")),
+          hardline
+        )
+    : join(line, data.split(/\s+/)).parts;
+}
+
+function getInterpolationTextDataParts(node, textToDoc) {
+  const interpolationRegex = /\{\{([\s\S]+?)\}\}/g;
+  if (!interpolationRegex.test(node.data)) {
+    return null;
+  }
+
+  const componentParts = [];
+  const TYPE_INTERPOLATION_FAILED = "interpolationFailed";
+  const TYPE_INTERPOLATION_IDENTIFIER = "interpolationIdentifier";
+
+  const identifierRegex = /^\w+$/;
+
+  const components = node.data.split(interpolationRegex);
+  for (let i = 0; i < components.length; i++) {
+    const component = components[i];
+
+    if (i % 2 === 0) {
+      const text =
+        (i === 0 ? "" : "}}") +
+        component +
+        (i === components.length - 1 ? "" : "{{");
+
+      componentParts.push(text);
+      continue;
+    }
+
+    const interpolation = component;
+
+    const trimmedInterpolation = interpolation.trim();
+    if (identifierRegex.test(trimmedInterpolation)) {
+      componentParts.push({
+        type: TYPE_INTERPOLATION_IDENTIFIER,
+        data: trimmedInterpolation
+      });
+      continue;
+    }
+
+    try {
+      const interpolationDoc = textToDoc(interpolation, {
+        parser: "__js_expression"
+      });
+      componentParts.push(interpolationDoc);
+    } catch (e) {
+      componentParts.push({
+        type: TYPE_INTERPOLATION_FAILED,
+        data: interpolation
+      });
+    }
+  }
+
+  const parts = [];
+
+  for (let i = 0; i < componentParts.length; i++) {
+    const componentPart = componentParts[i];
+    if (i % 2 === 0) {
+      Array.prototype.push.apply(parts, getTextDataParts(node, componentPart));
+      continue;
+    }
+
+    switch (componentPart.type) {
+      case TYPE_INTERPOLATION_FAILED: {
+        const trailingNewlineRegex = /\n[^\S\n]*?$/;
+        // replace the trailing literalline with hardline for better readability
+        Array.prototype.push.apply(
+          parts,
+          [].concat(
+            replaceNewlines(
+              componentPart.data.replace(trailingNewlineRegex, ""),
+              literalline
+            ),
+            trailingNewlineRegex.test(componentPart.data) ? hardline : []
+          )
+        );
+        break;
+      }
+      case TYPE_INTERPOLATION_IDENTIFIER:
+        parts.push(componentPart.data);
+        break;
+      default:
+        parts.push(
+          group(concat([indent(concat([softline, componentPart])), softline]))
+        );
+        break;
+    }
+  }
+
+  return parts;
+}
+
 module.exports = {
   preprocess,
   print: genericPrint,
diff --git a/tests/html_interpolation/__snapshots__/jsfmt.spec.js.snap b/tests/html_interpolation/__snapshots__/jsfmt.spec.js.snap
index 258b8dc47366..a17a7f9c6a47 100644
--- a/tests/html_interpolation/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_interpolation/__snapshots__/jsfmt.spec.js.snap
@@ -29,11 +29,22 @@ x => {
 }} reprehenderit voluptates minus {{console.log(  short_interpolation )}} nemo.</div>
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 <div>
-  Fuga magnam facilis. Voluptatem quaerat porro.{{ x => { const hello = 'world'
-  return hello; } }} Magni consectetur in et molestias neque esse voluptatibus
-  voluptas. {{ some_variable }} Eum quia nihil nulla esse. Dolorem asperiores
-  vero est error {{ preserve invalid interpolation }} reprehenderit voluptates
-  minus {{console.log( short_interpolation )}} nemo.
+  Fuga magnam facilis. Voluptatem quaerat porro.{{
+    x => {
+      const hello = "world";
+      return hello;
+    }
+  }} Magni consectetur in et molestias neque esse voluptatibus voluptas.
+  {{some_variable}} Eum quia nihil nulla esse. Dolorem asperiores vero est error
+  {{
+
+                    preserve
+
+                    invalid
+                    
+                    interpolation
+
+  }} reprehenderit voluptates minus {{console.log(short_interpolation)}} nemo.
 </div>
 
 `;

From 806863e9b12da5a623a745fd51ffe9c1592f8546 Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Fri, 12 Oct 2018 15:28:17 +0800
Subject: [PATCH 014/177] test: add tests

---
 .../__snapshots__/jsfmt.spec.js.snap            | 17 +++++++++++++++++
 tests/html_attributes/angular.html              |  6 ++++++
 2 files changed, 23 insertions(+)
 create mode 100644 tests/html_attributes/angular.html

diff --git a/tests/html_attributes/__snapshots__/jsfmt.spec.js.snap b/tests/html_attributes/__snapshots__/jsfmt.spec.js.snap
index dbdf774ea5ae..a8c0ac669b9e 100644
--- a/tests/html_attributes/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_attributes/__snapshots__/jsfmt.spec.js.snap
@@ -1,5 +1,22 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`angular.html - html-verify 1`] = `
+<div
+    [target]="  'hello'.repeat(    2   )  "
+    (target)="  'hello'.repeat(    2   )  "
+    [(target)]="  'hello'.repeat(    2   )  "
+    *ngIf=" something?true:false    "
+></div>
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+<div
+  [target]="  'hello'.repeat(    2   )  "
+  (target)="  'hello'.repeat(    2   )  "
+  [(target)]="  'hello'.repeat(    2   )  "
+  *ngIf=" something?true:false    "
+></div>
+
+`;
+
 exports[`attributes.html - html-verify 1`] = `
 <input name=address maxlength=200>
 <input name='address' maxlength='200'>
diff --git a/tests/html_attributes/angular.html b/tests/html_attributes/angular.html
new file mode 100644
index 000000000000..c68c384a6a8c
--- /dev/null
+++ b/tests/html_attributes/angular.html
@@ -0,0 +1,6 @@
+<div
+    [target]="  'hello'.repeat(    2   )  "
+    (target)="  'hello'.repeat(    2   )  "
+    [(target)]="  'hello'.repeat(    2   )  "
+    *ngIf=" something?true:false    "
+></div>

From f9401c4533e98255866857ae87e4cb78abca9436 Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Fri, 12 Oct 2018 15:28:43 +0800
Subject: [PATCH 015/177] feat: support angular binding syntax

---
 src/language-html/printer-htmlparser2.js      | 23 ++++++++++++++-----
 .../__snapshots__/jsfmt.spec.js.snap          |  8 +++----
 2 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/src/language-html/printer-htmlparser2.js b/src/language-html/printer-htmlparser2.js
index 618b9cd384ff..17d1127f8def 100644
--- a/src/language-html/printer-htmlparser2.js
+++ b/src/language-html/printer-htmlparser2.js
@@ -108,14 +108,25 @@ function embed(path, print, textToDoc /*, options */) {
       break;
     }
     case "attribute": {
-      /*
+      /**
        * Vue binding syntax: JS expressions
-       * :class="{ 'some-key': value }"
-       * v-bind:id="'list-' + id"
-       * v-if="foo && !bar"
-       * @click="someFunction()"
+       *
+       *   :class="jsExpression"
+       *   v-bind:id="jsExpression"
+       *   v-if="jsExpression"
+       *   @click="jsExpression"
+       *
+       * Angular binding syntax: JS expressions
+       *
+       *   *ngIf="jsExpression"
+       *   [target]="jsExpression"
+       *   (target]="jsExpression"
+       *   [(target)]="jsExpression"
        */
-      if (/(^@)|(^v-)|:/.test(node.key) && !/^\w+$/.test(node.value)) {
+      if (
+        /^:|^v-|^@|^\*ng|^\[.+\]$|^\(.+\)$/.test(node.key) &&
+        !/^\w+$/.test(node.value)
+      ) {
         return concat([
           node.key,
           '="',
diff --git a/tests/html_attributes/__snapshots__/jsfmt.spec.js.snap b/tests/html_attributes/__snapshots__/jsfmt.spec.js.snap
index a8c0ac669b9e..441be84db234 100644
--- a/tests/html_attributes/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_attributes/__snapshots__/jsfmt.spec.js.snap
@@ -9,10 +9,10 @@ exports[`angular.html - html-verify 1`] = `
 ></div>
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 <div
-  [target]="  'hello'.repeat(    2   )  "
-  (target)="  'hello'.repeat(    2   )  "
-  [(target)]="  'hello'.repeat(    2   )  "
-  *ngIf=" something?true:false    "
+  [target]="'hello'.repeat(2)"
+  (target)="'hello'.repeat(2)"
+  [(target)]="'hello'.repeat(2)"
+  *ngIf="something ? true : false"
 ></div>
 
 `;

From a8b5177f056d858ac8107faabddd45c2df059985 Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Fri, 12 Oct 2018 19:43:48 +0800
Subject: [PATCH 016/177] refactor: better path matching

---
 src/language-js/embed.js | 71 +++++++++++++++++++++++++---------------
 1 file changed, 44 insertions(+), 27 deletions(-)

diff --git a/src/language-js/embed.js b/src/language-js/embed.js
index f182ad27ccaf..9634270b404f 100644
--- a/src/language-js/embed.js
+++ b/src/language-js/embed.js
@@ -179,18 +179,6 @@ function embed(path, print, textToDoc /*, options */) {
   }
 }
 
-function isPropertyWithinAngularComponentDecorator(path, parentIndexToCheck) {
-  const parent = path.getParentNode(parentIndexToCheck);
-  return !!(
-    parent &&
-    parent.type === "Decorator" &&
-    parent.expression &&
-    parent.expression.type === "CallExpression" &&
-    parent.expression.callee &&
-    parent.expression.callee.name === "Component"
-  );
-}
-
 function getIndentation(str) {
   const firstMatchedIndent = str.match(/^([^\S\n]*)\S/m);
   return firstMatchedIndent === null ? "" : firstMatchedIndent[1];
@@ -371,21 +359,22 @@ function isStyledJsx(path) {
  * })
  */
 function isAngularComponentStyles(path) {
-  const parent = path.getParentNode();
-  const parentParent = path.getParentNode(1);
-  const isWithinArrayValueFromProperty = !!(
-    parent &&
-    (parent.type === "ArrayExpression" && parentParent.type === "Property")
-  );
-  if (
-    isWithinArrayValueFromProperty &&
-    isPropertyWithinAngularComponentDecorator(path, 4)
-  ) {
-    if (parentParent.key && parentParent.key.name === "styles") {
-      return true;
-    }
-  }
-  return false;
+  return isPathMatch(path, [
+    node => node.type === "TemplateLiteral",
+    (node, name) => node.type === "ArrayExpression" && name === "elements",
+    (node, name) =>
+      node.type === "Property" &&
+      node.key.type === "Identifier" &&
+      node.key.name === "styles" &&
+      name === "value",
+    (node, name) => node.type === "ObjectExpression" && name === "properties",
+    (node, name) =>
+      node.type === "CallExpression" &&
+      node.callee.type === "Identifier" &&
+      node.callee.name === "Component" &&
+      name === "arguments",
+    (node, name) => node.type === "Decorator" && name === "expression"
+  ]);
 }
 
 /**
@@ -497,4 +486,32 @@ function isGraphQL(path) {
   );
 }
 
+function isPathMatch(path, predicateStack) {
+  const stack = path.stack.slice();
+
+  let name = null;
+  let node = stack.pop();
+
+  for (const predicate of predicateStack) {
+    if (node === undefined) {
+      return false;
+    }
+
+    // skip index/array
+    if (typeof name === "number") {
+      name = stack.pop();
+      node = stack.pop();
+    }
+
+    if (!predicate(node, name)) {
+      return false;
+    }
+
+    name = stack.pop();
+    node = stack.pop();
+  }
+
+  return true;
+}
+
 module.exports = embed;

From b13f505b5cb9a49385ee3836535798d81d33b50f Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Fri, 12 Oct 2018 21:13:47 +0800
Subject: [PATCH 017/177] test: add tests

---
 .../__snapshots__/jsfmt.spec.js.snap          | 85 +++++++++++++++++++
 tests/multiparser_js_html/jsfmt.spec.js       |  1 +
 tests/multiparser_js_html/lit-html.js         | 41 +++++++++
 3 files changed, 127 insertions(+)
 create mode 100644 tests/multiparser_js_html/__snapshots__/jsfmt.spec.js.snap
 create mode 100644 tests/multiparser_js_html/jsfmt.spec.js
 create mode 100644 tests/multiparser_js_html/lit-html.js

diff --git a/tests/multiparser_js_html/__snapshots__/jsfmt.spec.js.snap b/tests/multiparser_js_html/__snapshots__/jsfmt.spec.js.snap
new file mode 100644
index 000000000000..4aff53aaac81
--- /dev/null
+++ b/tests/multiparser_js_html/__snapshots__/jsfmt.spec.js.snap
@@ -0,0 +1,85 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`lit-html.js - babylon-verify 1`] = `
+import { LitElement, html } from '@polymer/lit-element';
+
+class MyElement extends LitElement {
+  static get properties() {
+    return {
+      mood: { type: String }
+    };
+  }
+
+  constructor() {
+    super();
+    this.mood = 'happy';
+  }
+
+  render() {
+    return html\`
+      <style
+      
+      
+      >
+                  .mood { color: green; }
+      </style
+      
+      
+      
+      >
+
+         Web            Components         are     <span 
+      
+      
+      class="mood"      >\${
+        this.mood
+      
+      }</span
+      
+           >!
+    \`;
+  }
+}
+
+customElements.define('my-element', MyElement);
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+import { LitElement, html } from "@polymer/lit-element";
+
+class MyElement extends LitElement {
+  static get properties() {
+    return {
+      mood: { type: String }
+    };
+  }
+
+  constructor() {
+    super();
+    this.mood = "happy";
+  }
+
+  render() {
+    return html\`
+      <style
+      
+      
+      >
+                  .mood { color: green; }
+      </style
+      
+      
+      
+      >
+
+         Web            Components         are     <span 
+      
+      
+      class="mood"      >\${this.mood}</span
+      
+           >!
+    \`;
+  }
+}
+
+customElements.define("my-element", MyElement);
+
+`;
diff --git a/tests/multiparser_js_html/jsfmt.spec.js b/tests/multiparser_js_html/jsfmt.spec.js
new file mode 100644
index 000000000000..968651cdbc2c
--- /dev/null
+++ b/tests/multiparser_js_html/jsfmt.spec.js
@@ -0,0 +1 @@
+run_spec(__dirname, ["babylon"]);
diff --git a/tests/multiparser_js_html/lit-html.js b/tests/multiparser_js_html/lit-html.js
new file mode 100644
index 000000000000..af4db44717fe
--- /dev/null
+++ b/tests/multiparser_js_html/lit-html.js
@@ -0,0 +1,41 @@
+import { LitElement, html } from '@polymer/lit-element';
+
+class MyElement extends LitElement {
+  static get properties() {
+    return {
+      mood: { type: String }
+    };
+  }
+
+  constructor() {
+    super();
+    this.mood = 'happy';
+  }
+
+  render() {
+    return html`
+      <style
+      
+      
+      >
+                  .mood { color: green; }
+      </style
+      
+      
+      
+      >
+
+         Web            Components         are     <span 
+      
+      
+      class="mood"      >${
+        this.mood
+      
+      }</span
+      
+           >!
+    `;
+  }
+}
+
+customElements.define('my-element', MyElement);

From 330cb2ec4668557b0bab27332d8bfd2fa017ab7b Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Fri, 12 Oct 2018 21:17:53 +0800
Subject: [PATCH 018/177] feat: support lit-html

---
 src/language-js/clean.js                      |  3 +-
 src/language-js/embed.js                      | 86 +++++++++++++++++++
 .../__snapshots__/jsfmt.spec.js.snap          | 23 ++---
 3 files changed, 94 insertions(+), 18 deletions(-)

diff --git a/src/language-js/clean.js b/src/language-js/clean.js
index 9c7bf0fb3259..746f932ef56d 100644
--- a/src/language-js/clean.js
+++ b/src/language-js/clean.js
@@ -159,7 +159,8 @@ function clean(ast, newObj, parent) {
           ast.tag.name === "graphql" ||
           ast.tag.name === "css" ||
           ast.tag.name === "md" ||
-          ast.tag.name === "markdown")) ||
+          ast.tag.name === "markdown" ||
+          ast.tag.name === "html")) ||
       ast.tag.type === "CallExpression")
   ) {
     newObj.quasi.quasis.forEach(quasi => delete quasi.value);
diff --git a/src/language-js/embed.js b/src/language-js/embed.js
index 9634270b404f..36fb30256c20 100644
--- a/src/language-js/embed.js
+++ b/src/language-js/embed.js
@@ -8,6 +8,7 @@ const {
     softline,
     literalline,
     concat,
+    group,
     dedentToRoot
   },
   utils: { mapDoc, stripTrailingHardline }
@@ -132,6 +133,10 @@ function embed(path, print, textToDoc /*, options */) {
         ]);
       }
 
+      if (isHtml(path)) {
+        return printHtmlTemplateLiteral(path, print, textToDoc);
+      }
+
       break;
     }
 
@@ -514,4 +519,85 @@ function isPathMatch(path, predicateStack) {
   return true;
 }
 
+/**
+ * lit-html
+ *
+ * html`...`
+ */
+function isHtml(path) {
+  return isPathMatch(path, [
+    node => node.type === "TemplateLiteral",
+    (node, name) =>
+      node.type === "TaggedTemplateExpression" &&
+      node.tag.type === "Identifier" &&
+      node.tag.name === "html" &&
+      name === "quasi"
+  ]);
+}
+
+function printHtmlTemplateLiteral(path, print, textToDoc) {
+  const node = path.getValue();
+
+  const placeholderRegex = /prettierhtmlplaceholder(\d+)redlohecalplmthreitterp/g;
+  const placeholders = node.expressions.map(
+    (_, i) => `prettierhtmlplaceholder${i}redlohecalplmthreitterp`
+  );
+
+  const text = node.quasis
+    .map(
+      (quasi, index, quasis) =>
+        index === quasis.length - 1
+          ? quasi.value.raw
+          : quasi.value.raw + placeholders[index]
+    )
+    .join("");
+
+  const expressionDocs = path.map(print, "expressions");
+
+  const contentDoc = mapDoc(
+    stripTrailingHardline(textToDoc(text, { parser: "html" })),
+    doc => {
+      const hasPlaceholder =
+        typeof doc === "string" && placeholderRegex.test(doc);
+
+      if (!hasPlaceholder) {
+        return doc;
+      }
+
+      const parts = [];
+
+      const components = doc.split(placeholderRegex);
+      for (let i = 0; i < components.length; i++) {
+        const component = components[i];
+
+        if (i % 2 === 0) {
+          if (component) {
+            parts.push(component);
+          }
+          continue;
+        }
+
+        const placeholderIndex = +component;
+
+        parts.push(
+          concat([
+            "${",
+            group(
+              concat([
+                indent(concat([softline, expressionDocs[placeholderIndex]])),
+                softline
+              ])
+            ),
+            "}"
+          ])
+        );
+      }
+
+      return concat(parts);
+    }
+  );
+
+  return concat(["`", indent(concat([hardline, contentDoc])), softline, "`"]);
+}
+
 module.exports = embed;
diff --git a/tests/multiparser_js_html/__snapshots__/jsfmt.spec.js.snap b/tests/multiparser_js_html/__snapshots__/jsfmt.spec.js.snap
index 4aff53aaac81..e834d23fe494 100644
--- a/tests/multiparser_js_html/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/multiparser_js_html/__snapshots__/jsfmt.spec.js.snap
@@ -59,23 +59,12 @@ class MyElement extends LitElement {
 
   render() {
     return html\`
-      <style
-      
-      
-      >
-                  .mood { color: green; }
-      </style
-      
-      
-      
-      >
-
-         Web            Components         are     <span 
-      
-      
-      class="mood"      >\${this.mood}</span
-      
-           >!
+      <style>
+        .mood {
+          color: green;
+        }
+      </style>
+      Web Components are <span class="mood">\${this.mood}</span>!
     \`;
   }
 }

From af7b7b2491e50d628b5b7b5fd44d164e978ecb3f Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Fri, 12 Oct 2018 21:41:03 +0800
Subject: [PATCH 019/177] feat: support angular component template

---
 src/language-js/clean.js                      | 30 +++++++++----
 src/language-js/embed.js                      | 43 +++++++++++++------
 .../__snapshots__/jsfmt.spec.js.snap          | 12 ++++--
 3 files changed, 59 insertions(+), 26 deletions(-)

diff --git a/src/language-js/clean.js b/src/language-js/clean.js
index 746f932ef56d..b72d2895522c 100644
--- a/src/language-js/clean.js
+++ b/src/language-js/clean.js
@@ -131,21 +131,33 @@ function clean(ast, newObj, parent) {
     newObj.value.expression.quasis.forEach(q => delete q.value);
   }
 
-  // CSS template literals in Angular Component decorator
+  // Angular Components: Inline HTML template and Inline CSS styles
   const expression = ast.expression || ast.callee;
   if (
     ast.type === "Decorator" &&
     expression.type === "CallExpression" &&
     expression.callee.name === "Component" &&
-    expression.arguments.length === 1 &&
-    expression.arguments[0].properties.some(
-      prop =>
-        prop.key.name === "styles" && prop.value.type === "ArrayExpression"
-    )
+    expression.arguments.length === 1
   ) {
-    newObj.expression.arguments[0].properties.forEach(prop => {
-      if (prop.value.type === "ArrayExpression") {
-        prop.value.elements[0].quasis.forEach(q => delete q.value);
+    const astProps = ast.expression.arguments[0].properties;
+    newObj.expression.arguments[0].properties.forEach((prop, index) => {
+      let templateLiteral = null;
+
+      switch (astProps[index].key.name) {
+        case "styles":
+          if (prop.value.type === "ArrayExpression") {
+            templateLiteral = prop.value.elements[0];
+          }
+          break;
+        case "template":
+          if (prop.value.type === "TemplateLiteral") {
+            templateLiteral = prop.value;
+          }
+          break;
+      }
+
+      if (templateLiteral) {
+        templateLiteral.quasis.forEach(q => delete q.value);
       }
     });
   }
diff --git a/src/language-js/embed.js b/src/language-js/embed.js
index 36fb30256c20..884c2712b013 100644
--- a/src/language-js/embed.js
+++ b/src/language-js/embed.js
@@ -133,7 +133,7 @@ function embed(path, print, textToDoc /*, options */) {
         ]);
       }
 
-      if (isHtml(path)) {
+      if (isHtml(path) || isAngularComponentTemplate(path)) {
         return printHtmlTemplateLiteral(path, print, textToDoc);
       }
 
@@ -354,9 +354,6 @@ function isStyledJsx(path) {
  * ...which are both within template literals somewhere
  * inside of the Component decorator factory.
  *
- * TODO: Format HTML template once prettier's HTML
- * formatting is "ready"
- *
  * E.g.
  * @Component({
  *  template: `<div>...</div>`,
@@ -364,14 +361,34 @@ function isStyledJsx(path) {
  * })
  */
 function isAngularComponentStyles(path) {
-  return isPathMatch(path, [
-    node => node.type === "TemplateLiteral",
-    (node, name) => node.type === "ArrayExpression" && name === "elements",
-    (node, name) =>
-      node.type === "Property" &&
-      node.key.type === "Identifier" &&
-      node.key.name === "styles" &&
-      name === "value",
+  return isPathMatch(
+    path,
+    [
+      node => node.type === "TemplateLiteral",
+      (node, name) => node.type === "ArrayExpression" && name === "elements",
+      (node, name) =>
+        node.type === "Property" &&
+        node.key.type === "Identifier" &&
+        node.key.name === "styles" &&
+        name === "value"
+    ].concat(getAngularComponentObjectExpressionPredicates())
+  );
+}
+function isAngularComponentTemplate(path) {
+  return isPathMatch(
+    path,
+    [
+      node => node.type === "TemplateLiteral",
+      (node, name) =>
+        node.type === "Property" &&
+        node.key.type === "Identifier" &&
+        node.key.name === "template" &&
+        name === "value"
+    ].concat(getAngularComponentObjectExpressionPredicates())
+  );
+}
+function getAngularComponentObjectExpressionPredicates() {
+  return [
     (node, name) => node.type === "ObjectExpression" && name === "properties",
     (node, name) =>
       node.type === "CallExpression" &&
@@ -379,7 +396,7 @@ function isAngularComponentStyles(path) {
       node.callee.name === "Component" &&
       name === "arguments",
     (node, name) => node.type === "Decorator" && name === "expression"
-  ]);
+  ];
 }
 
 /**
diff --git a/tests/angular_component_examples/__snapshots__/jsfmt.spec.js.snap b/tests/angular_component_examples/__snapshots__/jsfmt.spec.js.snap
index 267a4eb94205..4b5abc04c360 100644
--- a/tests/angular_component_examples/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/angular_component_examples/__snapshots__/jsfmt.spec.js.snap
@@ -21,8 +21,10 @@ class     TestComponent {}
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 @Component({
   selector: "app-test",
-  template: \`<ul>   <li>test</li>
-  </ul>
+  template: \`
+    <ul>
+      <li>test</li>
+    </ul>
   \`,
   styles: [
     \`
@@ -60,8 +62,10 @@ class     TestComponent {}
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 @Component({
   selector: "app-test",
-  template: \`<ul>   <li>test</li>
-  </ul>
+  template: \`
+    <ul>
+      <li>test</li>
+    </ul>
   \`,
   styles: [
     \`

From 719ecb3a6ecb00dc70c710e6d48d9b0fc56fef45 Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Sat, 13 Oct 2018 15:20:16 +0800
Subject: [PATCH 020/177] test: update snapshots

---
 .../__snapshots__/jsfmt.spec.js.snap          |  4 +-
 tests/mdx/__snapshots__/jsfmt.spec.js.snap    | 40 +++++++++++--------
 2 files changed, 27 insertions(+), 17 deletions(-)

diff --git a/tests/decorators-ts/__snapshots__/jsfmt.spec.js.snap b/tests/decorators-ts/__snapshots__/jsfmt.spec.js.snap
index 9eb75a0c3835..8660f81b26da 100644
--- a/tests/decorators-ts/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/decorators-ts/__snapshots__/jsfmt.spec.js.snap
@@ -53,7 +53,9 @@ export class HeroButtonComponent {
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 @Component({
   selector: "toh-hero-button",
-  template: \`<button>{{label}}</button>\`
+  template: \`
+    <button>{{label}}</button>
+  \`
 })
 export class HeroButtonComponent {
   @Output() change = new EventEmitter<any>();
diff --git a/tests/mdx/__snapshots__/jsfmt.spec.js.snap b/tests/mdx/__snapshots__/jsfmt.spec.js.snap
index 8aa75609223e..20bce5ed5cfc 100644
--- a/tests/mdx/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/mdx/__snapshots__/jsfmt.spec.js.snap
@@ -172,9 +172,11 @@ exports[`jsx.mdx - mdx-verify 1`] = `
 
 ---
 
-<Hello>
-  test <World /> test
-</Hello>
+(
+  <Hello>
+    test <World /> test
+  </Hello>
+)
 
 `;
 
@@ -192,9 +194,11 @@ exports[`jsx.mdx - mdx-verify 2`] = `
 
 ---
 
-<Hello>
-  test <World /> test
-</Hello>
+(
+  <Hello>
+    test <World /> test
+  </Hello>
+)
 
 `;
 
@@ -255,11 +259,13 @@ I'm an awesome paragraph.
 
 <!-- I'm a comment -->
 
-<Foo bg="red">
-  <Bar>hi </Bar>
-  {hello}
-  {/* another commment */}
-</Foo>
+(
+  <Foo bg="red">
+    <Bar>hi </Bar>
+    {hello}
+    {/* another commment */}
+  </Foo>
+)
 
 \`\`\`
 test codeblock
@@ -338,11 +344,13 @@ I'm an awesome paragraph.
 
 <!-- I'm a comment -->
 
-<Foo bg="red">
-  <Bar>hi </Bar>
-  {hello}
-  {/* another commment */}
-</Foo>
+(
+  <Foo bg="red">
+    <Bar>hi </Bar>
+    {hello}
+    {/* another commment */}
+  </Foo>
+)
 
 \`\`\`
 test codeblock

From 56d3e596b46aa070e4ba2fa6b3fcea88cf738fb4 Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Sat, 13 Oct 2018 15:21:12 +0800
Subject: [PATCH 021/177] fix: no unnecessary parens for mdx

---
 src/common/internal-plugins.js             |  4 +++
 src/language-js/parser-babylon.js          |  6 ++--
 src/language-js/preprocess.js              |  2 ++
 src/language-markdown/embed.js             |  2 +-
 tests/mdx/__snapshots__/jsfmt.spec.js.snap | 40 +++++++++-------------
 5 files changed, 27 insertions(+), 27 deletions(-)

diff --git a/src/common/internal-plugins.js b/src/common/internal-plugins.js
index 009735124037..624acc4ee97c 100644
--- a/src/common/internal-plugins.js
+++ b/src/common/internal-plugins.js
@@ -29,6 +29,10 @@ module.exports = [
         return eval("require")("../language-js/parser-babylon").parsers
           .__js_expression;
       },
+      get __jsx_expression() {
+        return eval("require")("../language-js/parser-babylon").parsers
+          .__jsx_expression;
+      },
       // JS - Flow
       get flow() {
         return eval("require")("../language-js/parser-flow").parsers.flow;
diff --git a/src/language-js/parser-babylon.js b/src/language-js/parser-babylon.js
index 7de9339162e8..cfe100c9e7e9 100644
--- a/src/language-js/parser-babylon.js
+++ b/src/language-js/parser-babylon.js
@@ -158,7 +158,9 @@ module.exports = {
       },
       locFns
     ),
-    /** @internal for mdx to print jsx without semicolon */
-    __js_expression: babylon
+    /** @internal for html to print js without semicolon and trailing newline */
+    __js_expression: babylon,
+    /** @internal for mdx to print jsx without semicolon and outer parens */
+    __jsx_expression: babylon
   }
 };
diff --git a/src/language-js/preprocess.js b/src/language-js/preprocess.js
index 4d632979d9c1..712ed69b1398 100644
--- a/src/language-js/preprocess.js
+++ b/src/language-js/preprocess.js
@@ -13,6 +13,8 @@ function preprocess(ast, options) {
             : "JsonRoot",
         node: Object.assign({}, ast, { comments: [] })
       });
+    // do not process jsx expression to avoid unnecessary parens
+    case "__jsx_expression":
     default:
       return ast;
   }
diff --git a/src/language-markdown/embed.js b/src/language-markdown/embed.js
index 9161761609f1..3f943c9fc149 100644
--- a/src/language-markdown/embed.js
+++ b/src/language-markdown/embed.js
@@ -57,7 +57,7 @@ function embed(path, print, textToDoc, options) {
     case "importExport":
       return textToDoc(node.value, { parser: "babylon" });
     case "jsx":
-      return textToDoc(node.value, { parser: "__js_expression" });
+      return textToDoc(node.value, { parser: "__jsx_expression" });
   }
 
   return null;
diff --git a/tests/mdx/__snapshots__/jsfmt.spec.js.snap b/tests/mdx/__snapshots__/jsfmt.spec.js.snap
index 20bce5ed5cfc..8aa75609223e 100644
--- a/tests/mdx/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/mdx/__snapshots__/jsfmt.spec.js.snap
@@ -172,11 +172,9 @@ exports[`jsx.mdx - mdx-verify 1`] = `
 
 ---
 
-(
-  <Hello>
-    test <World /> test
-  </Hello>
-)
+<Hello>
+  test <World /> test
+</Hello>
 
 `;
 
@@ -194,11 +192,9 @@ exports[`jsx.mdx - mdx-verify 2`] = `
 
 ---
 
-(
-  <Hello>
-    test <World /> test
-  </Hello>
-)
+<Hello>
+  test <World /> test
+</Hello>
 
 `;
 
@@ -259,13 +255,11 @@ I'm an awesome paragraph.
 
 <!-- I'm a comment -->
 
-(
-  <Foo bg="red">
-    <Bar>hi </Bar>
-    {hello}
-    {/* another commment */}
-  </Foo>
-)
+<Foo bg="red">
+  <Bar>hi </Bar>
+  {hello}
+  {/* another commment */}
+</Foo>
 
 \`\`\`
 test codeblock
@@ -344,13 +338,11 @@ I'm an awesome paragraph.
 
 <!-- I'm a comment -->
 
-(
-  <Foo bg="red">
-    <Bar>hi </Bar>
-    {hello}
-    {/* another commment */}
-  </Foo>
-)
+<Foo bg="red">
+  <Bar>hi </Bar>
+  {hello}
+  {/* another commment */}
+</Foo>
 
 \`\`\`
 test codeblock

From 6b968c550106e27ab60cc9ca65c2e2f4ae5d7283 Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Sat, 13 Oct 2018 15:51:27 +0800
Subject: [PATCH 022/177] test: add tests

---
 tests/html_js/__snapshots__/jsfmt.spec.js.snap | 10 ++++++++++
 tests/html_js/js.html                          |  5 +++++
 2 files changed, 15 insertions(+)

diff --git a/tests/html_js/__snapshots__/jsfmt.spec.js.snap b/tests/html_js/__snapshots__/jsfmt.spec.js.snap
index f45f86f89f6a..8a198a14ebaa 100644
--- a/tests/html_js/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_js/__snapshots__/jsfmt.spec.js.snap
@@ -26,6 +26,11 @@ exports[`js.html - html-verify 1`] = `
 <script type="text/babel">
             const    someJS    =   'this should be formatted'
 </script>
+<script type="module">
+      import lib from './lib.js';
+  
+        function myFunction() { return 'foo'; }
+  </script>
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 <script type="text/javascript">
   var message = "Alert!";
@@ -45,6 +50,11 @@ exports[`js.html - html-verify 1`] = `
 <script type="text/babel">
   const someJS = "this should be formatted";
 </script>
+<script type="module">
+  import lib from './lib.js';
+
+    function myFunction() { return 'foo'; }
+</script>
 
 `;
 
diff --git a/tests/html_js/js.html b/tests/html_js/js.html
index 6725a95c17e8..abbeb6b1010d 100644
--- a/tests/html_js/js.html
+++ b/tests/html_js/js.html
@@ -16,3 +16,8 @@
 <script type="text/babel">
             const    someJS    =   'this should be formatted'
 </script>
+<script type="module">
+      import lib from './lib.js';
+  
+        function myFunction() { return 'foo'; }
+  </script>

From 1a8264a48b37d93dd23d46d73f3a3aa56b015a92 Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Sat, 13 Oct 2018 15:52:16 +0800
Subject: [PATCH 023/177] feat: format <script type=module>

---
 src/language-html/utils.js                     | 1 +
 tests/html_js/__snapshots__/jsfmt.spec.js.snap | 6 ++++--
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/language-html/utils.js b/src/language-html/utils.js
index 94cf296db643..02f6a9dbfc11 100644
--- a/src/language-html/utils.js
+++ b/src/language-html/utils.js
@@ -264,6 +264,7 @@ function inferScriptParser(node) {
   if (node.name === "script" && !node.attribs.src) {
     if (
       (!node.attribs.lang && !node.attribs.type) ||
+      node.attribs.type === "module" ||
       node.attribs.type === "text/javascript" ||
       node.attribs.type === "text/babel" ||
       node.attribs.type === "application/javascript"
diff --git a/tests/html_js/__snapshots__/jsfmt.spec.js.snap b/tests/html_js/__snapshots__/jsfmt.spec.js.snap
index 8a198a14ebaa..d89433665ced 100644
--- a/tests/html_js/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_js/__snapshots__/jsfmt.spec.js.snap
@@ -51,9 +51,11 @@ exports[`js.html - html-verify 1`] = `
   const someJS = "this should be formatted";
 </script>
 <script type="module">
-  import lib from './lib.js';
+  import lib from "./lib.js";
 
-    function myFunction() { return 'foo'; }
+  function myFunction() {
+    return "foo";
+  }
 </script>
 
 `;

From e0369c2f8a6bb1daa274a5cd263e8cf7ff16295e Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Sat, 13 Oct 2018 16:10:57 +0800
Subject: [PATCH 024/177] test: add tests

---
 .../__snapshots__/jsfmt.spec.js.snap          | 29 +++++++++++++++++++
 .../html-with-markdown-script.html            | 12 ++++++++
 tests/multiparser_html_markdown/jsfmt.spec.js |  1 +
 3 files changed, 42 insertions(+)
 create mode 100644 tests/multiparser_html_markdown/__snapshots__/jsfmt.spec.js.snap
 create mode 100644 tests/multiparser_html_markdown/html-with-markdown-script.html
 create mode 100644 tests/multiparser_html_markdown/jsfmt.spec.js

diff --git a/tests/multiparser_html_markdown/__snapshots__/jsfmt.spec.js.snap b/tests/multiparser_html_markdown/__snapshots__/jsfmt.spec.js.snap
new file mode 100644
index 000000000000..ca5a17008f52
--- /dev/null
+++ b/tests/multiparser_html_markdown/__snapshots__/jsfmt.spec.js.snap
@@ -0,0 +1,29 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`html-with-markdown-script.html - html-verify 1`] = `
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <script type="text/markdown">
+        # hello
+        + **foo**
+        + __bar__
+    </script>
+</head>
+<body></body>
+</html>
+
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <script type="text/markdown">
+      # hello
+      + **foo**
+      + __bar__
+    </script>
+  </head>
+  <body></body>
+</html>
+
+`;
diff --git a/tests/multiparser_html_markdown/html-with-markdown-script.html b/tests/multiparser_html_markdown/html-with-markdown-script.html
new file mode 100644
index 000000000000..d1305e10f6d2
--- /dev/null
+++ b/tests/multiparser_html_markdown/html-with-markdown-script.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <script type="text/markdown">
+        # hello
+        + **foo**
+        + __bar__
+    </script>
+</head>
+<body></body>
+</html>
+
diff --git a/tests/multiparser_html_markdown/jsfmt.spec.js b/tests/multiparser_html_markdown/jsfmt.spec.js
new file mode 100644
index 000000000000..53763df9b20b
--- /dev/null
+++ b/tests/multiparser_html_markdown/jsfmt.spec.js
@@ -0,0 +1 @@
+run_spec(__dirname, ["html"]);

From b782967814bdd65b170eb87a1650e920fa2a9b63 Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Sat, 13 Oct 2018 16:12:08 +0800
Subject: [PATCH 025/177] feat: format `<script type="text/markdown">`

---
 src/language-html/printer-htmlparser2.js                  | 8 +++++---
 src/language-html/utils.js                                | 4 ++++
 .../__snapshots__/jsfmt.spec.js.snap                      | 5 +++--
 3 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/language-html/printer-htmlparser2.js b/src/language-html/printer-htmlparser2.js
index 17d1127f8def..9ade26341c93 100644
--- a/src/language-html/printer-htmlparser2.js
+++ b/src/language-html/printer-htmlparser2.js
@@ -79,13 +79,15 @@ function embed(path, print, textToDoc /*, options */) {
       if (isScriptLikeTag(node.parent)) {
         const parser = inferScriptParser(node.parent);
         if (parser) {
+          const data =
+            parser === "markdown"
+              ? dedentString(node.data.replace(/^[^\S\n]*?\n/, ""))
+              : node.data;
           return builders.concat([
             concat([
               breakParent,
               printOpeningTagPrefix(node),
-              markAsRoot(
-                stripTrailingHardline(textToDoc(node.data, { parser }))
-              ),
+              markAsRoot(stripTrailingHardline(textToDoc(data, { parser }))),
               printClosingTagSuffix(node)
             ])
           ]);
diff --git a/src/language-html/utils.js b/src/language-html/utils.js
index 02f6a9dbfc11..c7effce97b3e 100644
--- a/src/language-html/utils.js
+++ b/src/language-html/utils.js
@@ -279,6 +279,10 @@ function inferScriptParser(node) {
     ) {
       return "typescript";
     }
+
+    if (node.attribs.type === "text/markdown") {
+      return "markdown";
+    }
   }
 
   if (node.name === "style") {
diff --git a/tests/multiparser_html_markdown/__snapshots__/jsfmt.spec.js.snap b/tests/multiparser_html_markdown/__snapshots__/jsfmt.spec.js.snap
index ca5a17008f52..36384463cf45 100644
--- a/tests/multiparser_html_markdown/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/multiparser_html_markdown/__snapshots__/jsfmt.spec.js.snap
@@ -19,8 +19,9 @@ exports[`html-with-markdown-script.html - html-verify 1`] = `
   <head>
     <script type="text/markdown">
       # hello
-      + **foo**
-      + __bar__
+
+      - **foo**
+      - **bar**
     </script>
   </head>
   <body></body>

From 522eaa477990fb4b0e05a9f71a4a503bdacc0b08 Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Sat, 13 Oct 2018 21:02:30 +0800
Subject: [PATCH 026/177] test: add tests

---
 .../html_attributes/__snapshots__/jsfmt.spec.js.snap  | 11 +++++++++--
 tests/html_attributes/angular.html                    |  6 +++++-
 2 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/tests/html_attributes/__snapshots__/jsfmt.spec.js.snap b/tests/html_attributes/__snapshots__/jsfmt.spec.js.snap
index 441be84db234..9a7ff085a1f9 100644
--- a/tests/html_attributes/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_attributes/__snapshots__/jsfmt.spec.js.snap
@@ -6,13 +6,20 @@ exports[`angular.html - html-verify 1`] = `
     (target)="  'hello'.repeat(    2   )  "
     [(target)]="  'hello'.repeat(    2   )  "
     *ngIf=" something?true:false    "
-></div>
-~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+    *ngFor="  let     hero     of     heroes"
+    *ngFor="  let    hero     of [1,2,3,666666666666666666666666666666666666]; let i=index"
+    *ngFor="     let hero     of     heroes;     trackBy    :    trackByHeroes     "
+    *ngFor=" let     item   of   items   ;    index    as   i  ; trackBy  :     trackByFn"
+></div>~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 <div
   [target]="'hello'.repeat(2)"
   (target)="'hello'.repeat(2)"
   [(target)]="'hello'.repeat(2)"
   *ngIf="something ? true : false"
+  *ngFor="  let     hero     of     heroes"
+  *ngFor="  let    hero     of [1,2,3,666666666666666666666666666666666666]; let i=index"
+  *ngFor="     let hero     of     heroes;     trackBy    :    trackByHeroes     "
+  *ngFor=" let     item   of   items   ;    index    as   i  ; trackBy  :     trackByFn"
 ></div>
 
 `;
diff --git a/tests/html_attributes/angular.html b/tests/html_attributes/angular.html
index c68c384a6a8c..affe611ead2f 100644
--- a/tests/html_attributes/angular.html
+++ b/tests/html_attributes/angular.html
@@ -3,4 +3,8 @@
     (target)="  'hello'.repeat(    2   )  "
     [(target)]="  'hello'.repeat(    2   )  "
     *ngIf=" something?true:false    "
-></div>
+    *ngFor="  let     hero     of     heroes"
+    *ngFor="  let    hero     of [1,2,3,666666666666666666666666666666666666]; let i=index"
+    *ngFor="     let hero     of     heroes;     trackBy    :    trackByHeroes     "
+    *ngFor=" let     item   of   items   ;    index    as   i  ; trackBy  :     trackByFn"
+></div>
\ No newline at end of file

From 625ff416bbc1b7ec5ecf3d8852d76d7d74ed1286 Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Sat, 13 Oct 2018 21:05:30 +0800
Subject: [PATCH 027/177] feat: support `*ngFor`

---
 src/language-html/angular-microsyntax.js      | 101 ++++++++++++++++++
 src/language-html/printer-htmlparser2.js      |  16 ++-
 .../__snapshots__/jsfmt.spec.js.snap          |  11 +-
 3 files changed, 120 insertions(+), 8 deletions(-)
 create mode 100644 src/language-html/angular-microsyntax.js

diff --git a/src/language-html/angular-microsyntax.js b/src/language-html/angular-microsyntax.js
new file mode 100644
index 000000000000..42618c415088
--- /dev/null
+++ b/src/language-html/angular-microsyntax.js
@@ -0,0 +1,101 @@
+"use strict";
+
+const {
+  builders: { concat, group, line, join, softline, indent }
+} = require("../doc");
+
+const options = { parser: "__js_expression", singleQuote: true };
+
+/**
+ *     NgFor ::
+ *         '*ngFor="' NgForValue '"'
+ *
+ *     NgForValue ::
+ *         NgForLetOf ( ';' ( NgForLetEqual | NgForColon | NgForAs ) )*
+ */
+const IDENTIFIER_PATTERN = "[a-zA-Z_][a-zA-Z0-9_]*";
+/**
+ *     NgForLetOf ::
+ *         'let' Identifier 'of' Expression
+ */
+const NG_FOR_LET_OF_PATTERN = `^let\\s+(${IDENTIFIER_PATTERN})\\s+of\\s+([\\s\\S]+)$`;
+/**
+ *     NgForLetEqual ::
+ *         'let' Identifier '=' Identifier
+ */
+const NG_FOR_LET_EQUAL_PATTERN = `^let\\s+(${IDENTIFIER_PATTERN})\\s*=\\s*(${IDENTIFIER_PATTERN})$`;
+/**
+ *     NgForColon ::
+ *         Identifier ':' Expression
+ */
+const NG_FOR_COLON_PATTERN = `^(${IDENTIFIER_PATTERN})\\s*:\\s*([\\s\\S]+)$`;
+/**
+ *     NgForAs ::
+ *         Identifier 'as' Identifier
+ */
+const NG_FOR_AS_PATTERN = `^(${IDENTIFIER_PATTERN})\\s+as\\s+(${IDENTIFIER_PATTERN})$`;
+/**
+ *     *ngFor="let hero of heroes"
+ *     *ngFor="let hero of heroes; let i=index"
+ *     *ngFor="let hero of heroes; trackBy: trackByHeroes"
+ *     *ngFor="let item of items; index as i; trackBy: trackByFn"
+ */
+function printNgForValue(data, textToDoc) {
+  return group(
+    concat([
+      indent(
+        concat([
+          softline,
+          join(
+            concat([";", line]),
+            data
+              .split(";")
+              .map(subData => subData.trim())
+              .map(
+                (subData, index) =>
+                  index === 0
+                    ? printNgForLetOf(subData, textToDoc)
+                    : /^let\s/.test(subData)
+                      ? printNgForLetEqual(subData, textToDoc)
+                      : /\sas\s/.test(subData)
+                        ? printNgForAs(subData, textToDoc)
+                        : printNgForColon(subData, textToDoc)
+              )
+          )
+        ])
+      ),
+      softline
+    ])
+  );
+}
+
+function printNgForLetOf(data, textToDoc) {
+  const [, identifier, expression] = data.match(
+    new RegExp(NG_FOR_LET_OF_PATTERN)
+  );
+  return concat([
+    "let ",
+    identifier,
+    " of ",
+    group(textToDoc(expression, options))
+  ]);
+}
+
+function printNgForLetEqual(data /*, textToDoc */) {
+  const [, identifier1, identifier2] = data.match(NG_FOR_LET_EQUAL_PATTERN);
+  return concat(["let ", identifier1, " = ", identifier2]);
+}
+
+function printNgForColon(data, textToDoc) {
+  const [, identifier, expression] = data.match(NG_FOR_COLON_PATTERN);
+  return concat([identifier, ": ", group(textToDoc(expression, options))]);
+}
+
+function printNgForAs(data /*, textToDoc */) {
+  const [, identifier1, identifier2] = data.match(NG_FOR_AS_PATTERN);
+  return concat([identifier1, " as ", identifier2]);
+}
+
+module.exports = {
+  printNgForValue
+};
diff --git a/src/language-html/printer-htmlparser2.js b/src/language-html/printer-htmlparser2.js
index 9ade26341c93..89497874bbb4 100644
--- a/src/language-html/printer-htmlparser2.js
+++ b/src/language-html/printer-htmlparser2.js
@@ -35,6 +35,7 @@ const {
 const preprocess = require("./preprocess");
 const assert = require("assert");
 const { insertPragma } = require("./pragma");
+const { printNgForValue } = require("./angular-microsyntax");
 
 function concat(parts) {
   const newParts = normalizeParts(parts);
@@ -129,14 +130,21 @@ function embed(path, print, textToDoc /*, options */) {
         /^:|^v-|^@|^\*ng|^\[.+\]$|^\(.+\)$/.test(node.key) &&
         !/^\w+$/.test(node.value)
       ) {
+        const value = node.value
+          .replace(/&quot;/g, '"')
+          .replace(/&apos;/g, "'");
+        const valueDoc =
+          node.key === "*ngFor"
+            ? printNgForValue(value, textToDoc)
+            : textToDoc(value, {
+                parser: "__js_expression",
+                singleQuote: true
+              });
         return concat([
           node.key,
           '="',
           mapDoc(
-            textToDoc(
-              node.value.replace(/&quot;/g, '"').replace(/&apos;/g, "'"),
-              { parser: "__js_expression", singleQuote: true }
-            ),
+            valueDoc,
             doc => (typeof doc === "string" ? doc.replace(/"/g, "&quot;") : doc)
           ),
           '"'
diff --git a/tests/html_attributes/__snapshots__/jsfmt.spec.js.snap b/tests/html_attributes/__snapshots__/jsfmt.spec.js.snap
index 9a7ff085a1f9..9d38b811ddd6 100644
--- a/tests/html_attributes/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_attributes/__snapshots__/jsfmt.spec.js.snap
@@ -16,10 +16,13 @@ exports[`angular.html - html-verify 1`] = `
   (target)="'hello'.repeat(2)"
   [(target)]="'hello'.repeat(2)"
   *ngIf="something ? true : false"
-  *ngFor="  let     hero     of     heroes"
-  *ngFor="  let    hero     of [1,2,3,666666666666666666666666666666666666]; let i=index"
-  *ngFor="     let hero     of     heroes;     trackBy    :    trackByHeroes     "
-  *ngFor=" let     item   of   items   ;    index    as   i  ; trackBy  :     trackByFn"
+  *ngFor="let hero of heroes"
+  *ngFor="
+    let hero of [1, 2, 3, 666666666666666666666666666666666666];
+    let i = index
+  "
+  *ngFor="let hero of heroes; trackBy: trackByHeroes"
+  *ngFor="let item of items; index as i; trackBy: trackByFn"
 ></div>
 
 `;

From d461cd961a77dfd419b624e3a089a248e78df715 Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Sat, 13 Oct 2018 21:25:51 +0800
Subject: [PATCH 028/177] fix: remove space between ngForLetEqual

---
 src/language-html/angular-microsyntax.js               | 6 +++---
 tests/html_attributes/__snapshots__/jsfmt.spec.js.snap | 4 ++--
 tests/html_attributes/angular.html                     | 2 +-
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/language-html/angular-microsyntax.js b/src/language-html/angular-microsyntax.js
index 42618c415088..e9a36bb4c291 100644
--- a/src/language-html/angular-microsyntax.js
+++ b/src/language-html/angular-microsyntax.js
@@ -18,12 +18,12 @@ const IDENTIFIER_PATTERN = "[a-zA-Z_][a-zA-Z0-9_]*";
  *     NgForLetOf ::
  *         'let' Identifier 'of' Expression
  */
-const NG_FOR_LET_OF_PATTERN = `^let\\s+(${IDENTIFIER_PATTERN})\\s+of\\s+([\\s\\S]+)$`;
+const NG_FOR_LET_OF_PATTERN = `^let\\s+(${IDENTIFIER_PATTERN})\\s+of\\b\\s*([\\s\\S]+)$`;
 /**
  *     NgForLetEqual ::
  *         'let' Identifier '=' Identifier
  */
-const NG_FOR_LET_EQUAL_PATTERN = `^let\\s+(${IDENTIFIER_PATTERN})\\s*=\\s*(${IDENTIFIER_PATTERN})$`;
+const NG_FOR_LET_EQUAL_PATTERN = `^let\\s+(${IDENTIFIER_PATTERN})=(${IDENTIFIER_PATTERN})$`;
 /**
  *     NgForColon ::
  *         Identifier ':' Expression
@@ -83,7 +83,7 @@ function printNgForLetOf(data, textToDoc) {
 
 function printNgForLetEqual(data /*, textToDoc */) {
   const [, identifier1, identifier2] = data.match(NG_FOR_LET_EQUAL_PATTERN);
-  return concat(["let ", identifier1, " = ", identifier2]);
+  return concat(["let ", identifier1, "=", identifier2]);
 }
 
 function printNgForColon(data, textToDoc) {
diff --git a/tests/html_attributes/__snapshots__/jsfmt.spec.js.snap b/tests/html_attributes/__snapshots__/jsfmt.spec.js.snap
index 9d38b811ddd6..cd1a16a1e721 100644
--- a/tests/html_attributes/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_attributes/__snapshots__/jsfmt.spec.js.snap
@@ -7,7 +7,7 @@ exports[`angular.html - html-verify 1`] = `
     [(target)]="  'hello'.repeat(    2   )  "
     *ngIf=" something?true:false    "
     *ngFor="  let     hero     of     heroes"
-    *ngFor="  let    hero     of [1,2,3,666666666666666666666666666666666666]; let i=index"
+    *ngFor="  let    hero     of[1,2,3,666666666666666666666666666666666666]; let i=index"
     *ngFor="     let hero     of     heroes;     trackBy    :    trackByHeroes     "
     *ngFor=" let     item   of   items   ;    index    as   i  ; trackBy  :     trackByFn"
 ></div>~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
@@ -19,7 +19,7 @@ exports[`angular.html - html-verify 1`] = `
   *ngFor="let hero of heroes"
   *ngFor="
     let hero of [1, 2, 3, 666666666666666666666666666666666666];
-    let i = index
+    let i=index
   "
   *ngFor="let hero of heroes; trackBy: trackByHeroes"
   *ngFor="let item of items; index as i; trackBy: trackByFn"
diff --git a/tests/html_attributes/angular.html b/tests/html_attributes/angular.html
index affe611ead2f..3c1adc858b8c 100644
--- a/tests/html_attributes/angular.html
+++ b/tests/html_attributes/angular.html
@@ -4,7 +4,7 @@
     [(target)]="  'hello'.repeat(    2   )  "
     *ngIf=" something?true:false    "
     *ngFor="  let     hero     of     heroes"
-    *ngFor="  let    hero     of [1,2,3,666666666666666666666666666666666666]; let i=index"
+    *ngFor="  let    hero     of[1,2,3,666666666666666666666666666666666666]; let i=index"
     *ngFor="     let hero     of     heroes;     trackBy    :    trackByHeroes     "
     *ngFor=" let     item   of   items   ;    index    as   i  ; trackBy  :     trackByFn"
 ></div>
\ No newline at end of file

From f16762938f05240d946d605ddff0e7afa8ece69e Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Sun, 14 Oct 2018 07:15:20 +0800
Subject: [PATCH 029/177] test: add tests

---
 .../html_css/__snapshots__/jsfmt.spec.js.snap | 22 +++++++++++++++++++
 tests/html_css/scss.html                      | 13 +++++++++++
 2 files changed, 35 insertions(+)

diff --git a/tests/html_css/__snapshots__/jsfmt.spec.js.snap b/tests/html_css/__snapshots__/jsfmt.spec.js.snap
index da15a1497d29..ddabf5f1501b 100644
--- a/tests/html_css/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_css/__snapshots__/jsfmt.spec.js.snap
@@ -91,6 +91,19 @@ exports[`scss.html - html-verify 1`] = `
     color: $primary-color;
   }
 </style>
+
+<style lang="scss">
+.someElement {
+    @include bp-medium {
+      display: flex;
+    }
+    
+    @include bp-large {
+      margin-top: 10px;
+      margin-bottom: 10px;
+    }
+}
+</style>
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 <style type="text/x-scss">
   $font-stack: Helvetica, sans-serif;
@@ -112,6 +125,15 @@ exports[`scss.html - html-verify 1`] = `
   }
 </style>
 
+<style lang="scss">
+  .someElement {
+    @include bp-medium {display: flex;}
+
+    @include bp-large {margin-top: 10px;
+      margin-bottom: 10px;}
+  }
+</style>
+
 `;
 
 exports[`simple.html - html-verify 1`] = `
diff --git a/tests/html_css/scss.html b/tests/html_css/scss.html
index bffd0b54bbf5..0da28a950c9f 100644
--- a/tests/html_css/scss.html
+++ b/tests/html_css/scss.html
@@ -17,3 +17,16 @@
     color: $primary-color;
   }
 </style>
+
+<style lang="scss">
+.someElement {
+    @include bp-medium {
+      display: flex;
+    }
+    
+    @include bp-large {
+      margin-top: 10px;
+      margin-bottom: 10px;
+    }
+}
+</style>

From 294ffa1c107b905a6cbbad7a4ee73a5740da5f40 Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Sun, 14 Oct 2018 07:16:56 +0800
Subject: [PATCH 030/177] fix: no unexpected output for style/script content

---
 src/language-html/utils.js                      |  4 +++-
 tests/html_css/__snapshots__/jsfmt.spec.js.snap | 10 +++++++---
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/language-html/utils.js b/src/language-html/utils.js
index c7effce97b3e..41c2fec282dc 100644
--- a/src/language-html/utils.js
+++ b/src/language-html/utils.js
@@ -221,7 +221,9 @@ function forceBreakChildren(node) {
   return (
     isTag(node) &&
     node.children.length !== 0 &&
-    (["html", "head", "ul", "ol", "select"].indexOf(node.name) !== -1 ||
+    (["html", "head", "ul", "ol", "select", "script", "style"].indexOf(
+      node.name
+    ) !== -1 ||
       (node.cssDisplay.startsWith("table") && node.cssDisplay !== "table-cell"))
   );
 }
diff --git a/tests/html_css/__snapshots__/jsfmt.spec.js.snap b/tests/html_css/__snapshots__/jsfmt.spec.js.snap
index ddabf5f1501b..61b0224ad493 100644
--- a/tests/html_css/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_css/__snapshots__/jsfmt.spec.js.snap
@@ -127,10 +127,14 @@ exports[`scss.html - html-verify 1`] = `
 
 <style lang="scss">
   .someElement {
-    @include bp-medium {display: flex;}
+    @include bp-medium {
+      display: flex;
+    }
 
-    @include bp-large {margin-top: 10px;
-      margin-bottom: 10px;}
+    @include bp-large {
+      margin-top: 10px;
+      margin-bottom: 10px;
+    }
   }
 </style>
 

From 140fbf8646e3dd80b7ad666936ecd15c36768211 Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Sun, 14 Oct 2018 07:34:25 +0800
Subject: [PATCH 031/177] test: add tests

---
 .../multiparser_js_html/__snapshots__/jsfmt.spec.js.snap  | 8 ++++++++
 tests/multiparser_js_html/lit-html.js                     | 3 +++
 2 files changed, 11 insertions(+)

diff --git a/tests/multiparser_js_html/__snapshots__/jsfmt.spec.js.snap b/tests/multiparser_js_html/__snapshots__/jsfmt.spec.js.snap
index e834d23fe494..195cc95f77cd 100644
--- a/tests/multiparser_js_html/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/multiparser_js_html/__snapshots__/jsfmt.spec.js.snap
@@ -42,6 +42,9 @@ class MyElement extends LitElement {
 }
 
 customElements.define('my-element', MyElement);
+
+const someHtml1 = html\`<div       > hello \${world} </div     >\`;
+const someHtml2 = /* HTML */ \`<div      > hello \${world} </div     >\`;
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 import { LitElement, html } from "@polymer/lit-element";
 
@@ -71,4 +74,9 @@ class MyElement extends LitElement {
 
 customElements.define("my-element", MyElement);
 
+const someHtml1 = html\`
+  <div>hello \${world}</div>
+\`;
+const someHtml2 = /* HTML */ \`<div      > hello \${world} </div     >\`;
+
 `;
diff --git a/tests/multiparser_js_html/lit-html.js b/tests/multiparser_js_html/lit-html.js
index af4db44717fe..1c432eaf0f2a 100644
--- a/tests/multiparser_js_html/lit-html.js
+++ b/tests/multiparser_js_html/lit-html.js
@@ -39,3 +39,6 @@ class MyElement extends LitElement {
 }
 
 customElements.define('my-element', MyElement);
+
+const someHtml1 = html`<div       > hello ${world} </div     >`;
+const someHtml2 = /* HTML */ `<div      > hello ${world} </div     >`;

From 1dc9d9298ffeb35b9e61a6c87d75415cd077ca08 Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Sun, 14 Oct 2018 07:39:21 +0800
Subject: [PATCH 032/177] feat: allow tagging HTML templates with comment

---
 src/language-js/clean.js                      |  9 ++--
 src/language-js/embed.js                      | 54 ++++++++++---------
 .../__snapshots__/jsfmt.spec.js.snap          |  4 +-
 3 files changed, 39 insertions(+), 28 deletions(-)

diff --git a/src/language-js/clean.js b/src/language-js/clean.js
index b72d2895522c..0c6e61baec1c 100644
--- a/src/language-js/clean.js
+++ b/src/language-js/clean.js
@@ -183,14 +183,17 @@ function clean(ast, newObj, parent) {
     // we will not trim the comment value and we will expect exactly one space on
     // either side of the GraphQL string
     // Also see ./embed.js
-    const hasGraphQLComment =
+    const hasLanguageComment =
       ast.leadingComments &&
       ast.leadingComments.some(
         comment =>
-          comment.type === "CommentBlock" && comment.value === " GraphQL "
+          comment.type === "CommentBlock" &&
+          ["GraphQL", "HTML"].some(
+            languageName => comment.value === ` ${languageName} `
+          )
       );
     if (
-      hasGraphQLComment ||
+      hasLanguageComment ||
       (parent.type === "CallExpression" && parent.callee.name === "graphql")
     ) {
       newObj.quasis.forEach(quasi => delete quasi.value);
diff --git a/src/language-js/embed.js b/src/language-js/embed.js
index 884c2712b013..2895f308b413 100644
--- a/src/language-js/embed.js
+++ b/src/language-js/embed.js
@@ -481,20 +481,8 @@ function isGraphQL(path) {
   const node = path.getValue();
   const parent = path.getParentNode();
 
-  // This checks for a leading comment that is exactly `/* GraphQL */`
-  // In order to be in line with other implementations of this comment tag
-  // we will not trim the comment value and we will expect exactly one space on
-  // either side of the GraphQL string
-  // Also see ./clean.js
-  const hasGraphQLComment =
-    node.leadingComments &&
-    node.leadingComments.some(
-      comment =>
-        comment.type === "CommentBlock" && comment.value === " GraphQL "
-    );
-
   return (
-    hasGraphQLComment ||
+    hasLanguageComment(node, "GraphQL") ||
     (parent &&
       ((parent.type === "TaggedTemplateExpression" &&
         ((parent.tag.type === "MemberExpression" &&
@@ -508,6 +496,21 @@ function isGraphQL(path) {
   );
 }
 
+function hasLanguageComment(node, languageName) {
+  // This checks for a leading comment that is exactly `/* GraphQL */`
+  // In order to be in line with other implementations of this comment tag
+  // we will not trim the comment value and we will expect exactly one space on
+  // either side of the GraphQL string
+  // Also see ./clean.js
+  return (
+    node.leadingComments &&
+    node.leadingComments.some(
+      comment =>
+        comment.type === "CommentBlock" && comment.value === ` ${languageName} `
+    )
+  );
+}
+
 function isPathMatch(path, predicateStack) {
   const stack = path.stack.slice();
 
@@ -537,19 +540,22 @@ function isPathMatch(path, predicateStack) {
 }
 
 /**
- * lit-html
- *
- * html`...`
+ *     - html`...`
+ *     - HTML comment block
  */
 function isHtml(path) {
-  return isPathMatch(path, [
-    node => node.type === "TemplateLiteral",
-    (node, name) =>
-      node.type === "TaggedTemplateExpression" &&
-      node.tag.type === "Identifier" &&
-      node.tag.name === "html" &&
-      name === "quasi"
-  ]);
+  const node = path.getValue();
+  return (
+    hasLanguageComment(node, "HTML") ||
+    isPathMatch(path, [
+      node => node.type === "TemplateLiteral",
+      (node, name) =>
+        node.type === "TaggedTemplateExpression" &&
+        node.tag.type === "Identifier" &&
+        node.tag.name === "html" &&
+        name === "quasi"
+    ])
+  );
 }
 
 function printHtmlTemplateLiteral(path, print, textToDoc) {
diff --git a/tests/multiparser_js_html/__snapshots__/jsfmt.spec.js.snap b/tests/multiparser_js_html/__snapshots__/jsfmt.spec.js.snap
index 195cc95f77cd..e0b45e159d91 100644
--- a/tests/multiparser_js_html/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/multiparser_js_html/__snapshots__/jsfmt.spec.js.snap
@@ -77,6 +77,8 @@ customElements.define("my-element", MyElement);
 const someHtml1 = html\`
   <div>hello \${world}</div>
 \`;
-const someHtml2 = /* HTML */ \`<div      > hello \${world} </div     >\`;
+const someHtml2 = /* HTML */ \`
+  <div>hello \${world}</div>
+\`;
 
 `;

From 08c9495ea94495bdaf0d8422d823de252762f4f3 Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Sun, 14 Oct 2018 08:49:57 +0800
Subject: [PATCH 033/177] test: add tests

---
 tests/html_attributes/__snapshots__/jsfmt.spec.js.snap | 2 ++
 tests/html_attributes/angular.html                     | 1 +
 2 files changed, 3 insertions(+)

diff --git a/tests/html_attributes/__snapshots__/jsfmt.spec.js.snap b/tests/html_attributes/__snapshots__/jsfmt.spec.js.snap
index cd1a16a1e721..20579a926cf6 100644
--- a/tests/html_attributes/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_attributes/__snapshots__/jsfmt.spec.js.snap
@@ -10,6 +10,7 @@ exports[`angular.html - html-verify 1`] = `
     *ngFor="  let    hero     of[1,2,3,666666666666666666666666666666666666]; let i=index"
     *ngFor="     let hero     of     heroes;     trackBy    :    trackByHeroes     "
     *ngFor=" let     item   of   items   ;    index    as   i  ; trackBy  :     trackByFn"
+    *ngFor="  let    hero     of heroes; let i  =  index"
 ></div>~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 <div
   [target]="'hello'.repeat(2)"
@@ -23,6 +24,7 @@ exports[`angular.html - html-verify 1`] = `
   "
   *ngFor="let hero of heroes; trackBy: trackByHeroes"
   *ngFor="let item of items; index as i; trackBy: trackByFn"
+  *ngFor="  let    hero     of heroes; let i  =  index"
 ></div>
 
 `;
diff --git a/tests/html_attributes/angular.html b/tests/html_attributes/angular.html
index 3c1adc858b8c..5458da2f392d 100644
--- a/tests/html_attributes/angular.html
+++ b/tests/html_attributes/angular.html
@@ -7,4 +7,5 @@
     *ngFor="  let    hero     of[1,2,3,666666666666666666666666666666666666]; let i=index"
     *ngFor="     let hero     of     heroes;     trackBy    :    trackByHeroes     "
     *ngFor=" let     item   of   items   ;    index    as   i  ; trackBy  :     trackByFn"
+    *ngFor="  let    hero     of heroes; let i  =  index"
 ></div>
\ No newline at end of file

From 2c3b0dca1f16fc0ba397e182404ae5194c113ed6 Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Sun, 14 Oct 2018 08:51:34 +0800
Subject: [PATCH 034/177] fix: allow surrounding spaces for `=` in NgLetEqual

---
 src/language-html/angular-microsyntax.js               | 2 +-
 tests/html_attributes/__snapshots__/jsfmt.spec.js.snap | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/language-html/angular-microsyntax.js b/src/language-html/angular-microsyntax.js
index e9a36bb4c291..d7b036d414dd 100644
--- a/src/language-html/angular-microsyntax.js
+++ b/src/language-html/angular-microsyntax.js
@@ -23,7 +23,7 @@ const NG_FOR_LET_OF_PATTERN = `^let\\s+(${IDENTIFIER_PATTERN})\\s+of\\b\\s*([\\s
  *     NgForLetEqual ::
  *         'let' Identifier '=' Identifier
  */
-const NG_FOR_LET_EQUAL_PATTERN = `^let\\s+(${IDENTIFIER_PATTERN})=(${IDENTIFIER_PATTERN})$`;
+const NG_FOR_LET_EQUAL_PATTERN = `^let\\s+(${IDENTIFIER_PATTERN})\\s*=\\s*(${IDENTIFIER_PATTERN})$`;
 /**
  *     NgForColon ::
  *         Identifier ':' Expression
diff --git a/tests/html_attributes/__snapshots__/jsfmt.spec.js.snap b/tests/html_attributes/__snapshots__/jsfmt.spec.js.snap
index 20579a926cf6..4a69c456088c 100644
--- a/tests/html_attributes/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_attributes/__snapshots__/jsfmt.spec.js.snap
@@ -24,7 +24,7 @@ exports[`angular.html - html-verify 1`] = `
   "
   *ngFor="let hero of heroes; trackBy: trackByHeroes"
   *ngFor="let item of items; index as i; trackBy: trackByFn"
-  *ngFor="  let    hero     of heroes; let i  =  index"
+  *ngFor="let hero of heroes; let i=index"
 ></div>
 
 `;

From a1402a49767d8604ca1eb9ad158eb5e1af316366 Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Sun, 14 Oct 2018 08:53:32 +0800
Subject: [PATCH 035/177] test: add tests

---
 tests/html_attributes/__snapshots__/jsfmt.spec.js.snap | 2 ++
 tests/html_attributes/angular.html                     | 1 +
 2 files changed, 3 insertions(+)

diff --git a/tests/html_attributes/__snapshots__/jsfmt.spec.js.snap b/tests/html_attributes/__snapshots__/jsfmt.spec.js.snap
index 4a69c456088c..13be597bfb89 100644
--- a/tests/html_attributes/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_attributes/__snapshots__/jsfmt.spec.js.snap
@@ -11,6 +11,7 @@ exports[`angular.html - html-verify 1`] = `
     *ngFor="     let hero     of     heroes;     trackBy    :    trackByHeroes     "
     *ngFor=" let     item   of   items   ;    index    as   i  ; trackBy  :     trackByFn"
     *ngFor="  let    hero     of heroes; let i  =  index"
+    *ngFor="  let    hero     of heroes; value     myValue"
 ></div>~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 <div
   [target]="'hello'.repeat(2)"
@@ -25,6 +26,7 @@ exports[`angular.html - html-verify 1`] = `
   *ngFor="let hero of heroes; trackBy: trackByHeroes"
   *ngFor="let item of items; index as i; trackBy: trackByFn"
   *ngFor="let hero of heroes; let i=index"
+  *ngFor="  let    hero     of heroes; value     myValue"
 ></div>
 
 `;
diff --git a/tests/html_attributes/angular.html b/tests/html_attributes/angular.html
index 5458da2f392d..879e0415a607 100644
--- a/tests/html_attributes/angular.html
+++ b/tests/html_attributes/angular.html
@@ -8,4 +8,5 @@
     *ngFor="     let hero     of     heroes;     trackBy    :    trackByHeroes     "
     *ngFor=" let     item   of   items   ;    index    as   i  ; trackBy  :     trackByFn"
     *ngFor="  let    hero     of heroes; let i  =  index"
+    *ngFor="  let    hero     of heroes; value     myValue"
 ></div>
\ No newline at end of file

From a4fdc0baf71c2ceed2d4359ba263178f145dd1ad Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Sun, 14 Oct 2018 08:54:22 +0800
Subject: [PATCH 036/177] fix: `:` in NgForColon is optional

---
 src/language-html/angular-microsyntax.js               | 2 +-
 tests/html_attributes/__snapshots__/jsfmt.spec.js.snap | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/language-html/angular-microsyntax.js b/src/language-html/angular-microsyntax.js
index d7b036d414dd..d220bb3dffe9 100644
--- a/src/language-html/angular-microsyntax.js
+++ b/src/language-html/angular-microsyntax.js
@@ -28,7 +28,7 @@ const NG_FOR_LET_EQUAL_PATTERN = `^let\\s+(${IDENTIFIER_PATTERN})\\s*=\\s*(${IDE
  *     NgForColon ::
  *         Identifier ':' Expression
  */
-const NG_FOR_COLON_PATTERN = `^(${IDENTIFIER_PATTERN})\\s*:\\s*([\\s\\S]+)$`;
+const NG_FOR_COLON_PATTERN = `^(${IDENTIFIER_PATTERN})\\s*:?\\s*([\\s\\S]+)$`;
 /**
  *     NgForAs ::
  *         Identifier 'as' Identifier
diff --git a/tests/html_attributes/__snapshots__/jsfmt.spec.js.snap b/tests/html_attributes/__snapshots__/jsfmt.spec.js.snap
index 13be597bfb89..8e3a4e420de8 100644
--- a/tests/html_attributes/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_attributes/__snapshots__/jsfmt.spec.js.snap
@@ -26,7 +26,7 @@ exports[`angular.html - html-verify 1`] = `
   *ngFor="let hero of heroes; trackBy: trackByHeroes"
   *ngFor="let item of items; index as i; trackBy: trackByFn"
   *ngFor="let hero of heroes; let i=index"
-  *ngFor="  let    hero     of heroes; value     myValue"
+  *ngFor="let hero of heroes; value: myValue"
 ></div>
 
 `;

From 06e669be2576292adaa027060df9432a5ef2da16 Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Mon, 15 Oct 2018 14:24:09 +0800
Subject: [PATCH 037/177] refactor: extract printEmbeddedAttributeValue

---
 src/language-html/printer-htmlparser2.js      | 75 +++++++++++--------
 ...gular-microsyntax.js => syntax-angular.js} | 10 ++-
 2 files changed, 50 insertions(+), 35 deletions(-)
 rename src/language-html/{angular-microsyntax.js => syntax-angular.js} (93%)

diff --git a/src/language-html/printer-htmlparser2.js b/src/language-html/printer-htmlparser2.js
index 89497874bbb4..e2fad1e13ae0 100644
--- a/src/language-html/printer-htmlparser2.js
+++ b/src/language-html/printer-htmlparser2.js
@@ -35,7 +35,7 @@ const {
 const preprocess = require("./preprocess");
 const assert = require("assert");
 const { insertPragma } = require("./pragma");
-const { printNgForValue } = require("./angular-microsyntax");
+const { printNgForValue } = require("./syntax-angular");
 
 function concat(parts) {
   const newParts = normalizeParts(parts);
@@ -111,40 +111,18 @@ function embed(path, print, textToDoc /*, options */) {
       break;
     }
     case "attribute": {
-      /**
-       * Vue binding syntax: JS expressions
-       *
-       *   :class="jsExpression"
-       *   v-bind:id="jsExpression"
-       *   v-if="jsExpression"
-       *   @click="jsExpression"
-       *
-       * Angular binding syntax: JS expressions
-       *
-       *   *ngIf="jsExpression"
-       *   [target]="jsExpression"
-       *   (target]="jsExpression"
-       *   [(target)]="jsExpression"
-       */
-      if (
-        /^:|^v-|^@|^\*ng|^\[.+\]$|^\(.+\)$/.test(node.key) &&
-        !/^\w+$/.test(node.value)
-      ) {
-        const value = node.value
-          .replace(/&quot;/g, '"')
-          .replace(/&apos;/g, "'");
-        const valueDoc =
-          node.key === "*ngFor"
-            ? printNgForValue(value, textToDoc)
-            : textToDoc(value, {
-                parser: "__js_expression",
-                singleQuote: true
-              });
+      const embeddedAttributeValueDoc = printEmbeddedAttributeValue(
+        node,
+        (code, opts) =>
+          // prefer single quote to avoid unnecessary escape
+          textToDoc(code, Object.assign({ singleQuote: true }, opts))
+      );
+      if (embeddedAttributeValueDoc) {
         return concat([
           node.key,
           '="',
           mapDoc(
-            valueDoc,
+            embeddedAttributeValueDoc,
             doc => (typeof doc === "string" ? doc.replace(/"/g, "&quot;") : doc)
           ),
           '"'
@@ -718,6 +696,41 @@ function getInterpolationTextDataParts(node, textToDoc) {
   return parts;
 }
 
+function printEmbeddedAttributeValue(node, textToDoc) {
+  // avoid unnecessary parsing
+  if (!node.value || /^\w+$/.test(node.value)) {
+    return null;
+  }
+
+  /**
+   * Vue binding syntax: JS expressions
+   *
+   *   :class="jsExpression"
+   *   v-bind:id="jsExpression"
+   *   v-if="jsExpression"
+   *   @click="jsExpression"
+   *
+   * Angular binding syntax: JS expressions
+   *
+   *   *ngIf="jsExpression"
+   *   [target]="jsExpression"
+   *   (target]="jsExpression"
+   *   [(target)]="jsExpression"
+   */
+  const embeddedKeyRegex = /^:|^v-|^@|^\*ng|^\[.+\]$|^\(.+\)$/;
+  if (!embeddedKeyRegex.test(node.key)) {
+    return null;
+  }
+
+  const value = node.value.replace(/&quot;/g, '"').replace(/&apos;/g, "'");
+
+  if (node.key === "*ngFor") {
+    return printNgForValue(value, textToDoc);
+  }
+
+  return textToDoc(value, { parser: "__js_expression" });
+}
+
 module.exports = {
   preprocess,
   print: genericPrint,
diff --git a/src/language-html/angular-microsyntax.js b/src/language-html/syntax-angular.js
similarity index 93%
rename from src/language-html/angular-microsyntax.js
rename to src/language-html/syntax-angular.js
index d220bb3dffe9..7d03ed9f6c51 100644
--- a/src/language-html/angular-microsyntax.js
+++ b/src/language-html/syntax-angular.js
@@ -4,8 +4,6 @@ const {
   builders: { concat, group, line, join, softline, indent }
 } = require("../doc");
 
-const options = { parser: "__js_expression", singleQuote: true };
-
 /**
  *     NgFor ::
  *         '*ngFor="' NgForValue '"'
@@ -77,7 +75,7 @@ function printNgForLetOf(data, textToDoc) {
     "let ",
     identifier,
     " of ",
-    group(textToDoc(expression, options))
+    group(textToDoc(expression, { parser: "__js_expression" }))
   ]);
 }
 
@@ -88,7 +86,11 @@ function printNgForLetEqual(data /*, textToDoc */) {
 
 function printNgForColon(data, textToDoc) {
   const [, identifier, expression] = data.match(NG_FOR_COLON_PATTERN);
-  return concat([identifier, ": ", group(textToDoc(expression, options))]);
+  return concat([
+    identifier,
+    ": ",
+    group(textToDoc(expression, { parser: "__js_expression" }))
+  ]);
 }
 
 function printNgForAs(data /*, textToDoc */) {

From dbd86f0130c752850af726ab91243af79ca27b9b Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Mon, 15 Oct 2018 14:56:26 +0800
Subject: [PATCH 038/177] test: add tests

---
 .../__snapshots__/jsfmt.spec.js.snap          | 38 +++++++++++++++++++
 tests/html_attributes/vue.html                | 15 ++++++++
 2 files changed, 53 insertions(+)
 create mode 100644 tests/html_attributes/vue.html

diff --git a/tests/html_attributes/__snapshots__/jsfmt.spec.js.snap b/tests/html_attributes/__snapshots__/jsfmt.spec.js.snap
index 8e3a4e420de8..d4e5c34fd20f 100644
--- a/tests/html_attributes/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_attributes/__snapshots__/jsfmt.spec.js.snap
@@ -268,6 +268,44 @@ exports[`single-quotes.html - html-verify 1`] = `
 
 `;
 
+exports[`vue.html - html-verify 1`] = `
+<div
+  v-for="  item  in  items "
+  v-for="  item  of  items "
+  v-for="{a:b}of[1,2,3].map(x=>({a:x}))"
+  v-for="(    item    , index)    in    items"
+  v-for="value    in     object"
+  v-for="(value,    key)    in    object"
+  v-for="(value  ,   key,   index)    in   object"
+  v-for="   n    in   evenNumbers"
+  v-for=" n in even   ( numbers) "
+  v-for=" n    in    10"
+  v-for=" { a }    in    [0].map(()=>({a:1}))   "
+  v-for=" ({ a }, [c  ])    in    [0].map(()=>1)   "
+  v-for=" n in items.map(x => { return x }) "
+></div>
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+<div
+  v-for="item in items"
+  v-for="  item  of  items "
+  v-for="{a:b}of[1,2,3].map(x=>({a:x}))"
+  v-for="(item, index) in items"
+  v-for="value in object"
+  v-for="(value, key) in object"
+  v-for="(value, key, index) in object"
+  v-for="n in evenNumbers"
+  v-for="n in even(numbers)"
+  v-for="n in 10"
+  v-for="{ a } in [0].map(() => ({ a: 1 }))"
+  v-for="({ a }, [c]) in [0].map(() => 1)"
+  v-for="n in
+    items.map(x => {
+      return x;
+    })"
+></div>
+
+`;
+
 exports[`without-quotes.html - html-verify 1`] = `
 <p title=Title>String</p>
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
diff --git a/tests/html_attributes/vue.html b/tests/html_attributes/vue.html
new file mode 100644
index 000000000000..89ba893ca477
--- /dev/null
+++ b/tests/html_attributes/vue.html
@@ -0,0 +1,15 @@
+<div
+  v-for="  item  in  items "
+  v-for="  item  of  items "
+  v-for="{a:b}of[1,2,3].map(x=>({a:x}))"
+  v-for="(    item    , index)    in    items"
+  v-for="value    in     object"
+  v-for="(value,    key)    in    object"
+  v-for="(value  ,   key,   index)    in   object"
+  v-for="   n    in   evenNumbers"
+  v-for=" n in even   ( numbers) "
+  v-for=" n    in    10"
+  v-for=" { a }    in    [0].map(()=>({a:1}))   "
+  v-for=" ({ a }, [c  ])    in    [0].map(()=>1)   "
+  v-for=" n in items.map(x => { return x }) "
+></div>

From 917be20fccf848e2d647b2ba7ee8d541a1fe5a1e Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Mon, 15 Oct 2018 14:58:31 +0800
Subject: [PATCH 039/177] feat: support `v-for`

---
 src/language-html/printer-htmlparser2.js      |  5 +++
 src/language-html/syntax-vue.js               | 37 +++++++++++++++++++
 src/language-js/printer-estree.js             | 16 ++++++++
 .../__snapshots__/jsfmt.spec.js.snap          | 11 +++---
 4 files changed, 63 insertions(+), 6 deletions(-)
 create mode 100644 src/language-html/syntax-vue.js

diff --git a/src/language-html/printer-htmlparser2.js b/src/language-html/printer-htmlparser2.js
index e2fad1e13ae0..373bed976904 100644
--- a/src/language-html/printer-htmlparser2.js
+++ b/src/language-html/printer-htmlparser2.js
@@ -36,6 +36,7 @@ const preprocess = require("./preprocess");
 const assert = require("assert");
 const { insertPragma } = require("./pragma");
 const { printNgForValue } = require("./syntax-angular");
+const { printVForValue } = require("./syntax-vue");
 
 function concat(parts) {
   const newParts = normalizeParts(parts);
@@ -728,6 +729,10 @@ function printEmbeddedAttributeValue(node, textToDoc) {
     return printNgForValue(value, textToDoc);
   }
 
+  if (node.key === "v-for") {
+    return printVForValue(value, textToDoc);
+  }
+
   return textToDoc(value, { parser: "__js_expression" });
 }
 
diff --git a/src/language-html/syntax-vue.js b/src/language-html/syntax-vue.js
new file mode 100644
index 000000000000..bdb7d3f3bde8
--- /dev/null
+++ b/src/language-html/syntax-vue.js
@@ -0,0 +1,37 @@
+"use strict";
+
+/**
+ *     v-for="... of ..."
+ *     v-for="... in ..."
+ *     v-for="(..., ...) in ..."
+ *
+ *     v-for="item in items"
+ *     v-for="(item, index) in items"
+ *     v-for="value in object"
+ *     v-for="(value, key) in object"
+ *     v-for="(value, key, index) in object"
+ *     v-for="n in evenNumbers"
+ *     v-for="n in even(numbers)"
+ *     v-for="n in 10"
+ */
+function printVForValue(value, textToDoc) {
+  /**
+   * v-for="(..., ...) in ..."
+   */
+  if (/^\s*\(/.test(value)) {
+    return textToDoc(value, { parser: "__js_expression" });
+  }
+
+  /**
+   * v-for="... of ..."
+   * v-for="... in ..."
+   */
+  return textToDoc(`for (${value});`, {
+    parser: "babylon",
+    __isVueFor: true
+  });
+}
+
+module.exports = {
+  printVForValue
+};
diff --git a/src/language-js/printer-estree.js b/src/language-js/printer-estree.js
index c9aef3a9dbd4..89b0710b0af5 100644
--- a/src/language-js/printer-estree.js
+++ b/src/language-js/printer-estree.js
@@ -350,6 +350,22 @@ function printPathNoParens(path, options, print, args) {
     return n;
   }
 
+  if (options.__isVueFor && n.type === "File") {
+    return path.call(
+      forStatementPath =>
+        concat([
+          forStatementPath.call(print, "left"),
+          " ",
+          forStatementPath.getValue().type === "ForOfStatement" ? "of" : "in",
+          " ",
+          forStatementPath.call(print, "right")
+        ]),
+      "program",
+      "body",
+      0
+    );
+  }
+
   let parts = [];
   switch (n.type) {
     case "JsExpressionRoot":
diff --git a/tests/html_attributes/__snapshots__/jsfmt.spec.js.snap b/tests/html_attributes/__snapshots__/jsfmt.spec.js.snap
index d4e5c34fd20f..0012a86e51a8 100644
--- a/tests/html_attributes/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_attributes/__snapshots__/jsfmt.spec.js.snap
@@ -287,8 +287,8 @@ exports[`vue.html - html-verify 1`] = `
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 <div
   v-for="item in items"
-  v-for="  item  of  items "
-  v-for="{a:b}of[1,2,3].map(x=>({a:x}))"
+  v-for="item of items"
+  v-for="{ a: b } of [1, 2, 3].map(x => ({ a: x }))"
   v-for="(item, index) in items"
   v-for="value in object"
   v-for="(value, key) in object"
@@ -298,10 +298,9 @@ exports[`vue.html - html-verify 1`] = `
   v-for="n in 10"
   v-for="{ a } in [0].map(() => ({ a: 1 }))"
   v-for="({ a }, [c]) in [0].map(() => 1)"
-  v-for="n in
-    items.map(x => {
-      return x;
-    })"
+  v-for="n in items.map(x => {
+    return x;
+  })"
 ></div>
 
 `;

From 95ff356ec7b80001e5acc063652fff65f8cae32a Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Tue, 16 Oct 2018 14:41:50 +0800
Subject: [PATCH 040/177] test: add tests

---
 tests/html_attributes/__snapshots__/jsfmt.spec.js.snap | 2 ++
 tests/html_attributes/vue.html                         | 1 +
 2 files changed, 3 insertions(+)

diff --git a/tests/html_attributes/__snapshots__/jsfmt.spec.js.snap b/tests/html_attributes/__snapshots__/jsfmt.spec.js.snap
index 0012a86e51a8..3914545e4203 100644
--- a/tests/html_attributes/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_attributes/__snapshots__/jsfmt.spec.js.snap
@@ -276,6 +276,7 @@ exports[`vue.html - html-verify 1`] = `
   v-for="(    item    , index)    in    items"
   v-for="value    in     object"
   v-for="(value,    key)    in    object"
+  v-for="(value,    key)    of    object"
   v-for="(value  ,   key,   index)    in   object"
   v-for="   n    in   evenNumbers"
   v-for=" n in even   ( numbers) "
@@ -292,6 +293,7 @@ exports[`vue.html - html-verify 1`] = `
   v-for="(item, index) in items"
   v-for="value in object"
   v-for="(value, key) in object"
+  v-for="(value,    key)    of    object"
   v-for="(value, key, index) in object"
   v-for="n in evenNumbers"
   v-for="n in even(numbers)"
diff --git a/tests/html_attributes/vue.html b/tests/html_attributes/vue.html
index 89ba893ca477..6dd9d2c3437d 100644
--- a/tests/html_attributes/vue.html
+++ b/tests/html_attributes/vue.html
@@ -5,6 +5,7 @@
   v-for="(    item    , index)    in    items"
   v-for="value    in     object"
   v-for="(value,    key)    in    object"
+  v-for="(value,    key)    of    object"
   v-for="(value  ,   key,   index)    in   object"
   v-for="   n    in   evenNumbers"
   v-for=" n in even   ( numbers) "

From 6d541ac092a19ba0f2da8a23dafcbdd2d5a55c8b Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Tue, 16 Oct 2018 14:43:47 +0800
Subject: [PATCH 041/177] feat: support v-for `(..., ...) of ...`

---
 src/language-html/syntax-vue.js               | 73 +++++++++++++------
 src/language-js/printer-estree.js             | 21 +++---
 .../__snapshots__/jsfmt.spec.js.snap          |  4 +-
 3 files changed, 64 insertions(+), 34 deletions(-)

diff --git a/src/language-html/syntax-vue.js b/src/language-html/syntax-vue.js
index bdb7d3f3bde8..e0af8b1f9cd1 100644
--- a/src/language-html/syntax-vue.js
+++ b/src/language-html/syntax-vue.js
@@ -1,35 +1,62 @@
 "use strict";
 
+const {
+  builders: { concat, group }
+} = require("../doc");
+
 /**
- *     v-for="... of ..."
  *     v-for="... in ..."
+ *     v-for="... of ..."
  *     v-for="(..., ...) in ..."
- *
- *     v-for="item in items"
- *     v-for="(item, index) in items"
- *     v-for="value in object"
- *     v-for="(value, key) in object"
- *     v-for="(value, key, index) in object"
- *     v-for="n in evenNumbers"
- *     v-for="n in even(numbers)"
- *     v-for="n in 10"
+ *     v-for="(..., ...) of ..."
  */
 function printVForValue(value, textToDoc) {
-  /**
-   * v-for="(..., ...) in ..."
-   */
-  if (/^\s*\(/.test(value)) {
-    return textToDoc(value, { parser: "__js_expression" });
+  const { left, operator, right } = parseVForValue(value);
+  return concat([
+    group(
+      textToDoc(`function _(${left}) {}`, {
+        parser: "babylon",
+        __isVueForLeft: true
+      })
+    ),
+    " ",
+    operator,
+    " ",
+    textToDoc(right, { parser: "__js_expression" })
+  ]);
+}
+
+// modified from https://github.com/vuejs/vue/blob/v2.5.17/src/compiler/parser/index.js#L370-L387
+function parseVForValue(value) {
+  const forAliasRE = /([^]*?)\s+(in|of)\s+([^]*)/;
+  const forIteratorRE = /,([^,}\]]*)(?:,([^,}\]]*))?$/;
+  const stripParensRE = /^\(|\)$/g;
+
+  const inMatch = value.match(forAliasRE);
+  if (!inMatch) {
+    return;
+  }
+  const res = {};
+  res.for = inMatch[3].trim();
+  const alias = inMatch[1].trim().replace(stripParensRE, "");
+  const iteratorMatch = alias.match(forIteratorRE);
+  if (iteratorMatch) {
+    res.alias = alias.replace(forIteratorRE, "");
+    res.iterator1 = iteratorMatch[1].trim();
+    if (iteratorMatch[2]) {
+      res.iterator2 = iteratorMatch[2].trim();
+    }
+  } else {
+    res.alias = alias;
   }
 
-  /**
-   * v-for="... of ..."
-   * v-for="... in ..."
-   */
-  return textToDoc(`for (${value});`, {
-    parser: "babylon",
-    __isVueFor: true
-  });
+  return {
+    left: `${[res.alias, res.iterator1, res.iterator2]
+      .filter(Boolean)
+      .join(",")}`,
+    operator: inMatch[2],
+    right: res.for
+  };
 }
 
 module.exports = {
diff --git a/src/language-js/printer-estree.js b/src/language-js/printer-estree.js
index 89b0710b0af5..1eb057fcfbe8 100644
--- a/src/language-js/printer-estree.js
+++ b/src/language-js/printer-estree.js
@@ -350,16 +350,19 @@ function printPathNoParens(path, options, print, args) {
     return n;
   }
 
-  if (options.__isVueFor && n.type === "File") {
+  if (options.__isVueForLeft && n.type === "File") {
     return path.call(
-      forStatementPath =>
-        concat([
-          forStatementPath.call(print, "left"),
-          " ",
-          forStatementPath.getValue().type === "ForOfStatement" ? "of" : "in",
-          " ",
-          forStatementPath.call(print, "right")
-        ]),
+      functionDeclarationPath => {
+        const { params } = functionDeclarationPath.getValue();
+        return concat([
+          params.length > 1 ? "(" : "",
+          join(
+            concat([",", line]),
+            functionDeclarationPath.map(print, "params")
+          ),
+          params.length > 1 ? ")" : ""
+        ]);
+      },
       "program",
       "body",
       0
diff --git a/tests/html_attributes/__snapshots__/jsfmt.spec.js.snap b/tests/html_attributes/__snapshots__/jsfmt.spec.js.snap
index 3914545e4203..41087455e5d6 100644
--- a/tests/html_attributes/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_attributes/__snapshots__/jsfmt.spec.js.snap
@@ -289,11 +289,11 @@ exports[`vue.html - html-verify 1`] = `
 <div
   v-for="item in items"
   v-for="item of items"
-  v-for="{ a: b } of [1, 2, 3].map(x => ({ a: x }))"
+  v-for="{a:b}of[1,2,3].map(x=>({a:x}))"
   v-for="(item, index) in items"
   v-for="value in object"
   v-for="(value, key) in object"
-  v-for="(value,    key)    of    object"
+  v-for="(value, key) of object"
   v-for="(value, key, index) in object"
   v-for="n in evenNumbers"
   v-for="n in even(numbers)"

From cc940d7d28aff5f7eb0621a149cc774bf5f18baa Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Tue, 16 Oct 2018 14:44:30 +0800
Subject: [PATCH 042/177] test: remove invalid tests

---
 tests/html_attributes/__snapshots__/jsfmt.spec.js.snap | 2 --
 tests/html_attributes/vue.html                         | 1 -
 2 files changed, 3 deletions(-)

diff --git a/tests/html_attributes/__snapshots__/jsfmt.spec.js.snap b/tests/html_attributes/__snapshots__/jsfmt.spec.js.snap
index 41087455e5d6..dc3f5480ba7d 100644
--- a/tests/html_attributes/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_attributes/__snapshots__/jsfmt.spec.js.snap
@@ -272,7 +272,6 @@ exports[`vue.html - html-verify 1`] = `
 <div
   v-for="  item  in  items "
   v-for="  item  of  items "
-  v-for="{a:b}of[1,2,3].map(x=>({a:x}))"
   v-for="(    item    , index)    in    items"
   v-for="value    in     object"
   v-for="(value,    key)    in    object"
@@ -289,7 +288,6 @@ exports[`vue.html - html-verify 1`] = `
 <div
   v-for="item in items"
   v-for="item of items"
-  v-for="{a:b}of[1,2,3].map(x=>({a:x}))"
   v-for="(item, index) in items"
   v-for="value in object"
   v-for="(value, key) in object"
diff --git a/tests/html_attributes/vue.html b/tests/html_attributes/vue.html
index 6dd9d2c3437d..dc3270d8fb97 100644
--- a/tests/html_attributes/vue.html
+++ b/tests/html_attributes/vue.html
@@ -1,7 +1,6 @@
 <div
   v-for="  item  in  items "
   v-for="  item  of  items "
-  v-for="{a:b}of[1,2,3].map(x=>({a:x}))"
   v-for="(    item    , index)    in    items"
   v-for="value    in     object"
   v-for="(value,    key)    in    object"

From 515a973340013f7d653d3876978c956fc51912a4 Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Tue, 16 Oct 2018 15:15:10 +0800
Subject: [PATCH 043/177] refactor

---
 src/language-html/printer-htmlparser2.js | 63 ++++++++++++++++--------
 1 file changed, 42 insertions(+), 21 deletions(-)

diff --git a/src/language-html/printer-htmlparser2.js b/src/language-html/printer-htmlparser2.js
index 373bed976904..9400e163ce4e 100644
--- a/src/language-html/printer-htmlparser2.js
+++ b/src/language-html/printer-htmlparser2.js
@@ -704,33 +704,54 @@ function printEmbeddedAttributeValue(node, textToDoc) {
   }
 
   /**
-   * Vue binding syntax: JS expressions
-   *
-   *   :class="jsExpression"
-   *   v-bind:id="jsExpression"
-   *   v-if="jsExpression"
-   *   @click="jsExpression"
-   *
-   * Angular binding syntax: JS expressions
-   *
-   *   *ngIf="jsExpression"
-   *   [target]="jsExpression"
-   *   (target]="jsExpression"
-   *   [(target)]="jsExpression"
+   *     @click="jsStatement"
+   *     v-on:click="jsStatement"
+   */
+  const vueStatementBindingPatterns = ["^@", "^v-on:"];
+  /**
+   *     :class="jsExpression"
+   *     v-bind:id="jsExpression"
+   *     v-if="jsExpression"
+   */
+  const vueExpressionBindingPatterns = ["^:", "^v-"];
+  const vueBindingPatterns = [].concat(
+    vueStatementBindingPatterns,
+    vueExpressionBindingPatterns
+  );
+
+  /**
+   *     *ngFor="angularDirective"
    */
-  const embeddedKeyRegex = /^:|^v-|^@|^\*ng|^\[.+\]$|^\(.+\)$/;
-  if (!embeddedKeyRegex.test(node.key)) {
+  const ngDirectiveBindingPatterns = ["^\\*ng"];
+  /**
+   *     (click)="angularStatement"
+   */
+  const ngStatementBindingPatterns = ["^\\(.+\\)$"];
+  /**
+   *     [target]="angularExpression"
+   *     [(target)]="angularExpression"
+   */
+  const ngExpressionBindingPatterns = ["^\\[.+\\]$"];
+  const ngBindingPatterns = [].concat(
+    ngDirectiveBindingPatterns,
+    ngStatementBindingPatterns,
+    ngExpressionBindingPatterns
+  );
+
+  const isKeyMatched = patterns =>
+    new RegExp(patterns.join("|")).test(node.key);
+
+  if (!isKeyMatched([].concat(vueBindingPatterns, ngBindingPatterns))) {
     return null;
   }
 
   const value = node.value.replace(/&quot;/g, '"').replace(/&apos;/g, "'");
 
-  if (node.key === "*ngFor") {
-    return printNgForValue(value, textToDoc);
-  }
-
-  if (node.key === "v-for") {
-    return printVForValue(value, textToDoc);
+  switch (node.key) {
+    case "*ngFor":
+      return printNgForValue(value, textToDoc);
+    case "v-for":
+      return printVForValue(value, textToDoc);
   }
 
   return textToDoc(value, { parser: "__js_expression" });

From 060eed9a4de8bd10792fa5d73d089da92ec46c5f Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Tue, 16 Oct 2018 15:30:25 +0800
Subject: [PATCH 044/177] refactor

---
 src/language-html/syntax-vue.js   |  2 +-
 src/language-js/html-binding.js   | 36 +++++++++++++++++++++++++++++++
 src/language-js/printer-estree.js | 21 ++++--------------
 3 files changed, 41 insertions(+), 18 deletions(-)
 create mode 100644 src/language-js/html-binding.js

diff --git a/src/language-html/syntax-vue.js b/src/language-html/syntax-vue.js
index e0af8b1f9cd1..13edba1229c1 100644
--- a/src/language-html/syntax-vue.js
+++ b/src/language-html/syntax-vue.js
@@ -16,7 +16,7 @@ function printVForValue(value, textToDoc) {
     group(
       textToDoc(`function _(${left}) {}`, {
         parser: "babylon",
-        __isVueForLeft: true
+        __isVForBindingLeft: true
       })
     ),
     " ",
diff --git a/src/language-js/html-binding.js b/src/language-js/html-binding.js
new file mode 100644
index 000000000000..e4fdc0f9a9e3
--- /dev/null
+++ b/src/language-js/html-binding.js
@@ -0,0 +1,36 @@
+"use strict";
+
+const {
+  builders: { concat, join, line }
+} = require("../doc");
+
+function printHtmlBinding(path, options, print) {
+  const node = path.getValue();
+
+  if (node.type !== "File") {
+    return;
+  }
+
+  if (options.__isVForBindingLeft) {
+    return path.call(
+      functionDeclarationPath => {
+        const { params } = functionDeclarationPath.getValue();
+        return concat([
+          params.length > 1 ? "(" : "",
+          join(
+            concat([",", line]),
+            functionDeclarationPath.map(print, "params")
+          ),
+          params.length > 1 ? ")" : ""
+        ]);
+      },
+      "program",
+      "body",
+      0
+    );
+  }
+}
+
+module.exports = {
+  printHtmlBinding
+};
diff --git a/src/language-js/printer-estree.js b/src/language-js/printer-estree.js
index 1eb057fcfbe8..947b9e549bbd 100644
--- a/src/language-js/printer-estree.js
+++ b/src/language-js/printer-estree.js
@@ -34,6 +34,7 @@ const insertPragma = require("./pragma").insertPragma;
 const handleComments = require("./comments");
 const pathNeedsParens = require("./needs-parens");
 const preprocess = require("./preprocess");
+const { printHtmlBinding } = require("./html-binding");
 
 const {
   builders: {
@@ -350,23 +351,9 @@ function printPathNoParens(path, options, print, args) {
     return n;
   }
 
-  if (options.__isVueForLeft && n.type === "File") {
-    return path.call(
-      functionDeclarationPath => {
-        const { params } = functionDeclarationPath.getValue();
-        return concat([
-          params.length > 1 ? "(" : "",
-          join(
-            concat([",", line]),
-            functionDeclarationPath.map(print, "params")
-          ),
-          params.length > 1 ? ")" : ""
-        ]);
-      },
-      "program",
-      "body",
-      0
-    );
+  const htmlBinding = printHtmlBinding(path, options, print);
+  if (htmlBinding) {
+    return htmlBinding;
   }
 
   let parts = [];

From f0fbc20c560c008b8c326398f472c1d598928fb5 Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Tue, 16 Oct 2018 16:02:03 +0800
Subject: [PATCH 045/177] test: add tests

---
 tests/html_attributes/__snapshots__/jsfmt.spec.js.snap | 10 ++++++++++
 tests/html_attributes/vue.html                         |  5 +++++
 2 files changed, 15 insertions(+)

diff --git a/tests/html_attributes/__snapshots__/jsfmt.spec.js.snap b/tests/html_attributes/__snapshots__/jsfmt.spec.js.snap
index dc3f5480ba7d..05a415fb0187 100644
--- a/tests/html_attributes/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_attributes/__snapshots__/jsfmt.spec.js.snap
@@ -283,6 +283,11 @@ exports[`vue.html - html-verify 1`] = `
   v-for=" { a }    in    [0].map(()=>({a:1}))   "
   v-for=" ({ a }, [c  ])    in    [0].map(()=>1)   "
   v-for=" n in items.map(x => { return x }) "
+  @click="  /* hello */   "
+  @click="   /* 1 */ $emit( /* 2 */ 'click' /* 3 */ ) /* 4 */ ; /* 5 */   "
+  @click="   $emit(   'click'   )   "
+  @click="   $emit(   'click'   )  ;"
+  @click="   $emit(   'click'   )  ;if(something){for(let i=j;i<100;i++){}}else{}"
 ></div>
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 <div
@@ -301,6 +306,11 @@ exports[`vue.html - html-verify 1`] = `
   v-for="n in items.map(x => {
     return x;
   })"
+  @click="  /* hello */   "
+  @click="   /* 1 */ $emit( /* 2 */ 'click' /* 3 */ ) /* 4 */ ; /* 5 */   "
+  @click="$emit('click')"
+  @click="   $emit(   'click'   )  ;"
+  @click="   $emit(   'click'   )  ;if(something){for(let i=j;i<100;i++){}}else{}"
 ></div>
 
 `;
diff --git a/tests/html_attributes/vue.html b/tests/html_attributes/vue.html
index dc3270d8fb97..18030c804ac1 100644
--- a/tests/html_attributes/vue.html
+++ b/tests/html_attributes/vue.html
@@ -12,4 +12,9 @@
   v-for=" { a }    in    [0].map(()=>({a:1}))   "
   v-for=" ({ a }, [c  ])    in    [0].map(()=>1)   "
   v-for=" n in items.map(x => { return x }) "
+  @click="  /* hello */   "
+  @click="   /* 1 */ $emit( /* 2 */ 'click' /* 3 */ ) /* 4 */ ; /* 5 */   "
+  @click="   $emit(   'click'   )   "
+  @click="   $emit(   'click'   )  ;"
+  @click="   $emit(   'click'   )  ;if(something){for(let i=j;i<100;i++){}}else{}"
 ></div>

From fdfd53321fe656bb493130e8893285b5d90d2c40 Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Tue, 16 Oct 2018 16:03:05 +0800
Subject: [PATCH 046/177] feat: support jsStatement in v-on (@)

---
 src/language-html/printer-htmlparser2.js      | 19 ++++++++++++++-----
 .../__snapshots__/jsfmt.spec.js.snap          | 16 +++++++++++-----
 .../__snapshots__/jsfmt.spec.js.snap          |  2 +-
 .../__snapshots__/jsfmt.spec.js.snap          | 12 ++++++------
 4 files changed, 32 insertions(+), 17 deletions(-)

diff --git a/src/language-html/printer-htmlparser2.js b/src/language-html/printer-htmlparser2.js
index 9400e163ce4e..16c0fa39a93e 100644
--- a/src/language-html/printer-htmlparser2.js
+++ b/src/language-html/printer-htmlparser2.js
@@ -698,11 +698,6 @@ function getInterpolationTextDataParts(node, textToDoc) {
 }
 
 function printEmbeddedAttributeValue(node, textToDoc) {
-  // avoid unnecessary parsing
-  if (!node.value || /^\w+$/.test(node.value)) {
-    return null;
-  }
-
   /**
    *     @click="jsStatement"
    *     v-on:click="jsStatement"
@@ -754,6 +749,20 @@ function printEmbeddedAttributeValue(node, textToDoc) {
       return printVForValue(value, textToDoc);
   }
 
+  if (isKeyMatched(vueStatementBindingPatterns)) {
+    return group(
+      concat([
+        indent(
+          concat([
+            softline,
+            stripTrailingHardline(textToDoc(value, { parser: "babylon" }))
+          ])
+        ),
+        softline
+      ])
+    );
+  }
+
   return textToDoc(value, { parser: "__js_expression" });
 }
 
diff --git a/tests/html_attributes/__snapshots__/jsfmt.spec.js.snap b/tests/html_attributes/__snapshots__/jsfmt.spec.js.snap
index 05a415fb0187..91be080775f3 100644
--- a/tests/html_attributes/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_attributes/__snapshots__/jsfmt.spec.js.snap
@@ -306,11 +306,17 @@ exports[`vue.html - html-verify 1`] = `
   v-for="n in items.map(x => {
     return x;
   })"
-  @click="  /* hello */   "
-  @click="   /* 1 */ $emit( /* 2 */ 'click' /* 3 */ ) /* 4 */ ; /* 5 */   "
-  @click="$emit('click')"
-  @click="   $emit(   'click'   )  ;"
-  @click="   $emit(   'click'   )  ;if(something){for(let i=j;i<100;i++){}}else{}"
+  @click="/* hello */"
+  @click="/* 1 */ $emit(/* 2 */ 'click' /* 3 */) /* 4 */; /* 5 */"
+  @click="$emit('click');"
+  @click="$emit('click');"
+  @click="
+    $emit('click');
+    if (something) {
+      for (let i = j; i < 100; i++) {}
+    } else {
+    }
+  "
 ></div>
 
 `;
diff --git a/tests/multiparser_vue/__snapshots__/jsfmt.spec.js.snap b/tests/multiparser_vue/__snapshots__/jsfmt.spec.js.snap
index 799470d5f3e8..a1528eb77c62 100644
--- a/tests/multiparser_vue/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/multiparser_vue/__snapshots__/jsfmt.spec.js.snap
@@ -72,7 +72,7 @@ exports[`template-bind.vue - vue-verify 1`] = `
   <div v-bind:id="'&quot;' + id"></div>
   <div v-bind:id="rawId | formatId"></div>
   <div v-bind:id="ok ? 'YES' : 'NO'"></div>
-  <button @click="foo(arg, 'string')"></button>
+  <button @click="foo(arg, 'string');"></button>
 </template>
 
 `;
diff --git a/tests/vue_examples/__snapshots__/jsfmt.spec.js.snap b/tests/vue_examples/__snapshots__/jsfmt.spec.js.snap
index 8a312e2e3c59..6e26ff0d8beb 100644
--- a/tests/vue_examples/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/vue_examples/__snapshots__/jsfmt.spec.js.snap
@@ -142,9 +142,9 @@ export default {
     }"
     :index="index"
     :data-issue-id="issue.id"
-    @mousedown="mouseDown"
-    @mousemove="mouseMove"
-    @mouseup="showIssue($event)"
+    @mousedown="mouseDown;"
+    @mousemove="mouseMove;"
+    @mouseup="showIssue($event);"
   >
     <issue-card-inner
       :list="list"
@@ -300,9 +300,9 @@ export default {
     }"
     :index="index"
     :data-issue-id="issue.id"
-    @mousedown="mouseDown"
-    @mousemove="mouseMove"
-    @mouseup="showIssue($event)"
+    @mousedown="mouseDown;"
+    @mousemove="mouseMove;"
+    @mouseup="showIssue($event);"
   >
     <issue-card-inner
       :list="list"

From 43977cb80b6f873d8995592a041d97358f700845 Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Tue, 16 Oct 2018 17:00:26 +0800
Subject: [PATCH 047/177] feat: only trigger framework-specific formatting in
 `parser:vue|angular`

---
 src/common/internal-plugins.js                |   4 +
 src/language-html/index.js                    |  11 +
 src/language-html/parser-html.js              |   1 +
 src/language-html/printer-htmlparser2.js      | 132 ++++++------
 src/language-js/embed.js                      |  12 +-
 src/main/core-options.js                      |   3 +-
 .../__snapshots__/jsfmt.spec.js.snap          |  33 +++
 .../attributes.component.html}                |   2 +-
 tests/html_angular/jsfmt.spec.js              |   1 +
 .../__snapshots__/jsfmt.spec.js.snap          |  84 --------
 .../__snapshots__/jsfmt.spec.js.snap          |  24 +--
 tests/html_interpolation/example.html         |   2 +-
 .../__snapshots__/jsfmt.spec.js.snap          | 204 ++++++++++++++++++
 .../vue.html => html_vue/attributes.vue}      |   0
 .../{vue_examples => html_vue}/board_card.vue |   0
 tests/html_vue/interpolations.vue             |  26 +++
 .../{vue_examples => html_vue}/jsfmt.spec.js  |   0
 .../{vue_examples => html_vue}/script_src.vue |   0
 .../self_closing.vue                          |   0
 .../self_closing_style.vue                    |   0
 tests/{vue_examples => html_vue}/test.vue     |   0
 .../__snapshots__/early-exit.js.snap          |   7 +-
 .../__snapshots__/help-options.js.snap        |   3 +-
 .../__tests__/__snapshots__/schema.js.snap    |   6 +
 .../__snapshots__/support-info.js.snap        |  42 +++-
 website/static/worker.js                      |   5 +
 26 files changed, 423 insertions(+), 179 deletions(-)
 create mode 100644 tests/html_angular/__snapshots__/jsfmt.spec.js.snap
 rename tests/{html_attributes/angular.html => html_angular/attributes.component.html} (98%)
 create mode 100644 tests/html_angular/jsfmt.spec.js
 rename tests/{vue_examples => html_vue}/__snapshots__/jsfmt.spec.js.snap (64%)
 rename tests/{html_attributes/vue.html => html_vue/attributes.vue} (100%)
 rename tests/{vue_examples => html_vue}/board_card.vue (100%)
 create mode 100644 tests/html_vue/interpolations.vue
 rename tests/{vue_examples => html_vue}/jsfmt.spec.js (100%)
 rename tests/{vue_examples => html_vue}/script_src.vue (100%)
 rename tests/{vue_examples => html_vue}/self_closing.vue (100%)
 rename tests/{vue_examples => html_vue}/self_closing_style.vue (100%)
 rename tests/{vue_examples => html_vue}/test.vue (100%)

diff --git a/src/common/internal-plugins.js b/src/common/internal-plugins.js
index 624acc4ee97c..8d8376f4fcae 100644
--- a/src/common/internal-plugins.js
+++ b/src/common/internal-plugins.js
@@ -121,6 +121,10 @@ module.exports = [
       // Vue
       get vue() {
         return eval("require")("../language-html/parser-html").parsers.vue;
+      },
+      // Angular
+      get angular() {
+        return eval("require")("../language-html/parser-html").parsers.angular;
       }
     }
   },
diff --git a/src/language-html/index.js b/src/language-html/index.js
index a569c1297e01..6f3e397f965d 100644
--- a/src/language-html/index.js
+++ b/src/language-html/index.js
@@ -5,6 +5,17 @@ const createLanguage = require("../utils/create-language");
 const options = require("./options");
 
 const languages = [
+  createLanguage(require("linguist-languages/data/html"), {
+    override: {
+      name: "Angular",
+      since: "1.15.0",
+      parsers: ["angular"],
+      vscodeLanguageIds: ["html"],
+
+      extensions: [".component.html"],
+      filenames: []
+    }
+  }),
   createLanguage(require("linguist-languages/data/html"), {
     override: {
       since: "1.15.0",
diff --git a/src/language-html/parser-html.js b/src/language-html/parser-html.js
index 9fc6e599af85..6b701fc12b33 100644
--- a/src/language-html/parser-html.js
+++ b/src/language-html/parser-html.js
@@ -236,6 +236,7 @@ function createParser({ recognizeSelfClosing }) {
 module.exports = {
   parsers: {
     html: createParser({ recognizeSelfClosing: false }),
+    angular: createParser({ recognizeSelfClosing: false }),
     vue: createParser({ recognizeSelfClosing: true })
   }
 };
diff --git a/src/language-html/printer-htmlparser2.js b/src/language-html/printer-htmlparser2.js
index 16c0fa39a93e..24f3b93f13a5 100644
--- a/src/language-html/printer-htmlparser2.js
+++ b/src/language-html/printer-htmlparser2.js
@@ -74,7 +74,7 @@ function fill(parts) {
   return builders.fill(newParts);
 }
 
-function embed(path, print, textToDoc /*, options */) {
+function embed(path, print, textToDoc, options) {
   const node = path.getValue();
   switch (node.type) {
     case "text": {
@@ -94,7 +94,7 @@ function embed(path, print, textToDoc /*, options */) {
             ])
           ]);
         }
-      } else {
+      } else if (options.parser !== "html") {
         const interpolationTextParts = getInterpolationTextDataParts(
           node,
           textToDoc
@@ -116,7 +116,8 @@ function embed(path, print, textToDoc /*, options */) {
         node,
         (code, opts) =>
           // prefer single quote to avoid unnecessary escape
-          textToDoc(code, Object.assign({ singleQuote: true }, opts))
+          textToDoc(code, Object.assign({ singleQuote: true }, opts)),
+        options
       );
       if (embeddedAttributeValueDoc) {
         return concat([
@@ -697,73 +698,84 @@ function getInterpolationTextDataParts(node, textToDoc) {
   return parts;
 }
 
-function printEmbeddedAttributeValue(node, textToDoc) {
-  /**
-   *     @click="jsStatement"
-   *     v-on:click="jsStatement"
-   */
-  const vueStatementBindingPatterns = ["^@", "^v-on:"];
-  /**
-   *     :class="jsExpression"
-   *     v-bind:id="jsExpression"
-   *     v-if="jsExpression"
-   */
-  const vueExpressionBindingPatterns = ["^:", "^v-"];
-  const vueBindingPatterns = [].concat(
-    vueStatementBindingPatterns,
-    vueExpressionBindingPatterns
-  );
-
-  /**
-   *     *ngFor="angularDirective"
-   */
-  const ngDirectiveBindingPatterns = ["^\\*ng"];
-  /**
-   *     (click)="angularStatement"
-   */
-  const ngStatementBindingPatterns = ["^\\(.+\\)$"];
-  /**
-   *     [target]="angularExpression"
-   *     [(target)]="angularExpression"
-   */
-  const ngExpressionBindingPatterns = ["^\\[.+\\]$"];
-  const ngBindingPatterns = [].concat(
-    ngDirectiveBindingPatterns,
-    ngStatementBindingPatterns,
-    ngExpressionBindingPatterns
-  );
-
+function printEmbeddedAttributeValue(node, textToDoc, options) {
   const isKeyMatched = patterns =>
     new RegExp(patterns.join("|")).test(node.key);
+  const getValue = () =>
+    node.value.replace(/&quot;/g, '"').replace(/&apos;/g, "'");
+
+  if (options.parser === "vue") {
+    /**
+     *     @click="jsStatement"
+     *     v-on:click="jsStatement"
+     */
+    const vueStatementBindingPatterns = ["^@", "^v-on:"];
+    /**
+     *     :class="jsExpression"
+     *     v-bind:id="jsExpression"
+     *     v-if="jsExpression"
+     */
+    const vueExpressionBindingPatterns = ["^:", "^v-"];
+    const vueBindingPatterns = [].concat(
+      vueStatementBindingPatterns,
+      vueExpressionBindingPatterns
+    );
+    if (isKeyMatched(vueBindingPatterns)) {
+      const value = getValue();
 
-  if (!isKeyMatched([].concat(vueBindingPatterns, ngBindingPatterns))) {
-    return null;
-  }
+      if (node.key === "v-for") {
+        return printVForValue(value, textToDoc);
+      }
 
-  const value = node.value.replace(/&quot;/g, '"').replace(/&apos;/g, "'");
+      if (isKeyMatched(vueStatementBindingPatterns)) {
+        return group(
+          concat([
+            indent(
+              concat([
+                softline,
+                stripTrailingHardline(textToDoc(value, { parser: "babylon" }))
+              ])
+            ),
+            softline
+          ])
+        );
+      }
 
-  switch (node.key) {
-    case "*ngFor":
-      return printNgForValue(value, textToDoc);
-    case "v-for":
-      return printVForValue(value, textToDoc);
+      return textToDoc(value, { parser: "__js_expression" });
+    }
   }
 
-  if (isKeyMatched(vueStatementBindingPatterns)) {
-    return group(
-      concat([
-        indent(
-          concat([
-            softline,
-            stripTrailingHardline(textToDoc(value, { parser: "babylon" }))
-          ])
-        ),
-        softline
-      ])
+  if (options.parser === "angular") {
+    /**
+     *     *ngFor="angularDirective"
+     */
+    const ngDirectiveBindingPatterns = ["^\\*ng"];
+    /**
+     *     (click)="angularStatement"
+     */
+    const ngStatementBindingPatterns = ["^\\(.+\\)$"];
+    /**
+     *     [target]="angularExpression"
+     *     [(target)]="angularExpression"
+     */
+    const ngExpressionBindingPatterns = ["^\\[.+\\]$"];
+    const ngBindingPatterns = [].concat(
+      ngDirectiveBindingPatterns,
+      ngStatementBindingPatterns,
+      ngExpressionBindingPatterns
     );
+    if (isKeyMatched(ngBindingPatterns)) {
+      const value = getValue();
+
+      if (node.key === "*ngFor") {
+        return printNgForValue(value, textToDoc);
+      }
+
+      return textToDoc(value, { parser: "__js_expression" });
+    }
   }
 
-  return textToDoc(value, { parser: "__js_expression" });
+  return null;
 }
 
 module.exports = {
diff --git a/src/language-js/embed.js b/src/language-js/embed.js
index 2895f308b413..dd7f94db35be 100644
--- a/src/language-js/embed.js
+++ b/src/language-js/embed.js
@@ -133,8 +133,12 @@ function embed(path, print, textToDoc /*, options */) {
         ]);
       }
 
-      if (isHtml(path) || isAngularComponentTemplate(path)) {
-        return printHtmlTemplateLiteral(path, print, textToDoc);
+      if (isHtml(path)) {
+        return printHtmlTemplateLiteral(path, print, textToDoc, "html");
+      }
+
+      if (isAngularComponentTemplate(path)) {
+        return printHtmlTemplateLiteral(path, print, textToDoc, "angular");
       }
 
       break;
@@ -558,7 +562,7 @@ function isHtml(path) {
   );
 }
 
-function printHtmlTemplateLiteral(path, print, textToDoc) {
+function printHtmlTemplateLiteral(path, print, textToDoc, parser) {
   const node = path.getValue();
 
   const placeholderRegex = /prettierhtmlplaceholder(\d+)redlohecalplmthreitterp/g;
@@ -578,7 +582,7 @@ function printHtmlTemplateLiteral(path, print, textToDoc) {
   const expressionDocs = path.map(print, "expressions");
 
   const contentDoc = mapDoc(
-    stripTrailingHardline(textToDoc(text, { parser: "html" })),
+    stripTrailingHardline(textToDoc(text, { parser })),
     doc => {
       const hasPlaceholder =
         typeof doc === "string" && placeholderRegex.test(doc);
diff --git a/src/main/core-options.js b/src/main/core-options.js
index 4049f4aa8fae..ab88c571a23c 100644
--- a/src/main/core-options.js
+++ b/src/main/core-options.js
@@ -122,7 +122,8 @@ const options = {
         since: null,
         description: "Handlebars"
       },
-      { value: "html", since: "1.15.0", description: "HTML" }
+      { value: "html", since: "1.15.0", description: "HTML" },
+      { value: "angular", since: "1.15.0", description: "Angular" }
     ]
   },
   plugins: {
diff --git a/tests/html_angular/__snapshots__/jsfmt.spec.js.snap b/tests/html_angular/__snapshots__/jsfmt.spec.js.snap
new file mode 100644
index 000000000000..a065c41aaa2d
--- /dev/null
+++ b/tests/html_angular/__snapshots__/jsfmt.spec.js.snap
@@ -0,0 +1,33 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`attributes.component.html - angular-verify 1`] = `
+<div
+    [target]="  'hello'.repeat(    2   )  "
+    (target)="  'hello'.repeat(    2   )  "
+    [(target)]="  'hello'.repeat(    2   )  "
+    *ngIf=" something?true:false    "
+    *ngFor="  let     hero     of     heroes"
+    *ngFor="  let    hero     of[1,2,3,666666666666666666666666666666666666]; let i=index"
+    *ngFor="     let hero     of     heroes;     trackBy    :    trackByHeroes     "
+    *ngFor=" let     item   of   items   ;    index    as   i  ; trackBy  :     trackByFn"
+    *ngFor="  let    hero     of heroes; let i  =  index"
+    *ngFor="  let    hero     of heroes; value     myValue"
+></div>
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+<div
+  [target]="'hello'.repeat(2)"
+  (target)="'hello'.repeat(2)"
+  [(target)]="'hello'.repeat(2)"
+  *ngIf="something ? true : false"
+  *ngFor="let hero of heroes"
+  *ngFor="
+    let hero of [1, 2, 3, 666666666666666666666666666666666666];
+    let i=index
+  "
+  *ngFor="let hero of heroes; trackBy: trackByHeroes"
+  *ngFor="let item of items; index as i; trackBy: trackByFn"
+  *ngFor="let hero of heroes; let i=index"
+  *ngFor="let hero of heroes; value: myValue"
+></div>
+
+`;
diff --git a/tests/html_attributes/angular.html b/tests/html_angular/attributes.component.html
similarity index 98%
rename from tests/html_attributes/angular.html
rename to tests/html_angular/attributes.component.html
index 879e0415a607..4b90e8dc7fb9 100644
--- a/tests/html_attributes/angular.html
+++ b/tests/html_angular/attributes.component.html
@@ -9,4 +9,4 @@
     *ngFor=" let     item   of   items   ;    index    as   i  ; trackBy  :     trackByFn"
     *ngFor="  let    hero     of heroes; let i  =  index"
     *ngFor="  let    hero     of heroes; value     myValue"
-></div>
\ No newline at end of file
+></div>
diff --git a/tests/html_angular/jsfmt.spec.js b/tests/html_angular/jsfmt.spec.js
new file mode 100644
index 000000000000..b802ad8670c5
--- /dev/null
+++ b/tests/html_angular/jsfmt.spec.js
@@ -0,0 +1 @@
+run_spec(__dirname, ["angular"]);
diff --git a/tests/html_attributes/__snapshots__/jsfmt.spec.js.snap b/tests/html_attributes/__snapshots__/jsfmt.spec.js.snap
index 91be080775f3..dbdf774ea5ae 100644
--- a/tests/html_attributes/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_attributes/__snapshots__/jsfmt.spec.js.snap
@@ -1,36 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`angular.html - html-verify 1`] = `
-<div
-    [target]="  'hello'.repeat(    2   )  "
-    (target)="  'hello'.repeat(    2   )  "
-    [(target)]="  'hello'.repeat(    2   )  "
-    *ngIf=" something?true:false    "
-    *ngFor="  let     hero     of     heroes"
-    *ngFor="  let    hero     of[1,2,3,666666666666666666666666666666666666]; let i=index"
-    *ngFor="     let hero     of     heroes;     trackBy    :    trackByHeroes     "
-    *ngFor=" let     item   of   items   ;    index    as   i  ; trackBy  :     trackByFn"
-    *ngFor="  let    hero     of heroes; let i  =  index"
-    *ngFor="  let    hero     of heroes; value     myValue"
-></div>~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-<div
-  [target]="'hello'.repeat(2)"
-  (target)="'hello'.repeat(2)"
-  [(target)]="'hello'.repeat(2)"
-  *ngIf="something ? true : false"
-  *ngFor="let hero of heroes"
-  *ngFor="
-    let hero of [1, 2, 3, 666666666666666666666666666666666666];
-    let i=index
-  "
-  *ngFor="let hero of heroes; trackBy: trackByHeroes"
-  *ngFor="let item of items; index as i; trackBy: trackByFn"
-  *ngFor="let hero of heroes; let i=index"
-  *ngFor="let hero of heroes; value: myValue"
-></div>
-
-`;
-
 exports[`attributes.html - html-verify 1`] = `
 <input name=address maxlength=200>
 <input name='address' maxlength='200'>
@@ -268,59 +237,6 @@ exports[`single-quotes.html - html-verify 1`] = `
 
 `;
 
-exports[`vue.html - html-verify 1`] = `
-<div
-  v-for="  item  in  items "
-  v-for="  item  of  items "
-  v-for="(    item    , index)    in    items"
-  v-for="value    in     object"
-  v-for="(value,    key)    in    object"
-  v-for="(value,    key)    of    object"
-  v-for="(value  ,   key,   index)    in   object"
-  v-for="   n    in   evenNumbers"
-  v-for=" n in even   ( numbers) "
-  v-for=" n    in    10"
-  v-for=" { a }    in    [0].map(()=>({a:1}))   "
-  v-for=" ({ a }, [c  ])    in    [0].map(()=>1)   "
-  v-for=" n in items.map(x => { return x }) "
-  @click="  /* hello */   "
-  @click="   /* 1 */ $emit( /* 2 */ 'click' /* 3 */ ) /* 4 */ ; /* 5 */   "
-  @click="   $emit(   'click'   )   "
-  @click="   $emit(   'click'   )  ;"
-  @click="   $emit(   'click'   )  ;if(something){for(let i=j;i<100;i++){}}else{}"
-></div>
-~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-<div
-  v-for="item in items"
-  v-for="item of items"
-  v-for="(item, index) in items"
-  v-for="value in object"
-  v-for="(value, key) in object"
-  v-for="(value, key) of object"
-  v-for="(value, key, index) in object"
-  v-for="n in evenNumbers"
-  v-for="n in even(numbers)"
-  v-for="n in 10"
-  v-for="{ a } in [0].map(() => ({ a: 1 }))"
-  v-for="({ a }, [c]) in [0].map(() => 1)"
-  v-for="n in items.map(x => {
-    return x;
-  })"
-  @click="/* hello */"
-  @click="/* 1 */ $emit(/* 2 */ 'click' /* 3 */) /* 4 */; /* 5 */"
-  @click="$emit('click');"
-  @click="$emit('click');"
-  @click="
-    $emit('click');
-    if (something) {
-      for (let i = j; i < 100; i++) {}
-    } else {
-    }
-  "
-></div>
-
-`;
-
 exports[`without-quotes.html - html-verify 1`] = `
 <p title=Title>String</p>
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
diff --git a/tests/html_interpolation/__snapshots__/jsfmt.spec.js.snap b/tests/html_interpolation/__snapshots__/jsfmt.spec.js.snap
index a17a7f9c6a47..f7d58efa86df 100644
--- a/tests/html_interpolation/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_interpolation/__snapshots__/jsfmt.spec.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`example.html - html-verify 1`] = `
-<div>Fuga magnam facilis. Voluptatem quaerat porro.{{
+<!--interpolations in html should be treated as normal text--><div>Fuga magnam facilis. Voluptatem quaerat porro.{{
 
 
 x => {
@@ -28,23 +28,13 @@ x => {
 
 }} reprehenderit voluptates minus {{console.log(  short_interpolation )}} nemo.</div>
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+<!-- interpolations in html should be treated as normal text -->
 <div>
-  Fuga magnam facilis. Voluptatem quaerat porro.{{
-    x => {
-      const hello = "world";
-      return hello;
-    }
-  }} Magni consectetur in et molestias neque esse voluptatibus voluptas.
-  {{some_variable}} Eum quia nihil nulla esse. Dolorem asperiores vero est error
-  {{
-
-                    preserve
-
-                    invalid
-                    
-                    interpolation
-
-  }} reprehenderit voluptates minus {{console.log(short_interpolation)}} nemo.
+  Fuga magnam facilis. Voluptatem quaerat porro.{{ x => { const hello = 'world'
+  return hello; } }} Magni consectetur in et molestias neque esse voluptatibus
+  voluptas. {{ some_variable }} Eum quia nihil nulla esse. Dolorem asperiores
+  vero est error {{ preserve invalid interpolation }} reprehenderit voluptates
+  minus {{console.log( short_interpolation )}} nemo.
 </div>
 
 `;
diff --git a/tests/html_interpolation/example.html b/tests/html_interpolation/example.html
index a32c4712e35f..89c1110e918d 100644
--- a/tests/html_interpolation/example.html
+++ b/tests/html_interpolation/example.html
@@ -1,4 +1,4 @@
-<div>Fuga magnam facilis. Voluptatem quaerat porro.{{
+<!--interpolations in html should be treated as normal text--><div>Fuga magnam facilis. Voluptatem quaerat porro.{{
 
 
 x => {
diff --git a/tests/vue_examples/__snapshots__/jsfmt.spec.js.snap b/tests/html_vue/__snapshots__/jsfmt.spec.js.snap
similarity index 64%
rename from tests/vue_examples/__snapshots__/jsfmt.spec.js.snap
rename to tests/html_vue/__snapshots__/jsfmt.spec.js.snap
index 6e26ff0d8beb..c72a54ce59d3 100644
--- a/tests/vue_examples/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_vue/__snapshots__/jsfmt.spec.js.snap
@@ -1,5 +1,111 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`attributes.vue - vue-verify 1`] = `
+<div
+  v-for="  item  in  items "
+  v-for="  item  of  items "
+  v-for="(    item    , index)    in    items"
+  v-for="value    in     object"
+  v-for="(value,    key)    in    object"
+  v-for="(value,    key)    of    object"
+  v-for="(value  ,   key,   index)    in   object"
+  v-for="   n    in   evenNumbers"
+  v-for=" n in even   ( numbers) "
+  v-for=" n    in    10"
+  v-for=" { a }    in    [0].map(()=>({a:1}))   "
+  v-for=" ({ a }, [c  ])    in    [0].map(()=>1)   "
+  v-for=" n in items.map(x => { return x }) "
+  @click="  /* hello */   "
+  @click="   /* 1 */ $emit( /* 2 */ 'click' /* 3 */ ) /* 4 */ ; /* 5 */   "
+  @click="   $emit(   'click'   )   "
+  @click="   $emit(   'click'   )  ;"
+  @click="   $emit(   'click'   )  ;if(something){for(let i=j;i<100;i++){}}else{}"
+></div>
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+<div
+  v-for="item in items"
+  v-for="item of items"
+  v-for="(item, index) in items"
+  v-for="value in object"
+  v-for="(value, key) in object"
+  v-for="(value, key) of object"
+  v-for="(value, key, index) in object"
+  v-for="n in evenNumbers"
+  v-for="n in even(numbers)"
+  v-for="n in 10"
+  v-for="{ a } in [0].map(() => ({ a: 1 }))"
+  v-for="({ a }, [c]) in [0].map(() => 1)"
+  v-for="n in items.map(x => {
+    return x;
+  })"
+  @click="/* hello */"
+  @click="/* 1 */ $emit(/* 2 */ 'click' /* 3 */) /* 4 */; /* 5 */"
+  @click="$emit('click');"
+  @click="$emit('click');"
+  @click="
+    $emit('click');
+    if (something) {
+      for (let i = j; i < 100; i++) {}
+    } else {
+    }
+  "
+></div>
+
+`;
+
+exports[`attributes.vue - vue-verify 2`] = `
+<div
+  v-for="  item  in  items "
+  v-for="  item  of  items "
+  v-for="(    item    , index)    in    items"
+  v-for="value    in     object"
+  v-for="(value,    key)    in    object"
+  v-for="(value,    key)    of    object"
+  v-for="(value  ,   key,   index)    in   object"
+  v-for="   n    in   evenNumbers"
+  v-for=" n in even   ( numbers) "
+  v-for=" n    in    10"
+  v-for=" { a }    in    [0].map(()=>({a:1}))   "
+  v-for=" ({ a }, [c  ])    in    [0].map(()=>1)   "
+  v-for=" n in items.map(x => { return x }) "
+  @click="  /* hello */   "
+  @click="   /* 1 */ $emit( /* 2 */ 'click' /* 3 */ ) /* 4 */ ; /* 5 */   "
+  @click="   $emit(   'click'   )   "
+  @click="   $emit(   'click'   )  ;"
+  @click="   $emit(   'click'   )  ;if(something){for(let i=j;i<100;i++){}}else{}"
+></div>
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+<div
+  v-for="item in items"
+  v-for="item of items"
+  v-for="(item, index) in items"
+  v-for="value in object"
+  v-for="(value, key) in object"
+  v-for="(value, key) of object"
+  v-for="(value, key, index) in object"
+  v-for="n in evenNumbers"
+  v-for="n in even(numbers)"
+  v-for="n in 10"
+  v-for="{ a } in [0].map(() => ({ a: 1 }))"
+  v-for="({ a }, [c]) in [0].map(() => 1)"
+  v-for="n in items.map(x => {
+    return x;
+  })"
+  @click="/* hello */"
+  @click="/* 1 */ $emit(/* 2 */ 'click' /* 3 */) /* 4 */; /* 5 */"
+  @click="$emit('click');"
+  @click="$emit('click');"
+  @click="
+    $emit('click');
+    if (something) {
+      for (let i = j; i < 100; i++) {}
+    } else {
+    }
+  "
+></div>
+
+`;
+
 exports[`board_card.vue - vue-verify 1`] = `
 <script>
 import './issue_card_inner';
@@ -316,6 +422,104 @@ export default {
 
 `;
 
+exports[`interpolations.vue - vue-verify 1`] = `
+<div>Fuga magnam facilis. Voluptatem quaerat porro.{{
+
+
+x => {
+    const hello = 'world'
+    return hello;
+}
+
+
+
+}} Magni consectetur in et molestias neque esse voluptatibus voluptas. {{  
+    
+    
+    some_variable 
+
+
+
+}} Eum quia nihil nulla esse. Dolorem asperiores vero est error {{
+
+                    preserve
+
+                    invalid
+                    
+                    interpolation
+
+}} reprehenderit voluptates minus {{console.log(  short_interpolation )}} nemo.</div>
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+<div>
+  Fuga magnam facilis. Voluptatem quaerat porro.{{
+    x => {
+      const hello = "world";
+      return hello;
+    }
+  }} Magni consectetur in et molestias neque esse voluptatibus voluptas.
+  {{some_variable}} Eum quia nihil nulla esse. Dolorem asperiores vero est error
+  {{
+
+                    preserve
+
+                    invalid
+                    
+                    interpolation
+
+  }} reprehenderit voluptates minus {{console.log(short_interpolation)}} nemo.
+</div>
+
+`;
+
+exports[`interpolations.vue - vue-verify 2`] = `
+<div>Fuga magnam facilis. Voluptatem quaerat porro.{{
+
+
+x => {
+    const hello = 'world'
+    return hello;
+}
+
+
+
+}} Magni consectetur in et molestias neque esse voluptatibus voluptas. {{  
+    
+    
+    some_variable 
+
+
+
+}} Eum quia nihil nulla esse. Dolorem asperiores vero est error {{
+
+                    preserve
+
+                    invalid
+                    
+                    interpolation
+
+}} reprehenderit voluptates minus {{console.log(  short_interpolation )}} nemo.</div>
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+<div>
+  Fuga magnam facilis. Voluptatem quaerat porro.{{
+    x => {
+      const hello = "world";
+      return hello;
+    }
+  }} Magni consectetur in et molestias neque esse voluptatibus voluptas.
+  {{some_variable}} Eum quia nihil nulla esse. Dolorem asperiores vero est error
+  {{
+
+                    preserve
+
+                    invalid
+                    
+                    interpolation
+
+  }} reprehenderit voluptates minus {{console.log(short_interpolation)}} nemo.
+</div>
+
+`;
+
 exports[`script_src.vue - vue-verify 1`] = `
 <script src="https://www.gstatic.com/firebasejs/4.10.1/firebase.js"></script>
 <script src="https://www.gstatic.com/firebasejs/4.10.1/firebase-firestore.js"></script>
diff --git a/tests/html_attributes/vue.html b/tests/html_vue/attributes.vue
similarity index 100%
rename from tests/html_attributes/vue.html
rename to tests/html_vue/attributes.vue
diff --git a/tests/vue_examples/board_card.vue b/tests/html_vue/board_card.vue
similarity index 100%
rename from tests/vue_examples/board_card.vue
rename to tests/html_vue/board_card.vue
diff --git a/tests/html_vue/interpolations.vue b/tests/html_vue/interpolations.vue
new file mode 100644
index 000000000000..a32c4712e35f
--- /dev/null
+++ b/tests/html_vue/interpolations.vue
@@ -0,0 +1,26 @@
+<div>Fuga magnam facilis. Voluptatem quaerat porro.{{
+
+
+x => {
+    const hello = 'world'
+    return hello;
+}
+
+
+
+}} Magni consectetur in et molestias neque esse voluptatibus voluptas. {{  
+    
+    
+    some_variable 
+
+
+
+}} Eum quia nihil nulla esse. Dolorem asperiores vero est error {{
+
+                    preserve
+
+                    invalid
+                    
+                    interpolation
+
+}} reprehenderit voluptates minus {{console.log(  short_interpolation )}} nemo.</div>
diff --git a/tests/vue_examples/jsfmt.spec.js b/tests/html_vue/jsfmt.spec.js
similarity index 100%
rename from tests/vue_examples/jsfmt.spec.js
rename to tests/html_vue/jsfmt.spec.js
diff --git a/tests/vue_examples/script_src.vue b/tests/html_vue/script_src.vue
similarity index 100%
rename from tests/vue_examples/script_src.vue
rename to tests/html_vue/script_src.vue
diff --git a/tests/vue_examples/self_closing.vue b/tests/html_vue/self_closing.vue
similarity index 100%
rename from tests/vue_examples/self_closing.vue
rename to tests/html_vue/self_closing.vue
diff --git a/tests/vue_examples/self_closing_style.vue b/tests/html_vue/self_closing_style.vue
similarity index 100%
rename from tests/vue_examples/self_closing_style.vue
rename to tests/html_vue/self_closing_style.vue
diff --git a/tests/vue_examples/test.vue b/tests/html_vue/test.vue
similarity index 100%
rename from tests/vue_examples/test.vue
rename to tests/html_vue/test.vue
diff --git a/tests_integration/__tests__/__snapshots__/early-exit.js.snap b/tests_integration/__tests__/__snapshots__/early-exit.js.snap
index 5ec8cf2df4c0..4e2e3af446ec 100644
--- a/tests_integration/__tests__/__snapshots__/early-exit.js.snap
+++ b/tests_integration/__tests__/__snapshots__/early-exit.js.snap
@@ -65,7 +65,7 @@ Format options:
                            Defaults to css.
   --jsx-bracket-same-line  Put > on the last line instead of at a new line.
                            Defaults to false.
-  --parser <flow|babylon|typescript|css|less|scss|json|json5|json-stringify|graphql|markdown|mdx|vue|yaml|html>
+  --parser <flow|babylon|typescript|css|less|scss|json|json5|json-stringify|graphql|markdown|mdx|vue|yaml|html|angular>
                            Which parser to use.
   --print-width <int>      The line length where Prettier will try wrap.
                            Defaults to 80.
@@ -155,7 +155,7 @@ exports[`show warning with --help not-found (typo) (stderr) 1`] = `
 `;
 
 exports[`show warning with --help not-found (typo) (stdout) 1`] = `
-"--parser <flow|babylon|typescript|css|less|scss|json|json5|json-stringify|graphql|markdown|mdx|vue|yaml|html>
+"--parser <flow|babylon|typescript|css|less|scss|json|json5|json-stringify|graphql|markdown|mdx|vue|yaml|html|angular>
 
   Which parser to use.
 
@@ -176,6 +176,7 @@ Valid options:
   vue              Vue
   yaml             YAML
   html             HTML
+  angular          Angular
 "
 `;
 
@@ -205,7 +206,7 @@ Format options:
                            Defaults to css.
   --jsx-bracket-same-line  Put > on the last line instead of at a new line.
                            Defaults to false.
-  --parser <flow|babylon|typescript|css|less|scss|json|json5|json-stringify|graphql|markdown|mdx|vue|yaml|html>
+  --parser <flow|babylon|typescript|css|less|scss|json|json5|json-stringify|graphql|markdown|mdx|vue|yaml|html|angular>
                            Which parser to use.
   --print-width <int>      The line length where Prettier will try wrap.
                            Defaults to 80.
diff --git a/tests_integration/__tests__/__snapshots__/help-options.js.snap b/tests_integration/__tests__/__snapshots__/help-options.js.snap
index bc23f915d804..8f7ac365d77c 100644
--- a/tests_integration/__tests__/__snapshots__/help-options.js.snap
+++ b/tests_integration/__tests__/__snapshots__/help-options.js.snap
@@ -286,7 +286,7 @@ exports[`show detailed usage with --help no-semi (write) 1`] = `Array []`;
 exports[`show detailed usage with --help parser (stderr) 1`] = `""`;
 
 exports[`show detailed usage with --help parser (stdout) 1`] = `
-"--parser <flow|babylon|typescript|css|less|scss|json|json5|json-stringify|graphql|markdown|mdx|vue|yaml|html>
+"--parser <flow|babylon|typescript|css|less|scss|json|json5|json-stringify|graphql|markdown|mdx|vue|yaml|html|angular>
 
   Which parser to use.
 
@@ -307,6 +307,7 @@ Valid options:
   vue              Vue
   yaml             YAML
   html             HTML
+  angular          Angular
 "
 `;
 
diff --git a/tests_integration/__tests__/__snapshots__/schema.js.snap b/tests_integration/__tests__/__snapshots__/schema.js.snap
index aaac6b3a9875..33b0b7aa8124 100644
--- a/tests_integration/__tests__/__snapshots__/schema.js.snap
+++ b/tests_integration/__tests__/__snapshots__/schema.js.snap
@@ -176,6 +176,12 @@ This option cannot be used with --range-start and --range-end.",
                 "html",
               ],
             },
+            Object {
+              "description": "Angular",
+              "enum": Array [
+                "angular",
+              ],
+            },
           ],
         },
         "pluginSearchDirs": Object {
diff --git a/tests_integration/__tests__/__snapshots__/support-info.js.snap b/tests_integration/__tests__/__snapshots__/support-info.js.snap
index 6af0d120aa53..30c6bfc091b4 100644
--- a/tests_integration/__tests__/__snapshots__/support-info.js.snap
+++ b/tests_integration/__tests__/__snapshots__/support-info.js.snap
@@ -412,7 +412,17 @@ exports[`API getSupportInfo() with version 1.8.2 -> undefined 1`] = `
 - First value
 + Second value
 
-@@ -8,16 +8,25 @@
+@@ -1,23 +1,35 @@
+  Object {
+    \\"languages\\": Object {
++     \\"Angular\\": Array [
++       \\"angular\\",
++     ],
+      \\"CSS\\": Array [
+        \\"css\\",
+      ],
+      \\"Flow\\": Array [
+        \\"babylon\\",
         \\"flow\\",
       ],
       \\"GraphQL\\": Array [
@@ -438,7 +448,7 @@ exports[`API getSupportInfo() with version 1.8.2 -> undefined 1`] = `
         \\"flow\\",
       ],
       \\"JavaScript\\": Array [
-@@ -25,10 +34,13 @@
+@@ -25,10 +37,13 @@
         \\"flow\\",
       ],
       \\"Less\\": Array [
@@ -452,7 +462,7 @@ exports[`API getSupportInfo() with version 1.8.2 -> undefined 1`] = `
       ],
       \\"PostCSS\\": Array [
         \\"css\\",
-@@ -37,12 +49,26 @@
+@@ -37,12 +52,26 @@
         \\"scss\\",
       ],
       \\"TypeScript\\": Array [
@@ -479,7 +489,7 @@ exports[`API getSupportInfo() with version 1.8.2 -> undefined 1`] = `
         \\"type\\": \\"boolean\\",
       },
       \\"cursorOffset\\": Object {
-@@ -56,10 +82,19 @@
+@@ -56,10 +85,19 @@
       },
       \\"filepath\\": Object {
         \\"default\\": undefined,
@@ -499,7 +509,7 @@ exports[`API getSupportInfo() with version 1.8.2 -> undefined 1`] = `
         \\"type\\": \\"boolean\\",
       },
       \\"jsxBracketSameLine\\": Object {
-@@ -73,16 +108,30 @@
+@@ -73,16 +111,31 @@
           \\"typescript\\",
           \\"css\\",
           \\"less\\",
@@ -513,6 +523,7 @@ exports[`API getSupportInfo() with version 1.8.2 -> undefined 1`] = `
 +         \\"vue\\",
 +         \\"yaml\\",
 +         \\"html\\",
++         \\"angular\\",
         ],
 -       \\"default\\": \\"babylon\\",
 +       \\"default\\": undefined,
@@ -531,7 +542,7 @@ exports[`API getSupportInfo() with version 1.8.2 -> undefined 1`] = `
         \\"range\\": Object {
           \\"end\\": Infinity,
           \\"start\\": 0,
-@@ -90,14 +139,15 @@
+@@ -90,14 +143,15 @@
         },
         \\"type\\": \\"int\\",
       },
@@ -842,6 +853,22 @@ exports[`CLI --support-info (stdout) 1`] = `
       \\"since\\": \\"1.15.0\\",
       \\"vscodeLanguageIds\\": [\\"mdx\\"]
     },
+    {
+      \\"aceMode\\": \\"html\\",
+      \\"aliases\\": [\\"xhtml\\"],
+      \\"codemirrorMimeType\\": \\"text/html\\",
+      \\"codemirrorMode\\": \\"htmlmixed\\",
+      \\"color\\": \\"#e34c26\\",
+      \\"extensions\\": [\\".component.html\\"],
+      \\"filenames\\": [],
+      \\"linguistLanguageId\\": 146,
+      \\"name\\": \\"Angular\\",
+      \\"parsers\\": [\\"angular\\"],
+      \\"since\\": \\"1.15.0\\",
+      \\"tmScope\\": \\"text.html.basic\\",
+      \\"type\\": \\"markup\\",
+      \\"vscodeLanguageIds\\": [\\"html\\"]
+    },
     {
       \\"aceMode\\": \\"html\\",
       \\"aliases\\": [\\"xhtml\\"],
@@ -1017,7 +1044,8 @@ exports[`CLI --support-info (stdout) 1`] = `
         { \\"description\\": \\"MDX\\", \\"since\\": \\"1.15.0\\", \\"value\\": \\"mdx\\" },
         { \\"description\\": \\"Vue\\", \\"since\\": \\"1.10.0\\", \\"value\\": \\"vue\\" },
         { \\"description\\": \\"YAML\\", \\"since\\": \\"1.14.0\\", \\"value\\": \\"yaml\\" },
-        { \\"description\\": \\"HTML\\", \\"since\\": \\"1.15.0\\", \\"value\\": \\"html\\" }
+        { \\"description\\": \\"HTML\\", \\"since\\": \\"1.15.0\\", \\"value\\": \\"html\\" },
+        { \\"description\\": \\"Angular\\", \\"since\\": \\"1.15.0\\", \\"value\\": \\"angular\\" }
       ],
       \\"description\\": \\"Which parser to use.\\",
       \\"name\\": \\"parser\\",
diff --git a/website/static/worker.js b/website/static/worker.js
index 720a865bd75c..667a3c0a76e3 100644
--- a/website/static/worker.js
+++ b/website/static/worker.js
@@ -95,6 +95,11 @@ var parsers = {
   get vue() {
     importScriptOnce("lib/parser-html.js");
     return prettierPlugins.html.parsers.vue;
+  },
+  // Angular
+  get angular() {
+    importScriptOnce("lib/parser-html.js");
+    return prettierPlugins.html.parsers.angular;
   }
 };
 

From 74fd94cf5f37bb20f8827dece44b6cc915f248a2 Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Tue, 16 Oct 2018 17:10:27 +0800
Subject: [PATCH 048/177] refactor

---
 src/language-html/printer-htmlparser2.js | 51 +++++++++++-------------
 1 file changed, 23 insertions(+), 28 deletions(-)

diff --git a/src/language-html/printer-htmlparser2.js b/src/language-html/printer-htmlparser2.js
index 24f3b93f13a5..bcec37368a91 100644
--- a/src/language-html/printer-htmlparser2.js
+++ b/src/language-html/printer-htmlparser2.js
@@ -705,6 +705,10 @@ function printEmbeddedAttributeValue(node, textToDoc, options) {
     node.value.replace(/&quot;/g, '"').replace(/&apos;/g, "'");
 
   if (options.parser === "vue") {
+    if (node.key === "v-for") {
+      return printVForValue(getValue(), textToDoc);
+    }
+
     /**
      *     @click="jsStatement"
      *     v-on:click="jsStatement"
@@ -716,32 +720,25 @@ function printEmbeddedAttributeValue(node, textToDoc, options) {
      *     v-if="jsExpression"
      */
     const vueExpressionBindingPatterns = ["^:", "^v-"];
-    const vueBindingPatterns = [].concat(
-      vueStatementBindingPatterns,
-      vueExpressionBindingPatterns
-    );
-    if (isKeyMatched(vueBindingPatterns)) {
-      const value = getValue();
 
-      if (node.key === "v-for") {
-        return printVForValue(value, textToDoc);
-      }
-
-      if (isKeyMatched(vueStatementBindingPatterns)) {
-        return group(
-          concat([
-            indent(
-              concat([
-                softline,
-                stripTrailingHardline(textToDoc(value, { parser: "babylon" }))
-              ])
-            ),
-            softline
-          ])
-        );
-      }
+    if (isKeyMatched(vueStatementBindingPatterns)) {
+      return group(
+        concat([
+          indent(
+            concat([
+              softline,
+              stripTrailingHardline(
+                textToDoc(getValue(), { parser: "babylon" })
+              )
+            ])
+          ),
+          softline
+        ])
+      );
+    }
 
-      return textToDoc(value, { parser: "__js_expression" });
+    if (isKeyMatched(vueExpressionBindingPatterns)) {
+      return textToDoc(getValue(), { parser: "__js_expression" });
     }
   }
 
@@ -765,13 +762,11 @@ function printEmbeddedAttributeValue(node, textToDoc, options) {
       ngExpressionBindingPatterns
     );
     if (isKeyMatched(ngBindingPatterns)) {
-      const value = getValue();
-
       if (node.key === "*ngFor") {
-        return printNgForValue(value, textToDoc);
+        return printNgForValue(getValue(), textToDoc);
       }
 
-      return textToDoc(value, { parser: "__js_expression" });
+      return textToDoc(getValue(), { parser: "__js_expression" });
     }
   }
 

From 73c00c31c4a1e773734733ffa1df62037f76b75c Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Tue, 16 Oct 2018 17:13:46 +0800
Subject: [PATCH 049/177] test: add tests

---
 tests/html_vue/__snapshots__/jsfmt.spec.js.snap | 4 ++++
 tests/html_vue/attributes.vue                   | 1 +
 2 files changed, 5 insertions(+)

diff --git a/tests/html_vue/__snapshots__/jsfmt.spec.js.snap b/tests/html_vue/__snapshots__/jsfmt.spec.js.snap
index c72a54ce59d3..cd66a5e1493b 100644
--- a/tests/html_vue/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_vue/__snapshots__/jsfmt.spec.js.snap
@@ -20,6 +20,7 @@ exports[`attributes.vue - vue-verify 1`] = `
   @click="   $emit(   'click'   )   "
   @click="   $emit(   'click'   )  ;"
   @click="   $emit(   'click'   )  ;if(something){for(let i=j;i<100;i++){}}else{}"
+  slot-scope="{destructuring:{a:{b}}}"
 ></div>
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 <div
@@ -49,6 +50,7 @@ exports[`attributes.vue - vue-verify 1`] = `
     } else {
     }
   "
+  slot-scope="{destructuring:{a:{b}}}"
 ></div>
 
 `;
@@ -73,6 +75,7 @@ exports[`attributes.vue - vue-verify 2`] = `
   @click="   $emit(   'click'   )   "
   @click="   $emit(   'click'   )  ;"
   @click="   $emit(   'click'   )  ;if(something){for(let i=j;i<100;i++){}}else{}"
+  slot-scope="{destructuring:{a:{b}}}"
 ></div>
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 <div
@@ -102,6 +105,7 @@ exports[`attributes.vue - vue-verify 2`] = `
     } else {
     }
   "
+  slot-scope="{destructuring:{a:{b}}}"
 ></div>
 
 `;
diff --git a/tests/html_vue/attributes.vue b/tests/html_vue/attributes.vue
index 18030c804ac1..223b232081ed 100644
--- a/tests/html_vue/attributes.vue
+++ b/tests/html_vue/attributes.vue
@@ -17,4 +17,5 @@
   @click="   $emit(   'click'   )   "
   @click="   $emit(   'click'   )  ;"
   @click="   $emit(   'click'   )  ;if(something){for(let i=j;i<100;i++){}}else{}"
+  slot-scope="{destructuring:{a:{b}}}"
 ></div>

From 18e0c70e11485631dce8dcbccb600e2206a131f8 Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Tue, 16 Oct 2018 17:14:08 +0800
Subject: [PATCH 050/177] feat(vue): support `slot-scope`

---
 src/language-html/printer-htmlparser2.js        | 5 ++++-
 tests/html_vue/__snapshots__/jsfmt.spec.js.snap | 4 ++--
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/language-html/printer-htmlparser2.js b/src/language-html/printer-htmlparser2.js
index bcec37368a91..4217e2580dfb 100644
--- a/src/language-html/printer-htmlparser2.js
+++ b/src/language-html/printer-htmlparser2.js
@@ -737,7 +737,10 @@ function printEmbeddedAttributeValue(node, textToDoc, options) {
       );
     }
 
-    if (isKeyMatched(vueExpressionBindingPatterns)) {
+    if (
+      node.key === "slot-scope" ||
+      isKeyMatched(vueExpressionBindingPatterns)
+    ) {
       return textToDoc(getValue(), { parser: "__js_expression" });
     }
   }
diff --git a/tests/html_vue/__snapshots__/jsfmt.spec.js.snap b/tests/html_vue/__snapshots__/jsfmt.spec.js.snap
index cd66a5e1493b..30d7f795d5c6 100644
--- a/tests/html_vue/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_vue/__snapshots__/jsfmt.spec.js.snap
@@ -50,7 +50,7 @@ exports[`attributes.vue - vue-verify 1`] = `
     } else {
     }
   "
-  slot-scope="{destructuring:{a:{b}}}"
+  slot-scope="{ destructuring: { a: { b } } }"
 ></div>
 
 `;
@@ -105,7 +105,7 @@ exports[`attributes.vue - vue-verify 2`] = `
     } else {
     }
   "
-  slot-scope="{destructuring:{a:{b}}}"
+  slot-scope="{ destructuring: { a: { b } } }"
 ></div>
 
 `;

From bc76ca015d0ee46a525af071d2df2bea7d41363b Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Tue, 16 Oct 2018 17:55:51 +0800
Subject: [PATCH 051/177] chore(playground): add missing info for angular

---
 website/playground/codeSamples.js | 1 +
 website/playground/markdown.js    | 2 ++
 2 files changed, 3 insertions(+)

diff --git a/website/playground/codeSamples.js b/website/playground/codeSamples.js
index e1165675a7aa..df31c2d7e271 100644
--- a/website/playground/codeSamples.js
+++ b/website/playground/codeSamples.js
@@ -283,6 +283,7 @@ export default function(parser) {
         "</div> </div>"
       ].join("\n");
     case "html":
+    case "angular":
       return [
         "<!DOCTYPE html>",
         '<HTML CLASS="no-js mY-ClAsS">',
diff --git a/website/playground/markdown.js b/website/playground/markdown.js
index 78c3ebb23bf8..a890b288866f 100644
--- a/website/playground/markdown.js
+++ b/website/playground/markdown.js
@@ -45,6 +45,8 @@ function getMarkdownSyntax(options) {
       return "jsonc";
     case "glimmer":
       return "hbs";
+    case "angular":
+      return "html";
     default:
       return options.parser;
   }

From 924a2544e7c641f5943b05286b0822a647beaa0f Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Tue, 16 Oct 2018 18:17:34 +0800
Subject: [PATCH 052/177] fix(vue): distinguish expression/statement in v-on

---
 src/language-html/printer-htmlparser2.js      | 28 +++++++++----------
 .../html_vue/__snapshots__/jsfmt.spec.js.snap | 16 +++++------
 .../__snapshots__/jsfmt.spec.js.snap          |  2 +-
 3 files changed, 22 insertions(+), 24 deletions(-)

diff --git a/src/language-html/printer-htmlparser2.js b/src/language-html/printer-htmlparser2.js
index 4217e2580dfb..2d8059951e38 100644
--- a/src/language-html/printer-htmlparser2.js
+++ b/src/language-html/printer-htmlparser2.js
@@ -711,9 +711,11 @@ function printEmbeddedAttributeValue(node, textToDoc, options) {
 
     /**
      *     @click="jsStatement"
+     *     @click="jsExpression"
      *     v-on:click="jsStatement"
+     *     v-on:click="jsExpression"
      */
-    const vueStatementBindingPatterns = ["^@", "^v-on:"];
+    const vueStatementOrExpressionBindingPatterns = ["^@", "^v-on:"];
     /**
      *     :class="jsExpression"
      *     v-bind:id="jsExpression"
@@ -721,20 +723,16 @@ function printEmbeddedAttributeValue(node, textToDoc, options) {
      */
     const vueExpressionBindingPatterns = ["^:", "^v-"];
 
-    if (isKeyMatched(vueStatementBindingPatterns)) {
-      return group(
-        concat([
-          indent(
-            concat([
-              softline,
-              stripTrailingHardline(
-                textToDoc(getValue(), { parser: "babylon" })
-              )
-            ])
-          ),
-          softline
-        ])
-      );
+    if (isKeyMatched(vueStatementOrExpressionBindingPatterns)) {
+      const value = getValue();
+      let doc = null;
+      // vue treats `a`/`a;` differently
+      try {
+        doc = textToDoc(value, { parser: "__js_expression" });
+      } catch (e) {
+        doc = stripTrailingHardline(textToDoc(value, { parser: "babylon" }));
+      }
+      return group(concat([indent(concat([softline, doc])), softline]));
     }
 
     if (
diff --git a/tests/html_vue/__snapshots__/jsfmt.spec.js.snap b/tests/html_vue/__snapshots__/jsfmt.spec.js.snap
index 30d7f795d5c6..61f2652c946c 100644
--- a/tests/html_vue/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_vue/__snapshots__/jsfmt.spec.js.snap
@@ -41,7 +41,7 @@ exports[`attributes.vue - vue-verify 1`] = `
   })"
   @click="/* hello */"
   @click="/* 1 */ $emit(/* 2 */ 'click' /* 3 */) /* 4 */; /* 5 */"
-  @click="$emit('click');"
+  @click="$emit('click')"
   @click="$emit('click');"
   @click="
     $emit('click');
@@ -96,7 +96,7 @@ exports[`attributes.vue - vue-verify 2`] = `
   })"
   @click="/* hello */"
   @click="/* 1 */ $emit(/* 2 */ 'click' /* 3 */) /* 4 */; /* 5 */"
-  @click="$emit('click');"
+  @click="$emit('click')"
   @click="$emit('click');"
   @click="
     $emit('click');
@@ -252,9 +252,9 @@ export default {
     }"
     :index="index"
     :data-issue-id="issue.id"
-    @mousedown="mouseDown;"
-    @mousemove="mouseMove;"
-    @mouseup="showIssue($event);"
+    @mousedown="mouseDown"
+    @mousemove="mouseMove"
+    @mouseup="showIssue($event)"
   >
     <issue-card-inner
       :list="list"
@@ -410,9 +410,9 @@ export default {
     }"
     :index="index"
     :data-issue-id="issue.id"
-    @mousedown="mouseDown;"
-    @mousemove="mouseMove;"
-    @mouseup="showIssue($event);"
+    @mousedown="mouseDown"
+    @mousemove="mouseMove"
+    @mouseup="showIssue($event)"
   >
     <issue-card-inner
       :list="list"
diff --git a/tests/multiparser_vue/__snapshots__/jsfmt.spec.js.snap b/tests/multiparser_vue/__snapshots__/jsfmt.spec.js.snap
index a1528eb77c62..799470d5f3e8 100644
--- a/tests/multiparser_vue/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/multiparser_vue/__snapshots__/jsfmt.spec.js.snap
@@ -72,7 +72,7 @@ exports[`template-bind.vue - vue-verify 1`] = `
   <div v-bind:id="'&quot;' + id"></div>
   <div v-bind:id="rawId | formatId"></div>
   <div v-bind:id="ok ? 'YES' : 'NO'"></div>
-  <button @click="foo(arg, 'string');"></button>
+  <button @click="foo(arg, 'string')"></button>
 </template>
 
 `;

From dbb4a5fa6d997d3f159646b59ff99f943a402fce Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Tue, 16 Oct 2018 18:23:44 +0800
Subject: [PATCH 053/177] fix(vue): use correct regex to distinguish v-on value

---
 src/language-html/printer-htmlparser2.js           | 14 +++++++-------
 tests/html_vue/__snapshots__/jsfmt.spec.js.snap    |  8 ++++----
 .../__snapshots__/jsfmt.spec.js.snap               |  2 +-
 3 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/language-html/printer-htmlparser2.js b/src/language-html/printer-htmlparser2.js
index 2d8059951e38..39bbc0015b64 100644
--- a/src/language-html/printer-htmlparser2.js
+++ b/src/language-html/printer-htmlparser2.js
@@ -724,14 +724,14 @@ function printEmbeddedAttributeValue(node, textToDoc, options) {
     const vueExpressionBindingPatterns = ["^:", "^v-"];
 
     if (isKeyMatched(vueStatementOrExpressionBindingPatterns)) {
+      // copied from https://github.com/vuejs/vue/blob/v2.5.17/src/compiler/codegen/events.js#L3-L4
+      const fnExpRE = /^([\w$_]+|\([^)]*?\))\s*=>|^function\s*\(/;
+      const simplePathRE = /^[A-Za-z_$][\w$]*(?:\.[A-Za-z_$][\w$]*|\['[^']*?']|\["[^"]*?"]|\[\d+]|\[[A-Za-z_$][\w$]*])*$/;
       const value = getValue();
-      let doc = null;
-      // vue treats `a`/`a;` differently
-      try {
-        doc = textToDoc(value, { parser: "__js_expression" });
-      } catch (e) {
-        doc = stripTrailingHardline(textToDoc(value, { parser: "babylon" }));
-      }
+      const doc =
+        simplePathRE.test(value) || fnExpRE.test(value)
+          ? textToDoc(value, { parser: "__js_expression" })
+          : stripTrailingHardline(textToDoc(value, { parser: "babylon" }));
       return group(concat([indent(concat([softline, doc])), softline]));
     }
 
diff --git a/tests/html_vue/__snapshots__/jsfmt.spec.js.snap b/tests/html_vue/__snapshots__/jsfmt.spec.js.snap
index 61f2652c946c..46ad7bcb7107 100644
--- a/tests/html_vue/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_vue/__snapshots__/jsfmt.spec.js.snap
@@ -41,7 +41,7 @@ exports[`attributes.vue - vue-verify 1`] = `
   })"
   @click="/* hello */"
   @click="/* 1 */ $emit(/* 2 */ 'click' /* 3 */) /* 4 */; /* 5 */"
-  @click="$emit('click')"
+  @click="$emit('click');"
   @click="$emit('click');"
   @click="
     $emit('click');
@@ -96,7 +96,7 @@ exports[`attributes.vue - vue-verify 2`] = `
   })"
   @click="/* hello */"
   @click="/* 1 */ $emit(/* 2 */ 'click' /* 3 */) /* 4 */; /* 5 */"
-  @click="$emit('click')"
+  @click="$emit('click');"
   @click="$emit('click');"
   @click="
     $emit('click');
@@ -254,7 +254,7 @@ export default {
     :data-issue-id="issue.id"
     @mousedown="mouseDown"
     @mousemove="mouseMove"
-    @mouseup="showIssue($event)"
+    @mouseup="showIssue($event);"
   >
     <issue-card-inner
       :list="list"
@@ -412,7 +412,7 @@ export default {
     :data-issue-id="issue.id"
     @mousedown="mouseDown"
     @mousemove="mouseMove"
-    @mouseup="showIssue($event)"
+    @mouseup="showIssue($event);"
   >
     <issue-card-inner
       :list="list"
diff --git a/tests/multiparser_vue/__snapshots__/jsfmt.spec.js.snap b/tests/multiparser_vue/__snapshots__/jsfmt.spec.js.snap
index 799470d5f3e8..a1528eb77c62 100644
--- a/tests/multiparser_vue/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/multiparser_vue/__snapshots__/jsfmt.spec.js.snap
@@ -72,7 +72,7 @@ exports[`template-bind.vue - vue-verify 1`] = `
   <div v-bind:id="'&quot;' + id"></div>
   <div v-bind:id="rawId | formatId"></div>
   <div v-bind:id="ok ? 'YES' : 'NO'"></div>
-  <button @click="foo(arg, 'string')"></button>
+  <button @click="foo(arg, 'string');"></button>
 </template>
 
 `;

From 5ea98e59ff35485fad0bec88f264350eb74467e4 Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Tue, 16 Oct 2018 20:19:02 +0800
Subject: [PATCH 054/177] refactor

---
 src/language-html/printer-htmlparser2.js | 20 +++++++++++---------
 src/language-html/syntax-angular.js      |  4 ++--
 src/language-html/syntax-vue.js          | 10 +++++-----
 src/language-js/html-binding.js          |  2 +-
 4 files changed, 19 insertions(+), 17 deletions(-)

diff --git a/src/language-html/printer-htmlparser2.js b/src/language-html/printer-htmlparser2.js
index 39bbc0015b64..a789545ee3bf 100644
--- a/src/language-html/printer-htmlparser2.js
+++ b/src/language-html/printer-htmlparser2.js
@@ -35,8 +35,8 @@ const {
 const preprocess = require("./preprocess");
 const assert = require("assert");
 const { insertPragma } = require("./pragma");
-const { printNgForValue } = require("./syntax-angular");
-const { printVForValue } = require("./syntax-vue");
+const { printNgFor } = require("./syntax-angular");
+const { printVueFor } = require("./syntax-vue");
 
 function concat(parts) {
   const newParts = normalizeParts(parts);
@@ -706,7 +706,7 @@ function printEmbeddedAttributeValue(node, textToDoc, options) {
 
   if (options.parser === "vue") {
     if (node.key === "v-for") {
-      return printVForValue(getValue(), textToDoc);
+      return printVueFor(getValue(), textToDoc);
     }
 
     /**
@@ -715,7 +715,7 @@ function printEmbeddedAttributeValue(node, textToDoc, options) {
      *     v-on:click="jsStatement"
      *     v-on:click="jsExpression"
      */
-    const vueStatementOrExpressionBindingPatterns = ["^@", "^v-on:"];
+    const vueEventBindingPatterns = ["^@", "^v-on:"];
     /**
      *     :class="jsExpression"
      *     v-bind:id="jsExpression"
@@ -723,10 +723,11 @@ function printEmbeddedAttributeValue(node, textToDoc, options) {
      */
     const vueExpressionBindingPatterns = ["^:", "^v-"];
 
-    if (isKeyMatched(vueStatementOrExpressionBindingPatterns)) {
+    if (isKeyMatched(vueEventBindingPatterns)) {
       // copied from https://github.com/vuejs/vue/blob/v2.5.17/src/compiler/codegen/events.js#L3-L4
       const fnExpRE = /^([\w$_]+|\([^)]*?\))\s*=>|^function\s*\(/;
       const simplePathRE = /^[A-Za-z_$][\w$]*(?:\.[A-Za-z_$][\w$]*|\['[^']*?']|\["[^"]*?"]|\[\d+]|\[[A-Za-z_$][\w$]*])*$/;
+
       const value = getValue();
       const doc =
         simplePathRE.test(value) || fnExpRE.test(value)
@@ -744,6 +745,10 @@ function printEmbeddedAttributeValue(node, textToDoc, options) {
   }
 
   if (options.parser === "angular") {
+    if (node.key === "*ngFor") {
+      return printNgFor(getValue(), textToDoc);
+    }
+
     /**
      *     *ngFor="angularDirective"
      */
@@ -762,11 +767,8 @@ function printEmbeddedAttributeValue(node, textToDoc, options) {
       ngStatementBindingPatterns,
       ngExpressionBindingPatterns
     );
-    if (isKeyMatched(ngBindingPatterns)) {
-      if (node.key === "*ngFor") {
-        return printNgForValue(getValue(), textToDoc);
-      }
 
+    if (isKeyMatched(ngBindingPatterns)) {
       return textToDoc(getValue(), { parser: "__js_expression" });
     }
   }
diff --git a/src/language-html/syntax-angular.js b/src/language-html/syntax-angular.js
index 7d03ed9f6c51..256ee9f5247e 100644
--- a/src/language-html/syntax-angular.js
+++ b/src/language-html/syntax-angular.js
@@ -38,7 +38,7 @@ const NG_FOR_AS_PATTERN = `^(${IDENTIFIER_PATTERN})\\s+as\\s+(${IDENTIFIER_PATTE
  *     *ngFor="let hero of heroes; trackBy: trackByHeroes"
  *     *ngFor="let item of items; index as i; trackBy: trackByFn"
  */
-function printNgForValue(data, textToDoc) {
+function printNgFor(data, textToDoc) {
   return group(
     concat([
       indent(
@@ -99,5 +99,5 @@ function printNgForAs(data /*, textToDoc */) {
 }
 
 module.exports = {
-  printNgForValue
+  printNgFor
 };
diff --git a/src/language-html/syntax-vue.js b/src/language-html/syntax-vue.js
index 13edba1229c1..2b3a09dc31af 100644
--- a/src/language-html/syntax-vue.js
+++ b/src/language-html/syntax-vue.js
@@ -10,13 +10,13 @@ const {
  *     v-for="(..., ...) in ..."
  *     v-for="(..., ...) of ..."
  */
-function printVForValue(value, textToDoc) {
-  const { left, operator, right } = parseVForValue(value);
+function printVueFor(value, textToDoc) {
+  const { left, operator, right } = parseVueFor(value);
   return concat([
     group(
       textToDoc(`function _(${left}) {}`, {
         parser: "babylon",
-        __isVForBindingLeft: true
+        __isVueForBindingLeft: true
       })
     ),
     " ",
@@ -27,7 +27,7 @@ function printVForValue(value, textToDoc) {
 }
 
 // modified from https://github.com/vuejs/vue/blob/v2.5.17/src/compiler/parser/index.js#L370-L387
-function parseVForValue(value) {
+function parseVueFor(value) {
   const forAliasRE = /([^]*?)\s+(in|of)\s+([^]*)/;
   const forIteratorRE = /,([^,}\]]*)(?:,([^,}\]]*))?$/;
   const stripParensRE = /^\(|\)$/g;
@@ -60,5 +60,5 @@ function parseVForValue(value) {
 }
 
 module.exports = {
-  printVForValue
+  printVueFor
 };
diff --git a/src/language-js/html-binding.js b/src/language-js/html-binding.js
index e4fdc0f9a9e3..8e81e86db33a 100644
--- a/src/language-js/html-binding.js
+++ b/src/language-js/html-binding.js
@@ -11,7 +11,7 @@ function printHtmlBinding(path, options, print) {
     return;
   }
 
-  if (options.__isVForBindingLeft) {
+  if (options.__isVueForBindingLeft) {
     return path.call(
       functionDeclarationPath => {
         const { params } = functionDeclarationPath.getValue();

From 35c666a2bbe5f93ee9aa479268ee006a86fce057 Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Tue, 16 Oct 2018 20:25:07 +0800
Subject: [PATCH 055/177] feat(vue): format slot-scope as function parameters

---
 src/language-html/printer-htmlparser2.js        | 11 ++++++-----
 src/language-html/syntax-vue.js                 | 10 +++++++++-
 src/language-js/html-binding.js                 | 10 ++++++++++
 tests/html_vue/__snapshots__/jsfmt.spec.js.snap | 12 ++++++++++--
 4 files changed, 35 insertions(+), 8 deletions(-)

diff --git a/src/language-html/printer-htmlparser2.js b/src/language-html/printer-htmlparser2.js
index a789545ee3bf..53aeafe20258 100644
--- a/src/language-html/printer-htmlparser2.js
+++ b/src/language-html/printer-htmlparser2.js
@@ -36,7 +36,7 @@ const preprocess = require("./preprocess");
 const assert = require("assert");
 const { insertPragma } = require("./pragma");
 const { printNgFor } = require("./syntax-angular");
-const { printVueFor } = require("./syntax-vue");
+const { printVueFor, printVueSlotScope } = require("./syntax-vue");
 
 function concat(parts) {
   const newParts = normalizeParts(parts);
@@ -709,6 +709,10 @@ function printEmbeddedAttributeValue(node, textToDoc, options) {
       return printVueFor(getValue(), textToDoc);
     }
 
+    if (node.key === "slot-scope") {
+      return printVueSlotScope(getValue(), textToDoc);
+    }
+
     /**
      *     @click="jsStatement"
      *     @click="jsExpression"
@@ -736,10 +740,7 @@ function printEmbeddedAttributeValue(node, textToDoc, options) {
       return group(concat([indent(concat([softline, doc])), softline]));
     }
 
-    if (
-      node.key === "slot-scope" ||
-      isKeyMatched(vueExpressionBindingPatterns)
-    ) {
+    if (isKeyMatched(vueExpressionBindingPatterns)) {
       return textToDoc(getValue(), { parser: "__js_expression" });
     }
   }
diff --git a/src/language-html/syntax-vue.js b/src/language-html/syntax-vue.js
index 2b3a09dc31af..234bacaf0cb9 100644
--- a/src/language-html/syntax-vue.js
+++ b/src/language-html/syntax-vue.js
@@ -59,6 +59,14 @@ function parseVueFor(value) {
   };
 }
 
+function printVueSlotScope(value, textToDoc) {
+  return textToDoc(`function _(${value}) {}`, {
+    parser: "babylon",
+    __isVueSlotScope: true
+  });
+}
+
 module.exports = {
-  printVueFor
+  printVueFor,
+  printVueSlotScope
 };
diff --git a/src/language-js/html-binding.js b/src/language-js/html-binding.js
index 8e81e86db33a..5bede6084a8f 100644
--- a/src/language-js/html-binding.js
+++ b/src/language-js/html-binding.js
@@ -29,6 +29,16 @@ function printHtmlBinding(path, options, print) {
       0
     );
   }
+
+  if (options.__isVueSlotScope) {
+    return path.call(
+      functionDeclarationPath =>
+        join(concat([",", line]), functionDeclarationPath.map(print, "params")),
+      "program",
+      "body",
+      0
+    );
+  }
 }
 
 module.exports = {
diff --git a/tests/html_vue/__snapshots__/jsfmt.spec.js.snap b/tests/html_vue/__snapshots__/jsfmt.spec.js.snap
index 46ad7bcb7107..65513d17f701 100644
--- a/tests/html_vue/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_vue/__snapshots__/jsfmt.spec.js.snap
@@ -50,7 +50,11 @@ exports[`attributes.vue - vue-verify 1`] = `
     } else {
     }
   "
-  slot-scope="{ destructuring: { a: { b } } }"
+  slot-scope="{
+    destructuring: {
+      a: { b }
+    }
+  }"
 ></div>
 
 `;
@@ -105,7 +109,11 @@ exports[`attributes.vue - vue-verify 2`] = `
     } else {
     }
   "
-  slot-scope="{ destructuring: { a: { b } } }"
+  slot-scope="{
+    destructuring: {
+      a: { b },
+    },
+  }"
 ></div>
 
 `;

From 5655b02d47d87cdef9e89d60de98492fdcd7c814 Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Thu, 18 Oct 2018 19:14:53 +0800
Subject: [PATCH 056/177] test: update tests

---
 .../__snapshots__/jsfmt.spec.js.snap          | 125 +++++++++++++++++-
 tests/html_angular/attributes.component.html  |  35 ++++-
 .../html_angular/interpolation.component.html |  25 ++++
 3 files changed, 176 insertions(+), 9 deletions(-)
 create mode 100644 tests/html_angular/interpolation.component.html

diff --git a/tests/html_angular/__snapshots__/jsfmt.spec.js.snap b/tests/html_angular/__snapshots__/jsfmt.spec.js.snap
index a065c41aaa2d..8a0324f2cc51 100644
--- a/tests/html_angular/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_angular/__snapshots__/jsfmt.spec.js.snap
@@ -2,9 +2,38 @@
 
 exports[`attributes.component.html - angular-verify 1`] = `
 <div
-    [target]="  'hello'.repeat(    2   )  "
-    (target)="  'hello'.repeat(    2   )  "
-    [(target)]="  'hello'.repeat(    2   )  "
+    [target]=" a | b : c "
+    [target]=" 0 - 1 "
+    [target]=" - 1 "
+    [target]=" a ? 1 : 2 "
+    [target]=" "
+    [target]=" a ( 1 ) ( 2 ) "
+    [target]=" a [ b ] "
+    [target]=" [ 1 ] "
+    [target]=" { 'a' : 1 } "
+    [target]=" { a : 1 } "
+    [target]=" true "
+    [target]=" undefined "
+    [target]=" null "
+    [target]=" ( 1 ) "
+    [target]=" 1 "
+    [target]="  'hello' "
+    [target]=" a ( 1 , 2 ) "
+    [target]=" a . b ( 1 , 2 ) "
+    [target]=" x ! "
+    [target]=" ! x "
+    [target]=" ( ( a ) ) "
+    [target]=" a "
+    [target]=" a // hello "
+    [target]=" a . b "
+    [target]=" javascript : 'hello world' "
+    [target]=" a ?. b ( ) "
+    [target]=" a ?. b "
+    (target)=" a = 1 "
+    (target)=" a . b = 1 "
+    (target)=" a [ b ] = 1 "
+    (target)=" a // hello "
+    (target)=" a ; b "
     *ngIf=" something?true:false    "
     *ngFor="  let     hero     of     heroes"
     *ngFor="  let    hero     of[1,2,3,666666666666666666666666666666666666]; let i=index"
@@ -15,9 +44,38 @@ exports[`attributes.component.html - angular-verify 1`] = `
 ></div>
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 <div
-  [target]="'hello'.repeat(2)"
-  (target)="'hello'.repeat(2)"
-  [(target)]="'hello'.repeat(2)"
+  [target]=" a | b : c "
+  [target]="0 - 1"
+  [target]="-1"
+  [target]="a ? 1 : 2"
+  [target]=" "
+  [target]="a(1)(2)"
+  [target]="a[b]"
+  [target]="[1]"
+  [target]="{ a: 1 }"
+  [target]="{ a: 1 }"
+  [target]="true"
+  [target]="undefined"
+  [target]="null"
+  [target]="1"
+  [target]="1"
+  [target]="'hello'"
+  [target]="a(1, 2)"
+  [target]="a.b(1, 2)"
+  [target]=" x ! "
+  [target]="!x"
+  [target]="a"
+  [target]="a"
+  [target]="a"
+  [target]="a.b"
+  [target]=" javascript : 'hello world' "
+  [target]="a?.b()"
+  [target]="a?.b"
+  (target)="(a = 1)"
+  (target)="(a.b = 1)"
+  (target)="(a[b] = 1)"
+  (target)="a"
+  (target)=" a ; b "
   *ngIf="something ? true : false"
   *ngFor="let hero of heroes"
   *ngFor="
@@ -31,3 +89,58 @@ exports[`attributes.component.html - angular-verify 1`] = `
 ></div>
 
 `;
+
+exports[`interpolation.component.html - angular-verify 1`] = `
+<div>{{ a | b : c }}</div>
+<div>{{ 0 - 1 }}</div>
+<div>{{ - 1 }}</div>
+<div>{{ a ? 1 : 2 }}</div>
+<div>{{ a ( 1 ) ( 2 ) }}</div>
+<div>{{ a [ b ] }}</div>
+<div>{{ [ 1 ] }}</div>
+<div>{{ { 'a' : 1 } }}</div>
+<div>{{ { a : 1 } }}</div>
+<div>{{ true }}</div>
+<div>{{ undefined }}</div>
+<div>{{ null }}</div>
+<div>{{ ( 1 ) }}</div>
+<div>{{ 1 }}</div>
+<div>{{  'hello' }}</div>
+<div>{{ a ( 1 , 2 ) }}</div>
+<div>{{ a . b ( 1 , 2 ) }}</div>
+<div>{{ x ! }}</div>
+<div>{{ ! x }}</div>
+<div>{{ ( ( a ) ) }}</div>
+<div>{{ a }}</div>
+<div>{{ a // hello }}</div>
+<div>{{ a . b }}</div>
+<div>{{ a ?. b ( ) }}</div>
+<div>{{ a ?. b }}</div>
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+<div>{{ a | b : c }}</div>
+<div>{{0 - 1}}</div>
+<div>{{-1}}</div>
+<div>{{a ? 1 : 2}}</div>
+<div>{{a(1)(2)}}</div>
+<div>{{a[b]}}</div>
+<div>{{[1]}}</div>
+<div>{{{ a: 1 }}}</div>
+<div>{{{ a: 1 }}}</div>
+<div>{{true}}</div>
+<div>{{undefined}}</div>
+<div>{{null}}</div>
+<div>{{1}}</div>
+<div>{{1}}</div>
+<div>{{"hello"}}</div>
+<div>{{a(1, 2)}}</div>
+<div>{{a.b(1, 2)}}</div>
+<div>{{ x ! }}</div>
+<div>{{!x}}</div>
+<div>{{a}}</div>
+<div>{{a}}</div>
+<div>{{a}}</div>
+<div>{{a.b}}</div>
+<div>{{a?.b()}}</div>
+<div>{{a?.b}}</div>
+
+`;
diff --git a/tests/html_angular/attributes.component.html b/tests/html_angular/attributes.component.html
index 4b90e8dc7fb9..25ee90df6721 100644
--- a/tests/html_angular/attributes.component.html
+++ b/tests/html_angular/attributes.component.html
@@ -1,7 +1,36 @@
 <div
-    [target]="  'hello'.repeat(    2   )  "
-    (target)="  'hello'.repeat(    2   )  "
-    [(target)]="  'hello'.repeat(    2   )  "
+    [target]=" a | b : c "
+    [target]=" 0 - 1 "
+    [target]=" - 1 "
+    [target]=" a ? 1 : 2 "
+    [target]=" "
+    [target]=" a ( 1 ) ( 2 ) "
+    [target]=" a [ b ] "
+    [target]=" [ 1 ] "
+    [target]=" { 'a' : 1 } "
+    [target]=" { a : 1 } "
+    [target]=" true "
+    [target]=" undefined "
+    [target]=" null "
+    [target]=" ( 1 ) "
+    [target]=" 1 "
+    [target]="  'hello' "
+    [target]=" a ( 1 , 2 ) "
+    [target]=" a . b ( 1 , 2 ) "
+    [target]=" x ! "
+    [target]=" ! x "
+    [target]=" ( ( a ) ) "
+    [target]=" a "
+    [target]=" a // hello "
+    [target]=" a . b "
+    [target]=" javascript : 'hello world' "
+    [target]=" a ?. b ( ) "
+    [target]=" a ?. b "
+    (target)=" a = 1 "
+    (target)=" a . b = 1 "
+    (target)=" a [ b ] = 1 "
+    (target)=" a // hello "
+    (target)=" a ; b "
     *ngIf=" something?true:false    "
     *ngFor="  let     hero     of     heroes"
     *ngFor="  let    hero     of[1,2,3,666666666666666666666666666666666666]; let i=index"
diff --git a/tests/html_angular/interpolation.component.html b/tests/html_angular/interpolation.component.html
new file mode 100644
index 000000000000..896ece2845b4
--- /dev/null
+++ b/tests/html_angular/interpolation.component.html
@@ -0,0 +1,25 @@
+<div>{{ a | b : c }}</div>
+<div>{{ 0 - 1 }}</div>
+<div>{{ - 1 }}</div>
+<div>{{ a ? 1 : 2 }}</div>
+<div>{{ a ( 1 ) ( 2 ) }}</div>
+<div>{{ a [ b ] }}</div>
+<div>{{ [ 1 ] }}</div>
+<div>{{ { 'a' : 1 } }}</div>
+<div>{{ { a : 1 } }}</div>
+<div>{{ true }}</div>
+<div>{{ undefined }}</div>
+<div>{{ null }}</div>
+<div>{{ ( 1 ) }}</div>
+<div>{{ 1 }}</div>
+<div>{{  'hello' }}</div>
+<div>{{ a ( 1 , 2 ) }}</div>
+<div>{{ a . b ( 1 , 2 ) }}</div>
+<div>{{ x ! }}</div>
+<div>{{ ! x }}</div>
+<div>{{ ( ( a ) ) }}</div>
+<div>{{ a }}</div>
+<div>{{ a // hello }}</div>
+<div>{{ a . b }}</div>
+<div>{{ a ?. b ( ) }}</div>
+<div>{{ a ?. b }}</div>

From b25e261ffd0cd0d40c5671575b0707289fa504d4 Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Fri, 19 Oct 2018 00:24:41 +0800
Subject: [PATCH 057/177] feat: support angular action/binding/interpolation

---
 package.json                                  |  2 +
 scripts/build/config.js                       | 13 ++++++
 src/common/internal-plugins.js                | 15 ++++++
 src/language-html/printer-htmlparser2.js      | 26 +++++++----
 src/language-js/parser-angular.js             | 19 ++++++++
 src/language-js/printer-estree.js             | 46 +++++++++++++++++--
 .../__snapshots__/jsfmt.spec.js.snap          | 24 +++++-----
 tests_config/require_standalone.js            |  1 +
 website/static/service-worker.js              |  1 +
 website/static/worker.js                      | 15 ++++++
 yarn.lock                                     | 17 +++++++
 11 files changed, 153 insertions(+), 26 deletions(-)
 create mode 100644 src/language-js/parser-angular.js

diff --git a/package.json b/package.json
index 8c6e57dc18f3..ebc6fe73ac55 100644
--- a/package.json
+++ b/package.json
@@ -14,10 +14,12 @@
     "node": ">=6"
   },
   "dependencies": {
+    "@angular/compiler": "6.1.10",
     "@babel/code-frame": "7.0.0-beta.46",
     "@babel/parser": "7.1.2",
     "@glimmer/syntax": "0.30.3",
     "@iarna/toml": "2.0.0",
+    "angular-estree-parser": "1.0.0",
     "camelcase": "4.1.0",
     "chalk": "2.1.0",
     "cjk-regex": "2.0.0",
diff --git a/scripts/build/config.js b/scripts/build/config.js
index b3a32836c8ac..40db88202388 100644
--- a/scripts/build/config.js
+++ b/scripts/build/config.js
@@ -1,6 +1,7 @@
 "use strict";
 
 const path = require("path");
+const PROJECT_ROOT = path.resolve(__dirname, "../..");
 
 /**
  * @typedef {Object} Bundle
@@ -38,6 +39,18 @@ const parsers = [
     input: "src/language-js/parser-typescript.js",
     target: "universal"
   },
+  {
+    input: "src/language-js/parser-angular.js",
+    target: "universal",
+    alias: {
+      // Force using the CJS file, instead of ESM; i.e. get the file
+      // from `"main"` instead of `"module"` (rollup default) of package.json
+      "lines-and-columns": require.resolve("lines-and-columns"),
+      "@angular/compiler/src": path.resolve(
+        `${PROJECT_ROOT}/node_modules/@angular/compiler/esm2015/src`
+      )
+    }
+  },
   {
     input: "src/language-css/parser-postcss.js",
     target: "universal",
diff --git a/src/common/internal-plugins.js b/src/common/internal-plugins.js
index 8d8376f4fcae..e4cda1a29e7f 100644
--- a/src/common/internal-plugins.js
+++ b/src/common/internal-plugins.js
@@ -48,6 +48,21 @@ module.exports = [
       get "typescript-eslint"() {
         return eval("require")("../language-js/parser-typescript").parsers
           .typescript;
+      },
+      // JS - Angular Action
+      get __ng_action() {
+        return eval("require")("../language-js/parser-angular").parsers
+          .__ng_action;
+      },
+      // JS - Angular Binding
+      get __ng_binding() {
+        return eval("require")("../language-js/parser-angular").parsers
+          .__ng_binding;
+      },
+      // JS - Angular Interpolation
+      get __ng_interpolation() {
+        return eval("require")("../language-js/parser-angular").parsers
+          .__ng_interpolation;
       }
     }
   },
diff --git a/src/language-html/printer-htmlparser2.js b/src/language-html/printer-htmlparser2.js
index 53aeafe20258..cdd9afa0d0c8 100644
--- a/src/language-html/printer-htmlparser2.js
+++ b/src/language-html/printer-htmlparser2.js
@@ -97,7 +97,8 @@ function embed(path, print, textToDoc, options) {
       } else if (options.parser !== "html") {
         const interpolationTextParts = getInterpolationTextDataParts(
           node,
-          textToDoc
+          textToDoc,
+          options
         );
         if (interpolationTextParts) {
           return fill(
@@ -609,7 +610,7 @@ function getTextDataParts(node, data = node.data) {
     : join(line, data.split(/\s+/)).parts;
 }
 
-function getInterpolationTextDataParts(node, textToDoc) {
+function getInterpolationTextDataParts(node, textToDoc, options) {
   const interpolationRegex = /\{\{([\s\S]+?)\}\}/g;
   if (!interpolationRegex.test(node.data)) {
     return null;
@@ -648,7 +649,10 @@ function getInterpolationTextDataParts(node, textToDoc) {
 
     try {
       const interpolationDoc = textToDoc(interpolation, {
-        parser: "__js_expression"
+        parser:
+          options.parser === "angular"
+            ? "__ng_interpolation"
+            : "__js_expression"
       });
       componentParts.push(interpolationDoc);
     } catch (e) {
@@ -763,13 +767,17 @@ function printEmbeddedAttributeValue(node, textToDoc, options) {
      *     [(target)]="angularExpression"
      */
     const ngExpressionBindingPatterns = ["^\\[.+\\]$"];
-    const ngBindingPatterns = [].concat(
-      ngDirectiveBindingPatterns,
-      ngStatementBindingPatterns,
-      ngExpressionBindingPatterns
-    );
 
-    if (isKeyMatched(ngBindingPatterns)) {
+    if (isKeyMatched(ngStatementBindingPatterns)) {
+      return textToDoc(getValue(), { parser: "__ng_action" });
+    }
+
+    if (isKeyMatched(ngExpressionBindingPatterns)) {
+      return textToDoc(getValue(), { parser: "__ng_binding" });
+    }
+
+    if (isKeyMatched(ngDirectiveBindingPatterns)) {
+      // TODO
       return textToDoc(getValue(), { parser: "__js_expression" });
     }
   }
diff --git a/src/language-js/parser-angular.js b/src/language-js/parser-angular.js
new file mode 100644
index 000000000000..6be18845891e
--- /dev/null
+++ b/src/language-js/parser-angular.js
@@ -0,0 +1,19 @@
+"use strict";
+
+const locFns = require("./loc");
+
+function createParser(_parse) {
+  const parse = (text /*, parsers, opts */) => {
+    const ngEstreeParser = require("angular-estree-parser");
+    return { type: "NGRoot", node: _parse(text, ngEstreeParser) };
+  };
+  return Object.assign({ astFormat: "estree", parse }, locFns);
+}
+
+module.exports = {
+  parsers: {
+    __ng_action: createParser((text, ng) => ng.parseAction(text)),
+    __ng_binding: createParser((text, ng) => ng.parseBinding(text)),
+    __ng_interpolation: createParser((text, ng) => ng.parseInterpolation(text))
+  }
+};
diff --git a/src/language-js/printer-estree.js b/src/language-js/printer-estree.js
index 947b9e549bbd..9eb6d54538ea 100644
--- a/src/language-js/printer-estree.js
+++ b/src/language-js/printer-estree.js
@@ -432,7 +432,8 @@ function printPathNoParens(path, options, print, args) {
         options
       );
     case "BinaryExpression":
-    case "LogicalExpression": {
+    case "LogicalExpression":
+    case "NGPipeExpression": {
       const parent = path.getParentNode();
       const parentParent = path.getParentNode(1);
       const isInsideParenthesis =
@@ -3280,6 +3281,29 @@ function printPathNoParens(path, options, print, args) {
 
       return concat(parts);
 
+    case "NGRoot": {
+      const shouldPrintSurroundingSpaces =
+        // avoid invalid syntax `{{{}}}`
+        options.parser === "__ng_interpolation" &&
+        n.node.type === "ObjectExpression" &&
+        n.node.comments.length === 0;
+      return concat(
+        [].concat(
+          shouldPrintSurroundingSpaces ? " " : [],
+          path.call(print, "node"),
+          n.node.comments.length === 0
+            ? []
+            : concat([" //", n.node.comments[0].value]),
+          shouldPrintSurroundingSpaces ? " " : []
+        )
+      );
+    }
+    case "NGChainedExpression":
+      return group(join(concat([";", line]), path.map(print, "expressions")));
+    case "NGEmptyExpression":
+      return "";
+    case "NGQuotedExpression":
+      return concat([n.prefix, ":", n.value]);
     default:
       /* istanbul ignore next */
       throw new Error("unknown type: " + JSON.stringify(n.type));
@@ -5221,7 +5245,11 @@ function maybeWrapJSXElementInParens(path, elem) {
 }
 
 function isBinaryish(node) {
-  return node.type === "BinaryExpression" || node.type === "LogicalExpression";
+  return (
+    node.type === "BinaryExpression" ||
+    node.type === "LogicalExpression" ||
+    node.type === "NGPipeExpression"
+  );
 }
 
 function isMemberish(node) {
@@ -5311,13 +5339,20 @@ function printBinaryishExpressions(
       node.operator === "|>" &&
       !hasLeadingOwnLineComment(options.originalText, node.right, options);
 
+    const operator = node.type === "NGPipeExpression" ? "|" : node.operator;
+    const rightSuffix =
+      node.type === "NGPipeExpression" && node.arguments.length !== 0
+        ? concat([":", join(":", path.map(print, "arguments"))])
+        : "";
+
     const right = shouldInline
-      ? concat([node.operator, " ", path.call(print, "right")])
+      ? concat([operator, " ", path.call(print, "right"), rightSuffix])
       : concat([
           lineBeforeOperator ? softline : "",
-          node.operator,
+          operator,
           lineBeforeOperator ? " " : line,
-          path.call(print, "right")
+          path.call(print, "right"),
+          rightSuffix
         ]);
 
     // If there's only a single binary expression, we want to create a group
@@ -5461,6 +5496,7 @@ function hasNakedLeftSide(node) {
     node.type === "AssignmentExpression" ||
     node.type === "BinaryExpression" ||
     node.type === "LogicalExpression" ||
+    node.type === "NGPipeExpression" ||
     node.type === "ConditionalExpression" ||
     node.type === "CallExpression" ||
     node.type === "OptionalCallExpression" ||
diff --git a/tests/html_angular/__snapshots__/jsfmt.spec.js.snap b/tests/html_angular/__snapshots__/jsfmt.spec.js.snap
index 8a0324f2cc51..06e70c50564e 100644
--- a/tests/html_angular/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_angular/__snapshots__/jsfmt.spec.js.snap
@@ -44,11 +44,11 @@ exports[`attributes.component.html - angular-verify 1`] = `
 ></div>
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 <div
-  [target]=" a | b : c "
+  [target]="a | b:c"
   [target]="0 - 1"
   [target]="-1"
   [target]="a ? 1 : 2"
-  [target]=" "
+  [target]=""
   [target]="a(1)(2)"
   [target]="a[b]"
   [target]="[1]"
@@ -62,20 +62,20 @@ exports[`attributes.component.html - angular-verify 1`] = `
   [target]="'hello'"
   [target]="a(1, 2)"
   [target]="a.b(1, 2)"
-  [target]=" x ! "
+  [target]="x!"
   [target]="!x"
   [target]="a"
   [target]="a"
-  [target]="a"
+  [target]="a // hello "
   [target]="a.b"
-  [target]=" javascript : 'hello world' "
+  [target]="javascript: 'hello world' "
   [target]="a?.b()"
   [target]="a?.b"
   (target)="(a = 1)"
   (target)="(a.b = 1)"
   (target)="(a[b] = 1)"
-  (target)="a"
-  (target)=" a ; b "
+  (target)="a // hello "
+  (target)="a; b"
   *ngIf="something ? true : false"
   *ngFor="let hero of heroes"
   *ngFor="
@@ -117,15 +117,15 @@ exports[`interpolation.component.html - angular-verify 1`] = `
 <div>{{ a ?. b ( ) }}</div>
 <div>{{ a ?. b }}</div>
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-<div>{{ a | b : c }}</div>
+<div>{{a | b:c}}</div>
 <div>{{0 - 1}}</div>
 <div>{{-1}}</div>
 <div>{{a ? 1 : 2}}</div>
 <div>{{a(1)(2)}}</div>
 <div>{{a[b]}}</div>
 <div>{{[1]}}</div>
-<div>{{{ a: 1 }}}</div>
-<div>{{{ a: 1 }}}</div>
+<div>{{ { a: 1 } }}</div>
+<div>{{ { a: 1 } }}</div>
 <div>{{true}}</div>
 <div>{{undefined}}</div>
 <div>{{null}}</div>
@@ -134,11 +134,11 @@ exports[`interpolation.component.html - angular-verify 1`] = `
 <div>{{"hello"}}</div>
 <div>{{a(1, 2)}}</div>
 <div>{{a.b(1, 2)}}</div>
-<div>{{ x ! }}</div>
+<div>{{x!}}</div>
 <div>{{!x}}</div>
 <div>{{a}}</div>
 <div>{{a}}</div>
-<div>{{a}}</div>
+<div>{{a // hello }}</div>
 <div>{{a.b}}</div>
 <div>{{a?.b()}}</div>
 <div>{{a?.b}}</div>
diff --git a/tests_config/require_standalone.js b/tests_config/require_standalone.js
index 331ba12a1541..dd81ced72812 100644
--- a/tests_config/require_standalone.js
+++ b/tests_config/require_standalone.js
@@ -6,6 +6,7 @@ const vm = require("vm");
 
 const sources = [
   "standalone.js",
+  "parser-angular.js",
   "parser-babylon.js",
   "parser-flow.js",
   "parser-glimmer.js",
diff --git a/website/static/service-worker.js b/website/static/service-worker.js
index 5fe9e2f8873d..7e91368f0e23 100644
--- a/website/static/service-worker.js
+++ b/website/static/service-worker.js
@@ -8,6 +8,7 @@ importScripts("https://unpkg.com/sw-toolbox@3.6.0/sw-toolbox.js");
 toolbox.precache([
   // Scripts
   "lib/standalone.js",
+  "lib/parser-angular.js",
   "lib/parser-babylon.js",
   "lib/parser-flow.js",
   "lib/parser-glimmer.js",
diff --git a/website/static/worker.js b/website/static/worker.js
index 667a3c0a76e3..0609b156436f 100644
--- a/website/static/worker.js
+++ b/website/static/worker.js
@@ -43,6 +43,21 @@ var parsers = {
     importScriptOnce("lib/parser-typescript.js");
     return prettierPlugins.typescript.parsers.typescript;
   },
+  // JS - Angular Action
+  get __ng_action() {
+    importScriptOnce("lib/parser-angular.js");
+    return prettierPlugins.angular.parsers.__ng_action;
+  },
+  // JS - Angular Binding
+  get __ng_binding() {
+    importScriptOnce("lib/parser-angular.js");
+    return prettierPlugins.angular.parsers.__ng_binding;
+  },
+  // JS - Angular Interpolation
+  get __ng_interpolation() {
+    importScriptOnce("lib/parser-angular.js");
+    return prettierPlugins.angular.parsers.__ng_interpolation;
+  },
 
   // CSS
   get css() {
diff --git a/yarn.lock b/yarn.lock
index 5935dcfc026f..619d11d6a244 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2,6 +2,13 @@
 # yarn lockfile v1
 
 
+"@angular/compiler@6.1.10":
+  version "6.1.10"
+  resolved "https://registry.yarnpkg.com/@angular/compiler/-/compiler-6.1.10.tgz#6ab35c8584fbda13a6708df14b8b03cc8f849a94"
+  integrity sha512-FPIb2j3zfoBwb6vo/u0gQeu70h8InGlSisBr3xMACs/35/pwB6kbQR+JQiUr0D7k6QApg7AuMkvq8aFNelg0aw==
+  dependencies:
+    tslib "^1.9.0"
+
 "@babel/cli@7.1.2":
   version "7.1.2"
   resolved "https://registry.yarnpkg.com/@babel/cli/-/cli-7.1.2.tgz#fc2853ae96824b3779ca85de4fd025ce3cf62a5e"
@@ -753,6 +760,14 @@ amdefine@>=0.0.4:
   resolved "https://registry.yarnpkg.com/amdefine/-/amdefine-1.0.1.tgz#4a5282ac164729e93619bcfd3ad151f817ce91f5"
   integrity sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU=
 
+angular-estree-parser@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/angular-estree-parser/-/angular-estree-parser-1.0.0.tgz#f47ebd4322243cba3702f870e694f3d1a39f7751"
+  integrity sha512-iNuMnoaDV9gUO7D6vzr+tWptRa+GFB/lSbqoqFvbuQ+vju29MomqcJ15r7nQ1DSUWokMsutYCH0rthzFw6eJxg==
+  dependencies:
+    lines-and-columns "^1.1.6"
+    tslib "^1.9.3"
+
 ansi-escapes@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-2.0.0.tgz#5bae52be424878dd9783e8910e3fc2922e83c81b"
@@ -3187,6 +3202,7 @@ html-encoding-sniffer@^1.0.2:
 html-styles@1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/html-styles/-/html-styles-1.0.0.tgz#a18061fd651f99c6b75c45c8e0549a3bc3e01a75"
+  integrity sha1-oYBh/WUfmca3XEXI4FSaO8PgGnU=
 
 html-tag-names@1.1.2:
   version "1.1.2"
@@ -4735,6 +4751,7 @@ mute-stream@0.0.7:
 n-readlines@1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/n-readlines/-/n-readlines-1.0.0.tgz#c353797f216c253fdfef7e91da4e8b17c29a91a6"
+  integrity sha512-ISDqGcspVu6U3VKqtJZG1uR55SmNNF9uK0EMq1IvNVVZOui6MW6VR0+pIZhqz85ORAGp+4zW+5fJ/SE7bwEibA==
 
 nan@^2.9.2:
   version "2.10.0"

From e6c6adbe900ceaf9a9ca3c76d19c73e52ff33b93 Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Sat, 20 Oct 2018 00:14:33 +0800
Subject: [PATCH 058/177] test: add tests

---
 .../__snapshots__/jsfmt.spec.js.snap          | 28 +++++++++++++++++++
 tests/html_angular/attributes.component.html  | 14 ++++++++++
 2 files changed, 42 insertions(+)

diff --git a/tests/html_angular/__snapshots__/jsfmt.spec.js.snap b/tests/html_angular/__snapshots__/jsfmt.spec.js.snap
index 06e70c50564e..ede1d0d8891c 100644
--- a/tests/html_angular/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_angular/__snapshots__/jsfmt.spec.js.snap
@@ -41,6 +41,20 @@ exports[`attributes.component.html - angular-verify 1`] = `
     *ngFor=" let     item   of   items   ;    index    as   i  ; trackBy  :     trackByFn"
     *ngFor="  let    hero     of heroes; let i  =  index"
     *ngFor="  let    hero     of heroes; value     myValue"
+    *ngIf=" condition  ;  then  thenBlock  else  elseBlock "
+    *ngIf=" condition  as  value  ;  else  elseBlock "
+    *directive=" let hero "
+    *directive=" let hero = hello "
+    *directive=" let hero of heroes "
+    *directive=" let hero ; of : heroes "
+    *directive=" a "
+    *directive=" a as b "
+    *directive=" a , b "
+    *directive=" a ; b "
+    *directive=" a ; b c "
+    *directive=" a ; b : c "
+    *directive=" a ; b : c as d "
+    *directive=" a ; b as c "
 ></div>
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 <div
@@ -86,6 +100,20 @@ exports[`attributes.component.html - angular-verify 1`] = `
   *ngFor="let item of items; index as i; trackBy: trackByFn"
   *ngFor="let hero of heroes; let i=index"
   *ngFor="let hero of heroes; value: myValue"
+  *ngIf=" condition  ;  then  thenBlock  else  elseBlock "
+  *ngIf=" condition  as  value  ;  else  elseBlock "
+  *directive=" let hero "
+  *directive=" let hero = hello "
+  *directive=" let hero of heroes "
+  *directive=" let hero ; of : heroes "
+  *directive=" a "
+  *directive=" a as b "
+  *directive=" a , b "
+  *directive=" a ; b "
+  *directive=" a ; b c "
+  *directive=" a ; b : c "
+  *directive=" a ; b : c as d "
+  *directive=" a ; b as c "
 ></div>
 
 `;
diff --git a/tests/html_angular/attributes.component.html b/tests/html_angular/attributes.component.html
index 25ee90df6721..6a8793c9717b 100644
--- a/tests/html_angular/attributes.component.html
+++ b/tests/html_angular/attributes.component.html
@@ -38,4 +38,18 @@
     *ngFor=" let     item   of   items   ;    index    as   i  ; trackBy  :     trackByFn"
     *ngFor="  let    hero     of heroes; let i  =  index"
     *ngFor="  let    hero     of heroes; value     myValue"
+    *ngIf=" condition  ;  then  thenBlock  else  elseBlock "
+    *ngIf=" condition  as  value  ;  else  elseBlock "
+    *directive=" let hero "
+    *directive=" let hero = hello "
+    *directive=" let hero of heroes "
+    *directive=" let hero ; of : heroes "
+    *directive=" a "
+    *directive=" a as b "
+    *directive=" a , b "
+    *directive=" a ; b "
+    *directive=" a ; b c "
+    *directive=" a ; b : c "
+    *directive=" a ; b : c as d "
+    *directive=" a ; b as c "
 ></div>

From e3b91b951c9244a814be5bf168b7871b57789844 Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Sat, 20 Oct 2018 00:56:13 +0800
Subject: [PATCH 059/177] feat: support angular template bindings

---
 package.json                                  |   2 +-
 src/common/internal-plugins.js                |   5 +
 src/language-html/printer-htmlparser2.js      |  22 ++--
 src/language-html/syntax-angular.js           | 103 ------------------
 src/language-js/parser-angular.js             |   3 +-
 src/language-js/printer-estree.js             |  58 +++++++++-
 .../__snapshots__/jsfmt.spec.js.snap          |  28 ++---
 website/static/worker.js                      |   5 +
 yarn.lock                                     |   8 +-
 9 files changed, 101 insertions(+), 133 deletions(-)
 delete mode 100644 src/language-html/syntax-angular.js

diff --git a/package.json b/package.json
index ebc6fe73ac55..5947374a4c11 100644
--- a/package.json
+++ b/package.json
@@ -19,7 +19,7 @@
     "@babel/parser": "7.1.2",
     "@glimmer/syntax": "0.30.3",
     "@iarna/toml": "2.0.0",
-    "angular-estree-parser": "1.0.0",
+    "angular-estree-parser": "1.1.0",
     "camelcase": "4.1.0",
     "chalk": "2.1.0",
     "cjk-regex": "2.0.0",
diff --git a/src/common/internal-plugins.js b/src/common/internal-plugins.js
index e4cda1a29e7f..4dc6db630614 100644
--- a/src/common/internal-plugins.js
+++ b/src/common/internal-plugins.js
@@ -63,6 +63,11 @@ module.exports = [
       get __ng_interpolation() {
         return eval("require")("../language-js/parser-angular").parsers
           .__ng_interpolation;
+      },
+      // JS - Angular Directive
+      get __ng_directive() {
+        return eval("require")("../language-js/parser-angular").parsers
+          .__ng_directive;
       }
     }
   },
diff --git a/src/language-html/printer-htmlparser2.js b/src/language-html/printer-htmlparser2.js
index cdd9afa0d0c8..24cb3af698f9 100644
--- a/src/language-html/printer-htmlparser2.js
+++ b/src/language-html/printer-htmlparser2.js
@@ -35,7 +35,6 @@ const {
 const preprocess = require("./preprocess");
 const assert = require("assert");
 const { insertPragma } = require("./pragma");
-const { printNgFor } = require("./syntax-angular");
 const { printVueFor, printVueSlotScope } = require("./syntax-vue");
 
 function concat(parts) {
@@ -750,14 +749,10 @@ function printEmbeddedAttributeValue(node, textToDoc, options) {
   }
 
   if (options.parser === "angular") {
-    if (node.key === "*ngFor") {
-      return printNgFor(getValue(), textToDoc);
-    }
-
     /**
-     *     *ngFor="angularDirective"
+     *     *directive="angularDirective"
      */
-    const ngDirectiveBindingPatterns = ["^\\*ng"];
+    const ngDirectiveBindingPatterns = ["^\\*"];
     /**
      *     (click)="angularStatement"
      */
@@ -777,8 +772,17 @@ function printEmbeddedAttributeValue(node, textToDoc, options) {
     }
 
     if (isKeyMatched(ngDirectiveBindingPatterns)) {
-      // TODO
-      return textToDoc(getValue(), { parser: "__js_expression" });
+      return group(
+        concat([
+          indent(
+            concat([
+              softline,
+              textToDoc(getValue(), { parser: "__ng_directive" })
+            ])
+          ),
+          softline
+        ])
+      );
     }
   }
 
diff --git a/src/language-html/syntax-angular.js b/src/language-html/syntax-angular.js
deleted file mode 100644
index 256ee9f5247e..000000000000
--- a/src/language-html/syntax-angular.js
+++ /dev/null
@@ -1,103 +0,0 @@
-"use strict";
-
-const {
-  builders: { concat, group, line, join, softline, indent }
-} = require("../doc");
-
-/**
- *     NgFor ::
- *         '*ngFor="' NgForValue '"'
- *
- *     NgForValue ::
- *         NgForLetOf ( ';' ( NgForLetEqual | NgForColon | NgForAs ) )*
- */
-const IDENTIFIER_PATTERN = "[a-zA-Z_][a-zA-Z0-9_]*";
-/**
- *     NgForLetOf ::
- *         'let' Identifier 'of' Expression
- */
-const NG_FOR_LET_OF_PATTERN = `^let\\s+(${IDENTIFIER_PATTERN})\\s+of\\b\\s*([\\s\\S]+)$`;
-/**
- *     NgForLetEqual ::
- *         'let' Identifier '=' Identifier
- */
-const NG_FOR_LET_EQUAL_PATTERN = `^let\\s+(${IDENTIFIER_PATTERN})\\s*=\\s*(${IDENTIFIER_PATTERN})$`;
-/**
- *     NgForColon ::
- *         Identifier ':' Expression
- */
-const NG_FOR_COLON_PATTERN = `^(${IDENTIFIER_PATTERN})\\s*:?\\s*([\\s\\S]+)$`;
-/**
- *     NgForAs ::
- *         Identifier 'as' Identifier
- */
-const NG_FOR_AS_PATTERN = `^(${IDENTIFIER_PATTERN})\\s+as\\s+(${IDENTIFIER_PATTERN})$`;
-/**
- *     *ngFor="let hero of heroes"
- *     *ngFor="let hero of heroes; let i=index"
- *     *ngFor="let hero of heroes; trackBy: trackByHeroes"
- *     *ngFor="let item of items; index as i; trackBy: trackByFn"
- */
-function printNgFor(data, textToDoc) {
-  return group(
-    concat([
-      indent(
-        concat([
-          softline,
-          join(
-            concat([";", line]),
-            data
-              .split(";")
-              .map(subData => subData.trim())
-              .map(
-                (subData, index) =>
-                  index === 0
-                    ? printNgForLetOf(subData, textToDoc)
-                    : /^let\s/.test(subData)
-                      ? printNgForLetEqual(subData, textToDoc)
-                      : /\sas\s/.test(subData)
-                        ? printNgForAs(subData, textToDoc)
-                        : printNgForColon(subData, textToDoc)
-              )
-          )
-        ])
-      ),
-      softline
-    ])
-  );
-}
-
-function printNgForLetOf(data, textToDoc) {
-  const [, identifier, expression] = data.match(
-    new RegExp(NG_FOR_LET_OF_PATTERN)
-  );
-  return concat([
-    "let ",
-    identifier,
-    " of ",
-    group(textToDoc(expression, { parser: "__js_expression" }))
-  ]);
-}
-
-function printNgForLetEqual(data /*, textToDoc */) {
-  const [, identifier1, identifier2] = data.match(NG_FOR_LET_EQUAL_PATTERN);
-  return concat(["let ", identifier1, "=", identifier2]);
-}
-
-function printNgForColon(data, textToDoc) {
-  const [, identifier, expression] = data.match(NG_FOR_COLON_PATTERN);
-  return concat([
-    identifier,
-    ": ",
-    group(textToDoc(expression, { parser: "__js_expression" }))
-  ]);
-}
-
-function printNgForAs(data /*, textToDoc */) {
-  const [, identifier1, identifier2] = data.match(NG_FOR_AS_PATTERN);
-  return concat([identifier1, " as ", identifier2]);
-}
-
-module.exports = {
-  printNgFor
-};
diff --git a/src/language-js/parser-angular.js b/src/language-js/parser-angular.js
index 6be18845891e..a8cc37370f73 100644
--- a/src/language-js/parser-angular.js
+++ b/src/language-js/parser-angular.js
@@ -14,6 +14,7 @@ module.exports = {
   parsers: {
     __ng_action: createParser((text, ng) => ng.parseAction(text)),
     __ng_binding: createParser((text, ng) => ng.parseBinding(text)),
-    __ng_interpolation: createParser((text, ng) => ng.parseInterpolation(text))
+    __ng_interpolation: createParser((text, ng) => ng.parseInterpolation(text)),
+    __ng_directive: createParser((text, ng) => ng.parseTemplateBindings(text))
   }
 };
diff --git a/src/language-js/printer-estree.js b/src/language-js/printer-estree.js
index 9eb6d54538ea..8cc34763fac3 100644
--- a/src/language-js/printer-estree.js
+++ b/src/language-js/printer-estree.js
@@ -3291,7 +3291,7 @@ function printPathNoParens(path, options, print, args) {
         [].concat(
           shouldPrintSurroundingSpaces ? " " : [],
           path.call(print, "node"),
-          n.node.comments.length === 0
+          !n.node.comments || n.node.comments.length === 0
             ? []
             : concat([" //", n.node.comments[0].value]),
           shouldPrintSurroundingSpaces ? " " : []
@@ -3304,12 +3304,68 @@ function printPathNoParens(path, options, print, args) {
       return "";
     case "NGQuotedExpression":
       return concat([n.prefix, ":", n.value]);
+    case "NGMicrosyntax":
+      return concat(
+        path.map(
+          (childPath, index) =>
+            concat([
+              index === 0
+                ? ""
+                : isNgForOf(childPath)
+                  ? " "
+                  : concat([";", line]),
+              print(childPath)
+            ]),
+          "body"
+        )
+      );
+    case "NGMicrosyntaxKey":
+      return /^[a-z_$][a-z0-9_$]*(-[a-z_$][a-z0-9_$])*$/i.test(n.name)
+        ? n.name
+        : JSON.stringify(n.name);
+    case "NGMicrosyntaxExpression":
+      return concat([
+        path.call(print, "expression"),
+        n.alias === null ? "" : concat([" as ", path.call(print, "alias")])
+      ]);
+    case "NGMicrosyntaxKeyedExpression":
+      return concat([
+        path.call(print, "key"),
+        isNgForOf(path) ? " " : ": ",
+        path.call(print, "expression")
+      ]);
+    case "NGMicrosyntaxLet":
+      return concat([
+        "let ",
+        path.call(print, "key"),
+        n.value === null ? "" : concat(["=", path.call(print, "value")])
+      ]);
+    case "NGMicrosyntaxAs":
+      return concat([
+        path.call(print, "key"),
+        " as ",
+        path.call(print, "alias")
+      ]);
     default:
       /* istanbul ignore next */
       throw new Error("unknown type: " + JSON.stringify(n.type));
   }
 }
 
+/** prefer `let hero of heros` over `let hero; of: heros` */
+function isNgForOf(path) {
+  const node = path.getValue();
+  const index = path.getName();
+  const parentNode = path.getParentNode();
+  return (
+    node.type === "NGMicrosyntaxKeyedExpression" &&
+    node.key.name === "of" &&
+    index === 1 &&
+    parentNode.body[0].type === "NGMicrosyntaxLet" &&
+    parentNode.body[0].value === null
+  );
+}
+
 function printStatementSequence(path, options, print) {
   const printed = [];
 
diff --git a/tests/html_angular/__snapshots__/jsfmt.spec.js.snap b/tests/html_angular/__snapshots__/jsfmt.spec.js.snap
index ede1d0d8891c..a3b344213602 100644
--- a/tests/html_angular/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_angular/__snapshots__/jsfmt.spec.js.snap
@@ -100,20 +100,20 @@ exports[`attributes.component.html - angular-verify 1`] = `
   *ngFor="let item of items; index as i; trackBy: trackByFn"
   *ngFor="let hero of heroes; let i=index"
   *ngFor="let hero of heroes; value: myValue"
-  *ngIf=" condition  ;  then  thenBlock  else  elseBlock "
-  *ngIf=" condition  as  value  ;  else  elseBlock "
-  *directive=" let hero "
-  *directive=" let hero = hello "
-  *directive=" let hero of heroes "
-  *directive=" let hero ; of : heroes "
-  *directive=" a "
-  *directive=" a as b "
-  *directive=" a , b "
-  *directive=" a ; b "
-  *directive=" a ; b c "
-  *directive=" a ; b : c "
-  *directive=" a ; b : c as d "
-  *directive=" a ; b as c "
+  *ngIf="condition; then: thenBlock; else: elseBlock"
+  *ngIf="condition as value; else: elseBlock"
+  *directive="let hero"
+  *directive="let hero=hello"
+  *directive="let hero of heroes"
+  *directive="let hero of heroes"
+  *directive="a"
+  *directive="a as b"
+  *directive="a; b"
+  *directive="a; b"
+  *directive="a; b: c"
+  *directive="a; b: c"
+  *directive="a; b: c as d"
+  *directive="a; b as c"
 ></div>
 
 `;
diff --git a/website/static/worker.js b/website/static/worker.js
index 0609b156436f..0531ee6f6577 100644
--- a/website/static/worker.js
+++ b/website/static/worker.js
@@ -58,6 +58,11 @@ var parsers = {
     importScriptOnce("lib/parser-angular.js");
     return prettierPlugins.angular.parsers.__ng_interpolation;
   },
+  // JS - Angular Directive
+  get __ng_directive() {
+    importScriptOnce("lib/parser-angular.js");
+    return prettierPlugins.angular.parsers.__ng_directive;
+  },
 
   // CSS
   get css() {
diff --git a/yarn.lock b/yarn.lock
index 619d11d6a244..e973ead4202c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -760,10 +760,10 @@ amdefine@>=0.0.4:
   resolved "https://registry.yarnpkg.com/amdefine/-/amdefine-1.0.1.tgz#4a5282ac164729e93619bcfd3ad151f817ce91f5"
   integrity sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU=
 
-angular-estree-parser@1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/angular-estree-parser/-/angular-estree-parser-1.0.0.tgz#f47ebd4322243cba3702f870e694f3d1a39f7751"
-  integrity sha512-iNuMnoaDV9gUO7D6vzr+tWptRa+GFB/lSbqoqFvbuQ+vju29MomqcJ15r7nQ1DSUWokMsutYCH0rthzFw6eJxg==
+angular-estree-parser@1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/angular-estree-parser/-/angular-estree-parser-1.1.0.tgz#64bb1f8ebced8167ad64bf93c00d65f142a83fa5"
+  integrity sha512-kLigPNv5DoOU0E+lMh9aAFWakAoOPtM5Xk6HOKHLVZqRWM30Z6MnQrXSGwOShWv7HyXtpqftoe85dYvFPVW8Sg==
   dependencies:
     lines-and-columns "^1.1.6"
     tslib "^1.9.3"

From 55057f975675b0e0fda238740de95c7b7f5cc2b8 Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Sat, 20 Oct 2018 10:30:27 +0800
Subject: [PATCH 060/177] test: add tests

---
 .../__snapshots__/jsfmt.spec.js.snap          | 34 +++++++++++++++++++
 .../html_comments/surrounding-empty-line.html |  4 +++
 .../__snapshots__/jsfmt.spec.js.snap          | 34 +++++++++++++++++++
 tests/html_tags/tags.html                     |  1 +
 4 files changed, 73 insertions(+)

diff --git a/tests/html_comments/__snapshots__/jsfmt.spec.js.snap b/tests/html_comments/__snapshots__/jsfmt.spec.js.snap
index 3bcbdf8999fb..1356a50ece06 100644
--- a/tests/html_comments/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_comments/__snapshots__/jsfmt.spec.js.snap
@@ -405,6 +405,10 @@ exports[`surrounding-empty-line.html - html-verify 1`] = `
 1 --><span>a</span><!--
 2 --><span>b</span><!--
 3 --></span>
+
+123<!---->456
+
+123<!--x-->456
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 <ul>
   <!-- 123
@@ -449,6 +453,13 @@ exports[`surrounding-empty-line.html - html-verify 1`] = `
   ><!-- 3
 --></span>
 
+123<!--
+
+-->456 123<!--
+
+  x
+-->456
+
 `;
 
 exports[`surrounding-empty-line.html - html-verify 2`] = `
@@ -487,6 +498,10 @@ exports[`surrounding-empty-line.html - html-verify 2`] = `
 1 --><span>a</span><!--
 2 --><span>b</span><!--
 3 --></span>
+
+123<!---->456
+
+123<!--x-->456
 ~
 <ul>
   <!--
@@ -547,6 +562,14 @@ exports[`surrounding-empty-line.html - html-verify 2`] = `
     3
 --></span>
 
+123<!--
+
+-->456
+123<!--
+
+  x
+-->456
+
 `;
 
 exports[`surrounding-empty-line.html - html-verify 3`] = `
@@ -585,6 +608,10 @@ exports[`surrounding-empty-line.html - html-verify 3`] = `
 1 --><span>a</span><!--
 2 --><span>b</span><!--
 3 --></span>
+
+123<!---->456
+
+123<!--x-->456
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 <ul>
   <!-- 123
@@ -629,4 +656,11 @@ exports[`surrounding-empty-line.html - html-verify 3`] = `
   ><!-- 3
 --></span>
 
+123<!--
+
+-->456 123<!--
+
+  x
+-->456
+
 `;
diff --git a/tests/html_comments/surrounding-empty-line.html b/tests/html_comments/surrounding-empty-line.html
index 618d5a96558d..e3abf40b3f7f 100644
--- a/tests/html_comments/surrounding-empty-line.html
+++ b/tests/html_comments/surrounding-empty-line.html
@@ -33,3 +33,7 @@
 1 --><span>a</span><!--
 2 --><span>b</span><!--
 3 --></span>
+
+123<!---->456
+
+123<!--x-->456
diff --git a/tests/html_tags/__snapshots__/jsfmt.spec.js.snap b/tests/html_tags/__snapshots__/jsfmt.spec.js.snap
index dfef64379090..41b1adec7e0d 100644
--- a/tests/html_tags/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_tags/__snapshots__/jsfmt.spec.js.snap
@@ -1525,6 +1525,7 @@ exports[`tags.html - html-verify 1`] = `
 >
 <span>*<b>200</b></span>
 <img src="longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong" />123
+<div>123<meta attr/>456</div>
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 <br />
 <br />
@@ -1650,6 +1651,12 @@ exports[`tags.html - html-verify 1`] = `
 <img
   src="longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong"
 />123
+<div>
+  123<meta
+
+    attr
+  />456
+</div>
 
 `;
 
@@ -1715,6 +1722,7 @@ exports[`tags.html - html-verify 2`] = `
 >
 <span>*<b>200</b></span>
 <img src="longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong" />123
+<div>123<meta attr/>456</div>
 ~
 <br />
 <br />
@@ -1957,6 +1965,12 @@ exports[`tags.html - html-verify 2`] = `
 <img
   src="longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong"
 />123
+<div>
+  123<meta
+
+    attr
+  />456
+</div>
 
 `;
 
@@ -2022,6 +2036,7 @@ exports[`tags.html - html-verify 3`] = `
 >
 <span>*<b>200</b></span>
 <img src="longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong" />123
+<div>123<meta attr/>456</div>
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 <br />
 <br />
@@ -2090,6 +2105,12 @@ exports[`tags.html - html-verify 3`] = `
   >789
 </ul>
 <span>*<b>200</b></span> <img src="longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong" />123
+<div>
+  123<meta
+
+    attr
+  />456
+</div>
 
 `;
 
@@ -2155,6 +2176,7 @@ exports[`tags.html - html-verify 4`] = `
 >
 <span>*<b>200</b></span>
 <img src="longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong" />123
+<div>123<meta attr/>456</div>
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 <br />
 <br />
@@ -2265,6 +2287,12 @@ exports[`tags.html - html-verify 4`] = `
 <img
   src="longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong"
 />123
+<div
+  >123<meta
+
+    attr
+  />456</div
+>
 
 `;
 
@@ -2330,6 +2358,7 @@ exports[`tags.html - html-verify 5`] = `
 >
 <span>*<b>200</b></span>
 <img src="longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong" />123
+<div>123<meta attr/>456</div>
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 <br />
 <br />
@@ -2456,6 +2485,11 @@ exports[`tags.html - html-verify 5`] = `
   src="longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong"
 />
 123
+<div>
+  123
+  <meta attr />
+  456
+</div>
 
 `;
 
diff --git a/tests/html_tags/tags.html b/tests/html_tags/tags.html
index 3f29e39c77bf..c601caa3ad64 100644
--- a/tests/html_tags/tags.html
+++ b/tests/html_tags/tags.html
@@ -59,3 +59,4 @@
 >
 <span>*<b>200</b></span>
 <img src="longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong" />123
+<div>123<meta attr/>456</div>

From 2f1ac609107d51b1a542062e04486b570ac32d1f Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Sat, 20 Oct 2018 10:31:05 +0800
Subject: [PATCH 061/177] fix: remove unexpected newlines

---
 src/language-html/printer-htmlparser2.js             | 7 +++----
 tests/html_comments/__snapshots__/jsfmt.spec.js.snap | 6 ------
 tests/html_tags/__snapshots__/jsfmt.spec.js.snap     | 4 ----
 3 files changed, 3 insertions(+), 14 deletions(-)

diff --git a/src/language-html/printer-htmlparser2.js b/src/language-html/printer-htmlparser2.js
index 24cb3af698f9..91583a844869 100644
--- a/src/language-html/printer-htmlparser2.js
+++ b/src/language-html/printer-htmlparser2.js
@@ -324,12 +324,11 @@ function printChildren(path, options, print) {
        */
       (nextNode.firstChild ||
         /**
-         *     123<br />
+         *     123<!--
          *            ~
+         *     -->
          */
-        (nextNode.type === "tag" &&
-          nextNode.isSelfClosing &&
-          nextNode.attributes.length === 0))) ||
+        nextNode.isSelfClosing)) ||
       /**
        *     <img
        *       src="long"
diff --git a/tests/html_comments/__snapshots__/jsfmt.spec.js.snap b/tests/html_comments/__snapshots__/jsfmt.spec.js.snap
index 1356a50ece06..cae3719e31cc 100644
--- a/tests/html_comments/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_comments/__snapshots__/jsfmt.spec.js.snap
@@ -454,9 +454,7 @@ exports[`surrounding-empty-line.html - html-verify 1`] = `
 --></span>
 
 123<!--
-
 -->456 123<!--
-
   x
 -->456
 
@@ -563,10 +561,8 @@ exports[`surrounding-empty-line.html - html-verify 2`] = `
 --></span>
 
 123<!--
-
 -->456
 123<!--
-
   x
 -->456
 
@@ -657,9 +653,7 @@ exports[`surrounding-empty-line.html - html-verify 3`] = `
 --></span>
 
 123<!--
-
 -->456 123<!--
-
   x
 -->456
 
diff --git a/tests/html_tags/__snapshots__/jsfmt.spec.js.snap b/tests/html_tags/__snapshots__/jsfmt.spec.js.snap
index 41b1adec7e0d..7d34811ec90f 100644
--- a/tests/html_tags/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_tags/__snapshots__/jsfmt.spec.js.snap
@@ -1653,7 +1653,6 @@ exports[`tags.html - html-verify 1`] = `
 />123
 <div>
   123<meta
-
     attr
   />456
 </div>
@@ -1967,7 +1966,6 @@ exports[`tags.html - html-verify 2`] = `
 />123
 <div>
   123<meta
-
     attr
   />456
 </div>
@@ -2107,7 +2105,6 @@ exports[`tags.html - html-verify 3`] = `
 <span>*<b>200</b></span> <img src="longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong" />123
 <div>
   123<meta
-
     attr
   />456
 </div>
@@ -2289,7 +2286,6 @@ exports[`tags.html - html-verify 4`] = `
 />123
 <div
   >123<meta
-
     attr
   />456</div
 >

From 907cfcb8bbf264bef0770313226ef290c79b0f84 Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Sat, 20 Oct 2018 10:35:27 +0800
Subject: [PATCH 062/177] test: add tests

---
 .../__snapshots__/jsfmt.spec.js.snap                     | 9 +++++++++
 tests/html_prettier_ignore/cases.html                    | 1 +
 2 files changed, 10 insertions(+)
 create mode 100644 tests/html_prettier_ignore/cases.html

diff --git a/tests/html_prettier_ignore/__snapshots__/jsfmt.spec.js.snap b/tests/html_prettier_ignore/__snapshots__/jsfmt.spec.js.snap
index 53a4469bfc7d..5ac5f607c010 100644
--- a/tests/html_prettier_ignore/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_prettier_ignore/__snapshots__/jsfmt.spec.js.snap
@@ -1,5 +1,14 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`cases.html - html-verify 1`] = `
+123<!--prettier-ignore-->456
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+123<!--
+  prettier-ignore
+
+
+`;
+
 exports[`document.html - html-verify 1`] = `
 <!doctype html>
 <html class="no-js" lang="en">
diff --git a/tests/html_prettier_ignore/cases.html b/tests/html_prettier_ignore/cases.html
new file mode 100644
index 000000000000..797dc62654b5
--- /dev/null
+++ b/tests/html_prettier_ignore/cases.html
@@ -0,0 +1 @@
+123<!--prettier-ignore-->456

From 295887484a02c25a61ba22c71681429efa40a11f Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Sat, 20 Oct 2018 10:35:52 +0800
Subject: [PATCH 063/177] fix: disallow prettier-ignore for text node

---
 src/language-html/utils.js                                  | 2 +-
 tests/html_prettier_ignore/__snapshots__/jsfmt.spec.js.snap | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/language-html/utils.js b/src/language-html/utils.js
index 41c2fec282dc..62b5166dbf57 100644
--- a/src/language-html/utils.js
+++ b/src/language-html/utils.js
@@ -70,7 +70,7 @@ function mapObject(object, fn) {
 
 function hasPrettierIgnore(path) {
   const node = path.getValue();
-  if (node.type === "attribute") {
+  if (node.type === "attribute" || node.type === "text") {
     return false;
   }
 
diff --git a/tests/html_prettier_ignore/__snapshots__/jsfmt.spec.js.snap b/tests/html_prettier_ignore/__snapshots__/jsfmt.spec.js.snap
index 5ac5f607c010..68cadee9880c 100644
--- a/tests/html_prettier_ignore/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_prettier_ignore/__snapshots__/jsfmt.spec.js.snap
@@ -5,7 +5,7 @@ exports[`cases.html - html-verify 1`] = `
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 123<!--
   prettier-ignore
-
+-->456
 
 `;
 

From dd48e4dc899afad7968055f966c1dd0be544be9d Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Sat, 20 Oct 2018 10:48:07 +0800
Subject: [PATCH 064/177] test: add tests

---
 tests/html_prettier_ignore/__snapshots__/jsfmt.spec.js.snap | 6 ++++++
 tests/html_prettier_ignore/cases.html                       | 2 ++
 2 files changed, 8 insertions(+)

diff --git a/tests/html_prettier_ignore/__snapshots__/jsfmt.spec.js.snap b/tests/html_prettier_ignore/__snapshots__/jsfmt.spec.js.snap
index 68cadee9880c..912c3fbb8ac6 100644
--- a/tests/html_prettier_ignore/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_prettier_ignore/__snapshots__/jsfmt.spec.js.snap
@@ -2,11 +2,17 @@
 
 exports[`cases.html - html-verify 1`] = `
 123<!--prettier-ignore-->456
+
+<span></span><!--prettier-ignore--><span></span>
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 123<!--
   prettier-ignore
 -->456
 
+<span></span
+><!-- prettier-ignore
+<span></span>
+
 `;
 
 exports[`document.html - html-verify 1`] = `
diff --git a/tests/html_prettier_ignore/cases.html b/tests/html_prettier_ignore/cases.html
index 797dc62654b5..3072927ed3ab 100644
--- a/tests/html_prettier_ignore/cases.html
+++ b/tests/html_prettier_ignore/cases.html
@@ -1 +1,3 @@
 123<!--prettier-ignore-->456
+
+<span></span><!--prettier-ignore--><span></span>

From 7758219f4936811432c009af74a0d5d1f5842a49 Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Sat, 20 Oct 2018 10:49:35 +0800
Subject: [PATCH 065/177] fix: handle prettier-ignore with borrowed tags

---
 src/language-html/printer-htmlparser2.js      | 29 ++++++++++++++++---
 .../__snapshots__/jsfmt.spec.js.snap          |  2 +-
 2 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/src/language-html/printer-htmlparser2.js b/src/language-html/printer-htmlparser2.js
index 91583a844869..86b486a46636 100644
--- a/src/language-html/printer-htmlparser2.js
+++ b/src/language-html/printer-htmlparser2.js
@@ -281,7 +281,7 @@ function printChildren(path, options, print) {
                     ? hardline
                     : ""
                 ]),
-            print(childPath)
+            printChild(childPath)
           ]);
         }, "children")
       )
@@ -307,14 +307,36 @@ function printChildren(path, options, print) {
       }
     }
 
+    const childDoc = printChild(childPath);
     Array.prototype.push.apply(
       parts,
-      childNode.type === "text" ? print(childPath).parts : [print(childPath)]
+      childNode.type === "text" && childDoc.parts ? childDoc.parts : [childDoc]
     );
   }, "children");
 
   return fill(parts);
 
+  function printChild(childPath) {
+    if (!hasPrettierIgnore(childPath)) {
+      return print(childPath);
+    }
+    const child = childPath.getValue();
+    return concat([
+      printOpeningTagPrefix(child),
+      options.originalText.slice(
+        options.locStart(child) +
+          (child.prev && needsToBorrowNextOpeningTagStartMarker(child.prev)
+            ? printOpeningTagStartMarker(child).length
+            : 0),
+        options.locEnd(child) -
+          (child.next && needsToBorrowPrevClosingTagEndMarker(child.next)
+            ? printClosingTagEndMarker(child).length
+            : 0),
+        printClosingTagSuffix(child)
+      )
+    ]);
+  }
+
   function printBetweenLine(prevNode, nextNode) {
     return (needsToBorrowNextOpeningTagStartMarker(prevNode) &&
       /**
@@ -793,6 +815,5 @@ module.exports = {
   print: genericPrint,
   insertPragma,
   massageAstNode: clean,
-  embed,
-  hasPrettierIgnore
+  embed
 };
diff --git a/tests/html_prettier_ignore/__snapshots__/jsfmt.spec.js.snap b/tests/html_prettier_ignore/__snapshots__/jsfmt.spec.js.snap
index 912c3fbb8ac6..12271eb0a3c2 100644
--- a/tests/html_prettier_ignore/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_prettier_ignore/__snapshots__/jsfmt.spec.js.snap
@@ -11,7 +11,7 @@ exports[`cases.html - html-verify 1`] = `
 
 <span></span
 ><!-- prettier-ignore
-<span></span>
+--><span></span>
 
 `;
 

From 002b3f8a8f2d1e5301f594e482cbc356c82cfbfc Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Sat, 20 Oct 2018 10:54:18 +0800
Subject: [PATCH 066/177] test: add tests

---
 tests/html_angular/__snapshots__/jsfmt.spec.js.snap | 8 ++++++++
 tests/html_angular/attributes.component.html        | 4 ++++
 2 files changed, 12 insertions(+)

diff --git a/tests/html_angular/__snapshots__/jsfmt.spec.js.snap b/tests/html_angular/__snapshots__/jsfmt.spec.js.snap
index a3b344213602..16da375b0fe5 100644
--- a/tests/html_angular/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_angular/__snapshots__/jsfmt.spec.js.snap
@@ -2,6 +2,9 @@
 
 exports[`attributes.component.html - angular-verify 1`] = `
 <div
+    bindon-target=" a | b : c "
+    [(target)]=" a | b : c "
+    bind-target=" a | b : c "
     [target]=" a | b : c "
     [target]=" 0 - 1 "
     [target]=" - 1 "
@@ -29,6 +32,7 @@ exports[`attributes.component.html - angular-verify 1`] = `
     [target]=" javascript : 'hello world' "
     [target]=" a ?. b ( ) "
     [target]=" a ?. b "
+    on-target=" a = 1 "
     (target)=" a = 1 "
     (target)=" a . b = 1 "
     (target)=" a [ b ] = 1 "
@@ -58,6 +62,9 @@ exports[`attributes.component.html - angular-verify 1`] = `
 ></div>
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 <div
+  bindon-target=" a | b : c "
+  [(target)]="a | b:c"
+  bind-target=" a | b : c "
   [target]="a | b:c"
   [target]="0 - 1"
   [target]="-1"
@@ -85,6 +92,7 @@ exports[`attributes.component.html - angular-verify 1`] = `
   [target]="javascript: 'hello world' "
   [target]="a?.b()"
   [target]="a?.b"
+  on-target=" a = 1 "
   (target)="(a = 1)"
   (target)="(a.b = 1)"
   (target)="(a[b] = 1)"
diff --git a/tests/html_angular/attributes.component.html b/tests/html_angular/attributes.component.html
index 6a8793c9717b..7a05b50cccf8 100644
--- a/tests/html_angular/attributes.component.html
+++ b/tests/html_angular/attributes.component.html
@@ -1,4 +1,7 @@
 <div
+    bindon-target=" a | b : c "
+    [(target)]=" a | b : c "
+    bind-target=" a | b : c "
     [target]=" a | b : c "
     [target]=" 0 - 1 "
     [target]=" - 1 "
@@ -26,6 +29,7 @@
     [target]=" javascript : 'hello world' "
     [target]=" a ?. b ( ) "
     [target]=" a ?. b "
+    on-target=" a = 1 "
     (target)=" a = 1 "
     (target)=" a . b = 1 "
     (target)=" a [ b ] = 1 "

From 45d041f3b2b4efece271ea0d1c1e83d04f2d1347 Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Sat, 20 Oct 2018 10:55:14 +0800
Subject: [PATCH 067/177] feat(angular): format `on-`, `bind-` and `bindon-`

---
 src/language-html/printer-htmlparser2.js            | 7 +++++--
 tests/html_angular/__snapshots__/jsfmt.spec.js.snap | 6 +++---
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/language-html/printer-htmlparser2.js b/src/language-html/printer-htmlparser2.js
index 86b486a46636..78f9d47fc2b9 100644
--- a/src/language-html/printer-htmlparser2.js
+++ b/src/language-html/printer-htmlparser2.js
@@ -776,13 +776,16 @@ function printEmbeddedAttributeValue(node, textToDoc, options) {
     const ngDirectiveBindingPatterns = ["^\\*"];
     /**
      *     (click)="angularStatement"
+     *     on-click="angularStatement"
      */
-    const ngStatementBindingPatterns = ["^\\(.+\\)$"];
+    const ngStatementBindingPatterns = ["^\\(.+\\)$", "^on-"];
     /**
      *     [target]="angularExpression"
+     *     bind-target="angularExpression"
      *     [(target)]="angularExpression"
+     *     bindon-target="angularExpression"
      */
-    const ngExpressionBindingPatterns = ["^\\[.+\\]$"];
+    const ngExpressionBindingPatterns = ["^\\[.+\\]$", "^bind(on)?-"];
 
     if (isKeyMatched(ngStatementBindingPatterns)) {
       return textToDoc(getValue(), { parser: "__ng_action" });
diff --git a/tests/html_angular/__snapshots__/jsfmt.spec.js.snap b/tests/html_angular/__snapshots__/jsfmt.spec.js.snap
index 16da375b0fe5..47339b73da3e 100644
--- a/tests/html_angular/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_angular/__snapshots__/jsfmt.spec.js.snap
@@ -62,9 +62,9 @@ exports[`attributes.component.html - angular-verify 1`] = `
 ></div>
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 <div
-  bindon-target=" a | b : c "
+  bindon-target="a | b:c"
   [(target)]="a | b:c"
-  bind-target=" a | b : c "
+  bind-target="a | b:c"
   [target]="a | b:c"
   [target]="0 - 1"
   [target]="-1"
@@ -92,7 +92,7 @@ exports[`attributes.component.html - angular-verify 1`] = `
   [target]="javascript: 'hello world' "
   [target]="a?.b()"
   [target]="a?.b"
-  on-target=" a = 1 "
+  on-target="(a = 1)"
   (target)="(a = 1)"
   (target)="(a.b = 1)"
   (target)="(a[b] = 1)"

From eaa418f71f50fb277559c7e84ff77e59a2600d9f Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Sat, 20 Oct 2018 11:49:08 +0800
Subject: [PATCH 068/177] test: add tests

---
 .../__snapshots__/jsfmt.spec.js.snap          | 27 +++++++++++++++++++
 .../html_comments/surrounding-empty-line.html |  3 +++
 2 files changed, 30 insertions(+)

diff --git a/tests/html_comments/__snapshots__/jsfmt.spec.js.snap b/tests/html_comments/__snapshots__/jsfmt.spec.js.snap
index cae3719e31cc..0612836a062d 100644
--- a/tests/html_comments/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_comments/__snapshots__/jsfmt.spec.js.snap
@@ -409,6 +409,9 @@ exports[`surrounding-empty-line.html - html-verify 1`] = `
 123<!---->456
 
 123<!--x-->456
+
+<!-- A
+     B -->
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 <ul>
   <!-- 123
@@ -458,6 +461,12 @@ exports[`surrounding-empty-line.html - html-verify 1`] = `
   x
 -->456
 
+<!--
+
+  A
+      B
+-->
+
 `;
 
 exports[`surrounding-empty-line.html - html-verify 2`] = `
@@ -500,6 +509,9 @@ exports[`surrounding-empty-line.html - html-verify 2`] = `
 123<!---->456
 
 123<!--x-->456
+
+<!-- A
+     B -->
 ~
 <ul>
   <!--
@@ -566,6 +578,12 @@ exports[`surrounding-empty-line.html - html-verify 2`] = `
   x
 -->456
 
+<!--
+
+  A
+      B
+-->
+
 `;
 
 exports[`surrounding-empty-line.html - html-verify 3`] = `
@@ -608,6 +626,9 @@ exports[`surrounding-empty-line.html - html-verify 3`] = `
 123<!---->456
 
 123<!--x-->456
+
+<!-- A
+     B -->
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 <ul>
   <!-- 123
@@ -657,4 +678,10 @@ exports[`surrounding-empty-line.html - html-verify 3`] = `
   x
 -->456
 
+<!--
+
+  A
+      B
+-->
+
 `;
diff --git a/tests/html_comments/surrounding-empty-line.html b/tests/html_comments/surrounding-empty-line.html
index e3abf40b3f7f..316406103c16 100644
--- a/tests/html_comments/surrounding-empty-line.html
+++ b/tests/html_comments/surrounding-empty-line.html
@@ -37,3 +37,6 @@
 123<!---->456
 
 123<!--x-->456
+
+<!-- A
+     B -->

From e78687bd2be1444c78861cf5009100fe321032af Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Sat, 20 Oct 2018 11:51:05 +0800
Subject: [PATCH 069/177] fix: no unexpected newlines in comments

---
 src/language-html/utils.js                           | 6 ++++--
 tests/html_comments/__snapshots__/jsfmt.spec.js.snap | 9 +++------
 2 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/src/language-html/utils.js b/src/language-html/utils.js
index 62b5166dbf57..3f0b5a7f246a 100644
--- a/src/language-html/utils.js
+++ b/src/language-html/utils.js
@@ -379,7 +379,9 @@ function getCommentData(node) {
     dataWithoutLeadingLine
   );
 
-  const commentDataStartColumn = node.startLocation.column + "<!--".length;
+  const leadingSpaces = rightTrimmedData.match(/^[^\n\S]*/)[0].length;
+  const commentDataStartColumn =
+    node.startLocation.column + "<!--".length + leadingSpaces;
 
   /**
    *     <!-- 123
@@ -387,7 +389,7 @@ function getCommentData(node) {
    */
   if (minIndentationForDataWithoutLeadingLine >= commentDataStartColumn) {
     return dedentString(
-      " ".repeat(commentDataStartColumn) + "\n" + rightTrimmedData
+      " ".repeat(commentDataStartColumn) + rightTrimmedData.slice(leadingSpaces)
     );
   }
 
diff --git a/tests/html_comments/__snapshots__/jsfmt.spec.js.snap b/tests/html_comments/__snapshots__/jsfmt.spec.js.snap
index 0612836a062d..1deca35f14bd 100644
--- a/tests/html_comments/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_comments/__snapshots__/jsfmt.spec.js.snap
@@ -462,9 +462,8 @@ exports[`surrounding-empty-line.html - html-verify 1`] = `
 -->456
 
 <!--
-
   A
-      B
+  B
 -->
 
 `;
@@ -579,9 +578,8 @@ exports[`surrounding-empty-line.html - html-verify 2`] = `
 -->456
 
 <!--
-
   A
-      B
+  B
 -->
 
 `;
@@ -679,9 +677,8 @@ exports[`surrounding-empty-line.html - html-verify 3`] = `
 -->456
 
 <!--
-
   A
-      B
+  B
 -->
 
 `;

From feb12d1aad17b530756de4f958dc9530dcc76ec0 Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Sat, 20 Oct 2018 12:17:13 +0800
Subject: [PATCH 070/177] test: add tests

---
 .../__snapshots__/jsfmt.spec.js.snap          | 33 +++++++++++++++++++
 tests/html_tags/tags.html                     |  1 +
 2 files changed, 34 insertions(+)

diff --git a/tests/html_tags/__snapshots__/jsfmt.spec.js.snap b/tests/html_tags/__snapshots__/jsfmt.spec.js.snap
index 7d34811ec90f..4b00f27d29dc 100644
--- a/tests/html_tags/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_tags/__snapshots__/jsfmt.spec.js.snap
@@ -1526,6 +1526,7 @@ exports[`tags.html - html-verify 1`] = `
 <span>*<b>200</b></span>
 <img src="longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong" />123
 <div>123<meta attr/>456</div>
+<p>x<span a="b"></span></p>
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 <br />
 <br />
@@ -1656,6 +1657,12 @@ exports[`tags.html - html-verify 1`] = `
     attr
   />456
 </div>
+<p>
+  x<span
+
+    a="b"
+  ></span>
+</p>
 
 `;
 
@@ -1722,6 +1729,7 @@ exports[`tags.html - html-verify 2`] = `
 <span>*<b>200</b></span>
 <img src="longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong" />123
 <div>123<meta attr/>456</div>
+<p>x<span a="b"></span></p>
 ~
 <br />
 <br />
@@ -1969,6 +1977,12 @@ exports[`tags.html - html-verify 2`] = `
     attr
   />456
 </div>
+<p>
+  x<span
+
+    a="b"
+  ></span>
+</p>
 
 `;
 
@@ -2035,6 +2049,7 @@ exports[`tags.html - html-verify 3`] = `
 <span>*<b>200</b></span>
 <img src="longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong" />123
 <div>123<meta attr/>456</div>
+<p>x<span a="b"></span></p>
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 <br />
 <br />
@@ -2108,6 +2123,12 @@ exports[`tags.html - html-verify 3`] = `
     attr
   />456
 </div>
+<p>
+  x<span
+
+    a="b"
+  ></span>
+</p>
 
 `;
 
@@ -2174,6 +2195,7 @@ exports[`tags.html - html-verify 4`] = `
 <span>*<b>200</b></span>
 <img src="longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong" />123
 <div>123<meta attr/>456</div>
+<p>x<span a="b"></span></p>
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 <br />
 <br />
@@ -2289,6 +2311,12 @@ exports[`tags.html - html-verify 4`] = `
     attr
   />456</div
 >
+<p
+  >x<span
+
+    a="b"
+  ></span
+></p>
 
 `;
 
@@ -2355,6 +2383,7 @@ exports[`tags.html - html-verify 5`] = `
 <span>*<b>200</b></span>
 <img src="longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong" />123
 <div>123<meta attr/>456</div>
+<p>x<span a="b"></span></p>
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 <br />
 <br />
@@ -2486,6 +2515,10 @@ exports[`tags.html - html-verify 5`] = `
   <meta attr />
   456
 </div>
+<p>
+  x
+  <span a="b"></span>
+</p>
 
 `;
 
diff --git a/tests/html_tags/tags.html b/tests/html_tags/tags.html
index c601caa3ad64..2184093e7601 100644
--- a/tests/html_tags/tags.html
+++ b/tests/html_tags/tags.html
@@ -60,3 +60,4 @@
 <span>*<b>200</b></span>
 <img src="longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong" />123
 <div>123<meta attr/>456</div>
+<p>x<span a="b"></span></p>

From 9d47dfca0596d3d245c755c838b599be6d56d243 Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Sat, 20 Oct 2018 12:19:03 +0800
Subject: [PATCH 071/177] fix: no unexpected newlines in open tags

---
 src/language-html/printer-htmlparser2.js         | 8 +++++++-
 tests/html_tags/__snapshots__/jsfmt.spec.js.snap | 4 ----
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/language-html/printer-htmlparser2.js b/src/language-html/printer-htmlparser2.js
index 78f9d47fc2b9..268050e15ea1 100644
--- a/src/language-html/printer-htmlparser2.js
+++ b/src/language-html/printer-htmlparser2.js
@@ -350,7 +350,13 @@ function printChildren(path, options, print) {
          *            ~
          *     -->
          */
-        nextNode.isSelfClosing)) ||
+        nextNode.isSelfClosing ||
+        /**
+         *     123<span
+         *             ~
+         *       attr
+         */
+        (nextNode.type === "tag" && nextNode.attributes.length !== 0))) ||
       /**
        *     <img
        *       src="long"
diff --git a/tests/html_tags/__snapshots__/jsfmt.spec.js.snap b/tests/html_tags/__snapshots__/jsfmt.spec.js.snap
index 4b00f27d29dc..5b9d6bdf1e50 100644
--- a/tests/html_tags/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_tags/__snapshots__/jsfmt.spec.js.snap
@@ -1659,7 +1659,6 @@ exports[`tags.html - html-verify 1`] = `
 </div>
 <p>
   x<span
-
     a="b"
   ></span>
 </p>
@@ -1979,7 +1978,6 @@ exports[`tags.html - html-verify 2`] = `
 </div>
 <p>
   x<span
-
     a="b"
   ></span>
 </p>
@@ -2125,7 +2123,6 @@ exports[`tags.html - html-verify 3`] = `
 </div>
 <p>
   x<span
-
     a="b"
   ></span>
 </p>
@@ -2313,7 +2310,6 @@ exports[`tags.html - html-verify 4`] = `
 >
 <p
   >x<span
-
     a="b"
   ></span
 ></p>

From 64a5ea50d0668d2f227affaf7ebde2db1446c08a Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Sat, 20 Oct 2018 16:09:38 +0800
Subject: [PATCH 072/177] test: add tests

---
 .../__snapshots__/jsfmt.spec.js.snap          | 44 +++++++++++++++++++
 tests/html_tags/tags.html                     |  2 +
 2 files changed, 46 insertions(+)

diff --git a/tests/html_tags/__snapshots__/jsfmt.spec.js.snap b/tests/html_tags/__snapshots__/jsfmt.spec.js.snap
index 5b9d6bdf1e50..d58762854878 100644
--- a/tests/html_tags/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_tags/__snapshots__/jsfmt.spec.js.snap
@@ -1527,6 +1527,8 @@ exports[`tags.html - html-verify 1`] = `
 <img src="longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong" />123
 <div>123<meta attr/>456</div>
 <p>x<span a="b"></span></p>
+<p>x<meta a></p>
+<p>x<meta></p>
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 <br />
 <br />
@@ -1662,6 +1664,12 @@ exports[`tags.html - html-verify 1`] = `
     a="b"
   ></span>
 </p>
+<p>
+  x<meta
+    a
+  />
+</p>
+<p>x<meta /></p>
 
 `;
 
@@ -1729,6 +1737,8 @@ exports[`tags.html - html-verify 2`] = `
 <img src="longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong" />123
 <div>123<meta attr/>456</div>
 <p>x<span a="b"></span></p>
+<p>x<meta a></p>
+<p>x<meta></p>
 ~
 <br />
 <br />
@@ -1981,6 +1991,14 @@ exports[`tags.html - html-verify 2`] = `
     a="b"
   ></span>
 </p>
+<p>
+  x<meta
+    a
+  />
+</p>
+<p>
+  x<meta />
+</p>
 
 `;
 
@@ -2048,6 +2066,8 @@ exports[`tags.html - html-verify 3`] = `
 <img src="longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong" />123
 <div>123<meta attr/>456</div>
 <p>x<span a="b"></span></p>
+<p>x<meta a></p>
+<p>x<meta></p>
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 <br />
 <br />
@@ -2126,6 +2146,12 @@ exports[`tags.html - html-verify 3`] = `
     a="b"
   ></span>
 </p>
+<p>
+  x<meta
+    a
+  />
+</p>
+<p>x<meta /></p>
 
 `;
 
@@ -2193,6 +2219,8 @@ exports[`tags.html - html-verify 4`] = `
 <img src="longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong" />123
 <div>123<meta attr/>456</div>
 <p>x<span a="b"></span></p>
+<p>x<meta a></p>
+<p>x<meta></p>
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 <br />
 <br />
@@ -2313,6 +2341,12 @@ exports[`tags.html - html-verify 4`] = `
     a="b"
   ></span
 ></p>
+<p
+  >x<meta
+    a
+
+/></p>
+<p>x<meta /></p>
 
 `;
 
@@ -2380,6 +2414,8 @@ exports[`tags.html - html-verify 5`] = `
 <img src="longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong" />123
 <div>123<meta attr/>456</div>
 <p>x<span a="b"></span></p>
+<p>x<meta a></p>
+<p>x<meta></p>
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 <br />
 <br />
@@ -2515,6 +2551,14 @@ exports[`tags.html - html-verify 5`] = `
   x
   <span a="b"></span>
 </p>
+<p>
+  x
+  <meta a />
+</p>
+<p>
+  x
+  <meta />
+</p>
 
 `;
 
diff --git a/tests/html_tags/tags.html b/tests/html_tags/tags.html
index 2184093e7601..dfe567920bf8 100644
--- a/tests/html_tags/tags.html
+++ b/tests/html_tags/tags.html
@@ -61,3 +61,5 @@
 <img src="longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong" />123
 <div>123<meta attr/>456</div>
 <p>x<span a="b"></span></p>
+<p>x<meta a></p>
+<p>x<meta></p>

From c292c5a96305b7ac07b175ba2ca52c10eac0f6de Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Sat, 20 Oct 2018 16:10:21 +0800
Subject: [PATCH 073/177] fix: no unexpected newlines in self-closing tag

---
 src/language-html/printer-htmlparser2.js      | 26 ++++++++++++-------
 .../__snapshots__/jsfmt.spec.js.snap          |  1 -
 2 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/src/language-html/printer-htmlparser2.js b/src/language-html/printer-htmlparser2.js
index 268050e15ea1..26fc751a1e8a 100644
--- a/src/language-html/printer-htmlparser2.js
+++ b/src/language-html/printer-htmlparser2.js
@@ -423,15 +423,23 @@ function printOpeningTag(path, options, print) {
                 join(line, path.map(print, "attributes"))
               ])
             ),
-            node.firstChild &&
-            needsToBorrowParentOpeningTagEndMarker(node.firstChild)
-              ? /**
-                 *     123<a
-                 *       attr
-                 *           ~
-                 *       >456
-                 */
-                ""
+            /**
+             *     123<a
+             *       attr
+             *           ~
+             *       >456
+             */
+            (node.firstChild &&
+              needsToBorrowParentOpeningTagEndMarker(node.firstChild)) ||
+            /**
+             *     <span
+             *       >123<meta
+             *                ~
+             *     /></span>
+             */
+            (node.isSelfClosing &&
+              needsToBorrowLastChildClosingTagEndMarker(node.parent))
+              ? ""
               : node.isSelfClosing
                 ? forceNotToBreakAttrContent
                   ? " "
diff --git a/tests/html_tags/__snapshots__/jsfmt.spec.js.snap b/tests/html_tags/__snapshots__/jsfmt.spec.js.snap
index d58762854878..1a78c51fc7c6 100644
--- a/tests/html_tags/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_tags/__snapshots__/jsfmt.spec.js.snap
@@ -2344,7 +2344,6 @@ exports[`tags.html - html-verify 4`] = `
 <p
   >x<meta
     a
-
 /></p>
 <p>x<meta /></p>
 

From 264a5fe0c54ec0d83c326f5269c6421af2a2b830 Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Sat, 20 Oct 2018 16:34:38 +0800
Subject: [PATCH 074/177] test: add tests

---
 .../__snapshots__/jsfmt.spec.js.snap          | 48 ++++++++++++++++++-
 tests/html_tags/tags.html                     |  4 ++
 2 files changed, 51 insertions(+), 1 deletion(-)

diff --git a/tests/html_tags/__snapshots__/jsfmt.spec.js.snap b/tests/html_tags/__snapshots__/jsfmt.spec.js.snap
index 1a78c51fc7c6..cee0beeedf9e 100644
--- a/tests/html_tags/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_tags/__snapshots__/jsfmt.spec.js.snap
@@ -1529,6 +1529,10 @@ exports[`tags.html - html-verify 1`] = `
 <p>x<span a="b"></span></p>
 <p>x<meta a></p>
 <p>x<meta></p>
+<span></span>
+
+<label aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa></label> |
+<span></span>
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 <br />
 <br />
@@ -1670,6 +1674,11 @@ exports[`tags.html - html-verify 1`] = `
   />
 </p>
 <p>x<meta /></p>
+<span></span>
+
+<label
+  aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
+></label> | <span></span>
 
 `;
 
@@ -1739,6 +1748,10 @@ exports[`tags.html - html-verify 2`] = `
 <p>x<span a="b"></span></p>
 <p>x<meta a></p>
 <p>x<meta></p>
+<span></span>
+
+<label aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa></label> |
+<span></span>
 ~
 <br />
 <br />
@@ -1999,6 +2012,13 @@ exports[`tags.html - html-verify 2`] = `
 <p>
   x<meta />
 </p>
+<span></span>
+
+<label
+  aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
+></label>
+|
+<span></span>
 
 `;
 
@@ -2068,6 +2088,10 @@ exports[`tags.html - html-verify 3`] = `
 <p>x<span a="b"></span></p>
 <p>x<meta a></p>
 <p>x<meta></p>
+<span></span>
+
+<label aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa></label> |
+<span></span>
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 <br />
 <br />
@@ -2152,6 +2176,9 @@ exports[`tags.html - html-verify 3`] = `
   />
 </p>
 <p>x<meta /></p>
+<span></span>
+
+<label aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa></label> | <span></span>
 
 `;
 
@@ -2221,6 +2248,10 @@ exports[`tags.html - html-verify 4`] = `
 <p>x<span a="b"></span></p>
 <p>x<meta a></p>
 <p>x<meta></p>
+<span></span>
+
+<label aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa></label> |
+<span></span>
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 <br />
 <br />
@@ -2345,7 +2376,11 @@ exports[`tags.html - html-verify 4`] = `
   >x<meta
     a
 /></p>
-<p>x<meta /></p>
+<p>x<meta /></p> <span></span>
+
+<label
+  aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
+></label> | <span></span>
 
 `;
 
@@ -2415,6 +2450,10 @@ exports[`tags.html - html-verify 5`] = `
 <p>x<span a="b"></span></p>
 <p>x<meta a></p>
 <p>x<meta></p>
+<span></span>
+
+<label aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa></label> |
+<span></span>
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 <br />
 <br />
@@ -2558,6 +2597,13 @@ exports[`tags.html - html-verify 5`] = `
   x
   <meta />
 </p>
+<span></span>
+
+<label
+  aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
+></label>
+|
+<span></span>
 
 `;
 
diff --git a/tests/html_tags/tags.html b/tests/html_tags/tags.html
index dfe567920bf8..338ba09d265f 100644
--- a/tests/html_tags/tags.html
+++ b/tests/html_tags/tags.html
@@ -63,3 +63,7 @@
 <p>x<span a="b"></span></p>
 <p>x<meta a></p>
 <p>x<meta></p>
+<span></span>
+
+<label aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa></label> |
+<span></span>

From beb35e806e1663ede8ccaf6c43b7a06d18bded04 Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Sat, 20 Oct 2018 16:34:53 +0800
Subject: [PATCH 075/177] fix: fill correctly

---
 src/language-html/printer-htmlparser2.js         | 2 +-
 tests/html_tags/__snapshots__/jsfmt.spec.js.snap | 6 ++++--
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/language-html/printer-htmlparser2.js b/src/language-html/printer-htmlparser2.js
index 26fc751a1e8a..6838e7980eea 100644
--- a/src/language-html/printer-htmlparser2.js
+++ b/src/language-html/printer-htmlparser2.js
@@ -300,7 +300,7 @@ function printChildren(path, options, print) {
           forceNextEmptyLine(childNode.prev) ||
           childNode.prev.endLocation.line + 1 < childNode.startLocation.line
         ) {
-          parts.push(hardline, hardline);
+          parts.push(concat([hardline, hardline]));
         } else {
           parts.push(prevBetweenLine);
         }
diff --git a/tests/html_tags/__snapshots__/jsfmt.spec.js.snap b/tests/html_tags/__snapshots__/jsfmt.spec.js.snap
index cee0beeedf9e..965e55147db2 100644
--- a/tests/html_tags/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_tags/__snapshots__/jsfmt.spec.js.snap
@@ -1678,7 +1678,8 @@ exports[`tags.html - html-verify 1`] = `
 
 <label
   aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
-></label> | <span></span>
+></label>
+| <span></span>
 
 `;
 
@@ -2380,7 +2381,8 @@ exports[`tags.html - html-verify 4`] = `
 
 <label
   aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
-></label> | <span></span>
+></label>
+| <span></span>
 
 `;
 

From 9b0e5a4d0787d58e58e04cbca948a05a15b44749 Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Sun, 21 Oct 2018 12:44:11 +0800
Subject: [PATCH 076/177] test: add tests

---
 .../__snapshots__/jsfmt.spec.js.snap          | 175 +++++++++++++++++-
 tests/html_tags/tags.html                     |  17 ++
 2 files changed, 189 insertions(+), 3 deletions(-)

diff --git a/tests/html_tags/__snapshots__/jsfmt.spec.js.snap b/tests/html_tags/__snapshots__/jsfmt.spec.js.snap
index 965e55147db2..a259e9b0b3c7 100644
--- a/tests/html_tags/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_tags/__snapshots__/jsfmt.spec.js.snap
@@ -1533,6 +1533,23 @@ exports[`tags.html - html-verify 1`] = `
 
 <label aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa></label> |
 <span></span>
+<br />
+<button xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
+  >12345678901234567890</button
+> <br /><br />
+
+<button bind-disabled="isUnchanged" on-click="onSave($event)"
+  >Disabled Cancel</button
+>
+<br /><br />
+<button xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
+  >12345678901234567890</button
+> <br /><br />
+
+<button bind-disabled="isUnchanged" on-click="onSave($event)"
+  >Disabled Cancel</button
+>
+<br /><br />
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 <br />
 <br />
@@ -1679,7 +1696,23 @@ exports[`tags.html - html-verify 1`] = `
 <label
   aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
 ></label>
-| <span></span>
+| <span></span> <br />
+<button xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
+  >12345678901234567890</button
+> <br /><br />
+
+<button bind-disabled="isUnchanged" on-click="onSave($event)"
+  >Disabled Cancel</button
+>
+<br /><br />
+<button xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
+  >12345678901234567890</button
+> <br /><br />
+
+<button bind-disabled="isUnchanged" on-click="onSave($event)"
+  >Disabled Cancel</button
+>
+<br /><br />
 
 `;
 
@@ -1753,6 +1786,23 @@ exports[`tags.html - html-verify 2`] = `
 
 <label aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa></label> |
 <span></span>
+<br />
+<button xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
+  >12345678901234567890</button
+> <br /><br />
+
+<button bind-disabled="isUnchanged" on-click="onSave($event)"
+  >Disabled Cancel</button
+>
+<br /><br />
+<button xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
+  >12345678901234567890</button
+> <br /><br />
+
+<button bind-disabled="isUnchanged" on-click="onSave($event)"
+  >Disabled Cancel</button
+>
+<br /><br />
 ~
 <br />
 <br />
@@ -2020,6 +2070,33 @@ exports[`tags.html - html-verify 2`] = `
 ></label>
 |
 <span></span>
+<br />
+<button
+  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
+  >12345678901234567890</button
+>
+<br /><br />
+
+<button
+  bind-disabled="isUnchanged"
+  on-click="onSave($event)"
+  >Disabled
+  Cancel</button
+>
+<br /><br />
+<button
+  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
+  >12345678901234567890</button
+>
+<br /><br />
+
+<button
+  bind-disabled="isUnchanged"
+  on-click="onSave($event)"
+  >Disabled
+  Cancel</button
+>
+<br /><br />
 
 `;
 
@@ -2093,6 +2170,23 @@ exports[`tags.html - html-verify 3`] = `
 
 <label aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa></label> |
 <span></span>
+<br />
+<button xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
+  >12345678901234567890</button
+> <br /><br />
+
+<button bind-disabled="isUnchanged" on-click="onSave($event)"
+  >Disabled Cancel</button
+>
+<br /><br />
+<button xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
+  >12345678901234567890</button
+> <br /><br />
+
+<button bind-disabled="isUnchanged" on-click="onSave($event)"
+  >Disabled Cancel</button
+>
+<br /><br />
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 <br />
 <br />
@@ -2179,7 +2273,13 @@ exports[`tags.html - html-verify 3`] = `
 <p>x<meta /></p>
 <span></span>
 
-<label aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa></label> | <span></span>
+<label aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa></label> | <span></span> <br />
+<button xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx>12345678901234567890</button> <br /><br />
+
+<button bind-disabled="isUnchanged" on-click="onSave($event)">Disabled Cancel</button> <br /><br />
+<button xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx>12345678901234567890</button> <br /><br />
+
+<button bind-disabled="isUnchanged" on-click="onSave($event)">Disabled Cancel</button> <br /><br />
 
 `;
 
@@ -2253,6 +2353,23 @@ exports[`tags.html - html-verify 4`] = `
 
 <label aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa></label> |
 <span></span>
+<br />
+<button xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
+  >12345678901234567890</button
+> <br /><br />
+
+<button bind-disabled="isUnchanged" on-click="onSave($event)"
+  >Disabled Cancel</button
+>
+<br /><br />
+<button xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
+  >12345678901234567890</button
+> <br /><br />
+
+<button bind-disabled="isUnchanged" on-click="onSave($event)"
+  >Disabled Cancel</button
+>
+<br /><br />
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 <br />
 <br />
@@ -2382,7 +2499,23 @@ exports[`tags.html - html-verify 4`] = `
 <label
   aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
 ></label>
-| <span></span>
+| <span></span> <br />
+<button xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
+  >12345678901234567890</button
+> <br /><br />
+
+<button bind-disabled="isUnchanged" on-click="onSave($event)"
+  >Disabled Cancel</button
+>
+<br /><br />
+<button xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
+  >12345678901234567890</button
+> <br /><br />
+
+<button bind-disabled="isUnchanged" on-click="onSave($event)"
+  >Disabled Cancel</button
+>
+<br /><br />
 
 `;
 
@@ -2456,6 +2589,23 @@ exports[`tags.html - html-verify 5`] = `
 
 <label aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa></label> |
 <span></span>
+<br />
+<button xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
+  >12345678901234567890</button
+> <br /><br />
+
+<button bind-disabled="isUnchanged" on-click="onSave($event)"
+  >Disabled Cancel</button
+>
+<br /><br />
+<button xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
+  >12345678901234567890</button
+> <br /><br />
+
+<button bind-disabled="isUnchanged" on-click="onSave($event)"
+  >Disabled Cancel</button
+>
+<br /><br />
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 <br />
 <br />
@@ -2606,6 +2756,25 @@ exports[`tags.html - html-verify 5`] = `
 ></label>
 |
 <span></span>
+<br />
+<button xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx>12345678901234567890</button>
+<br />
+<br />
+
+<button bind-disabled="isUnchanged" on-click="onSave($event)">
+  Disabled Cancel
+</button>
+<br />
+<br />
+<button xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx>12345678901234567890</button>
+<br />
+<br />
+
+<button bind-disabled="isUnchanged" on-click="onSave($event)">
+  Disabled Cancel
+</button>
+<br />
+<br />
 
 `;
 
diff --git a/tests/html_tags/tags.html b/tests/html_tags/tags.html
index 338ba09d265f..2fb99a4d8761 100644
--- a/tests/html_tags/tags.html
+++ b/tests/html_tags/tags.html
@@ -67,3 +67,20 @@
 
 <label aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa></label> |
 <span></span>
+<br />
+<button xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
+  >12345678901234567890</button
+> <br /><br />
+
+<button bind-disabled="isUnchanged" on-click="onSave($event)"
+  >Disabled Cancel</button
+>
+<br /><br />
+<button xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
+  >12345678901234567890</button
+> <br /><br />
+
+<button bind-disabled="isUnchanged" on-click="onSave($event)"
+  >Disabled Cancel</button
+>
+<br /><br />

From 19dd0ed30a06a326077f8299ff7f45c0c952bab6 Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Sun, 21 Oct 2018 12:49:19 +0800
Subject: [PATCH 077/177] fix: fill correctly - fix: treat interpolations as
 tags

---
 src/language-html/preprocess.js               |  72 ++++-
 src/language-html/printer-htmlparser2.js      | 279 ++++++++----------
 src/language-html/utils.js                    |  15 +-
 .../__snapshots__/jsfmt.spec.js.snap          |  20 +-
 .../html_vue/__snapshots__/jsfmt.spec.js.snap |  12 +-
 5 files changed, 209 insertions(+), 189 deletions(-)

diff --git a/src/language-html/preprocess.js b/src/language-html/preprocess.js
index f08b2ccf2709..c5337d43e565 100644
--- a/src/language-html/preprocess.js
+++ b/src/language-html/preprocess.js
@@ -14,8 +14,9 @@ const {
 const LineAndColumn = (m => m.default || m)(require("lines-and-columns"));
 
 const PREPROCESS_PIPELINE = [
-  renameScriptAndStyleWithTag,
   mergeCdataIntoText,
+  extractInterpolation,
+  renameScriptAndStyleWithTag,
   processDirectives,
   addIsSelfClosing,
   extractWhitespaces,
@@ -82,6 +83,63 @@ function mergeCdataIntoText(ast, options) {
   });
 }
 
+function extractInterpolation(ast, options) {
+  if (options.parser === "html") {
+    return ast;
+  }
+
+  const interpolationRegex = /\{\{([\s\S]+?)\}\}/g;
+  return mapNode(ast, node => {
+    if (!node.children) {
+      return node;
+    }
+
+    const newChildren = [];
+
+    for (const child of node.children) {
+      if (child.type !== "text") {
+        newChildren.push(child);
+        continue;
+      }
+
+      let startIndex = child.startIndex;
+      let endIndex = null;
+      const components = child.data.split(interpolationRegex);
+      for (let i = 0; i < components.length; i++, startIndex = endIndex) {
+        const data = components[i];
+
+        if (i % 2 === 0) {
+          endIndex = startIndex + data.length;
+          if (data.length !== 0) {
+            newChildren.push({ type: "text", data, startIndex, endIndex });
+          }
+          continue;
+        }
+
+        endIndex = startIndex + data.length + 4; // `{{` + `}}`
+        newChildren.push({
+          type: "interpolation",
+          startIndex,
+          endIndex,
+          children:
+            data.length === 0
+              ? []
+              : [
+                  {
+                    type: "text",
+                    startIndex: startIndex + 2,
+                    endIndex: endIndex - 2,
+                    data
+                  }
+                ]
+        });
+      }
+    }
+
+    return Object.assign({}, node, { children: newChildren });
+  });
+}
+
 /** add `startLocation` and `endLocation` field */
 function addStartAndEndLocation(ast, options) {
   const locator = new LineAndColumn(options.originalText);
@@ -104,11 +162,7 @@ function renameScriptAndStyleWithTag(ast /*, options */) {
 /** add `isSelfClosing` for void tags, directives, and comments */
 function addIsSelfClosing(ast /*, options */) {
   return mapNode(ast, node => {
-    if (
-      (node.type === "tag" && node.name in VOID_TAGS) ||
-      node.type === "directive" ||
-      node.type === "comment"
-    ) {
+    if (!node.children || (node.type === "tag" && node.name in VOID_TAGS)) {
       return Object.assign({}, node, { isSelfClosing: true });
     }
     return node;
@@ -176,7 +230,11 @@ function extractWhitespaces(ast /*, options*/) {
             return newChildren.concat(child);
           }
 
-          if (isCssStyleWhiteSpacePre || isScriptLike) {
+          if (
+            isCssStyleWhiteSpacePre ||
+            isScriptLike ||
+            node.type === "interpolation"
+          ) {
             return newChildren.concat(
               Object.assign({}, child, {
                 isWhiteSpaceSensitive: true,
diff --git a/src/language-html/printer-htmlparser2.js b/src/language-html/printer-htmlparser2.js
index 6838e7980eea..d1f199ffda81 100644
--- a/src/language-html/printer-htmlparser2.js
+++ b/src/language-html/printer-htmlparser2.js
@@ -7,8 +7,10 @@ const {
 } = require("../doc");
 const {
   breakParent,
+  fill,
   group,
   hardline,
+  ifBreak,
   indent,
   join,
   line,
@@ -46,33 +48,6 @@ function concat(parts) {
       : builders.concat(newParts);
 }
 
-function fill(parts) {
-  const newParts = [];
-
-  let hasSeparator = true;
-  for (const part of normalizeParts(parts)) {
-    switch (part) {
-      case line:
-      case hardline:
-      case literalline:
-      case softline:
-        newParts.push(part);
-        hasSeparator = true;
-        break;
-      default:
-        if (!hasSeparator) {
-          // `fill` needs a separator between each two parts
-          newParts.push("");
-        }
-        newParts.push(part);
-        hasSeparator = false;
-        break;
-    }
-  }
-
-  return builders.fill(newParts);
-}
-
 function embed(path, print, textToDoc, options) {
   const node = path.getValue();
   switch (node.type) {
@@ -93,21 +68,21 @@ function embed(path, print, textToDoc, options) {
             ])
           ]);
         }
-      } else if (options.parser !== "html") {
-        const interpolationTextParts = getInterpolationTextDataParts(
-          node,
-          textToDoc,
-          options
-        );
-        if (interpolationTextParts) {
-          return fill(
-            [].concat(
-              printOpeningTagPrefix(node),
-              interpolationTextParts,
-              printClosingTagSuffix(node)
-            )
-          );
-        }
+      } else if (node.parent.type === "interpolation") {
+        return concat([
+          indent(
+            concat([
+              softline,
+              textToDoc(node.data, {
+                parser:
+                  options.parser === "angular"
+                    ? "__ng_interpolation"
+                    : "__js_expression"
+              })
+            ])
+          ),
+          softline
+        ]);
       }
       break;
     }
@@ -153,7 +128,11 @@ function genericPrint(path, options, print) {
   const node = path.getValue();
   switch (node.type) {
     case "root":
-      return concat([group(printChildren(path, options, print)), hardline]);
+      // use original concat to not break stripTrailingHardline
+      return builders.concat([
+        group(printChildren(path, options, print)),
+        hardline
+      ]);
     case "tag":
     case "ieConditionalComment":
       return concat([
@@ -196,14 +175,35 @@ function genericPrint(path, options, print) {
         ),
         printClosingTag(node)
       ]);
-    case "text":
+    case "interpolation":
+      return concat([
+        printOpeningTagStart(node),
+        concat(path.map(print, "children")),
+        printClosingTagEnd(node)
+      ]);
+    case "text": {
+      if (node.parent.type === "interpolation") {
+        // replace the trailing literalline with hardline for better readability
+        const trailingNewlineRegex = /\n[^\S\n]*?$/;
+        const hasTrailingNewline = trailingNewlineRegex.test(node.data);
+        const data = hasTrailingNewline
+          ? node.data.replace(trailingNewlineRegex, "")
+          : node.data;
+        return concat([
+          concat(replaceNewlines(data, literalline)),
+          hasTrailingNewline ? hardline : ""
+        ]);
+      }
       return fill(
-        [].concat(
-          printOpeningTagPrefix(node),
-          getTextDataParts(node),
-          printClosingTagSuffix(node)
+        normalizeParts(
+          [].concat(
+            printOpeningTagPrefix(node),
+            getTextDataParts(node),
+            printClosingTagSuffix(node)
+          )
         )
       );
+    }
     case "comment":
     case "directive": {
       const data = getCommentData(node);
@@ -275,11 +275,7 @@ function printChildren(path, options, print) {
               ? ""
               : concat([
                   prevBetweenLine,
-                  forceNextEmptyLine(childNode.prev) ||
-                  childNode.prev.endLocation.line + 1 <
-                    childNode.startLocation.line
-                    ? hardline
-                    : ""
+                  forceNextEmptyLine(childNode.prev) ? hardline : ""
                 ]),
             printChild(childPath)
           ]);
@@ -288,33 +284,76 @@ function printChildren(path, options, print) {
     ]);
   }
 
-  const parts = [];
+  const groupIds = node.children.map(() => Symbol(""));
+  return concat(
+    path.map((childPath, childIndex) => {
+      const childNode = childPath.getValue();
+
+      if (childNode.type === "text") {
+        return printChild(childPath);
+      }
 
-  path.map((childPath, childIndex) => {
-    const childNode = childPath.getValue();
+      const prevParts = [];
+      const leadingParts = [];
+      const trailingParts = [];
+      const nextParts = [];
+
+      const prevBetweenLine = childNode.prev
+        ? printBetweenLine(childNode.prev, childNode)
+        : "";
+
+      const nextBetweenLine = childNode.next
+        ? printBetweenLine(childNode, childNode.next)
+        : "";
 
-    if (childIndex !== 0) {
-      const prevBetweenLine = printBetweenLine(childNode.prev, childNode);
       if (prevBetweenLine) {
-        if (
-          forceNextEmptyLine(childNode.prev) ||
-          childNode.prev.endLocation.line + 1 < childNode.startLocation.line
-        ) {
-          parts.push(concat([hardline, hardline]));
+        if (forceNextEmptyLine(childNode.prev)) {
+          prevParts.push(hardline, hardline);
+        } else if (prevBetweenLine === hardline) {
+          prevParts.push(hardline);
         } else {
-          parts.push(prevBetweenLine);
+          if (childNode.prev.type === "text") {
+            leadingParts.push(prevBetweenLine);
+          } else {
+            leadingParts.push(
+              ifBreak("", softline, {
+                groupId: groupIds[childIndex - 1]
+              })
+            );
+          }
         }
       }
-    }
 
-    const childDoc = printChild(childPath);
-    Array.prototype.push.apply(
-      parts,
-      childNode.type === "text" && childDoc.parts ? childDoc.parts : [childDoc]
-    );
-  }, "children");
+      if (nextBetweenLine) {
+        if (forceNextEmptyLine(childNode)) {
+          if (childNode.next.type === "text") {
+            nextParts.push(hardline, hardline);
+          }
+        } else if (nextBetweenLine === hardline) {
+          if (childNode.next.type === "text") {
+            nextParts.push(hardline);
+          }
+        } else {
+          trailingParts.push(nextBetweenLine);
+        }
+      }
 
-  return fill(parts);
+      return concat(
+        [].concat(
+          prevParts,
+          group(
+            concat([
+              concat(leadingParts),
+              group(concat([printChild(childPath), concat(trailingParts)]), {
+                id: groupIds[childIndex]
+              })
+            ])
+          ),
+          nextParts
+        )
+      );
+    }, "children")
+  );
 
   function printChild(childPath) {
     if (!hasPrettierIgnore(childPath)) {
@@ -592,6 +631,8 @@ function printOpeningTagStartMarker(node) {
       return "<!--";
     case "ieConditionalComment":
       return `<!--[if ${node.condition}`;
+    case "interpolation":
+      return "{{";
     default:
       return `<${node.name}`;
   }
@@ -623,6 +664,8 @@ function printClosingTagEndMarker(node) {
       return "-->";
     case "ieConditionalComment":
       return `[endif]-->`;
+    case "interpolation":
+      return "}}";
     case "tag":
       if (node.isSelfClosing) {
         return "/>";
@@ -644,98 +687,6 @@ function getTextDataParts(node, data = node.data) {
     : join(line, data.split(/\s+/)).parts;
 }
 
-function getInterpolationTextDataParts(node, textToDoc, options) {
-  const interpolationRegex = /\{\{([\s\S]+?)\}\}/g;
-  if (!interpolationRegex.test(node.data)) {
-    return null;
-  }
-
-  const componentParts = [];
-  const TYPE_INTERPOLATION_FAILED = "interpolationFailed";
-  const TYPE_INTERPOLATION_IDENTIFIER = "interpolationIdentifier";
-
-  const identifierRegex = /^\w+$/;
-
-  const components = node.data.split(interpolationRegex);
-  for (let i = 0; i < components.length; i++) {
-    const component = components[i];
-
-    if (i % 2 === 0) {
-      const text =
-        (i === 0 ? "" : "}}") +
-        component +
-        (i === components.length - 1 ? "" : "{{");
-
-      componentParts.push(text);
-      continue;
-    }
-
-    const interpolation = component;
-
-    const trimmedInterpolation = interpolation.trim();
-    if (identifierRegex.test(trimmedInterpolation)) {
-      componentParts.push({
-        type: TYPE_INTERPOLATION_IDENTIFIER,
-        data: trimmedInterpolation
-      });
-      continue;
-    }
-
-    try {
-      const interpolationDoc = textToDoc(interpolation, {
-        parser:
-          options.parser === "angular"
-            ? "__ng_interpolation"
-            : "__js_expression"
-      });
-      componentParts.push(interpolationDoc);
-    } catch (e) {
-      componentParts.push({
-        type: TYPE_INTERPOLATION_FAILED,
-        data: interpolation
-      });
-    }
-  }
-
-  const parts = [];
-
-  for (let i = 0; i < componentParts.length; i++) {
-    const componentPart = componentParts[i];
-    if (i % 2 === 0) {
-      Array.prototype.push.apply(parts, getTextDataParts(node, componentPart));
-      continue;
-    }
-
-    switch (componentPart.type) {
-      case TYPE_INTERPOLATION_FAILED: {
-        const trailingNewlineRegex = /\n[^\S\n]*?$/;
-        // replace the trailing literalline with hardline for better readability
-        Array.prototype.push.apply(
-          parts,
-          [].concat(
-            replaceNewlines(
-              componentPart.data.replace(trailingNewlineRegex, ""),
-              literalline
-            ),
-            trailingNewlineRegex.test(componentPart.data) ? hardline : []
-          )
-        );
-        break;
-      }
-      case TYPE_INTERPOLATION_IDENTIFIER:
-        parts.push(componentPart.data);
-        break;
-      default:
-        parts.push(
-          group(concat([indent(concat([softline, componentPart])), softline]))
-        );
-        break;
-    }
-  }
-
-  return parts;
-}
-
 function printEmbeddedAttributeValue(node, textToDoc, options) {
   const isKeyMatched = patterns =>
     new RegExp(patterns.join("|")).test(node.key);
diff --git a/src/language-html/utils.js b/src/language-html/utils.js
index 3f0b5a7f246a..bdea0f87bdb9 100644
--- a/src/language-html/utils.js
+++ b/src/language-html/utils.js
@@ -202,7 +202,10 @@ function replaceDocNewlines(doc, replacement) {
 }
 
 function forceNextEmptyLine(node) {
-  return isFrontMatterNode(node);
+  return (
+    isFrontMatterNode(node) ||
+    (node.next && node.endLocation.line + 1 < node.next.startLocation.line)
+  );
 }
 
 /** firstChild leadingSpaces and lastChild trailingSpaces */
@@ -442,11 +445,19 @@ function dedentString(text, minIndent = getMinIndentation(text)) {
 function normalizeParts(parts) {
   const newParts = [];
 
-  for (const part of parts) {
+  const restParts = parts.slice();
+  while (restParts.length !== 0) {
+    const part = restParts.shift();
+
     if (!part) {
       continue;
     }
 
+    if (part.type === "concat") {
+      Array.prototype.unshift.apply(restParts, part.parts);
+      continue;
+    }
+
     if (
       newParts.length !== 0 &&
       typeof newParts[newParts.length - 1] === "string" &&
diff --git a/tests/html_tags/__snapshots__/jsfmt.spec.js.snap b/tests/html_tags/__snapshots__/jsfmt.spec.js.snap
index a259e9b0b3c7..bf70a5c6d926 100644
--- a/tests/html_tags/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_tags/__snapshots__/jsfmt.spec.js.snap
@@ -1697,17 +1697,15 @@ exports[`tags.html - html-verify 1`] = `
   aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
 ></label>
 | <span></span> <br />
-<button xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
-  >12345678901234567890</button
-> <br /><br />
+<button xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx>12345678901234567890</button>
+<br /><br />
 
 <button bind-disabled="isUnchanged" on-click="onSave($event)"
   >Disabled Cancel</button
 >
 <br /><br />
-<button xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
-  >12345678901234567890</button
-> <br /><br />
+<button xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx>12345678901234567890</button>
+<br /><br />
 
 <button bind-disabled="isUnchanged" on-click="onSave($event)"
   >Disabled Cancel</button
@@ -2500,17 +2498,15 @@ exports[`tags.html - html-verify 4`] = `
   aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
 ></label>
 | <span></span> <br />
-<button xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
-  >12345678901234567890</button
-> <br /><br />
+<button xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx>12345678901234567890</button>
+<br /><br />
 
 <button bind-disabled="isUnchanged" on-click="onSave($event)"
   >Disabled Cancel</button
 >
 <br /><br />
-<button xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
-  >12345678901234567890</button
-> <br /><br />
+<button xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx>12345678901234567890</button>
+<br /><br />
 
 <button bind-disabled="isUnchanged" on-click="onSave($event)"
   >Disabled Cancel</button
diff --git a/tests/html_vue/__snapshots__/jsfmt.spec.js.snap b/tests/html_vue/__snapshots__/jsfmt.spec.js.snap
index 65513d17f701..f0de57df8723 100644
--- a/tests/html_vue/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_vue/__snapshots__/jsfmt.spec.js.snap
@@ -468,7 +468,8 @@ x => {
       const hello = "world";
       return hello;
     }
-  }} Magni consectetur in et molestias neque esse voluptatibus voluptas.
+  }}
+  Magni consectetur in et molestias neque esse voluptatibus voluptas.
   {{some_variable}} Eum quia nihil nulla esse. Dolorem asperiores vero est error
   {{
 
@@ -478,7 +479,8 @@ x => {
                     
                     interpolation
 
-  }} reprehenderit voluptates minus {{console.log(short_interpolation)}} nemo.
+  }}
+  reprehenderit voluptates minus {{console.log(short_interpolation)}} nemo.
 </div>
 
 `;
@@ -517,7 +519,8 @@ x => {
       const hello = "world";
       return hello;
     }
-  }} Magni consectetur in et molestias neque esse voluptatibus voluptas.
+  }}
+  Magni consectetur in et molestias neque esse voluptatibus voluptas.
   {{some_variable}} Eum quia nihil nulla esse. Dolorem asperiores vero est error
   {{
 
@@ -527,7 +530,8 @@ x => {
                     
                     interpolation
 
-  }} reprehenderit voluptates minus {{console.log(short_interpolation)}} nemo.
+  }}
+  reprehenderit voluptates minus {{console.log(short_interpolation)}} nemo.
 </div>
 
 `;

From c6d5f543941931d785c3b22bc6c17d6213f9940c Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Sun, 21 Oct 2018 12:55:37 +0800
Subject: [PATCH 078/177] test: add tests

---
 .../__snapshots__/jsfmt.spec.js.snap          | 84 +++++++++++++++++++
 .../html_comments/surrounding-empty-line.html | 14 ++++
 2 files changed, 98 insertions(+)

diff --git a/tests/html_comments/__snapshots__/jsfmt.spec.js.snap b/tests/html_comments/__snapshots__/jsfmt.spec.js.snap
index 1deca35f14bd..1794dacd6ec3 100644
--- a/tests/html_comments/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_comments/__snapshots__/jsfmt.spec.js.snap
@@ -412,6 +412,20 @@ exports[`surrounding-empty-line.html - html-verify 1`] = `
 
 <!-- A
      B -->
+
+<!--
+The null hero's name is {{nullHero.name}}
+
+See console log:
+  TypeError: Cannot read property 'name' of null in [null]
+-->
+
+<!--
+    The null hero's name is {{nullHero.name}}
+
+    See console log:
+    TypeError: Cannot read property 'name' of null in [null]
+-->
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 <ul>
   <!-- 123
@@ -466,6 +480,20 @@ exports[`surrounding-empty-line.html - html-verify 1`] = `
   B
 -->
 
+<!--
+  The null hero's name is {{nullHero.name}}
+
+  See console log:
+    TypeError: Cannot read property 'name' of null in [null]
+-->
+
+<!--
+      The null hero's name is {{nullHero.name}}
+
+      See console log:
+      TypeError: Cannot read property 'name' of null in [null]
+-->
+
 `;
 
 exports[`surrounding-empty-line.html - html-verify 2`] = `
@@ -511,6 +539,20 @@ exports[`surrounding-empty-line.html - html-verify 2`] = `
 
 <!-- A
      B -->
+
+<!--
+The null hero's name is {{nullHero.name}}
+
+See console log:
+  TypeError: Cannot read property 'name' of null in [null]
+-->
+
+<!--
+    The null hero's name is {{nullHero.name}}
+
+    See console log:
+    TypeError: Cannot read property 'name' of null in [null]
+-->
 ~
 <ul>
   <!--
@@ -582,6 +624,20 @@ exports[`surrounding-empty-line.html - html-verify 2`] = `
   B
 -->
 
+<!--
+  The null hero's name is {{nullHero.name}}
+
+  See console log:
+    TypeError: Cannot read property 'name' of null in [null]
+-->
+
+<!--
+      The null hero's name is {{nullHero.name}}
+
+      See console log:
+      TypeError: Cannot read property 'name' of null in [null]
+-->
+
 `;
 
 exports[`surrounding-empty-line.html - html-verify 3`] = `
@@ -627,6 +683,20 @@ exports[`surrounding-empty-line.html - html-verify 3`] = `
 
 <!-- A
      B -->
+
+<!--
+The null hero's name is {{nullHero.name}}
+
+See console log:
+  TypeError: Cannot read property 'name' of null in [null]
+-->
+
+<!--
+    The null hero's name is {{nullHero.name}}
+
+    See console log:
+    TypeError: Cannot read property 'name' of null in [null]
+-->
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 <ul>
   <!-- 123
@@ -681,4 +751,18 @@ exports[`surrounding-empty-line.html - html-verify 3`] = `
   B
 -->
 
+<!--
+  The null hero's name is {{nullHero.name}}
+
+  See console log:
+    TypeError: Cannot read property 'name' of null in [null]
+-->
+
+<!--
+      The null hero's name is {{nullHero.name}}
+
+      See console log:
+      TypeError: Cannot read property 'name' of null in [null]
+-->
+
 `;
diff --git a/tests/html_comments/surrounding-empty-line.html b/tests/html_comments/surrounding-empty-line.html
index 316406103c16..937c05d9e181 100644
--- a/tests/html_comments/surrounding-empty-line.html
+++ b/tests/html_comments/surrounding-empty-line.html
@@ -40,3 +40,17 @@
 
 <!-- A
      B -->
+
+<!--
+The null hero's name is {{nullHero.name}}
+
+See console log:
+  TypeError: Cannot read property 'name' of null in [null]
+-->
+
+<!--
+    The null hero's name is {{nullHero.name}}
+
+    See console log:
+    TypeError: Cannot read property 'name' of null in [null]
+-->

From 3069966319a45282242a6ef522123019a8103430 Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Sun, 21 Oct 2018 12:56:12 +0800
Subject: [PATCH 079/177] fix: dedent comments correctly

---
 src/language-html/utils.js                     |  4 ++++
 .../__snapshots__/jsfmt.spec.js.snap           | 18 +++++++++---------
 2 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/src/language-html/utils.js b/src/language-html/utils.js
index bdea0f87bdb9..adb7fb25a724 100644
--- a/src/language-html/utils.js
+++ b/src/language-html/utils.js
@@ -415,6 +415,10 @@ function getMinIndentation(text) {
   let minIndentation = Infinity;
 
   for (const lineText of text.split("\n")) {
+    if (lineText.length === 0) {
+      continue;
+    }
+
     if (/\S/.test(lineText[0])) {
       return 0;
     }
diff --git a/tests/html_comments/__snapshots__/jsfmt.spec.js.snap b/tests/html_comments/__snapshots__/jsfmt.spec.js.snap
index 1794dacd6ec3..9a256f53707e 100644
--- a/tests/html_comments/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_comments/__snapshots__/jsfmt.spec.js.snap
@@ -488,10 +488,10 @@ See console log:
 -->
 
 <!--
-      The null hero's name is {{nullHero.name}}
+  The null hero's name is {{nullHero.name}}
 
-      See console log:
-      TypeError: Cannot read property 'name' of null in [null]
+  See console log:
+  TypeError: Cannot read property 'name' of null in [null]
 -->
 
 `;
@@ -632,10 +632,10 @@ See console log:
 -->
 
 <!--
-      The null hero's name is {{nullHero.name}}
+  The null hero's name is {{nullHero.name}}
 
-      See console log:
-      TypeError: Cannot read property 'name' of null in [null]
+  See console log:
+  TypeError: Cannot read property 'name' of null in [null]
 -->
 
 `;
@@ -759,10 +759,10 @@ See console log:
 -->
 
 <!--
-      The null hero's name is {{nullHero.name}}
+  The null hero's name is {{nullHero.name}}
 
-      See console log:
-      TypeError: Cannot read property 'name' of null in [null]
+  See console log:
+  TypeError: Cannot read property 'name' of null in [null]
 -->
 
 `;

From f69d916271906d3e0b9558819d0002ad588c63f3 Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Sun, 21 Oct 2018 13:18:33 +0800
Subject: [PATCH 080/177] test: add tests

---
 .../__snapshots__/jsfmt.spec.js.snap          | 43 +++++++++++++++++++
 tests/html_tags/tags.html                     |  1 +
 2 files changed, 44 insertions(+)

diff --git a/tests/html_tags/__snapshots__/jsfmt.spec.js.snap b/tests/html_tags/__snapshots__/jsfmt.spec.js.snap
index bf70a5c6d926..0afe932b7c9d 100644
--- a/tests/html_tags/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_tags/__snapshots__/jsfmt.spec.js.snap
@@ -1550,6 +1550,7 @@ exports[`tags.html - html-verify 1`] = `
   >Disabled Cancel</button
 >
 <br /><br />
+<p>"<span [innerHTML]="title"></span>" is the <i>property bound</i> title.</p>
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 <br />
 <br />
@@ -1711,6 +1712,12 @@ exports[`tags.html - html-verify 1`] = `
   >Disabled Cancel</button
 >
 <br /><br />
+<p>
+  "<span
+    [innerHTML]="title"
+  ></span
+  >" is the <i>property bound</i> title.
+</p>
 
 `;
 
@@ -1801,6 +1808,7 @@ exports[`tags.html - html-verify 2`] = `
   >Disabled Cancel</button
 >
 <br /><br />
+<p>"<span [innerHTML]="title"></span>" is the <i>property bound</i> title.</p>
 ~
 <br />
 <br />
@@ -2095,6 +2103,19 @@ exports[`tags.html - html-verify 2`] = `
   Cancel</button
 >
 <br /><br />
+<p>
+  "<span
+    [innerHTML]="title"
+  ></span
+  >"
+  is
+  the
+  <i
+    >property
+    bound</i
+  >
+  title.
+</p>
 
 `;
 
@@ -2185,6 +2206,7 @@ exports[`tags.html - html-verify 3`] = `
   >Disabled Cancel</button
 >
 <br /><br />
+<p>"<span [innerHTML]="title"></span>" is the <i>property bound</i> title.</p>
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 <br />
 <br />
@@ -2278,6 +2300,12 @@ exports[`tags.html - html-verify 3`] = `
 <button xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx>12345678901234567890</button> <br /><br />
 
 <button bind-disabled="isUnchanged" on-click="onSave($event)">Disabled Cancel</button> <br /><br />
+<p>
+  "<span
+    [innerHTML]="title"
+  ></span
+  >" is the <i>property bound</i> title.
+</p>
 
 `;
 
@@ -2368,6 +2396,7 @@ exports[`tags.html - html-verify 4`] = `
   >Disabled Cancel</button
 >
 <br /><br />
+<p>"<span [innerHTML]="title"></span>" is the <i>property bound</i> title.</p>
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 <br />
 <br />
@@ -2512,6 +2541,12 @@ exports[`tags.html - html-verify 4`] = `
   >Disabled Cancel</button
 >
 <br /><br />
+<p
+  >"<span
+    [innerHTML]="title"
+  ></span
+  >" is the <i>property bound</i> title.</p
+>
 
 `;
 
@@ -2602,6 +2637,7 @@ exports[`tags.html - html-verify 5`] = `
   >Disabled Cancel</button
 >
 <br /><br />
+<p>"<span [innerHTML]="title"></span>" is the <i>property bound</i> title.</p>
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 <br />
 <br />
@@ -2771,6 +2807,13 @@ exports[`tags.html - html-verify 5`] = `
 </button>
 <br />
 <br />
+<p>
+  "
+  <span [innerHTML]="title"></span>
+  " is the
+  <i>property bound</i>
+  title.
+</p>
 
 `;
 
diff --git a/tests/html_tags/tags.html b/tests/html_tags/tags.html
index 2fb99a4d8761..9b0609428a2d 100644
--- a/tests/html_tags/tags.html
+++ b/tests/html_tags/tags.html
@@ -84,3 +84,4 @@
   >Disabled Cancel</button
 >
 <br /><br />
+<p>"<span [innerHTML]="title"></span>" is the <i>property bound</i> title.</p>

From 9d1645492c233b98a2403ae5e4bfde2da67b0749 Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Sun, 21 Oct 2018 13:20:51 +0800
Subject: [PATCH 081/177] fix: do not force breaking attr if open start marker
 is borrowed by prev

---
 src/language-html/printer-htmlparser2.js      |   8 --
 .../__snapshots__/jsfmt.spec.js.snap          | 118 ++++--------------
 2 files changed, 21 insertions(+), 105 deletions(-)

diff --git a/src/language-html/printer-htmlparser2.js b/src/language-html/printer-htmlparser2.js
index d1f199ffda81..7c84486961b3 100644
--- a/src/language-html/printer-htmlparser2.js
+++ b/src/language-html/printer-htmlparser2.js
@@ -448,14 +448,6 @@ function printOpeningTag(path, options, print) {
         : ""
       : group(
           concat([
-            node.prev && needsToBorrowNextOpeningTagStartMarker(node.prev)
-              ? /**
-                 *     123<a
-                 *       attr
-                 *     >
-                 */
-                breakParent
-              : "",
             indent(
               concat([
                 forceNotToBreakAttrContent ? " " : line,
diff --git a/tests/html_tags/__snapshots__/jsfmt.spec.js.snap b/tests/html_tags/__snapshots__/jsfmt.spec.js.snap
index 0afe932b7c9d..e82a0cec0c52 100644
--- a/tests/html_tags/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_tags/__snapshots__/jsfmt.spec.js.snap
@@ -304,8 +304,7 @@ exports[`openging-at-end.html - html-verify 1`] = `
 </p>
 
 <p>
-  Want to write us a letter? Use our<a
-    href="contacts.html#Mailing_address"
+  Want to write us a letter? Use our<a href="contacts.html#Mailing_address"
     ><b><a>mailing address</a></b></a
   >.
 </p>
@@ -454,19 +453,13 @@ exports[`openging-at-end.html - html-verify 3`] = `
 </p>
 
 <p>
-  Want to write us a letter? Use our<a
-    href="contacts.html#Mailing_address"
+  Want to write us a letter? Use our<a href="contacts.html#Mailing_address"
     ><b><a>mailing address</a></b></a
   >.
 </p>
 
 <p>
-  Want to write us a letter? Use our<a
-    href="contacts.html#Mailing_address"
-    href1="contacts.html#Mailing_address"
-    href2="contacts.html#Mailing_address"
-    href3="contacts.html#Mailing_address"
-    href4="contacts.html#Mailing_address"
+  Want to write us a letter? Use our<a href="contacts.html#Mailing_address" href1="contacts.html#Mailing_address" href2="contacts.html#Mailing_address" href3="contacts.html#Mailing_address" href4="contacts.html#Mailing_address"
     ><b><a>mailing address</a></b></a
   >.
 </p>
@@ -511,8 +504,7 @@ exports[`openging-at-end.html - html-verify 4`] = `
 >
 
 <p
-  >Want to write us a letter? Use our<a
-    href="contacts.html#Mailing_address"
+  >Want to write us a letter? Use our<a href="contacts.html#Mailing_address"
     ><b><a>mailing address</a></b></a
   >.</p
 >
@@ -1663,34 +1655,17 @@ exports[`tags.html - html-verify 1`] = `
   <div>string</div>
 </div>
 <ul>
-  123<li
-    class="foo"
-    id="bar"
-    >First</li
-  >456<li
-    class="baz"
-    >Second</li
+  123<li class="foo" id="bar">First</li
+  >456<li class="baz">Second</li
   >789
 </ul>
 <span>*<b>200</b></span>
 <img
   src="longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong"
 />123
-<div>
-  123<meta
-    attr
-  />456
-</div>
-<p>
-  x<span
-    a="b"
-  ></span>
-</p>
-<p>
-  x<meta
-    a
-  />
-</p>
+<div>123<meta attr />456</div>
+<p>x<span a="b"></span></p>
+<p>x<meta a /></p>
 <p>x<meta /></p>
 <span></span>
 
@@ -1712,12 +1687,7 @@ exports[`tags.html - html-verify 1`] = `
   >Disabled Cancel</button
 >
 <br /><br />
-<p>
-  "<span
-    [innerHTML]="title"
-  ></span
-  >" is the <i>property bound</i> title.
-</p>
+<p>"<span [innerHTML]="title"></span>" is the <i>property bound</i> title.</p>
 
 `;
 
@@ -2265,31 +2235,14 @@ exports[`tags.html - html-verify 3`] = `
   <div>string</div>
 </div>
 <ul>
-  123<li
-    class="foo"
-    id="bar"
-    >First</li
-  >456<li
-    class="baz"
-    >Second</li
+  123<li class="foo" id="bar">First</li
+  >456<li class="baz">Second</li
   >789
 </ul>
 <span>*<b>200</b></span> <img src="longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong" />123
-<div>
-  123<meta
-    attr
-  />456
-</div>
-<p>
-  x<span
-    a="b"
-  ></span>
-</p>
-<p>
-  x<meta
-    a
-  />
-</p>
+<div>123<meta attr />456</div>
+<p>x<span a="b"></span></p>
+<p>x<meta a /></p>
 <p>x<meta /></p>
 <span></span>
 
@@ -2300,12 +2253,7 @@ exports[`tags.html - html-verify 3`] = `
 <button xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx>12345678901234567890</button> <br /><br />
 
 <button bind-disabled="isUnchanged" on-click="onSave($event)">Disabled Cancel</button> <br /><br />
-<p>
-  "<span
-    [innerHTML]="title"
-  ></span
-  >" is the <i>property bound</i> title.
-</p>
+<p>"<span [innerHTML]="title"></span>" is the <i>property bound</i> title.</p>
 
 `;
 
@@ -2494,34 +2442,15 @@ exports[`tags.html - html-verify 4`] = `
   <div>string</div>
 </div>
 <ul
-  >123<li
-    class="foo"
-    id="bar"
-    >First</li
-  >456<li
-    class="baz"
-    >Second</li
+  >123<li class="foo" id="bar">First</li
+  >456<li class="baz">Second</li
   >789</ul
 >
 <span>*<b>200</b></span>
 <img
   src="longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong"
-/>123
-<div
-  >123<meta
-    attr
-  />456</div
->
-<p
-  >x<span
-    a="b"
-  ></span
-></p>
-<p
-  >x<meta
-    a
-/></p>
-<p>x<meta /></p> <span></span>
+/>123 <div>123<meta attr />456</div> <p>x<span a="b"></span></p>
+<p>x<meta a/></p> <p>x<meta /></p> <span></span>
 
 <label
   aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
@@ -2541,12 +2470,7 @@ exports[`tags.html - html-verify 4`] = `
   >Disabled Cancel</button
 >
 <br /><br />
-<p
-  >"<span
-    [innerHTML]="title"
-  ></span
-  >" is the <i>property bound</i> title.</p
->
+<p>"<span [innerHTML]="title"></span>" is the <i>property bound</i> title.</p>
 
 `;
 

From c8094a7d55e2ce9d7badfc54a78915c437583b66 Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Sun, 21 Oct 2018 13:27:57 +0800
Subject: [PATCH 082/177] test: add real-world test case

---
 .../__snapshots__/jsfmt.spec.js.snap          | 1484 +++++++++++++++++
 tests/html_angular/real-world.component.html  |  718 ++++++++
 2 files changed, 2202 insertions(+)
 create mode 100644 tests/html_angular/real-world.component.html

diff --git a/tests/html_angular/__snapshots__/jsfmt.spec.js.snap b/tests/html_angular/__snapshots__/jsfmt.spec.js.snap
index 47339b73da3e..9d004ba2ff49 100644
--- a/tests/html_angular/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_angular/__snapshots__/jsfmt.spec.js.snap
@@ -180,3 +180,1487 @@ exports[`interpolation.component.html - angular-verify 1`] = `
 <div>{{a?.b}}</div>
 
 `;
+
+exports[`real-world.component.html - angular-verify 1`] = `
+<!-- copied from: https://stackblitz.com/angular/ymdjlgmlavo -->
+
+<a id="toc"></a>
+<h1>Template Syntax</h1>
+<a href="#interpolation">Interpolation</a><br>
+<a href="#expression-context">Expression context</a><br>
+<a href="#statement-context">Statement context</a><br>
+<a href="#mental-model">Mental Model</a><br>
+<a href="#buttons">Buttons</a><br>
+<a href="#prop-vs-attrib">Properties vs. Attributes</a><br>
+<br>
+<a href="#property-binding">Property Binding</a><br>
+<div style="margin-left:8px">
+  <a href="#attribute-binding">Attribute Binding</a><br>
+  <a href="#class-binding">Class Binding</a><br>
+  <a href="#style-binding">Style Binding</a><br>
+</div>
+<br>
+<a href="#event-binding">Event Binding</a><br>
+<a href="#two-way">Two-way Binding</a><br>
+<br>
+<div>Directives</div>
+<div style="margin-left:8px">
+  <a href="#ngModel">NgModel (two-way) Binding</a><br>
+  <a href="#ngClass">NgClass Binding</a><br>
+  <a href="#ngStyle">NgStyle Binding</a><br>
+  <a href="#ngIf">NgIf</a><br>
+  <a href="#ngFor">NgFor</a><br>
+  <div style="margin-left:8px">
+    <a href="#ngFor-index">NgFor with index</a><br>
+    <a href="#ngFor-trackBy">NgFor with trackBy</a><br>
+  </div>
+  <a href="#ngSwitch">NgSwitch</a><br>
+</div>
+<br>
+<a href="#ref-vars">Template reference variables</a><br>
+<a href="#inputs-and-outputs">Inputs and outputs</a><br>
+<a href="#pipes">Pipes</a><br>
+<a href="#safe-navigation-operator">Safe navigation operator <i>?.</i></a><br>
+<a href="#non-null-assertion-operator">Non-null assertion operator <i>!.</i></a><br>
+<a href="#enums">Enums</a><br>
+
+<!-- Interpolation and expressions -->
+<hr><h2 id="interpolation">Interpolation</h2>
+
+<p>My current hero is {{currentHero.name}}</p>
+
+<h3>
+  {{title}}
+  <img src="{{heroImageUrl}}" style="height:30px">
+</h3>
+
+<!-- "The sum of 1 + 1 is 2" -->
+<p>The sum of 1 + 1 is {{1 + 1}}</p>
+
+<!-- "The sum of 1 + 1 is not 4" -->
+<p>The sum of 1 + 1 is not {{1 + 1 + getVal()}}</p>
+
+<a class="to-toc" href="#toc">top</a>
+
+<hr><h2 id="expression-context">Expression context</h2>
+
+<p>Component expression context (&#123;&#123;title&#125;&#125;, [hidden]="isUnchanged")</p>
+<div class="context">
+  {{title}}
+  <span [hidden]="isUnchanged">changed</span>
+</div>
+
+
+<p>Template input variable expression context (let hero)</p>
+<!-- template hides the following; plenty of examples later -->
+<ng-template>
+  <div *ngFor="let hero of heroes">{{hero.name}}</div>
+</ng-template>
+
+<p>Template reference variable expression context (#heroInput)</p>
+<div (keyup)="0" class="context">
+  Type something:
+  <input #heroInput> {{heroInput.value}}
+</div>
+
+<a class="to-toc" href="#toc">top</a>
+
+<hr><h2 id="statement-context">Statement context</h2>
+
+<p>Component statement context ( (click)="onSave() )
+<div class="context">
+  <button (click)="deleteHero()">Delete hero</button>
+</div>
+
+<p>Template $event statement context</p>
+<div class="context">
+  <button (click)="onSave($event)">Save</button>
+</div>
+
+<p>Template input variable statement context (let hero)</p>
+<!-- template hides the following; plenty of examples later -->
+<div class="context">
+  <button *ngFor="let hero of heroes" (click)="deleteHero(hero)">{{hero.name}}</button>
+</div>
+
+<p>Template reference variable statement context (#heroForm)</p>
+<div class="context">
+  <form #heroForm (ngSubmit)="onSubmit(heroForm)"> ... </form>
+</div>
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- New Mental Model -->
+<hr><h2 id="mental-model">New Mental Model</h2>
+
+<!--<img src="http://www.wpclipart.com/cartoon/people/hero/hero_silhoutte_T.png">-->
+<!-- Public Domain terms of use: http://www.wpclipart.com/terms.html -->
+<div class="special">Mental Model</div>
+<img src="assets/images/hero.png">
+<button disabled>Save</button>
+<br><br>
+
+<div>
+  <!-- Normal HTML -->
+  <div class="special">Mental Model</div>
+  <!-- Wow! A new element! -->
+  <app-hero-detail></app-hero-detail>
+</div>
+<br><br>
+
+<div>
+  <!-- Bind button disabled state to \`isUnchanged\` property -->
+  <button [disabled]="isUnchanged">Save</button>
+</div>
+<br><br>
+
+<div>
+  <img [src]="heroImageUrl">
+  <app-hero-detail [hero]="currentHero"></app-hero-detail>
+  <div [ngClass]="{'special': isSpecial}"></div>
+</div>
+<br><br>
+
+<button (click)="onSave()">Save</button>
+<app-hero-detail (deleteRequest)="deleteHero()"></app-hero-detail>
+<div (myClick)="clicked=$event" clickable>click me</div>
+{{clicked}}
+<br><br>
+
+<div>
+  Hero Name:
+  <input [(ngModel)]="name">
+  {{name}}
+</div>
+<br><br>
+
+<button [attr.aria-label]="help">help</button>
+<br><br>
+
+<div [class.special]="isSpecial">Special</div>
+<br><br>
+
+<button [style.color]="isSpecial ? 'red' : 'green'">
+button</button>
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- property vs. attribute -->
+<hr><h2 id="prop-vs-attrib">Property vs. Attribute (img examples)</h2>
+<!-- examine the following <img> tag in the browser tools -->
+<img src="images/ng-logo.png"
+    [src]="heroImageUrl">
+
+<br><br>
+
+<img [src]="iconUrl"/>
+<img bind-src="heroImageUrl"/>
+<img [attr.src]="villainImageUrl"/>
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- buttons -->
+<hr><h2 id="buttons">Buttons</h2>
+
+<button>Enabled (but does nothing)</button>
+<button disabled>Disabled</button>
+<button disabled=false>Still disabled</button>
+<br><br>
+<button disabled>disabled by attribute</button>
+<button [disabled]="isUnchanged">disabled by property binding</button>
+<br><br>
+<button bind-disabled="isUnchanged" on-click="onSave($event)">Disabled Cancel</button>
+<button [disabled]="!canSave" (click)="onSave($event)">Enabled Save</button>
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- property binding -->
+<hr><h2 id="property-binding">Property Binding</h2>
+
+<img [src]="heroImageUrl">
+<button [disabled]="isUnchanged">Cancel is disabled</button>
+<div [ngClass]="classes">[ngClass] binding to the classes property</div>
+<app-hero-detail [hero]="currentHero"></app-hero-detail>
+<img bind-src="heroImageUrl">
+
+<!-- ERROR: HeroDetailComponent.hero expects a
+     Hero object, not the string "currentHero" -->
+<div *ngIf="false">
+  <app-hero-detail hero="currentHero"></app-hero-detail>
+</div>
+<app-hero-detail prefix="You are my" [hero]="currentHero"></app-hero-detail>
+
+<p><img src="{{heroImageUrl}}"> is the <i>interpolated</i> image.</p>
+<p><img [src]="heroImageUrl"> is the <i>property bound</i> image.</p>
+
+<p><span>"{{title}}" is the <i>interpolated</i> title.</span></p>
+<p>"<span [innerHTML]="title"></span>" is the <i>property bound</i> title.</p>
+
+<!--
+  Angular generates warnings for these two lines as it sanitizes them
+  WARNING: sanitizing HTML stripped some content (see http://g.co/ng/security#xss).
+ -->
+<p><span>"{{evilTitle}}" is the <i>interpolated</i> evil title.</span></p>
+<p>"<span [innerHTML]="evilTitle"></span>" is the <i>property bound</i> evil title.</p>
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- attribute binding -->
+<hr><h2 id="attribute-binding">Attribute Binding</h2>
+
+<!--  create and set a colspan attribute -->
+<table border=1>
+  <!--  expression calculates colspan=2 -->
+  <tr><td [attr.colspan]="1 + 1">One-Two</td></tr>
+
+  <!-- ERROR: There is no \`colspan\` property to set!
+    <tr><td colspan="{{1 + 1}}">Three-Four</td></tr>
+  -->
+
+  <tr><td>Five</td><td>Six</td></tr>
+</table>
+
+<br>
+<!-- create and set an aria attribute for assistive technology -->
+<button [attr.aria-label]="actionName">{{actionName}} with Aria</button>
+<br><br>
+
+<!-- The following effects are not discussed in the chapter -->
+<div>
+  <!-- any use of [attr.disabled] creates the disabled attribute -->
+  <button [attr.disabled]="isUnchanged">Disabled</button>
+
+  <button [attr.disabled]="!isUnchanged">Disabled as well</button>
+
+  <!-- we'd have to remove it with property binding -->
+  <button disabled [disabled]="false">Enabled (but inert)</button>
+</div>
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- class binding -->
+<hr><h2 id="class-binding">Class Binding</h2>
+
+<!-- standard class attribute setting  -->
+<div class="bad curly special">Bad curly special</div>
+
+<!-- reset/override all class names with a binding  -->
+<div class="bad curly special"
+     [class]="badCurly">Bad curly</div>
+
+<!-- toggle the "special" class on/off with a property -->
+<div [class.special]="isSpecial">The class binding is special</div>
+
+<!-- binding to \`class.special\` trumps the class attribute -->
+<div class="special"
+     [class.special]="!isSpecial">This one is not so special</div>
+
+<div bind-class.special="isSpecial">This class binding is special too</div>
+
+<a class="to-toc" href="#toc">top</a>
+
+<!--style binding -->
+<hr><h2 id="style-binding">Style Binding</h2>
+
+<button [style.color]="isSpecial ? 'red': 'green'">Red</button>
+<button [style.background-color]="canSave ? 'cyan': 'grey'" >Save</button>
+
+<button [style.font-size.em]="isSpecial ? 3 : 1" >Big</button>
+<button [style.font-size.%]="!isSpecial ? 150 : 50" >Small</button>
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- event binding -->
+<hr><h2 id="event-binding">Event Binding</h2>
+
+<button (click)="onSave()">Save</button>
+
+<button on-click="onSave()">On Save</button>
+
+<div>
+<!-- \`myClick\` is an event on the custom \`ClickDirective\` -->
+<div (myClick)="clickMessage=$event" clickable>click with myClick</div>
+{{clickMessage}}
+</div>
+
+
+<!-- binding to a nested component -->
+<app-hero-detail (deleteRequest)="deleteHero($event)" [hero]="currentHero"></app-hero-detail>
+<br>
+
+<app-big-hero-detail
+    (deleteRequest)="deleteHero($event)"
+    [hero]="currentHero">
+</app-big-hero-detail>
+
+<div class="parent-div" (click)="onClickMe($event)" clickable>Click me
+  <div class="child-div">Click me too!</div>
+</div>
+
+<!-- Will save only once -->
+<div (click)="onSave()" clickable>
+  <button (click)="onSave($event)">Save, no propagation</button>
+</div>
+
+<!-- Will save twice -->
+<div (click)="onSave()" clickable>
+  <button (click)="onSave()">Save w/ propagation</button>
+</div>
+
+<a class="to-toc" href="#toc">top</a>
+
+<hr><h2 id="two-way">Two-way Binding</h2>
+<div id="two-way-1">
+  <app-sizer [(size)]="fontSizePx"></app-sizer>
+  <div [style.font-size.px]="fontSizePx">Resizable Text</div>
+  <label>FontSize (px): <input [(ngModel)]="fontSizePx"></label>
+</div>
+<br>
+<div id="two-way-2">
+  <h3>De-sugared two-way binding</h3>
+  <app-sizer [size]="fontSizePx" (sizeChange)="fontSizePx=$event"></app-sizer>
+</div>
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- Two way data binding unwound;
+    passing the changed display value to the event handler via \`$event\` -->
+<hr><h2 id="ngModel">NgModel (two-way) Binding</h2>
+
+<h3>Result: {{currentHero.name}}</h3>
+
+<input [value]="currentHero.name"
+       (input)="currentHero.name=$event.target.value" >
+without NgModel
+<br>
+<input [(ngModel)]="currentHero.name">
+[(ngModel)]
+<br>
+<input bindon-ngModel="currentHero.name">
+bindon-ngModel
+<br>
+<input
+  [ngModel]="currentHero.name"
+  (ngModelChange)="currentHero.name=$event">
+(ngModelChange)="...name=$event"
+<br>
+<input
+  [ngModel]="currentHero.name"
+  (ngModelChange)="setUppercaseName($event)">
+(ngModelChange)="setUppercaseName($event)"
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- NgClass binding -->
+<hr><h2 id="ngClass">NgClass Binding</h2>
+
+<p>currentClasses is {{currentClasses | json}}</p>
+<div [ngClass]="currentClasses">This div is initially saveable, unchanged, and special</div>
+
+<!-- not used in chapter -->
+<br>
+<label>saveable   <input type="checkbox" [(ngModel)]="canSave"></label> |
+<label>modified:  <input type="checkbox" [value]="!isUnchanged" (change)="isUnchanged=!isUnchanged"></label> |
+<label>special:   <input type="checkbox" [(ngModel)]="isSpecial"></label>
+<button (click)="setCurrentClasses()">Refresh currentClasses</button>
+<br><br>
+<div [ngClass]="currentClasses">
+  This div should be {{ canSave ? "": "not"}} saveable,
+                  {{ isUnchanged ? "unchanged" : "modified" }} and,
+                  {{ isSpecial ? "": "not"}} special after clicking "Refresh".</div>
+<br><br>
+
+<div [ngClass]="isSpecial ? 'special' : ''">This div is special</div>
+
+<div class="bad curly special">Bad curly special</div>
+<div [ngClass]="{'bad':false, 'curly':true, 'special':true}">Curly special</div>
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- NgStyle binding -->
+<hr><h2 id="ngStyle">NgStyle Binding</h2>
+
+<div [style.font-size]="isSpecial ? 'x-large' : 'smaller'" >
+  This div is x-large or smaller.
+</div>
+
+<h3>[ngStyle] binding to currentStyles - CSS property names</h3>
+<p>currentStyles is {{currentStyles | json}}</p>
+<div [ngStyle]="currentStyles">
+  This div is initially italic, normal weight, and extra large (24px).
+</div>
+
+<!-- not used in chapter -->
+<br>
+<label>italic: <input type="checkbox" [(ngModel)]="canSave"></label> |
+<label>normal: <input type="checkbox" [(ngModel)]="isUnchanged"></label> |
+<label>xlarge: <input type="checkbox" [(ngModel)]="isSpecial"></label>
+<button (click)="setCurrentStyles()">Refresh currentStyles</button>
+<br><br>
+<div [ngStyle]="currentStyles">
+  This div should be {{ canSave ? "italic": "plain"}},
+                  {{ isUnchanged ? "normal weight" : "bold" }} and,
+                  {{ isSpecial ? "extra large": "normal size"}} after clicking "Refresh".</div>
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- NgIf binding -->
+<hr><h2 id="ngIf">NgIf Binding</h2>
+
+<app-hero-detail *ngIf="isActive"></app-hero-detail>
+
+<div *ngIf="currentHero">Hello, {{currentHero.name}}</div>
+<div *ngIf="nullHero">Hello, {{nullHero.name}}</div>
+
+<!-- NgIf binding with template (no *) -->
+
+<ng-template [ngIf]="currentHero">Add {{currentHero.name}} with template</ng-template>
+
+<!-- Does not show because isActive is false! -->
+<div>Hero Detail removed from DOM (via template) because isActive is false</div>
+<ng-template [ngIf]="isActive">
+  <app-hero-detail></app-hero-detail>
+</ng-template>
+
+<!-- isSpecial is true -->
+<div [class.hidden]="!isSpecial">Show with class</div>
+<div [class.hidden]="isSpecial">Hide with class</div>
+
+<!-- HeroDetail is in the DOM but hidden -->
+<app-hero-detail [class.hidden]="isSpecial"></app-hero-detail>
+
+<div [style.display]="isSpecial ? 'block' : 'none'">Show with style</div>
+<div [style.display]="isSpecial ? 'none'  : 'block'">Hide with style</div>
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- NgFor binding -->
+<hr><h2 id="ngFor">NgFor Binding</h2>
+
+<div class="box">
+  <div *ngFor="let hero of heroes">{{hero.name}}</div>
+</div>
+<br>
+
+<div class="box">
+  <!-- *ngFor w/ hero-detail Component -->
+  <app-hero-detail *ngFor="let hero of heroes" [hero]="hero"></app-hero-detail>
+</div>
+
+<a class="to-toc" href="#toc">top</a>
+
+<h4 id="ngFor-index">*ngFor with index</h4>
+<p>with <i>semi-colon</i> separator</p>
+<div class="box">
+  <div *ngFor="let hero of heroes; let i=index">{{i + 1}} - {{hero.name}}</div>
+</div>
+
+<p>with <i>comma</i> separator</p>
+<div class="box">
+  <!-- Ex: "1 - Hercules" -->
+  <div *ngFor="let hero of heroes, let i=index">{{i + 1}} - {{hero.name}}</div>
+</div>
+
+<a class="to-toc" href="#toc">top</a>
+
+<h4 id="ngFor-trackBy">*ngFor trackBy</h4>
+<button (click)="resetHeroes()">Reset heroes</button>
+<button (click)="changeIds()">Change ids</button>
+<button (click)="clearTrackByCounts()">Clear counts</button>
+
+<p><i>without</i> trackBy</p>
+<div class="box">
+  <div #noTrackBy *ngFor="let hero of heroes">({{hero.id}}) {{hero.name}}</div>
+
+  <div id="noTrackByCnt" *ngIf="heroesNoTrackByCount" >
+    Hero DOM elements change #{{heroesNoTrackByCount}} without trackBy
+  </div>
+</div>
+
+<p>with trackBy</p>
+<div class="box">
+  <div #withTrackBy *ngFor="let hero of heroes; trackBy: trackByHeroes">({{hero.id}}) {{hero.name}}</div>
+
+  <div id="withTrackByCnt" *ngIf="heroesWithTrackByCount">
+    Hero DOM elements change #{{heroesWithTrackByCount}} with trackBy
+  </div>
+</div>
+
+<br><br><br>
+
+<p>with trackBy and <i>semi-colon</i> separator</p>
+<div class="box">
+  <div *ngFor="let hero of heroes; trackBy: trackByHeroes">
+    ({{hero.id}}) {{hero.name}}
+  </div>
+</div>
+
+<p>with trackBy and <i>comma</i> separator</p>
+<div class="box">
+  <div *ngFor="let hero of heroes, trackBy: trackByHeroes">({{hero.id}}) {{hero.name}}</div>
+</div>
+
+<p>with trackBy and <i>space</i> separator</p>
+<div class="box">
+  <div *ngFor="let hero of heroes trackBy: trackByHeroes">({{hero.id}}) {{hero.name}}</div>
+</div>
+
+<p>with <i>generic</i> trackById function</p>
+<div class="box">
+  <div *ngFor="let hero of heroes, trackBy: trackById">({{hero.id}}) {{hero.name}}</div>
+</div>
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- NgSwitch binding -->
+<hr><h2 id="ngSwitch">NgSwitch Binding</h2>
+
+<p>Pick your favorite hero</p>
+<div>
+  <label *ngFor="let h of heroes">
+    <input type="radio" name="heroes" [(ngModel)]="currentHero" [value]="h">{{h.name}}
+  </label>
+</div>
+
+<div [ngSwitch]="currentHero.emotion">
+  <app-happy-hero    *ngSwitchCase="'happy'"    [hero]="currentHero"></app-happy-hero>
+  <app-sad-hero      *ngSwitchCase="'sad'"      [hero]="currentHero"></app-sad-hero>
+  <app-confused-hero *ngSwitchCase="'confused'" [hero]="currentHero"></app-confused-hero>
+  <div *ngSwitchCase="'confused'">Are you as confused as {{currentHero.name}}?</div>
+  <app-unknown-hero  *ngSwitchDefault           [hero]="currentHero"></app-unknown-hero>
+</div>
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- template reference variable -->
+<hr><h2 id="ref-vars">Template reference variables</h2>
+
+<input #phone placeholder="phone number">
+
+<!-- lots of other elements -->
+
+<!-- phone refers to the input element; pass its \`value\` to an event handler -->
+<button (click)="callPhone(phone.value)">Call</button>
+
+<input ref-fax placeholder="fax number">
+<button (click)="callFax(fax.value)">Fax</button>
+
+<!-- btn refers to the button element; show its disabled state -->
+<button #btn disabled [innerHTML]="'disabled by attribute: '+btn.disabled"></button>
+
+<h4>Example Form</h4>
+<app-hero-form [hero]="currentHero"></app-hero-form>
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- inputs and output -->
+<hr><h2 id="inputs-and-outputs">Inputs and Outputs</h2>
+
+<img [src]="iconUrl"/>
+<button (click)="onSave()">Save</button>
+
+<app-hero-detail [hero]="currentHero" (deleteRequest)="deleteHero($event)">
+</app-hero-detail>
+
+<div (myClick)="clickMessage2=$event" clickable>myClick2</div>
+{{clickMessage2}}
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- Pipes -->
+<hr><h2 id="pipes">Pipes</h2>
+
+<div>Title through uppercase pipe: {{title | uppercase}}</div>
+
+<!-- Pipe chaining: convert title to uppercase, then to lowercase -->
+<div>
+  Title through a pipe chain:
+  {{title | uppercase | lowercase}}
+</div>
+
+<!-- pipe with configuration argument => "February 25, 1970" -->
+<div>Birthdate: {{currentHero?.birthdate | date:'longDate'}}</div>
+
+<div>{{currentHero | json}}</div>
+
+<div>Birthdate: {{(currentHero?.birthdate | date:'longDate') | uppercase}}</div>
+
+<div>
+  <!-- pipe price to USD and display the $ symbol -->
+  <label>Price: </label>{{product.price | currency:'USD':true}}
+</div>
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- Null values and the safe navigation operator -->
+<hr><h2 id="safe-navigation-operator">Safe navigation operator <i>?.</i></h2>
+
+<div>
+  The title is {{title}}
+</div>
+
+<div>
+  The current hero's name is {{currentHero?.name}}
+</div>
+
+<div>
+  The current hero's name is {{currentHero.name}}
+</div>
+
+
+<!--
+The null hero's name is {{nullHero.name}}
+
+See console log:
+  TypeError: Cannot read property 'name' of null in [null]
+-->
+
+<!--No hero, div not displayed, no error -->
+<div *ngIf="nullHero">The null hero's name is {{nullHero.name}}</div>
+
+<div>
+The null hero's name is {{nullHero && nullHero.name}}
+</div>
+
+<div>
+  <!-- No hero, no problem! -->
+  The null hero's name is {{nullHero?.name}}
+</div>
+
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- non-null assertion operator -->
+<hr><h2 id="non-null-assertion-operator">Non-null assertion operator <i>!.</i></h2>
+
+<div>
+  <!--No hero, no text -->
+  <div *ngIf="hero">
+    The hero's name is {{hero!.name}}
+  </div>
+</div>
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- non-null assertion operator -->
+<hr><h2 id="any-type-cast-function">$any type cast function <i>$any( )</i>.</h2>
+
+<div>
+  <!-- Accessing an undeclared member -->
+  <div>
+    The hero's marker is {{$any(hero).marker}}
+  </div>
+</div>
+
+<div>
+  <!-- Accessing an undeclared member -->
+  <div>
+    Undeclared members is {{$any(this).member}}
+  </div>
+</div>
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- TODO: discuss this in the Style binding section -->
+<!-- enums in bindings -->
+<hr><h2 id="enums">Enums in binding</h2>
+
+<p>
+  The name of the Color.Red enum is {{Color[Color.Red]}}.<br>
+  The current color is {{Color[color]}} and its number is {{color}}.<br>
+  <button [style.color]="Color[color]" (click)="colorToggle()">Enum Toggle</button>
+</p>
+
+<a class="to-toc" href="#toc">top</a>
+
+
+<!-- 
+Copyright 2017-2018 Google Inc. All Rights Reserved.
+Use of this source code is governed by an MIT-style license that
+can be found in the LICENSE file at http://angular.io/license
+-->
+
+<div id="heroForm">
+  <form (ngSubmit)="onSubmit(heroForm)" #heroForm="ngForm">
+    <div class="form-group">
+      <label for="name">Name
+        <input class="form-control" name="name" required [(ngModel)]="hero.name">
+      </label>
+    </div>
+    <button type="submit" [disabled]="!heroForm.form.valid">Submit</button>
+  </form>
+  <div [hidden]="!heroForm.form.valid">
+    {{submitMessage}}
+  </div>
+</div>
+
+
+<!-- 
+Copyright 2017-2018 Google Inc. All Rights Reserved.
+Use of this source code is governed by an MIT-style license that
+can be found in the LICENSE file at http://angular.io/license
+-->
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+<!-- copied from: https://stackblitz.com/angular/ymdjlgmlavo -->
+
+<a id="toc"></a>
+<h1>Template Syntax</h1>
+<a href="#interpolation">Interpolation</a><br />
+<a href="#expression-context">Expression context</a><br />
+<a href="#statement-context">Statement context</a><br />
+<a href="#mental-model">Mental Model</a><br />
+<a href="#buttons">Buttons</a><br />
+<a href="#prop-vs-attrib">Properties vs. Attributes</a><br />
+<br />
+<a href="#property-binding">Property Binding</a><br />
+<div style="margin-left:8px">
+  <a href="#attribute-binding">Attribute Binding</a><br />
+  <a href="#class-binding">Class Binding</a><br />
+  <a href="#style-binding">Style Binding</a><br />
+</div>
+<br />
+<a href="#event-binding">Event Binding</a><br />
+<a href="#two-way">Two-way Binding</a><br />
+<br />
+<div>Directives</div>
+<div style="margin-left:8px">
+  <a href="#ngModel">NgModel (two-way) Binding</a><br />
+  <a href="#ngClass">NgClass Binding</a><br />
+  <a href="#ngStyle">NgStyle Binding</a><br />
+  <a href="#ngIf">NgIf</a><br />
+  <a href="#ngFor">NgFor</a><br />
+  <div style="margin-left:8px">
+    <a href="#ngFor-index">NgFor with index</a><br />
+    <a href="#ngFor-trackBy">NgFor with trackBy</a><br />
+  </div>
+  <a href="#ngSwitch">NgSwitch</a><br />
+</div>
+<br />
+<a href="#ref-vars">Template reference variables</a><br />
+<a href="#inputs-and-outputs">Inputs and outputs</a><br />
+<a href="#pipes">Pipes</a><br />
+<a href="#safe-navigation-operator">Safe navigation operator <i>?.</i></a
+><br />
+<a href="#non-null-assertion-operator">Non-null assertion operator <i>!.</i></a
+><br />
+<a href="#enums">Enums</a><br />
+
+<!-- Interpolation and expressions -->
+<hr />
+<h2 id="interpolation">Interpolation</h2>
+
+<p>My current hero is {{currentHero.name}}</p>
+
+<h3>{{title}} <img src="{{heroImageUrl}}" style="height:30px" /></h3>
+
+<!-- "The sum of 1 + 1 is 2" -->
+<p>The sum of 1 + 1 is {{1 + 1}}</p>
+
+<!-- "The sum of 1 + 1 is not 4" -->
+<p>The sum of 1 + 1 is not {{1 + 1 + getVal()}}</p>
+
+<a class="to-toc" href="#toc">top</a>
+
+<hr />
+<h2 id="expression-context">Expression context</h2>
+
+<p>
+  Component expression context (&#123;&#123;title&#125;&#125;,
+  [hidden]="isUnchanged")
+</p>
+<div class="context">{{title}} <span [hidden]="isUnchanged">changed</span></div>
+
+<p>Template input variable expression context (let hero)</p>
+<!-- template hides the following; plenty of examples later -->
+<ng-template>
+  <div *ngFor="let hero of heroes">{{hero.name}}</div>
+</ng-template>
+
+<p>Template reference variable expression context (#heroInput)</p>
+<div (keyup)="0" class="context">
+  Type something: <input #heroInput /> {{heroInput.value}}
+</div>
+
+<a class="to-toc" href="#toc">top</a>
+
+<hr />
+<h2 id="statement-context">Statement context</h2>
+
+<p>
+  Component statement context ( (click)="onSave() )
+  <div class="context"><button (click)="deleteHero()">Delete hero</button></div>
+</p>
+<p>Template $event statement context</p>
+<div class="context"><button (click)="onSave($event)">Save</button></div>
+
+<p>Template input variable statement context (let hero)</p>
+<!-- template hides the following; plenty of examples later -->
+<div class="context">
+  <button *ngFor="let hero of heroes" (click)="deleteHero(hero)"
+    >{{hero.name}}</button
+  >
+</div>
+
+<p>Template reference variable statement context (#heroForm)</p>
+<div class="context">
+  <form #heroForm (ngSubmit)="onSubmit(heroForm)">...</form>
+</div>
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- New Mental Model -->
+<hr />
+<h2 id="mental-model">New Mental Model</h2>
+
+<!--
+  <img src="http://www.wpclipart.com/cartoon/people/hero/hero_silhoutte_T.png">
+-->
+<!-- Public Domain terms of use: http://www.wpclipart.com/terms.html -->
+<div class="special">Mental Model</div>
+<img src="assets/images/hero.png" /> <button disabled>Save</button> <br /><br />
+
+<div>
+  <!-- Normal HTML -->
+  <div class="special">Mental Model</div>
+  <!-- Wow! A new element! -->
+  <app-hero-detail></app-hero-detail>
+</div>
+<br /><br />
+
+<div>
+  <!-- Bind button disabled state to \`isUnchanged\` property -->
+  <button [disabled]="isUnchanged">Save</button>
+</div>
+<br /><br />
+
+<div>
+  <img [src]="heroImageUrl" />
+  <app-hero-detail [hero]="currentHero"></app-hero-detail>
+  <div [ngClass]="{ special: isSpecial }"></div>
+</div>
+<br /><br />
+
+<button (click)="onSave()">Save</button>
+<app-hero-detail (deleteRequest)="deleteHero()"></app-hero-detail>
+<div (myClick)="(clicked = $event)" clickable>click me</div>
+{{clicked}} <br /><br />
+
+<div>Hero Name: <input [(ngModel)]="name" /> {{name}}</div>
+<br /><br />
+
+<button [attr.aria-label]="help">help</button> <br /><br />
+
+<div [class.special]="isSpecial">Special</div>
+<br /><br />
+
+<button [style.color]="isSpecial ? 'red' : 'green'"> button</button>
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- property vs. attribute -->
+<hr />
+<h2 id="prop-vs-attrib">Property vs. Attribute (img examples)</h2>
+<!-- examine the following <img> tag in the browser tools -->
+<img src="images/ng-logo.png" [src]="heroImageUrl" />
+
+<br /><br />
+
+<img [src]="iconUrl" /> <img bind-src="heroImageUrl" />
+<img [attr.src]="villainImageUrl" />
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- buttons -->
+<hr />
+<h2 id="buttons">Buttons</h2>
+
+<button>Enabled (but does nothing)</button> <button disabled>Disabled</button>
+<button disabled="false">Still disabled</button> <br /><br />
+<button disabled>disabled by attribute</button>
+<button [disabled]="isUnchanged">disabled by property binding</button>
+<br /><br />
+<button bind-disabled="isUnchanged" on-click="onSave($event)"
+  >Disabled Cancel</button
+>
+<button [disabled]="!canSave" (click)="onSave($event)">Enabled Save</button>
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- property binding -->
+<hr />
+<h2 id="property-binding">Property Binding</h2>
+
+<img [src]="heroImageUrl" />
+<button [disabled]="isUnchanged">Cancel is disabled</button>
+<div [ngClass]="classes">[ngClass] binding to the classes property</div>
+<app-hero-detail [hero]="currentHero"></app-hero-detail>
+<img bind-src="heroImageUrl" />
+
+<!--
+  ERROR: HeroDetailComponent.hero expects a
+  Hero object, not the string "currentHero"
+-->
+<div *ngIf="false"><app-hero-detail hero="currentHero"></app-hero-detail></div>
+<app-hero-detail prefix="You are my" [hero]="currentHero"></app-hero-detail>
+
+<p><img src="{{heroImageUrl}}" /> is the <i>interpolated</i> image.</p>
+<p><img [src]="heroImageUrl" /> is the <i>property bound</i> image.</p>
+
+<p>
+  <span>"{{title}}" is the <i>interpolated</i> title.</span>
+</p>
+<p>"<span [innerHTML]="title"></span>" is the <i>property bound</i> title.</p>
+
+<!--
+  Angular generates warnings for these two lines as it sanitizes them
+  WARNING: sanitizing HTML stripped some content (see http://g.co/ng/security#xss).
+-->
+<p>
+  <span>"{{evilTitle}}" is the <i>interpolated</i> evil title.</span>
+</p>
+<p>
+  "<span [innerHTML]="evilTitle"></span>" is the <i>property bound</i> evil
+  title.
+</p>
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- attribute binding -->
+<hr />
+<h2 id="attribute-binding">Attribute Binding</h2>
+
+<!-- create and set a colspan attribute -->
+<table border="1">
+  <!-- expression calculates colspan=2 -->
+  <tr>
+    <td [attr.colspan]="1 + 1">One-Two</td>
+  </tr>
+
+  <!--
+    ERROR: There is no \`colspan\` property to set!
+    <tr><td colspan="{{1 + 1}}">Three-Four</td></tr>
+  -->
+
+  <tr>
+    <td>Five</td>
+    <td>Six</td>
+  </tr>
+</table>
+
+<br />
+<!-- create and set an aria attribute for assistive technology -->
+<button [attr.aria-label]="actionName">{{actionName}} with Aria</button>
+<br /><br />
+
+<!-- The following effects are not discussed in the chapter -->
+<div>
+  <!-- any use of [attr.disabled] creates the disabled attribute -->
+  <button [attr.disabled]="isUnchanged">Disabled</button>
+
+  <button [attr.disabled]="!isUnchanged">Disabled as well</button>
+
+  <!-- we'd have to remove it with property binding -->
+  <button disabled [disabled]="false">Enabled (but inert)</button>
+</div>
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- class binding -->
+<hr />
+<h2 id="class-binding">Class Binding</h2>
+
+<!-- standard class attribute setting -->
+<div class="bad curly special">Bad curly special</div>
+
+<!-- reset/override all class names with a binding -->
+<div class="bad curly special" [class]="badCurly">Bad curly</div>
+
+<!-- toggle the "special" class on/off with a property -->
+<div [class.special]="isSpecial">The class binding is special</div>
+
+<!-- binding to \`class.special\` trumps the class attribute -->
+<div class="special" [class.special]="!isSpecial">
+  This one is not so special
+</div>
+
+<div bind-class.special="isSpecial">This class binding is special too</div>
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- style binding -->
+<hr />
+<h2 id="style-binding">Style Binding</h2>
+
+<button [style.color]="isSpecial ? 'red' : 'green'">Red</button>
+<button [style.background-color]="canSave ? 'cyan' : 'grey'">Save</button>
+
+<button [style.font-size.em]="isSpecial ? 3 : 1">Big</button>
+<button [style.font-size.%]="!isSpecial ? 150 : 50">Small</button>
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- event binding -->
+<hr />
+<h2 id="event-binding">Event Binding</h2>
+
+<button (click)="onSave()">Save</button>
+
+<button on-click="onSave()">On Save</button>
+
+<div>
+  <!-- \`myClick\` is an event on the custom \`ClickDirective\` -->
+  <div (myClick)="(clickMessage = $event)" clickable>click with myClick</div>
+  {{clickMessage}}
+</div>
+
+<!-- binding to a nested component -->
+<app-hero-detail
+  (deleteRequest)="deleteHero($event)"
+  [hero]="currentHero"
+></app-hero-detail>
+<br />
+
+<app-big-hero-detail (deleteRequest)="deleteHero($event)" [hero]="currentHero">
+</app-big-hero-detail>
+
+<div class="parent-div" (click)="onClickMe($event)" clickable>
+  Click me
+  <div class="child-div">Click me too!</div>
+</div>
+
+<!-- Will save only once -->
+<div (click)="onSave()" clickable>
+  <button (click)="onSave($event)">Save, no propagation</button>
+</div>
+
+<!-- Will save twice -->
+<div (click)="onSave()" clickable>
+  <button (click)="onSave()">Save w/ propagation</button>
+</div>
+
+<a class="to-toc" href="#toc">top</a>
+
+<hr />
+<h2 id="two-way">Two-way Binding</h2>
+<div id="two-way-1">
+  <app-sizer [(size)]="fontSizePx"></app-sizer>
+  <div [style.font-size.px]="fontSizePx">Resizable Text</div>
+  <label>FontSize (px): <input [(ngModel)]="fontSizePx"/></label>
+</div>
+<br />
+<div id="two-way-2">
+  <h3>De-sugared two-way binding</h3>
+  <app-sizer
+    [size]="fontSizePx"
+    (sizeChange)="(fontSizePx = $event)"
+  ></app-sizer>
+</div>
+
+<a class="to-toc" href="#toc">top</a>
+
+<!--
+  Two way data binding unwound;
+  passing the changed display value to the event handler via \`$event\`
+-->
+<hr />
+<h2 id="ngModel">NgModel (two-way) Binding</h2>
+
+<h3>Result: {{currentHero.name}}</h3>
+
+<input
+  [value]="currentHero.name"
+  (input)="(currentHero.name = $event.target.value)"
+/>
+without NgModel <br />
+<input [(ngModel)]="currentHero.name" /> [(ngModel)] <br />
+<input bindon-ngModel="currentHero.name" /> bindon-ngModel <br />
+<input
+  [ngModel]="currentHero.name"
+  (ngModelChange)="(currentHero.name = $event)"
+/>
+(ngModelChange)="...name=$event" <br />
+<input
+  [ngModel]="currentHero.name"
+  (ngModelChange)="setUppercaseName($event)"
+/>
+(ngModelChange)="setUppercaseName($event)"
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- NgClass binding -->
+<hr />
+<h2 id="ngClass">NgClass Binding</h2>
+
+<p>currentClasses is {{currentClasses | json}}</p>
+<div [ngClass]="currentClasses">
+  This div is initially saveable, unchanged, and special
+</div>
+
+<!-- not used in chapter -->
+<br />
+<label>saveable <input type="checkbox" [(ngModel)]="canSave"/></label> |
+<label
+  >modified:
+  <input
+    type="checkbox"
+    [value]="!isUnchanged"
+    (change)="(isUnchanged = !isUnchanged)"
+/></label>
+| <label>special: <input type="checkbox" [(ngModel)]="isSpecial"/></label>
+<button (click)="setCurrentClasses()">Refresh currentClasses</button>
+<br /><br />
+<div [ngClass]="currentClasses">
+  This div should be {{canSave ? "" : "not"}} saveable,
+  {{isUnchanged ? "unchanged" : "modified"}} and,
+  {{isSpecial ? "" : "not"}} special after clicking "Refresh".
+</div>
+<br /><br />
+
+<div [ngClass]="isSpecial ? 'special' : ''">This div is special</div>
+
+<div class="bad curly special">Bad curly special</div>
+<div [ngClass]="{ bad: false, curly: true, special: true }">Curly special</div>
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- NgStyle binding -->
+<hr />
+<h2 id="ngStyle">NgStyle Binding</h2>
+
+<div [style.font-size]="isSpecial ? 'x-large' : 'smaller'">
+  This div is x-large or smaller.
+</div>
+
+<h3>[ngStyle] binding to currentStyles - CSS property names</h3>
+<p>currentStyles is {{currentStyles | json}}</p>
+<div [ngStyle]="currentStyles">
+  This div is initially italic, normal weight, and extra large (24px).
+</div>
+
+<!-- not used in chapter -->
+<br />
+<label>italic: <input type="checkbox" [(ngModel)]="canSave"/></label> |
+<label>normal: <input type="checkbox" [(ngModel)]="isUnchanged"/></label> |
+<label>xlarge: <input type="checkbox" [(ngModel)]="isSpecial"/></label>
+<button (click)="setCurrentStyles()">Refresh currentStyles</button> <br /><br />
+<div [ngStyle]="currentStyles">
+  This div should be {{canSave ? "italic" : "plain"}},
+  {{isUnchanged ? "normal weight" : "bold"}} and,
+  {{isSpecial ? "extra large" : "normal size"}} after clicking "Refresh".
+</div>
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- NgIf binding -->
+<hr />
+<h2 id="ngIf">NgIf Binding</h2>
+
+<app-hero-detail *ngIf="isActive"></app-hero-detail>
+
+<div *ngIf="currentHero">Hello, {{currentHero.name}}</div>
+<div *ngIf="nullHero">Hello, {{nullHero.name}}</div>
+
+<!-- NgIf binding with template (no *) -->
+
+<ng-template [ngIf]="currentHero"
+  >Add {{currentHero.name}} with template</ng-template
+>
+
+<!-- Does not show because isActive is false! -->
+<div>Hero Detail removed from DOM (via template) because isActive is false</div>
+<ng-template [ngIf]="isActive">
+  <app-hero-detail></app-hero-detail>
+</ng-template>
+
+<!-- isSpecial is true -->
+<div [class.hidden]="!isSpecial">Show with class</div>
+<div [class.hidden]="isSpecial">Hide with class</div>
+
+<!-- HeroDetail is in the DOM but hidden -->
+<app-hero-detail [class.hidden]="isSpecial"></app-hero-detail>
+
+<div [style.display]="isSpecial ? 'block' : 'none'">Show with style</div>
+<div [style.display]="isSpecial ? 'none' : 'block'">Hide with style</div>
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- NgFor binding -->
+<hr />
+<h2 id="ngFor">NgFor Binding</h2>
+
+<div class="box">
+  <div *ngFor="let hero of heroes">{{hero.name}}</div>
+</div>
+<br />
+
+<div class="box">
+  <!-- *ngFor w/ hero-detail Component -->
+  <app-hero-detail *ngFor="let hero of heroes" [hero]="hero"></app-hero-detail>
+</div>
+
+<a class="to-toc" href="#toc">top</a>
+
+<h4 id="ngFor-index">*ngFor with index</h4>
+<p>with <i>semi-colon</i> separator</p>
+<div class="box">
+  <div *ngFor="let hero of heroes; let i=index">{{i + 1}} - {{hero.name}}</div>
+</div>
+
+<p>with <i>comma</i> separator</p>
+<div class="box">
+  <!-- Ex: "1 - Hercules" -->
+  <div *ngFor="let hero of heroes; let i=index">{{i + 1}} - {{hero.name}}</div>
+</div>
+
+<a class="to-toc" href="#toc">top</a>
+
+<h4 id="ngFor-trackBy">*ngFor trackBy</h4>
+<button (click)="resetHeroes()">Reset heroes</button>
+<button (click)="changeIds()">Change ids</button>
+<button (click)="clearTrackByCounts()">Clear counts</button>
+
+<p><i>without</i> trackBy</p>
+<div class="box">
+  <div #noTrackBy *ngFor="let hero of heroes">({{hero.id}}) {{hero.name}}</div>
+
+  <div id="noTrackByCnt" *ngIf="heroesNoTrackByCount">
+    Hero DOM elements change #{{heroesNoTrackByCount}} without trackBy
+  </div>
+</div>
+
+<p>with trackBy</p>
+<div class="box">
+  <div #withTrackBy *ngFor="let hero of heroes; trackBy: trackByHeroes">
+    ({{hero.id}}) {{hero.name}}
+  </div>
+
+  <div id="withTrackByCnt" *ngIf="heroesWithTrackByCount">
+    Hero DOM elements change #{{heroesWithTrackByCount}} with trackBy
+  </div>
+</div>
+
+<br /><br /><br />
+
+<p>with trackBy and <i>semi-colon</i> separator</p>
+<div class="box">
+  <div *ngFor="let hero of heroes; trackBy: trackByHeroes">
+    ({{hero.id}}) {{hero.name}}
+  </div>
+</div>
+
+<p>with trackBy and <i>comma</i> separator</p>
+<div class="box">
+  <div *ngFor="let hero of heroes; trackBy: trackByHeroes">
+    ({{hero.id}}) {{hero.name}}
+  </div>
+</div>
+
+<p>with trackBy and <i>space</i> separator</p>
+<div class="box">
+  <div *ngFor="let hero of heroes; trackBy: trackByHeroes">
+    ({{hero.id}}) {{hero.name}}
+  </div>
+</div>
+
+<p>with <i>generic</i> trackById function</p>
+<div class="box">
+  <div *ngFor="let hero of heroes; trackBy: trackById">
+    ({{hero.id}}) {{hero.name}}
+  </div>
+</div>
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- NgSwitch binding -->
+<hr />
+<h2 id="ngSwitch">NgSwitch Binding</h2>
+
+<p>Pick your favorite hero</p>
+<div>
+  <label *ngFor="let h of heroes">
+    <input type="radio" name="heroes" [(ngModel)]="currentHero" [value]="h" />{{
+      h.name
+    }}
+  </label>
+</div>
+
+<div [ngSwitch]="currentHero.emotion">
+  <app-happy-hero *ngSwitchCase="'happy'" [hero]="currentHero"></app-happy-hero>
+  <app-sad-hero *ngSwitchCase="'sad'" [hero]="currentHero"></app-sad-hero>
+  <app-confused-hero
+    *ngSwitchCase="'confused'"
+    [hero]="currentHero"
+  ></app-confused-hero>
+  <div *ngSwitchCase="'confused'">
+    Are you as confused as {{currentHero.name}}?
+  </div>
+  <app-unknown-hero *ngSwitchDefault [hero]="currentHero"></app-unknown-hero>
+</div>
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- template reference variable -->
+<hr />
+<h2 id="ref-vars">Template reference variables</h2>
+
+<input #phone placeholder="phone number" />
+
+<!-- lots of other elements -->
+
+<!-- phone refers to the input element; pass its \`value\` to an event handler -->
+<button (click)="callPhone(phone.value)">Call</button>
+
+<input ref-fax placeholder="fax number" />
+<button (click)="callFax(fax.value)">Fax</button>
+
+<!-- btn refers to the button element; show its disabled state -->
+<button
+  #btn
+  disabled
+  [innerHTML]="'disabled by attribute: ' + btn.disabled"
+></button>
+
+<h4>Example Form</h4>
+<app-hero-form [hero]="currentHero"></app-hero-form>
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- inputs and output -->
+<hr />
+<h2 id="inputs-and-outputs">Inputs and Outputs</h2>
+
+<img [src]="iconUrl" /> <button (click)="onSave()">Save</button>
+
+<app-hero-detail [hero]="currentHero" (deleteRequest)="deleteHero($event)">
+</app-hero-detail>
+
+<div (myClick)="(clickMessage2 = $event)" clickable>myClick2</div>
+{{clickMessage2}}
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- Pipes -->
+<hr />
+<h2 id="pipes">Pipes</h2>
+
+<div>Title through uppercase pipe: {{title | uppercase}}</div>
+
+<!-- Pipe chaining: convert title to uppercase, then to lowercase -->
+<div>Title through a pipe chain: {{title | uppercase | lowercase}}</div>
+
+<!-- pipe with configuration argument => "February 25, 1970" -->
+<div>Birthdate: {{currentHero?.birthdate | date:"longDate"}}</div>
+
+<div>{{currentHero | json}}</div>
+
+<div>Birthdate: {{currentHero?.birthdate | date:"longDate" | uppercase}}</div>
+
+<div>
+  <!-- pipe price to USD and display the $ symbol -->
+  <label>Price:</label>{{product.price | currency:"USD":true}}
+</div>
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- Null values and the safe navigation operator -->
+<hr />
+<h2 id="safe-navigation-operator">Safe navigation operator <i>?.</i></h2>
+
+<div>The title is {{title}}</div>
+
+<div>The current hero's name is {{currentHero?.name}}</div>
+
+<div>The current hero's name is {{currentHero.name}}</div>
+
+<!--
+  The null hero's name is {{nullHero.name}}
+
+  See console log:
+    TypeError: Cannot read property 'name' of null in [null]
+-->
+
+<!-- No hero, div not displayed, no error -->
+<div *ngIf="nullHero">The null hero's name is {{nullHero.name}}</div>
+
+<div>The null hero's name is {{nullHero && nullHero.name}}</div>
+
+<div>
+  <!-- No hero, no problem! -->
+  The null hero's name is {{nullHero?.name}}
+</div>
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- non-null assertion operator -->
+<hr />
+<h2 id="non-null-assertion-operator">Non-null assertion operator <i>!.</i></h2>
+
+<div>
+  <!-- No hero, no text -->
+  <div *ngIf="hero">The hero's name is {{hero!.name}}</div>
+</div>
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- non-null assertion operator -->
+<hr />
+<h2 id="any-type-cast-function">$any type cast function <i>$any( )</i>.</h2>
+
+<div>
+  <!-- Accessing an undeclared member -->
+  <div>The hero's marker is {{$any(hero).marker}}</div>
+</div>
+
+<div>
+  <!-- Accessing an undeclared member -->
+  <div>Undeclared members is {{$any(this).member}}</div>
+</div>
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- TODO: discuss this in the Style binding section -->
+<!-- enums in bindings -->
+<hr />
+<h2 id="enums">Enums in binding</h2>
+
+<p>
+  The name of the Color.Red enum is {{Color[Color.Red]}}.<br />
+  The current color is {{Color[color]}} and its number is {{color}}.<br />
+  <button [style.color]="Color[color]" (click)="colorToggle()"
+    >Enum Toggle</button
+  >
+</p>
+
+<a class="to-toc" href="#toc">top</a>
+
+<!--
+  Copyright 2017-2018 Google Inc. All Rights Reserved.
+  Use of this source code is governed by an MIT-style license that
+  can be found in the LICENSE file at http://angular.io/license
+-->
+
+<div id="heroForm">
+  <form (ngSubmit)="onSubmit(heroForm)" #heroForm="ngForm">
+    <div class="form-group">
+      <label for="name"
+        >Name
+        <input
+          class="form-control"
+          name="name"
+          required
+          [(ngModel)]="hero.name"
+        />
+      </label>
+    </div>
+    <button type="submit" [disabled]="!heroForm.form.valid">Submit</button>
+  </form>
+  <div [hidden]="!heroForm.form.valid">{{submitMessage}}</div>
+</div>
+
+<!--
+  Copyright 2017-2018 Google Inc. All Rights Reserved.
+  Use of this source code is governed by an MIT-style license that
+  can be found in the LICENSE file at http://angular.io/license
+-->
+
+`;
diff --git a/tests/html_angular/real-world.component.html b/tests/html_angular/real-world.component.html
new file mode 100644
index 000000000000..b7bdab56ba06
--- /dev/null
+++ b/tests/html_angular/real-world.component.html
@@ -0,0 +1,718 @@
+<!-- copied from: https://stackblitz.com/angular/ymdjlgmlavo -->
+
+<a id="toc"></a>
+<h1>Template Syntax</h1>
+<a href="#interpolation">Interpolation</a><br>
+<a href="#expression-context">Expression context</a><br>
+<a href="#statement-context">Statement context</a><br>
+<a href="#mental-model">Mental Model</a><br>
+<a href="#buttons">Buttons</a><br>
+<a href="#prop-vs-attrib">Properties vs. Attributes</a><br>
+<br>
+<a href="#property-binding">Property Binding</a><br>
+<div style="margin-left:8px">
+  <a href="#attribute-binding">Attribute Binding</a><br>
+  <a href="#class-binding">Class Binding</a><br>
+  <a href="#style-binding">Style Binding</a><br>
+</div>
+<br>
+<a href="#event-binding">Event Binding</a><br>
+<a href="#two-way">Two-way Binding</a><br>
+<br>
+<div>Directives</div>
+<div style="margin-left:8px">
+  <a href="#ngModel">NgModel (two-way) Binding</a><br>
+  <a href="#ngClass">NgClass Binding</a><br>
+  <a href="#ngStyle">NgStyle Binding</a><br>
+  <a href="#ngIf">NgIf</a><br>
+  <a href="#ngFor">NgFor</a><br>
+  <div style="margin-left:8px">
+    <a href="#ngFor-index">NgFor with index</a><br>
+    <a href="#ngFor-trackBy">NgFor with trackBy</a><br>
+  </div>
+  <a href="#ngSwitch">NgSwitch</a><br>
+</div>
+<br>
+<a href="#ref-vars">Template reference variables</a><br>
+<a href="#inputs-and-outputs">Inputs and outputs</a><br>
+<a href="#pipes">Pipes</a><br>
+<a href="#safe-navigation-operator">Safe navigation operator <i>?.</i></a><br>
+<a href="#non-null-assertion-operator">Non-null assertion operator <i>!.</i></a><br>
+<a href="#enums">Enums</a><br>
+
+<!-- Interpolation and expressions -->
+<hr><h2 id="interpolation">Interpolation</h2>
+
+<p>My current hero is {{currentHero.name}}</p>
+
+<h3>
+  {{title}}
+  <img src="{{heroImageUrl}}" style="height:30px">
+</h3>
+
+<!-- "The sum of 1 + 1 is 2" -->
+<p>The sum of 1 + 1 is {{1 + 1}}</p>
+
+<!-- "The sum of 1 + 1 is not 4" -->
+<p>The sum of 1 + 1 is not {{1 + 1 + getVal()}}</p>
+
+<a class="to-toc" href="#toc">top</a>
+
+<hr><h2 id="expression-context">Expression context</h2>
+
+<p>Component expression context (&#123;&#123;title&#125;&#125;, [hidden]="isUnchanged")</p>
+<div class="context">
+  {{title}}
+  <span [hidden]="isUnchanged">changed</span>
+</div>
+
+
+<p>Template input variable expression context (let hero)</p>
+<!-- template hides the following; plenty of examples later -->
+<ng-template>
+  <div *ngFor="let hero of heroes">{{hero.name}}</div>
+</ng-template>
+
+<p>Template reference variable expression context (#heroInput)</p>
+<div (keyup)="0" class="context">
+  Type something:
+  <input #heroInput> {{heroInput.value}}
+</div>
+
+<a class="to-toc" href="#toc">top</a>
+
+<hr><h2 id="statement-context">Statement context</h2>
+
+<p>Component statement context ( (click)="onSave() )
+<div class="context">
+  <button (click)="deleteHero()">Delete hero</button>
+</div>
+
+<p>Template $event statement context</p>
+<div class="context">
+  <button (click)="onSave($event)">Save</button>
+</div>
+
+<p>Template input variable statement context (let hero)</p>
+<!-- template hides the following; plenty of examples later -->
+<div class="context">
+  <button *ngFor="let hero of heroes" (click)="deleteHero(hero)">{{hero.name}}</button>
+</div>
+
+<p>Template reference variable statement context (#heroForm)</p>
+<div class="context">
+  <form #heroForm (ngSubmit)="onSubmit(heroForm)"> ... </form>
+</div>
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- New Mental Model -->
+<hr><h2 id="mental-model">New Mental Model</h2>
+
+<!--<img src="http://www.wpclipart.com/cartoon/people/hero/hero_silhoutte_T.png">-->
+<!-- Public Domain terms of use: http://www.wpclipart.com/terms.html -->
+<div class="special">Mental Model</div>
+<img src="assets/images/hero.png">
+<button disabled>Save</button>
+<br><br>
+
+<div>
+  <!-- Normal HTML -->
+  <div class="special">Mental Model</div>
+  <!-- Wow! A new element! -->
+  <app-hero-detail></app-hero-detail>
+</div>
+<br><br>
+
+<div>
+  <!-- Bind button disabled state to `isUnchanged` property -->
+  <button [disabled]="isUnchanged">Save</button>
+</div>
+<br><br>
+
+<div>
+  <img [src]="heroImageUrl">
+  <app-hero-detail [hero]="currentHero"></app-hero-detail>
+  <div [ngClass]="{'special': isSpecial}"></div>
+</div>
+<br><br>
+
+<button (click)="onSave()">Save</button>
+<app-hero-detail (deleteRequest)="deleteHero()"></app-hero-detail>
+<div (myClick)="clicked=$event" clickable>click me</div>
+{{clicked}}
+<br><br>
+
+<div>
+  Hero Name:
+  <input [(ngModel)]="name">
+  {{name}}
+</div>
+<br><br>
+
+<button [attr.aria-label]="help">help</button>
+<br><br>
+
+<div [class.special]="isSpecial">Special</div>
+<br><br>
+
+<button [style.color]="isSpecial ? 'red' : 'green'">
+button</button>
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- property vs. attribute -->
+<hr><h2 id="prop-vs-attrib">Property vs. Attribute (img examples)</h2>
+<!-- examine the following <img> tag in the browser tools -->
+<img src="images/ng-logo.png"
+    [src]="heroImageUrl">
+
+<br><br>
+
+<img [src]="iconUrl"/>
+<img bind-src="heroImageUrl"/>
+<img [attr.src]="villainImageUrl"/>
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- buttons -->
+<hr><h2 id="buttons">Buttons</h2>
+
+<button>Enabled (but does nothing)</button>
+<button disabled>Disabled</button>
+<button disabled=false>Still disabled</button>
+<br><br>
+<button disabled>disabled by attribute</button>
+<button [disabled]="isUnchanged">disabled by property binding</button>
+<br><br>
+<button bind-disabled="isUnchanged" on-click="onSave($event)">Disabled Cancel</button>
+<button [disabled]="!canSave" (click)="onSave($event)">Enabled Save</button>
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- property binding -->
+<hr><h2 id="property-binding">Property Binding</h2>
+
+<img [src]="heroImageUrl">
+<button [disabled]="isUnchanged">Cancel is disabled</button>
+<div [ngClass]="classes">[ngClass] binding to the classes property</div>
+<app-hero-detail [hero]="currentHero"></app-hero-detail>
+<img bind-src="heroImageUrl">
+
+<!-- ERROR: HeroDetailComponent.hero expects a
+     Hero object, not the string "currentHero" -->
+<div *ngIf="false">
+  <app-hero-detail hero="currentHero"></app-hero-detail>
+</div>
+<app-hero-detail prefix="You are my" [hero]="currentHero"></app-hero-detail>
+
+<p><img src="{{heroImageUrl}}"> is the <i>interpolated</i> image.</p>
+<p><img [src]="heroImageUrl"> is the <i>property bound</i> image.</p>
+
+<p><span>"{{title}}" is the <i>interpolated</i> title.</span></p>
+<p>"<span [innerHTML]="title"></span>" is the <i>property bound</i> title.</p>
+
+<!--
+  Angular generates warnings for these two lines as it sanitizes them
+  WARNING: sanitizing HTML stripped some content (see http://g.co/ng/security#xss).
+ -->
+<p><span>"{{evilTitle}}" is the <i>interpolated</i> evil title.</span></p>
+<p>"<span [innerHTML]="evilTitle"></span>" is the <i>property bound</i> evil title.</p>
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- attribute binding -->
+<hr><h2 id="attribute-binding">Attribute Binding</h2>
+
+<!--  create and set a colspan attribute -->
+<table border=1>
+  <!--  expression calculates colspan=2 -->
+  <tr><td [attr.colspan]="1 + 1">One-Two</td></tr>
+
+  <!-- ERROR: There is no `colspan` property to set!
+    <tr><td colspan="{{1 + 1}}">Three-Four</td></tr>
+  -->
+
+  <tr><td>Five</td><td>Six</td></tr>
+</table>
+
+<br>
+<!-- create and set an aria attribute for assistive technology -->
+<button [attr.aria-label]="actionName">{{actionName}} with Aria</button>
+<br><br>
+
+<!-- The following effects are not discussed in the chapter -->
+<div>
+  <!-- any use of [attr.disabled] creates the disabled attribute -->
+  <button [attr.disabled]="isUnchanged">Disabled</button>
+
+  <button [attr.disabled]="!isUnchanged">Disabled as well</button>
+
+  <!-- we'd have to remove it with property binding -->
+  <button disabled [disabled]="false">Enabled (but inert)</button>
+</div>
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- class binding -->
+<hr><h2 id="class-binding">Class Binding</h2>
+
+<!-- standard class attribute setting  -->
+<div class="bad curly special">Bad curly special</div>
+
+<!-- reset/override all class names with a binding  -->
+<div class="bad curly special"
+     [class]="badCurly">Bad curly</div>
+
+<!-- toggle the "special" class on/off with a property -->
+<div [class.special]="isSpecial">The class binding is special</div>
+
+<!-- binding to `class.special` trumps the class attribute -->
+<div class="special"
+     [class.special]="!isSpecial">This one is not so special</div>
+
+<div bind-class.special="isSpecial">This class binding is special too</div>
+
+<a class="to-toc" href="#toc">top</a>
+
+<!--style binding -->
+<hr><h2 id="style-binding">Style Binding</h2>
+
+<button [style.color]="isSpecial ? 'red': 'green'">Red</button>
+<button [style.background-color]="canSave ? 'cyan': 'grey'" >Save</button>
+
+<button [style.font-size.em]="isSpecial ? 3 : 1" >Big</button>
+<button [style.font-size.%]="!isSpecial ? 150 : 50" >Small</button>
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- event binding -->
+<hr><h2 id="event-binding">Event Binding</h2>
+
+<button (click)="onSave()">Save</button>
+
+<button on-click="onSave()">On Save</button>
+
+<div>
+<!-- `myClick` is an event on the custom `ClickDirective` -->
+<div (myClick)="clickMessage=$event" clickable>click with myClick</div>
+{{clickMessage}}
+</div>
+
+
+<!-- binding to a nested component -->
+<app-hero-detail (deleteRequest)="deleteHero($event)" [hero]="currentHero"></app-hero-detail>
+<br>
+
+<app-big-hero-detail
+    (deleteRequest)="deleteHero($event)"
+    [hero]="currentHero">
+</app-big-hero-detail>
+
+<div class="parent-div" (click)="onClickMe($event)" clickable>Click me
+  <div class="child-div">Click me too!</div>
+</div>
+
+<!-- Will save only once -->
+<div (click)="onSave()" clickable>
+  <button (click)="onSave($event)">Save, no propagation</button>
+</div>
+
+<!-- Will save twice -->
+<div (click)="onSave()" clickable>
+  <button (click)="onSave()">Save w/ propagation</button>
+</div>
+
+<a class="to-toc" href="#toc">top</a>
+
+<hr><h2 id="two-way">Two-way Binding</h2>
+<div id="two-way-1">
+  <app-sizer [(size)]="fontSizePx"></app-sizer>
+  <div [style.font-size.px]="fontSizePx">Resizable Text</div>
+  <label>FontSize (px): <input [(ngModel)]="fontSizePx"></label>
+</div>
+<br>
+<div id="two-way-2">
+  <h3>De-sugared two-way binding</h3>
+  <app-sizer [size]="fontSizePx" (sizeChange)="fontSizePx=$event"></app-sizer>
+</div>
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- Two way data binding unwound;
+    passing the changed display value to the event handler via `$event` -->
+<hr><h2 id="ngModel">NgModel (two-way) Binding</h2>
+
+<h3>Result: {{currentHero.name}}</h3>
+
+<input [value]="currentHero.name"
+       (input)="currentHero.name=$event.target.value" >
+without NgModel
+<br>
+<input [(ngModel)]="currentHero.name">
+[(ngModel)]
+<br>
+<input bindon-ngModel="currentHero.name">
+bindon-ngModel
+<br>
+<input
+  [ngModel]="currentHero.name"
+  (ngModelChange)="currentHero.name=$event">
+(ngModelChange)="...name=$event"
+<br>
+<input
+  [ngModel]="currentHero.name"
+  (ngModelChange)="setUppercaseName($event)">
+(ngModelChange)="setUppercaseName($event)"
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- NgClass binding -->
+<hr><h2 id="ngClass">NgClass Binding</h2>
+
+<p>currentClasses is {{currentClasses | json}}</p>
+<div [ngClass]="currentClasses">This div is initially saveable, unchanged, and special</div>
+
+<!-- not used in chapter -->
+<br>
+<label>saveable   <input type="checkbox" [(ngModel)]="canSave"></label> |
+<label>modified:  <input type="checkbox" [value]="!isUnchanged" (change)="isUnchanged=!isUnchanged"></label> |
+<label>special:   <input type="checkbox" [(ngModel)]="isSpecial"></label>
+<button (click)="setCurrentClasses()">Refresh currentClasses</button>
+<br><br>
+<div [ngClass]="currentClasses">
+  This div should be {{ canSave ? "": "not"}} saveable,
+                  {{ isUnchanged ? "unchanged" : "modified" }} and,
+                  {{ isSpecial ? "": "not"}} special after clicking "Refresh".</div>
+<br><br>
+
+<div [ngClass]="isSpecial ? 'special' : ''">This div is special</div>
+
+<div class="bad curly special">Bad curly special</div>
+<div [ngClass]="{'bad':false, 'curly':true, 'special':true}">Curly special</div>
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- NgStyle binding -->
+<hr><h2 id="ngStyle">NgStyle Binding</h2>
+
+<div [style.font-size]="isSpecial ? 'x-large' : 'smaller'" >
+  This div is x-large or smaller.
+</div>
+
+<h3>[ngStyle] binding to currentStyles - CSS property names</h3>
+<p>currentStyles is {{currentStyles | json}}</p>
+<div [ngStyle]="currentStyles">
+  This div is initially italic, normal weight, and extra large (24px).
+</div>
+
+<!-- not used in chapter -->
+<br>
+<label>italic: <input type="checkbox" [(ngModel)]="canSave"></label> |
+<label>normal: <input type="checkbox" [(ngModel)]="isUnchanged"></label> |
+<label>xlarge: <input type="checkbox" [(ngModel)]="isSpecial"></label>
+<button (click)="setCurrentStyles()">Refresh currentStyles</button>
+<br><br>
+<div [ngStyle]="currentStyles">
+  This div should be {{ canSave ? "italic": "plain"}},
+                  {{ isUnchanged ? "normal weight" : "bold" }} and,
+                  {{ isSpecial ? "extra large": "normal size"}} after clicking "Refresh".</div>
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- NgIf binding -->
+<hr><h2 id="ngIf">NgIf Binding</h2>
+
+<app-hero-detail *ngIf="isActive"></app-hero-detail>
+
+<div *ngIf="currentHero">Hello, {{currentHero.name}}</div>
+<div *ngIf="nullHero">Hello, {{nullHero.name}}</div>
+
+<!-- NgIf binding with template (no *) -->
+
+<ng-template [ngIf]="currentHero">Add {{currentHero.name}} with template</ng-template>
+
+<!-- Does not show because isActive is false! -->
+<div>Hero Detail removed from DOM (via template) because isActive is false</div>
+<ng-template [ngIf]="isActive">
+  <app-hero-detail></app-hero-detail>
+</ng-template>
+
+<!-- isSpecial is true -->
+<div [class.hidden]="!isSpecial">Show with class</div>
+<div [class.hidden]="isSpecial">Hide with class</div>
+
+<!-- HeroDetail is in the DOM but hidden -->
+<app-hero-detail [class.hidden]="isSpecial"></app-hero-detail>
+
+<div [style.display]="isSpecial ? 'block' : 'none'">Show with style</div>
+<div [style.display]="isSpecial ? 'none'  : 'block'">Hide with style</div>
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- NgFor binding -->
+<hr><h2 id="ngFor">NgFor Binding</h2>
+
+<div class="box">
+  <div *ngFor="let hero of heroes">{{hero.name}}</div>
+</div>
+<br>
+
+<div class="box">
+  <!-- *ngFor w/ hero-detail Component -->
+  <app-hero-detail *ngFor="let hero of heroes" [hero]="hero"></app-hero-detail>
+</div>
+
+<a class="to-toc" href="#toc">top</a>
+
+<h4 id="ngFor-index">*ngFor with index</h4>
+<p>with <i>semi-colon</i> separator</p>
+<div class="box">
+  <div *ngFor="let hero of heroes; let i=index">{{i + 1}} - {{hero.name}}</div>
+</div>
+
+<p>with <i>comma</i> separator</p>
+<div class="box">
+  <!-- Ex: "1 - Hercules" -->
+  <div *ngFor="let hero of heroes, let i=index">{{i + 1}} - {{hero.name}}</div>
+</div>
+
+<a class="to-toc" href="#toc">top</a>
+
+<h4 id="ngFor-trackBy">*ngFor trackBy</h4>
+<button (click)="resetHeroes()">Reset heroes</button>
+<button (click)="changeIds()">Change ids</button>
+<button (click)="clearTrackByCounts()">Clear counts</button>
+
+<p><i>without</i> trackBy</p>
+<div class="box">
+  <div #noTrackBy *ngFor="let hero of heroes">({{hero.id}}) {{hero.name}}</div>
+
+  <div id="noTrackByCnt" *ngIf="heroesNoTrackByCount" >
+    Hero DOM elements change #{{heroesNoTrackByCount}} without trackBy
+  </div>
+</div>
+
+<p>with trackBy</p>
+<div class="box">
+  <div #withTrackBy *ngFor="let hero of heroes; trackBy: trackByHeroes">({{hero.id}}) {{hero.name}}</div>
+
+  <div id="withTrackByCnt" *ngIf="heroesWithTrackByCount">
+    Hero DOM elements change #{{heroesWithTrackByCount}} with trackBy
+  </div>
+</div>
+
+<br><br><br>
+
+<p>with trackBy and <i>semi-colon</i> separator</p>
+<div class="box">
+  <div *ngFor="let hero of heroes; trackBy: trackByHeroes">
+    ({{hero.id}}) {{hero.name}}
+  </div>
+</div>
+
+<p>with trackBy and <i>comma</i> separator</p>
+<div class="box">
+  <div *ngFor="let hero of heroes, trackBy: trackByHeroes">({{hero.id}}) {{hero.name}}</div>
+</div>
+
+<p>with trackBy and <i>space</i> separator</p>
+<div class="box">
+  <div *ngFor="let hero of heroes trackBy: trackByHeroes">({{hero.id}}) {{hero.name}}</div>
+</div>
+
+<p>with <i>generic</i> trackById function</p>
+<div class="box">
+  <div *ngFor="let hero of heroes, trackBy: trackById">({{hero.id}}) {{hero.name}}</div>
+</div>
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- NgSwitch binding -->
+<hr><h2 id="ngSwitch">NgSwitch Binding</h2>
+
+<p>Pick your favorite hero</p>
+<div>
+  <label *ngFor="let h of heroes">
+    <input type="radio" name="heroes" [(ngModel)]="currentHero" [value]="h">{{h.name}}
+  </label>
+</div>
+
+<div [ngSwitch]="currentHero.emotion">
+  <app-happy-hero    *ngSwitchCase="'happy'"    [hero]="currentHero"></app-happy-hero>
+  <app-sad-hero      *ngSwitchCase="'sad'"      [hero]="currentHero"></app-sad-hero>
+  <app-confused-hero *ngSwitchCase="'confused'" [hero]="currentHero"></app-confused-hero>
+  <div *ngSwitchCase="'confused'">Are you as confused as {{currentHero.name}}?</div>
+  <app-unknown-hero  *ngSwitchDefault           [hero]="currentHero"></app-unknown-hero>
+</div>
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- template reference variable -->
+<hr><h2 id="ref-vars">Template reference variables</h2>
+
+<input #phone placeholder="phone number">
+
+<!-- lots of other elements -->
+
+<!-- phone refers to the input element; pass its `value` to an event handler -->
+<button (click)="callPhone(phone.value)">Call</button>
+
+<input ref-fax placeholder="fax number">
+<button (click)="callFax(fax.value)">Fax</button>
+
+<!-- btn refers to the button element; show its disabled state -->
+<button #btn disabled [innerHTML]="'disabled by attribute: '+btn.disabled"></button>
+
+<h4>Example Form</h4>
+<app-hero-form [hero]="currentHero"></app-hero-form>
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- inputs and output -->
+<hr><h2 id="inputs-and-outputs">Inputs and Outputs</h2>
+
+<img [src]="iconUrl"/>
+<button (click)="onSave()">Save</button>
+
+<app-hero-detail [hero]="currentHero" (deleteRequest)="deleteHero($event)">
+</app-hero-detail>
+
+<div (myClick)="clickMessage2=$event" clickable>myClick2</div>
+{{clickMessage2}}
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- Pipes -->
+<hr><h2 id="pipes">Pipes</h2>
+
+<div>Title through uppercase pipe: {{title | uppercase}}</div>
+
+<!-- Pipe chaining: convert title to uppercase, then to lowercase -->
+<div>
+  Title through a pipe chain:
+  {{title | uppercase | lowercase}}
+</div>
+
+<!-- pipe with configuration argument => "February 25, 1970" -->
+<div>Birthdate: {{currentHero?.birthdate | date:'longDate'}}</div>
+
+<div>{{currentHero | json}}</div>
+
+<div>Birthdate: {{(currentHero?.birthdate | date:'longDate') | uppercase}}</div>
+
+<div>
+  <!-- pipe price to USD and display the $ symbol -->
+  <label>Price: </label>{{product.price | currency:'USD':true}}
+</div>
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- Null values and the safe navigation operator -->
+<hr><h2 id="safe-navigation-operator">Safe navigation operator <i>?.</i></h2>
+
+<div>
+  The title is {{title}}
+</div>
+
+<div>
+  The current hero's name is {{currentHero?.name}}
+</div>
+
+<div>
+  The current hero's name is {{currentHero.name}}
+</div>
+
+
+<!--
+The null hero's name is {{nullHero.name}}
+
+See console log:
+  TypeError: Cannot read property 'name' of null in [null]
+-->
+
+<!--No hero, div not displayed, no error -->
+<div *ngIf="nullHero">The null hero's name is {{nullHero.name}}</div>
+
+<div>
+The null hero's name is {{nullHero && nullHero.name}}
+</div>
+
+<div>
+  <!-- No hero, no problem! -->
+  The null hero's name is {{nullHero?.name}}
+</div>
+
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- non-null assertion operator -->
+<hr><h2 id="non-null-assertion-operator">Non-null assertion operator <i>!.</i></h2>
+
+<div>
+  <!--No hero, no text -->
+  <div *ngIf="hero">
+    The hero's name is {{hero!.name}}
+  </div>
+</div>
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- non-null assertion operator -->
+<hr><h2 id="any-type-cast-function">$any type cast function <i>$any( )</i>.</h2>
+
+<div>
+  <!-- Accessing an undeclared member -->
+  <div>
+    The hero's marker is {{$any(hero).marker}}
+  </div>
+</div>
+
+<div>
+  <!-- Accessing an undeclared member -->
+  <div>
+    Undeclared members is {{$any(this).member}}
+  </div>
+</div>
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- TODO: discuss this in the Style binding section -->
+<!-- enums in bindings -->
+<hr><h2 id="enums">Enums in binding</h2>
+
+<p>
+  The name of the Color.Red enum is {{Color[Color.Red]}}.<br>
+  The current color is {{Color[color]}} and its number is {{color}}.<br>
+  <button [style.color]="Color[color]" (click)="colorToggle()">Enum Toggle</button>
+</p>
+
+<a class="to-toc" href="#toc">top</a>
+
+
+<!-- 
+Copyright 2017-2018 Google Inc. All Rights Reserved.
+Use of this source code is governed by an MIT-style license that
+can be found in the LICENSE file at http://angular.io/license
+-->
+
+<div id="heroForm">
+  <form (ngSubmit)="onSubmit(heroForm)" #heroForm="ngForm">
+    <div class="form-group">
+      <label for="name">Name
+        <input class="form-control" name="name" required [(ngModel)]="hero.name">
+      </label>
+    </div>
+    <button type="submit" [disabled]="!heroForm.form.valid">Submit</button>
+  </form>
+  <div [hidden]="!heroForm.form.valid">
+    {{submitMessage}}
+  </div>
+</div>
+
+
+<!-- 
+Copyright 2017-2018 Google Inc. All Rights Reserved.
+Use of this source code is governed by an MIT-style license that
+can be found in the LICENSE file at http://angular.io/license
+-->

From 685d109eb028fa373c4c555ceb44d0e7ed965e0e Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Sun, 21 Oct 2018 14:43:20 +0800
Subject: [PATCH 083/177] chore: fix mdx playground

---
 website/static/worker.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/website/static/worker.js b/website/static/worker.js
index 0531ee6f6577..edef89746c2f 100644
--- a/website/static/worker.js
+++ b/website/static/worker.js
@@ -33,6 +33,10 @@ var parsers = {
     importScriptOnce("lib/parser-babylon.js");
     return prettierPlugins.babylon.parsers.__js_expression;
   },
+  get __jsx_expression() {
+    importScriptOnce("lib/parser-babylon.js");
+    return prettierPlugins.babylon.parsers.__jsx_expression;
+  },
   // JS - Flow
   get flow() {
     importScriptOnce("lib/parser-flow.js");

From 32f90134af8d80160684ab94ffb6fa099c70790b Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Sun, 21 Oct 2018 14:49:28 +0800
Subject: [PATCH 084/177] test: add tests

---
 .../html_vue/__snapshots__/jsfmt.spec.js.snap | 72 ++++++++++++++++++-
 tests/html_vue/interpolations.vue             | 17 +++++
 2 files changed, 87 insertions(+), 2 deletions(-)

diff --git a/tests/html_vue/__snapshots__/jsfmt.spec.js.snap b/tests/html_vue/__snapshots__/jsfmt.spec.js.snap
index f0de57df8723..1c38e28f5a17 100644
--- a/tests/html_vue/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_vue/__snapshots__/jsfmt.spec.js.snap
@@ -461,7 +461,23 @@ x => {
                     interpolation
 
 }} reprehenderit voluptates minus {{console.log(  short_interpolation )}} nemo.</div>
-~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+<script type="text/jsx">
+  export default {
+    render (h) {
+      return (
+        <ul
+          class={{
+            'a': b,
+            'c': d,
+            "e": f
+          }}
+        >
+          { this.xyz }
+        </ul>
+    )
+  };
+</script>~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 <div>
   Fuga magnam facilis. Voluptatem quaerat porro.{{
     x => {
@@ -483,6 +499,24 @@ x => {
   reprehenderit voluptates minus {{console.log(short_interpolation)}} nemo.
 </div>
 
+<script type="text/jsx">
+export default {
+  render (h) {
+    return (
+      <ul
+        class=
+{{
+            'a': b,
+            'c': d,
+            "e": f
+}}
+      >
+        { this.xyz }
+      </ul>
+  )
+};
+</script>
+
 `;
 
 exports[`interpolations.vue - vue-verify 2`] = `
@@ -512,7 +546,23 @@ x => {
                     interpolation
 
 }} reprehenderit voluptates minus {{console.log(  short_interpolation )}} nemo.</div>
-~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+<script type="text/jsx">
+  export default {
+    render (h) {
+      return (
+        <ul
+          class={{
+            'a': b,
+            'c': d,
+            "e": f
+          }}
+        >
+          { this.xyz }
+        </ul>
+    )
+  };
+</script>~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 <div>
   Fuga magnam facilis. Voluptatem quaerat porro.{{
     x => {
@@ -534,6 +584,24 @@ x => {
   reprehenderit voluptates minus {{console.log(short_interpolation)}} nemo.
 </div>
 
+<script type="text/jsx">
+export default {
+  render (h) {
+    return (
+      <ul
+        class=
+{{
+            'a': b,
+            'c': d,
+            "e": f
+}}
+      >
+        { this.xyz }
+      </ul>
+  )
+};
+</script>
+
 `;
 
 exports[`script_src.vue - vue-verify 1`] = `
diff --git a/tests/html_vue/interpolations.vue b/tests/html_vue/interpolations.vue
index a32c4712e35f..7094065ea66b 100644
--- a/tests/html_vue/interpolations.vue
+++ b/tests/html_vue/interpolations.vue
@@ -24,3 +24,20 @@ x => {
                     interpolation
 
 }} reprehenderit voluptates minus {{console.log(  short_interpolation )}} nemo.</div>
+
+<script type="text/jsx">
+  export default {
+    render (h) {
+      return (
+        <ul
+          class={{
+            'a': b,
+            'c': d,
+            "e": f
+          }}
+        >
+          { this.xyz }
+        </ul>
+    )
+  };
+</script>
\ No newline at end of file

From 786aee6aba98db4aa72dca19166ff5b03fc243c3 Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Sun, 21 Oct 2018 14:49:55 +0800
Subject: [PATCH 085/177] fix: do not trigger interpolation in script-like tags

---
 src/language-html/preprocess.js               |  4 ++--
 .../html_vue/__snapshots__/jsfmt.spec.js.snap | 22 +++++++++----------
 2 files changed, 12 insertions(+), 14 deletions(-)

diff --git a/src/language-html/preprocess.js b/src/language-html/preprocess.js
index c5337d43e565..bb65416957bc 100644
--- a/src/language-html/preprocess.js
+++ b/src/language-html/preprocess.js
@@ -14,9 +14,9 @@ const {
 const LineAndColumn = (m => m.default || m)(require("lines-and-columns"));
 
 const PREPROCESS_PIPELINE = [
+  renameScriptAndStyleWithTag,
   mergeCdataIntoText,
   extractInterpolation,
-  renameScriptAndStyleWithTag,
   processDirectives,
   addIsSelfClosing,
   extractWhitespaces,
@@ -90,7 +90,7 @@ function extractInterpolation(ast, options) {
 
   const interpolationRegex = /\{\{([\s\S]+?)\}\}/g;
   return mapNode(ast, node => {
-    if (!node.children) {
+    if (!node.children || isScriptLikeTag(node)) {
       return node;
     }
 
diff --git a/tests/html_vue/__snapshots__/jsfmt.spec.js.snap b/tests/html_vue/__snapshots__/jsfmt.spec.js.snap
index 1c38e28f5a17..31a0a2f229d4 100644
--- a/tests/html_vue/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_vue/__snapshots__/jsfmt.spec.js.snap
@@ -504,12 +504,11 @@ export default {
   render (h) {
     return (
       <ul
-        class=
-{{
-            'a': b,
-            'c': d,
-            "e": f
-}}
+        class={{
+          'a': b,
+          'c': d,
+          "e": f
+        }}
       >
         { this.xyz }
       </ul>
@@ -589,12 +588,11 @@ export default {
   render (h) {
     return (
       <ul
-        class=
-{{
-            'a': b,
-            'c': d,
-            "e": f
-}}
+        class={{
+          'a': b,
+          'c': d,
+          "e": f
+        }}
       >
         { this.xyz }
       </ul>

From d144ee4ea0cab59c2660d53b4fd02b512cf764ce Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Sun, 21 Oct 2018 19:46:10 +0800
Subject: [PATCH 086/177] test: add tests

---
 .../html_vue/__snapshots__/jsfmt.spec.js.snap | 74 ++++++++++++++++++-
 tests/html_vue/interpolations.vue             | 15 +++-
 2 files changed, 86 insertions(+), 3 deletions(-)

diff --git a/tests/html_vue/__snapshots__/jsfmt.spec.js.snap b/tests/html_vue/__snapshots__/jsfmt.spec.js.snap
index 31a0a2f229d4..9678e5028d01 100644
--- a/tests/html_vue/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_vue/__snapshots__/jsfmt.spec.js.snap
@@ -477,7 +477,21 @@ x => {
         </ul>
     )
   };
-</script>~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+</script>
+
+<div>
+  1234567890123456789012345678901234567890123456789012345678901234567890{{ something }}1234567890
+</div>
+<div>
+  1234567890123456789012345678901234567890123456789012345678901234567890 {{ something }}1234567890
+</div>
+<div>
+  1234567890123456789012345678901234567890123456789012345678901234567890{{ something }} 1234567890
+</div>
+<div>
+  1234567890123456789012345678901234567890123456789012345678901234567890 {{ something }} 1234567890
+</div>
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 <div>
   Fuga magnam facilis. Voluptatem quaerat porro.{{
     x => {
@@ -516,6 +530,27 @@ export default {
 };
 </script>
 
+<div>
+  1234567890123456789012345678901234567890123456789012345678901234567890{{
+    something
+
+  }}1234567890
+</div>
+<div>
+  1234567890123456789012345678901234567890123456789012345678901234567890
+  {{something}}1234567890
+</div>
+<div>
+  1234567890123456789012345678901234567890123456789012345678901234567890{{
+    something
+  }}
+  1234567890
+</div>
+<div>
+  1234567890123456789012345678901234567890123456789012345678901234567890
+  {{something}} 1234567890
+</div>
+
 `;
 
 exports[`interpolations.vue - vue-verify 2`] = `
@@ -561,7 +596,21 @@ x => {
         </ul>
     )
   };
-</script>~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+</script>
+
+<div>
+  1234567890123456789012345678901234567890123456789012345678901234567890{{ something }}1234567890
+</div>
+<div>
+  1234567890123456789012345678901234567890123456789012345678901234567890 {{ something }}1234567890
+</div>
+<div>
+  1234567890123456789012345678901234567890123456789012345678901234567890{{ something }} 1234567890
+</div>
+<div>
+  1234567890123456789012345678901234567890123456789012345678901234567890 {{ something }} 1234567890
+</div>
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 <div>
   Fuga magnam facilis. Voluptatem quaerat porro.{{
     x => {
@@ -600,6 +649,27 @@ export default {
 };
 </script>
 
+<div>
+  1234567890123456789012345678901234567890123456789012345678901234567890{{
+    something
+
+  }}1234567890
+</div>
+<div>
+  1234567890123456789012345678901234567890123456789012345678901234567890
+  {{something}}1234567890
+</div>
+<div>
+  1234567890123456789012345678901234567890123456789012345678901234567890{{
+    something
+  }}
+  1234567890
+</div>
+<div>
+  1234567890123456789012345678901234567890123456789012345678901234567890
+  {{something}} 1234567890
+</div>
+
 `;
 
 exports[`script_src.vue - vue-verify 1`] = `
diff --git a/tests/html_vue/interpolations.vue b/tests/html_vue/interpolations.vue
index 7094065ea66b..0598e09bf4cd 100644
--- a/tests/html_vue/interpolations.vue
+++ b/tests/html_vue/interpolations.vue
@@ -40,4 +40,17 @@ x => {
         </ul>
     )
   };
-</script>
\ No newline at end of file
+</script>
+
+<div>
+  1234567890123456789012345678901234567890123456789012345678901234567890{{ something }}1234567890
+</div>
+<div>
+  1234567890123456789012345678901234567890123456789012345678901234567890 {{ something }}1234567890
+</div>
+<div>
+  1234567890123456789012345678901234567890123456789012345678901234567890{{ something }} 1234567890
+</div>
+<div>
+  1234567890123456789012345678901234567890123456789012345678901234567890 {{ something }} 1234567890
+</div>

From 41123800717a60eb5c5b27fde285b6495e26ef33 Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Sun, 21 Oct 2018 19:46:32 +0800
Subject: [PATCH 087/177] fix: no unexpected newlines in interpolations

---
 src/language-html/printer-htmlparser2.js        | 5 ++++-
 tests/html_vue/__snapshots__/jsfmt.spec.js.snap | 2 --
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/language-html/printer-htmlparser2.js b/src/language-html/printer-htmlparser2.js
index 7c84486961b3..c46af7246439 100644
--- a/src/language-html/printer-htmlparser2.js
+++ b/src/language-html/printer-htmlparser2.js
@@ -81,7 +81,10 @@ function embed(path, print, textToDoc, options) {
               })
             ])
           ),
-          softline
+          node.parent.next &&
+          needsToBorrowPrevClosingTagEndMarker(node.parent.next)
+            ? ""
+            : softline
         ]);
       }
       break;
diff --git a/tests/html_vue/__snapshots__/jsfmt.spec.js.snap b/tests/html_vue/__snapshots__/jsfmt.spec.js.snap
index 9678e5028d01..5608dfcd12e0 100644
--- a/tests/html_vue/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_vue/__snapshots__/jsfmt.spec.js.snap
@@ -533,7 +533,6 @@ export default {
 <div>
   1234567890123456789012345678901234567890123456789012345678901234567890{{
     something
-
   }}1234567890
 </div>
 <div>
@@ -652,7 +651,6 @@ export default {
 <div>
   1234567890123456789012345678901234567890123456789012345678901234567890{{
     something
-
   }}1234567890
 </div>
 <div>

From b9c5f255d8bb069f11941b5d28d2e5ff010ebd61 Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Sun, 21 Oct 2018 21:26:39 +0800
Subject: [PATCH 088/177] test: add tests

---
 .../html_vue/__snapshots__/jsfmt.spec.js.snap | 126 ++++++++++++++++++
 tests/html_vue/template.vue                   |  27 ++++
 2 files changed, 153 insertions(+)
 create mode 100644 tests/html_vue/template.vue

diff --git a/tests/html_vue/__snapshots__/jsfmt.spec.js.snap b/tests/html_vue/__snapshots__/jsfmt.spec.js.snap
index 5608dfcd12e0..589199321cc4 100644
--- a/tests/html_vue/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_vue/__snapshots__/jsfmt.spec.js.snap
@@ -756,6 +756,132 @@ exports[`self_closing_style.vue - vue-verify 2`] = `
 
 `;
 
+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>
+  <div class="file-container">
+    <div class="file-content image_file">
+      <img
+        ref="contentImg"
+        :class="{ 'is-zoomable': isZoomable, 'is-zoomed': isZoomed }"
+        :src="path"
+        :alt="path"
+        @load="onImgLoad"
+        @click="onImgClick"/>
+      <p
+        v-if="renderInfo"
+        class="file-info prepend-top-10">
+        <template v-if="fileSize>0">
+          {{ fileSizeReadable }}
+        </template>
+        <template v-if="fileSize>0 && width && height">
+          |
+        </template>
+        <template v-if="width && height">
+          W: {{ width }} | H: {{ height }}
+        </template>
+      </p>
+    </div>
+  </div>
+</template>
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+<!--
+  copied from https://github.com/gitlabhq/gitlabhq/blob/master/app/assets/javascripts/vue_shared/components/content_viewer/viewers/image_viewer.vue
+-->
+<template>
+  <div class="file-container">
+    <div class="file-content image_file">
+      <img
+        ref="contentImg"
+        :class="{ 'is-zoomable': isZoomable, 'is-zoomed': isZoomed }"
+        :src="path"
+        :alt="path"
+        @load="onImgLoad"
+        @click="onImgClick"
+      />
+      <p v-if="renderInfo" class="file-info prepend-top-10">
+        <template v-if="fileSize > 0">
+          {{fileSizeReadable}}
+        </template>
+        <template v-if="fileSize > 0 && width && height">
+          |
+        </template>
+        <template v-if="width && height">
+          W:
+          {{width}}
+          | H:
+          {{height}}
+        </template>
+      </p>
+    </div>
+  </div>
+</template>
+
+`;
+
+exports[`template.vue - vue-verify 2`] = `
+<!--copied from https://github.com/gitlabhq/gitlabhq/blob/master/app/assets/javascripts/vue_shared/components/content_viewer/viewers/image_viewer.vue-->
+<template>
+  <div class="file-container">
+    <div class="file-content image_file">
+      <img
+        ref="contentImg"
+        :class="{ 'is-zoomable': isZoomable, 'is-zoomed': isZoomed }"
+        :src="path"
+        :alt="path"
+        @load="onImgLoad"
+        @click="onImgClick"/>
+      <p
+        v-if="renderInfo"
+        class="file-info prepend-top-10">
+        <template v-if="fileSize>0">
+          {{ fileSizeReadable }}
+        </template>
+        <template v-if="fileSize>0 && width && height">
+          |
+        </template>
+        <template v-if="width && height">
+          W: {{ width }} | H: {{ height }}
+        </template>
+      </p>
+    </div>
+  </div>
+</template>
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+<!--
+  copied from https://github.com/gitlabhq/gitlabhq/blob/master/app/assets/javascripts/vue_shared/components/content_viewer/viewers/image_viewer.vue
+-->
+<template>
+  <div class="file-container">
+    <div class="file-content image_file">
+      <img
+        ref="contentImg"
+        :class="{ 'is-zoomable': isZoomable, 'is-zoomed': isZoomed }"
+        :src="path"
+        :alt="path"
+        @load="onImgLoad"
+        @click="onImgClick"
+      />
+      <p v-if="renderInfo" class="file-info prepend-top-10">
+        <template v-if="fileSize > 0">
+          {{fileSizeReadable}}
+        </template>
+        <template v-if="fileSize > 0 && width && height">
+          |
+        </template>
+        <template v-if="width && height">
+          W:
+          {{width}}
+          | H:
+          {{height}}
+        </template>
+      </p>
+    </div>
+  </div>
+</template>
+
+`;
+
 exports[`test.vue - vue-verify 1`] = `
 <script>
 </script>
diff --git a/tests/html_vue/template.vue b/tests/html_vue/template.vue
new file mode 100644
index 000000000000..32583b34593e
--- /dev/null
+++ b/tests/html_vue/template.vue
@@ -0,0 +1,27 @@
+<!--copied from https://github.com/gitlabhq/gitlabhq/blob/master/app/assets/javascripts/vue_shared/components/content_viewer/viewers/image_viewer.vue-->
+<template>
+  <div class="file-container">
+    <div class="file-content image_file">
+      <img
+        ref="contentImg"
+        :class="{ 'is-zoomable': isZoomable, 'is-zoomed': isZoomed }"
+        :src="path"
+        :alt="path"
+        @load="onImgLoad"
+        @click="onImgClick"/>
+      <p
+        v-if="renderInfo"
+        class="file-info prepend-top-10">
+        <template v-if="fileSize>0">
+          {{ fileSizeReadable }}
+        </template>
+        <template v-if="fileSize>0 && width && height">
+          |
+        </template>
+        <template v-if="width && height">
+          W: {{ width }} | H: {{ height }}
+        </template>
+      </p>
+    </div>
+  </div>
+</template>

From 4ab4a9e0d8e1f6de0ea3d02e71b7af386aaf7a35 Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Sun, 21 Oct 2018 21:27:34 +0800
Subject: [PATCH 089/177] fix: treat `<template>` as inline

---
 src/language-html/utils.js                    | 21 ++++++++++++++++---
 .../html_vue/__snapshots__/jsfmt.spec.js.snap | 10 ++-------
 2 files changed, 20 insertions(+), 11 deletions(-)

diff --git a/src/language-html/utils.js b/src/language-html/utils.js
index adb7fb25a724..926082c9ba25 100644
--- a/src/language-html/utils.js
+++ b/src/language-html/utils.js
@@ -92,12 +92,24 @@ function isPrettierIgnore(node) {
   return node.type === "comment" && node.data.trim() === "prettier-ignore";
 }
 
-function isTag(node) {
-  return node.type === "tag";
+function isTag(node, nameOrNames) {
+  if (node.type !== "tag") {
+    return false;
+  }
+
+  if (!nameOrNames) {
+    return true;
+  }
+
+  if (typeof nameOrNames === "string") {
+    return node.name === nameOrNames;
+  }
+
+  return nameOrNames.indexOf(node.name) !== -1;
 }
 
 function isScriptLikeTag(node) {
-  return isTag(node) && (node.name === "script" || node.name === "style");
+  return isTag(node, ["script", "style"]);
 }
 
 function isFrontMatterNode(node) {
@@ -336,6 +348,9 @@ function getNodeCssStyleDisplay(node, prevNode, options) {
     case "ignore":
       return "block";
     default:
+      if (isTag(node, "template")) {
+        return "inline";
+      }
       return (
         (isTag(node) && CSS_DISPLAY_TAGS[node.name]) || CSS_DISPLAY_DEFAULT
       );
diff --git a/tests/html_vue/__snapshots__/jsfmt.spec.js.snap b/tests/html_vue/__snapshots__/jsfmt.spec.js.snap
index 589199321cc4..37ed56a84f11 100644
--- a/tests/html_vue/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_vue/__snapshots__/jsfmt.spec.js.snap
@@ -807,10 +807,7 @@ exports[`template.vue - vue-verify 1`] = `
           |
         </template>
         <template v-if="width && height">
-          W:
-          {{width}}
-          | H:
-          {{height}}
+          W: {{width}} | H: {{height}}
         </template>
       </p>
     </div>
@@ -870,10 +867,7 @@ exports[`template.vue - vue-verify 2`] = `
           |
         </template>
         <template v-if="width && height">
-          W:
-          {{width}}
-          | H:
-          {{height}}
+          W: {{width}} | H: {{height}}
         </template>
       </p>
     </div>

From ba824a3e53d30dce55d659c179ecc1f166226d0b Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Sun, 21 Oct 2018 21:50:59 +0800
Subject: [PATCH 090/177] test: add tests

---
 .../html_vue/__snapshots__/jsfmt.spec.js.snap | 110 ++++++++++++++++++
 tests/html_vue/pre-child.vue                  |  28 +++++
 2 files changed, 138 insertions(+)
 create mode 100644 tests/html_vue/pre-child.vue

diff --git a/tests/html_vue/__snapshots__/jsfmt.spec.js.snap b/tests/html_vue/__snapshots__/jsfmt.spec.js.snap
index 37ed56a84f11..2ee29a273450 100644
--- a/tests/html_vue/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_vue/__snapshots__/jsfmt.spec.js.snap
@@ -670,6 +670,116 @@ export default {
 
 `;
 
+exports[`pre-child.vue - vue-verify 1`] = `
+<!-- copied from https://github.com/gitlabhq/gitlabhq/blob/master/app/assets/javascripts/ide/components/jobs/detail.vue -->
+<pre
+  ref="buildTrace"
+  class="build-trace mb-0 h-100"
+  @scroll="scrollBuildLog"
+>
+  <code
+    v-show="!detailJob.isLoading"
+    class="bash"
+    v-html="jobOutput"
+  >
+  </code>
+  <div
+    v-show="detailJob.isLoading"
+    class="build-loader-animation"
+  >
+    <div class="dot"></div>
+    <div class="dot"></div>
+    <div class="dot"></div>
+  </div>
+</pre>
+
+<!-- copied from https://github.com/gitlabhq/gitlabhq/blob/master/app/assets/javascripts/vue_shared/components/code_block.vue -->
+<template>
+  <pre class="code-block rounded">
+    <code class="d-block">{{ code }}</code>
+  </pre>
+</template>
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+<!--
+  copied from https://github.com/gitlabhq/gitlabhq/blob/master/app/assets/javascripts/ide/components/jobs/detail.vue
+-->
+<pre ref="buildTrace" class="build-trace mb-0 h-100" @scroll="scrollBuildLog">
+  <code v-show="!detailJob.isLoading" class="bash" v-html="jobOutput"> </code>
+  <div v-show="detailJob.isLoading" class="build-loader-animation">
+    <div class="dot"></div>
+    <div class="dot"></div>
+    <div class="dot"></div>
+  </div>
+
+</pre>
+
+<!--
+  copied from https://github.com/gitlabhq/gitlabhq/blob/master/app/assets/javascripts/vue_shared/components/code_block.vue
+-->
+<template>
+  <pre class="code-block rounded">
+    <code class="d-block">{{code}}</code
+    >
+  </pre>
+</template>
+
+`;
+
+exports[`pre-child.vue - vue-verify 2`] = `
+<!-- copied from https://github.com/gitlabhq/gitlabhq/blob/master/app/assets/javascripts/ide/components/jobs/detail.vue -->
+<pre
+  ref="buildTrace"
+  class="build-trace mb-0 h-100"
+  @scroll="scrollBuildLog"
+>
+  <code
+    v-show="!detailJob.isLoading"
+    class="bash"
+    v-html="jobOutput"
+  >
+  </code>
+  <div
+    v-show="detailJob.isLoading"
+    class="build-loader-animation"
+  >
+    <div class="dot"></div>
+    <div class="dot"></div>
+    <div class="dot"></div>
+  </div>
+</pre>
+
+<!-- copied from https://github.com/gitlabhq/gitlabhq/blob/master/app/assets/javascripts/vue_shared/components/code_block.vue -->
+<template>
+  <pre class="code-block rounded">
+    <code class="d-block">{{ code }}</code>
+  </pre>
+</template>
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+<!--
+  copied from https://github.com/gitlabhq/gitlabhq/blob/master/app/assets/javascripts/ide/components/jobs/detail.vue
+-->
+<pre ref="buildTrace" class="build-trace mb-0 h-100" @scroll="scrollBuildLog">
+  <code v-show="!detailJob.isLoading" class="bash" v-html="jobOutput"> </code>
+  <div v-show="detailJob.isLoading" class="build-loader-animation">
+    <div class="dot"></div>
+    <div class="dot"></div>
+    <div class="dot"></div>
+  </div>
+
+</pre>
+
+<!--
+  copied from https://github.com/gitlabhq/gitlabhq/blob/master/app/assets/javascripts/vue_shared/components/code_block.vue
+-->
+<template>
+  <pre class="code-block rounded">
+    <code class="d-block">{{code}}</code
+    >
+  </pre>
+</template>
+
+`;
+
 exports[`script_src.vue - vue-verify 1`] = `
 <script src="https://www.gstatic.com/firebasejs/4.10.1/firebase.js"></script>
 <script src="https://www.gstatic.com/firebasejs/4.10.1/firebase-firestore.js"></script>
diff --git a/tests/html_vue/pre-child.vue b/tests/html_vue/pre-child.vue
new file mode 100644
index 000000000000..5dc17348ce8c
--- /dev/null
+++ b/tests/html_vue/pre-child.vue
@@ -0,0 +1,28 @@
+<!-- copied from https://github.com/gitlabhq/gitlabhq/blob/master/app/assets/javascripts/ide/components/jobs/detail.vue -->
+<pre
+  ref="buildTrace"
+  class="build-trace mb-0 h-100"
+  @scroll="scrollBuildLog"
+>
+  <code
+    v-show="!detailJob.isLoading"
+    class="bash"
+    v-html="jobOutput"
+  >
+  </code>
+  <div
+    v-show="detailJob.isLoading"
+    class="build-loader-animation"
+  >
+    <div class="dot"></div>
+    <div class="dot"></div>
+    <div class="dot"></div>
+  </div>
+</pre>
+
+<!-- copied from https://github.com/gitlabhq/gitlabhq/blob/master/app/assets/javascripts/vue_shared/components/code_block.vue -->
+<template>
+  <pre class="code-block rounded">
+    <code class="d-block">{{ code }}</code>
+  </pre>
+</template>

From 9a370900349b342627cc884e5645b0853a311e0d Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Sun, 21 Oct 2018 21:58:50 +0800
Subject: [PATCH 091/177] fix: preserve tags in <pre>

---
 src/language-html/utils.js                    | 20 ++++++---
 .../html_vue/__snapshots__/jsfmt.spec.js.snap | 44 ++++++++++++++-----
 2 files changed, 47 insertions(+), 17 deletions(-)

diff --git a/src/language-html/utils.js b/src/language-html/utils.js
index 926082c9ba25..ff212f84f3c5 100644
--- a/src/language-html/utils.js
+++ b/src/language-html/utils.js
@@ -74,6 +74,14 @@ function hasPrettierIgnore(path) {
     return false;
   }
 
+  // TODO: handle non-text children in <pre>
+  if (
+    isPreLikeNode(node) &&
+    node.children.some(child => child.type !== "text")
+  ) {
+    return true;
+  }
+
   const parentNode = path.getParentNode();
   if (!parentNode) {
     return false;
@@ -326,12 +334,14 @@ function isBlockLikeCssDisplay(cssDisplay) {
   return cssDisplay === "block" || cssDisplay.startsWith("table");
 }
 
+function isPreLikeNode(node) {
+  return ["pre", "pre-wrap"].indexOf(getNodeCssStyleWhiteSpace(node)) !== -1;
+}
+
 function getNodeCssStyleDisplay(node, prevNode, options) {
-  switch (getNodeCssStyleWhiteSpace(node)) {
-    case "pre":
-    case "pre-wrap":
-      // textarea-like
-      return "block";
+  if (isPreLikeNode(node)) {
+    // textarea-like
+    return "block";
   }
 
   if (prevNode && prevNode.type === "comment") {
diff --git a/tests/html_vue/__snapshots__/jsfmt.spec.js.snap b/tests/html_vue/__snapshots__/jsfmt.spec.js.snap
index 2ee29a273450..8a4f254ebe63 100644
--- a/tests/html_vue/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_vue/__snapshots__/jsfmt.spec.js.snap
@@ -703,14 +703,25 @@ exports[`pre-child.vue - vue-verify 1`] = `
 <!--
   copied from https://github.com/gitlabhq/gitlabhq/blob/master/app/assets/javascripts/ide/components/jobs/detail.vue
 -->
-<pre ref="buildTrace" class="build-trace mb-0 h-100" @scroll="scrollBuildLog">
-  <code v-show="!detailJob.isLoading" class="bash" v-html="jobOutput"> </code>
-  <div v-show="detailJob.isLoading" class="build-loader-animation">
+<pre
+  ref="buildTrace"
+  class="build-trace mb-0 h-100"
+  @scroll="scrollBuildLog"
+>
+  <code
+    v-show="!detailJob.isLoading"
+    class="bash"
+    v-html="jobOutput"
+  >
+  </code>
+  <div
+    v-show="detailJob.isLoading"
+    class="build-loader-animation"
+  >
     <div class="dot"></div>
     <div class="dot"></div>
     <div class="dot"></div>
   </div>
-
 </pre>
 
 <!--
@@ -718,8 +729,7 @@ exports[`pre-child.vue - vue-verify 1`] = `
 -->
 <template>
   <pre class="code-block rounded">
-    <code class="d-block">{{code}}</code
-    >
+    <code class="d-block">{{ code }}</code>
   </pre>
 </template>
 
@@ -758,14 +768,25 @@ exports[`pre-child.vue - vue-verify 2`] = `
 <!--
   copied from https://github.com/gitlabhq/gitlabhq/blob/master/app/assets/javascripts/ide/components/jobs/detail.vue
 -->
-<pre ref="buildTrace" class="build-trace mb-0 h-100" @scroll="scrollBuildLog">
-  <code v-show="!detailJob.isLoading" class="bash" v-html="jobOutput"> </code>
-  <div v-show="detailJob.isLoading" class="build-loader-animation">
+<pre
+  ref="buildTrace"
+  class="build-trace mb-0 h-100"
+  @scroll="scrollBuildLog"
+>
+  <code
+    v-show="!detailJob.isLoading"
+    class="bash"
+    v-html="jobOutput"
+  >
+  </code>
+  <div
+    v-show="detailJob.isLoading"
+    class="build-loader-animation"
+  >
     <div class="dot"></div>
     <div class="dot"></div>
     <div class="dot"></div>
   </div>
-
 </pre>
 
 <!--
@@ -773,8 +794,7 @@ exports[`pre-child.vue - vue-verify 2`] = `
 -->
 <template>
   <pre class="code-block rounded">
-    <code class="d-block">{{code}}</code
-    >
+    <code class="d-block">{{ code }}</code>
   </pre>
 </template>
 

From b80123d7d3e6761d7934301e00f6c30f6fc2431e Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Sun, 21 Oct 2018 22:33:50 +0800
Subject: [PATCH 092/177] fix: do not remove sensitive whitespace

---
 src/language-html/printer-htmlparser2.js            | 5 ++++-
 tests/html_angular/__snapshots__/jsfmt.spec.js.snap | 2 +-
 tests/html_tags/__snapshots__/jsfmt.spec.js.snap    | 2 +-
 3 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/language-html/printer-htmlparser2.js b/src/language-html/printer-htmlparser2.js
index c46af7246439..6dcd458f0a8d 100644
--- a/src/language-html/printer-htmlparser2.js
+++ b/src/language-html/printer-htmlparser2.js
@@ -168,7 +168,10 @@ function genericPrint(path, options, print) {
                   (node.next
                   ? needsToBorrowPrevClosingTagEndMarker(node.next)
                   : needsToBorrowLastChildClosingTagEndMarker(node.parent))
-                    ? ""
+                    ? node.lastChild.hasTrailingSpaces &&
+                      node.lastChild.isTrailingSpaceSensitive
+                      ? " "
+                      : ""
                     : node.lastChild.hasTrailingSpaces &&
                       node.lastChild.isTrailingSpaceSensitive
                       ? line
diff --git a/tests/html_angular/__snapshots__/jsfmt.spec.js.snap b/tests/html_angular/__snapshots__/jsfmt.spec.js.snap
index 9d004ba2ff49..99850c573a97 100644
--- a/tests/html_angular/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_angular/__snapshots__/jsfmt.spec.js.snap
@@ -1557,7 +1557,7 @@ without NgModel <br />
 
 <div>
   <!-- pipe price to USD and display the $ symbol -->
-  <label>Price:</label>{{product.price | currency:"USD":true}}
+  <label>Price: </label>{{product.price | currency:"USD":true}}
 </div>
 
 <a class="to-toc" href="#toc">top</a>
diff --git a/tests/html_tags/__snapshots__/jsfmt.spec.js.snap b/tests/html_tags/__snapshots__/jsfmt.spec.js.snap
index e82a0cec0c52..ede8cdfb6f70 100644
--- a/tests/html_tags/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_tags/__snapshots__/jsfmt.spec.js.snap
@@ -249,7 +249,7 @@ exports[`custom-self-closing.html - html-verify 4`] = `
 </div>
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 <div>
-  <ABC> <span></span></ABC
+  <ABC> <span></span> </ABC
 ></div>
 
 `;

From 2a26ea561d33d17fc1d70e57e549eaa153acf653 Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Mon, 22 Oct 2018 10:44:32 +0800
Subject: [PATCH 093/177] test: add tests

---
 .../__snapshots__/jsfmt.spec.js.snap          | 489 ++++++++++++++++++
 tests/html_comments/jsfmt.spec.js             |   2 +
 2 files changed, 491 insertions(+)

diff --git a/tests/html_comments/__snapshots__/jsfmt.spec.js.snap b/tests/html_comments/__snapshots__/jsfmt.spec.js.snap
index 9a256f53707e..f5a8e0af7f77 100644
--- a/tests/html_comments/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_comments/__snapshots__/jsfmt.spec.js.snap
@@ -35,6 +35,28 @@ exports[`before-text.html - html-verify 3`] = `
 
 `;
 
+exports[`before-text.html - html-verify 4`] = `
+<!-- hello -->
+
+123
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+<!-- hello -->
+
+123
+
+`;
+
+exports[`before-text.html - html-verify 5`] = `
+<!-- hello -->
+
+123
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+<!-- hello -->
+
+123
+
+`;
+
 exports[`conditional.html - html-verify 1`] = `
 <!DOCTYPE html>
 <html>
@@ -141,6 +163,75 @@ exports[`conditional.html - html-verify 3`] = `
 
 `;
 
+exports[`conditional.html - html-verify 4`] = `
+<!DOCTYPE html>
+<html>
+  <body>
+
+    <!--[if IE 5]>This is IE 5<br><![endif]-->
+    <!--[if IE 6]>This is IE 6<br><![endif]-->
+    <!--[if IE 7]>This is IE 7<br><![endif]-->
+    <!--[if IE 8]>This is IE 8<br><![endif]-->
+    <!--[if IE 9]>This is IE 9<br><![endif]-->
+
+  </body>
+</html>
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+<!DOCTYPE html>
+<html>
+  <body>
+    <!--[if IE 5]>This is IE 5<br /><![endif]-->
+    <!--[if IE 6]>This is IE 6<br /><![endif]-->
+    <!--[if IE 7]>This is IE 7<br /><![endif]-->
+    <!--[if IE 8]>This is IE 8<br /><![endif]-->
+    <!--[if IE 9]>This is IE 9<br /><![endif]-->
+  </body>
+</html>
+
+`;
+
+exports[`conditional.html - html-verify 5`] = `
+<!DOCTYPE html>
+<html>
+  <body>
+
+    <!--[if IE 5]>This is IE 5<br><![endif]-->
+    <!--[if IE 6]>This is IE 6<br><![endif]-->
+    <!--[if IE 7]>This is IE 7<br><![endif]-->
+    <!--[if IE 8]>This is IE 8<br><![endif]-->
+    <!--[if IE 9]>This is IE 9<br><![endif]-->
+
+  </body>
+</html>
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+<!DOCTYPE html>
+<html>
+  <body>
+    <!--[if IE 5]>
+      This is IE 5
+      <br />
+    <![endif]-->
+    <!--[if IE 6]>
+      This is IE 6
+      <br />
+    <![endif]-->
+    <!--[if IE 7]>
+      This is IE 7
+      <br />
+    <![endif]-->
+    <!--[if IE 8]>
+      This is IE 8
+      <br />
+    <![endif]-->
+    <!--[if IE 9]>
+      This is IE 9
+      <br />
+    <![endif]-->
+  </body>
+</html>
+
+`;
+
 exports[`for_debugging.html - html-verify 1`] = `
 <!DOCTYPE html>
 <html>
@@ -267,6 +358,90 @@ exports[`for_debugging.html - html-verify 3`] = `
 
 `;
 
+exports[`for_debugging.html - html-verify 4`] = `
+<!DOCTYPE html>
+<html>
+  <body>
+
+<!-- Do not display this at the moment
+<img border="0" src="pic_trulli.jpg" alt="Trulli">
+-->
+
+  <!-- Do not display this at the moment
+  <img border="0" src="pic_trulli.jpg" alt="Trulli">
+  -->
+
+    <!-- Do not display this at the moment
+    <img border="0" src="pic_trulli.jpg" alt="Trulli">
+    -->
+
+  </body>
+</html>
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+<!DOCTYPE html>
+<html>
+  <body>
+    <!--
+      Do not display this at the moment
+      <img border="0" src="pic_trulli.jpg" alt="Trulli">
+    -->
+
+    <!--
+      Do not display this at the moment
+      <img border="0" src="pic_trulli.jpg" alt="Trulli">
+    -->
+
+    <!--
+      Do not display this at the moment
+      <img border="0" src="pic_trulli.jpg" alt="Trulli">
+    -->
+  </body>
+</html>
+
+`;
+
+exports[`for_debugging.html - html-verify 5`] = `
+<!DOCTYPE html>
+<html>
+  <body>
+
+<!-- Do not display this at the moment
+<img border="0" src="pic_trulli.jpg" alt="Trulli">
+-->
+
+  <!-- Do not display this at the moment
+  <img border="0" src="pic_trulli.jpg" alt="Trulli">
+  -->
+
+    <!-- Do not display this at the moment
+    <img border="0" src="pic_trulli.jpg" alt="Trulli">
+    -->
+
+  </body>
+</html>
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+<!DOCTYPE html>
+<html>
+  <body>
+    <!--
+      Do not display this at the moment
+      <img border="0" src="pic_trulli.jpg" alt="Trulli">
+    -->
+
+    <!--
+      Do not display this at the moment
+      <img border="0" src="pic_trulli.jpg" alt="Trulli">
+    -->
+
+    <!--
+      Do not display this at the moment
+      <img border="0" src="pic_trulli.jpg" alt="Trulli">
+    -->
+  </body>
+</html>
+
+`;
+
 exports[`hidden.html - html-verify 1`] = `
 <!DOCTYPE html>
 <html>
@@ -369,6 +544,64 @@ exports[`hidden.html - html-verify 3`] = `
 
 `;
 
+exports[`hidden.html - html-verify 4`] = `
+<!DOCTYPE html>
+<html>
+    <body>
+
+        <!--This is a comment-->
+        <!-- This is a comment -->
+        <!--  This is a comment  -->
+        <!--   This   is   a   comment   -->
+        <p>This is a paragraph.</p>
+        <!-- Comments are not displayed in the browser -->
+
+    </body>
+</html>
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+<!DOCTYPE html>
+<html>
+  <body>
+    <!-- This is a comment -->
+    <!-- This is a comment -->
+    <!-- This is a comment -->
+    <!-- This   is   a   comment -->
+    <p>This is a paragraph.</p>
+    <!-- Comments are not displayed in the browser -->
+  </body>
+</html>
+
+`;
+
+exports[`hidden.html - html-verify 5`] = `
+<!DOCTYPE html>
+<html>
+    <body>
+
+        <!--This is a comment-->
+        <!-- This is a comment -->
+        <!--  This is a comment  -->
+        <!--   This   is   a   comment   -->
+        <p>This is a paragraph.</p>
+        <!-- Comments are not displayed in the browser -->
+
+    </body>
+</html>
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+<!DOCTYPE html>
+<html>
+  <body>
+    <!-- This is a comment -->
+    <!-- This is a comment -->
+    <!-- This is a comment -->
+    <!-- This   is   a   comment -->
+    <p>This is a paragraph.</p>
+    <!-- Comments are not displayed in the browser -->
+  </body>
+</html>
+
+`;
+
 exports[`surrounding-empty-line.html - html-verify 1`] = `
 <ul><!-- 123
 --><li>First</li><!-- 123
@@ -766,3 +999,259 @@ See console log:
 -->
 
 `;
+
+exports[`surrounding-empty-line.html - html-verify 4`] = `
+<ul><!-- 123
+--><li>First</li><!-- 123
+456
+   789
+--><li>Second</li><!--
+
+
+    123
+       456
+          789
+
+
+--><li>Second</li><!--
+
+
+           123
+        456
+    789
+
+
+--></ul>
+<span><!--
+--><span>a</span><!--
+--><span>b</span><!--
+--></span>
+
+<span><!-- 1
+--><span>a</span><!-- 2
+--><span>b</span><!-- 3
+--></span>
+
+<span><!--
+1 --><span>a</span><!--
+2 --><span>b</span><!--
+3 --></span>
+
+123<!---->456
+
+123<!--x-->456
+
+<!-- A
+     B -->
+
+<!--
+The null hero's name is {{nullHero.name}}
+
+See console log:
+  TypeError: Cannot read property 'name' of null in [null]
+-->
+
+<!--
+    The null hero's name is {{nullHero.name}}
+
+    See console log:
+    TypeError: Cannot read property 'name' of null in [null]
+-->
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+<ul
+  ><!-- 123
+  --><li>First</li
+  ><!--
+    123
+    456
+       789
+  --><li>Second</li
+  ><!--
+    123
+       456
+          789
+  --><li>Second</li
+  ><!--
+           123
+        456
+    789
+--></ul>
+<span
+  ><!--
+  --><span>a</span
+  ><!--
+  --><span>b</span
+  ><!--
+--></span>
+
+<span
+  ><!-- 1
+  --><span>a</span
+  ><!-- 2
+  --><span>b</span
+  ><!-- 3
+--></span>
+
+<span
+  ><!-- 1
+  --><span>a</span
+  ><!-- 2
+  --><span>b</span
+  ><!-- 3
+--></span>
+
+123<!--
+-->456 123<!--
+  x
+-->456
+
+<!--
+  A
+  B
+-->
+
+<!--
+  The null hero's name is {{nullHero.name}}
+
+  See console log:
+    TypeError: Cannot read property 'name' of null in [null]
+-->
+
+<!--
+  The null hero's name is {{nullHero.name}}
+
+  See console log:
+  TypeError: Cannot read property 'name' of null in [null]
+-->
+
+`;
+
+exports[`surrounding-empty-line.html - html-verify 5`] = `
+<ul><!-- 123
+--><li>First</li><!-- 123
+456
+   789
+--><li>Second</li><!--
+
+
+    123
+       456
+          789
+
+
+--><li>Second</li><!--
+
+
+           123
+        456
+    789
+
+
+--></ul>
+<span><!--
+--><span>a</span><!--
+--><span>b</span><!--
+--></span>
+
+<span><!-- 1
+--><span>a</span><!-- 2
+--><span>b</span><!-- 3
+--></span>
+
+<span><!--
+1 --><span>a</span><!--
+2 --><span>b</span><!--
+3 --></span>
+
+123<!---->456
+
+123<!--x-->456
+
+<!-- A
+     B -->
+
+<!--
+The null hero's name is {{nullHero.name}}
+
+See console log:
+  TypeError: Cannot read property 'name' of null in [null]
+-->
+
+<!--
+    The null hero's name is {{nullHero.name}}
+
+    See console log:
+    TypeError: Cannot read property 'name' of null in [null]
+-->
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+<ul>
+  <!-- 123 -->
+  <li>First</li>
+  <!--
+    123
+    456
+       789
+  -->
+  <li>Second</li>
+  <!--
+    123
+       456
+          789
+  -->
+  <li>Second</li>
+  <!--
+           123
+        456
+    789
+  -->
+</ul>
+<span>
+  <!---->
+  <span>a</span>
+  <!---->
+  <span>b</span>
+  <!---->
+</span>
+
+<span>
+  <!-- 1 -->
+  <span>a</span>
+  <!-- 2 -->
+  <span>b</span>
+  <!-- 3 -->
+</span>
+
+<span>
+  <!-- 1 -->
+  <span>a</span>
+  <!-- 2 -->
+  <span>b</span>
+  <!-- 3 -->
+</span>
+
+123
+<!---->
+456 123
+<!-- x -->
+456
+
+<!--
+  A
+  B
+-->
+
+<!--
+  The null hero's name is {{nullHero.name}}
+
+  See console log:
+    TypeError: Cannot read property 'name' of null in [null]
+-->
+
+<!--
+  The null hero's name is {{nullHero.name}}
+
+  See console log:
+  TypeError: Cannot read property 'name' of null in [null]
+-->
+
+`;
diff --git a/tests/html_comments/jsfmt.spec.js b/tests/html_comments/jsfmt.spec.js
index 532e226125c3..22f7911a9823 100644
--- a/tests/html_comments/jsfmt.spec.js
+++ b/tests/html_comments/jsfmt.spec.js
@@ -1,3 +1,5 @@
 run_spec(__dirname, ["html"]);
 run_spec(__dirname, ["html"], { printWidth: 1 });
 run_spec(__dirname, ["html"], { printWidth: 999 });
+run_spec(__dirname, ["html"], { htmlWhitespaceSensitivity: "strict" });
+run_spec(__dirname, ["html"], { htmlWhitespaceSensitivity: "ignore" });

From 2c25b7e4396bfc41946ea8f8df6a3d8be4cb0cb7 Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Mon, 22 Oct 2018 10:45:52 +0800
Subject: [PATCH 094/177] test: add tests

---
 .../html_tags/__snapshots__/jsfmt.spec.js.snap | 18 ++++++++++++++++++
 tests/html_tags/tags.html                      |  1 +
 2 files changed, 19 insertions(+)

diff --git a/tests/html_tags/__snapshots__/jsfmt.spec.js.snap b/tests/html_tags/__snapshots__/jsfmt.spec.js.snap
index ede8cdfb6f70..1946f6b92fec 100644
--- a/tests/html_tags/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_tags/__snapshots__/jsfmt.spec.js.snap
@@ -1543,6 +1543,7 @@ exports[`tags.html - html-verify 1`] = `
 >
 <br /><br />
 <p>"<span [innerHTML]="title"></span>" is the <i>property bound</i> title.</p>
+<li>12345678901234567890123456789012345678901234567890123456789012345678901234567890</li>
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 <br />
 <br />
@@ -1688,6 +1689,9 @@ exports[`tags.html - html-verify 1`] = `
 >
 <br /><br />
 <p>"<span [innerHTML]="title"></span>" is the <i>property bound</i> title.</p>
+<li
+  >12345678901234567890123456789012345678901234567890123456789012345678901234567890</li
+>
 
 `;
 
@@ -1779,6 +1783,7 @@ exports[`tags.html - html-verify 2`] = `
 >
 <br /><br />
 <p>"<span [innerHTML]="title"></span>" is the <i>property bound</i> title.</p>
+<li>12345678901234567890123456789012345678901234567890123456789012345678901234567890</li>
 ~
 <br />
 <br />
@@ -2086,6 +2091,9 @@ exports[`tags.html - html-verify 2`] = `
   >
   title.
 </p>
+<li
+  >12345678901234567890123456789012345678901234567890123456789012345678901234567890</li
+>
 
 `;
 
@@ -2177,6 +2185,7 @@ exports[`tags.html - html-verify 3`] = `
 >
 <br /><br />
 <p>"<span [innerHTML]="title"></span>" is the <i>property bound</i> title.</p>
+<li>12345678901234567890123456789012345678901234567890123456789012345678901234567890</li>
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 <br />
 <br />
@@ -2254,6 +2263,7 @@ exports[`tags.html - html-verify 3`] = `
 
 <button bind-disabled="isUnchanged" on-click="onSave($event)">Disabled Cancel</button> <br /><br />
 <p>"<span [innerHTML]="title"></span>" is the <i>property bound</i> title.</p>
+<li>12345678901234567890123456789012345678901234567890123456789012345678901234567890</li>
 
 `;
 
@@ -2345,6 +2355,7 @@ exports[`tags.html - html-verify 4`] = `
 >
 <br /><br />
 <p>"<span [innerHTML]="title"></span>" is the <i>property bound</i> title.</p>
+<li>12345678901234567890123456789012345678901234567890123456789012345678901234567890</li>
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 <br />
 <br />
@@ -2471,6 +2482,9 @@ exports[`tags.html - html-verify 4`] = `
 >
 <br /><br />
 <p>"<span [innerHTML]="title"></span>" is the <i>property bound</i> title.</p>
+<li
+  >12345678901234567890123456789012345678901234567890123456789012345678901234567890</li
+>
 
 `;
 
@@ -2562,6 +2576,7 @@ exports[`tags.html - html-verify 5`] = `
 >
 <br /><br />
 <p>"<span [innerHTML]="title"></span>" is the <i>property bound</i> title.</p>
+<li>12345678901234567890123456789012345678901234567890123456789012345678901234567890</li>
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 <br />
 <br />
@@ -2738,6 +2753,9 @@ exports[`tags.html - html-verify 5`] = `
   <i>property bound</i>
   title.
 </p>
+<li>
+  12345678901234567890123456789012345678901234567890123456789012345678901234567890
+</li>
 
 `;
 
diff --git a/tests/html_tags/tags.html b/tests/html_tags/tags.html
index 9b0609428a2d..adb9976b5699 100644
--- a/tests/html_tags/tags.html
+++ b/tests/html_tags/tags.html
@@ -85,3 +85,4 @@
 >
 <br /><br />
 <p>"<span [innerHTML]="title"></span>" is the <i>property bound</i> title.</p>
+<li>12345678901234567890123456789012345678901234567890123456789012345678901234567890</li>

From afb2792cbd76c7c0e87510543a8ca8c3a5afc0da Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Mon, 22 Oct 2018 10:46:32 +0800
Subject: [PATCH 095/177] fix: treat list-item as block

---
 src/language-html/utils.js                    |  6 +-
 .../__snapshots__/jsfmt.spec.js.snap          | 56 +++++++++++--------
 .../__snapshots__/jsfmt.spec.js.snap          | 44 +++++++++------
 3 files changed, 65 insertions(+), 41 deletions(-)

diff --git a/src/language-html/utils.js b/src/language-html/utils.js
index ff212f84f3c5..255c745c4af1 100644
--- a/src/language-html/utils.js
+++ b/src/language-html/utils.js
@@ -331,7 +331,11 @@ function inferScriptParser(node) {
  * firstChild leadingSpaces, lastChild trailingSpaces, and danglingSpaces are insensitive
  */
 function isBlockLikeCssDisplay(cssDisplay) {
-  return cssDisplay === "block" || cssDisplay.startsWith("table");
+  return (
+    cssDisplay === "block" ||
+    cssDisplay === "list-item" ||
+    cssDisplay.startsWith("table")
+  );
 }
 
 function isPreLikeNode(node) {
diff --git a/tests/html_comments/__snapshots__/jsfmt.spec.js.snap b/tests/html_comments/__snapshots__/jsfmt.spec.js.snap
index f5a8e0af7f77..971df3a63ee8 100644
--- a/tests/html_comments/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_comments/__snapshots__/jsfmt.spec.js.snap
@@ -661,19 +661,21 @@ See console log:
 -->
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 <ul>
-  <!-- 123
-  --><li>First</li
-  ><!--
+  <!-- 123 -->
+  <li>First</li>
+  <!--
     123
     456
        789
-  --><li>Second</li
-  ><!--
+  -->
+  <li>Second</li>
+  <!--
     123
        456
           789
-  --><li>Second</li
-  ><!--
+  -->
+  <li>Second</li>
+  <!--
            123
         456
     789
@@ -790,21 +792,27 @@ See console log:
 <ul>
   <!--
     123
-  --><li
-    >First</li
-  ><!--
+  -->
+  <li>
+    First
+  </li>
+  <!--
     123
     456
        789
-  --><li
-    >Second</li
-  ><!--
+  -->
+  <li>
+    Second
+  </li>
+  <!--
     123
        456
           789
-  --><li
-    >Second</li
-  ><!--
+  -->
+  <li>
+    Second
+  </li>
+  <!--
            123
         456
     789
@@ -932,19 +940,21 @@ See console log:
 -->
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 <ul>
-  <!-- 123
-  --><li>First</li
-  ><!--
+  <!-- 123 -->
+  <li>First</li>
+  <!--
     123
     456
        789
-  --><li>Second</li
-  ><!--
+  -->
+  <li>Second</li>
+  <!--
     123
        456
           789
-  --><li>Second</li
-  ><!--
+  -->
+  <li>Second</li>
+  <!--
            123
         456
     789
diff --git a/tests/html_tags/__snapshots__/jsfmt.spec.js.snap b/tests/html_tags/__snapshots__/jsfmt.spec.js.snap
index 1946f6b92fec..457c34dbaebb 100644
--- a/tests/html_tags/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_tags/__snapshots__/jsfmt.spec.js.snap
@@ -1656,9 +1656,11 @@ exports[`tags.html - html-verify 1`] = `
   <div>string</div>
 </div>
 <ul>
-  123<li class="foo" id="bar">First</li
-  >456<li class="baz">Second</li
-  >789
+  123
+  <li class="foo" id="bar">First</li>
+  456
+  <li class="baz">Second</li>
+  789
 </ul>
 <span>*<b>200</b></span>
 <img
@@ -1689,9 +1691,9 @@ exports[`tags.html - html-verify 1`] = `
 >
 <br /><br />
 <p>"<span [innerHTML]="title"></span>" is the <i>property bound</i> title.</p>
-<li
-  >12345678901234567890123456789012345678901234567890123456789012345678901234567890</li
->
+<li>
+  12345678901234567890123456789012345678901234567890123456789012345678901234567890
+</li>
 
 `;
 
@@ -2009,14 +2011,20 @@ exports[`tags.html - html-verify 2`] = `
   </div>
 </div>
 <ul>
-  123<li
+  123
+  <li
     class="foo"
     id="bar"
-    >First</li
-  >456<li
+  >
+    First
+  </li>
+  456
+  <li
     class="baz"
-    >Second</li
-  >789
+  >
+    Second
+  </li>
+  789
 </ul>
 <span
   >*<b
@@ -2091,9 +2099,9 @@ exports[`tags.html - html-verify 2`] = `
   >
   title.
 </p>
-<li
-  >12345678901234567890123456789012345678901234567890123456789012345678901234567890</li
->
+<li>
+  12345678901234567890123456789012345678901234567890123456789012345678901234567890
+</li>
 
 `;
 
@@ -2244,9 +2252,11 @@ exports[`tags.html - html-verify 3`] = `
   <div>string</div>
 </div>
 <ul>
-  123<li class="foo" id="bar">First</li
-  >456<li class="baz">Second</li
-  >789
+  123
+  <li class="foo" id="bar">First</li>
+  456
+  <li class="baz">Second</li>
+  789
 </ul>
 <span>*<b>200</b></span> <img src="longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong" />123
 <div>123<meta attr />456</div>

From bdaae2ca24c289fb90ba303a0a91928ef2881352 Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Mon, 22 Oct 2018 23:30:57 +0800
Subject: [PATCH 096/177] fix: avoid unnecessary child language formatting for
 null attribute

---
 src/language-html/printer-htmlparser2.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/language-html/printer-htmlparser2.js b/src/language-html/printer-htmlparser2.js
index 6dcd458f0a8d..ba0fcc452588 100644
--- a/src/language-html/printer-htmlparser2.js
+++ b/src/language-html/printer-htmlparser2.js
@@ -90,6 +90,10 @@ function embed(path, print, textToDoc, options) {
       break;
     }
     case "attribute": {
+      if (!node.value) {
+        break;
+      }
+
       const embeddedAttributeValueDoc = printEmbeddedAttributeValue(
         node,
         (code, opts) =>

From eb2435f2cb878469e72da02f2e7fdc6141a61bf4 Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Wed, 24 Oct 2018 19:38:31 +0800
Subject: [PATCH 097/177] test: add tests

---
 .../__snapshots__/jsfmt.spec.js.snap             | 16 ++++++++++++++++
 .../standalone-end-marker.html                   |  8 ++++++++
 2 files changed, 24 insertions(+)

diff --git a/tests/html_next_empty_line/__snapshots__/jsfmt.spec.js.snap b/tests/html_next_empty_line/__snapshots__/jsfmt.spec.js.snap
index fd5d8be45cca..3a1ade43144a 100644
--- a/tests/html_next_empty_line/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_next_empty_line/__snapshots__/jsfmt.spec.js.snap
@@ -13,6 +13,14 @@ exports[`standalone-end-marker.html - html-verify 1`] = `
 >
 
 <span></span>
+
+<div>
+  <a href="#123123123123123131231312321312312312312312312312312313123123123123123"
+    >123123123123</a
+  >
+
+  123123
+</div>
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 <div></div>
 <span></span>
@@ -22,4 +30,12 @@ exports[`standalone-end-marker.html - html-verify 1`] = `
 
 <span></span>
 
+<div>
+  <a
+    href="#123123123123123131231312321312312312312312312312312313123123123123123"
+    >123123123123</a
+  >
+  123123
+</div>
+
 `;
diff --git a/tests/html_next_empty_line/standalone-end-marker.html b/tests/html_next_empty_line/standalone-end-marker.html
index 29537f533fcc..3174faf3fba6 100644
--- a/tests/html_next_empty_line/standalone-end-marker.html
+++ b/tests/html_next_empty_line/standalone-end-marker.html
@@ -10,3 +10,11 @@
 >
 
 <span></span>
+
+<div>
+  <a href="#123123123123123131231312321312312312312312312312312313123123123123123"
+    >123123123123</a
+  >
+
+  123123
+</div>

From 337c284413132ca33b6acca679c84a5e5579b3b7 Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Wed, 24 Oct 2018 22:00:39 +0800
Subject: [PATCH 098/177] feat: switch to angular-html-parser - feat: better
 html5 parsing - fix: no missing next empty line for some edge cases - fix: do
 not unescape `<\/script>` literal in `<script>` - test: remove invalid tests

---
 package.json                                  |   1 +
 src/common/util.js                            |   5 +-
 src/language-html/clean.js                    |  12 +-
 src/language-html/index.js                    |   4 +-
 src/language-html/parser-html.js              | 352 +++++++++---------
 src/language-html/preprocess.js               | 131 +++----
 ...printer-htmlparser2.js => printer-html.js} |  94 ++---
 src/language-html/utils.js                    | 122 +++---
 .../__snapshots__/jsfmt.spec.js.snap          |   7 +-
 .../__snapshots__/jsfmt.spec.js.snap          |  15 +-
 tests/html_basics/html-fragment.html          |   3 -
 .../__snapshots__/jsfmt.spec.js.snap          |   1 +
 .../__snapshots__/jsfmt.spec.js.snap          |  62 ---
 tests/html_tags/custom-self-closing.html      |   4 -
 .../__snapshots__/jsfmt.spec.js.snap          |   1 +
 yarn.lock                                     |   7 +
 16 files changed, 357 insertions(+), 464 deletions(-)
 rename src/language-html/{printer-htmlparser2.js => printer-html.js} (90%)
 delete mode 100644 tests/html_basics/html-fragment.html
 delete mode 100644 tests/html_tags/custom-self-closing.html

diff --git a/package.json b/package.json
index 5947374a4c11..91b47bb6e757 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
     "@glimmer/syntax": "0.30.3",
     "@iarna/toml": "2.0.0",
     "angular-estree-parser": "1.1.0",
+    "angular-html-parser": "1.0.0",
     "camelcase": "4.1.0",
     "chalk": "2.1.0",
     "cjk-regex": "2.0.0",
diff --git a/src/common/util.js b/src/common/util.js
index a1258a993298..a04a2d37dfd3 100644
--- a/src/common/util.js
+++ b/src/common/util.js
@@ -489,7 +489,10 @@ function printString(raw, options, isDirectiveLiteral) {
     !(
       options.parser === "css" ||
       options.parser === "less" ||
-      options.parser === "scss"
+      options.parser === "scss" ||
+      options.parentParser === "html" ||
+      options.parentParser === "vue" ||
+      options.parentParser === "angular"
     )
   );
 }
diff --git a/src/language-html/clean.js b/src/language-html/clean.js
index 6c16c1db8c9d..c14bb094b0d1 100644
--- a/src/language-html/clean.js
+++ b/src/language-html/clean.js
@@ -1,9 +1,11 @@
 "use strict";
 
 module.exports = function(ast, newNode) {
-  delete newNode.startIndex;
-  delete newNode.endIndex;
-  delete newNode.attribs;
+  delete newNode.sourceSpan;
+  delete newNode.startSourceSpan;
+  delete newNode.endSourceSpan;
+  delete newNode.nameSpan;
+  delete newNode.valueSpan;
 
   if (ast.type === "text" || ast.type === "comment") {
     return null;
@@ -18,7 +20,7 @@ module.exports = function(ast, newNode) {
     delete newNode.value;
   }
 
-  if (ast.type === "directive" && ast.name === "!doctype") {
-    delete newNode.data;
+  if (ast.type === "docType") {
+    delete newNode.value;
   }
 };
diff --git a/src/language-html/index.js b/src/language-html/index.js
index 6f3e397f965d..e90f51a210a1 100644
--- a/src/language-html/index.js
+++ b/src/language-html/index.js
@@ -1,6 +1,6 @@
 "use strict";
 
-const printer = require("./printer-htmlparser2");
+const printer = require("./printer-html");
 const createLanguage = require("../utils/create-language");
 const options = require("./options");
 
@@ -33,7 +33,7 @@ const languages = [
 ];
 
 const printers = {
-  htmlparser2: printer
+  html: printer
 };
 
 module.exports = {
diff --git a/src/language-html/parser-html.js b/src/language-html/parser-html.js
index 6b701fc12b33..53299b3a4097 100644
--- a/src/language-html/parser-html.js
+++ b/src/language-html/parser-html.js
@@ -3,97 +3,129 @@
 const parseFrontMatter = require("../utils/front-matter");
 const { HTML_ELEMENT_ATTRIBUTES, HTML_TAGS, mapNode } = require("./utils");
 const { hasPragma } = require("./pragma");
+const createError = require("../common/parser-create-error");
 
-function htmlparser2(text, recognizeSelfClosing) {
-  // Inline the require to avoid loading all the JS if we don't use it
-  const Parser = require("htmlparser2/lib/Parser");
-  const DomHandler = require("domhandler");
-
-  /**
-   * modifications:
-   * - empty attributes (e.g., `<tag attr>`) are parsed as `{ [attr]: null }` instead of `{ [attr]: "" }`
-   * - trigger `Handler#onselfclosingtag()`
-   */
-  class CustomParser extends Parser {
-    constructor(cbs, options) {
-      super(cbs, options);
-      this._attribvalue = null;
-    }
-    onattribdata(value) {
-      if (this._attribvalue === null) {
-        this._attribvalue = "";
-      }
-      super.onattribdata(value);
-    }
-    onattribend() {
-      if (this._cbs.onattribute) {
-        this._cbs.onattribute(this._attribname, this._attribvalue);
-      }
-      if (this._attribs) {
-        this._attribs.push([this._attribname, this._attribvalue]);
-      }
-      this._attribname = "";
-      this._attribvalue = null;
+function ngHtmlParser(input, canSelfClose) {
+  const parser = require("angular-html-parser");
+  const {
+    RecursiveVisitor,
+    visitAll,
+    Attribute,
+    CDATA,
+    Comment,
+    DocType,
+    Element,
+    Text
+  } = require("angular-html-parser/lib/compiler/src/ml_parser/ast");
+  const {
+    ParseSourceSpan
+  } = require("angular-html-parser/lib/compiler/src/parse_util");
+  const {
+    getHtmlTagDefinition
+  } = require("angular-html-parser/lib/compiler/src/ml_parser/html_tags");
+
+  const { rootNodes, errors } = parser.parse(input, { canSelfClose });
+
+  if (errors.length !== 0) {
+    const { msg, span } = errors[0];
+    const { line, col } = span.start;
+    throw createError(msg, { start: { line: line + 1, column: col } });
+  }
+
+  const addType = node => {
+    if (node instanceof Attribute) {
+      node.type = "attribute";
+    } else if (node instanceof CDATA) {
+      node.type = "cdata";
+    } else if (node instanceof Comment) {
+      node.type = "comment";
+    } else if (node instanceof DocType) {
+      node.type = "docType";
+    } else if (node instanceof Element) {
+      node.type = "element";
+    } else if (node instanceof Text) {
+      node.type = "text";
+    } else {
+      throw new Error(`Unexpected node ${JSON.stringify(node)}`);
     }
-    onselfclosingtag() {
-      if (this._options.xmlMode || this._options.recognizeSelfClosing) {
-        const name = this._tagname;
-        this.onopentagend();
-        if (this._stack[this._stack.length - 1] === name) {
-          this._cbs.onselfclosingtag();
-          this._cbs.onclosetag(name);
-          this._stack.pop();
+  };
+
+  const restoreNameAndValue = node => {
+    if (node instanceof Element) {
+      node.name = node.nameSpan ? node.nameSpan.toString() : node.name;
+      node.attrs.forEach(attr => {
+        attr.name = attr.nameSpan.toString();
+        if (!attr.valueSpan) {
+          attr.value = null;
+        } else {
+          attr.value = attr.valueSpan.toString();
+          if (/['"]/.test(attr.value[0])) {
+            attr.value = attr.value.slice(1, -1);
+          }
         }
-      } else {
-        this.onopentagend();
-      }
+      });
+    } else if (node instanceof Comment) {
+      node.value = node.sourceSpan
+        .toString()
+        .slice("<!--".length, -"-->".length);
+    } else if (node instanceof Text) {
+      node.value = node.sourceSpan.toString();
     }
-    onopentagname(name) {
-      super.onopentagname(name);
-      if (this._cbs.onopentag) {
-        this._attribs = [];
-      }
-    }
-  }
+  };
 
-  /**
-   * modifications:
-   * - add `isSelfClosing` field
-   * - correct `endIndex` for whitespaces before closing tag end marker (e.g., `<x></x\n>`)
-   */
-  class CustomDomHandler extends DomHandler {
-    onselfclosingtag() {
-      this._tagStack[this._tagStack.length - 1].isSelfClosing = true;
+  const lowerCaseIfFn = (text, fn) => {
+    const lowerCasedText = text.toLowerCase();
+    return fn(lowerCasedText) ? lowerCasedText : text;
+  };
+  const normalizeName = node => {
+    if (node instanceof Element) {
+      node.name = lowerCaseIfFn(
+        node.name,
+        lowerCasedName => lowerCasedName in HTML_TAGS
+      );
+      const CURRENT_HTML_ELEMENT_ATTRIBUTES =
+        HTML_ELEMENT_ATTRIBUTES[node.name] || Object.create(null);
+      node.attrs.forEach(attr => {
+        attr.name = lowerCaseIfFn(
+          attr.name,
+          lowerCasedAttrName =>
+            node.name in HTML_ELEMENT_ATTRIBUTES &&
+            (lowerCasedAttrName in HTML_ELEMENT_ATTRIBUTES["*"] ||
+              lowerCasedAttrName in CURRENT_HTML_ELEMENT_ATTRIBUTES)
+        );
+      });
     }
-    onclosetag() {
-      const elem = this._tagStack.pop();
-      if (this._options.withEndIndices && elem) {
-        const buffer = this._parser._tokenizer._buffer;
-        let endIndex = this._parser.endIndex;
-        while (buffer[endIndex] && buffer[endIndex] !== ">") {
-          endIndex++;
-        }
-        elem.endIndex = buffer[endIndex] ? endIndex : this._parser.endIndex;
-      }
-      if (this._elementCB) {
-        this._elementCB(elem);
-      }
+  };
+
+  const fixSourceSpan = node => {
+    if (node.sourceSpan && node.endSourceSpan) {
+      node.sourceSpan = new ParseSourceSpan(
+        node.sourceSpan.start,
+        node.endSourceSpan.end
+      );
     }
-  }
+  };
 
-  const handler = new CustomDomHandler({
-    withStartIndices: true,
-    withEndIndices: true
-  });
+  const addIsVoid = node => {
+    if (node instanceof Element) {
+      node.isVoid = getHtmlTagDefinition(node.name).isVoid;
+    }
+  };
 
-  new CustomParser(handler, {
-    lowerCaseTags: true, // preserve lowercase tag names to avoid false check in htmlparser2 and apply the lowercasing later
-    lowerCaseAttributeNames: false,
-    recognizeSelfClosing,
-    recognizeCDATA: true
-  }).end(text);
+  visitAll(
+    new class extends RecursiveVisitor {
+      visit(node) {
+        addType(node);
+        restoreNameAndValue(node);
+        normalizeName(node);
+        addIsVoid(node);
+        fixSourceSpan(node);
+      }
+    }(),
+    rootNodes
+  );
 
-  return handler.dom;
+  return rootNodes;
 }
 
 function _parse(
@@ -106,120 +138,102 @@ function _parse(
     ? parseFrontMatter(text)
     : { frontMatter: null, content: text };
 
-  const ast = normalize(
-    {
-      type: "root",
-      children: htmlparser2(content, recognizeSelfClosing),
-      startIndex: 0,
-      endIndex: text.length
-    },
-    text
-  );
+  const ast = {
+    type: "root",
+    sourceSpan: { start: { offset: 0 }, end: { offset: text.length } },
+    children: ngHtmlParser(content, recognizeSelfClosing)
+  };
 
   if (frontMatter) {
     ast.children.unshift(frontMatter);
   }
 
-  const parseSubHtml = subContent =>
-    _parse(subContent, options, recognizeSelfClosing, false);
+  const parseSubHtml = (subContent, startSourceSpan) => {
+    const { offset } = startSourceSpan;
+    const fakeContent = text.slice(0, offset).replace(/[^\r\n]/g, " ");
+    const realContent = subContent;
+    const subAst = _parse(
+      fakeContent + realContent,
+      options,
+      recognizeSelfClosing,
+      false
+    );
+    const ParseSourceSpan = subAst.children[0].sourceSpan.constructor;
+    subAst.sourceSpan = new ParseSourceSpan(
+      startSourceSpan,
+      subAst.children[subAst.children.length - 1].sourceSpan.end
+    );
+    const firstText = subAst.children[0];
+    if (firstText.length === offset) {
+      subAst.children.shift();
+    } else {
+      firstText.sourceSpan = new ParseSourceSpan(
+        firstText.sourceSpan.start.moveBy(offset),
+        firstText.sourceSpan.end
+      );
+      firstText.value = firstText.value.slice(offset);
+    }
+    return subAst;
+  };
 
   return mapNode(ast, node => {
-    const ieConditionalComment = parseIeConditionalComment(node, parseSubHtml);
-    return ieConditionalComment ? ieConditionalComment : node;
+    if (node.children) {
+      const newChildren = [];
+
+      for (const child of node.children) {
+        if (child.type === "element" && !child.nameSpan) {
+          Array.prototype.push.apply(newChildren, child.children);
+        } else {
+          newChildren.push(child);
+        }
+      }
+
+      return Object.assign({}, node, { children: newChildren });
+    }
+
+    if (node.type === "comment") {
+      const ieConditionalComment = parseIeConditionalComment(
+        node,
+        parseSubHtml
+      );
+      if (ieConditionalComment) {
+        return ieConditionalComment;
+      }
+    }
+
+    return node;
   });
 }
 
 function parseIeConditionalComment(node, parseHtml) {
-  if (node.type !== "comment") {
+  if (!node.value) {
     return null;
   }
 
-  const match = node.data.match(/^(\[if([^\]]*?)\]>)([\s\S]*?)<!\s*\[endif\]$/);
+  const match = node.value.match(
+    /^(\[if([^\]]*?)\]>)([\s\S]*?)<!\s*\[endif\]$/
+  );
 
   if (!match) {
     return null;
   }
 
   const [, openingTagSuffix, condition, data] = match;
-  const subTree = parseHtml(data);
-  const baseIndex = node.startIndex + "<!--".length + openingTagSuffix.length;
-
-  return Object.assign(
-    {},
-    mapNode(subTree, currentNode =>
-      Object.assign({}, currentNode, {
-        startIndex: baseIndex + currentNode.startIndex,
-        endIndex: baseIndex + currentNode.endIndex
-      })
-    ),
-    {
-      type: "ieConditionalComment",
-      condition: condition.trim().replace(/\s+/g, " ")
-    }
-  );
-}
-
-function normalize(node, text) {
-  delete node.parent;
-  delete node.next;
-  delete node.prev;
-
-  if (node.type === "tag" && !(node.name in HTML_TAGS)) {
-    node.name = text.slice(
-      node.startIndex + 1, // <
-      node.startIndex + 1 + node.name.length
-    );
-  }
-
-  if (node.attribs) {
-    const CURRENT_HTML_ELEMENT_ATTRIBUTES =
-      HTML_ELEMENT_ATTRIBUTES[node.name] || Object.create(null);
-    const attributes = node.attribs.map(([attributeKey, attributeValue]) => {
-      const lowerCaseAttributeKey = attributeKey.toLowerCase();
-      return {
-        type: "attribute",
-        key:
-          lowerCaseAttributeKey in HTML_ELEMENT_ATTRIBUTES["*"] ||
-          lowerCaseAttributeKey in CURRENT_HTML_ELEMENT_ATTRIBUTES
-            ? lowerCaseAttributeKey
-            : attributeKey,
-        value: attributeValue
-      };
-    });
-
-    const attribs = Object.create(null);
-    for (const attribute of attributes) {
-      attribs[attribute.key] = attribute.value;
-    }
+  const offset = "<!--".length + openingTagSuffix.length;
+  const startSourceSpan = node.sourceSpan.start.moveBy(offset);
 
-    node.attribs = attribs;
-    node.attributes = attributes;
-  }
-
-  if (node.children) {
-    node.children = node.children.map(child => normalize(child, text));
-  }
-
-  if (
-    node.type === "tag" &&
-    node.name === "textarea" &&
-    node.children.length === 1 &&
-    node.children[0].type === "text" &&
-    node.children[0].data === "\n" &&
-    !/<\/textarea>$/.test(text.slice(locStart(node), locEnd(node)))
-  ) {
-    node.children = [];
-  }
-
-  return node;
+  return Object.assign({}, parseHtml(data, startSourceSpan), {
+    type: "ieConditionalComment",
+    condition: condition.trim().replace(/\s+/g, " ")
+  });
 }
 
 function locStart(node) {
-  return node.startIndex;
+  return node.sourceSpan.start.offset;
 }
 
 function locEnd(node) {
-  return node.endIndex + 1;
+  return node.sourceSpan.end.offset;
 }
 
 function createParser({ recognizeSelfClosing }) {
@@ -227,7 +241,7 @@ function createParser({ recognizeSelfClosing }) {
     parse: (text, parsers, options) =>
       _parse(text, options, recognizeSelfClosing),
     hasPragma,
-    astFormat: "htmlparser2",
+    astFormat: "html",
     locStart,
     locEnd
   };
diff --git a/src/language-html/preprocess.js b/src/language-html/preprocess.js
index bb65416957bc..5a86ffbc1e8c 100644
--- a/src/language-html/preprocess.js
+++ b/src/language-html/preprocess.js
@@ -1,7 +1,6 @@
 "use strict";
 
 const {
-  VOID_TAGS,
   getNodeCssStyleDisplay,
   getNodeCssStyleWhiteSpace,
   getPrevNode,
@@ -11,18 +10,14 @@ const {
   isTrailingSpaceSensitiveNode,
   mapNode
 } = require("./utils");
-const LineAndColumn = (m => m.default || m)(require("lines-and-columns"));
 
 const PREPROCESS_PIPELINE = [
-  renameScriptAndStyleWithTag,
   mergeCdataIntoText,
   extractInterpolation,
-  processDirectives,
   addIsSelfClosing,
   extractWhitespaces,
   addCssDisplay,
   addIsSpaceSensitive,
-  addStartAndEndLocation,
   addShortcuts
 ];
 
@@ -33,20 +28,8 @@ function preprocess(ast, options) {
   return ast;
 }
 
-function mergeCdataIntoText(ast, options) {
+function mergeCdataIntoText(ast /*, options */) {
   return mapNode(ast, node => {
-    if (node.type === "cdata") {
-      const newNode = Object.assign({}, node, {
-        // we cannot use child.data here since there's no child for whitespace-only text in cdata
-        data: options.originalText.slice(
-          options.locStart(node),
-          options.locEnd(node)
-        )
-      });
-      delete newNode.children;
-      return newNode;
-    }
-
     if (node.children && node.children.some(child => child.type === "cdata")) {
       const newChildren = [];
       for (const child of node.children) {
@@ -58,7 +41,10 @@ function mergeCdataIntoText(ast, options) {
         const newChild =
           child.type === "text"
             ? child
-            : Object.assign({}, child, { type: "text" });
+            : Object.assign({}, child, {
+                type: "text",
+                value: `<![CDATA[${child.value}]]>`
+              });
 
         if (
           newChildren.length === 0 ||
@@ -69,10 +55,14 @@ function mergeCdataIntoText(ast, options) {
         }
 
         const lastChild = newChildren.pop();
+        const ParseSourceSpan = lastChild.sourceSpan.constructor;
         newChildren.push(
           Object.assign({}, lastChild, {
-            data: lastChild.data + newChild.data,
-            endIndex: newChild.endIndex
+            value: lastChild.value + newChild.value,
+            sourceSpan: new ParseSourceSpan(
+              lastChild.sourceSpan.start,
+              newChild.sourceSpan.end
+            )
           })
         );
       }
@@ -102,34 +92,43 @@ function extractInterpolation(ast, options) {
         continue;
       }
 
-      let startIndex = child.startIndex;
-      let endIndex = null;
-      const components = child.data.split(interpolationRegex);
-      for (let i = 0; i < components.length; i++, startIndex = endIndex) {
-        const data = components[i];
+      let startSourceSpan = child.sourceSpan.start;
+      let endSourceSpan = null;
+      const components = child.value.split(interpolationRegex);
+      for (
+        let i = 0;
+        i < components.length;
+        i++, startSourceSpan = endSourceSpan
+      ) {
+        const value = components[i];
 
         if (i % 2 === 0) {
-          endIndex = startIndex + data.length;
-          if (data.length !== 0) {
-            newChildren.push({ type: "text", data, startIndex, endIndex });
+          endSourceSpan = startSourceSpan.moveBy(value.length);
+          if (value.length !== 0) {
+            newChildren.push({
+              type: "text",
+              value,
+              sourceSpan: { start: startSourceSpan, end: endSourceSpan }
+            });
           }
           continue;
         }
 
-        endIndex = startIndex + data.length + 4; // `{{` + `}}`
+        endSourceSpan = startSourceSpan.moveBy(value.length + 4); // `{{` + `}}`
         newChildren.push({
           type: "interpolation",
-          startIndex,
-          endIndex,
+          sourceSpan: { start: startSourceSpan, end: endSourceSpan },
           children:
-            data.length === 0
+            value.length === 0
               ? []
               : [
                   {
                     type: "text",
-                    startIndex: startIndex + 2,
-                    endIndex: endIndex - 2,
-                    data
+                    value,
+                    sourceSpan: {
+                      start: startSourceSpan.moveBy(2),
+                      end: endSourceSpan.moveBy(-2)
+                    }
                   }
                 ]
         });
@@ -140,58 +139,20 @@ function extractInterpolation(ast, options) {
   });
 }
 
-/** add `startLocation` and `endLocation` field */
-function addStartAndEndLocation(ast, options) {
-  const locator = new LineAndColumn(options.originalText);
-  return mapNode(ast, node => {
-    const startLocation = locator.locationForIndex(options.locStart(node));
-    const endLocation = locator.locationForIndex(options.locEnd(node) - 1);
-    return Object.assign({}, node, { startLocation, endLocation });
-  });
-}
-
-/** rename `script` and `style` with `tag` */
-function renameScriptAndStyleWithTag(ast /*, options */) {
-  return mapNode(ast, node => {
-    return node.type === "script" || node.type === "style"
-      ? Object.assign({}, node, { type: "tag" })
-      : node;
-  });
-}
-
 /** add `isSelfClosing` for void tags, directives, and comments */
 function addIsSelfClosing(ast /*, options */) {
   return mapNode(ast, node => {
-    if (!node.children || (node.type === "tag" && node.name in VOID_TAGS)) {
+    if (
+      !node.children ||
+      (node.type === "element" &&
+        (node.isVoid || node.startSourceSpan === node.endSourceSpan))
+    ) {
       return Object.assign({}, node, { isSelfClosing: true });
     }
     return node;
   });
 }
 
-function processDirectives(ast /*, options */) {
-  return mapNode(ast, node => {
-    if (node.type !== "directive") {
-      return node;
-    }
-
-    const isDoctype = /^!doctype$/i.test(node.name);
-    const data = node.data.slice(node.name.length).replace(/\s+/g, " ");
-
-    return Object.assign({}, node, {
-      name: isDoctype ? "!DOCTYPE" : node.name,
-      data: isDoctype ? data.replace(/^\s+html/i, " html") : data,
-      // workaround for htmlparser2 bug
-      endIndex:
-        node.startIndex +
-        "<".length +
-        node.name.length +
-        node.data.length +
-        ">".length
-    });
-  });
-}
-
 /**
  * - add `hasLeadingSpaces` field
  * - add `hasTrailingSpaces` field
@@ -210,7 +171,7 @@ function extractWhitespaces(ast /*, options*/) {
       node.children.length === 0 ||
       (node.children.length === 1 &&
         node.children[0].type === "text" &&
-        node.children[0].data.trim().length === 0)
+        node.children[0].value.trim().length === 0)
     ) {
       return Object.assign({}, node, {
         children: [],
@@ -245,7 +206,7 @@ function extractWhitespaces(ast /*, options*/) {
 
           const localChildren = [];
 
-          const [, leadingSpaces, text, trailingSpaces] = child.data.match(
+          const [, leadingSpaces, text, trailingSpaces] = child.value.match(
             /^(\s*)([\s\S]*?)(\s*)$/
           );
 
@@ -256,9 +217,11 @@ function extractWhitespaces(ast /*, options*/) {
           if (text) {
             localChildren.push({
               type: "text",
-              data: text,
-              startIndex: child.startIndex + leadingSpaces.length,
-              endIndex: child.endIndex - trailingSpaces.length
+              value: text,
+              sourceSpan: {
+                start: child.sourceSpan.start.moveBy(leadingSpaces.length),
+                end: child.sourceSpan.end.moveBy(-trailingSpaces.length)
+              }
             });
           }
 
diff --git a/src/language-html/printer-htmlparser2.js b/src/language-html/printer-html.js
similarity index 90%
rename from src/language-html/printer-htmlparser2.js
rename to src/language-html/printer-html.js
index ba0fcc452588..a38658364ac0 100644
--- a/src/language-html/printer-htmlparser2.js
+++ b/src/language-html/printer-html.js
@@ -55,15 +55,15 @@ function embed(path, print, textToDoc, options) {
       if (isScriptLikeTag(node.parent)) {
         const parser = inferScriptParser(node.parent);
         if (parser) {
-          const data =
+          const value =
             parser === "markdown"
-              ? dedentString(node.data.replace(/^[^\S\n]*?\n/, ""))
-              : node.data;
+              ? dedentString(node.value.replace(/^[^\S\n]*?\n/, ""))
+              : node.value;
           return builders.concat([
             concat([
               breakParent,
               printOpeningTagPrefix(node),
-              markAsRoot(stripTrailingHardline(textToDoc(data, { parser }))),
+              markAsRoot(stripTrailingHardline(textToDoc(value, { parser }))),
               printClosingTagSuffix(node)
             ])
           ]);
@@ -73,7 +73,7 @@ function embed(path, print, textToDoc, options) {
           indent(
             concat([
               softline,
-              textToDoc(node.data, {
+              textToDoc(node.value, {
                 parser:
                   options.parser === "angular"
                     ? "__ng_interpolation"
@@ -103,7 +103,7 @@ function embed(path, print, textToDoc, options) {
       );
       if (embeddedAttributeValueDoc) {
         return concat([
-          node.key,
+          node.name,
           '="',
           mapDoc(
             embeddedAttributeValueDoc,
@@ -140,7 +140,7 @@ function genericPrint(path, options, print) {
         group(printChildren(path, options, print)),
         hardline
       ]);
-    case "tag":
+    case "element":
     case "ieConditionalComment":
       return concat([
         group(
@@ -195,12 +195,12 @@ function genericPrint(path, options, print) {
       if (node.parent.type === "interpolation") {
         // replace the trailing literalline with hardline for better readability
         const trailingNewlineRegex = /\n[^\S\n]*?$/;
-        const hasTrailingNewline = trailingNewlineRegex.test(node.data);
-        const data = hasTrailingNewline
-          ? node.data.replace(trailingNewlineRegex, "")
-          : node.data;
+        const hasTrailingNewline = trailingNewlineRegex.test(node.value);
+        const value = hasTrailingNewline
+          ? node.value.replace(trailingNewlineRegex, "")
+          : node.value;
         return concat([
-          concat(replaceNewlines(data, literalline)),
+          concat(replaceNewlines(value, literalline)),
           hasTrailingNewline ? hardline : ""
         ]);
       }
@@ -208,20 +208,30 @@ function genericPrint(path, options, print) {
         normalizeParts(
           [].concat(
             printOpeningTagPrefix(node),
-            getTextDataParts(node),
+            getTextValueParts(node),
             printClosingTagSuffix(node)
           )
         )
       );
     }
-    case "comment":
-    case "directive": {
-      const data = getCommentData(node);
+    case "docType":
       return concat([
         group(
           concat([
             printOpeningTagStart(node),
-            data.trim().length === 0
+            " ",
+            node.value.replace(/^html\b/i, "html").replace(/\s+/g, " ")
+          ])
+        ),
+        printClosingTagEnd(node)
+      ]);
+    case "comment": {
+      const value = getCommentData(node);
+      return concat([
+        group(
+          concat([
+            printOpeningTagStart(node),
+            value.trim().length === 0
               ? ""
               : concat([
                   indent(
@@ -230,17 +240,15 @@ function genericPrint(path, options, print) {
                       needsToBorrowNextOpeningTagStartMarker(node.prev)
                         ? breakParent
                         : "",
-                      node.type === "directive" ? " " : line,
-                      concat(replaceNewlines(data, hardline))
+                      line,
+                      concat(replaceNewlines(value, hardline))
                     ])
                   ),
-                  node.type === "directive"
-                    ? ""
-                    : (node.next
-                      ? needsToBorrowPrevClosingTagEndMarker(node.next)
-                      : needsToBorrowLastChildClosingTagEndMarker(node.parent))
-                      ? " "
-                      : line
+                  (node.next
+                  ? needsToBorrowPrevClosingTagEndMarker(node.next)
+                  : needsToBorrowLastChildClosingTagEndMarker(node.parent))
+                    ? " "
+                    : line
                 ])
           ])
         ),
@@ -249,7 +257,7 @@ function genericPrint(path, options, print) {
     }
     case "attribute":
       return concat([
-        node.key,
+        node.name,
         node.value === null
           ? ""
           : concat([
@@ -405,14 +413,14 @@ function printChildren(path, options, print) {
          *             ~
          *       attr
          */
-        (nextNode.type === "tag" && nextNode.attributes.length !== 0))) ||
+        (nextNode.type === "element" && nextNode.attrs.length !== 0))) ||
       /**
        *     <img
        *       src="long"
        *                 ~
        *     />123
        */
-      (prevNode.type === "tag" &&
+      (prevNode.type === "element" &&
         prevNode.isSelfClosing &&
         needsToBorrowPrevClosingTagEndMarker(nextNode))
       ? ""
@@ -441,14 +449,14 @@ function printChildren(path, options, print) {
 function printOpeningTag(path, options, print) {
   const node = path.getValue();
   const forceNotToBreakAttrContent =
-    node.type === "tag" &&
+    node.type === "element" &&
     node.name === "script" &&
-    node.attributes.length === 1 &&
-    node.attributes[0].key === "src" &&
+    node.attrs.length === 1 &&
+    node.attrs[0].name === "src" &&
     node.children.length === 0;
   return concat([
     printOpeningTagStart(node),
-    !node.attributes || node.attributes.length === 0
+    !node.attrs || node.attrs.length === 0
       ? node.isSelfClosing
         ? /**
            *     <br />
@@ -461,7 +469,7 @@ function printOpeningTag(path, options, print) {
             indent(
               concat([
                 forceNotToBreakAttrContent ? " " : line,
-                join(line, path.map(print, "attributes"))
+                join(line, path.map(print, "attrs"))
               ])
             ),
             /**
@@ -635,6 +643,8 @@ function printOpeningTagStartMarker(node) {
       return `<!--[if ${node.condition}`;
     case "interpolation":
       return "{{";
+    case "docType":
+      return "<!DOCTYPE";
     default:
       return `<${node.name}`;
   }
@@ -668,7 +678,7 @@ function printClosingTagEndMarker(node) {
       return `[endif]-->`;
     case "interpolation":
       return "}}";
-    case "tag":
+    case "element":
       if (node.isSelfClosing) {
         return "/>";
       }
@@ -678,29 +688,29 @@ function printClosingTagEndMarker(node) {
   }
 }
 
-function getTextDataParts(node, data = node.data) {
+function getTextValueParts(node, value = node.value) {
   return node.isWhiteSpaceSensitive
     ? node.isIndentationSensitive
-      ? replaceNewlines(data.replace(/^\s*?\n|\n\s*?$/g, ""), literalline)
+      ? replaceNewlines(value.replace(/^\s*?\n|\n\s*?$/g, ""), literalline)
       : replaceNewlines(
-          dedentString(data.replace(/^\s*?\n|\n\s*?$/g, "")),
+          dedentString(value.replace(/^\s*?\n|\n\s*?$/g, "")),
           hardline
         )
-    : join(line, data.split(/\s+/)).parts;
+    : join(line, value.split(/\s+/)).parts;
 }
 
 function printEmbeddedAttributeValue(node, textToDoc, options) {
   const isKeyMatched = patterns =>
-    new RegExp(patterns.join("|")).test(node.key);
+    new RegExp(patterns.join("|")).test(node.name);
   const getValue = () =>
     node.value.replace(/&quot;/g, '"').replace(/&apos;/g, "'");
 
   if (options.parser === "vue") {
-    if (node.key === "v-for") {
+    if (node.name === "v-for") {
       return printVueFor(getValue(), textToDoc);
     }
 
-    if (node.key === "slot-scope") {
+    if (node.name === "slot-scope") {
       return printVueSlotScope(getValue(), textToDoc);
     }
 
diff --git a/src/language-html/utils.js b/src/language-html/utils.js
index 255c745c4af1..3d429ad44116 100644
--- a/src/language-html/utils.js
+++ b/src/language-html/utils.js
@@ -18,40 +18,6 @@ const htmlElementAttributes = require("html-element-attributes");
 const HTML_TAGS = arrayToMap(htmlTagNames);
 const HTML_ELEMENT_ATTRIBUTES = mapObject(htmlElementAttributes, arrayToMap);
 
-// NOTE: must be same as the one in htmlparser2 so that the parsing won't be inconsistent
-//       https://github.com/fb55/htmlparser2/blob/v3.9.2/lib/Parser.js#L59-L91
-const VOID_TAGS = arrayToMap([
-  "area",
-  "base",
-  "basefont",
-  "br",
-  "col",
-  "command",
-  "embed",
-  "frame",
-  "hr",
-  "img",
-  "input",
-  "isindex",
-  "keygen",
-  "link",
-  "meta",
-  "param",
-  "source",
-  "track",
-  "wbr",
-
-  "path",
-  "circle",
-  "ellipse",
-  "line",
-  "rect",
-  "use",
-  "stop",
-  "polyline",
-  "polygon"
-]);
-
 function arrayToMap(array) {
   const map = Object.create(null);
   for (const value of array) {
@@ -97,11 +63,11 @@ function hasPrettierIgnore(path) {
 }
 
 function isPrettierIgnore(node) {
-  return node.type === "comment" && node.data.trim() === "prettier-ignore";
+  return node.type === "comment" && node.value.trim() === "prettier-ignore";
 }
 
-function isTag(node, nameOrNames) {
-  if (node.type !== "tag") {
+function isElement(node, nameOrNames) {
+  if (node.type !== "element") {
     return false;
   }
 
@@ -117,7 +83,7 @@ function isTag(node, nameOrNames) {
 }
 
 function isScriptLikeTag(node) {
-  return isTag(node, ["script", "style"]);
+  return isElement(node, ["script", "style"]);
 }
 
 function isFrontMatterNode(node) {
@@ -224,7 +190,8 @@ function replaceDocNewlines(doc, replacement) {
 function forceNextEmptyLine(node) {
   return (
     isFrontMatterNode(node) ||
-    (node.next && node.endLocation.line + 1 < node.next.startLocation.line)
+    (node.next &&
+      node.sourceSpan.end.line + 1 < node.next.sourceSpan.start.line)
   );
 }
 
@@ -232,7 +199,7 @@ function forceNextEmptyLine(node) {
 function forceBreakContent(node) {
   return (
     forceBreakChildren(node) ||
-    (isTag(node) &&
+    (isElement(node) &&
       node.children.length !== 0 &&
       (["body", "template"].indexOf(node.name) !== -1 ||
         node.children.some(child => hasNonTextChild(child))))
@@ -242,7 +209,7 @@ function forceBreakContent(node) {
 /** spaces between children */
 function forceBreakChildren(node) {
   return (
-    isTag(node) &&
+    isElement(node) &&
     node.children.length !== 0 &&
     (["html", "head", "ul", "ol", "select", "script", "style"].indexOf(
       node.name
@@ -259,10 +226,7 @@ function preferHardlineAsLeadingSpaces(node) {
 }
 
 function preferHardlineAsTrailingSpaces(node) {
-  return (
-    preferHardlineAsSurroundingSpaces(node) ||
-    (isTag(node) && node.name === "br")
-  );
+  return preferHardlineAsSurroundingSpaces(node) || isElement(node, "br");
 }
 
 function preferHardlineAsSurroundingSpaces(node) {
@@ -271,7 +235,7 @@ function preferHardlineAsSurroundingSpaces(node) {
     case "comment":
     case "directive":
       return true;
-    case "tag":
+    case "element":
       return ["script", "select"].indexOf(node.name) !== -1;
   }
   return false;
@@ -286,40 +250,45 @@ function hasNonTextChild(node) {
 }
 
 function inferScriptParser(node) {
-  if (node.name === "script" && !node.attribs.src) {
+  const attrMap = node.attrs.reduce((reduced, attr) => {
+    reduced[attr.name] = attr.value;
+    return reduced;
+  }, {});
+
+  if (node.name === "script" && !attrMap.src) {
     if (
-      (!node.attribs.lang && !node.attribs.type) ||
-      node.attribs.type === "module" ||
-      node.attribs.type === "text/javascript" ||
-      node.attribs.type === "text/babel" ||
-      node.attribs.type === "application/javascript"
+      (!attrMap.lang && !attrMap.type) ||
+      attrMap.type === "module" ||
+      attrMap.type === "text/javascript" ||
+      attrMap.type === "text/babel" ||
+      attrMap.type === "application/javascript"
     ) {
       return "babylon";
     }
 
     if (
-      node.attribs.type === "application/x-typescript" ||
-      node.attribs.lang === "ts" ||
-      node.attribs.lang === "tsx"
+      attrMap.type === "application/x-typescript" ||
+      attrMap.lang === "ts" ||
+      attrMap.lang === "tsx"
     ) {
       return "typescript";
     }
 
-    if (node.attribs.type === "text/markdown") {
+    if (attrMap.type === "text/markdown") {
       return "markdown";
     }
   }
 
   if (node.name === "style") {
-    if (!node.attribs.lang || node.attribs.lang === "postcss") {
+    if (!attrMap.lang || attrMap.lang === "postcss") {
       return "css";
     }
 
-    if (node.attribs.lang === "scss") {
+    if (attrMap.lang === "scss") {
       return "scss";
     }
 
-    if (node.attribs.lang === "less") {
+    if (attrMap.lang === "less") {
       return "less";
     }
   }
@@ -350,7 +319,7 @@ function getNodeCssStyleDisplay(node, prevNode, options) {
 
   if (prevNode && prevNode.type === "comment") {
     // <!-- display: block -->
-    const match = prevNode.data.match(/^\s*display:\s*([a-z]+)\s*$/);
+    const match = prevNode.value.match(/^\s*display:\s*([a-z]+)\s*$/);
     if (match) {
       return match[1];
     }
@@ -362,25 +331,26 @@ function getNodeCssStyleDisplay(node, prevNode, options) {
     case "ignore":
       return "block";
     default:
-      if (isTag(node, "template")) {
+      if (isElement(node, "template")) {
         return "inline";
       }
       return (
-        (isTag(node) && CSS_DISPLAY_TAGS[node.name]) || CSS_DISPLAY_DEFAULT
+        (isElement(node) && CSS_DISPLAY_TAGS[node.name]) || CSS_DISPLAY_DEFAULT
       );
   }
 }
 
 function getNodeCssStyleWhiteSpace(node) {
   return (
-    (isTag(node) && CSS_WHITE_SPACE_TAGS[node.name]) || CSS_WHITE_SPACE_DEFAULT
+    (isElement(node) && CSS_WHITE_SPACE_TAGS[node.name]) ||
+    CSS_WHITE_SPACE_DEFAULT
   );
 }
 
 function getCommentData(node) {
-  const rightTrimmedData = node.data.trimRight();
+  const rightTrimmedValue = node.value.trimRight();
 
-  const hasLeadingEmptyLine = /^[^\S\n]*?\n/.test(node.data);
+  const hasLeadingEmptyLine = /^[^\S\n]*?\n/.test(node.value);
   if (hasLeadingEmptyLine) {
     /**
      *     <!--
@@ -388,7 +358,7 @@ function getCommentData(node) {
      *        456
      *     -->
      */
-    return dedentString(rightTrimmedData.replace(/^\s*\n/, ""));
+    return dedentString(rightTrimmedValue.replace(/^\s*\n/, ""));
   }
 
   /**
@@ -401,19 +371,19 @@ function getCommentData(node) {
    *
    *     -->
    */
-  if (!rightTrimmedData.includes("\n")) {
-    return rightTrimmedData.trimLeft();
+  if (!rightTrimmedValue.includes("\n")) {
+    return rightTrimmedValue.trimLeft();
   }
 
-  const firstNewlineIndex = rightTrimmedData.indexOf("\n");
-  const dataWithoutLeadingLine = rightTrimmedData.slice(firstNewlineIndex + 1);
+  const firstNewlineIndex = rightTrimmedValue.indexOf("\n");
+  const dataWithoutLeadingLine = rightTrimmedValue.slice(firstNewlineIndex + 1);
   const minIndentationForDataWithoutLeadingLine = getMinIndentation(
     dataWithoutLeadingLine
   );
 
-  const leadingSpaces = rightTrimmedData.match(/^[^\n\S]*/)[0].length;
+  const leadingSpaces = rightTrimmedValue.match(/^[^\n\S]*/)[0].length;
   const commentDataStartColumn =
-    node.startLocation.column + "<!--".length + leadingSpaces;
+    node.sourceSpan.start.col + "<!--".length + leadingSpaces;
 
   /**
    *     <!-- 123
@@ -421,17 +391,18 @@ function getCommentData(node) {
    */
   if (minIndentationForDataWithoutLeadingLine >= commentDataStartColumn) {
     return dedentString(
-      " ".repeat(commentDataStartColumn) + rightTrimmedData.slice(leadingSpaces)
+      " ".repeat(commentDataStartColumn) +
+        rightTrimmedValue.slice(leadingSpaces)
     );
   }
 
-  const leadingLineData = rightTrimmedData.slice(0, firstNewlineIndex);
+  const leadingLineValue = rightTrimmedValue.slice(0, firstNewlineIndex);
   /**
    *     <!-- 123
    *     456 -->
    */
   return (
-    leadingLineData.trim() +
+    leadingLineValue.trim() +
     "\n" +
     dedentString(
       dataWithoutLeadingLine,
@@ -513,7 +484,6 @@ function identity(x) {
 module.exports = {
   HTML_ELEMENT_ATTRIBUTES,
   HTML_TAGS,
-  VOID_TAGS,
   dedentString,
   forceBreakChildren,
   forceBreakContent,
diff --git a/tests/html_angular/__snapshots__/jsfmt.spec.js.snap b/tests/html_angular/__snapshots__/jsfmt.spec.js.snap
index 99850c573a97..3d4957828dac 100644
--- a/tests/html_angular/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_angular/__snapshots__/jsfmt.spec.js.snap
@@ -986,10 +986,9 @@ can be found in the LICENSE file at http://angular.io/license
 <hr />
 <h2 id="statement-context">Statement context</h2>
 
-<p>
-  Component statement context ( (click)="onSave() )
-  <div class="context"><button (click)="deleteHero()">Delete hero</button></div>
-</p>
+<p>Component statement context ( (click)="onSave() )</p>
+<div class="context"><button (click)="deleteHero()">Delete hero</button></div>
+
 <p>Template $event statement context</p>
 <div class="context"><button (click)="onSave($event)">Save</button></div>
 
diff --git a/tests/html_basics/__snapshots__/jsfmt.spec.js.snap b/tests/html_basics/__snapshots__/jsfmt.spec.js.snap
index cfbe45c3a0bb..f075a924d472 100644
--- a/tests/html_basics/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_basics/__snapshots__/jsfmt.spec.js.snap
@@ -260,17 +260,6 @@ exports[`html-comments.html - html-verify 1`] = `
 
 `;
 
-exports[`html-fragment.html - html-verify 1`] = `
-<a href="#">Link</a>
-
-<textarea>
-~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-<a href="#">Link</a>
-
-<textarea></textarea>
-
-`;
-
 exports[`html5-boilerplate.html - html-verify 1`] = `
 <!doctype html>
 <html class="no-js" lang="">
@@ -352,7 +341,9 @@ exports[`html5-boilerplate.html - html-verify 1`] = `
     ></script>
     <script>
       window.jQuery ||
-        document.write('<script src="js/vendor/jquery-3.3.1.min.js"></script>');
+        document.write(
+          '<script src="js/vendor/jquery-3.3.1.min.js"><\\/script>'
+        );
     </script>
     <script src="js/plugins.js"></script>
     <script src="js/main.js"></script>
diff --git a/tests/html_basics/html-fragment.html b/tests/html_basics/html-fragment.html
deleted file mode 100644
index 2c402615223c..000000000000
--- a/tests/html_basics/html-fragment.html
+++ /dev/null
@@ -1,3 +0,0 @@
-<a href="#">Link</a>
-
-<textarea>
diff --git a/tests/html_next_empty_line/__snapshots__/jsfmt.spec.js.snap b/tests/html_next_empty_line/__snapshots__/jsfmt.spec.js.snap
index 3a1ade43144a..2f212e4dd8b5 100644
--- a/tests/html_next_empty_line/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_next_empty_line/__snapshots__/jsfmt.spec.js.snap
@@ -35,6 +35,7 @@ exports[`standalone-end-marker.html - html-verify 1`] = `
     href="#123123123123123131231312321312312312312312312312312313123123123123123"
     >123123123123</a
   >
+
   123123
 </div>
 
diff --git a/tests/html_tags/__snapshots__/jsfmt.spec.js.snap b/tests/html_tags/__snapshots__/jsfmt.spec.js.snap
index 457c34dbaebb..fa7cb1f09e3e 100644
--- a/tests/html_tags/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_tags/__snapshots__/jsfmt.spec.js.snap
@@ -204,68 +204,6 @@ exports[`closing-at-start.html - html-verify 5`] = `
 
 `;
 
-exports[`custom-self-closing.html - html-verify 1`] = `
-<div>
-  <ABC />
-  <span></span>
-</div>
-~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-<div>
-  <ABC> <span></span> </ABC>
-</div>
-
-`;
-
-exports[`custom-self-closing.html - html-verify 2`] = `
-<div>
-  <ABC />
-  <span></span>
-</div>
-~
-<div>
-  <ABC>
-    <span></span>
-  </ABC>
-</div>
-
-`;
-
-exports[`custom-self-closing.html - html-verify 3`] = `
-<div>
-  <ABC />
-  <span></span>
-</div>
-~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-<div>
-  <ABC> <span></span> </ABC>
-</div>
-
-`;
-
-exports[`custom-self-closing.html - html-verify 4`] = `
-<div>
-  <ABC />
-  <span></span>
-</div>
-~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-<div>
-  <ABC> <span></span> </ABC
-></div>
-
-`;
-
-exports[`custom-self-closing.html - html-verify 5`] = `
-<div>
-  <ABC />
-  <span></span>
-</div>
-~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-<div>
-  <ABC><span></span></ABC>
-</div>
-
-`;
-
 exports[`openging-at-end.html - html-verify 1`] = `
 <p
   >Want to write us a letter? Use our<a
diff --git a/tests/html_tags/custom-self-closing.html b/tests/html_tags/custom-self-closing.html
deleted file mode 100644
index c2179292fc21..000000000000
--- a/tests/html_tags/custom-self-closing.html
+++ /dev/null
@@ -1,4 +0,0 @@
-<div>
-  <ABC />
-  <span></span>
-</div>
diff --git a/tests/multiparser_js_html/__snapshots__/jsfmt.spec.js.snap b/tests/multiparser_js_html/__snapshots__/jsfmt.spec.js.snap
index e0b45e159d91..4f01fba7a1c2 100644
--- a/tests/multiparser_js_html/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/multiparser_js_html/__snapshots__/jsfmt.spec.js.snap
@@ -67,6 +67,7 @@ class MyElement extends LitElement {
           color: green;
         }
       </style>
+
       Web Components are <span class="mood">\${this.mood}</span>!
     \`;
   }
diff --git a/yarn.lock b/yarn.lock
index e973ead4202c..6fcfdfd78dc2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -768,6 +768,13 @@ angular-estree-parser@1.1.0:
     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"
+  integrity sha512-ubcPKkT24q390B3utotGyNCSo5CVJ9/EmBMv4M6bdhAnxkh6R9NSNB2kSXbxX3KhRyOcDfkeVAVvoEpDWUw1Bg==
+  dependencies:
+    tslib "^1.9.3"
+
 ansi-escapes@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-2.0.0.tgz#5bae52be424878dd9783e8910e3fc2922e83c81b"

From 4e115265e7572d963a6d3d112db597a538e4c427 Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Wed, 24 Oct 2018 22:56:17 +0800
Subject: [PATCH 099/177] chore: remove unnecessary dependencies

---
 package.json |  2 --
 yarn.lock    | 50 --------------------------------------------------
 2 files changed, 52 deletions(-)

diff --git a/package.json b/package.json
index 91b47bb6e757..901bc503d7f5 100644
--- a/package.json
+++ b/package.json
@@ -28,7 +28,6 @@
     "dashify": "0.2.2",
     "dedent": "0.7.0",
     "diff": "3.2.0",
-    "domhandler": "2.4.2",
     "editorconfig": "0.15.0",
     "editorconfig-to-prettier": "0.0.6",
     "emoji-regex": "6.5.1",
@@ -43,7 +42,6 @@
     "html-element-attributes": "2.0.0",
     "html-styles": "1.0.0",
     "html-tag-names": "1.1.2",
-    "htmlparser2": "3.9.2",
     "ignore": "3.3.7",
     "jest-docblock": "23.2.0",
     "json-stable-stringify": "1.0.1",
diff --git a/yarn.lock b/yarn.lock
index 6fcfdfd78dc2..eff792d48180 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2075,29 +2075,11 @@ doctrine@^2.0.2, doctrine@^2.1.0:
   dependencies:
     esutils "^2.0.2"
 
-dom-serializer@0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.1.0.tgz#073c697546ce0780ce23be4a28e293e40bc30c82"
-  integrity sha1-BzxpdUbOB4DOI75KKOKT5AvDDII=
-  dependencies:
-    domelementtype "~1.1.1"
-    entities "~1.1.1"
-
 domain-browser@^1.1.1:
   version "1.1.7"
   resolved "https://registry.yarnpkg.com/domain-browser/-/domain-browser-1.1.7.tgz#867aa4b093faa05f1de08c06f4d7b21fdf8698bc"
   integrity sha1-hnqksJP6oF8d4IwG9NeyH9+GmLw=
 
-domelementtype@1, domelementtype@^1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-1.3.0.tgz#b17aed82e8ab59e52dd9c19b1756e0fc187204c2"
-  integrity sha1-sXrtguirWeUt2cGbF1bg/BhyBMI=
-
-domelementtype@~1.1.1:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-1.1.3.tgz#bd28773e2642881aec51544924299c5cd822185b"
-  integrity sha1-vSh3PiZCiBrsUVRJJCmcXNgiGFs=
-
 domexception@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/domexception/-/domexception-1.0.1.tgz#937442644ca6a31261ef36e3ec677fe805582c90"
@@ -2105,21 +2087,6 @@ domexception@^1.0.0:
   dependencies:
     webidl-conversions "^4.0.2"
 
-domhandler@2.4.2, domhandler@^2.3.0:
-  version "2.4.2"
-  resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-2.4.2.tgz#8805097e933d65e85546f726d60f5eb88b44f803"
-  integrity sha512-JiK04h0Ht5u/80fdLMCEmV4zkNh2BcoMFBmZ/91WtYZ8qVXSKjiw7fXMgFPnHcSZgOo3XdinHvmnDUeMf5R4wA==
-  dependencies:
-    domelementtype "1"
-
-domutils@^1.5.1:
-  version "1.7.0"
-  resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.7.0.tgz#56ea341e834e06e6748af7a1cb25da67ea9f8c2a"
-  integrity sha512-Lgd2XcJ/NjEw+7tFvfKxOzCYKZsdct5lczQ2ZaQY8Djz7pfAD3Gbp8ySJWtreII/vDlMVmxwa6pHmdxIYgttDg==
-  dependencies:
-    dom-serializer "0"
-    domelementtype "1"
-
 ecc-jsbn@~0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/ecc-jsbn/-/ecc-jsbn-0.1.1.tgz#0fc73a9ed5f0d53c38193398523ef7e543777505"
@@ -2189,11 +2156,6 @@ enhanced-resolve@^3.4.0:
     object-assign "^4.0.1"
     tapable "^0.2.7"
 
-entities@^1.1.1, entities@~1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/entities/-/entities-1.1.1.tgz#6e5c2d0a5621b5dadaecef80b90edfb5cd7772f0"
-  integrity sha1-blwtClYhtdra7O+AuQ7ftc13cvA=
-
 errno@^0.1.3:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/errno/-/errno-0.1.4.tgz#b896e23a9e5e8ba33871fc996abd3635fc9a1c7d"
@@ -3216,18 +3178,6 @@ html-tag-names@1.1.2:
   resolved "https://registry.yarnpkg.com/html-tag-names/-/html-tag-names-1.1.2.tgz#f65168964c5a9c82675efda882875dcb2a875c22"
   integrity sha1-9lFolkxanIJnXv2ogoddyyqHXCI=
 
-htmlparser2@3.9.2:
-  version "3.9.2"
-  resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-3.9.2.tgz#1bdf87acca0f3f9e53fa4fcceb0f4b4cbb00b338"
-  integrity sha1-G9+HrMoPP55T+k/M6w9LTLsAszg=
-  dependencies:
-    domelementtype "^1.3.0"
-    domhandler "^2.3.0"
-    domutils "^1.5.1"
-    entities "^1.1.1"
-    inherits "^2.0.1"
-    readable-stream "^2.0.2"
-
 http-signature@~1.1.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/http-signature/-/http-signature-1.1.1.tgz#df72e267066cd0ac67fb76adf8e134a8fbcf91bf"

From 510db003a2542cc8b406d1d46a8d28d779bd3a38 Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Thu, 25 Oct 2018 10:06:34 +0800
Subject: [PATCH 100/177] refactor

---
 src/language-html/parser-html.js  |  6 +++---
 src/language-html/preprocess.js   | 28 +++++++++++++---------------
 src/language-html/printer-html.js |  4 ++--
 src/language-html/utils.js        | 27 ++++++++++++++++++++++-----
 4 files changed, 40 insertions(+), 25 deletions(-)

diff --git a/src/language-html/parser-html.js b/src/language-html/parser-html.js
index 53299b3a4097..701b68469280 100644
--- a/src/language-html/parser-html.js
+++ b/src/language-html/parser-html.js
@@ -106,9 +106,9 @@ function ngHtmlParser(input, canSelfClose) {
     }
   };
 
-  const addIsVoid = node => {
+  const addTagDefinition = node => {
     if (node instanceof Element) {
-      node.isVoid = getHtmlTagDefinition(node.name).isVoid;
+      node.tagDefinition = getHtmlTagDefinition(node.name);
     }
   };
 
@@ -118,7 +118,7 @@ function ngHtmlParser(input, canSelfClose) {
         addType(node);
         restoreNameAndValue(node);
         normalizeName(node);
-        addIsVoid(node);
+        addTagDefinition(node);
         fixSourceSpan(node);
       }
     }(),
diff --git a/src/language-html/preprocess.js b/src/language-html/preprocess.js
index 5a86ffbc1e8c..140cd365a5b1 100644
--- a/src/language-html/preprocess.js
+++ b/src/language-html/preprocess.js
@@ -1,13 +1,14 @@
 "use strict";
 
 const {
+  canHaveInterpolation,
   getNodeCssStyleDisplay,
-  getNodeCssStyleWhiteSpace,
   getPrevNode,
   isDanglingSpaceSensitiveNode,
+  isIndentationSensitiveNode,
   isLeadingSpaceSensitiveNode,
-  isScriptLikeTag,
   isTrailingSpaceSensitiveNode,
+  isWhitespaceSensitiveNode,
   mapNode
 } = require("./utils");
 
@@ -80,7 +81,7 @@ function extractInterpolation(ast, options) {
 
   const interpolationRegex = /\{\{([\s\S]+?)\}\}/g;
   return mapNode(ast, node => {
-    if (!node.children || isScriptLikeTag(node)) {
+    if (!canHaveInterpolation(node)) {
       return node;
     }
 
@@ -145,7 +146,9 @@ function addIsSelfClosing(ast /*, options */) {
     if (
       !node.children ||
       (node.type === "element" &&
-        (node.isVoid || node.startSourceSpan === node.endSourceSpan))
+        (node.tagDefinition.isVoid ||
+          // self-closing
+          node.startSourceSpan === node.endSourceSpan))
     ) {
       return Object.assign({}, node, { isSelfClosing: true });
     }
@@ -157,7 +160,7 @@ function addIsSelfClosing(ast /*, options */) {
  * - add `hasLeadingSpaces` field
  * - add `hasTrailingSpaces` field
  * - add `hasDanglingSpaces` field for parent nodes
- * - add `isWhiteSpaceSensitive`, `isIndentationSensitive` field for text nodes
+ * - add `isWhitespaceSensitive`, `isIndentationSensitive` field for text nodes
  * - remove insensitive whitespaces
  */
 function extractWhitespaces(ast /*, options*/) {
@@ -179,9 +182,8 @@ function extractWhitespaces(ast /*, options*/) {
       });
     }
 
-    const cssStyleWhiteSpace = getNodeCssStyleWhiteSpace(node);
-    const isCssStyleWhiteSpacePre = cssStyleWhiteSpace.startsWith("pre");
-    const isScriptLike = isScriptLikeTag(node);
+    const isWhitespaceSensitive = isWhitespaceSensitiveNode(node);
+    const isIndentationSensitive = isIndentationSensitiveNode(node);
 
     return Object.assign({}, node, {
       children: node.children
@@ -191,15 +193,11 @@ function extractWhitespaces(ast /*, options*/) {
             return newChildren.concat(child);
           }
 
-          if (
-            isCssStyleWhiteSpacePre ||
-            isScriptLike ||
-            node.type === "interpolation"
-          ) {
+          if (isWhitespaceSensitive) {
             return newChildren.concat(
               Object.assign({}, child, {
-                isWhiteSpaceSensitive: true,
-                isIndentationSensitive: isCssStyleWhiteSpacePre
+                isWhitespaceSensitive,
+                isIndentationSensitive
               })
             );
           }
diff --git a/src/language-html/printer-html.js b/src/language-html/printer-html.js
index a38658364ac0..5e86423f17e2 100644
--- a/src/language-html/printer-html.js
+++ b/src/language-html/printer-html.js
@@ -159,7 +159,7 @@ function genericPrint(path, options, print) {
                     : indent)(
                     concat([
                       node.firstChild.type === "text" &&
-                      node.firstChild.isWhiteSpaceSensitive &&
+                      node.firstChild.isWhitespaceSensitive &&
                       node.firstChild.isIndentationSensitive
                         ? literalline
                         : node.firstChild.hasLeadingSpaces &&
@@ -689,7 +689,7 @@ function printClosingTagEndMarker(node) {
 }
 
 function getTextValueParts(node, value = node.value) {
-  return node.isWhiteSpaceSensitive
+  return node.isWhitespaceSensitive
     ? node.isIndentationSensitive
       ? replaceNewlines(value.replace(/^\s*?\n|\n\s*?$/g, ""), literalline)
       : replaceNewlines(
diff --git a/src/language-html/utils.js b/src/language-html/utils.js
index 3d429ad44116..c72710244abf 100644
--- a/src/language-html/utils.js
+++ b/src/language-html/utils.js
@@ -90,6 +90,22 @@ function isFrontMatterNode(node) {
   return node.type === "yaml" || node.type === "toml";
 }
 
+function canHaveInterpolation(node) {
+  return node.children && !isScriptLikeTag(node);
+}
+
+function isWhitespaceSensitiveNode(node) {
+  return (
+    isScriptLikeTag(node) ||
+    node.type === "interpolation" ||
+    isIndentationSensitiveNode(node)
+  );
+}
+
+function isIndentationSensitiveNode(node) {
+  return getNodeCssStyleWhiteSpace(node).startsWith("pre");
+}
+
 function isLeadingSpaceSensitiveNode(node, { prev, parent }) {
   if (isFrontMatterNode(node)) {
     return false;
@@ -201,7 +217,7 @@ function forceBreakContent(node) {
     forceBreakChildren(node) ||
     (isElement(node) &&
       node.children.length !== 0 &&
-      (["body", "template"].indexOf(node.name) !== -1 ||
+      (["body", "template", "script", "style"].indexOf(node.name) !== -1 ||
         node.children.some(child => hasNonTextChild(child))))
   );
 }
@@ -211,9 +227,7 @@ function forceBreakChildren(node) {
   return (
     isElement(node) &&
     node.children.length !== 0 &&
-    (["html", "head", "ul", "ol", "select", "script", "style"].indexOf(
-      node.name
-    ) !== -1 ||
+    (["html", "head", "ul", "ol", "select"].indexOf(node.name) !== -1 ||
       (node.cssDisplay.startsWith("table") && node.cssDisplay !== "table-cell"))
   );
 }
@@ -308,7 +322,7 @@ function isBlockLikeCssDisplay(cssDisplay) {
 }
 
 function isPreLikeNode(node) {
-  return ["pre", "pre-wrap"].indexOf(getNodeCssStyleWhiteSpace(node)) !== -1;
+  return getNodeCssStyleWhiteSpace(node).startsWith("pre");
 }
 
 function getNodeCssStyleDisplay(node, prevNode, options) {
@@ -484,6 +498,7 @@ function identity(x) {
 module.exports = {
   HTML_ELEMENT_ATTRIBUTES,
   HTML_TAGS,
+  canHaveInterpolation,
   dedentString,
   forceBreakChildren,
   forceBreakContent,
@@ -498,9 +513,11 @@ module.exports = {
   inferScriptParser,
   isDanglingSpaceSensitiveNode,
   isFrontMatterNode,
+  isIndentationSensitiveNode,
   isLeadingSpaceSensitiveNode,
   isScriptLikeTag,
   isTrailingSpaceSensitiveNode,
+  isWhitespaceSensitiveNode,
   mapNode,
   normalizeParts,
   preferHardlineAsLeadingSpaces,

From 09744aaa10126b2faf9605a1978bf6df610728c5 Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Thu, 25 Oct 2018 10:33:41 +0800
Subject: [PATCH 101/177] test: add tests

---
 .../__snapshots__/jsfmt.spec.js.snap          | 40 +++++++++++++++++++
 tests/html_tags/textarea.html                 |  2 +
 2 files changed, 42 insertions(+)

diff --git a/tests/html_tags/__snapshots__/jsfmt.spec.js.snap b/tests/html_tags/__snapshots__/jsfmt.spec.js.snap
index fa7cb1f09e3e..3486b0a24d90 100644
--- a/tests/html_tags/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_tags/__snapshots__/jsfmt.spec.js.snap
@@ -2736,6 +2736,8 @@ exports[`textarea.html - html-verify 1`] = `
   </div>
 </div>
 <textarea></textarea>
+
+<div><textarea>lorem ipsum</textarea></div>
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 <div>
   <div>
@@ -2766,6 +2768,12 @@ exports[`textarea.html - html-verify 1`] = `
 </div>
 <textarea></textarea>
 
+<div>
+  <textarea>
+lorem ipsum
+  </textarea>
+</div>
+
 `;
 
 exports[`textarea.html - html-verify 2`] = `
@@ -2797,6 +2805,8 @@ exports[`textarea.html - html-verify 2`] = `
   </div>
 </div>
 <textarea></textarea>
+
+<div><textarea>lorem ipsum</textarea></div>
 ~
 <div>
   <div>
@@ -2831,6 +2841,12 @@ exports[`textarea.html - html-verify 2`] = `
 </div>
 <textarea></textarea>
 
+<div>
+  <textarea>
+lorem ipsum
+  </textarea>
+</div>
+
 `;
 
 exports[`textarea.html - html-verify 3`] = `
@@ -2862,6 +2878,8 @@ exports[`textarea.html - html-verify 3`] = `
   </div>
 </div>
 <textarea></textarea>
+
+<div><textarea>lorem ipsum</textarea></div>
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 <div>
   <div>
@@ -2892,6 +2910,12 @@ exports[`textarea.html - html-verify 3`] = `
 </div>
 <textarea></textarea>
 
+<div>
+  <textarea>
+lorem ipsum
+  </textarea>
+</div>
+
 `;
 
 exports[`textarea.html - html-verify 4`] = `
@@ -2923,6 +2947,8 @@ exports[`textarea.html - html-verify 4`] = `
   </div>
 </div>
 <textarea></textarea>
+
+<div><textarea>lorem ipsum</textarea></div>
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 <div>
   <div>
@@ -2953,6 +2979,12 @@ exports[`textarea.html - html-verify 4`] = `
 </div>
 <textarea></textarea>
 
+<div
+  ><textarea>
+lorem ipsum
+  </textarea></div
+>
+
 `;
 
 exports[`textarea.html - html-verify 5`] = `
@@ -2984,6 +3016,8 @@ exports[`textarea.html - html-verify 5`] = `
   </div>
 </div>
 <textarea></textarea>
+
+<div><textarea>lorem ipsum</textarea></div>
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 <div>
   <div>
@@ -3014,6 +3048,12 @@ exports[`textarea.html - html-verify 5`] = `
 </div>
 <textarea></textarea>
 
+<div>
+  <textarea>
+lorem ipsum
+  </textarea>
+</div>
+
 `;
 
 exports[`unsupported.html - html-verify 1`] = `
diff --git a/tests/html_tags/textarea.html b/tests/html_tags/textarea.html
index 3543920e9fad..11c5e41144da 100644
--- a/tests/html_tags/textarea.html
+++ b/tests/html_tags/textarea.html
@@ -26,3 +26,5 @@
   </div>
 </div>
 <textarea></textarea>
+
+<div><textarea>lorem ipsum</textarea></div>

From 221aa1cb0eb1ca4606fc82ea95ab6c1ea8739d3d Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Thu, 25 Oct 2018 11:24:48 +0800
Subject: [PATCH 102/177] fix: print pre-like tags correctly

---
 src/language-html/preprocess.js               | 25 +++++++
 src/language-html/printer-html.js             | 31 +++++++-
 src/language-html/utils.js                    | 34 ++++++++-
 .../__snapshots__/jsfmt.spec.js.snap          | 73 +++++--------------
 4 files changed, 103 insertions(+), 60 deletions(-)

diff --git a/src/language-html/preprocess.js b/src/language-html/preprocess.js
index 140cd365a5b1..8585e14f6e53 100644
--- a/src/language-html/preprocess.js
+++ b/src/language-html/preprocess.js
@@ -13,6 +13,7 @@ const {
 } = require("./utils");
 
 const PREPROCESS_PIPELINE = [
+  removeIgnorableFirstLf,
   mergeCdataIntoText,
   extractInterpolation,
   addIsSelfClosing,
@@ -29,6 +30,30 @@ function preprocess(ast, options) {
   return ast;
 }
 
+function removeIgnorableFirstLf(ast /*, options */) {
+  return mapNode(ast, node => {
+    if (
+      node.type === "element" &&
+      node.tagDefinition.ignoreFirstLf &&
+      node.children.length !== 0 &&
+      node.children[0].type === "text" &&
+      node.children[0].value[0] === "\n"
+    ) {
+      const text = node.children[0];
+      return Object.assign({}, node, {
+        children:
+          text.value.length === 1
+            ? node.children.slice(1)
+            : [].concat(
+                Object.assign({}, text, { value: text.value.slice(1) }),
+                node.children.slice(1)
+              )
+      });
+    }
+    return node;
+  });
+}
+
 function mergeCdataIntoText(ast /*, options */) {
   return mapNode(ast, node => {
     if (node.children && node.children.some(child => child.type === "cdata")) {
diff --git a/src/language-html/printer-html.js b/src/language-html/printer-html.js
index 5e86423f17e2..d18f90b991c0 100644
--- a/src/language-html/printer-html.js
+++ b/src/language-html/printer-html.js
@@ -19,6 +19,7 @@ const {
   softline
 } = builders;
 const {
+  countParents,
   dedentString,
   forceBreakChildren,
   forceBreakContent,
@@ -28,6 +29,8 @@ const {
   hasPrettierIgnore,
   identity,
   inferScriptParser,
+  isElement,
+  isPreLikeNode,
   isScriptLikeTag,
   normalizeParts,
   preferHardlineAsLeadingSpaces,
@@ -161,7 +164,9 @@ function genericPrint(path, options, print) {
                       node.firstChild.type === "text" &&
                       node.firstChild.isWhitespaceSensitive &&
                       node.firstChild.isIndentationSensitive
-                        ? literalline
+                        ? node.firstChild.value.indexOf("\n") === -1
+                          ? ""
+                          : literalline
                         : node.firstChild.hasLeadingSpaces &&
                           node.firstChild.isLeadingSpaceSensitive
                           ? line
@@ -179,7 +184,27 @@ function genericPrint(path, options, print) {
                     : node.lastChild.hasTrailingSpaces &&
                       node.lastChild.isTrailingSpaceSensitive
                       ? line
-                      : softline
+                      : isElement(node) &&
+                        isPreLikeNode(node) &&
+                        node.lastChild.type === "text" &&
+                        (node.lastChild.value.indexOf("\n") === -1 ||
+                          new RegExp(
+                            `\\n\\s{${options.tabWidth *
+                              countParents(
+                                path,
+                                n => n.parent && n.parent.type !== "root"
+                              )}}$`
+                          ).test(node.lastChild.value))
+                        ? /**
+                           *     <div>
+                           *       <pre>
+                           *         something
+                           *       </pre>
+                           *            ~
+                           *     </div>
+                           */
+                          ""
+                        : softline
                 ])
           ])
         ),
@@ -691,7 +716,7 @@ function printClosingTagEndMarker(node) {
 function getTextValueParts(node, value = node.value) {
   return node.isWhitespaceSensitive
     ? node.isIndentationSensitive
-      ? replaceNewlines(value.replace(/^\s*?\n|\n\s*?$/g, ""), literalline)
+      ? replaceNewlines(value, literalline)
       : replaceNewlines(
           dedentString(value.replace(/^\s*?\n|\n\s*?$/g, "")),
           hardline
diff --git a/src/language-html/utils.js b/src/language-html/utils.js
index c72710244abf..2aec387a51d0 100644
--- a/src/language-html/utils.js
+++ b/src/language-html/utils.js
@@ -115,6 +115,14 @@ function isLeadingSpaceSensitiveNode(node, { prev, parent }) {
     return false;
   }
 
+  if (!node.prev && isElement(parent) && parent.tagDefinition.ignoreFirstLf) {
+    return false;
+  }
+
+  if (isPreLikeNode(parent)) {
+    return true;
+  }
+
   if (
     !prev &&
     (parent.type === "root" ||
@@ -140,6 +148,10 @@ function isTrailingSpaceSensitiveNode(node, { next, parent }) {
     return false;
   }
 
+  if (isPreLikeNode(parent)) {
+    return true;
+  }
+
   if (
     !next &&
     (parent.type === "root" ||
@@ -325,12 +337,23 @@ function isPreLikeNode(node) {
   return getNodeCssStyleWhiteSpace(node).startsWith("pre");
 }
 
-function getNodeCssStyleDisplay(node, prevNode, options) {
-  if (isPreLikeNode(node)) {
-    // textarea-like
-    return "block";
+function countParents(path, predicate = () => true) {
+  let counter = 0;
+  for (let i = path.stack.length - 1; i >= 0; i--) {
+    const value = path.stack[i];
+    if (
+      value &&
+      typeof value === "object" &&
+      !Array.isArray(value) &&
+      predicate(value)
+    ) {
+      counter++;
+    }
   }
+  return counter;
+}
 
+function getNodeCssStyleDisplay(node, prevNode, options) {
   if (prevNode && prevNode.type === "comment") {
     // <!-- display: block -->
     const match = prevNode.value.match(/^\s*display:\s*([a-z]+)\s*$/);
@@ -499,6 +522,7 @@ module.exports = {
   HTML_ELEMENT_ATTRIBUTES,
   HTML_TAGS,
   canHaveInterpolation,
+  countParents,
   dedentString,
   forceBreakChildren,
   forceBreakContent,
@@ -512,9 +536,11 @@ module.exports = {
   identity,
   inferScriptParser,
   isDanglingSpaceSensitiveNode,
+  isElement,
   isFrontMatterNode,
   isIndentationSensitiveNode,
   isLeadingSpaceSensitiveNode,
+  isPreLikeNode,
   isScriptLikeTag,
   isTrailingSpaceSensitiveNode,
   isWhitespaceSensitiveNode,
diff --git a/tests/html_tags/__snapshots__/jsfmt.spec.js.snap b/tests/html_tags/__snapshots__/jsfmt.spec.js.snap
index 3486b0a24d90..bb54a039d3fa 100644
--- a/tests/html_tags/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_tags/__snapshots__/jsfmt.spec.js.snap
@@ -638,19 +638,16 @@ ___________________________
    both             spaces and
 
    line breaks
+
 </pre>
-<pre>
-     Foo     Bar
-</pre>
+<pre>     Foo     Bar     </pre>
 <pre>
      Foo     Bar
 </pre>
 <pre>
 Foo     Bar
 </pre>
-<pre>
-     Foo     Bar
-</pre>
+<pre>     Foo     Bar</pre>
 <figure role="img" aria-labelledby="cow-caption">
   <pre>
 ___________________________
@@ -810,19 +807,16 @@ ___________________________
    both             spaces and
 
    line breaks
+
 </pre>
-<pre>
-     Foo     Bar
-</pre>
+<pre>     Foo     Bar     </pre>
 <pre>
      Foo     Bar
 </pre>
 <pre>
 Foo     Bar
 </pre>
-<pre>
-     Foo     Bar
-</pre>
+<pre>     Foo     Bar</pre>
 <figure
   role="img"
   aria-labelledby="cow-caption"
@@ -1002,19 +996,16 @@ ___________________________
    both             spaces and
 
    line breaks
+
 </pre>
-<pre>
-     Foo     Bar
-</pre>
+<pre>     Foo     Bar     </pre>
 <pre>
      Foo     Bar
 </pre>
 <pre>
 Foo     Bar
 </pre>
-<pre>
-     Foo     Bar
-</pre>
+<pre>     Foo     Bar</pre>
 <figure role="img" aria-labelledby="cow-caption">
   <pre>
 ___________________________
@@ -1164,19 +1155,16 @@ ___________________________
    both             spaces and
 
    line breaks
+
 </pre>
-<pre>
-     Foo     Bar
-</pre>
+<pre>     Foo     Bar     </pre>
 <pre>
      Foo     Bar
 </pre>
 <pre>
 Foo     Bar
 </pre>
-<pre>
-     Foo     Bar
-</pre>
+<pre>     Foo     Bar</pre>
 <figure role="img" aria-labelledby="cow-caption">
   <pre>
 ___________________________
@@ -1336,19 +1324,16 @@ ___________________________
    both             spaces and
 
    line breaks
+
 </pre>
-<pre>
-     Foo     Bar
-</pre>
+<pre>     Foo     Bar     </pre>
 <pre>
      Foo     Bar
 </pre>
 <pre>
 Foo     Bar
 </pre>
-<pre>
-     Foo     Bar
-</pre>
+<pre>     Foo     Bar</pre>
 <figure role="img" aria-labelledby="cow-caption">
   <pre>
 ___________________________
@@ -2768,11 +2753,7 @@ exports[`textarea.html - html-verify 1`] = `
 </div>
 <textarea></textarea>
 
-<div>
-  <textarea>
-lorem ipsum
-  </textarea>
-</div>
+<div><textarea>lorem ipsum</textarea></div>
 
 `;
 
@@ -2842,9 +2823,7 @@ exports[`textarea.html - html-verify 2`] = `
 <textarea></textarea>
 
 <div>
-  <textarea>
-lorem ipsum
-  </textarea>
+  <textarea>lorem ipsum</textarea>
 </div>
 
 `;
@@ -2910,11 +2889,7 @@ exports[`textarea.html - html-verify 3`] = `
 </div>
 <textarea></textarea>
 
-<div>
-  <textarea>
-lorem ipsum
-  </textarea>
-</div>
+<div><textarea>lorem ipsum</textarea></div>
 
 `;
 
@@ -2979,11 +2954,7 @@ exports[`textarea.html - html-verify 4`] = `
 </div>
 <textarea></textarea>
 
-<div
-  ><textarea>
-lorem ipsum
-  </textarea></div
->
+<div><textarea>lorem ipsum</textarea></div>
 
 `;
 
@@ -3048,11 +3019,7 @@ exports[`textarea.html - html-verify 5`] = `
 </div>
 <textarea></textarea>
 
-<div>
-  <textarea>
-lorem ipsum
-  </textarea>
-</div>
+<div><textarea>lorem ipsum</textarea></div>
 
 `;
 

From ab96b2e6a87752ec81b6f734def205787a88a4e2 Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Thu, 25 Oct 2018 22:06:24 +0800
Subject: [PATCH 103/177] feat(angular): add surrounding spaces for `=` in
 NGMicrosyntaxLet

---
 src/language-js/printer-estree.js                  |  2 +-
 .../html_angular/__snapshots__/jsfmt.spec.js.snap  | 14 +++++++++-----
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/language-js/printer-estree.js b/src/language-js/printer-estree.js
index 8ad1dd43c7a2..82ae349178db 100644
--- a/src/language-js/printer-estree.js
+++ b/src/language-js/printer-estree.js
@@ -3443,7 +3443,7 @@ function printPathNoParens(path, options, print, args) {
       return concat([
         "let ",
         path.call(print, "key"),
-        n.value === null ? "" : concat(["=", path.call(print, "value")])
+        n.value === null ? "" : concat([" = ", path.call(print, "value")])
       ]);
     case "NGMicrosyntaxAs":
       return concat([
diff --git a/tests/html_angular/__snapshots__/jsfmt.spec.js.snap b/tests/html_angular/__snapshots__/jsfmt.spec.js.snap
index 3d4957828dac..61bf6e80f4ae 100644
--- a/tests/html_angular/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_angular/__snapshots__/jsfmt.spec.js.snap
@@ -102,16 +102,16 @@ exports[`attributes.component.html - angular-verify 1`] = `
   *ngFor="let hero of heroes"
   *ngFor="
     let hero of [1, 2, 3, 666666666666666666666666666666666666];
-    let i=index
+    let i = index
   "
   *ngFor="let hero of heroes; trackBy: trackByHeroes"
   *ngFor="let item of items; index as i; trackBy: trackByFn"
-  *ngFor="let hero of heroes; let i=index"
+  *ngFor="let hero of heroes; let i = index"
   *ngFor="let hero of heroes; value: myValue"
   *ngIf="condition; then: thenBlock; else: elseBlock"
   *ngIf="condition as value; else: elseBlock"
   *directive="let hero"
-  *directive="let hero=hello"
+  *directive="let hero = hello"
   *directive="let hero of heroes"
   *directive="let hero of heroes"
   *directive="a"
@@ -1402,13 +1402,17 @@ without NgModel <br />
 <h4 id="ngFor-index">*ngFor with index</h4>
 <p>with <i>semi-colon</i> separator</p>
 <div class="box">
-  <div *ngFor="let hero of heroes; let i=index">{{i + 1}} - {{hero.name}}</div>
+  <div *ngFor="let hero of heroes; let i = index">
+    {{i + 1}} - {{hero.name}}
+  </div>
 </div>
 
 <p>with <i>comma</i> separator</p>
 <div class="box">
   <!-- Ex: "1 - Hercules" -->
-  <div *ngFor="let hero of heroes; let i=index">{{i + 1}} - {{hero.name}}</div>
+  <div *ngFor="let hero of heroes; let i = index">
+    {{i + 1}} - {{hero.name}}
+  </div>
 </div>
 
 <a class="to-toc" href="#toc">top</a>

From 6e6fc984efa497b65638c1891da4c97f56f4fa1a Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Thu, 25 Oct 2018 22:17:48 +0800
Subject: [PATCH 104/177] test: add tests

---
 .../__snapshots__/jsfmt.spec.js.snap          | 1680 +++++++++++++++++
 tests/html_angular/attributes.component.html  |    3 +
 tests/html_angular/jsfmt.spec.js              |    1 +
 3 files changed, 1684 insertions(+)

diff --git a/tests/html_angular/__snapshots__/jsfmt.spec.js.snap b/tests/html_angular/__snapshots__/jsfmt.spec.js.snap
index 61bf6e80f4ae..fb08af7db4bf 100644
--- a/tests/html_angular/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_angular/__snapshots__/jsfmt.spec.js.snap
@@ -15,6 +15,9 @@ exports[`attributes.component.html - angular-verify 1`] = `
     [target]=" [ 1 ] "
     [target]=" { 'a' : 1 } "
     [target]=" { a : 1 } "
+    [target]=" { 
+      trailingComma : 'notAllowed'
+    }"
     [target]=" true "
     [target]=" undefined "
     [target]=" null "
@@ -75,6 +78,141 @@ exports[`attributes.component.html - angular-verify 1`] = `
   [target]="[1]"
   [target]="{ a: 1 }"
   [target]="{ a: 1 }"
+  [target]="{
+    trailingComma: 'notAllowed'
+  }"
+  [target]="true"
+  [target]="undefined"
+  [target]="null"
+  [target]="1"
+  [target]="1"
+  [target]="'hello'"
+  [target]="a(1, 2)"
+  [target]="a.b(1, 2)"
+  [target]="x!"
+  [target]="!x"
+  [target]="a"
+  [target]="a"
+  [target]="a // hello "
+  [target]="a.b"
+  [target]="javascript: 'hello world' "
+  [target]="a?.b()"
+  [target]="a?.b"
+  on-target="(a = 1)"
+  (target)="(a = 1)"
+  (target)="(a.b = 1)"
+  (target)="(a[b] = 1)"
+  (target)="a // hello "
+  (target)="a; b"
+  *ngIf="something ? true : false"
+  *ngFor="let hero of heroes"
+  *ngFor="
+    let hero of [1, 2, 3, 666666666666666666666666666666666666];
+    let i = index
+  "
+  *ngFor="let hero of heroes; trackBy: trackByHeroes"
+  *ngFor="let item of items; index as i; trackBy: trackByFn"
+  *ngFor="let hero of heroes; let i = index"
+  *ngFor="let hero of heroes; value: myValue"
+  *ngIf="condition; then: thenBlock; else: elseBlock"
+  *ngIf="condition as value; else: elseBlock"
+  *directive="let hero"
+  *directive="let hero = hello"
+  *directive="let hero of heroes"
+  *directive="let hero of heroes"
+  *directive="a"
+  *directive="a as b"
+  *directive="a; b"
+  *directive="a; b"
+  *directive="a; b: c"
+  *directive="a; b: c"
+  *directive="a; b: c as d"
+  *directive="a; b as c"
+></div>
+
+`;
+
+exports[`attributes.component.html - angular-verify 2`] = `
+<div
+    bindon-target=" a | b : c "
+    [(target)]=" a | b : c "
+    bind-target=" a | b : c "
+    [target]=" a | b : c "
+    [target]=" 0 - 1 "
+    [target]=" - 1 "
+    [target]=" a ? 1 : 2 "
+    [target]=" "
+    [target]=" a ( 1 ) ( 2 ) "
+    [target]=" a [ b ] "
+    [target]=" [ 1 ] "
+    [target]=" { 'a' : 1 } "
+    [target]=" { a : 1 } "
+    [target]=" { 
+      trailingComma : 'notAllowed'
+    }"
+    [target]=" true "
+    [target]=" undefined "
+    [target]=" null "
+    [target]=" ( 1 ) "
+    [target]=" 1 "
+    [target]="  'hello' "
+    [target]=" a ( 1 , 2 ) "
+    [target]=" a . b ( 1 , 2 ) "
+    [target]=" x ! "
+    [target]=" ! x "
+    [target]=" ( ( a ) ) "
+    [target]=" a "
+    [target]=" a // hello "
+    [target]=" a . b "
+    [target]=" javascript : 'hello world' "
+    [target]=" a ?. b ( ) "
+    [target]=" a ?. b "
+    on-target=" a = 1 "
+    (target)=" a = 1 "
+    (target)=" a . b = 1 "
+    (target)=" a [ b ] = 1 "
+    (target)=" a // hello "
+    (target)=" a ; b "
+    *ngIf=" something?true:false    "
+    *ngFor="  let     hero     of     heroes"
+    *ngFor="  let    hero     of[1,2,3,666666666666666666666666666666666666]; let i=index"
+    *ngFor="     let hero     of     heroes;     trackBy    :    trackByHeroes     "
+    *ngFor=" let     item   of   items   ;    index    as   i  ; trackBy  :     trackByFn"
+    *ngFor="  let    hero     of heroes; let i  =  index"
+    *ngFor="  let    hero     of heroes; value     myValue"
+    *ngIf=" condition  ;  then  thenBlock  else  elseBlock "
+    *ngIf=" condition  as  value  ;  else  elseBlock "
+    *directive=" let hero "
+    *directive=" let hero = hello "
+    *directive=" let hero of heroes "
+    *directive=" let hero ; of : heroes "
+    *directive=" a "
+    *directive=" a as b "
+    *directive=" a , b "
+    *directive=" a ; b "
+    *directive=" a ; b c "
+    *directive=" a ; b : c "
+    *directive=" a ; b : c as d "
+    *directive=" a ; b as c "
+></div>
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+<div
+  bindon-target="a | b:c"
+  [(target)]="a | b:c"
+  bind-target="a | b:c"
+  [target]="a | b:c"
+  [target]="0 - 1"
+  [target]="-1"
+  [target]="a ? 1 : 2"
+  [target]=""
+  [target]="a(1)(2)"
+  [target]="a[b]"
+  [target]="[1]"
+  [target]="{ a: 1 }"
+  [target]="{ a: 1 }"
+  [target]="{
+    trailingComma: 'notAllowed',
+  }"
   [target]="true"
   [target]="undefined"
   [target]="null"
@@ -181,6 +319,61 @@ exports[`interpolation.component.html - angular-verify 1`] = `
 
 `;
 
+exports[`interpolation.component.html - angular-verify 2`] = `
+<div>{{ a | b : c }}</div>
+<div>{{ 0 - 1 }}</div>
+<div>{{ - 1 }}</div>
+<div>{{ a ? 1 : 2 }}</div>
+<div>{{ a ( 1 ) ( 2 ) }}</div>
+<div>{{ a [ b ] }}</div>
+<div>{{ [ 1 ] }}</div>
+<div>{{ { 'a' : 1 } }}</div>
+<div>{{ { a : 1 } }}</div>
+<div>{{ true }}</div>
+<div>{{ undefined }}</div>
+<div>{{ null }}</div>
+<div>{{ ( 1 ) }}</div>
+<div>{{ 1 }}</div>
+<div>{{  'hello' }}</div>
+<div>{{ a ( 1 , 2 ) }}</div>
+<div>{{ a . b ( 1 , 2 ) }}</div>
+<div>{{ x ! }}</div>
+<div>{{ ! x }}</div>
+<div>{{ ( ( a ) ) }}</div>
+<div>{{ a }}</div>
+<div>{{ a // hello }}</div>
+<div>{{ a . b }}</div>
+<div>{{ a ?. b ( ) }}</div>
+<div>{{ a ?. b }}</div>
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+<div>{{a | b:c}}</div>
+<div>{{0 - 1}}</div>
+<div>{{-1}}</div>
+<div>{{a ? 1 : 2}}</div>
+<div>{{a(1)(2)}}</div>
+<div>{{a[b]}}</div>
+<div>{{[1]}}</div>
+<div>{{ { a: 1 } }}</div>
+<div>{{ { a: 1 } }}</div>
+<div>{{true}}</div>
+<div>{{undefined}}</div>
+<div>{{null}}</div>
+<div>{{1}}</div>
+<div>{{1}}</div>
+<div>{{"hello"}}</div>
+<div>{{a(1, 2)}}</div>
+<div>{{a.b(1, 2)}}</div>
+<div>{{x!}}</div>
+<div>{{!x}}</div>
+<div>{{a}}</div>
+<div>{{a}}</div>
+<div>{{a // hello }}</div>
+<div>{{a.b}}</div>
+<div>{{a?.b()}}</div>
+<div>{{a?.b}}</div>
+
+`;
+
 exports[`real-world.component.html - angular-verify 1`] = `
 <!-- copied from: https://stackblitz.com/angular/ymdjlgmlavo -->
 
@@ -1667,3 +1860,1490 @@ without NgModel <br />
 -->
 
 `;
+
+exports[`real-world.component.html - angular-verify 2`] = `
+<!-- copied from: https://stackblitz.com/angular/ymdjlgmlavo -->
+
+<a id="toc"></a>
+<h1>Template Syntax</h1>
+<a href="#interpolation">Interpolation</a><br>
+<a href="#expression-context">Expression context</a><br>
+<a href="#statement-context">Statement context</a><br>
+<a href="#mental-model">Mental Model</a><br>
+<a href="#buttons">Buttons</a><br>
+<a href="#prop-vs-attrib">Properties vs. Attributes</a><br>
+<br>
+<a href="#property-binding">Property Binding</a><br>
+<div style="margin-left:8px">
+  <a href="#attribute-binding">Attribute Binding</a><br>
+  <a href="#class-binding">Class Binding</a><br>
+  <a href="#style-binding">Style Binding</a><br>
+</div>
+<br>
+<a href="#event-binding">Event Binding</a><br>
+<a href="#two-way">Two-way Binding</a><br>
+<br>
+<div>Directives</div>
+<div style="margin-left:8px">
+  <a href="#ngModel">NgModel (two-way) Binding</a><br>
+  <a href="#ngClass">NgClass Binding</a><br>
+  <a href="#ngStyle">NgStyle Binding</a><br>
+  <a href="#ngIf">NgIf</a><br>
+  <a href="#ngFor">NgFor</a><br>
+  <div style="margin-left:8px">
+    <a href="#ngFor-index">NgFor with index</a><br>
+    <a href="#ngFor-trackBy">NgFor with trackBy</a><br>
+  </div>
+  <a href="#ngSwitch">NgSwitch</a><br>
+</div>
+<br>
+<a href="#ref-vars">Template reference variables</a><br>
+<a href="#inputs-and-outputs">Inputs and outputs</a><br>
+<a href="#pipes">Pipes</a><br>
+<a href="#safe-navigation-operator">Safe navigation operator <i>?.</i></a><br>
+<a href="#non-null-assertion-operator">Non-null assertion operator <i>!.</i></a><br>
+<a href="#enums">Enums</a><br>
+
+<!-- Interpolation and expressions -->
+<hr><h2 id="interpolation">Interpolation</h2>
+
+<p>My current hero is {{currentHero.name}}</p>
+
+<h3>
+  {{title}}
+  <img src="{{heroImageUrl}}" style="height:30px">
+</h3>
+
+<!-- "The sum of 1 + 1 is 2" -->
+<p>The sum of 1 + 1 is {{1 + 1}}</p>
+
+<!-- "The sum of 1 + 1 is not 4" -->
+<p>The sum of 1 + 1 is not {{1 + 1 + getVal()}}</p>
+
+<a class="to-toc" href="#toc">top</a>
+
+<hr><h2 id="expression-context">Expression context</h2>
+
+<p>Component expression context (&#123;&#123;title&#125;&#125;, [hidden]="isUnchanged")</p>
+<div class="context">
+  {{title}}
+  <span [hidden]="isUnchanged">changed</span>
+</div>
+
+
+<p>Template input variable expression context (let hero)</p>
+<!-- template hides the following; plenty of examples later -->
+<ng-template>
+  <div *ngFor="let hero of heroes">{{hero.name}}</div>
+</ng-template>
+
+<p>Template reference variable expression context (#heroInput)</p>
+<div (keyup)="0" class="context">
+  Type something:
+  <input #heroInput> {{heroInput.value}}
+</div>
+
+<a class="to-toc" href="#toc">top</a>
+
+<hr><h2 id="statement-context">Statement context</h2>
+
+<p>Component statement context ( (click)="onSave() )
+<div class="context">
+  <button (click)="deleteHero()">Delete hero</button>
+</div>
+
+<p>Template $event statement context</p>
+<div class="context">
+  <button (click)="onSave($event)">Save</button>
+</div>
+
+<p>Template input variable statement context (let hero)</p>
+<!-- template hides the following; plenty of examples later -->
+<div class="context">
+  <button *ngFor="let hero of heroes" (click)="deleteHero(hero)">{{hero.name}}</button>
+</div>
+
+<p>Template reference variable statement context (#heroForm)</p>
+<div class="context">
+  <form #heroForm (ngSubmit)="onSubmit(heroForm)"> ... </form>
+</div>
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- New Mental Model -->
+<hr><h2 id="mental-model">New Mental Model</h2>
+
+<!--<img src="http://www.wpclipart.com/cartoon/people/hero/hero_silhoutte_T.png">-->
+<!-- Public Domain terms of use: http://www.wpclipart.com/terms.html -->
+<div class="special">Mental Model</div>
+<img src="assets/images/hero.png">
+<button disabled>Save</button>
+<br><br>
+
+<div>
+  <!-- Normal HTML -->
+  <div class="special">Mental Model</div>
+  <!-- Wow! A new element! -->
+  <app-hero-detail></app-hero-detail>
+</div>
+<br><br>
+
+<div>
+  <!-- Bind button disabled state to \`isUnchanged\` property -->
+  <button [disabled]="isUnchanged">Save</button>
+</div>
+<br><br>
+
+<div>
+  <img [src]="heroImageUrl">
+  <app-hero-detail [hero]="currentHero"></app-hero-detail>
+  <div [ngClass]="{'special': isSpecial}"></div>
+</div>
+<br><br>
+
+<button (click)="onSave()">Save</button>
+<app-hero-detail (deleteRequest)="deleteHero()"></app-hero-detail>
+<div (myClick)="clicked=$event" clickable>click me</div>
+{{clicked}}
+<br><br>
+
+<div>
+  Hero Name:
+  <input [(ngModel)]="name">
+  {{name}}
+</div>
+<br><br>
+
+<button [attr.aria-label]="help">help</button>
+<br><br>
+
+<div [class.special]="isSpecial">Special</div>
+<br><br>
+
+<button [style.color]="isSpecial ? 'red' : 'green'">
+button</button>
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- property vs. attribute -->
+<hr><h2 id="prop-vs-attrib">Property vs. Attribute (img examples)</h2>
+<!-- examine the following <img> tag in the browser tools -->
+<img src="images/ng-logo.png"
+    [src]="heroImageUrl">
+
+<br><br>
+
+<img [src]="iconUrl"/>
+<img bind-src="heroImageUrl"/>
+<img [attr.src]="villainImageUrl"/>
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- buttons -->
+<hr><h2 id="buttons">Buttons</h2>
+
+<button>Enabled (but does nothing)</button>
+<button disabled>Disabled</button>
+<button disabled=false>Still disabled</button>
+<br><br>
+<button disabled>disabled by attribute</button>
+<button [disabled]="isUnchanged">disabled by property binding</button>
+<br><br>
+<button bind-disabled="isUnchanged" on-click="onSave($event)">Disabled Cancel</button>
+<button [disabled]="!canSave" (click)="onSave($event)">Enabled Save</button>
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- property binding -->
+<hr><h2 id="property-binding">Property Binding</h2>
+
+<img [src]="heroImageUrl">
+<button [disabled]="isUnchanged">Cancel is disabled</button>
+<div [ngClass]="classes">[ngClass] binding to the classes property</div>
+<app-hero-detail [hero]="currentHero"></app-hero-detail>
+<img bind-src="heroImageUrl">
+
+<!-- ERROR: HeroDetailComponent.hero expects a
+     Hero object, not the string "currentHero" -->
+<div *ngIf="false">
+  <app-hero-detail hero="currentHero"></app-hero-detail>
+</div>
+<app-hero-detail prefix="You are my" [hero]="currentHero"></app-hero-detail>
+
+<p><img src="{{heroImageUrl}}"> is the <i>interpolated</i> image.</p>
+<p><img [src]="heroImageUrl"> is the <i>property bound</i> image.</p>
+
+<p><span>"{{title}}" is the <i>interpolated</i> title.</span></p>
+<p>"<span [innerHTML]="title"></span>" is the <i>property bound</i> title.</p>
+
+<!--
+  Angular generates warnings for these two lines as it sanitizes them
+  WARNING: sanitizing HTML stripped some content (see http://g.co/ng/security#xss).
+ -->
+<p><span>"{{evilTitle}}" is the <i>interpolated</i> evil title.</span></p>
+<p>"<span [innerHTML]="evilTitle"></span>" is the <i>property bound</i> evil title.</p>
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- attribute binding -->
+<hr><h2 id="attribute-binding">Attribute Binding</h2>
+
+<!--  create and set a colspan attribute -->
+<table border=1>
+  <!--  expression calculates colspan=2 -->
+  <tr><td [attr.colspan]="1 + 1">One-Two</td></tr>
+
+  <!-- ERROR: There is no \`colspan\` property to set!
+    <tr><td colspan="{{1 + 1}}">Three-Four</td></tr>
+  -->
+
+  <tr><td>Five</td><td>Six</td></tr>
+</table>
+
+<br>
+<!-- create and set an aria attribute for assistive technology -->
+<button [attr.aria-label]="actionName">{{actionName}} with Aria</button>
+<br><br>
+
+<!-- The following effects are not discussed in the chapter -->
+<div>
+  <!-- any use of [attr.disabled] creates the disabled attribute -->
+  <button [attr.disabled]="isUnchanged">Disabled</button>
+
+  <button [attr.disabled]="!isUnchanged">Disabled as well</button>
+
+  <!-- we'd have to remove it with property binding -->
+  <button disabled [disabled]="false">Enabled (but inert)</button>
+</div>
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- class binding -->
+<hr><h2 id="class-binding">Class Binding</h2>
+
+<!-- standard class attribute setting  -->
+<div class="bad curly special">Bad curly special</div>
+
+<!-- reset/override all class names with a binding  -->
+<div class="bad curly special"
+     [class]="badCurly">Bad curly</div>
+
+<!-- toggle the "special" class on/off with a property -->
+<div [class.special]="isSpecial">The class binding is special</div>
+
+<!-- binding to \`class.special\` trumps the class attribute -->
+<div class="special"
+     [class.special]="!isSpecial">This one is not so special</div>
+
+<div bind-class.special="isSpecial">This class binding is special too</div>
+
+<a class="to-toc" href="#toc">top</a>
+
+<!--style binding -->
+<hr><h2 id="style-binding">Style Binding</h2>
+
+<button [style.color]="isSpecial ? 'red': 'green'">Red</button>
+<button [style.background-color]="canSave ? 'cyan': 'grey'" >Save</button>
+
+<button [style.font-size.em]="isSpecial ? 3 : 1" >Big</button>
+<button [style.font-size.%]="!isSpecial ? 150 : 50" >Small</button>
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- event binding -->
+<hr><h2 id="event-binding">Event Binding</h2>
+
+<button (click)="onSave()">Save</button>
+
+<button on-click="onSave()">On Save</button>
+
+<div>
+<!-- \`myClick\` is an event on the custom \`ClickDirective\` -->
+<div (myClick)="clickMessage=$event" clickable>click with myClick</div>
+{{clickMessage}}
+</div>
+
+
+<!-- binding to a nested component -->
+<app-hero-detail (deleteRequest)="deleteHero($event)" [hero]="currentHero"></app-hero-detail>
+<br>
+
+<app-big-hero-detail
+    (deleteRequest)="deleteHero($event)"
+    [hero]="currentHero">
+</app-big-hero-detail>
+
+<div class="parent-div" (click)="onClickMe($event)" clickable>Click me
+  <div class="child-div">Click me too!</div>
+</div>
+
+<!-- Will save only once -->
+<div (click)="onSave()" clickable>
+  <button (click)="onSave($event)">Save, no propagation</button>
+</div>
+
+<!-- Will save twice -->
+<div (click)="onSave()" clickable>
+  <button (click)="onSave()">Save w/ propagation</button>
+</div>
+
+<a class="to-toc" href="#toc">top</a>
+
+<hr><h2 id="two-way">Two-way Binding</h2>
+<div id="two-way-1">
+  <app-sizer [(size)]="fontSizePx"></app-sizer>
+  <div [style.font-size.px]="fontSizePx">Resizable Text</div>
+  <label>FontSize (px): <input [(ngModel)]="fontSizePx"></label>
+</div>
+<br>
+<div id="two-way-2">
+  <h3>De-sugared two-way binding</h3>
+  <app-sizer [size]="fontSizePx" (sizeChange)="fontSizePx=$event"></app-sizer>
+</div>
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- Two way data binding unwound;
+    passing the changed display value to the event handler via \`$event\` -->
+<hr><h2 id="ngModel">NgModel (two-way) Binding</h2>
+
+<h3>Result: {{currentHero.name}}</h3>
+
+<input [value]="currentHero.name"
+       (input)="currentHero.name=$event.target.value" >
+without NgModel
+<br>
+<input [(ngModel)]="currentHero.name">
+[(ngModel)]
+<br>
+<input bindon-ngModel="currentHero.name">
+bindon-ngModel
+<br>
+<input
+  [ngModel]="currentHero.name"
+  (ngModelChange)="currentHero.name=$event">
+(ngModelChange)="...name=$event"
+<br>
+<input
+  [ngModel]="currentHero.name"
+  (ngModelChange)="setUppercaseName($event)">
+(ngModelChange)="setUppercaseName($event)"
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- NgClass binding -->
+<hr><h2 id="ngClass">NgClass Binding</h2>
+
+<p>currentClasses is {{currentClasses | json}}</p>
+<div [ngClass]="currentClasses">This div is initially saveable, unchanged, and special</div>
+
+<!-- not used in chapter -->
+<br>
+<label>saveable   <input type="checkbox" [(ngModel)]="canSave"></label> |
+<label>modified:  <input type="checkbox" [value]="!isUnchanged" (change)="isUnchanged=!isUnchanged"></label> |
+<label>special:   <input type="checkbox" [(ngModel)]="isSpecial"></label>
+<button (click)="setCurrentClasses()">Refresh currentClasses</button>
+<br><br>
+<div [ngClass]="currentClasses">
+  This div should be {{ canSave ? "": "not"}} saveable,
+                  {{ isUnchanged ? "unchanged" : "modified" }} and,
+                  {{ isSpecial ? "": "not"}} special after clicking "Refresh".</div>
+<br><br>
+
+<div [ngClass]="isSpecial ? 'special' : ''">This div is special</div>
+
+<div class="bad curly special">Bad curly special</div>
+<div [ngClass]="{'bad':false, 'curly':true, 'special':true}">Curly special</div>
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- NgStyle binding -->
+<hr><h2 id="ngStyle">NgStyle Binding</h2>
+
+<div [style.font-size]="isSpecial ? 'x-large' : 'smaller'" >
+  This div is x-large or smaller.
+</div>
+
+<h3>[ngStyle] binding to currentStyles - CSS property names</h3>
+<p>currentStyles is {{currentStyles | json}}</p>
+<div [ngStyle]="currentStyles">
+  This div is initially italic, normal weight, and extra large (24px).
+</div>
+
+<!-- not used in chapter -->
+<br>
+<label>italic: <input type="checkbox" [(ngModel)]="canSave"></label> |
+<label>normal: <input type="checkbox" [(ngModel)]="isUnchanged"></label> |
+<label>xlarge: <input type="checkbox" [(ngModel)]="isSpecial"></label>
+<button (click)="setCurrentStyles()">Refresh currentStyles</button>
+<br><br>
+<div [ngStyle]="currentStyles">
+  This div should be {{ canSave ? "italic": "plain"}},
+                  {{ isUnchanged ? "normal weight" : "bold" }} and,
+                  {{ isSpecial ? "extra large": "normal size"}} after clicking "Refresh".</div>
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- NgIf binding -->
+<hr><h2 id="ngIf">NgIf Binding</h2>
+
+<app-hero-detail *ngIf="isActive"></app-hero-detail>
+
+<div *ngIf="currentHero">Hello, {{currentHero.name}}</div>
+<div *ngIf="nullHero">Hello, {{nullHero.name}}</div>
+
+<!-- NgIf binding with template (no *) -->
+
+<ng-template [ngIf]="currentHero">Add {{currentHero.name}} with template</ng-template>
+
+<!-- Does not show because isActive is false! -->
+<div>Hero Detail removed from DOM (via template) because isActive is false</div>
+<ng-template [ngIf]="isActive">
+  <app-hero-detail></app-hero-detail>
+</ng-template>
+
+<!-- isSpecial is true -->
+<div [class.hidden]="!isSpecial">Show with class</div>
+<div [class.hidden]="isSpecial">Hide with class</div>
+
+<!-- HeroDetail is in the DOM but hidden -->
+<app-hero-detail [class.hidden]="isSpecial"></app-hero-detail>
+
+<div [style.display]="isSpecial ? 'block' : 'none'">Show with style</div>
+<div [style.display]="isSpecial ? 'none'  : 'block'">Hide with style</div>
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- NgFor binding -->
+<hr><h2 id="ngFor">NgFor Binding</h2>
+
+<div class="box">
+  <div *ngFor="let hero of heroes">{{hero.name}}</div>
+</div>
+<br>
+
+<div class="box">
+  <!-- *ngFor w/ hero-detail Component -->
+  <app-hero-detail *ngFor="let hero of heroes" [hero]="hero"></app-hero-detail>
+</div>
+
+<a class="to-toc" href="#toc">top</a>
+
+<h4 id="ngFor-index">*ngFor with index</h4>
+<p>with <i>semi-colon</i> separator</p>
+<div class="box">
+  <div *ngFor="let hero of heroes; let i=index">{{i + 1}} - {{hero.name}}</div>
+</div>
+
+<p>with <i>comma</i> separator</p>
+<div class="box">
+  <!-- Ex: "1 - Hercules" -->
+  <div *ngFor="let hero of heroes, let i=index">{{i + 1}} - {{hero.name}}</div>
+</div>
+
+<a class="to-toc" href="#toc">top</a>
+
+<h4 id="ngFor-trackBy">*ngFor trackBy</h4>
+<button (click)="resetHeroes()">Reset heroes</button>
+<button (click)="changeIds()">Change ids</button>
+<button (click)="clearTrackByCounts()">Clear counts</button>
+
+<p><i>without</i> trackBy</p>
+<div class="box">
+  <div #noTrackBy *ngFor="let hero of heroes">({{hero.id}}) {{hero.name}}</div>
+
+  <div id="noTrackByCnt" *ngIf="heroesNoTrackByCount" >
+    Hero DOM elements change #{{heroesNoTrackByCount}} without trackBy
+  </div>
+</div>
+
+<p>with trackBy</p>
+<div class="box">
+  <div #withTrackBy *ngFor="let hero of heroes; trackBy: trackByHeroes">({{hero.id}}) {{hero.name}}</div>
+
+  <div id="withTrackByCnt" *ngIf="heroesWithTrackByCount">
+    Hero DOM elements change #{{heroesWithTrackByCount}} with trackBy
+  </div>
+</div>
+
+<br><br><br>
+
+<p>with trackBy and <i>semi-colon</i> separator</p>
+<div class="box">
+  <div *ngFor="let hero of heroes; trackBy: trackByHeroes">
+    ({{hero.id}}) {{hero.name}}
+  </div>
+</div>
+
+<p>with trackBy and <i>comma</i> separator</p>
+<div class="box">
+  <div *ngFor="let hero of heroes, trackBy: trackByHeroes">({{hero.id}}) {{hero.name}}</div>
+</div>
+
+<p>with trackBy and <i>space</i> separator</p>
+<div class="box">
+  <div *ngFor="let hero of heroes trackBy: trackByHeroes">({{hero.id}}) {{hero.name}}</div>
+</div>
+
+<p>with <i>generic</i> trackById function</p>
+<div class="box">
+  <div *ngFor="let hero of heroes, trackBy: trackById">({{hero.id}}) {{hero.name}}</div>
+</div>
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- NgSwitch binding -->
+<hr><h2 id="ngSwitch">NgSwitch Binding</h2>
+
+<p>Pick your favorite hero</p>
+<div>
+  <label *ngFor="let h of heroes">
+    <input type="radio" name="heroes" [(ngModel)]="currentHero" [value]="h">{{h.name}}
+  </label>
+</div>
+
+<div [ngSwitch]="currentHero.emotion">
+  <app-happy-hero    *ngSwitchCase="'happy'"    [hero]="currentHero"></app-happy-hero>
+  <app-sad-hero      *ngSwitchCase="'sad'"      [hero]="currentHero"></app-sad-hero>
+  <app-confused-hero *ngSwitchCase="'confused'" [hero]="currentHero"></app-confused-hero>
+  <div *ngSwitchCase="'confused'">Are you as confused as {{currentHero.name}}?</div>
+  <app-unknown-hero  *ngSwitchDefault           [hero]="currentHero"></app-unknown-hero>
+</div>
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- template reference variable -->
+<hr><h2 id="ref-vars">Template reference variables</h2>
+
+<input #phone placeholder="phone number">
+
+<!-- lots of other elements -->
+
+<!-- phone refers to the input element; pass its \`value\` to an event handler -->
+<button (click)="callPhone(phone.value)">Call</button>
+
+<input ref-fax placeholder="fax number">
+<button (click)="callFax(fax.value)">Fax</button>
+
+<!-- btn refers to the button element; show its disabled state -->
+<button #btn disabled [innerHTML]="'disabled by attribute: '+btn.disabled"></button>
+
+<h4>Example Form</h4>
+<app-hero-form [hero]="currentHero"></app-hero-form>
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- inputs and output -->
+<hr><h2 id="inputs-and-outputs">Inputs and Outputs</h2>
+
+<img [src]="iconUrl"/>
+<button (click)="onSave()">Save</button>
+
+<app-hero-detail [hero]="currentHero" (deleteRequest)="deleteHero($event)">
+</app-hero-detail>
+
+<div (myClick)="clickMessage2=$event" clickable>myClick2</div>
+{{clickMessage2}}
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- Pipes -->
+<hr><h2 id="pipes">Pipes</h2>
+
+<div>Title through uppercase pipe: {{title | uppercase}}</div>
+
+<!-- Pipe chaining: convert title to uppercase, then to lowercase -->
+<div>
+  Title through a pipe chain:
+  {{title | uppercase | lowercase}}
+</div>
+
+<!-- pipe with configuration argument => "February 25, 1970" -->
+<div>Birthdate: {{currentHero?.birthdate | date:'longDate'}}</div>
+
+<div>{{currentHero | json}}</div>
+
+<div>Birthdate: {{(currentHero?.birthdate | date:'longDate') | uppercase}}</div>
+
+<div>
+  <!-- pipe price to USD and display the $ symbol -->
+  <label>Price: </label>{{product.price | currency:'USD':true}}
+</div>
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- Null values and the safe navigation operator -->
+<hr><h2 id="safe-navigation-operator">Safe navigation operator <i>?.</i></h2>
+
+<div>
+  The title is {{title}}
+</div>
+
+<div>
+  The current hero's name is {{currentHero?.name}}
+</div>
+
+<div>
+  The current hero's name is {{currentHero.name}}
+</div>
+
+
+<!--
+The null hero's name is {{nullHero.name}}
+
+See console log:
+  TypeError: Cannot read property 'name' of null in [null]
+-->
+
+<!--No hero, div not displayed, no error -->
+<div *ngIf="nullHero">The null hero's name is {{nullHero.name}}</div>
+
+<div>
+The null hero's name is {{nullHero && nullHero.name}}
+</div>
+
+<div>
+  <!-- No hero, no problem! -->
+  The null hero's name is {{nullHero?.name}}
+</div>
+
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- non-null assertion operator -->
+<hr><h2 id="non-null-assertion-operator">Non-null assertion operator <i>!.</i></h2>
+
+<div>
+  <!--No hero, no text -->
+  <div *ngIf="hero">
+    The hero's name is {{hero!.name}}
+  </div>
+</div>
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- non-null assertion operator -->
+<hr><h2 id="any-type-cast-function">$any type cast function <i>$any( )</i>.</h2>
+
+<div>
+  <!-- Accessing an undeclared member -->
+  <div>
+    The hero's marker is {{$any(hero).marker}}
+  </div>
+</div>
+
+<div>
+  <!-- Accessing an undeclared member -->
+  <div>
+    Undeclared members is {{$any(this).member}}
+  </div>
+</div>
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- TODO: discuss this in the Style binding section -->
+<!-- enums in bindings -->
+<hr><h2 id="enums">Enums in binding</h2>
+
+<p>
+  The name of the Color.Red enum is {{Color[Color.Red]}}.<br>
+  The current color is {{Color[color]}} and its number is {{color}}.<br>
+  <button [style.color]="Color[color]" (click)="colorToggle()">Enum Toggle</button>
+</p>
+
+<a class="to-toc" href="#toc">top</a>
+
+
+<!-- 
+Copyright 2017-2018 Google Inc. All Rights Reserved.
+Use of this source code is governed by an MIT-style license that
+can be found in the LICENSE file at http://angular.io/license
+-->
+
+<div id="heroForm">
+  <form (ngSubmit)="onSubmit(heroForm)" #heroForm="ngForm">
+    <div class="form-group">
+      <label for="name">Name
+        <input class="form-control" name="name" required [(ngModel)]="hero.name">
+      </label>
+    </div>
+    <button type="submit" [disabled]="!heroForm.form.valid">Submit</button>
+  </form>
+  <div [hidden]="!heroForm.form.valid">
+    {{submitMessage}}
+  </div>
+</div>
+
+
+<!-- 
+Copyright 2017-2018 Google Inc. All Rights Reserved.
+Use of this source code is governed by an MIT-style license that
+can be found in the LICENSE file at http://angular.io/license
+-->
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+<!-- copied from: https://stackblitz.com/angular/ymdjlgmlavo -->
+
+<a id="toc"></a>
+<h1>Template Syntax</h1>
+<a href="#interpolation">Interpolation</a><br />
+<a href="#expression-context">Expression context</a><br />
+<a href="#statement-context">Statement context</a><br />
+<a href="#mental-model">Mental Model</a><br />
+<a href="#buttons">Buttons</a><br />
+<a href="#prop-vs-attrib">Properties vs. Attributes</a><br />
+<br />
+<a href="#property-binding">Property Binding</a><br />
+<div style="margin-left:8px">
+  <a href="#attribute-binding">Attribute Binding</a><br />
+  <a href="#class-binding">Class Binding</a><br />
+  <a href="#style-binding">Style Binding</a><br />
+</div>
+<br />
+<a href="#event-binding">Event Binding</a><br />
+<a href="#two-way">Two-way Binding</a><br />
+<br />
+<div>Directives</div>
+<div style="margin-left:8px">
+  <a href="#ngModel">NgModel (two-way) Binding</a><br />
+  <a href="#ngClass">NgClass Binding</a><br />
+  <a href="#ngStyle">NgStyle Binding</a><br />
+  <a href="#ngIf">NgIf</a><br />
+  <a href="#ngFor">NgFor</a><br />
+  <div style="margin-left:8px">
+    <a href="#ngFor-index">NgFor with index</a><br />
+    <a href="#ngFor-trackBy">NgFor with trackBy</a><br />
+  </div>
+  <a href="#ngSwitch">NgSwitch</a><br />
+</div>
+<br />
+<a href="#ref-vars">Template reference variables</a><br />
+<a href="#inputs-and-outputs">Inputs and outputs</a><br />
+<a href="#pipes">Pipes</a><br />
+<a href="#safe-navigation-operator">Safe navigation operator <i>?.</i></a
+><br />
+<a href="#non-null-assertion-operator">Non-null assertion operator <i>!.</i></a
+><br />
+<a href="#enums">Enums</a><br />
+
+<!-- Interpolation and expressions -->
+<hr />
+<h2 id="interpolation">Interpolation</h2>
+
+<p>My current hero is {{currentHero.name}}</p>
+
+<h3>{{title}} <img src="{{heroImageUrl}}" style="height:30px" /></h3>
+
+<!-- "The sum of 1 + 1 is 2" -->
+<p>The sum of 1 + 1 is {{1 + 1}}</p>
+
+<!-- "The sum of 1 + 1 is not 4" -->
+<p>The sum of 1 + 1 is not {{1 + 1 + getVal()}}</p>
+
+<a class="to-toc" href="#toc">top</a>
+
+<hr />
+<h2 id="expression-context">Expression context</h2>
+
+<p>
+  Component expression context (&#123;&#123;title&#125;&#125;,
+  [hidden]="isUnchanged")
+</p>
+<div class="context">{{title}} <span [hidden]="isUnchanged">changed</span></div>
+
+<p>Template input variable expression context (let hero)</p>
+<!-- template hides the following; plenty of examples later -->
+<ng-template>
+  <div *ngFor="let hero of heroes">{{hero.name}}</div>
+</ng-template>
+
+<p>Template reference variable expression context (#heroInput)</p>
+<div (keyup)="0" class="context">
+  Type something: <input #heroInput /> {{heroInput.value}}
+</div>
+
+<a class="to-toc" href="#toc">top</a>
+
+<hr />
+<h2 id="statement-context">Statement context</h2>
+
+<p>Component statement context ( (click)="onSave() )</p>
+<div class="context"><button (click)="deleteHero()">Delete hero</button></div>
+
+<p>Template $event statement context</p>
+<div class="context"><button (click)="onSave($event)">Save</button></div>
+
+<p>Template input variable statement context (let hero)</p>
+<!-- template hides the following; plenty of examples later -->
+<div class="context">
+  <button *ngFor="let hero of heroes" (click)="deleteHero(hero)"
+    >{{hero.name}}</button
+  >
+</div>
+
+<p>Template reference variable statement context (#heroForm)</p>
+<div class="context">
+  <form #heroForm (ngSubmit)="onSubmit(heroForm)">...</form>
+</div>
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- New Mental Model -->
+<hr />
+<h2 id="mental-model">New Mental Model</h2>
+
+<!--
+  <img src="http://www.wpclipart.com/cartoon/people/hero/hero_silhoutte_T.png">
+-->
+<!-- Public Domain terms of use: http://www.wpclipart.com/terms.html -->
+<div class="special">Mental Model</div>
+<img src="assets/images/hero.png" /> <button disabled>Save</button> <br /><br />
+
+<div>
+  <!-- Normal HTML -->
+  <div class="special">Mental Model</div>
+  <!-- Wow! A new element! -->
+  <app-hero-detail></app-hero-detail>
+</div>
+<br /><br />
+
+<div>
+  <!-- Bind button disabled state to \`isUnchanged\` property -->
+  <button [disabled]="isUnchanged">Save</button>
+</div>
+<br /><br />
+
+<div>
+  <img [src]="heroImageUrl" />
+  <app-hero-detail [hero]="currentHero"></app-hero-detail>
+  <div [ngClass]="{ special: isSpecial }"></div>
+</div>
+<br /><br />
+
+<button (click)="onSave()">Save</button>
+<app-hero-detail (deleteRequest)="deleteHero()"></app-hero-detail>
+<div (myClick)="(clicked = $event)" clickable>click me</div>
+{{clicked}} <br /><br />
+
+<div>Hero Name: <input [(ngModel)]="name" /> {{name}}</div>
+<br /><br />
+
+<button [attr.aria-label]="help">help</button> <br /><br />
+
+<div [class.special]="isSpecial">Special</div>
+<br /><br />
+
+<button [style.color]="isSpecial ? 'red' : 'green'"> button</button>
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- property vs. attribute -->
+<hr />
+<h2 id="prop-vs-attrib">Property vs. Attribute (img examples)</h2>
+<!-- examine the following <img> tag in the browser tools -->
+<img src="images/ng-logo.png" [src]="heroImageUrl" />
+
+<br /><br />
+
+<img [src]="iconUrl" /> <img bind-src="heroImageUrl" />
+<img [attr.src]="villainImageUrl" />
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- buttons -->
+<hr />
+<h2 id="buttons">Buttons</h2>
+
+<button>Enabled (but does nothing)</button> <button disabled>Disabled</button>
+<button disabled="false">Still disabled</button> <br /><br />
+<button disabled>disabled by attribute</button>
+<button [disabled]="isUnchanged">disabled by property binding</button>
+<br /><br />
+<button bind-disabled="isUnchanged" on-click="onSave($event)"
+  >Disabled Cancel</button
+>
+<button [disabled]="!canSave" (click)="onSave($event)">Enabled Save</button>
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- property binding -->
+<hr />
+<h2 id="property-binding">Property Binding</h2>
+
+<img [src]="heroImageUrl" />
+<button [disabled]="isUnchanged">Cancel is disabled</button>
+<div [ngClass]="classes">[ngClass] binding to the classes property</div>
+<app-hero-detail [hero]="currentHero"></app-hero-detail>
+<img bind-src="heroImageUrl" />
+
+<!--
+  ERROR: HeroDetailComponent.hero expects a
+  Hero object, not the string "currentHero"
+-->
+<div *ngIf="false"><app-hero-detail hero="currentHero"></app-hero-detail></div>
+<app-hero-detail prefix="You are my" [hero]="currentHero"></app-hero-detail>
+
+<p><img src="{{heroImageUrl}}" /> is the <i>interpolated</i> image.</p>
+<p><img [src]="heroImageUrl" /> is the <i>property bound</i> image.</p>
+
+<p>
+  <span>"{{title}}" is the <i>interpolated</i> title.</span>
+</p>
+<p>"<span [innerHTML]="title"></span>" is the <i>property bound</i> title.</p>
+
+<!--
+  Angular generates warnings for these two lines as it sanitizes them
+  WARNING: sanitizing HTML stripped some content (see http://g.co/ng/security#xss).
+-->
+<p>
+  <span>"{{evilTitle}}" is the <i>interpolated</i> evil title.</span>
+</p>
+<p>
+  "<span [innerHTML]="evilTitle"></span>" is the <i>property bound</i> evil
+  title.
+</p>
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- attribute binding -->
+<hr />
+<h2 id="attribute-binding">Attribute Binding</h2>
+
+<!-- create and set a colspan attribute -->
+<table border="1">
+  <!-- expression calculates colspan=2 -->
+  <tr>
+    <td [attr.colspan]="1 + 1">One-Two</td>
+  </tr>
+
+  <!--
+    ERROR: There is no \`colspan\` property to set!
+    <tr><td colspan="{{1 + 1}}">Three-Four</td></tr>
+  -->
+
+  <tr>
+    <td>Five</td>
+    <td>Six</td>
+  </tr>
+</table>
+
+<br />
+<!-- create and set an aria attribute for assistive technology -->
+<button [attr.aria-label]="actionName">{{actionName}} with Aria</button>
+<br /><br />
+
+<!-- The following effects are not discussed in the chapter -->
+<div>
+  <!-- any use of [attr.disabled] creates the disabled attribute -->
+  <button [attr.disabled]="isUnchanged">Disabled</button>
+
+  <button [attr.disabled]="!isUnchanged">Disabled as well</button>
+
+  <!-- we'd have to remove it with property binding -->
+  <button disabled [disabled]="false">Enabled (but inert)</button>
+</div>
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- class binding -->
+<hr />
+<h2 id="class-binding">Class Binding</h2>
+
+<!-- standard class attribute setting -->
+<div class="bad curly special">Bad curly special</div>
+
+<!-- reset/override all class names with a binding -->
+<div class="bad curly special" [class]="badCurly">Bad curly</div>
+
+<!-- toggle the "special" class on/off with a property -->
+<div [class.special]="isSpecial">The class binding is special</div>
+
+<!-- binding to \`class.special\` trumps the class attribute -->
+<div class="special" [class.special]="!isSpecial">
+  This one is not so special
+</div>
+
+<div bind-class.special="isSpecial">This class binding is special too</div>
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- style binding -->
+<hr />
+<h2 id="style-binding">Style Binding</h2>
+
+<button [style.color]="isSpecial ? 'red' : 'green'">Red</button>
+<button [style.background-color]="canSave ? 'cyan' : 'grey'">Save</button>
+
+<button [style.font-size.em]="isSpecial ? 3 : 1">Big</button>
+<button [style.font-size.%]="!isSpecial ? 150 : 50">Small</button>
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- event binding -->
+<hr />
+<h2 id="event-binding">Event Binding</h2>
+
+<button (click)="onSave()">Save</button>
+
+<button on-click="onSave()">On Save</button>
+
+<div>
+  <!-- \`myClick\` is an event on the custom \`ClickDirective\` -->
+  <div (myClick)="(clickMessage = $event)" clickable>click with myClick</div>
+  {{clickMessage}}
+</div>
+
+<!-- binding to a nested component -->
+<app-hero-detail
+  (deleteRequest)="deleteHero($event)"
+  [hero]="currentHero"
+></app-hero-detail>
+<br />
+
+<app-big-hero-detail (deleteRequest)="deleteHero($event)" [hero]="currentHero">
+</app-big-hero-detail>
+
+<div class="parent-div" (click)="onClickMe($event)" clickable>
+  Click me
+  <div class="child-div">Click me too!</div>
+</div>
+
+<!-- Will save only once -->
+<div (click)="onSave()" clickable>
+  <button (click)="onSave($event)">Save, no propagation</button>
+</div>
+
+<!-- Will save twice -->
+<div (click)="onSave()" clickable>
+  <button (click)="onSave()">Save w/ propagation</button>
+</div>
+
+<a class="to-toc" href="#toc">top</a>
+
+<hr />
+<h2 id="two-way">Two-way Binding</h2>
+<div id="two-way-1">
+  <app-sizer [(size)]="fontSizePx"></app-sizer>
+  <div [style.font-size.px]="fontSizePx">Resizable Text</div>
+  <label>FontSize (px): <input [(ngModel)]="fontSizePx"/></label>
+</div>
+<br />
+<div id="two-way-2">
+  <h3>De-sugared two-way binding</h3>
+  <app-sizer
+    [size]="fontSizePx"
+    (sizeChange)="(fontSizePx = $event)"
+  ></app-sizer>
+</div>
+
+<a class="to-toc" href="#toc">top</a>
+
+<!--
+  Two way data binding unwound;
+  passing the changed display value to the event handler via \`$event\`
+-->
+<hr />
+<h2 id="ngModel">NgModel (two-way) Binding</h2>
+
+<h3>Result: {{currentHero.name}}</h3>
+
+<input
+  [value]="currentHero.name"
+  (input)="(currentHero.name = $event.target.value)"
+/>
+without NgModel <br />
+<input [(ngModel)]="currentHero.name" /> [(ngModel)] <br />
+<input bindon-ngModel="currentHero.name" /> bindon-ngModel <br />
+<input
+  [ngModel]="currentHero.name"
+  (ngModelChange)="(currentHero.name = $event)"
+/>
+(ngModelChange)="...name=$event" <br />
+<input
+  [ngModel]="currentHero.name"
+  (ngModelChange)="setUppercaseName($event)"
+/>
+(ngModelChange)="setUppercaseName($event)"
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- NgClass binding -->
+<hr />
+<h2 id="ngClass">NgClass Binding</h2>
+
+<p>currentClasses is {{currentClasses | json}}</p>
+<div [ngClass]="currentClasses">
+  This div is initially saveable, unchanged, and special
+</div>
+
+<!-- not used in chapter -->
+<br />
+<label>saveable <input type="checkbox" [(ngModel)]="canSave"/></label> |
+<label
+  >modified:
+  <input
+    type="checkbox"
+    [value]="!isUnchanged"
+    (change)="(isUnchanged = !isUnchanged)"
+/></label>
+| <label>special: <input type="checkbox" [(ngModel)]="isSpecial"/></label>
+<button (click)="setCurrentClasses()">Refresh currentClasses</button>
+<br /><br />
+<div [ngClass]="currentClasses">
+  This div should be {{canSave ? "" : "not"}} saveable,
+  {{isUnchanged ? "unchanged" : "modified"}} and,
+  {{isSpecial ? "" : "not"}} special after clicking "Refresh".
+</div>
+<br /><br />
+
+<div [ngClass]="isSpecial ? 'special' : ''">This div is special</div>
+
+<div class="bad curly special">Bad curly special</div>
+<div [ngClass]="{ bad: false, curly: true, special: true }">Curly special</div>
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- NgStyle binding -->
+<hr />
+<h2 id="ngStyle">NgStyle Binding</h2>
+
+<div [style.font-size]="isSpecial ? 'x-large' : 'smaller'">
+  This div is x-large or smaller.
+</div>
+
+<h3>[ngStyle] binding to currentStyles - CSS property names</h3>
+<p>currentStyles is {{currentStyles | json}}</p>
+<div [ngStyle]="currentStyles">
+  This div is initially italic, normal weight, and extra large (24px).
+</div>
+
+<!-- not used in chapter -->
+<br />
+<label>italic: <input type="checkbox" [(ngModel)]="canSave"/></label> |
+<label>normal: <input type="checkbox" [(ngModel)]="isUnchanged"/></label> |
+<label>xlarge: <input type="checkbox" [(ngModel)]="isSpecial"/></label>
+<button (click)="setCurrentStyles()">Refresh currentStyles</button> <br /><br />
+<div [ngStyle]="currentStyles">
+  This div should be {{canSave ? "italic" : "plain"}},
+  {{isUnchanged ? "normal weight" : "bold"}} and,
+  {{isSpecial ? "extra large" : "normal size"}} after clicking "Refresh".
+</div>
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- NgIf binding -->
+<hr />
+<h2 id="ngIf">NgIf Binding</h2>
+
+<app-hero-detail *ngIf="isActive"></app-hero-detail>
+
+<div *ngIf="currentHero">Hello, {{currentHero.name}}</div>
+<div *ngIf="nullHero">Hello, {{nullHero.name}}</div>
+
+<!-- NgIf binding with template (no *) -->
+
+<ng-template [ngIf]="currentHero"
+  >Add {{currentHero.name}} with template</ng-template
+>
+
+<!-- Does not show because isActive is false! -->
+<div>Hero Detail removed from DOM (via template) because isActive is false</div>
+<ng-template [ngIf]="isActive">
+  <app-hero-detail></app-hero-detail>
+</ng-template>
+
+<!-- isSpecial is true -->
+<div [class.hidden]="!isSpecial">Show with class</div>
+<div [class.hidden]="isSpecial">Hide with class</div>
+
+<!-- HeroDetail is in the DOM but hidden -->
+<app-hero-detail [class.hidden]="isSpecial"></app-hero-detail>
+
+<div [style.display]="isSpecial ? 'block' : 'none'">Show with style</div>
+<div [style.display]="isSpecial ? 'none' : 'block'">Hide with style</div>
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- NgFor binding -->
+<hr />
+<h2 id="ngFor">NgFor Binding</h2>
+
+<div class="box">
+  <div *ngFor="let hero of heroes">{{hero.name}}</div>
+</div>
+<br />
+
+<div class="box">
+  <!-- *ngFor w/ hero-detail Component -->
+  <app-hero-detail *ngFor="let hero of heroes" [hero]="hero"></app-hero-detail>
+</div>
+
+<a class="to-toc" href="#toc">top</a>
+
+<h4 id="ngFor-index">*ngFor with index</h4>
+<p>with <i>semi-colon</i> separator</p>
+<div class="box">
+  <div *ngFor="let hero of heroes; let i = index">
+    {{i + 1}} - {{hero.name}}
+  </div>
+</div>
+
+<p>with <i>comma</i> separator</p>
+<div class="box">
+  <!-- Ex: "1 - Hercules" -->
+  <div *ngFor="let hero of heroes; let i = index">
+    {{i + 1}} - {{hero.name}}
+  </div>
+</div>
+
+<a class="to-toc" href="#toc">top</a>
+
+<h4 id="ngFor-trackBy">*ngFor trackBy</h4>
+<button (click)="resetHeroes()">Reset heroes</button>
+<button (click)="changeIds()">Change ids</button>
+<button (click)="clearTrackByCounts()">Clear counts</button>
+
+<p><i>without</i> trackBy</p>
+<div class="box">
+  <div #noTrackBy *ngFor="let hero of heroes">({{hero.id}}) {{hero.name}}</div>
+
+  <div id="noTrackByCnt" *ngIf="heroesNoTrackByCount">
+    Hero DOM elements change #{{heroesNoTrackByCount}} without trackBy
+  </div>
+</div>
+
+<p>with trackBy</p>
+<div class="box">
+  <div #withTrackBy *ngFor="let hero of heroes; trackBy: trackByHeroes">
+    ({{hero.id}}) {{hero.name}}
+  </div>
+
+  <div id="withTrackByCnt" *ngIf="heroesWithTrackByCount">
+    Hero DOM elements change #{{heroesWithTrackByCount}} with trackBy
+  </div>
+</div>
+
+<br /><br /><br />
+
+<p>with trackBy and <i>semi-colon</i> separator</p>
+<div class="box">
+  <div *ngFor="let hero of heroes; trackBy: trackByHeroes">
+    ({{hero.id}}) {{hero.name}}
+  </div>
+</div>
+
+<p>with trackBy and <i>comma</i> separator</p>
+<div class="box">
+  <div *ngFor="let hero of heroes; trackBy: trackByHeroes">
+    ({{hero.id}}) {{hero.name}}
+  </div>
+</div>
+
+<p>with trackBy and <i>space</i> separator</p>
+<div class="box">
+  <div *ngFor="let hero of heroes; trackBy: trackByHeroes">
+    ({{hero.id}}) {{hero.name}}
+  </div>
+</div>
+
+<p>with <i>generic</i> trackById function</p>
+<div class="box">
+  <div *ngFor="let hero of heroes; trackBy: trackById">
+    ({{hero.id}}) {{hero.name}}
+  </div>
+</div>
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- NgSwitch binding -->
+<hr />
+<h2 id="ngSwitch">NgSwitch Binding</h2>
+
+<p>Pick your favorite hero</p>
+<div>
+  <label *ngFor="let h of heroes">
+    <input type="radio" name="heroes" [(ngModel)]="currentHero" [value]="h" />{{
+      h.name
+    }}
+  </label>
+</div>
+
+<div [ngSwitch]="currentHero.emotion">
+  <app-happy-hero *ngSwitchCase="'happy'" [hero]="currentHero"></app-happy-hero>
+  <app-sad-hero *ngSwitchCase="'sad'" [hero]="currentHero"></app-sad-hero>
+  <app-confused-hero
+    *ngSwitchCase="'confused'"
+    [hero]="currentHero"
+  ></app-confused-hero>
+  <div *ngSwitchCase="'confused'">
+    Are you as confused as {{currentHero.name}}?
+  </div>
+  <app-unknown-hero *ngSwitchDefault [hero]="currentHero"></app-unknown-hero>
+</div>
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- template reference variable -->
+<hr />
+<h2 id="ref-vars">Template reference variables</h2>
+
+<input #phone placeholder="phone number" />
+
+<!-- lots of other elements -->
+
+<!-- phone refers to the input element; pass its \`value\` to an event handler -->
+<button (click)="callPhone(phone.value)">Call</button>
+
+<input ref-fax placeholder="fax number" />
+<button (click)="callFax(fax.value)">Fax</button>
+
+<!-- btn refers to the button element; show its disabled state -->
+<button
+  #btn
+  disabled
+  [innerHTML]="'disabled by attribute: ' + btn.disabled"
+></button>
+
+<h4>Example Form</h4>
+<app-hero-form [hero]="currentHero"></app-hero-form>
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- inputs and output -->
+<hr />
+<h2 id="inputs-and-outputs">Inputs and Outputs</h2>
+
+<img [src]="iconUrl" /> <button (click)="onSave()">Save</button>
+
+<app-hero-detail [hero]="currentHero" (deleteRequest)="deleteHero($event)">
+</app-hero-detail>
+
+<div (myClick)="(clickMessage2 = $event)" clickable>myClick2</div>
+{{clickMessage2}}
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- Pipes -->
+<hr />
+<h2 id="pipes">Pipes</h2>
+
+<div>Title through uppercase pipe: {{title | uppercase}}</div>
+
+<!-- Pipe chaining: convert title to uppercase, then to lowercase -->
+<div>Title through a pipe chain: {{title | uppercase | lowercase}}</div>
+
+<!-- pipe with configuration argument => "February 25, 1970" -->
+<div>Birthdate: {{currentHero?.birthdate | date:"longDate"}}</div>
+
+<div>{{currentHero | json}}</div>
+
+<div>Birthdate: {{currentHero?.birthdate | date:"longDate" | uppercase}}</div>
+
+<div>
+  <!-- pipe price to USD and display the $ symbol -->
+  <label>Price: </label>{{product.price | currency:"USD":true}}
+</div>
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- Null values and the safe navigation operator -->
+<hr />
+<h2 id="safe-navigation-operator">Safe navigation operator <i>?.</i></h2>
+
+<div>The title is {{title}}</div>
+
+<div>The current hero's name is {{currentHero?.name}}</div>
+
+<div>The current hero's name is {{currentHero.name}}</div>
+
+<!--
+  The null hero's name is {{nullHero.name}}
+
+  See console log:
+    TypeError: Cannot read property 'name' of null in [null]
+-->
+
+<!-- No hero, div not displayed, no error -->
+<div *ngIf="nullHero">The null hero's name is {{nullHero.name}}</div>
+
+<div>The null hero's name is {{nullHero && nullHero.name}}</div>
+
+<div>
+  <!-- No hero, no problem! -->
+  The null hero's name is {{nullHero?.name}}
+</div>
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- non-null assertion operator -->
+<hr />
+<h2 id="non-null-assertion-operator">Non-null assertion operator <i>!.</i></h2>
+
+<div>
+  <!-- No hero, no text -->
+  <div *ngIf="hero">The hero's name is {{hero!.name}}</div>
+</div>
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- non-null assertion operator -->
+<hr />
+<h2 id="any-type-cast-function">$any type cast function <i>$any( )</i>.</h2>
+
+<div>
+  <!-- Accessing an undeclared member -->
+  <div>The hero's marker is {{$any(hero).marker}}</div>
+</div>
+
+<div>
+  <!-- Accessing an undeclared member -->
+  <div>Undeclared members is {{$any(this).member}}</div>
+</div>
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- TODO: discuss this in the Style binding section -->
+<!-- enums in bindings -->
+<hr />
+<h2 id="enums">Enums in binding</h2>
+
+<p>
+  The name of the Color.Red enum is {{Color[Color.Red]}}.<br />
+  The current color is {{Color[color]}} and its number is {{color}}.<br />
+  <button [style.color]="Color[color]" (click)="colorToggle()"
+    >Enum Toggle</button
+  >
+</p>
+
+<a class="to-toc" href="#toc">top</a>
+
+<!--
+  Copyright 2017-2018 Google Inc. All Rights Reserved.
+  Use of this source code is governed by an MIT-style license that
+  can be found in the LICENSE file at http://angular.io/license
+-->
+
+<div id="heroForm">
+  <form (ngSubmit)="onSubmit(heroForm)" #heroForm="ngForm">
+    <div class="form-group">
+      <label for="name"
+        >Name
+        <input
+          class="form-control"
+          name="name"
+          required
+          [(ngModel)]="hero.name"
+        />
+      </label>
+    </div>
+    <button type="submit" [disabled]="!heroForm.form.valid">Submit</button>
+  </form>
+  <div [hidden]="!heroForm.form.valid">{{submitMessage}}</div>
+</div>
+
+<!--
+  Copyright 2017-2018 Google Inc. All Rights Reserved.
+  Use of this source code is governed by an MIT-style license that
+  can be found in the LICENSE file at http://angular.io/license
+-->
+
+`;
diff --git a/tests/html_angular/attributes.component.html b/tests/html_angular/attributes.component.html
index 7a05b50cccf8..665619c3ebee 100644
--- a/tests/html_angular/attributes.component.html
+++ b/tests/html_angular/attributes.component.html
@@ -12,6 +12,9 @@
     [target]=" [ 1 ] "
     [target]=" { 'a' : 1 } "
     [target]=" { a : 1 } "
+    [target]=" { 
+      trailingComma : 'notAllowed'
+    }"
     [target]=" true "
     [target]=" undefined "
     [target]=" null "
diff --git a/tests/html_angular/jsfmt.spec.js b/tests/html_angular/jsfmt.spec.js
index b802ad8670c5..21bd6c0be802 100644
--- a/tests/html_angular/jsfmt.spec.js
+++ b/tests/html_angular/jsfmt.spec.js
@@ -1 +1,2 @@
 run_spec(__dirname, ["angular"]);
+run_spec(__dirname, ["angular"], { trailingComma: "es5" });

From 5a0bd751aa8f0fa288ffd85bd0614609ac1170be Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Thu, 25 Oct 2018 22:18:23 +0800
Subject: [PATCH 105/177] fix(angular): trailing comma is not allowed in
 angular-specifix syntax

---
 src/language-html/printer-html.js             | 27 ++++++++++++-------
 .../__snapshots__/jsfmt.spec.js.snap          |  2 +-
 2 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/src/language-html/printer-html.js b/src/language-html/printer-html.js
index d18f90b991c0..43b60fc11500 100644
--- a/src/language-html/printer-html.js
+++ b/src/language-html/printer-html.js
@@ -76,12 +76,12 @@ function embed(path, print, textToDoc, options) {
           indent(
             concat([
               softline,
-              textToDoc(node.value, {
-                parser:
-                  options.parser === "angular"
-                    ? "__ng_interpolation"
-                    : "__js_expression"
-              })
+              textToDoc(
+                node.value,
+                options.parser === "angular"
+                  ? { parser: "__ng_interpolation", trailingComma: "none" }
+                  : { parser: "__js_expression" }
+              )
             ])
           ),
           node.parent.next &&
@@ -790,11 +790,17 @@ function printEmbeddedAttributeValue(node, textToDoc, options) {
     const ngExpressionBindingPatterns = ["^\\[.+\\]$", "^bind(on)?-"];
 
     if (isKeyMatched(ngStatementBindingPatterns)) {
-      return textToDoc(getValue(), { parser: "__ng_action" });
+      return textToDoc(getValue(), {
+        parser: "__ng_action",
+        trailingComma: "none"
+      });
     }
 
     if (isKeyMatched(ngExpressionBindingPatterns)) {
-      return textToDoc(getValue(), { parser: "__ng_binding" });
+      return textToDoc(getValue(), {
+        parser: "__ng_binding",
+        trailingComma: "none"
+      });
     }
 
     if (isKeyMatched(ngDirectiveBindingPatterns)) {
@@ -803,7 +809,10 @@ function printEmbeddedAttributeValue(node, textToDoc, options) {
           indent(
             concat([
               softline,
-              textToDoc(getValue(), { parser: "__ng_directive" })
+              textToDoc(getValue(), {
+                parser: "__ng_directive",
+                trailingComma: "none"
+              })
             ])
           ),
           softline
diff --git a/tests/html_angular/__snapshots__/jsfmt.spec.js.snap b/tests/html_angular/__snapshots__/jsfmt.spec.js.snap
index fb08af7db4bf..286558da9b81 100644
--- a/tests/html_angular/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_angular/__snapshots__/jsfmt.spec.js.snap
@@ -211,7 +211,7 @@ exports[`attributes.component.html - angular-verify 2`] = `
   [target]="{ a: 1 }"
   [target]="{ a: 1 }"
   [target]="{
-    trailingComma: 'notAllowed',
+    trailingComma: 'notAllowed'
   }"
   [target]="true"
   [target]="undefined"

From fdfcd7b0f89d7145c1e377b763189b0746776e56 Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Thu, 25 Oct 2018 23:02:17 +0800
Subject: [PATCH 106/177] test: add tests

---
 .../__snapshots__/jsfmt.spec.js.snap          | 29 +++++++++++++++++++
 tests/angular_interpolation/jsfmt.spec.js     |  2 ++
 .../angular_interpolation/pipe-expression.ng  | 12 ++++++++
 3 files changed, 43 insertions(+)
 create mode 100644 tests/angular_interpolation/__snapshots__/jsfmt.spec.js.snap
 create mode 100644 tests/angular_interpolation/jsfmt.spec.js
 create mode 100644 tests/angular_interpolation/pipe-expression.ng

diff --git a/tests/angular_interpolation/__snapshots__/jsfmt.spec.js.snap b/tests/angular_interpolation/__snapshots__/jsfmt.spec.js.snap
new file mode 100644
index 000000000000..132a6a7178d7
--- /dev/null
+++ b/tests/angular_interpolation/__snapshots__/jsfmt.spec.js.snap
@@ -0,0 +1,29 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`pipe-expression.ng - __ng_interpolation-verify 1`] = `
+[
+    a ? (b | c : d) : (e | f : g),
+    a | b | c | d,
+    ((a | b) | c) | d,
+    a | b:(c | d),
+    { a: b | c },
+    (a + b) | c,
+    (a | b) + c,
+    fn(a | b),
+    a?.b(c | d),
+    a[b | c]
+]
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+[
+  a ? b | c:d : e | f:g,
+  a | b | c | d,
+  a | b | c | d,
+  a | b:c | d,
+  { a: b | c },
+  a + b | c,
+  a | b + c,
+  fn(a | b),
+  a?.b(c | d),
+  a[b | c]
+]
+`;
diff --git a/tests/angular_interpolation/jsfmt.spec.js b/tests/angular_interpolation/jsfmt.spec.js
new file mode 100644
index 000000000000..614637e912fa
--- /dev/null
+++ b/tests/angular_interpolation/jsfmt.spec.js
@@ -0,0 +1,2 @@
+run_spec(__dirname, ["__ng_interpolation"]);
+
diff --git a/tests/angular_interpolation/pipe-expression.ng b/tests/angular_interpolation/pipe-expression.ng
new file mode 100644
index 000000000000..75dd159a8ad0
--- /dev/null
+++ b/tests/angular_interpolation/pipe-expression.ng
@@ -0,0 +1,12 @@
+[
+    a ? (b | c : d) : (e | f : g),
+    a | b | c | d,
+    ((a | b) | c) | d,
+    a | b:(c | d),
+    { a: b | c },
+    (a + b) | c,
+    (a | b) + c,
+    fn(a | b),
+    a?.b(c | d),
+    a[b | c]
+]

From 5e0533b2c9221181551d212b7d6b9953f971409e Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Thu, 25 Oct 2018 23:03:20 +0800
Subject: [PATCH 107/177] fix(angular): add missing parens for pipe expression
 in some cases

---
 src/language-js/needs-parens.js                    | 14 ++++++++++++++
 .../__snapshots__/jsfmt.spec.js.snap               |  6 +++---
 2 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/src/language-js/needs-parens.js b/src/language-js/needs-parens.js
index 53144ec55b55..7a783381bf9a 100644
--- a/src/language-js/needs-parens.js
+++ b/src/language-js/needs-parens.js
@@ -613,6 +613,20 @@ function needsParens(path, options) {
         return true;
       }
       return false;
+    case "NGPipeExpression":
+      if (
+        parent.type === "NGRoot" ||
+        parent.type === "ObjectProperty" ||
+        parent.type === "ArrayExpression" ||
+        parent.type === "CallExpression" ||
+        parent.type === "OptionalCallExpression" ||
+        (parent.type === "NGPipeExpression" && name === "right") ||
+        parent.type === "MemberExpression" ||
+        parent.type === "AssignmentExpression"
+      ) {
+        return false;
+      }
+      return true;
   }
 
   return false;
diff --git a/tests/angular_interpolation/__snapshots__/jsfmt.spec.js.snap b/tests/angular_interpolation/__snapshots__/jsfmt.spec.js.snap
index 132a6a7178d7..55ab144aa7c4 100644
--- a/tests/angular_interpolation/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/angular_interpolation/__snapshots__/jsfmt.spec.js.snap
@@ -15,13 +15,13 @@ exports[`pipe-expression.ng - __ng_interpolation-verify 1`] = `
 ]
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 [
-  a ? b | c:d : e | f:g,
+  a ? (b | c:d) : (e | f:g),
   a | b | c | d,
   a | b | c | d,
-  a | b:c | d,
+  a | b:(c | d),
   { a: b | c },
   a + b | c,
-  a | b + c,
+  (a | b) + c,
   fn(a | b),
   a?.b(c | d),
   a[b | c]

From 3195482c00cdde1692b477827caa6c7f88641af1 Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Thu, 25 Oct 2018 23:28:47 +0800
Subject: [PATCH 108/177] style: fix linting

---
 tests/angular_interpolation/jsfmt.spec.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/tests/angular_interpolation/jsfmt.spec.js b/tests/angular_interpolation/jsfmt.spec.js
index 614637e912fa..09a639b7b7f2 100644
--- a/tests/angular_interpolation/jsfmt.spec.js
+++ b/tests/angular_interpolation/jsfmt.spec.js
@@ -1,2 +1 @@
 run_spec(__dirname, ["__ng_interpolation"]);
-

From 3a59ef281d026eede697ae385dd2179c32bbecb3 Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Thu, 25 Oct 2018 23:52:06 +0800
Subject: [PATCH 109/177] test: add tests

---
 .../angular_interpolation/__snapshots__/jsfmt.spec.js.snap  | 6 ++++--
 tests/angular_interpolation/pipe-expression.ng              | 3 ++-
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/tests/angular_interpolation/__snapshots__/jsfmt.spec.js.snap b/tests/angular_interpolation/__snapshots__/jsfmt.spec.js.snap
index 55ab144aa7c4..08e04a389948 100644
--- a/tests/angular_interpolation/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/angular_interpolation/__snapshots__/jsfmt.spec.js.snap
@@ -11,7 +11,8 @@ exports[`pipe-expression.ng - __ng_interpolation-verify 1`] = `
     (a | b) + c,
     fn(a | b),
     a?.b(c | d),
-    a[b | c]
+    a[b | c],
+    ($students | async).items
 ]
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 [
@@ -24,6 +25,7 @@ exports[`pipe-expression.ng - __ng_interpolation-verify 1`] = `
   (a | b) + c,
   fn(a | b),
   a?.b(c | d),
-  a[b | c]
+  a[b | c],
+  $students | async.items
 ]
 `;
diff --git a/tests/angular_interpolation/pipe-expression.ng b/tests/angular_interpolation/pipe-expression.ng
index 75dd159a8ad0..893dbe5230a9 100644
--- a/tests/angular_interpolation/pipe-expression.ng
+++ b/tests/angular_interpolation/pipe-expression.ng
@@ -8,5 +8,6 @@
     (a | b) + c,
     fn(a | b),
     a?.b(c | d),
-    a[b | c]
+    a[b | c],
+    ($students | async).items
 ]

From ae74fa24530b6c977c27479962157888d94f8e83 Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Thu, 25 Oct 2018 23:54:12 +0800
Subject: [PATCH 110/177] fix(angular): add parens for pipe in
 memberExpression.object

---
 src/language-js/needs-parens.js                              | 2 +-
 tests/angular_interpolation/__snapshots__/jsfmt.spec.js.snap | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/language-js/needs-parens.js b/src/language-js/needs-parens.js
index 7a783381bf9a..40f74c496c1c 100644
--- a/src/language-js/needs-parens.js
+++ b/src/language-js/needs-parens.js
@@ -621,7 +621,7 @@ function needsParens(path, options) {
         parent.type === "CallExpression" ||
         parent.type === "OptionalCallExpression" ||
         (parent.type === "NGPipeExpression" && name === "right") ||
-        parent.type === "MemberExpression" ||
+        (parent.type === "MemberExpression" && name === "property") ||
         parent.type === "AssignmentExpression"
       ) {
         return false;
diff --git a/tests/angular_interpolation/__snapshots__/jsfmt.spec.js.snap b/tests/angular_interpolation/__snapshots__/jsfmt.spec.js.snap
index 08e04a389948..3ee8ade00223 100644
--- a/tests/angular_interpolation/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/angular_interpolation/__snapshots__/jsfmt.spec.js.snap
@@ -26,6 +26,6 @@ exports[`pipe-expression.ng - __ng_interpolation-verify 1`] = `
   fn(a | b),
   a?.b(c | d),
   a[b | c],
-  $students | async.items
+  ($students | async).items
 ]
 `;

From dd2a16b0653129e9a34ca95d9353f07a60951471 Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Fri, 26 Oct 2018 00:14:59 +0800
Subject: [PATCH 111/177] test: add tests

---
 .../angular_interpolation/__snapshots__/jsfmt.spec.js.snap  | 6 ++++--
 tests/angular_interpolation/pipe-expression.ng              | 3 ++-
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/tests/angular_interpolation/__snapshots__/jsfmt.spec.js.snap b/tests/angular_interpolation/__snapshots__/jsfmt.spec.js.snap
index 3ee8ade00223..029b03f62653 100644
--- a/tests/angular_interpolation/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/angular_interpolation/__snapshots__/jsfmt.spec.js.snap
@@ -12,7 +12,8 @@ exports[`pipe-expression.ng - __ng_interpolation-verify 1`] = `
     fn(a | b),
     a?.b(c | d),
     a[b | c],
-    ($students | async).items
+    ($students | async).items,
+    ($students | async)()
 ]
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 [
@@ -26,6 +27,7 @@ exports[`pipe-expression.ng - __ng_interpolation-verify 1`] = `
   fn(a | b),
   a?.b(c | d),
   a[b | c],
-  ($students | async).items
+  ($students | async).items,
+  $students | async()
 ]
 `;
diff --git a/tests/angular_interpolation/pipe-expression.ng b/tests/angular_interpolation/pipe-expression.ng
index 893dbe5230a9..27add64367b2 100644
--- a/tests/angular_interpolation/pipe-expression.ng
+++ b/tests/angular_interpolation/pipe-expression.ng
@@ -9,5 +9,6 @@
     fn(a | b),
     a?.b(c | d),
     a[b | c],
-    ($students | async).items
+    ($students | async).items,
+    ($students | async)()
 ]

From f295fc3116720d6e52847c043f56eed7f0cf2870 Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Fri, 26 Oct 2018 00:15:52 +0800
Subject: [PATCH 112/177] fix(angular): add parens for pipe in
 callExpression.callee

---
 src/language-js/needs-parens.js                              | 5 +++--
 tests/angular_interpolation/__snapshots__/jsfmt.spec.js.snap | 2 +-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/language-js/needs-parens.js b/src/language-js/needs-parens.js
index 40f74c496c1c..e3f18a2ccb14 100644
--- a/src/language-js/needs-parens.js
+++ b/src/language-js/needs-parens.js
@@ -618,8 +618,9 @@ function needsParens(path, options) {
         parent.type === "NGRoot" ||
         parent.type === "ObjectProperty" ||
         parent.type === "ArrayExpression" ||
-        parent.type === "CallExpression" ||
-        parent.type === "OptionalCallExpression" ||
+        ((parent.type === "CallExpression" ||
+          parent.type === "OptionalCallExpression") &&
+          parent.arguments[name] === node) ||
         (parent.type === "NGPipeExpression" && name === "right") ||
         (parent.type === "MemberExpression" && name === "property") ||
         parent.type === "AssignmentExpression"
diff --git a/tests/angular_interpolation/__snapshots__/jsfmt.spec.js.snap b/tests/angular_interpolation/__snapshots__/jsfmt.spec.js.snap
index 029b03f62653..52e48549a596 100644
--- a/tests/angular_interpolation/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/angular_interpolation/__snapshots__/jsfmt.spec.js.snap
@@ -28,6 +28,6 @@ exports[`pipe-expression.ng - __ng_interpolation-verify 1`] = `
   a?.b(c | d),
   a[b | c],
   ($students | async).items,
-  $students | async()
+  ($students | async)()
 ]
 `;

From 2d874abf4eea0deece06d9cbfb766dea2524c69e Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Fri, 26 Oct 2018 21:01:19 +0800
Subject: [PATCH 113/177] test: add tests

---
 .../__snapshots__/jsfmt.spec.js.snap               | 14 ++++++++++++++
 tests/angular_interpolation/logical-expression.ng  |  3 +++
 2 files changed, 17 insertions(+)
 create mode 100644 tests/angular_interpolation/logical-expression.ng

diff --git a/tests/angular_interpolation/__snapshots__/jsfmt.spec.js.snap b/tests/angular_interpolation/__snapshots__/jsfmt.spec.js.snap
index 52e48549a596..24d69dff83d7 100644
--- a/tests/angular_interpolation/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/angular_interpolation/__snapshots__/jsfmt.spec.js.snap
@@ -1,5 +1,19 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`logical-expression.ng - __ng_interpolation-verify 1`] = `
+[
+    advancedSearchService.patientInformationFieldsRow2 && advancedSearchService.patientInformationFieldsRow2.indexOf(advancedSearchService.formElementData.customFieldList[i].customFieldType) !== -1
+]
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+[
+  advancedSearchService.patientInformationFieldsRow2 &&
+    advancedSearchService.patientInformationFieldsRow2.indexOf(
+      advancedSearchService.formElementData.customFieldList[i].customFieldType
+    ) !==
+      -1
+]
+`;
+
 exports[`pipe-expression.ng - __ng_interpolation-verify 1`] = `
 [
     a ? (b | c : d) : (e | f : g),
diff --git a/tests/angular_interpolation/logical-expression.ng b/tests/angular_interpolation/logical-expression.ng
new file mode 100644
index 000000000000..fc56a8e99723
--- /dev/null
+++ b/tests/angular_interpolation/logical-expression.ng
@@ -0,0 +1,3 @@
+[
+    advancedSearchService.patientInformationFieldsRow2 && advancedSearchService.patientInformationFieldsRow2.indexOf(advancedSearchService.formElementData.customFieldList[i].customFieldType) !== -1
+]

From a7eb4e5f96efa02002672e280957a5f9a4da5102 Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Fri, 26 Oct 2018 21:02:28 +0800
Subject: [PATCH 114/177] fix: update angular-estree-parser to fix unexpected
 `-1` formatting

---
 package.json                                              | 2 +-
 .../__snapshots__/jsfmt.spec.js.snap                      | 3 +--
 yarn.lock                                                 | 8 ++++----
 3 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/package.json b/package.json
index 901bc503d7f5..d75b17f8c26e 100644
--- a/package.json
+++ b/package.json
@@ -19,7 +19,7 @@
     "@babel/parser": "7.1.2",
     "@glimmer/syntax": "0.30.3",
     "@iarna/toml": "2.0.0",
-    "angular-estree-parser": "1.1.0",
+    "angular-estree-parser": "1.1.1",
     "angular-html-parser": "1.0.0",
     "camelcase": "4.1.0",
     "chalk": "2.1.0",
diff --git a/tests/angular_interpolation/__snapshots__/jsfmt.spec.js.snap b/tests/angular_interpolation/__snapshots__/jsfmt.spec.js.snap
index 24d69dff83d7..3635682e285c 100644
--- a/tests/angular_interpolation/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/angular_interpolation/__snapshots__/jsfmt.spec.js.snap
@@ -9,8 +9,7 @@ exports[`logical-expression.ng - __ng_interpolation-verify 1`] = `
   advancedSearchService.patientInformationFieldsRow2 &&
     advancedSearchService.patientInformationFieldsRow2.indexOf(
       advancedSearchService.formElementData.customFieldList[i].customFieldType
-    ) !==
-      -1
+    ) !== -1
 ]
 `;
 
diff --git a/yarn.lock b/yarn.lock
index eff792d48180..dcc339c57354 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -760,10 +760,10 @@ amdefine@>=0.0.4:
   resolved "https://registry.yarnpkg.com/amdefine/-/amdefine-1.0.1.tgz#4a5282ac164729e93619bcfd3ad151f817ce91f5"
   integrity sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU=
 
-angular-estree-parser@1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/angular-estree-parser/-/angular-estree-parser-1.1.0.tgz#64bb1f8ebced8167ad64bf93c00d65f142a83fa5"
-  integrity sha512-kLigPNv5DoOU0E+lMh9aAFWakAoOPtM5Xk6HOKHLVZqRWM30Z6MnQrXSGwOShWv7HyXtpqftoe85dYvFPVW8Sg==
+angular-estree-parser@1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/angular-estree-parser/-/angular-estree-parser-1.1.1.tgz#408a2e0f2ca95a7d8563a4c93d3411c7148d9b67"
+  integrity sha512-9FoXf5n9seO0SioEabxr+dUHxjiUIN/+Nh20rSlMucWd1NH85C0CQbfBlpjukW2sY3hWROYbz3apl4532eXeqw==
   dependencies:
     lines-and-columns "^1.1.6"
     tslib "^1.9.3"

From 35f91e21cd0730e2d0517cad729dad07569766ba Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Fri, 26 Oct 2018 21:43:45 +0800
Subject: [PATCH 115/177] test: add tests

---
 .../__snapshots__/jsfmt.spec.js.snap          | 92 +++++++++++++++++++
 .../html_angular/interpolation.component.html | 15 +++
 2 files changed, 107 insertions(+)

diff --git a/tests/html_angular/__snapshots__/jsfmt.spec.js.snap b/tests/html_angular/__snapshots__/jsfmt.spec.js.snap
index 286558da9b81..694c4da90046 100644
--- a/tests/html_angular/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_angular/__snapshots__/jsfmt.spec.js.snap
@@ -290,6 +290,21 @@ exports[`interpolation.component.html - angular-verify 1`] = `
 <div>{{ a . b }}</div>
 <div>{{ a ?. b ( ) }}</div>
 <div>{{ a ?. b }}</div>
+<label for="transmissionLayoutRadioButton">{{
+"SearchSelection.transmissionLayoutRadioButton" | localize:localizationSection
+}}</label>
+<label for="transmissionLayoutRadioButtontransmissionLayoutRadioButtontransmissionLayoutRadioButtontransmissionLayoutRadioButton">{{
+"SearchSelection.transmissionLayoutRadioButton" | localize:localizationSection
+}}</label>
+<label for="transmissionLayoutRadioButton">{{
+"SearchSelection.transmissionLayoutRadioButton" | localize:localizationSection
+}} </label>
+<label for="transmissionLayoutRadioButton"> {{
+"SearchSelection.transmissionLayoutRadioButton" | localize:localizationSection
+}}</label>
+<label for="transmissionLayoutRadioButton"> {{
+"SearchSelection.transmissionLayoutRadioButton" | localize:localizationSection
+}} </label>
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 <div>{{a | b:c}}</div>
 <div>{{0 - 1}}</div>
@@ -316,6 +331,37 @@ exports[`interpolation.component.html - angular-verify 1`] = `
 <div>{{a.b}}</div>
 <div>{{a?.b()}}</div>
 <div>{{a?.b}}</div>
+<label for="transmissionLayoutRadioButton"
+  >{{
+    "SearchSelection.transmissionLayoutRadioButton" |
+      localize:localizationSection
+  }}</label
+>
+<label
+  for="transmissionLayoutRadioButtontransmissionLayoutRadioButtontransmissionLayoutRadioButtontransmissionLayoutRadioButton"
+  >{{
+    "SearchSelection.transmissionLayoutRadioButton" |
+      localize:localizationSection
+  }}</label
+>
+<label for="transmissionLayoutRadioButton"
+  >{{
+    "SearchSelection.transmissionLayoutRadioButton" |
+      localize:localizationSection
+  }}
+</label>
+<label for="transmissionLayoutRadioButton">
+  {{
+    "SearchSelection.transmissionLayoutRadioButton" |
+      localize:localizationSection
+  }}</label
+>
+<label for="transmissionLayoutRadioButton">
+  {{
+    "SearchSelection.transmissionLayoutRadioButton" |
+      localize:localizationSection
+  }}
+</label>
 
 `;
 
@@ -345,6 +391,21 @@ exports[`interpolation.component.html - angular-verify 2`] = `
 <div>{{ a . b }}</div>
 <div>{{ a ?. b ( ) }}</div>
 <div>{{ a ?. b }}</div>
+<label for="transmissionLayoutRadioButton">{{
+"SearchSelection.transmissionLayoutRadioButton" | localize:localizationSection
+}}</label>
+<label for="transmissionLayoutRadioButtontransmissionLayoutRadioButtontransmissionLayoutRadioButtontransmissionLayoutRadioButton">{{
+"SearchSelection.transmissionLayoutRadioButton" | localize:localizationSection
+}}</label>
+<label for="transmissionLayoutRadioButton">{{
+"SearchSelection.transmissionLayoutRadioButton" | localize:localizationSection
+}} </label>
+<label for="transmissionLayoutRadioButton"> {{
+"SearchSelection.transmissionLayoutRadioButton" | localize:localizationSection
+}}</label>
+<label for="transmissionLayoutRadioButton"> {{
+"SearchSelection.transmissionLayoutRadioButton" | localize:localizationSection
+}} </label>
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 <div>{{a | b:c}}</div>
 <div>{{0 - 1}}</div>
@@ -371,6 +432,37 @@ exports[`interpolation.component.html - angular-verify 2`] = `
 <div>{{a.b}}</div>
 <div>{{a?.b()}}</div>
 <div>{{a?.b}}</div>
+<label for="transmissionLayoutRadioButton"
+  >{{
+    "SearchSelection.transmissionLayoutRadioButton" |
+      localize:localizationSection
+  }}</label
+>
+<label
+  for="transmissionLayoutRadioButtontransmissionLayoutRadioButtontransmissionLayoutRadioButtontransmissionLayoutRadioButton"
+  >{{
+    "SearchSelection.transmissionLayoutRadioButton" |
+      localize:localizationSection
+  }}</label
+>
+<label for="transmissionLayoutRadioButton"
+  >{{
+    "SearchSelection.transmissionLayoutRadioButton" |
+      localize:localizationSection
+  }}
+</label>
+<label for="transmissionLayoutRadioButton">
+  {{
+    "SearchSelection.transmissionLayoutRadioButton" |
+      localize:localizationSection
+  }}</label
+>
+<label for="transmissionLayoutRadioButton">
+  {{
+    "SearchSelection.transmissionLayoutRadioButton" |
+      localize:localizationSection
+  }}
+</label>
 
 `;
 
diff --git a/tests/html_angular/interpolation.component.html b/tests/html_angular/interpolation.component.html
index 896ece2845b4..357cb8adf900 100644
--- a/tests/html_angular/interpolation.component.html
+++ b/tests/html_angular/interpolation.component.html
@@ -23,3 +23,18 @@
 <div>{{ a . b }}</div>
 <div>{{ a ?. b ( ) }}</div>
 <div>{{ a ?. b }}</div>
+<label for="transmissionLayoutRadioButton">{{
+"SearchSelection.transmissionLayoutRadioButton" | localize:localizationSection
+}}</label>
+<label for="transmissionLayoutRadioButtontransmissionLayoutRadioButtontransmissionLayoutRadioButtontransmissionLayoutRadioButton">{{
+"SearchSelection.transmissionLayoutRadioButton" | localize:localizationSection
+}}</label>
+<label for="transmissionLayoutRadioButton">{{
+"SearchSelection.transmissionLayoutRadioButton" | localize:localizationSection
+}} </label>
+<label for="transmissionLayoutRadioButton"> {{
+"SearchSelection.transmissionLayoutRadioButton" | localize:localizationSection
+}}</label>
+<label for="transmissionLayoutRadioButton"> {{
+"SearchSelection.transmissionLayoutRadioButton" | localize:localizationSection
+}} </label>

From 5ec06f7e26ac7a54bed099d1d9b38f8af441f8f9 Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Fri, 26 Oct 2018 22:01:38 +0800
Subject: [PATCH 116/177] feat: add a special case for interpolation-only
 elements

---
 src/language-html/printer-html.js             | 201 ++++++++++--------
 .../__snapshots__/jsfmt.spec.js.snap          |  30 ++-
 2 files changed, 130 insertions(+), 101 deletions(-)

diff --git a/src/language-html/printer-html.js b/src/language-html/printer-html.js
index 43b60fc11500..a7ce1b413cff 100644
--- a/src/language-html/printer-html.js
+++ b/src/language-html/printer-html.js
@@ -27,7 +27,6 @@ const {
   getCommentData,
   getLastDescendant,
   hasPrettierIgnore,
-  identity,
   inferScriptParser,
   isElement,
   isPreLikeNode,
@@ -144,72 +143,110 @@ function genericPrint(path, options, print) {
         hardline
       ]);
     case "element":
-    case "ieConditionalComment":
+    case "ieConditionalComment": {
+      /**
+       * do not break:
+       *
+       *     <div>{{
+       *         ~
+       *       interpolation
+       *     }}</div>
+       *            ~
+       *
+       * exception: break if the opening tag breaks
+       *
+       *     <div
+       *       long
+       *           ~
+       *       >{{
+       *         interpolation
+       *       }}</div
+       *              ~
+       *     >
+       */
+      const shouldHugContent =
+        node.children.length === 1 &&
+        node.firstChild.type === "interpolation" &&
+        (!node.firstChild.isLeadingSpaceSensitive ||
+          !node.firstChild.hasLeadingSpaces) &&
+        (!node.lastChild.isTrailingSpaceSensitive ||
+          !node.lastChild.hasTrailingSpaces);
+      const attrGroupId = Symbol("element-attr-group-id");
       return concat([
         group(
           concat([
-            printOpeningTag(path, options, print),
+            group(printOpeningTag(path, options, print), { id: attrGroupId }),
             node.children.length === 0
               ? node.hasDanglingSpaces && node.isDanglingSpaceSensitive
                 ? line
                 : ""
               : concat([
                   forceBreakContent(node) ? breakParent : "",
-                  (isScriptLikeTag(node) &&
-                  node.parent.type === "root" &&
-                  options.parser === "vue"
-                    ? identity
-                    : indent)(
+                  (childrenDoc =>
+                    shouldHugContent
+                      ? ifBreak(indent(childrenDoc), childrenDoc, {
+                          groupId: attrGroupId
+                        })
+                      : isScriptLikeTag(node) &&
+                        node.parent.type === "root" &&
+                        options.parser === "vue"
+                        ? childrenDoc
+                        : indent(childrenDoc))(
                     concat([
-                      node.firstChild.type === "text" &&
-                      node.firstChild.isWhitespaceSensitive &&
-                      node.firstChild.isIndentationSensitive
-                        ? node.firstChild.value.indexOf("\n") === -1
-                          ? ""
-                          : literalline
-                        : node.firstChild.hasLeadingSpaces &&
-                          node.firstChild.isLeadingSpaceSensitive
-                          ? line
-                          : softline,
+                      shouldHugContent
+                        ? ifBreak(softline, "", { groupId: attrGroupId })
+                        : node.firstChild.type === "text" &&
+                          node.firstChild.isWhitespaceSensitive &&
+                          node.firstChild.isIndentationSensitive
+                          ? node.firstChild.value.indexOf("\n") === -1
+                            ? ""
+                            : literalline
+                          : node.firstChild.hasLeadingSpaces &&
+                            node.firstChild.isLeadingSpaceSensitive
+                            ? line
+                            : softline,
                       printChildren(path, options, print)
                     ])
                   ),
-                  (node.next
-                  ? needsToBorrowPrevClosingTagEndMarker(node.next)
-                  : needsToBorrowLastChildClosingTagEndMarker(node.parent))
-                    ? node.lastChild.hasTrailingSpaces &&
-                      node.lastChild.isTrailingSpaceSensitive
-                      ? " "
-                      : ""
-                    : node.lastChild.hasTrailingSpaces &&
-                      node.lastChild.isTrailingSpaceSensitive
-                      ? line
-                      : isElement(node) &&
-                        isPreLikeNode(node) &&
-                        node.lastChild.type === "text" &&
-                        (node.lastChild.value.indexOf("\n") === -1 ||
-                          new RegExp(
-                            `\\n\\s{${options.tabWidth *
-                              countParents(
-                                path,
-                                n => n.parent && n.parent.type !== "root"
-                              )}}$`
-                          ).test(node.lastChild.value))
-                        ? /**
-                           *     <div>
-                           *       <pre>
-                           *         something
-                           *       </pre>
-                           *            ~
-                           *     </div>
-                           */
-                          ""
-                        : softline
+                  shouldHugContent
+                    ? ifBreak(softline, "", { groupId: attrGroupId })
+                    : (node.next
+                      ? needsToBorrowPrevClosingTagEndMarker(node.next)
+                      : needsToBorrowLastChildClosingTagEndMarker(node.parent))
+                      ? node.lastChild.hasTrailingSpaces &&
+                        node.lastChild.isTrailingSpaceSensitive
+                        ? " "
+                        : ""
+                      : node.lastChild.hasTrailingSpaces &&
+                        node.lastChild.isTrailingSpaceSensitive
+                        ? line
+                        : isElement(node) &&
+                          isPreLikeNode(node) &&
+                          node.lastChild.type === "text" &&
+                          (node.lastChild.value.indexOf("\n") === -1 ||
+                            new RegExp(
+                              `\\n\\s{${options.tabWidth *
+                                countParents(
+                                  path,
+                                  n => n.parent && n.parent.type !== "root"
+                                )}}$`
+                            ).test(node.lastChild.value))
+                          ? /**
+                             *     <div>
+                             *       <pre>
+                             *         something
+                             *       </pre>
+                             *            ~
+                             *     </div>
+                             */
+                            ""
+                          : softline
                 ])
           ])
         ),
         printClosingTag(node)
       ]);
+    }
     case "interpolation":
       return concat([
         printOpeningTagStart(node),
@@ -489,40 +526,38 @@ function printOpeningTag(path, options, print) {
            */
           " "
         : ""
-      : group(
-          concat([
-            indent(
-              concat([
-                forceNotToBreakAttrContent ? " " : line,
-                join(line, path.map(print, "attrs"))
-              ])
-            ),
-            /**
-             *     123<a
-             *       attr
-             *           ~
-             *       >456
-             */
-            (node.firstChild &&
-              needsToBorrowParentOpeningTagEndMarker(node.firstChild)) ||
-            /**
-             *     <span
-             *       >123<meta
-             *                ~
-             *     /></span>
-             */
-            (node.isSelfClosing &&
-              needsToBorrowLastChildClosingTagEndMarker(node.parent))
-              ? ""
-              : node.isSelfClosing
-                ? forceNotToBreakAttrContent
-                  ? " "
-                  : line
-                : forceNotToBreakAttrContent
-                  ? ""
-                  : softline
-          ])
-        ),
+      : concat([
+          indent(
+            concat([
+              forceNotToBreakAttrContent ? " " : line,
+              join(line, path.map(print, "attrs"))
+            ])
+          ),
+          /**
+           *     123<a
+           *       attr
+           *           ~
+           *       >456
+           */
+          (node.firstChild &&
+            needsToBorrowParentOpeningTagEndMarker(node.firstChild)) ||
+          /**
+           *     <span
+           *       >123<meta
+           *                ~
+           *     /></span>
+           */
+          (node.isSelfClosing &&
+            needsToBorrowLastChildClosingTagEndMarker(node.parent))
+            ? ""
+            : node.isSelfClosing
+              ? forceNotToBreakAttrContent
+                ? " "
+                : line
+              : forceNotToBreakAttrContent
+                ? ""
+                : softline
+        ]),
     node.isSelfClosing ? "" : printOpeningTagEnd(node)
   ]);
 }
diff --git a/tests/html_angular/__snapshots__/jsfmt.spec.js.snap b/tests/html_angular/__snapshots__/jsfmt.spec.js.snap
index 694c4da90046..e5330c785788 100644
--- a/tests/html_angular/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_angular/__snapshots__/jsfmt.spec.js.snap
@@ -331,12 +331,9 @@ exports[`interpolation.component.html - angular-verify 1`] = `
 <div>{{a.b}}</div>
 <div>{{a?.b()}}</div>
 <div>{{a?.b}}</div>
-<label for="transmissionLayoutRadioButton"
-  >{{
-    "SearchSelection.transmissionLayoutRadioButton" |
-      localize:localizationSection
-  }}</label
->
+<label for="transmissionLayoutRadioButton">{{
+  "SearchSelection.transmissionLayoutRadioButton" | localize:localizationSection
+}}</label>
 <label
   for="transmissionLayoutRadioButtontransmissionLayoutRadioButtontransmissionLayoutRadioButtontransmissionLayoutRadioButton"
   >{{
@@ -432,12 +429,9 @@ exports[`interpolation.component.html - angular-verify 2`] = `
 <div>{{a.b}}</div>
 <div>{{a?.b()}}</div>
 <div>{{a?.b}}</div>
-<label for="transmissionLayoutRadioButton"
-  >{{
-    "SearchSelection.transmissionLayoutRadioButton" |
-      localize:localizationSection
-  }}</label
->
+<label for="transmissionLayoutRadioButton">{{
+  "SearchSelection.transmissionLayoutRadioButton" | localize:localizationSection
+}}</label>
 <label
   for="transmissionLayoutRadioButtontransmissionLayoutRadioButtontransmissionLayoutRadioButtontransmissionLayoutRadioButton"
   >{{
@@ -1280,9 +1274,9 @@ can be found in the LICENSE file at http://angular.io/license
 <p>Template input variable statement context (let hero)</p>
 <!-- template hides the following; plenty of examples later -->
 <div class="context">
-  <button *ngFor="let hero of heroes" (click)="deleteHero(hero)"
-    >{{hero.name}}</button
-  >
+  <button *ngFor="let hero of heroes" (click)="deleteHero(hero)">{{
+    hero.name
+  }}</button>
 </div>
 
 <p>Template reference variable statement context (#heroForm)</p>
@@ -2767,9 +2761,9 @@ can be found in the LICENSE file at http://angular.io/license
 <p>Template input variable statement context (let hero)</p>
 <!-- template hides the following; plenty of examples later -->
 <div class="context">
-  <button *ngFor="let hero of heroes" (click)="deleteHero(hero)"
-    >{{hero.name}}</button
-  >
+  <button *ngFor="let hero of heroes" (click)="deleteHero(hero)">{{
+    hero.name
+  }}</button>
 </div>
 
 <p>Template reference variable statement context (#heroForm)</p>

From b0b9a2eb42707d74ccf9f2992956ba157c03bc41 Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Fri, 26 Oct 2018 23:27:45 +0800
Subject: [PATCH 117/177] refactor

---
 src/language-html/utils.js | 36 ++++++++++++++++++++++++++++--------
 1 file changed, 28 insertions(+), 8 deletions(-)

diff --git a/src/language-html/utils.js b/src/language-html/utils.js
index 2aec387a51d0..2d80c36f4ee0 100644
--- a/src/language-html/utils.js
+++ b/src/language-html/utils.js
@@ -127,12 +127,12 @@ function isLeadingSpaceSensitiveNode(node, { prev, parent }) {
     !prev &&
     (parent.type === "root" ||
       isScriptLikeTag(parent) ||
-      isBlockLikeCssDisplay(parent.cssDisplay))
+      !isFirstChildLeadingSpaceSensitiveCssDisplay(parent.cssDisplay))
   ) {
     return false;
   }
 
-  if (prev && isBlockLikeCssDisplay(prev.cssDisplay)) {
+  if (prev && !isNextLeadingSpaceSensitiveCssDisplay(prev.cssDisplay)) {
     return false;
   }
 
@@ -156,12 +156,12 @@ function isTrailingSpaceSensitiveNode(node, { next, parent }) {
     !next &&
     (parent.type === "root" ||
       isScriptLikeTag(parent) ||
-      isBlockLikeCssDisplay(parent.cssDisplay))
+      !isLastChildTrailingSpaceSensitiveCssDisplay(parent.cssDisplay))
   ) {
     return false;
   }
 
-  if (next && isBlockLikeCssDisplay(next.cssDisplay)) {
+  if (next && !isPrevTrailingSpaceSensitiveCssDisplay(next.cssDisplay)) {
     return false;
   }
 
@@ -169,7 +169,10 @@ function isTrailingSpaceSensitiveNode(node, { next, parent }) {
 }
 
 function isDanglingSpaceSensitiveNode(node) {
-  return !isBlockLikeCssDisplay(node.cssDisplay) && !isScriptLikeTag(node);
+  return (
+    isDanglingSpaceSensitiveCssDisplay(node.cssDisplay) &&
+    !isScriptLikeTag(node)
+  );
 }
 
 /**
@@ -322,9 +325,6 @@ function inferScriptParser(node) {
   return null;
 }
 
-/**
- * firstChild leadingSpaces, lastChild trailingSpaces, and danglingSpaces are insensitive
- */
 function isBlockLikeCssDisplay(cssDisplay) {
   return (
     cssDisplay === "block" ||
@@ -333,6 +333,26 @@ function isBlockLikeCssDisplay(cssDisplay) {
   );
 }
 
+function isFirstChildLeadingSpaceSensitiveCssDisplay(cssDisplay) {
+  return !isBlockLikeCssDisplay(cssDisplay);
+}
+
+function isLastChildTrailingSpaceSensitiveCssDisplay(cssDisplay) {
+  return !isBlockLikeCssDisplay(cssDisplay);
+}
+
+function isPrevTrailingSpaceSensitiveCssDisplay(cssDisplay) {
+  return !isBlockLikeCssDisplay(cssDisplay);
+}
+
+function isNextLeadingSpaceSensitiveCssDisplay(cssDisplay) {
+  return !isBlockLikeCssDisplay(cssDisplay);
+}
+
+function isDanglingSpaceSensitiveCssDisplay(cssDisplay) {
+  return !isBlockLikeCssDisplay(cssDisplay);
+}
+
 function isPreLikeNode(node) {
   return getNodeCssStyleWhiteSpace(node).startsWith("pre");
 }

From be9ecdf5c9a21f6199ce57632cf22d227a1167d8 Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Fri, 26 Oct 2018 23:49:21 +0800
Subject: [PATCH 118/177] test: add tests

---
 .../__snapshots__/jsfmt.spec.js.snap          | 42 +++++++++++++++++++
 .../html_whitespace/display-inline-block.html | 11 +++++
 2 files changed, 53 insertions(+)
 create mode 100644 tests/html_whitespace/display-inline-block.html

diff --git a/tests/html_whitespace/__snapshots__/jsfmt.spec.js.snap b/tests/html_whitespace/__snapshots__/jsfmt.spec.js.snap
index cbf06e0fff6b..0bf0eb910560 100644
--- a/tests/html_whitespace/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_whitespace/__snapshots__/jsfmt.spec.js.snap
@@ -13,6 +13,48 @@ exports[`break-tags.html - html-verify 1`] = `
 
 `;
 
+exports[`display-inline-block.html - html-verify 1`] = `
+<button>Click here! Click here! Click here! Click here! Click here! Click here!</button>
+<button>
+Click here! Click here! Click here! Click here! Click here! Click here!
+</button>
+<div>
+<button>Click here! Click here! Click here! Click here! Click here! Click here!</button><button>Click here! Click here! Click here! Click here! Click here! Click here!</button>
+</div>
+<div>
+<button>Click here! Click here! Click here! Click here! Click here! Click here!</button>
+<button>Click here! Click here! Click here! Click here! Click here! Click here!</button>
+</div>
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+<button
+  >Click here! Click here! Click here! Click here! Click here! Click
+  here!</button
+>
+<button>
+  Click here! Click here! Click here! Click here! Click here! Click here!
+</button>
+<div>
+  <button
+    >Click here! Click here! Click here! Click here! Click here! Click
+    here!</button
+  ><button
+    >Click here! Click here! Click here! Click here! Click here! Click
+    here!</button
+  >
+</div>
+<div>
+  <button
+    >Click here! Click here! Click here! Click here! Click here! Click
+    here!</button
+  >
+  <button
+    >Click here! Click here! Click here! Click here! Click here! Click
+    here!</button
+  >
+</div>
+
+`;
+
 exports[`display-none.html - html-verify 1`] = `
 <!DOCTYPE html><HTML CLASS="no-js mY-ClAsS"><HEAD><META CHARSET="utf-8"><TITLE>My tITlE</TITLE><META NAME="description" content="My CoNtEnT"></HEAD></HTML>
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
diff --git a/tests/html_whitespace/display-inline-block.html b/tests/html_whitespace/display-inline-block.html
new file mode 100644
index 000000000000..263669e85831
--- /dev/null
+++ b/tests/html_whitespace/display-inline-block.html
@@ -0,0 +1,11 @@
+<button>Click here! Click here! Click here! Click here! Click here! Click here!</button>
+<button>
+Click here! Click here! Click here! Click here! Click here! Click here!
+</button>
+<div>
+<button>Click here! Click here! Click here! Click here! Click here! Click here!</button><button>Click here! Click here! Click here! Click here! Click here! Click here!</button>
+</div>
+<div>
+<button>Click here! Click here! Click here! Click here! Click here! Click here!</button>
+<button>Click here! Click here! Click here! Click here! Click here! Click here!</button>
+</div>

From d52524e1b3ef40801098b8ed619f17be78300f2f Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Fri, 26 Oct 2018 23:51:05 +0800
Subject: [PATCH 119/177] fix: leading/trailing spaces in inline-block are
 insensitive

---
 src/language-html/constants.evaluate.js       |  5 +-
 src/language-html/utils.js                    |  6 +--
 .../__snapshots__/jsfmt.spec.js.snap          | 28 +++++-----
 .../__snapshots__/jsfmt.spec.js.snap          | 54 +++++++++----------
 .../__snapshots__/jsfmt.spec.js.snap          | 28 +++++-----
 .../__snapshots__/jsfmt.spec.js.snap          | 33 +++++-------
 6 files changed, 78 insertions(+), 76 deletions(-)

diff --git a/src/language-html/constants.evaluate.js b/src/language-html/constants.evaluate.js
index c56fc7f01b52..7cfec6031c05 100644
--- a/src/language-html/constants.evaluate.js
+++ b/src/language-html/constants.evaluate.js
@@ -17,7 +17,10 @@ const getCssStyleTags = property =>
     )
     .reduce((reduced, value) => Object.assign(reduced, value), {});
 
-const CSS_DISPLAY_TAGS = getCssStyleTags("display");
+const CSS_DISPLAY_TAGS = Object.assign({}, getCssStyleTags("display"), {
+  // TODO: send PR to upstream
+  button: "inline-block"
+});
 const CSS_DISPLAY_DEFAULT = "inline";
 const CSS_WHITE_SPACE_TAGS = getCssStyleTags("white-space");
 const CSS_WHITE_SPACE_DEFAULT = "normal";
diff --git a/src/language-html/utils.js b/src/language-html/utils.js
index 2d80c36f4ee0..1eac3ab4c629 100644
--- a/src/language-html/utils.js
+++ b/src/language-html/utils.js
@@ -334,11 +334,11 @@ function isBlockLikeCssDisplay(cssDisplay) {
 }
 
 function isFirstChildLeadingSpaceSensitiveCssDisplay(cssDisplay) {
-  return !isBlockLikeCssDisplay(cssDisplay);
+  return !isBlockLikeCssDisplay(cssDisplay) && cssDisplay !== "inline-block";
 }
 
 function isLastChildTrailingSpaceSensitiveCssDisplay(cssDisplay) {
-  return !isBlockLikeCssDisplay(cssDisplay);
+  return !isBlockLikeCssDisplay(cssDisplay) && cssDisplay !== "inline-block";
 }
 
 function isPrevTrailingSpaceSensitiveCssDisplay(cssDisplay) {
@@ -350,7 +350,7 @@ function isNextLeadingSpaceSensitiveCssDisplay(cssDisplay) {
 }
 
 function isDanglingSpaceSensitiveCssDisplay(cssDisplay) {
-  return !isBlockLikeCssDisplay(cssDisplay);
+  return !isBlockLikeCssDisplay(cssDisplay) && cssDisplay !== "inline-block";
 }
 
 function isPreLikeNode(node) {
diff --git a/tests/html_angular/__snapshots__/jsfmt.spec.js.snap b/tests/html_angular/__snapshots__/jsfmt.spec.js.snap
index e5330c785788..e2f85320720a 100644
--- a/tests/html_angular/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_angular/__snapshots__/jsfmt.spec.js.snap
@@ -1331,7 +1331,7 @@ can be found in the LICENSE file at http://angular.io/license
 <div [class.special]="isSpecial">Special</div>
 <br /><br />
 
-<button [style.color]="isSpecial ? 'red' : 'green'"> button</button>
+<button [style.color]="isSpecial ? 'red' : 'green'">button</button>
 
 <a class="to-toc" href="#toc">top</a>
 
@@ -1357,9 +1357,9 @@ can be found in the LICENSE file at http://angular.io/license
 <button disabled>disabled by attribute</button>
 <button [disabled]="isUnchanged">disabled by property binding</button>
 <br /><br />
-<button bind-disabled="isUnchanged" on-click="onSave($event)"
-  >Disabled Cancel</button
->
+<button bind-disabled="isUnchanged" on-click="onSave($event)">
+  Disabled Cancel
+</button>
 <button [disabled]="!canSave" (click)="onSave($event)">Enabled Save</button>
 
 <a class="to-toc" href="#toc">top</a>
@@ -1908,9 +1908,9 @@ without NgModel <br />
 <p>
   The name of the Color.Red enum is {{Color[Color.Red]}}.<br />
   The current color is {{Color[color]}} and its number is {{color}}.<br />
-  <button [style.color]="Color[color]" (click)="colorToggle()"
-    >Enum Toggle</button
-  >
+  <button [style.color]="Color[color]" (click)="colorToggle()">
+    Enum Toggle
+  </button>
 </p>
 
 <a class="to-toc" href="#toc">top</a>
@@ -2818,7 +2818,7 @@ can be found in the LICENSE file at http://angular.io/license
 <div [class.special]="isSpecial">Special</div>
 <br /><br />
 
-<button [style.color]="isSpecial ? 'red' : 'green'"> button</button>
+<button [style.color]="isSpecial ? 'red' : 'green'">button</button>
 
 <a class="to-toc" href="#toc">top</a>
 
@@ -2844,9 +2844,9 @@ can be found in the LICENSE file at http://angular.io/license
 <button disabled>disabled by attribute</button>
 <button [disabled]="isUnchanged">disabled by property binding</button>
 <br /><br />
-<button bind-disabled="isUnchanged" on-click="onSave($event)"
-  >Disabled Cancel</button
->
+<button bind-disabled="isUnchanged" on-click="onSave($event)">
+  Disabled Cancel
+</button>
 <button [disabled]="!canSave" (click)="onSave($event)">Enabled Save</button>
 
 <a class="to-toc" href="#toc">top</a>
@@ -3395,9 +3395,9 @@ without NgModel <br />
 <p>
   The name of the Color.Red enum is {{Color[Color.Red]}}.<br />
   The current color is {{Color[color]}} and its number is {{color}}.<br />
-  <button [style.color]="Color[color]" (click)="colorToggle()"
-    >Enum Toggle</button
-  >
+  <button [style.color]="Color[color]" (click)="colorToggle()">
+    Enum Toggle
+  </button>
 </p>
 
 <a class="to-toc" href="#toc">top</a>
diff --git a/tests/html_attributes/__snapshots__/jsfmt.spec.js.snap b/tests/html_attributes/__snapshots__/jsfmt.spec.js.snap
index dbdf774ea5ae..cbf575a57847 100644
--- a/tests/html_attributes/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_attributes/__snapshots__/jsfmt.spec.js.snap
@@ -175,33 +175,33 @@ exports[`boolean.html - html-verify 1`] = `
 <button type="submit" disabled>This is valid.</button>
 <button type="submit" disabled="">This is valid.</button>
 <button type="submit" disabled="disabled">This is valid.</button>
-<button type="submit" disabled="true"
-  >This is valid. This will be disabled.</button
->
-<button type="submit" disabled="true"
-  >This is valid. This will be disabled.</button
->
-<button type="submit" disabled="true"
-  >This is valid. This will be disabled.</button
->
-<button type="submit" disabled="false"
-  >This is valid. This will be disabled.</button
->
-<button type="submit" disabled="false"
-  >This is valid. This will be disabled.</button
->
-<button type="submit" disabled="false"
-  >This is valid. This will be disabled.</button
->
-<button type="submit" disabled="hahah"
-  >This is valid. This will be disabled.</button
->
-<button type="submit" disabled="hahah"
-  >This is valid. This will be disabled.</button
->
-<button type="submit" disabled="hahah"
-  >This is valid. This will be disabled.</button
->
+<button type="submit" disabled="true">
+  This is valid. This will be disabled.
+</button>
+<button type="submit" disabled="true">
+  This is valid. This will be disabled.
+</button>
+<button type="submit" disabled="true">
+  This is valid. This will be disabled.
+</button>
+<button type="submit" disabled="false">
+  This is valid. This will be disabled.
+</button>
+<button type="submit" disabled="false">
+  This is valid. This will be disabled.
+</button>
+<button type="submit" disabled="false">
+  This is valid. This will be disabled.
+</button>
+<button type="submit" disabled="hahah">
+  This is valid. This will be disabled.
+</button>
+<button type="submit" disabled="hahah">
+  This is valid. This will be disabled.
+</button>
+<button type="submit" disabled="hahah">
+  This is valid. This will be disabled.
+</button>
 <input type="checkbox" checked disabled name="cheese" />
 <input type="checkbox" checked="checked" disabled="disabled" name="cheese" />
 <input type="checkbox" checked="" disabled="" name="cheese" />
diff --git a/tests/html_tags/__snapshots__/jsfmt.spec.js.snap b/tests/html_tags/__snapshots__/jsfmt.spec.js.snap
index bb54a039d3fa..99ab59800fbe 100644
--- a/tests/html_tags/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_tags/__snapshots__/jsfmt.spec.js.snap
@@ -1602,16 +1602,16 @@ exports[`tags.html - html-verify 1`] = `
 <button xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx>12345678901234567890</button>
 <br /><br />
 
-<button bind-disabled="isUnchanged" on-click="onSave($event)"
-  >Disabled Cancel</button
->
+<button bind-disabled="isUnchanged" on-click="onSave($event)">
+  Disabled Cancel
+</button>
 <br /><br />
 <button xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx>12345678901234567890</button>
 <br /><br />
 
-<button bind-disabled="isUnchanged" on-click="onSave($event)"
-  >Disabled Cancel</button
->
+<button bind-disabled="isUnchanged" on-click="onSave($event)">
+  Disabled Cancel
+</button>
 <br /><br />
 <p>"<span [innerHTML]="title"></span>" is the <i>property bound</i> title.</p>
 <li>
@@ -1985,29 +1985,33 @@ exports[`tags.html - html-verify 2`] = `
 <br />
 <button
   xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
-  >12345678901234567890</button
 >
+  12345678901234567890
+</button>
 <br /><br />
 
 <button
   bind-disabled="isUnchanged"
   on-click="onSave($event)"
-  >Disabled
-  Cancel</button
 >
+  Disabled
+  Cancel
+</button>
 <br /><br />
 <button
   xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
-  >12345678901234567890</button
 >
+  12345678901234567890
+</button>
 <br /><br />
 
 <button
   bind-disabled="isUnchanged"
   on-click="onSave($event)"
-  >Disabled
-  Cancel</button
 >
+  Disabled
+  Cancel
+</button>
 <br /><br />
 <p>
   "<span
diff --git a/tests/html_whitespace/__snapshots__/jsfmt.spec.js.snap b/tests/html_whitespace/__snapshots__/jsfmt.spec.js.snap
index 0bf0eb910560..f6a55bd97383 100644
--- a/tests/html_whitespace/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_whitespace/__snapshots__/jsfmt.spec.js.snap
@@ -26,31 +26,26 @@ Click here! Click here! Click here! Click here! Click here! Click here!
 <button>Click here! Click here! Click here! Click here! Click here! Click here!</button>
 </div>
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-<button
-  >Click here! Click here! Click here! Click here! Click here! Click
-  here!</button
->
+<button>
+  Click here! Click here! Click here! Click here! Click here! Click here!
+</button>
 <button>
   Click here! Click here! Click here! Click here! Click here! Click here!
 </button>
 <div>
-  <button
-    >Click here! Click here! Click here! Click here! Click here! Click
-    here!</button
-  ><button
-    >Click here! Click here! Click here! Click here! Click here! Click
-    here!</button
-  >
+  <button>
+    Click here! Click here! Click here! Click here! Click here! Click here!</button
+  ><button>
+    Click here! Click here! Click here! Click here! Click here! Click here!
+  </button>
 </div>
 <div>
-  <button
-    >Click here! Click here! Click here! Click here! Click here! Click
-    here!</button
-  >
-  <button
-    >Click here! Click here! Click here! Click here! Click here! Click
-    here!</button
-  >
+  <button>
+    Click here! Click here! Click here! Click here! Click here! Click here!
+  </button>
+  <button>
+    Click here! Click here! Click here! Click here! Click here! Click here!
+  </button>
 </div>
 
 `;

From 0cc6987e96c59b2ad75bf360a981210019ed0750 Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Sat, 27 Oct 2018 17:08:11 +0800
Subject: [PATCH 120/177] test: add tests

---
 .../html_whitespace/__snapshots__/jsfmt.spec.js.snap | 12 ++++++++++++
 tests/html_whitespace/display-inline-block.html      |  1 +
 2 files changed, 13 insertions(+)

diff --git a/tests/html_whitespace/__snapshots__/jsfmt.spec.js.snap b/tests/html_whitespace/__snapshots__/jsfmt.spec.js.snap
index f6a55bd97383..c49434ceeaff 100644
--- a/tests/html_whitespace/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_whitespace/__snapshots__/jsfmt.spec.js.snap
@@ -25,6 +25,7 @@ Click here! Click here! Click here! Click here! Click here! Click here!
 <button>Click here! Click here! Click here! Click here! Click here! Click here!</button>
 <button>Click here! Click here! Click here! Click here! Click here! Click here!</button>
 </div>
+<video src="brave.webm"><track kind=subtitles src=brave.en.vtt srclang=en label="English"><track kind=subtitles src=brave.en.vtt srclang=en label="English"></video>
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 <button>
   Click here! Click here! Click here! Click here! Click here! Click here!
@@ -47,6 +48,17 @@ Click here! Click here! Click here! Click here! Click here! Click here!
     Click here! Click here! Click here! Click here! Click here! Click here!
   </button>
 </div>
+<video src="brave.webm"
+  ><track
+    kind="subtitles"
+    src="brave.en.vtt"
+    srclang="en"
+    label="English"/><track
+    kind="subtitles"
+    src="brave.en.vtt"
+    srclang="en"
+    label="English"
+/></video>
 
 `;
 
diff --git a/tests/html_whitespace/display-inline-block.html b/tests/html_whitespace/display-inline-block.html
index 263669e85831..dbfd8c45f36d 100644
--- a/tests/html_whitespace/display-inline-block.html
+++ b/tests/html_whitespace/display-inline-block.html
@@ -9,3 +9,4 @@
 <button>Click here! Click here! Click here! Click here! Click here! Click here!</button>
 <button>Click here! Click here! Click here! Click here! Click here! Click here!</button>
 </div>
+<video src="brave.webm"><track kind=subtitles src=brave.en.vtt srclang=en label="English"><track kind=subtitles src=brave.en.vtt srclang=en label="English"></video>

From 73283a3c83acd48dcc2d68557c58a9ded2f4592e Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Sat, 27 Oct 2018 17:23:27 +0800
Subject: [PATCH 121/177] fix: add css display for video, audio, source and
 track

---
 src/language-html/constants.evaluate.js           | 11 ++++++++++-
 src/language-html/utils.js                        |  3 ---
 tests/html_tags/__snapshots__/jsfmt.spec.js.snap  | 10 +++++++---
 .../__snapshots__/jsfmt.spec.js.snap              | 15 ++++-----------
 4 files changed, 21 insertions(+), 18 deletions(-)

diff --git a/src/language-html/constants.evaluate.js b/src/language-html/constants.evaluate.js
index 7cfec6031c05..2ce6efaf500b 100644
--- a/src/language-html/constants.evaluate.js
+++ b/src/language-html/constants.evaluate.js
@@ -19,7 +19,16 @@ const getCssStyleTags = property =>
 
 const CSS_DISPLAY_TAGS = Object.assign({}, getCssStyleTags("display"), {
   // TODO: send PR to upstream
-  button: "inline-block"
+  button: "inline-block",
+
+  // special cases for some css display=none elements
+  template: "inline",
+  source: "block",
+  track: "block",
+
+  // there's no css display for these elements but they behave these ways
+  video: "inline-block",
+  audio: "inline-block"
 });
 const CSS_DISPLAY_DEFAULT = "inline";
 const CSS_WHITE_SPACE_TAGS = getCssStyleTags("white-space");
diff --git a/src/language-html/utils.js b/src/language-html/utils.js
index 1eac3ab4c629..0307612d6589 100644
--- a/src/language-html/utils.js
+++ b/src/language-html/utils.js
@@ -388,9 +388,6 @@ function getNodeCssStyleDisplay(node, prevNode, options) {
     case "ignore":
       return "block";
     default:
-      if (isElement(node, "template")) {
-        return "inline";
-      }
       return (
         (isElement(node) && CSS_DISPLAY_TAGS[node.name]) || CSS_DISPLAY_DEFAULT
       );
diff --git a/tests/html_tags/__snapshots__/jsfmt.spec.js.snap b/tests/html_tags/__snapshots__/jsfmt.spec.js.snap
index 99ab59800fbe..b344f2af6400 100644
--- a/tests/html_tags/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_tags/__snapshots__/jsfmt.spec.js.snap
@@ -1539,8 +1539,8 @@ exports[`tags.html - html-verify 1`] = `
 </div>
 <video width="320" height="240" controls>
   <source src="movie.mp4" type="video/mp4" />
-  <source src="movie.ogg" type="video/ogg" /> Your browser does not support the
-  video tag.
+  <source src="movie.ogg" type="video/ogg" />
+  Your browser does not support the video tag.
 </video>
 <div><div>string</div></div>
 <div>
@@ -2141,7 +2141,11 @@ exports[`tags.html - html-verify 3`] = `
 <div attribute="value">very very very very very very very very very very very very very very very very long string</div>
 <div attribute="value" attributea="value" attributeb="value" attributec="value" attributed="value" attributef="value">string</div>
 <div attribute="value" attributea="value" attributeb="value" attributec="value" attributed="value" attributef="value">very very very very very very very very very very very very very very very very long string</div>
-<video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4" /> <source src="movie.ogg" type="video/ogg" /> Your browser does not support the video tag. </video>
+<video width="320" height="240" controls>
+  <source src="movie.mp4" type="video/mp4" />
+  <source src="movie.ogg" type="video/ogg" />
+  Your browser does not support the video tag.
+</video>
 <div><div>string</div></div>
 <div>
   <div>string</div>
diff --git a/tests/html_whitespace/__snapshots__/jsfmt.spec.js.snap b/tests/html_whitespace/__snapshots__/jsfmt.spec.js.snap
index c49434ceeaff..379e1e7cf0f3 100644
--- a/tests/html_whitespace/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_whitespace/__snapshots__/jsfmt.spec.js.snap
@@ -48,17 +48,10 @@ Click here! Click here! Click here! Click here! Click here! Click here!
     Click here! Click here! Click here! Click here! Click here! Click here!
   </button>
 </div>
-<video src="brave.webm"
-  ><track
-    kind="subtitles"
-    src="brave.en.vtt"
-    srclang="en"
-    label="English"/><track
-    kind="subtitles"
-    src="brave.en.vtt"
-    srclang="en"
-    label="English"
-/></video>
+<video src="brave.webm">
+  <track kind="subtitles" src="brave.en.vtt" srclang="en" label="English" />
+  <track kind="subtitles" src="brave.en.vtt" srclang="en" label="English" />
+</video>
 
 `;
 

From ee952e6b690a325909dcdda3b4d1162271a7a7e6 Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Sat, 27 Oct 2018 21:33:45 +0800
Subject: [PATCH 122/177] chore(deps): remove unused dependency

---
 package.json |  1 -
 yarn.lock    | 12 ------------
 2 files changed, 13 deletions(-)

diff --git a/package.json b/package.json
index 788adeb5aaa8..c22be2a0fe57 100644
--- a/package.json
+++ b/package.json
@@ -54,7 +54,6 @@
     "minimist": "1.2.0",
     "n-readlines": "1.0.0",
     "normalize-path": "3.0.0",
-    "parse5-htmlparser2-tree-adapter": "5.0.0",
     "postcss-less": "1.1.5",
     "postcss-media-query-parser": "0.2.3",
     "postcss-scss": "1.0.6",
diff --git a/yarn.lock b/yarn.lock
index d2c35ccd34db..d5e3bc2fb4fc 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5106,23 +5106,11 @@ parse-json@^4.0.0:
     error-ex "^1.3.1"
     json-parse-better-errors "^1.0.1"
 
-parse5-htmlparser2-tree-adapter@5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/parse5-htmlparser2-tree-adapter/-/parse5-htmlparser2-tree-adapter-5.0.0.tgz#f941eced8061ecb1bc2db744c416a037abfe64d1"
-  integrity sha512-Rco+Uuas6kYDOJTVlMjtRhSjVOcflt6LNHFJAO5xz+8mMrA23Qzlrc5gGEhl/qKZovZSZCHWtcpZTV4xGexCeg==
-  dependencies:
-    parse5 "^5.0.0"
-
 parse5@4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/parse5/-/parse5-4.0.0.tgz#6d78656e3da8d78b4ec0b906f7c08ef1dfe3f608"
   integrity sha512-VrZ7eOd3T1Fk4XWNXMgiGBK/z0MG48BWG2uQNU4I72fkQuKUTZpl+u9k+CxEG0twMVzSmXEEz12z5Fnw1jIQFA==
 
-parse5@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/parse5/-/parse5-5.0.0.tgz#4d02710d44f3c3846197a11e205d4ef17842b81a"
-  integrity sha512-0ywuiUOnpWWeil5grH2rxjyTJoeQVwyBuO2si6QIU9dWtj2npjuyK1HaY1RbLnVfDhEbhyAPNUBKRK0Xj2xE0w==
-
 pascalcase@^0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/pascalcase/-/pascalcase-0.1.1.tgz#b363e55e8006ca6fe21784d2db22bd15d7917f14"

From 423f165719396e4ed987107869eafbdf2de9609f Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Sun, 28 Oct 2018 16:13:58 +0800
Subject: [PATCH 123/177] test: add tests

---
 tests/html_angular/__snapshots__/jsfmt.spec.js.snap | 4 ++++
 tests/html_angular/interpolation.component.html     | 1 +
 2 files changed, 5 insertions(+)

diff --git a/tests/html_angular/__snapshots__/jsfmt.spec.js.snap b/tests/html_angular/__snapshots__/jsfmt.spec.js.snap
index e2f85320720a..8f3ded30ecde 100644
--- a/tests/html_angular/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_angular/__snapshots__/jsfmt.spec.js.snap
@@ -290,6 +290,7 @@ exports[`interpolation.component.html - angular-verify 1`] = `
 <div>{{ a . b }}</div>
 <div>{{ a ?. b ( ) }}</div>
 <div>{{ a ?. b }}</div>
+<div>{{  a // hello  }}</div>
 <label for="transmissionLayoutRadioButton">{{
 "SearchSelection.transmissionLayoutRadioButton" | localize:localizationSection
 }}</label>
@@ -331,6 +332,7 @@ exports[`interpolation.component.html - angular-verify 1`] = `
 <div>{{a.b}}</div>
 <div>{{a?.b()}}</div>
 <div>{{a?.b}}</div>
+<div>{{a // hello  }}</div>
 <label for="transmissionLayoutRadioButton">{{
   "SearchSelection.transmissionLayoutRadioButton" | localize:localizationSection
 }}</label>
@@ -388,6 +390,7 @@ exports[`interpolation.component.html - angular-verify 2`] = `
 <div>{{ a . b }}</div>
 <div>{{ a ?. b ( ) }}</div>
 <div>{{ a ?. b }}</div>
+<div>{{  a // hello  }}</div>
 <label for="transmissionLayoutRadioButton">{{
 "SearchSelection.transmissionLayoutRadioButton" | localize:localizationSection
 }}</label>
@@ -429,6 +432,7 @@ exports[`interpolation.component.html - angular-verify 2`] = `
 <div>{{a.b}}</div>
 <div>{{a?.b()}}</div>
 <div>{{a?.b}}</div>
+<div>{{a // hello  }}</div>
 <label for="transmissionLayoutRadioButton">{{
   "SearchSelection.transmissionLayoutRadioButton" | localize:localizationSection
 }}</label>
diff --git a/tests/html_angular/interpolation.component.html b/tests/html_angular/interpolation.component.html
index 357cb8adf900..85b40efd89a6 100644
--- a/tests/html_angular/interpolation.component.html
+++ b/tests/html_angular/interpolation.component.html
@@ -23,6 +23,7 @@
 <div>{{ a . b }}</div>
 <div>{{ a ?. b ( ) }}</div>
 <div>{{ a ?. b }}</div>
+<div>{{  a // hello  }}</div>
 <label for="transmissionLayoutRadioButton">{{
 "SearchSelection.transmissionLayoutRadioButton" | localize:localizationSection
 }}</label>

From e6cfed33e85070bac043363d0e6598a8d52b7762 Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Sun, 28 Oct 2018 16:14:11 +0800
Subject: [PATCH 124/177] feat: add spaces for interpolations Both [Vue] and
 [Angular] recommend to add spaces there.

[vue]: https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/mustache-interpolation-spacing.md
[angular]: http://codelyzer.com/rules/angular-whitespace/
---
 src/language-html/printer-html.js             |   6 +-
 src/language-js/printer-estree.js             |  12 +-
 .../__snapshots__/jsfmt.spec.js.snap          | 332 +++++++++---------
 .../html_vue/__snapshots__/jsfmt.spec.js.snap |  26 +-
 .../__snapshots__/jsfmt.spec.js.snap          |   4 +-
 5 files changed, 191 insertions(+), 189 deletions(-)

diff --git a/src/language-html/printer-html.js b/src/language-html/printer-html.js
index a7ce1b413cff..665d768e062e 100644
--- a/src/language-html/printer-html.js
+++ b/src/language-html/printer-html.js
@@ -74,7 +74,7 @@ function embed(path, print, textToDoc, options) {
         return concat([
           indent(
             concat([
-              softline,
+              line,
               textToDoc(
                 node.value,
                 options.parser === "angular"
@@ -85,8 +85,8 @@ function embed(path, print, textToDoc, options) {
           ),
           node.parent.next &&
           needsToBorrowPrevClosingTagEndMarker(node.parent.next)
-            ? ""
-            : softline
+            ? " "
+            : line
         ]);
       }
       break;
diff --git a/src/language-js/printer-estree.js b/src/language-js/printer-estree.js
index 3cb964fa5cde..e01e30196757 100644
--- a/src/language-js/printer-estree.js
+++ b/src/language-js/printer-estree.js
@@ -3390,23 +3390,15 @@ function printPathNoParens(path, options, print, args) {
 
       return concat(parts);
 
-    case "NGRoot": {
-      const shouldPrintSurroundingSpaces =
-        // avoid invalid syntax `{{{}}}`
-        options.parser === "__ng_interpolation" &&
-        n.node.type === "ObjectExpression" &&
-        n.node.comments.length === 0;
+    case "NGRoot": 
       return concat(
         [].concat(
-          shouldPrintSurroundingSpaces ? " " : [],
           path.call(print, "node"),
           !n.node.comments || n.node.comments.length === 0
             ? []
-            : concat([" //", n.node.comments[0].value]),
-          shouldPrintSurroundingSpaces ? " " : []
+            : concat([" //", n.node.comments[0].value.trimRight()])
         )
       );
-    }
     case "NGChainedExpression":
       return group(join(concat([";", line]), path.map(print, "expressions")));
     case "NGEmptyExpression":
diff --git a/tests/html_angular/__snapshots__/jsfmt.spec.js.snap b/tests/html_angular/__snapshots__/jsfmt.spec.js.snap
index 8f3ded30ecde..c9e65449396d 100644
--- a/tests/html_angular/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_angular/__snapshots__/jsfmt.spec.js.snap
@@ -93,7 +93,7 @@ exports[`attributes.component.html - angular-verify 1`] = `
   [target]="!x"
   [target]="a"
   [target]="a"
-  [target]="a // hello "
+  [target]="a // hello"
   [target]="a.b"
   [target]="javascript: 'hello world' "
   [target]="a?.b()"
@@ -102,7 +102,7 @@ exports[`attributes.component.html - angular-verify 1`] = `
   (target)="(a = 1)"
   (target)="(a.b = 1)"
   (target)="(a[b] = 1)"
-  (target)="a // hello "
+  (target)="a // hello"
   (target)="a; b"
   *ngIf="something ? true : false"
   *ngFor="let hero of heroes"
@@ -225,7 +225,7 @@ exports[`attributes.component.html - angular-verify 2`] = `
   [target]="!x"
   [target]="a"
   [target]="a"
-  [target]="a // hello "
+  [target]="a // hello"
   [target]="a.b"
   [target]="javascript: 'hello world' "
   [target]="a?.b()"
@@ -234,7 +234,7 @@ exports[`attributes.component.html - angular-verify 2`] = `
   (target)="(a = 1)"
   (target)="(a.b = 1)"
   (target)="(a[b] = 1)"
-  (target)="a // hello "
+  (target)="a // hello"
   (target)="a; b"
   *ngIf="something ? true : false"
   *ngFor="let hero of heroes"
@@ -307,32 +307,32 @@ exports[`interpolation.component.html - angular-verify 1`] = `
 "SearchSelection.transmissionLayoutRadioButton" | localize:localizationSection
 }} </label>
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-<div>{{a | b:c}}</div>
-<div>{{0 - 1}}</div>
-<div>{{-1}}</div>
-<div>{{a ? 1 : 2}}</div>
-<div>{{a(1)(2)}}</div>
-<div>{{a[b]}}</div>
-<div>{{[1]}}</div>
+<div>{{ a | b:c }}</div>
+<div>{{ 0 - 1 }}</div>
+<div>{{ -1 }}</div>
+<div>{{ a ? 1 : 2 }}</div>
+<div>{{ a(1)(2) }}</div>
+<div>{{ a[b] }}</div>
+<div>{{ [1] }}</div>
 <div>{{ { a: 1 } }}</div>
 <div>{{ { a: 1 } }}</div>
-<div>{{true}}</div>
-<div>{{undefined}}</div>
-<div>{{null}}</div>
-<div>{{1}}</div>
-<div>{{1}}</div>
-<div>{{"hello"}}</div>
-<div>{{a(1, 2)}}</div>
-<div>{{a.b(1, 2)}}</div>
-<div>{{x!}}</div>
-<div>{{!x}}</div>
-<div>{{a}}</div>
-<div>{{a}}</div>
-<div>{{a // hello }}</div>
-<div>{{a.b}}</div>
-<div>{{a?.b()}}</div>
-<div>{{a?.b}}</div>
-<div>{{a // hello  }}</div>
+<div>{{ true }}</div>
+<div>{{ undefined }}</div>
+<div>{{ null }}</div>
+<div>{{ 1 }}</div>
+<div>{{ 1 }}</div>
+<div>{{ "hello" }}</div>
+<div>{{ a(1, 2) }}</div>
+<div>{{ a.b(1, 2) }}</div>
+<div>{{ x! }}</div>
+<div>{{ !x }}</div>
+<div>{{ a }}</div>
+<div>{{ a }}</div>
+<div>{{ a // hello }}</div>
+<div>{{ a.b }}</div>
+<div>{{ a?.b() }}</div>
+<div>{{ a?.b }}</div>
+<div>{{ a // hello }}</div>
 <label for="transmissionLayoutRadioButton">{{
   "SearchSelection.transmissionLayoutRadioButton" | localize:localizationSection
 }}</label>
@@ -407,32 +407,32 @@ exports[`interpolation.component.html - angular-verify 2`] = `
 "SearchSelection.transmissionLayoutRadioButton" | localize:localizationSection
 }} </label>
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-<div>{{a | b:c}}</div>
-<div>{{0 - 1}}</div>
-<div>{{-1}}</div>
-<div>{{a ? 1 : 2}}</div>
-<div>{{a(1)(2)}}</div>
-<div>{{a[b]}}</div>
-<div>{{[1]}}</div>
+<div>{{ a | b:c }}</div>
+<div>{{ 0 - 1 }}</div>
+<div>{{ -1 }}</div>
+<div>{{ a ? 1 : 2 }}</div>
+<div>{{ a(1)(2) }}</div>
+<div>{{ a[b] }}</div>
+<div>{{ [1] }}</div>
 <div>{{ { a: 1 } }}</div>
 <div>{{ { a: 1 } }}</div>
-<div>{{true}}</div>
-<div>{{undefined}}</div>
-<div>{{null}}</div>
-<div>{{1}}</div>
-<div>{{1}}</div>
-<div>{{"hello"}}</div>
-<div>{{a(1, 2)}}</div>
-<div>{{a.b(1, 2)}}</div>
-<div>{{x!}}</div>
-<div>{{!x}}</div>
-<div>{{a}}</div>
-<div>{{a}}</div>
-<div>{{a // hello }}</div>
-<div>{{a.b}}</div>
-<div>{{a?.b()}}</div>
-<div>{{a?.b}}</div>
-<div>{{a // hello  }}</div>
+<div>{{ true }}</div>
+<div>{{ undefined }}</div>
+<div>{{ null }}</div>
+<div>{{ 1 }}</div>
+<div>{{ 1 }}</div>
+<div>{{ "hello" }}</div>
+<div>{{ a(1, 2) }}</div>
+<div>{{ a.b(1, 2) }}</div>
+<div>{{ x! }}</div>
+<div>{{ !x }}</div>
+<div>{{ a }}</div>
+<div>{{ a }}</div>
+<div>{{ a // hello }}</div>
+<div>{{ a.b }}</div>
+<div>{{ a?.b() }}</div>
+<div>{{ a?.b }}</div>
+<div>{{ a // hello }}</div>
 <label for="transmissionLayoutRadioButton">{{
   "SearchSelection.transmissionLayoutRadioButton" | localize:localizationSection
 }}</label>
@@ -1232,15 +1232,15 @@ can be found in the LICENSE file at http://angular.io/license
 <hr />
 <h2 id="interpolation">Interpolation</h2>
 
-<p>My current hero is {{currentHero.name}}</p>
+<p>My current hero is {{ currentHero.name }}</p>
 
-<h3>{{title}} <img src="{{heroImageUrl}}" style="height:30px" /></h3>
+<h3>{{ title }} <img src="{{heroImageUrl}}" style="height:30px" /></h3>
 
 <!-- "The sum of 1 + 1 is 2" -->
-<p>The sum of 1 + 1 is {{1 + 1}}</p>
+<p>The sum of 1 + 1 is {{ 1 + 1 }}</p>
 
 <!-- "The sum of 1 + 1 is not 4" -->
-<p>The sum of 1 + 1 is not {{1 + 1 + getVal()}}</p>
+<p>The sum of 1 + 1 is not {{ 1 + 1 + getVal() }}</p>
 
 <a class="to-toc" href="#toc">top</a>
 
@@ -1251,17 +1251,19 @@ can be found in the LICENSE file at http://angular.io/license
   Component expression context (&#123;&#123;title&#125;&#125;,
   [hidden]="isUnchanged")
 </p>
-<div class="context">{{title}} <span [hidden]="isUnchanged">changed</span></div>
+<div class="context">
+  {{ title }} <span [hidden]="isUnchanged">changed</span>
+</div>
 
 <p>Template input variable expression context (let hero)</p>
 <!-- template hides the following; plenty of examples later -->
 <ng-template>
-  <div *ngFor="let hero of heroes">{{hero.name}}</div>
+  <div *ngFor="let hero of heroes">{{ hero.name }}</div>
 </ng-template>
 
 <p>Template reference variable expression context (#heroInput)</p>
 <div (keyup)="0" class="context">
-  Type something: <input #heroInput /> {{heroInput.value}}
+  Type something: <input #heroInput /> {{ heroInput.value }}
 </div>
 
 <a class="to-toc" href="#toc">top</a>
@@ -1325,9 +1327,9 @@ can be found in the LICENSE file at http://angular.io/license
 <button (click)="onSave()">Save</button>
 <app-hero-detail (deleteRequest)="deleteHero()"></app-hero-detail>
 <div (myClick)="(clicked = $event)" clickable>click me</div>
-{{clicked}} <br /><br />
+{{ clicked }} <br /><br />
 
-<div>Hero Name: <input [(ngModel)]="name" /> {{name}}</div>
+<div>Hero Name: <input [(ngModel)]="name" /> {{ name }}</div>
 <br /><br />
 
 <button [attr.aria-label]="help">help</button> <br /><br />
@@ -1389,7 +1391,7 @@ can be found in the LICENSE file at http://angular.io/license
 <p><img [src]="heroImageUrl" /> is the <i>property bound</i> image.</p>
 
 <p>
-  <span>"{{title}}" is the <i>interpolated</i> title.</span>
+  <span>"{{ title }}" is the <i>interpolated</i> title.</span>
 </p>
 <p>"<span [innerHTML]="title"></span>" is the <i>property bound</i> title.</p>
 
@@ -1398,7 +1400,7 @@ can be found in the LICENSE file at http://angular.io/license
   WARNING: sanitizing HTML stripped some content (see http://g.co/ng/security#xss).
 -->
 <p>
-  <span>"{{evilTitle}}" is the <i>interpolated</i> evil title.</span>
+  <span>"{{ evilTitle }}" is the <i>interpolated</i> evil title.</span>
 </p>
 <p>
   "<span [innerHTML]="evilTitle"></span>" is the <i>property bound</i> evil
@@ -1431,7 +1433,7 @@ can be found in the LICENSE file at http://angular.io/license
 
 <br />
 <!-- create and set an aria attribute for assistive technology -->
-<button [attr.aria-label]="actionName">{{actionName}} with Aria</button>
+<button [attr.aria-label]="actionName">{{ actionName }} with Aria</button>
 <br /><br />
 
 <!-- The following effects are not discussed in the chapter -->
@@ -1492,7 +1494,7 @@ can be found in the LICENSE file at http://angular.io/license
 <div>
   <!-- \`myClick\` is an event on the custom \`ClickDirective\` -->
   <div (myClick)="(clickMessage = $event)" clickable>click with myClick</div>
-  {{clickMessage}}
+  {{ clickMessage }}
 </div>
 
 <!-- binding to a nested component -->
@@ -1547,7 +1549,7 @@ can be found in the LICENSE file at http://angular.io/license
 <hr />
 <h2 id="ngModel">NgModel (two-way) Binding</h2>
 
-<h3>Result: {{currentHero.name}}</h3>
+<h3>Result: {{ currentHero.name }}</h3>
 
 <input
   [value]="currentHero.name"
@@ -1573,7 +1575,7 @@ without NgModel <br />
 <hr />
 <h2 id="ngClass">NgClass Binding</h2>
 
-<p>currentClasses is {{currentClasses | json}}</p>
+<p>currentClasses is {{ currentClasses | json }}</p>
 <div [ngClass]="currentClasses">
   This div is initially saveable, unchanged, and special
 </div>
@@ -1592,9 +1594,9 @@ without NgModel <br />
 <button (click)="setCurrentClasses()">Refresh currentClasses</button>
 <br /><br />
 <div [ngClass]="currentClasses">
-  This div should be {{canSave ? "" : "not"}} saveable,
-  {{isUnchanged ? "unchanged" : "modified"}} and,
-  {{isSpecial ? "" : "not"}} special after clicking "Refresh".
+  This div should be {{ canSave ? "" : "not" }} saveable,
+  {{ isUnchanged ? "unchanged" : "modified" }} and,
+  {{ isSpecial ? "" : "not" }} special after clicking "Refresh".
 </div>
 <br /><br />
 
@@ -1614,7 +1616,7 @@ without NgModel <br />
 </div>
 
 <h3>[ngStyle] binding to currentStyles - CSS property names</h3>
-<p>currentStyles is {{currentStyles | json}}</p>
+<p>currentStyles is {{ currentStyles | json }}</p>
 <div [ngStyle]="currentStyles">
   This div is initially italic, normal weight, and extra large (24px).
 </div>
@@ -1626,9 +1628,9 @@ without NgModel <br />
 <label>xlarge: <input type="checkbox" [(ngModel)]="isSpecial"/></label>
 <button (click)="setCurrentStyles()">Refresh currentStyles</button> <br /><br />
 <div [ngStyle]="currentStyles">
-  This div should be {{canSave ? "italic" : "plain"}},
-  {{isUnchanged ? "normal weight" : "bold"}} and,
-  {{isSpecial ? "extra large" : "normal size"}} after clicking "Refresh".
+  This div should be {{ canSave ? "italic" : "plain" }},
+  {{ isUnchanged ? "normal weight" : "bold" }} and,
+  {{ isSpecial ? "extra large" : "normal size" }} after clicking "Refresh".
 </div>
 
 <a class="to-toc" href="#toc">top</a>
@@ -1639,13 +1641,13 @@ without NgModel <br />
 
 <app-hero-detail *ngIf="isActive"></app-hero-detail>
 
-<div *ngIf="currentHero">Hello, {{currentHero.name}}</div>
-<div *ngIf="nullHero">Hello, {{nullHero.name}}</div>
+<div *ngIf="currentHero">Hello, {{ currentHero.name }}</div>
+<div *ngIf="nullHero">Hello, {{ nullHero.name }}</div>
 
 <!-- NgIf binding with template (no *) -->
 
 <ng-template [ngIf]="currentHero"
-  >Add {{currentHero.name}} with template</ng-template
+  >Add {{ currentHero.name }} with template</ng-template
 >
 
 <!-- Does not show because isActive is false! -->
@@ -1671,7 +1673,7 @@ without NgModel <br />
 <h2 id="ngFor">NgFor Binding</h2>
 
 <div class="box">
-  <div *ngFor="let hero of heroes">{{hero.name}}</div>
+  <div *ngFor="let hero of heroes">{{ hero.name }}</div>
 </div>
 <br />
 
@@ -1686,7 +1688,7 @@ without NgModel <br />
 <p>with <i>semi-colon</i> separator</p>
 <div class="box">
   <div *ngFor="let hero of heroes; let i = index">
-    {{i + 1}} - {{hero.name}}
+    {{ i + 1 }} - {{ hero.name }}
   </div>
 </div>
 
@@ -1694,7 +1696,7 @@ without NgModel <br />
 <div class="box">
   <!-- Ex: "1 - Hercules" -->
   <div *ngFor="let hero of heroes; let i = index">
-    {{i + 1}} - {{hero.name}}
+    {{ i + 1 }} - {{ hero.name }}
   </div>
 </div>
 
@@ -1707,21 +1709,23 @@ without NgModel <br />
 
 <p><i>without</i> trackBy</p>
 <div class="box">
-  <div #noTrackBy *ngFor="let hero of heroes">({{hero.id}}) {{hero.name}}</div>
+  <div #noTrackBy *ngFor="let hero of heroes">
+    ({{ hero.id }}) {{ hero.name }}
+  </div>
 
   <div id="noTrackByCnt" *ngIf="heroesNoTrackByCount">
-    Hero DOM elements change #{{heroesNoTrackByCount}} without trackBy
+    Hero DOM elements change #{{ heroesNoTrackByCount }} without trackBy
   </div>
 </div>
 
 <p>with trackBy</p>
 <div class="box">
   <div #withTrackBy *ngFor="let hero of heroes; trackBy: trackByHeroes">
-    ({{hero.id}}) {{hero.name}}
+    ({{ hero.id }}) {{ hero.name }}
   </div>
 
   <div id="withTrackByCnt" *ngIf="heroesWithTrackByCount">
-    Hero DOM elements change #{{heroesWithTrackByCount}} with trackBy
+    Hero DOM elements change #{{ heroesWithTrackByCount }} with trackBy
   </div>
 </div>
 
@@ -1730,28 +1734,28 @@ without NgModel <br />
 <p>with trackBy and <i>semi-colon</i> separator</p>
 <div class="box">
   <div *ngFor="let hero of heroes; trackBy: trackByHeroes">
-    ({{hero.id}}) {{hero.name}}
+    ({{ hero.id }}) {{ hero.name }}
   </div>
 </div>
 
 <p>with trackBy and <i>comma</i> separator</p>
 <div class="box">
   <div *ngFor="let hero of heroes; trackBy: trackByHeroes">
-    ({{hero.id}}) {{hero.name}}
+    ({{ hero.id }}) {{ hero.name }}
   </div>
 </div>
 
 <p>with trackBy and <i>space</i> separator</p>
 <div class="box">
   <div *ngFor="let hero of heroes; trackBy: trackByHeroes">
-    ({{hero.id}}) {{hero.name}}
+    ({{ hero.id }}) {{ hero.name }}
   </div>
 </div>
 
 <p>with <i>generic</i> trackById function</p>
 <div class="box">
   <div *ngFor="let hero of heroes; trackBy: trackById">
-    ({{hero.id}}) {{hero.name}}
+    ({{ hero.id }}) {{ hero.name }}
   </div>
 </div>
 
@@ -1778,7 +1782,7 @@ without NgModel <br />
     [hero]="currentHero"
   ></app-confused-hero>
   <div *ngSwitchCase="'confused'">
-    Are you as confused as {{currentHero.name}}?
+    Are you as confused as {{ currentHero.name }}?
   </div>
   <app-unknown-hero *ngSwitchDefault [hero]="currentHero"></app-unknown-hero>
 </div>
@@ -1821,7 +1825,7 @@ without NgModel <br />
 </app-hero-detail>
 
 <div (myClick)="(clickMessage2 = $event)" clickable>myClick2</div>
-{{clickMessage2}}
+{{ clickMessage2 }}
 
 <a class="to-toc" href="#toc">top</a>
 
@@ -1829,21 +1833,21 @@ without NgModel <br />
 <hr />
 <h2 id="pipes">Pipes</h2>
 
-<div>Title through uppercase pipe: {{title | uppercase}}</div>
+<div>Title through uppercase pipe: {{ title | uppercase }}</div>
 
 <!-- Pipe chaining: convert title to uppercase, then to lowercase -->
-<div>Title through a pipe chain: {{title | uppercase | lowercase}}</div>
+<div>Title through a pipe chain: {{ title | uppercase | lowercase }}</div>
 
 <!-- pipe with configuration argument => "February 25, 1970" -->
-<div>Birthdate: {{currentHero?.birthdate | date:"longDate"}}</div>
+<div>Birthdate: {{ currentHero?.birthdate | date:"longDate" }}</div>
 
-<div>{{currentHero | json}}</div>
+<div>{{ currentHero | json }}</div>
 
-<div>Birthdate: {{currentHero?.birthdate | date:"longDate" | uppercase}}</div>
+<div>Birthdate: {{ currentHero?.birthdate | date:"longDate" | uppercase }}</div>
 
 <div>
   <!-- pipe price to USD and display the $ symbol -->
-  <label>Price: </label>{{product.price | currency:"USD":true}}
+  <label>Price: </label>{{ product.price | currency:"USD":true }}
 </div>
 
 <a class="to-toc" href="#toc">top</a>
@@ -1852,11 +1856,11 @@ without NgModel <br />
 <hr />
 <h2 id="safe-navigation-operator">Safe navigation operator <i>?.</i></h2>
 
-<div>The title is {{title}}</div>
+<div>The title is {{ title }}</div>
 
-<div>The current hero's name is {{currentHero?.name}}</div>
+<div>The current hero's name is {{ currentHero?.name }}</div>
 
-<div>The current hero's name is {{currentHero.name}}</div>
+<div>The current hero's name is {{ currentHero.name }}</div>
 
 <!--
   The null hero's name is {{nullHero.name}}
@@ -1866,13 +1870,13 @@ without NgModel <br />
 -->
 
 <!-- No hero, div not displayed, no error -->
-<div *ngIf="nullHero">The null hero's name is {{nullHero.name}}</div>
+<div *ngIf="nullHero">The null hero's name is {{ nullHero.name }}</div>
 
-<div>The null hero's name is {{nullHero && nullHero.name}}</div>
+<div>The null hero's name is {{ nullHero && nullHero.name }}</div>
 
 <div>
   <!-- No hero, no problem! -->
-  The null hero's name is {{nullHero?.name}}
+  The null hero's name is {{ nullHero?.name }}
 </div>
 
 <a class="to-toc" href="#toc">top</a>
@@ -1883,7 +1887,7 @@ without NgModel <br />
 
 <div>
   <!-- No hero, no text -->
-  <div *ngIf="hero">The hero's name is {{hero!.name}}</div>
+  <div *ngIf="hero">The hero's name is {{ hero!.name }}</div>
 </div>
 
 <a class="to-toc" href="#toc">top</a>
@@ -1894,7 +1898,7 @@ without NgModel <br />
 
 <div>
   <!-- Accessing an undeclared member -->
-  <div>The hero's marker is {{$any(hero).marker}}</div>
+  <div>The hero's marker is {{ $any(hero).marker }}</div>
 </div>
 
 <div>
@@ -1910,8 +1914,8 @@ without NgModel <br />
 <h2 id="enums">Enums in binding</h2>
 
 <p>
-  The name of the Color.Red enum is {{Color[Color.Red]}}.<br />
-  The current color is {{Color[color]}} and its number is {{color}}.<br />
+  The name of the Color.Red enum is {{ Color[Color.Red] }}.<br />
+  The current color is {{ Color[color] }} and its number is {{ color }}.<br />
   <button [style.color]="Color[color]" (click)="colorToggle()">
     Enum Toggle
   </button>
@@ -1940,7 +1944,7 @@ without NgModel <br />
     </div>
     <button type="submit" [disabled]="!heroForm.form.valid">Submit</button>
   </form>
-  <div [hidden]="!heroForm.form.valid">{{submitMessage}}</div>
+  <div [hidden]="!heroForm.form.valid">{{ submitMessage }}</div>
 </div>
 
 <!--
@@ -2719,15 +2723,15 @@ can be found in the LICENSE file at http://angular.io/license
 <hr />
 <h2 id="interpolation">Interpolation</h2>
 
-<p>My current hero is {{currentHero.name}}</p>
+<p>My current hero is {{ currentHero.name }}</p>
 
-<h3>{{title}} <img src="{{heroImageUrl}}" style="height:30px" /></h3>
+<h3>{{ title }} <img src="{{heroImageUrl}}" style="height:30px" /></h3>
 
 <!-- "The sum of 1 + 1 is 2" -->
-<p>The sum of 1 + 1 is {{1 + 1}}</p>
+<p>The sum of 1 + 1 is {{ 1 + 1 }}</p>
 
 <!-- "The sum of 1 + 1 is not 4" -->
-<p>The sum of 1 + 1 is not {{1 + 1 + getVal()}}</p>
+<p>The sum of 1 + 1 is not {{ 1 + 1 + getVal() }}</p>
 
 <a class="to-toc" href="#toc">top</a>
 
@@ -2738,17 +2742,19 @@ can be found in the LICENSE file at http://angular.io/license
   Component expression context (&#123;&#123;title&#125;&#125;,
   [hidden]="isUnchanged")
 </p>
-<div class="context">{{title}} <span [hidden]="isUnchanged">changed</span></div>
+<div class="context">
+  {{ title }} <span [hidden]="isUnchanged">changed</span>
+</div>
 
 <p>Template input variable expression context (let hero)</p>
 <!-- template hides the following; plenty of examples later -->
 <ng-template>
-  <div *ngFor="let hero of heroes">{{hero.name}}</div>
+  <div *ngFor="let hero of heroes">{{ hero.name }}</div>
 </ng-template>
 
 <p>Template reference variable expression context (#heroInput)</p>
 <div (keyup)="0" class="context">
-  Type something: <input #heroInput /> {{heroInput.value}}
+  Type something: <input #heroInput /> {{ heroInput.value }}
 </div>
 
 <a class="to-toc" href="#toc">top</a>
@@ -2812,9 +2818,9 @@ can be found in the LICENSE file at http://angular.io/license
 <button (click)="onSave()">Save</button>
 <app-hero-detail (deleteRequest)="deleteHero()"></app-hero-detail>
 <div (myClick)="(clicked = $event)" clickable>click me</div>
-{{clicked}} <br /><br />
+{{ clicked }} <br /><br />
 
-<div>Hero Name: <input [(ngModel)]="name" /> {{name}}</div>
+<div>Hero Name: <input [(ngModel)]="name" /> {{ name }}</div>
 <br /><br />
 
 <button [attr.aria-label]="help">help</button> <br /><br />
@@ -2876,7 +2882,7 @@ can be found in the LICENSE file at http://angular.io/license
 <p><img [src]="heroImageUrl" /> is the <i>property bound</i> image.</p>
 
 <p>
-  <span>"{{title}}" is the <i>interpolated</i> title.</span>
+  <span>"{{ title }}" is the <i>interpolated</i> title.</span>
 </p>
 <p>"<span [innerHTML]="title"></span>" is the <i>property bound</i> title.</p>
 
@@ -2885,7 +2891,7 @@ can be found in the LICENSE file at http://angular.io/license
   WARNING: sanitizing HTML stripped some content (see http://g.co/ng/security#xss).
 -->
 <p>
-  <span>"{{evilTitle}}" is the <i>interpolated</i> evil title.</span>
+  <span>"{{ evilTitle }}" is the <i>interpolated</i> evil title.</span>
 </p>
 <p>
   "<span [innerHTML]="evilTitle"></span>" is the <i>property bound</i> evil
@@ -2918,7 +2924,7 @@ can be found in the LICENSE file at http://angular.io/license
 
 <br />
 <!-- create and set an aria attribute for assistive technology -->
-<button [attr.aria-label]="actionName">{{actionName}} with Aria</button>
+<button [attr.aria-label]="actionName">{{ actionName }} with Aria</button>
 <br /><br />
 
 <!-- The following effects are not discussed in the chapter -->
@@ -2979,7 +2985,7 @@ can be found in the LICENSE file at http://angular.io/license
 <div>
   <!-- \`myClick\` is an event on the custom \`ClickDirective\` -->
   <div (myClick)="(clickMessage = $event)" clickable>click with myClick</div>
-  {{clickMessage}}
+  {{ clickMessage }}
 </div>
 
 <!-- binding to a nested component -->
@@ -3034,7 +3040,7 @@ can be found in the LICENSE file at http://angular.io/license
 <hr />
 <h2 id="ngModel">NgModel (two-way) Binding</h2>
 
-<h3>Result: {{currentHero.name}}</h3>
+<h3>Result: {{ currentHero.name }}</h3>
 
 <input
   [value]="currentHero.name"
@@ -3060,7 +3066,7 @@ without NgModel <br />
 <hr />
 <h2 id="ngClass">NgClass Binding</h2>
 
-<p>currentClasses is {{currentClasses | json}}</p>
+<p>currentClasses is {{ currentClasses | json }}</p>
 <div [ngClass]="currentClasses">
   This div is initially saveable, unchanged, and special
 </div>
@@ -3079,9 +3085,9 @@ without NgModel <br />
 <button (click)="setCurrentClasses()">Refresh currentClasses</button>
 <br /><br />
 <div [ngClass]="currentClasses">
-  This div should be {{canSave ? "" : "not"}} saveable,
-  {{isUnchanged ? "unchanged" : "modified"}} and,
-  {{isSpecial ? "" : "not"}} special after clicking "Refresh".
+  This div should be {{ canSave ? "" : "not" }} saveable,
+  {{ isUnchanged ? "unchanged" : "modified" }} and,
+  {{ isSpecial ? "" : "not" }} special after clicking "Refresh".
 </div>
 <br /><br />
 
@@ -3101,7 +3107,7 @@ without NgModel <br />
 </div>
 
 <h3>[ngStyle] binding to currentStyles - CSS property names</h3>
-<p>currentStyles is {{currentStyles | json}}</p>
+<p>currentStyles is {{ currentStyles | json }}</p>
 <div [ngStyle]="currentStyles">
   This div is initially italic, normal weight, and extra large (24px).
 </div>
@@ -3113,9 +3119,9 @@ without NgModel <br />
 <label>xlarge: <input type="checkbox" [(ngModel)]="isSpecial"/></label>
 <button (click)="setCurrentStyles()">Refresh currentStyles</button> <br /><br />
 <div [ngStyle]="currentStyles">
-  This div should be {{canSave ? "italic" : "plain"}},
-  {{isUnchanged ? "normal weight" : "bold"}} and,
-  {{isSpecial ? "extra large" : "normal size"}} after clicking "Refresh".
+  This div should be {{ canSave ? "italic" : "plain" }},
+  {{ isUnchanged ? "normal weight" : "bold" }} and,
+  {{ isSpecial ? "extra large" : "normal size" }} after clicking "Refresh".
 </div>
 
 <a class="to-toc" href="#toc">top</a>
@@ -3126,13 +3132,13 @@ without NgModel <br />
 
 <app-hero-detail *ngIf="isActive"></app-hero-detail>
 
-<div *ngIf="currentHero">Hello, {{currentHero.name}}</div>
-<div *ngIf="nullHero">Hello, {{nullHero.name}}</div>
+<div *ngIf="currentHero">Hello, {{ currentHero.name }}</div>
+<div *ngIf="nullHero">Hello, {{ nullHero.name }}</div>
 
 <!-- NgIf binding with template (no *) -->
 
 <ng-template [ngIf]="currentHero"
-  >Add {{currentHero.name}} with template</ng-template
+  >Add {{ currentHero.name }} with template</ng-template
 >
 
 <!-- Does not show because isActive is false! -->
@@ -3158,7 +3164,7 @@ without NgModel <br />
 <h2 id="ngFor">NgFor Binding</h2>
 
 <div class="box">
-  <div *ngFor="let hero of heroes">{{hero.name}}</div>
+  <div *ngFor="let hero of heroes">{{ hero.name }}</div>
 </div>
 <br />
 
@@ -3173,7 +3179,7 @@ without NgModel <br />
 <p>with <i>semi-colon</i> separator</p>
 <div class="box">
   <div *ngFor="let hero of heroes; let i = index">
-    {{i + 1}} - {{hero.name}}
+    {{ i + 1 }} - {{ hero.name }}
   </div>
 </div>
 
@@ -3181,7 +3187,7 @@ without NgModel <br />
 <div class="box">
   <!-- Ex: "1 - Hercules" -->
   <div *ngFor="let hero of heroes; let i = index">
-    {{i + 1}} - {{hero.name}}
+    {{ i + 1 }} - {{ hero.name }}
   </div>
 </div>
 
@@ -3194,21 +3200,23 @@ without NgModel <br />
 
 <p><i>without</i> trackBy</p>
 <div class="box">
-  <div #noTrackBy *ngFor="let hero of heroes">({{hero.id}}) {{hero.name}}</div>
+  <div #noTrackBy *ngFor="let hero of heroes">
+    ({{ hero.id }}) {{ hero.name }}
+  </div>
 
   <div id="noTrackByCnt" *ngIf="heroesNoTrackByCount">
-    Hero DOM elements change #{{heroesNoTrackByCount}} without trackBy
+    Hero DOM elements change #{{ heroesNoTrackByCount }} without trackBy
   </div>
 </div>
 
 <p>with trackBy</p>
 <div class="box">
   <div #withTrackBy *ngFor="let hero of heroes; trackBy: trackByHeroes">
-    ({{hero.id}}) {{hero.name}}
+    ({{ hero.id }}) {{ hero.name }}
   </div>
 
   <div id="withTrackByCnt" *ngIf="heroesWithTrackByCount">
-    Hero DOM elements change #{{heroesWithTrackByCount}} with trackBy
+    Hero DOM elements change #{{ heroesWithTrackByCount }} with trackBy
   </div>
 </div>
 
@@ -3217,28 +3225,28 @@ without NgModel <br />
 <p>with trackBy and <i>semi-colon</i> separator</p>
 <div class="box">
   <div *ngFor="let hero of heroes; trackBy: trackByHeroes">
-    ({{hero.id}}) {{hero.name}}
+    ({{ hero.id }}) {{ hero.name }}
   </div>
 </div>
 
 <p>with trackBy and <i>comma</i> separator</p>
 <div class="box">
   <div *ngFor="let hero of heroes; trackBy: trackByHeroes">
-    ({{hero.id}}) {{hero.name}}
+    ({{ hero.id }}) {{ hero.name }}
   </div>
 </div>
 
 <p>with trackBy and <i>space</i> separator</p>
 <div class="box">
   <div *ngFor="let hero of heroes; trackBy: trackByHeroes">
-    ({{hero.id}}) {{hero.name}}
+    ({{ hero.id }}) {{ hero.name }}
   </div>
 </div>
 
 <p>with <i>generic</i> trackById function</p>
 <div class="box">
   <div *ngFor="let hero of heroes; trackBy: trackById">
-    ({{hero.id}}) {{hero.name}}
+    ({{ hero.id }}) {{ hero.name }}
   </div>
 </div>
 
@@ -3265,7 +3273,7 @@ without NgModel <br />
     [hero]="currentHero"
   ></app-confused-hero>
   <div *ngSwitchCase="'confused'">
-    Are you as confused as {{currentHero.name}}?
+    Are you as confused as {{ currentHero.name }}?
   </div>
   <app-unknown-hero *ngSwitchDefault [hero]="currentHero"></app-unknown-hero>
 </div>
@@ -3308,7 +3316,7 @@ without NgModel <br />
 </app-hero-detail>
 
 <div (myClick)="(clickMessage2 = $event)" clickable>myClick2</div>
-{{clickMessage2}}
+{{ clickMessage2 }}
 
 <a class="to-toc" href="#toc">top</a>
 
@@ -3316,21 +3324,21 @@ without NgModel <br />
 <hr />
 <h2 id="pipes">Pipes</h2>
 
-<div>Title through uppercase pipe: {{title | uppercase}}</div>
+<div>Title through uppercase pipe: {{ title | uppercase }}</div>
 
 <!-- Pipe chaining: convert title to uppercase, then to lowercase -->
-<div>Title through a pipe chain: {{title | uppercase | lowercase}}</div>
+<div>Title through a pipe chain: {{ title | uppercase | lowercase }}</div>
 
 <!-- pipe with configuration argument => "February 25, 1970" -->
-<div>Birthdate: {{currentHero?.birthdate | date:"longDate"}}</div>
+<div>Birthdate: {{ currentHero?.birthdate | date:"longDate" }}</div>
 
-<div>{{currentHero | json}}</div>
+<div>{{ currentHero | json }}</div>
 
-<div>Birthdate: {{currentHero?.birthdate | date:"longDate" | uppercase}}</div>
+<div>Birthdate: {{ currentHero?.birthdate | date:"longDate" | uppercase }}</div>
 
 <div>
   <!-- pipe price to USD and display the $ symbol -->
-  <label>Price: </label>{{product.price | currency:"USD":true}}
+  <label>Price: </label>{{ product.price | currency:"USD":true }}
 </div>
 
 <a class="to-toc" href="#toc">top</a>
@@ -3339,11 +3347,11 @@ without NgModel <br />
 <hr />
 <h2 id="safe-navigation-operator">Safe navigation operator <i>?.</i></h2>
 
-<div>The title is {{title}}</div>
+<div>The title is {{ title }}</div>
 
-<div>The current hero's name is {{currentHero?.name}}</div>
+<div>The current hero's name is {{ currentHero?.name }}</div>
 
-<div>The current hero's name is {{currentHero.name}}</div>
+<div>The current hero's name is {{ currentHero.name }}</div>
 
 <!--
   The null hero's name is {{nullHero.name}}
@@ -3353,13 +3361,13 @@ without NgModel <br />
 -->
 
 <!-- No hero, div not displayed, no error -->
-<div *ngIf="nullHero">The null hero's name is {{nullHero.name}}</div>
+<div *ngIf="nullHero">The null hero's name is {{ nullHero.name }}</div>
 
-<div>The null hero's name is {{nullHero && nullHero.name}}</div>
+<div>The null hero's name is {{ nullHero && nullHero.name }}</div>
 
 <div>
   <!-- No hero, no problem! -->
-  The null hero's name is {{nullHero?.name}}
+  The null hero's name is {{ nullHero?.name }}
 </div>
 
 <a class="to-toc" href="#toc">top</a>
@@ -3370,7 +3378,7 @@ without NgModel <br />
 
 <div>
   <!-- No hero, no text -->
-  <div *ngIf="hero">The hero's name is {{hero!.name}}</div>
+  <div *ngIf="hero">The hero's name is {{ hero!.name }}</div>
 </div>
 
 <a class="to-toc" href="#toc">top</a>
@@ -3381,7 +3389,7 @@ without NgModel <br />
 
 <div>
   <!-- Accessing an undeclared member -->
-  <div>The hero's marker is {{$any(hero).marker}}</div>
+  <div>The hero's marker is {{ $any(hero).marker }}</div>
 </div>
 
 <div>
@@ -3397,8 +3405,8 @@ without NgModel <br />
 <h2 id="enums">Enums in binding</h2>
 
 <p>
-  The name of the Color.Red enum is {{Color[Color.Red]}}.<br />
-  The current color is {{Color[color]}} and its number is {{color}}.<br />
+  The name of the Color.Red enum is {{ Color[Color.Red] }}.<br />
+  The current color is {{ Color[color] }} and its number is {{ color }}.<br />
   <button [style.color]="Color[color]" (click)="colorToggle()">
     Enum Toggle
   </button>
@@ -3427,7 +3435,7 @@ without NgModel <br />
     </div>
     <button type="submit" [disabled]="!heroForm.form.valid">Submit</button>
   </form>
-  <div [hidden]="!heroForm.form.valid">{{submitMessage}}</div>
+  <div [hidden]="!heroForm.form.valid">{{ submitMessage }}</div>
 </div>
 
 <!--
diff --git a/tests/html_vue/__snapshots__/jsfmt.spec.js.snap b/tests/html_vue/__snapshots__/jsfmt.spec.js.snap
index 8a4f254ebe63..d7d629db7cc1 100644
--- a/tests/html_vue/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_vue/__snapshots__/jsfmt.spec.js.snap
@@ -500,7 +500,8 @@ x => {
     }
   }}
   Magni consectetur in et molestias neque esse voluptatibus voluptas.
-  {{some_variable}} Eum quia nihil nulla esse. Dolorem asperiores vero est error
+  {{ some_variable }} Eum quia nihil nulla esse. Dolorem asperiores vero est
+  error
   {{
 
                     preserve
@@ -510,7 +511,7 @@ x => {
                     interpolation
 
   }}
-  reprehenderit voluptates minus {{console.log(short_interpolation)}} nemo.
+  reprehenderit voluptates minus {{ console.log(short_interpolation) }} nemo.
 </div>
 
 <script type="text/jsx">
@@ -537,7 +538,7 @@ export default {
 </div>
 <div>
   1234567890123456789012345678901234567890123456789012345678901234567890
-  {{something}}1234567890
+  {{ something }}1234567890
 </div>
 <div>
   1234567890123456789012345678901234567890123456789012345678901234567890{{
@@ -547,7 +548,7 @@ export default {
 </div>
 <div>
   1234567890123456789012345678901234567890123456789012345678901234567890
-  {{something}} 1234567890
+  {{ something }} 1234567890
 </div>
 
 `;
@@ -618,7 +619,8 @@ x => {
     }
   }}
   Magni consectetur in et molestias neque esse voluptatibus voluptas.
-  {{some_variable}} Eum quia nihil nulla esse. Dolorem asperiores vero est error
+  {{ some_variable }} Eum quia nihil nulla esse. Dolorem asperiores vero est
+  error
   {{
 
                     preserve
@@ -628,7 +630,7 @@ x => {
                     interpolation
 
   }}
-  reprehenderit voluptates minus {{console.log(short_interpolation)}} nemo.
+  reprehenderit voluptates minus {{ console.log(short_interpolation) }} nemo.
 </div>
 
 <script type="text/jsx">
@@ -655,7 +657,7 @@ export default {
 </div>
 <div>
   1234567890123456789012345678901234567890123456789012345678901234567890
-  {{something}}1234567890
+  {{ something }}1234567890
 </div>
 <div>
   1234567890123456789012345678901234567890123456789012345678901234567890{{
@@ -665,7 +667,7 @@ export default {
 </div>
 <div>
   1234567890123456789012345678901234567890123456789012345678901234567890
-  {{something}} 1234567890
+  {{ something }} 1234567890
 </div>
 
 `;
@@ -931,13 +933,13 @@ exports[`template.vue - vue-verify 1`] = `
       />
       <p v-if="renderInfo" class="file-info prepend-top-10">
         <template v-if="fileSize > 0">
-          {{fileSizeReadable}}
+          {{ fileSizeReadable }}
         </template>
         <template v-if="fileSize > 0 && width && height">
           |
         </template>
         <template v-if="width && height">
-          W: {{width}} | H: {{height}}
+          W: {{ width }} | H: {{ height }}
         </template>
       </p>
     </div>
@@ -991,13 +993,13 @@ exports[`template.vue - vue-verify 2`] = `
       />
       <p v-if="renderInfo" class="file-info prepend-top-10">
         <template v-if="fileSize > 0">
-          {{fileSizeReadable}}
+          {{ fileSizeReadable }}
         </template>
         <template v-if="fileSize > 0 && width && height">
           |
         </template>
         <template v-if="width && height">
-          W: {{width}} | H: {{height}}
+          W: {{ width }} | H: {{ height }}
         </template>
       </p>
     </div>
diff --git a/tests/multiparser_vue/__snapshots__/jsfmt.spec.js.snap b/tests/multiparser_vue/__snapshots__/jsfmt.spec.js.snap
index a1528eb77c62..ca2f55b1b1a9 100644
--- a/tests/multiparser_vue/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/multiparser_vue/__snapshots__/jsfmt.spec.js.snap
@@ -13,7 +13,7 @@ export default {
 
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 <template>
-  <div>{{foo}}</div>
+  <div>{{ foo }}</div>
 </template>
 
 <script lang="ts">
@@ -126,7 +126,7 @@ p { font-size : 2em ; text-align : center ; }
   </style >
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 <template>
-  <h1>{{greeting}} world</h1>
+  <h1>{{ greeting }} world</h1>
   <script>
     kikoo();
   </script>

From 4a6ac4308dfc750861b7da5d2dad74f44c886743 Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Sun, 28 Oct 2018 17:06:23 +0800
Subject: [PATCH 125/177] test: update snapshots

---
 tests/decorators-ts/__snapshots__/jsfmt.spec.js.snap | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/decorators-ts/__snapshots__/jsfmt.spec.js.snap b/tests/decorators-ts/__snapshots__/jsfmt.spec.js.snap
index 8660f81b26da..c57fd208ad60 100644
--- a/tests/decorators-ts/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/decorators-ts/__snapshots__/jsfmt.spec.js.snap
@@ -54,7 +54,7 @@ export class HeroButtonComponent {
 @Component({
   selector: "toh-hero-button",
   template: \`
-    <button>{{label}}</button>
+    <button>{{ label }}</button>
   \`
 })
 export class HeroButtonComponent {

From 03efd878cac2458181901eb4fd133441b70f81aa Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Sun, 28 Oct 2018 19:49:29 +0800
Subject: [PATCH 126/177] style: fix linting

---
 src/language-js/printer-estree.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/language-js/printer-estree.js b/src/language-js/printer-estree.js
index 294fa8f448cc..5294aec7c9b0 100644
--- a/src/language-js/printer-estree.js
+++ b/src/language-js/printer-estree.js
@@ -3395,7 +3395,7 @@ function printPathNoParens(path, options, print, args) {
 
       return concat(parts);
 
-    case "NGRoot": 
+    case "NGRoot":
       return concat(
         [].concat(
           path.call(print, "node"),

From ad81d85819cd72a9ca57a1a6801382793c471912 Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Mon, 29 Oct 2018 11:29:56 +0800
Subject: [PATCH 127/177] test: add tests

---
 tests/html_angular/__snapshots__/jsfmt.spec.js.snap | 8 ++++++++
 tests/html_angular/interpolation.component.html     | 1 +
 2 files changed, 9 insertions(+)

diff --git a/tests/html_angular/__snapshots__/jsfmt.spec.js.snap b/tests/html_angular/__snapshots__/jsfmt.spec.js.snap
index c9e65449396d..e605969d3b39 100644
--- a/tests/html_angular/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_angular/__snapshots__/jsfmt.spec.js.snap
@@ -306,6 +306,7 @@ exports[`interpolation.component.html - angular-verify 1`] = `
 <label for="transmissionLayoutRadioButton"> {{
 "SearchSelection.transmissionLayoutRadioButton" | localize:localizationSection
 }} </label>
+<div class="Nemo possimus non voluptates dicta accusamus id quia">{{copyTypes[options.copyType]}}</div>
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 <div>{{ a | b:c }}</div>
 <div>{{ 0 - 1 }}</div>
@@ -361,6 +362,9 @@ exports[`interpolation.component.html - angular-verify 1`] = `
       localize:localizationSection
   }}
 </label>
+<div class="Nemo possimus non voluptates dicta accusamus id quia">{{
+  copyTypes[options.copyType]
+}}</div>
 
 `;
 
@@ -406,6 +410,7 @@ exports[`interpolation.component.html - angular-verify 2`] = `
 <label for="transmissionLayoutRadioButton"> {{
 "SearchSelection.transmissionLayoutRadioButton" | localize:localizationSection
 }} </label>
+<div class="Nemo possimus non voluptates dicta accusamus id quia">{{copyTypes[options.copyType]}}</div>
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 <div>{{ a | b:c }}</div>
 <div>{{ 0 - 1 }}</div>
@@ -461,6 +466,9 @@ exports[`interpolation.component.html - angular-verify 2`] = `
       localize:localizationSection
   }}
 </label>
+<div class="Nemo possimus non voluptates dicta accusamus id quia">{{
+  copyTypes[options.copyType]
+}}</div>
 
 `;
 
diff --git a/tests/html_angular/interpolation.component.html b/tests/html_angular/interpolation.component.html
index 85b40efd89a6..41649f748e31 100644
--- a/tests/html_angular/interpolation.component.html
+++ b/tests/html_angular/interpolation.component.html
@@ -39,3 +39,4 @@
 <label for="transmissionLayoutRadioButton"> {{
 "SearchSelection.transmissionLayoutRadioButton" | localize:localizationSection
 }} </label>
+<div class="Nemo possimus non voluptates dicta accusamus id quia">{{copyTypes[options.copyType]}}</div>

From efb4d355f5252cdbc5b929e22730436698a7dc70 Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Mon, 29 Oct 2018 11:33:13 +0800
Subject: [PATCH 128/177] fix: only hug if both leading and trailing spaces are
 sensitive

---
 src/language-html/printer-html.js             |  4 ++--
 .../__snapshots__/jsfmt.spec.js.snap          | 24 +++++++++----------
 2 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/language-html/printer-html.js b/src/language-html/printer-html.js
index 665d768e062e..f55b3eb62c5d 100644
--- a/src/language-html/printer-html.js
+++ b/src/language-html/printer-html.js
@@ -167,9 +167,9 @@ function genericPrint(path, options, print) {
       const shouldHugContent =
         node.children.length === 1 &&
         node.firstChild.type === "interpolation" &&
-        (!node.firstChild.isLeadingSpaceSensitive ||
+        (node.firstChild.isLeadingSpaceSensitive &&
           !node.firstChild.hasLeadingSpaces) &&
-        (!node.lastChild.isTrailingSpaceSensitive ||
+        (node.lastChild.isTrailingSpaceSensitive &&
           !node.lastChild.hasTrailingSpaces);
       const attrGroupId = Symbol("element-attr-group-id");
       return concat([
diff --git a/tests/html_angular/__snapshots__/jsfmt.spec.js.snap b/tests/html_angular/__snapshots__/jsfmt.spec.js.snap
index e605969d3b39..e9320cb55719 100644
--- a/tests/html_angular/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_angular/__snapshots__/jsfmt.spec.js.snap
@@ -362,9 +362,9 @@ exports[`interpolation.component.html - angular-verify 1`] = `
       localize:localizationSection
   }}
 </label>
-<div class="Nemo possimus non voluptates dicta accusamus id quia">{{
-  copyTypes[options.copyType]
-}}</div>
+<div class="Nemo possimus non voluptates dicta accusamus id quia">
+  {{ copyTypes[options.copyType] }}
+</div>
 
 `;
 
@@ -466,9 +466,9 @@ exports[`interpolation.component.html - angular-verify 2`] = `
       localize:localizationSection
   }}
 </label>
-<div class="Nemo possimus non voluptates dicta accusamus id quia">{{
-  copyTypes[options.copyType]
-}}</div>
+<div class="Nemo possimus non voluptates dicta accusamus id quia">
+  {{ copyTypes[options.copyType] }}
+</div>
 
 `;
 
@@ -1288,9 +1288,9 @@ can be found in the LICENSE file at http://angular.io/license
 <p>Template input variable statement context (let hero)</p>
 <!-- template hides the following; plenty of examples later -->
 <div class="context">
-  <button *ngFor="let hero of heroes" (click)="deleteHero(hero)">{{
-    hero.name
-  }}</button>
+  <button *ngFor="let hero of heroes" (click)="deleteHero(hero)">
+    {{ hero.name }}
+  </button>
 </div>
 
 <p>Template reference variable statement context (#heroForm)</p>
@@ -2779,9 +2779,9 @@ can be found in the LICENSE file at http://angular.io/license
 <p>Template input variable statement context (let hero)</p>
 <!-- template hides the following; plenty of examples later -->
 <div class="context">
-  <button *ngFor="let hero of heroes" (click)="deleteHero(hero)">{{
-    hero.name
-  }}</button>
+  <button *ngFor="let hero of heroes" (click)="deleteHero(hero)">
+    {{ hero.name }}
+  </button>
 </div>
 
 <p>Template reference variable statement context (#heroForm)</p>

From a3a7f923cdc43a799bf10fde12fcbb5cec8bf295 Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Mon, 29 Oct 2018 14:20:18 +0800
Subject: [PATCH 129/177] test: add tests

---
 .../__snapshots__/jsfmt.spec.js.snap          | 48 +++++++++++++++++++
 tests/html_angular/attributes.component.html  |  4 ++
 .../html_angular/interpolation.component.html |  1 +
 3 files changed, 53 insertions(+)

diff --git a/tests/html_angular/__snapshots__/jsfmt.spec.js.snap b/tests/html_angular/__snapshots__/jsfmt.spec.js.snap
index e9320cb55719..48541bb49318 100644
--- a/tests/html_angular/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_angular/__snapshots__/jsfmt.spec.js.snap
@@ -62,6 +62,10 @@ exports[`attributes.component.html - angular-verify 1`] = `
     *directive=" a ; b : c "
     *directive=" a ; b : c as d "
     *directive=" a ; b as c "
+    *ngIf="listRow.NextScheduledSendStatus == 1 || listRow.NextScheduledSendStatus == 2 || listRow.NextScheduledSendStatus == 3"
+    (target)="listRow.NextScheduledSendStatus == 1 || listRow.NextScheduledSendStatus == 2 || listRow.NextScheduledSendStatus == 3"
+    [target]="listRow.NextScheduledSendStatus == 1 || listRow.NextScheduledSendStatus == 2 || listRow.NextScheduledSendStatus == 3"
+    [target]="{ longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong: true }"
 ></div>
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 <div
@@ -128,6 +132,20 @@ exports[`attributes.component.html - angular-verify 1`] = `
   *directive="a; b: c"
   *directive="a; b: c as d"
   *directive="a; b as c"
+  *ngIf="
+    listRow.NextScheduledSendStatus == 1 ||
+      listRow.NextScheduledSendStatus == 2 ||
+      listRow.NextScheduledSendStatus == 3
+  "
+  (target)="listRow.NextScheduledSendStatus == 1 ||
+    listRow.NextScheduledSendStatus == 2 ||
+    listRow.NextScheduledSendStatus == 3"
+  [target]="listRow.NextScheduledSendStatus == 1 ||
+    listRow.NextScheduledSendStatus == 2 ||
+    listRow.NextScheduledSendStatus == 3"
+  [target]="{
+    longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong: true
+  }"
 ></div>
 
 `;
@@ -194,6 +212,10 @@ exports[`attributes.component.html - angular-verify 2`] = `
     *directive=" a ; b : c "
     *directive=" a ; b : c as d "
     *directive=" a ; b as c "
+    *ngIf="listRow.NextScheduledSendStatus == 1 || listRow.NextScheduledSendStatus == 2 || listRow.NextScheduledSendStatus == 3"
+    (target)="listRow.NextScheduledSendStatus == 1 || listRow.NextScheduledSendStatus == 2 || listRow.NextScheduledSendStatus == 3"
+    [target]="listRow.NextScheduledSendStatus == 1 || listRow.NextScheduledSendStatus == 2 || listRow.NextScheduledSendStatus == 3"
+    [target]="{ longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong: true }"
 ></div>
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 <div
@@ -260,6 +282,20 @@ exports[`attributes.component.html - angular-verify 2`] = `
   *directive="a; b: c"
   *directive="a; b: c as d"
   *directive="a; b as c"
+  *ngIf="
+    listRow.NextScheduledSendStatus == 1 ||
+      listRow.NextScheduledSendStatus == 2 ||
+      listRow.NextScheduledSendStatus == 3
+  "
+  (target)="listRow.NextScheduledSendStatus == 1 ||
+    listRow.NextScheduledSendStatus == 2 ||
+    listRow.NextScheduledSendStatus == 3"
+  [target]="listRow.NextScheduledSendStatus == 1 ||
+    listRow.NextScheduledSendStatus == 2 ||
+    listRow.NextScheduledSendStatus == 3"
+  [target]="{
+    longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong: true
+  }"
 ></div>
 
 `;
@@ -307,6 +343,7 @@ exports[`interpolation.component.html - angular-verify 1`] = `
 "SearchSelection.transmissionLayoutRadioButton" | localize:localizationSection
 }} </label>
 <div class="Nemo possimus non voluptates dicta accusamus id quia">{{copyTypes[options.copyType]}}</div>
+{{listRow.NextScheduledSendStatus == 1 || listRow.NextScheduledSendStatus == 2 || listRow.NextScheduledSendStatus == 3}}
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 <div>{{ a | b:c }}</div>
 <div>{{ 0 - 1 }}</div>
@@ -365,6 +402,11 @@ exports[`interpolation.component.html - angular-verify 1`] = `
 <div class="Nemo possimus non voluptates dicta accusamus id quia">
   {{ copyTypes[options.copyType] }}
 </div>
+{{
+  listRow.NextScheduledSendStatus == 1 ||
+    listRow.NextScheduledSendStatus == 2 ||
+    listRow.NextScheduledSendStatus == 3
+}}
 
 `;
 
@@ -411,6 +453,7 @@ exports[`interpolation.component.html - angular-verify 2`] = `
 "SearchSelection.transmissionLayoutRadioButton" | localize:localizationSection
 }} </label>
 <div class="Nemo possimus non voluptates dicta accusamus id quia">{{copyTypes[options.copyType]}}</div>
+{{listRow.NextScheduledSendStatus == 1 || listRow.NextScheduledSendStatus == 2 || listRow.NextScheduledSendStatus == 3}}
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 <div>{{ a | b:c }}</div>
 <div>{{ 0 - 1 }}</div>
@@ -469,6 +512,11 @@ exports[`interpolation.component.html - angular-verify 2`] = `
 <div class="Nemo possimus non voluptates dicta accusamus id quia">
   {{ copyTypes[options.copyType] }}
 </div>
+{{
+  listRow.NextScheduledSendStatus == 1 ||
+    listRow.NextScheduledSendStatus == 2 ||
+    listRow.NextScheduledSendStatus == 3
+}}
 
 `;
 
diff --git a/tests/html_angular/attributes.component.html b/tests/html_angular/attributes.component.html
index 665619c3ebee..f65cf289b273 100644
--- a/tests/html_angular/attributes.component.html
+++ b/tests/html_angular/attributes.component.html
@@ -59,4 +59,8 @@
     *directive=" a ; b : c "
     *directive=" a ; b : c as d "
     *directive=" a ; b as c "
+    *ngIf="listRow.NextScheduledSendStatus == 1 || listRow.NextScheduledSendStatus == 2 || listRow.NextScheduledSendStatus == 3"
+    (target)="listRow.NextScheduledSendStatus == 1 || listRow.NextScheduledSendStatus == 2 || listRow.NextScheduledSendStatus == 3"
+    [target]="listRow.NextScheduledSendStatus == 1 || listRow.NextScheduledSendStatus == 2 || listRow.NextScheduledSendStatus == 3"
+    [target]="{ longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong: true }"
 ></div>
diff --git a/tests/html_angular/interpolation.component.html b/tests/html_angular/interpolation.component.html
index 41649f748e31..2056dd136053 100644
--- a/tests/html_angular/interpolation.component.html
+++ b/tests/html_angular/interpolation.component.html
@@ -40,3 +40,4 @@
 "SearchSelection.transmissionLayoutRadioButton" | localize:localizationSection
 }} </label>
 <div class="Nemo possimus non voluptates dicta accusamus id quia">{{copyTypes[options.copyType]}}</div>
+{{listRow.NextScheduledSendStatus == 1 || listRow.NextScheduledSendStatus == 2 || listRow.NextScheduledSendStatus == 3}}

From fa1436a4f169d26e99ccf376d2dc26fc55bcb128 Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Mon, 29 Oct 2018 14:29:04 +0800
Subject: [PATCH 130/177] fix(angular): add missing softlines

---
 src/language-html/printer-html.js             | 30 ++++++++---------
 src/language-js/printer-estree.js             | 23 ++++++++-----
 .../__snapshots__/jsfmt.spec.js.snap          | 32 ++++++++++++-------
 3 files changed, 49 insertions(+), 36 deletions(-)

diff --git a/src/language-html/printer-html.js b/src/language-html/printer-html.js
index f55b3eb62c5d..305f1dfd1191 100644
--- a/src/language-html/printer-html.js
+++ b/src/language-html/printer-html.js
@@ -824,35 +824,33 @@ function printEmbeddedAttributeValue(node, textToDoc, options) {
      */
     const ngExpressionBindingPatterns = ["^\\[.+\\]$", "^bind(on)?-"];
 
+    const __ng_root_postprocess = (rootDoc, rootNode) =>
+      rootNode.type === "ObjectExpression"
+        ? rootDoc
+        : group(concat([indent(concat([softline, rootDoc])), softline]));
+
     if (isKeyMatched(ngStatementBindingPatterns)) {
       return textToDoc(getValue(), {
         parser: "__ng_action",
-        trailingComma: "none"
+        trailingComma: "none",
+        __ng_root_postprocess
       });
     }
 
     if (isKeyMatched(ngExpressionBindingPatterns)) {
       return textToDoc(getValue(), {
         parser: "__ng_binding",
-        trailingComma: "none"
+        trailingComma: "none",
+        __ng_root_postprocess
       });
     }
 
     if (isKeyMatched(ngDirectiveBindingPatterns)) {
-      return group(
-        concat([
-          indent(
-            concat([
-              softline,
-              textToDoc(getValue(), {
-                parser: "__ng_directive",
-                trailingComma: "none"
-              })
-            ])
-          ),
-          softline
-        ])
-      );
+      return textToDoc(getValue(), {
+        parser: "__ng_directive",
+        trailingComma: "none",
+        __ng_root_postprocess
+      });
     }
   }
 
diff --git a/src/language-js/printer-estree.js b/src/language-js/printer-estree.js
index 5294aec7c9b0..3dfd33e2cfd6 100644
--- a/src/language-js/printer-estree.js
+++ b/src/language-js/printer-estree.js
@@ -3395,15 +3395,22 @@ function printPathNoParens(path, options, print, args) {
 
       return concat(parts);
 
-    case "NGRoot":
-      return concat(
-        [].concat(
-          path.call(print, "node"),
-          !n.node.comments || n.node.comments.length === 0
-            ? []
-            : concat([" //", n.node.comments[0].value.trimRight()])
-        )
+    case "NGRoot": {
+      const rootNode = n.node;
+      const rootDoc = path.call(print, "node");
+      const postprocess = options.__ng_root_postprocess || (x => x);
+      return postprocess(
+        concat(
+          [].concat(
+            rootDoc,
+            !n.node.comments || n.node.comments.length === 0
+              ? []
+              : concat([" //", n.node.comments[0].value.trimRight()])
+          )
+        ),
+        rootNode
       );
+    }
     case "NGChainedExpression":
       return group(join(concat([";", line]), path.map(print, "expressions")));
     case "NGEmptyExpression":
diff --git a/tests/html_angular/__snapshots__/jsfmt.spec.js.snap b/tests/html_angular/__snapshots__/jsfmt.spec.js.snap
index 48541bb49318..f1e4834f8cab 100644
--- a/tests/html_angular/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_angular/__snapshots__/jsfmt.spec.js.snap
@@ -137,12 +137,16 @@ exports[`attributes.component.html - angular-verify 1`] = `
       listRow.NextScheduledSendStatus == 2 ||
       listRow.NextScheduledSendStatus == 3
   "
-  (target)="listRow.NextScheduledSendStatus == 1 ||
-    listRow.NextScheduledSendStatus == 2 ||
-    listRow.NextScheduledSendStatus == 3"
-  [target]="listRow.NextScheduledSendStatus == 1 ||
-    listRow.NextScheduledSendStatus == 2 ||
-    listRow.NextScheduledSendStatus == 3"
+  (target)="
+    listRow.NextScheduledSendStatus == 1 ||
+      listRow.NextScheduledSendStatus == 2 ||
+      listRow.NextScheduledSendStatus == 3
+  "
+  [target]="
+    listRow.NextScheduledSendStatus == 1 ||
+      listRow.NextScheduledSendStatus == 2 ||
+      listRow.NextScheduledSendStatus == 3
+  "
   [target]="{
     longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong: true
   }"
@@ -287,12 +291,16 @@ exports[`attributes.component.html - angular-verify 2`] = `
       listRow.NextScheduledSendStatus == 2 ||
       listRow.NextScheduledSendStatus == 3
   "
-  (target)="listRow.NextScheduledSendStatus == 1 ||
-    listRow.NextScheduledSendStatus == 2 ||
-    listRow.NextScheduledSendStatus == 3"
-  [target]="listRow.NextScheduledSendStatus == 1 ||
-    listRow.NextScheduledSendStatus == 2 ||
-    listRow.NextScheduledSendStatus == 3"
+  (target)="
+    listRow.NextScheduledSendStatus == 1 ||
+      listRow.NextScheduledSendStatus == 2 ||
+      listRow.NextScheduledSendStatus == 3
+  "
+  [target]="
+    listRow.NextScheduledSendStatus == 1 ||
+      listRow.NextScheduledSendStatus == 2 ||
+      listRow.NextScheduledSendStatus == 3
+  "
   [target]="{
     longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong: true
   }"

From 1fd8844f39353d27bdad38c6ef392901c876ca26 Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Mon, 29 Oct 2018 14:35:57 +0800
Subject: [PATCH 131/177] test: add tests

---
 .../html_angular/__snapshots__/jsfmt.spec.js.snap  | 14 ++++++++++++++
 tests/html_angular/attributes.component.html       |  1 +
 2 files changed, 15 insertions(+)

diff --git a/tests/html_angular/__snapshots__/jsfmt.spec.js.snap b/tests/html_angular/__snapshots__/jsfmt.spec.js.snap
index f1e4834f8cab..c2672bfe0751 100644
--- a/tests/html_angular/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_angular/__snapshots__/jsfmt.spec.js.snap
@@ -63,6 +63,7 @@ exports[`attributes.component.html - angular-verify 1`] = `
     *directive=" a ; b : c as d "
     *directive=" a ; b as c "
     *ngIf="listRow.NextScheduledSendStatus == 1 || listRow.NextScheduledSendStatus == 2 || listRow.NextScheduledSendStatus == 3"
+    *ngIf="listRow.NextScheduledSendStatus == 1 || listRow.NextScheduledSendStatus == 2 || listRow.NextScheduledSendStatus == 3; else hello"
     (target)="listRow.NextScheduledSendStatus == 1 || listRow.NextScheduledSendStatus == 2 || listRow.NextScheduledSendStatus == 3"
     [target]="listRow.NextScheduledSendStatus == 1 || listRow.NextScheduledSendStatus == 2 || listRow.NextScheduledSendStatus == 3"
     [target]="{ longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong: true }"
@@ -137,6 +138,12 @@ exports[`attributes.component.html - angular-verify 1`] = `
       listRow.NextScheduledSendStatus == 2 ||
       listRow.NextScheduledSendStatus == 3
   "
+  *ngIf="
+    listRow.NextScheduledSendStatus == 1 ||
+      listRow.NextScheduledSendStatus == 2 ||
+      listRow.NextScheduledSendStatus == 3;
+    else: hello
+  "
   (target)="
     listRow.NextScheduledSendStatus == 1 ||
       listRow.NextScheduledSendStatus == 2 ||
@@ -217,6 +224,7 @@ exports[`attributes.component.html - angular-verify 2`] = `
     *directive=" a ; b : c as d "
     *directive=" a ; b as c "
     *ngIf="listRow.NextScheduledSendStatus == 1 || listRow.NextScheduledSendStatus == 2 || listRow.NextScheduledSendStatus == 3"
+    *ngIf="listRow.NextScheduledSendStatus == 1 || listRow.NextScheduledSendStatus == 2 || listRow.NextScheduledSendStatus == 3; else hello"
     (target)="listRow.NextScheduledSendStatus == 1 || listRow.NextScheduledSendStatus == 2 || listRow.NextScheduledSendStatus == 3"
     [target]="listRow.NextScheduledSendStatus == 1 || listRow.NextScheduledSendStatus == 2 || listRow.NextScheduledSendStatus == 3"
     [target]="{ longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong: true }"
@@ -291,6 +299,12 @@ exports[`attributes.component.html - angular-verify 2`] = `
       listRow.NextScheduledSendStatus == 2 ||
       listRow.NextScheduledSendStatus == 3
   "
+  *ngIf="
+    listRow.NextScheduledSendStatus == 1 ||
+      listRow.NextScheduledSendStatus == 2 ||
+      listRow.NextScheduledSendStatus == 3;
+    else: hello
+  "
   (target)="
     listRow.NextScheduledSendStatus == 1 ||
       listRow.NextScheduledSendStatus == 2 ||
diff --git a/tests/html_angular/attributes.component.html b/tests/html_angular/attributes.component.html
index f65cf289b273..df37a15a653e 100644
--- a/tests/html_angular/attributes.component.html
+++ b/tests/html_angular/attributes.component.html
@@ -60,6 +60,7 @@
     *directive=" a ; b : c as d "
     *directive=" a ; b as c "
     *ngIf="listRow.NextScheduledSendStatus == 1 || listRow.NextScheduledSendStatus == 2 || listRow.NextScheduledSendStatus == 3"
+    *ngIf="listRow.NextScheduledSendStatus == 1 || listRow.NextScheduledSendStatus == 2 || listRow.NextScheduledSendStatus == 3; else hello"
     (target)="listRow.NextScheduledSendStatus == 1 || listRow.NextScheduledSendStatus == 2 || listRow.NextScheduledSendStatus == 3"
     [target]="listRow.NextScheduledSendStatus == 1 || listRow.NextScheduledSendStatus == 2 || listRow.NextScheduledSendStatus == 3"
     [target]="{ longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong: true }"

From 245a3090832b29129f782038180f2a9eea47f55e Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Mon, 29 Oct 2018 14:36:54 +0800
Subject: [PATCH 132/177] fix(angular): correct indent for root logical
 expression

---
 src/language-js/printer-estree.js                |  5 +++++
 .../__snapshots__/jsfmt.spec.js.snap             | 16 ++++++++--------
 2 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/src/language-js/printer-estree.js b/src/language-js/printer-estree.js
index 3dfd33e2cfd6..334492b1c63c 100644
--- a/src/language-js/printer-estree.js
+++ b/src/language-js/printer-estree.js
@@ -528,6 +528,11 @@ function printPathNoParens(path, options, print, args) {
         parent.type === "ReturnStatement" ||
         (parent.type === "JSXExpressionContainer" &&
           parentParent.type === "JSXAttribute") ||
+        (n.type !== "NGPipeExpression" &&
+          ((parent.type === "NGRoot" && options.parser === "__ng_binding") ||
+            (parent.type === "NGMicrosyntaxExpression" &&
+              parentParent.type === "NGMicrosyntax" &&
+              parentParent.body.length === 1))) ||
         (n === parent.body && parent.type === "ArrowFunctionExpression") ||
         (n !== parent.body && parent.type === "ForStatement") ||
         (parent.type === "ConditionalExpression" &&
diff --git a/tests/html_angular/__snapshots__/jsfmt.spec.js.snap b/tests/html_angular/__snapshots__/jsfmt.spec.js.snap
index c2672bfe0751..4f8876304473 100644
--- a/tests/html_angular/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_angular/__snapshots__/jsfmt.spec.js.snap
@@ -135,8 +135,8 @@ exports[`attributes.component.html - angular-verify 1`] = `
   *directive="a; b as c"
   *ngIf="
     listRow.NextScheduledSendStatus == 1 ||
-      listRow.NextScheduledSendStatus == 2 ||
-      listRow.NextScheduledSendStatus == 3
+    listRow.NextScheduledSendStatus == 2 ||
+    listRow.NextScheduledSendStatus == 3
   "
   *ngIf="
     listRow.NextScheduledSendStatus == 1 ||
@@ -151,8 +151,8 @@ exports[`attributes.component.html - angular-verify 1`] = `
   "
   [target]="
     listRow.NextScheduledSendStatus == 1 ||
-      listRow.NextScheduledSendStatus == 2 ||
-      listRow.NextScheduledSendStatus == 3
+    listRow.NextScheduledSendStatus == 2 ||
+    listRow.NextScheduledSendStatus == 3
   "
   [target]="{
     longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong: true
@@ -296,8 +296,8 @@ exports[`attributes.component.html - angular-verify 2`] = `
   *directive="a; b as c"
   *ngIf="
     listRow.NextScheduledSendStatus == 1 ||
-      listRow.NextScheduledSendStatus == 2 ||
-      listRow.NextScheduledSendStatus == 3
+    listRow.NextScheduledSendStatus == 2 ||
+    listRow.NextScheduledSendStatus == 3
   "
   *ngIf="
     listRow.NextScheduledSendStatus == 1 ||
@@ -312,8 +312,8 @@ exports[`attributes.component.html - angular-verify 2`] = `
   "
   [target]="
     listRow.NextScheduledSendStatus == 1 ||
-      listRow.NextScheduledSendStatus == 2 ||
-      listRow.NextScheduledSendStatus == 3
+    listRow.NextScheduledSendStatus == 2 ||
+    listRow.NextScheduledSendStatus == 3
   "
   [target]="{
     longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong: true

From cf6b802d7cadb8f8b32e218a6174bed24a39f400 Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Mon, 29 Oct 2018 14:41:52 +0800
Subject: [PATCH 133/177] fix(angular): put pipe operator on the beginning of
 the line

---
 src/language-js/printer-estree.js             |  2 +-
 .../__snapshots__/jsfmt.spec.js.snap          | 32 +++++++++----------
 2 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/src/language-js/printer-estree.js b/src/language-js/printer-estree.js
index 334492b1c63c..1ee0e84461f8 100644
--- a/src/language-js/printer-estree.js
+++ b/src/language-js/printer-estree.js
@@ -5510,7 +5510,7 @@ function printBinaryishExpressions(
 
     const shouldInline = shouldInlineLogicalExpression(node);
     const lineBeforeOperator =
-      node.operator === "|>" &&
+      (node.operator === "|>" || node.type === "NGPipeExpression") &&
       !hasLeadingOwnLineComment(options.originalText, node.right, options);
 
     const operator = node.type === "NGPipeExpression" ? "|" : node.operator;
diff --git a/tests/html_angular/__snapshots__/jsfmt.spec.js.snap b/tests/html_angular/__snapshots__/jsfmt.spec.js.snap
index 4f8876304473..921e9426d525 100644
--- a/tests/html_angular/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_angular/__snapshots__/jsfmt.spec.js.snap
@@ -399,26 +399,26 @@ exports[`interpolation.component.html - angular-verify 1`] = `
 <label
   for="transmissionLayoutRadioButtontransmissionLayoutRadioButtontransmissionLayoutRadioButtontransmissionLayoutRadioButton"
   >{{
-    "SearchSelection.transmissionLayoutRadioButton" |
-      localize:localizationSection
+    "SearchSelection.transmissionLayoutRadioButton"
+      | localize:localizationSection
   }}</label
 >
 <label for="transmissionLayoutRadioButton"
   >{{
-    "SearchSelection.transmissionLayoutRadioButton" |
-      localize:localizationSection
+    "SearchSelection.transmissionLayoutRadioButton"
+      | localize:localizationSection
   }}
 </label>
 <label for="transmissionLayoutRadioButton">
   {{
-    "SearchSelection.transmissionLayoutRadioButton" |
-      localize:localizationSection
+    "SearchSelection.transmissionLayoutRadioButton"
+      | localize:localizationSection
   }}</label
 >
 <label for="transmissionLayoutRadioButton">
   {{
-    "SearchSelection.transmissionLayoutRadioButton" |
-      localize:localizationSection
+    "SearchSelection.transmissionLayoutRadioButton"
+      | localize:localizationSection
   }}
 </label>
 <div class="Nemo possimus non voluptates dicta accusamus id quia">
@@ -509,26 +509,26 @@ exports[`interpolation.component.html - angular-verify 2`] = `
 <label
   for="transmissionLayoutRadioButtontransmissionLayoutRadioButtontransmissionLayoutRadioButtontransmissionLayoutRadioButton"
   >{{
-    "SearchSelection.transmissionLayoutRadioButton" |
-      localize:localizationSection
+    "SearchSelection.transmissionLayoutRadioButton"
+      | localize:localizationSection
   }}</label
 >
 <label for="transmissionLayoutRadioButton"
   >{{
-    "SearchSelection.transmissionLayoutRadioButton" |
-      localize:localizationSection
+    "SearchSelection.transmissionLayoutRadioButton"
+      | localize:localizationSection
   }}
 </label>
 <label for="transmissionLayoutRadioButton">
   {{
-    "SearchSelection.transmissionLayoutRadioButton" |
-      localize:localizationSection
+    "SearchSelection.transmissionLayoutRadioButton"
+      | localize:localizationSection
   }}</label
 >
 <label for="transmissionLayoutRadioButton">
   {{
-    "SearchSelection.transmissionLayoutRadioButton" |
-      localize:localizationSection
+    "SearchSelection.transmissionLayoutRadioButton"
+      | localize:localizationSection
   }}
 </label>
 <div class="Nemo possimus non voluptates dicta accusamus id quia">

From f4f2a02f794d92bec13cdbbd8dd5996582d5e2a2 Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Mon, 29 Oct 2018 15:37:38 +0800
Subject: [PATCH 134/177] test: add tests

---
 tests/html_vue/__snapshots__/jsfmt.spec.js.snap | 16 ++++++++++++++++
 tests/html_vue/attributes.vue                   |  2 ++
 2 files changed, 18 insertions(+)

diff --git a/tests/html_vue/__snapshots__/jsfmt.spec.js.snap b/tests/html_vue/__snapshots__/jsfmt.spec.js.snap
index d7d629db7cc1..74a5680da117 100644
--- a/tests/html_vue/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_vue/__snapshots__/jsfmt.spec.js.snap
@@ -21,6 +21,8 @@ exports[`attributes.vue - vue-verify 1`] = `
   @click="   $emit(   'click'   )  ;"
   @click="   $emit(   'click'   )  ;if(something){for(let i=j;i<100;i++){}}else{}"
   slot-scope="{destructuring:{a:{b}}}"
+  :class="{ longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong: true }"
+  :class="(() => { return 'hello' })()"
 ></div>
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 <div
@@ -55,6 +57,12 @@ exports[`attributes.vue - vue-verify 1`] = `
       a: { b }
     }
   }"
+  :class="{
+    longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong: true
+  }"
+  :class="(() => {
+    return 'hello';
+  })()"
 ></div>
 
 `;
@@ -80,6 +88,8 @@ exports[`attributes.vue - vue-verify 2`] = `
   @click="   $emit(   'click'   )  ;"
   @click="   $emit(   'click'   )  ;if(something){for(let i=j;i<100;i++){}}else{}"
   slot-scope="{destructuring:{a:{b}}}"
+  :class="{ longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong: true }"
+  :class="(() => { return 'hello' })()"
 ></div>
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 <div
@@ -114,6 +124,12 @@ exports[`attributes.vue - vue-verify 2`] = `
       a: { b },
     },
   }"
+  :class="{
+    longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong: true,
+  }"
+  :class="(() => {
+    return 'hello';
+  })()"
 ></div>
 
 `;
diff --git a/tests/html_vue/attributes.vue b/tests/html_vue/attributes.vue
index 223b232081ed..55c85a895b7f 100644
--- a/tests/html_vue/attributes.vue
+++ b/tests/html_vue/attributes.vue
@@ -18,4 +18,6 @@
   @click="   $emit(   'click'   )  ;"
   @click="   $emit(   'click'   )  ;if(something){for(let i=j;i<100;i++){}}else{}"
   slot-scope="{destructuring:{a:{b}}}"
+  :class="{ longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong: true }"
+  :class="(() => { return 'hello' })()"
 ></div>

From 01f1fb300a88a677b21b86c940b1b91a9c7167d2 Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Mon, 29 Oct 2018 15:40:30 +0800
Subject: [PATCH 135/177] fix(vue): add missing softlines

---
 src/language-html/printer-html.js             | 67 ++++++++++++-------
 src/language-js/html-binding.js               |  4 ++
 src/language-js/printer-estree.js             | 23 +++----
 .../html_vue/__snapshots__/jsfmt.spec.js.snap | 16 +++--
 4 files changed, 64 insertions(+), 46 deletions(-)

diff --git a/src/language-html/printer-html.js b/src/language-html/printer-html.js
index 305f1dfd1191..402c08288543 100644
--- a/src/language-html/printer-html.js
+++ b/src/language-html/printer-html.js
@@ -759,12 +759,38 @@ function getTextValueParts(node, value = node.value) {
     : join(line, value.split(/\s+/)).parts;
 }
 
-function printEmbeddedAttributeValue(node, textToDoc, options) {
+function printEmbeddedAttributeValue(node, originalTextToDoc, options) {
   const isKeyMatched = patterns =>
     new RegExp(patterns.join("|")).test(node.name);
   const getValue = () =>
     node.value.replace(/&quot;/g, '"').replace(/&apos;/g, "'");
 
+  let shouldHug = false;
+
+  const __onHtmlBindingRoot = root => {
+    const rootNode =
+      root.type === "NGRoot"
+        ? root.node.type === "NGMicrosyntax" &&
+          root.node.body.length === 1 &&
+          root.node.body[0].type === "NGMicrosyntaxExpression"
+          ? root.node.body[0].expression
+          : root.node
+        : root.type === "JsExpressionRoot"
+          ? root.node
+          : root;
+    if (rootNode && rootNode.type === "ObjectExpression") {
+      shouldHug = true;
+    }
+  };
+
+  const printMaybeHug = doc =>
+    shouldHug
+      ? group(doc)
+      : group(concat([indent(concat([softline, doc])), softline]));
+
+  const textToDoc = (code, opts) =>
+    originalTextToDoc(code, Object.assign({ __onHtmlBindingRoot }, opts));
+
   if (options.parser === "vue") {
     if (node.name === "v-for") {
       return printVueFor(getValue(), textToDoc);
@@ -794,19 +820,25 @@ function printEmbeddedAttributeValue(node, textToDoc, options) {
       const simplePathRE = /^[A-Za-z_$][\w$]*(?:\.[A-Za-z_$][\w$]*|\['[^']*?']|\["[^"]*?"]|\[\d+]|\[[A-Za-z_$][\w$]*])*$/;
 
       const value = getValue();
-      const doc =
+      return printMaybeHug(
         simplePathRE.test(value) || fnExpRE.test(value)
           ? textToDoc(value, { parser: "__js_expression" })
-          : stripTrailingHardline(textToDoc(value, { parser: "babylon" }));
-      return group(concat([indent(concat([softline, doc])), softline]));
+          : stripTrailingHardline(textToDoc(value, { parser: "babylon" }))
+      );
     }
 
     if (isKeyMatched(vueExpressionBindingPatterns)) {
-      return textToDoc(getValue(), { parser: "__js_expression" });
+      return printMaybeHug(
+        textToDoc(getValue(), { parser: "__js_expression" })
+      );
     }
   }
 
   if (options.parser === "angular") {
+    const ngTextToDoc = (code, opts) =>
+      // angular does not allow trailing comma
+      textToDoc(code, Object.assign({ trailingComma: "none" }, opts));
+
     /**
      *     *directive="angularDirective"
      */
@@ -824,33 +856,18 @@ function printEmbeddedAttributeValue(node, textToDoc, options) {
      */
     const ngExpressionBindingPatterns = ["^\\[.+\\]$", "^bind(on)?-"];
 
-    const __ng_root_postprocess = (rootDoc, rootNode) =>
-      rootNode.type === "ObjectExpression"
-        ? rootDoc
-        : group(concat([indent(concat([softline, rootDoc])), softline]));
-
     if (isKeyMatched(ngStatementBindingPatterns)) {
-      return textToDoc(getValue(), {
-        parser: "__ng_action",
-        trailingComma: "none",
-        __ng_root_postprocess
-      });
+      return printMaybeHug(ngTextToDoc(getValue(), { parser: "__ng_action" }));
     }
 
     if (isKeyMatched(ngExpressionBindingPatterns)) {
-      return textToDoc(getValue(), {
-        parser: "__ng_binding",
-        trailingComma: "none",
-        __ng_root_postprocess
-      });
+      return printMaybeHug(ngTextToDoc(getValue(), { parser: "__ng_binding" }));
     }
 
     if (isKeyMatched(ngDirectiveBindingPatterns)) {
-      return textToDoc(getValue(), {
-        parser: "__ng_directive",
-        trailingComma: "none",
-        __ng_root_postprocess
-      });
+      return printMaybeHug(
+        ngTextToDoc(getValue(), { parser: "__ng_directive" })
+      );
     }
   }
 
diff --git a/src/language-js/html-binding.js b/src/language-js/html-binding.js
index 5bede6084a8f..411a2e9988ad 100644
--- a/src/language-js/html-binding.js
+++ b/src/language-js/html-binding.js
@@ -7,6 +7,10 @@ const {
 function printHtmlBinding(path, options, print) {
   const node = path.getValue();
 
+  if (options.__onHtmlBindingRoot && path.getName() === null) {
+    options.__onHtmlBindingRoot(node);
+  }
+
   if (node.type !== "File") {
     return;
   }
diff --git a/src/language-js/printer-estree.js b/src/language-js/printer-estree.js
index 1ee0e84461f8..c12f9df7ca3b 100644
--- a/src/language-js/printer-estree.js
+++ b/src/language-js/printer-estree.js
@@ -3400,22 +3400,15 @@ function printPathNoParens(path, options, print, args) {
 
       return concat(parts);
 
-    case "NGRoot": {
-      const rootNode = n.node;
-      const rootDoc = path.call(print, "node");
-      const postprocess = options.__ng_root_postprocess || (x => x);
-      return postprocess(
-        concat(
-          [].concat(
-            rootDoc,
-            !n.node.comments || n.node.comments.length === 0
-              ? []
-              : concat([" //", n.node.comments[0].value.trimRight()])
-          )
-        ),
-        rootNode
+    case "NGRoot":
+      return concat(
+        [].concat(
+          path.call(print, "node"),
+          !n.node.comments || n.node.comments.length === 0
+            ? []
+            : concat([" //", n.node.comments[0].value.trimRight()])
+        )
       );
-    }
     case "NGChainedExpression":
       return group(join(concat([";", line]), path.map(print, "expressions")));
     case "NGEmptyExpression":
diff --git a/tests/html_vue/__snapshots__/jsfmt.spec.js.snap b/tests/html_vue/__snapshots__/jsfmt.spec.js.snap
index 74a5680da117..f824f6e7da96 100644
--- a/tests/html_vue/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_vue/__snapshots__/jsfmt.spec.js.snap
@@ -60,9 +60,11 @@ exports[`attributes.vue - vue-verify 1`] = `
   :class="{
     longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong: true
   }"
-  :class="(() => {
-    return 'hello';
-  })()"
+  :class="
+    (() => {
+      return 'hello';
+    })()
+  "
 ></div>
 
 `;
@@ -127,9 +129,11 @@ exports[`attributes.vue - vue-verify 2`] = `
   :class="{
     longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong: true,
   }"
-  :class="(() => {
-    return 'hello';
-  })()"
+  :class="
+    (() => {
+      return 'hello';
+    })()
+  "
 ></div>
 
 `;

From 40db04f871c0db9e9680930e867be9abeb45cb28 Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Tue, 30 Oct 2018 11:07:05 +0800
Subject: [PATCH 136/177] test: add tests

---
 tests/html_angular/__snapshots__/jsfmt.spec.js.snap | 4 ++++
 tests/html_angular/attributes.component.html        | 1 +
 2 files changed, 5 insertions(+)

diff --git a/tests/html_angular/__snapshots__/jsfmt.spec.js.snap b/tests/html_angular/__snapshots__/jsfmt.spec.js.snap
index 921e9426d525..c1b7ec03128a 100644
--- a/tests/html_angular/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_angular/__snapshots__/jsfmt.spec.js.snap
@@ -67,6 +67,7 @@ exports[`attributes.component.html - angular-verify 1`] = `
     (target)="listRow.NextScheduledSendStatus == 1 || listRow.NextScheduledSendStatus == 2 || listRow.NextScheduledSendStatus == 3"
     [target]="listRow.NextScheduledSendStatus == 1 || listRow.NextScheduledSendStatus == 2 || listRow.NextScheduledSendStatus == 3"
     [target]="{ longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong: true }"
+    [error]="'We couldn\\\\\\'t find anything with that name.'"
 ></div>
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 <div
@@ -157,6 +158,7 @@ exports[`attributes.component.html - angular-verify 1`] = `
   [target]="{
     longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong: true
   }"
+  [error]="&quot;We couldn\\\\'t find anything with that name.&quot;"
 ></div>
 
 `;
@@ -228,6 +230,7 @@ exports[`attributes.component.html - angular-verify 2`] = `
     (target)="listRow.NextScheduledSendStatus == 1 || listRow.NextScheduledSendStatus == 2 || listRow.NextScheduledSendStatus == 3"
     [target]="listRow.NextScheduledSendStatus == 1 || listRow.NextScheduledSendStatus == 2 || listRow.NextScheduledSendStatus == 3"
     [target]="{ longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong: true }"
+    [error]="'We couldn\\\\\\'t find anything with that name.'"
 ></div>
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 <div
@@ -318,6 +321,7 @@ exports[`attributes.component.html - angular-verify 2`] = `
   [target]="{
     longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong: true
   }"
+  [error]="&quot;We couldn\\\\'t find anything with that name.&quot;"
 ></div>
 
 `;
diff --git a/tests/html_angular/attributes.component.html b/tests/html_angular/attributes.component.html
index df37a15a653e..fd1f8c245143 100644
--- a/tests/html_angular/attributes.component.html
+++ b/tests/html_angular/attributes.component.html
@@ -64,4 +64,5 @@
     (target)="listRow.NextScheduledSendStatus == 1 || listRow.NextScheduledSendStatus == 2 || listRow.NextScheduledSendStatus == 3"
     [target]="listRow.NextScheduledSendStatus == 1 || listRow.NextScheduledSendStatus == 2 || listRow.NextScheduledSendStatus == 3"
     [target]="{ longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong: true }"
+    [error]="'We couldn\\\'t find anything with that name.'"
 ></div>

From 4904c1f996f8c155bfd84ca52b5d5bcb23094a99 Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Tue, 30 Oct 2018 11:10:31 +0800
Subject: [PATCH 137/177] fix: always use single quote for expression in
 attribute

---
 src/common/util.js                                  | 8 +++++---
 src/language-html/printer-html.js                   | 4 ++--
 tests/html_angular/__snapshots__/jsfmt.spec.js.snap | 4 ++--
 3 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/common/util.js b/src/common/util.js
index a04a2d37dfd3..7bea29ca574c 100644
--- a/src/common/util.js
+++ b/src/common/util.js
@@ -464,9 +464,11 @@ function printString(raw, options, isDirectiveLiteral) {
   const enclosingQuote =
     options.parser === "json"
       ? double.quote
-      : shouldUseAlternateQuote
-        ? alternate.quote
-        : preferred.quote;
+      : options.__isInHtmlAttribute
+        ? single.quote
+        : shouldUseAlternateQuote
+          ? alternate.quote
+          : preferred.quote;
 
   // Directives are exact code unit sequences, which means that you can't
   // change the escape sequences they use.
diff --git a/src/language-html/printer-html.js b/src/language-html/printer-html.js
index 402c08288543..46cb6eb4aa99 100644
--- a/src/language-html/printer-html.js
+++ b/src/language-html/printer-html.js
@@ -99,8 +99,8 @@ function embed(path, print, textToDoc, options) {
       const embeddedAttributeValueDoc = printEmbeddedAttributeValue(
         node,
         (code, opts) =>
-          // prefer single quote to avoid unnecessary escape
-          textToDoc(code, Object.assign({ singleQuote: true }, opts)),
+          // strictly prefer single quote to avoid unnecessary html entity escape
+          textToDoc(code, Object.assign({ __isInHtmlAttribute: true }, opts)),
         options
       );
       if (embeddedAttributeValueDoc) {
diff --git a/tests/html_angular/__snapshots__/jsfmt.spec.js.snap b/tests/html_angular/__snapshots__/jsfmt.spec.js.snap
index c1b7ec03128a..e38c73cdb97b 100644
--- a/tests/html_angular/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_angular/__snapshots__/jsfmt.spec.js.snap
@@ -158,7 +158,7 @@ exports[`attributes.component.html - angular-verify 1`] = `
   [target]="{
     longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong: true
   }"
-  [error]="&quot;We couldn\\\\'t find anything with that name.&quot;"
+  [error]="'We couldn\\\\\\'t find anything with that name.'"
 ></div>
 
 `;
@@ -321,7 +321,7 @@ exports[`attributes.component.html - angular-verify 2`] = `
   [target]="{
     longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong: true
   }"
-  [error]="&quot;We couldn\\\\'t find anything with that name.&quot;"
+  [error]="'We couldn\\\\\\'t find anything with that name.'"
 ></div>
 
 `;

From 7c9a76adb4f103436694384a45abdef32952b466 Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Tue, 30 Oct 2018 15:45:37 +0800
Subject: [PATCH 138/177] test: add tests

---
 tests/html_angular/__snapshots__/jsfmt.spec.js.snap | 4 ++++
 tests/html_angular/attributes.component.html        | 1 +
 2 files changed, 5 insertions(+)

diff --git a/tests/html_angular/__snapshots__/jsfmt.spec.js.snap b/tests/html_angular/__snapshots__/jsfmt.spec.js.snap
index e38c73cdb97b..59c6f83a2673 100644
--- a/tests/html_angular/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_angular/__snapshots__/jsfmt.spec.js.snap
@@ -35,6 +35,7 @@ exports[`attributes.component.html - angular-verify 1`] = `
     [target]=" javascript : 'hello world' "
     [target]=" a ?. b ( ) "
     [target]=" a ?. b "
+    [target]=" this . a "
     on-target=" a = 1 "
     (target)=" a = 1 "
     (target)=" a . b = 1 "
@@ -104,6 +105,7 @@ exports[`attributes.component.html - angular-verify 1`] = `
   [target]="javascript: 'hello world' "
   [target]="a?.b()"
   [target]="a?.b"
+  [target]="a"
   on-target="(a = 1)"
   (target)="(a = 1)"
   (target)="(a.b = 1)"
@@ -198,6 +200,7 @@ exports[`attributes.component.html - angular-verify 2`] = `
     [target]=" javascript : 'hello world' "
     [target]=" a ?. b ( ) "
     [target]=" a ?. b "
+    [target]=" this . a "
     on-target=" a = 1 "
     (target)=" a = 1 "
     (target)=" a . b = 1 "
@@ -267,6 +270,7 @@ exports[`attributes.component.html - angular-verify 2`] = `
   [target]="javascript: 'hello world' "
   [target]="a?.b()"
   [target]="a?.b"
+  [target]="a"
   on-target="(a = 1)"
   (target)="(a = 1)"
   (target)="(a.b = 1)"
diff --git a/tests/html_angular/attributes.component.html b/tests/html_angular/attributes.component.html
index fd1f8c245143..5478f4068b48 100644
--- a/tests/html_angular/attributes.component.html
+++ b/tests/html_angular/attributes.component.html
@@ -32,6 +32,7 @@
     [target]=" javascript : 'hello world' "
     [target]=" a ?. b ( ) "
     [target]=" a ?. b "
+    [target]=" this . a "
     on-target=" a = 1 "
     (target)=" a = 1 "
     (target)=" a . b = 1 "

From 3dc4477c2010fc84d1b067f5e33fe3b6fab914de Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Tue, 30 Oct 2018 15:47:13 +0800
Subject: [PATCH 139/177] fix(angular): do not remove `this.`

---
 package.json                                        | 2 +-
 tests/html_angular/__snapshots__/jsfmt.spec.js.snap | 4 ++--
 yarn.lock                                           | 6 +++---
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index b0943560a991..5532531cef98 100644
--- a/package.json
+++ b/package.json
@@ -19,7 +19,7 @@
     "@babel/parser": "7.1.2",
     "@glimmer/syntax": "0.30.3",
     "@iarna/toml": "2.0.0",
-    "angular-estree-parser": "1.1.1",
+    "angular-estree-parser": "1.1.2",
     "angular-html-parser": "1.0.0",
     "camelcase": "4.1.0",
     "chalk": "2.1.0",
diff --git a/tests/html_angular/__snapshots__/jsfmt.spec.js.snap b/tests/html_angular/__snapshots__/jsfmt.spec.js.snap
index 59c6f83a2673..2df30c03619f 100644
--- a/tests/html_angular/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_angular/__snapshots__/jsfmt.spec.js.snap
@@ -105,7 +105,7 @@ exports[`attributes.component.html - angular-verify 1`] = `
   [target]="javascript: 'hello world' "
   [target]="a?.b()"
   [target]="a?.b"
-  [target]="a"
+  [target]="this.a"
   on-target="(a = 1)"
   (target)="(a = 1)"
   (target)="(a.b = 1)"
@@ -270,7 +270,7 @@ exports[`attributes.component.html - angular-verify 2`] = `
   [target]="javascript: 'hello world' "
   [target]="a?.b()"
   [target]="a?.b"
-  [target]="a"
+  [target]="this.a"
   on-target="(a = 1)"
   (target)="(a = 1)"
   (target)="(a.b = 1)"
diff --git a/yarn.lock b/yarn.lock
index 7372e4e42715..41d400c9bb9b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -668,9 +668,9 @@ amdefine@>=0.0.4:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/amdefine/-/amdefine-1.0.1.tgz#4a5282ac164729e93619bcfd3ad151f817ce91f5"
 
-angular-estree-parser@1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/angular-estree-parser/-/angular-estree-parser-1.1.1.tgz#408a2e0f2ca95a7d8563a4c93d3411c7148d9b67"
+angular-estree-parser@1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/angular-estree-parser/-/angular-estree-parser-1.1.2.tgz#d95f263df5825ea59c643d38b67119576d21c844"
   dependencies:
     lines-and-columns "^1.1.6"
     tslib "^1.9.3"

From 875caac392d5eac7d7c7ca079c3c6f95b21db58c Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Tue, 30 Oct 2018 16:24:10 +0800
Subject: [PATCH 140/177] test: add tests

---
 .../__snapshots__/jsfmt.spec.js.snap          | 32 +++++++++++++++++++
 tests/html_angular/attributes.component.html  |  8 +++++
 2 files changed, 40 insertions(+)

diff --git a/tests/html_angular/__snapshots__/jsfmt.spec.js.snap b/tests/html_angular/__snapshots__/jsfmt.spec.js.snap
index 2df30c03619f..dadfef4b189a 100644
--- a/tests/html_angular/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_angular/__snapshots__/jsfmt.spec.js.snap
@@ -42,6 +42,14 @@ exports[`attributes.component.html - angular-verify 1`] = `
     (target)=" a [ b ] = 1 "
     (target)=" a // hello "
     (target)=" a ; b "
+    (event)="  0  "
+    (event)="  a.b  "
+    (event)="  hello  "
+    (event)="  hello()  "
+    (event)="  a && b  "
+    (event)="  a && b()  "
+    (event)="  foo = $event  "
+    (event)="  foo == $event  "
     *ngIf=" something?true:false    "
     *ngFor="  let     hero     of     heroes"
     *ngFor="  let    hero     of[1,2,3,666666666666666666666666666666666666]; let i=index"
@@ -112,6 +120,14 @@ exports[`attributes.component.html - angular-verify 1`] = `
   (target)="(a[b] = 1)"
   (target)="a // hello"
   (target)="a; b"
+  (event)="0"
+  (event)="a.b"
+  (event)="hello"
+  (event)="hello()"
+  (event)="a && b"
+  (event)="a && b()"
+  (event)="(foo = $event)"
+  (event)="foo == $event"
   *ngIf="something ? true : false"
   *ngFor="let hero of heroes"
   *ngFor="
@@ -207,6 +223,14 @@ exports[`attributes.component.html - angular-verify 2`] = `
     (target)=" a [ b ] = 1 "
     (target)=" a // hello "
     (target)=" a ; b "
+    (event)="  0  "
+    (event)="  a.b  "
+    (event)="  hello  "
+    (event)="  hello()  "
+    (event)="  a && b  "
+    (event)="  a && b()  "
+    (event)="  foo = $event  "
+    (event)="  foo == $event  "
     *ngIf=" something?true:false    "
     *ngFor="  let     hero     of     heroes"
     *ngFor="  let    hero     of[1,2,3,666666666666666666666666666666666666]; let i=index"
@@ -277,6 +301,14 @@ exports[`attributes.component.html - angular-verify 2`] = `
   (target)="(a[b] = 1)"
   (target)="a // hello"
   (target)="a; b"
+  (event)="0"
+  (event)="a.b"
+  (event)="hello"
+  (event)="hello()"
+  (event)="a && b"
+  (event)="a && b()"
+  (event)="(foo = $event)"
+  (event)="foo == $event"
   *ngIf="something ? true : false"
   *ngFor="let hero of heroes"
   *ngFor="
diff --git a/tests/html_angular/attributes.component.html b/tests/html_angular/attributes.component.html
index 5478f4068b48..c1a30b657fff 100644
--- a/tests/html_angular/attributes.component.html
+++ b/tests/html_angular/attributes.component.html
@@ -39,6 +39,14 @@
     (target)=" a [ b ] = 1 "
     (target)=" a // hello "
     (target)=" a ; b "
+    (event)="  0  "
+    (event)="  a.b  "
+    (event)="  hello  "
+    (event)="  hello()  "
+    (event)="  a && b  "
+    (event)="  a && b()  "
+    (event)="  foo = $event  "
+    (event)="  foo == $event  "
     *ngIf=" something?true:false    "
     *ngFor="  let     hero     of     heroes"
     *ngFor="  let    hero     of[1,2,3,666666666666666666666666666666666666]; let i=index"

From a0711c1c3158e3a1c1dd3dd65617309526607849 Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Tue, 30 Oct 2018 16:44:46 +0800
Subject: [PATCH 141/177] feat(angular): only add parens in action expr if it
 has no side effect

---
 src/language-js/needs-parens.js               |  2 +
 src/language-js/parser-angular.js             | 14 ++-
 src/language-js/printer-estree.js             | 28 +++++-
 src/language-js/utils.js                      | 14 +++
 .../__snapshots__/jsfmt.spec.js.snap          | 94 +++++++++----------
 5 files changed, 99 insertions(+), 53 deletions(-)

diff --git a/src/language-js/needs-parens.js b/src/language-js/needs-parens.js
index e3f18a2ccb14..4d65e92987ea 100644
--- a/src/language-js/needs-parens.js
+++ b/src/language-js/needs-parens.js
@@ -500,6 +500,8 @@ function needsParens(path, options) {
         return false;
       } else if (parent.type === "Property" && parent.value === node) {
         return false;
+      } else if (parent.type === "NGChainedExpression") {
+        return false;
       }
       return true;
     }
diff --git a/src/language-js/parser-angular.js b/src/language-js/parser-angular.js
index a8cc37370f73..1055ab50e96a 100644
--- a/src/language-js/parser-angular.js
+++ b/src/language-js/parser-angular.js
@@ -3,9 +3,19 @@
 const locFns = require("./loc");
 
 function createParser(_parse) {
-  const parse = (text /*, parsers, opts */) => {
+  const parse = (text, parsers, options) => {
     const ngEstreeParser = require("angular-estree-parser");
-    return { type: "NGRoot", node: _parse(text, ngEstreeParser) };
+    const node = _parse(text, ngEstreeParser);
+    return {
+      type: "NGRoot",
+      node:
+        options.parser === "__ng_action" && node.type !== "NGChainedExpression"
+          ? Object.assign({}, node, {
+              type: "NGChainedExpression",
+              expressions: [node]
+            })
+          : node
+    };
   };
   return Object.assign({ astFormat: "estree", parse }, locFns);
 }
diff --git a/src/language-js/printer-estree.js b/src/language-js/printer-estree.js
index c12f9df7ca3b..5119635f96ff 100644
--- a/src/language-js/printer-estree.js
+++ b/src/language-js/printer-estree.js
@@ -36,6 +36,7 @@ const pathNeedsParens = require("./needs-parens");
 const preprocess = require("./preprocess");
 const { printHtmlBinding } = require("./html-binding");
 const {
+  hasNode,
   hasFlowAnnotationComment,
   hasFlowShorthandAnnotationComment
 } = require("./utils");
@@ -3410,7 +3411,18 @@ function printPathNoParens(path, options, print, args) {
         )
       );
     case "NGChainedExpression":
-      return group(join(concat([";", line]), path.map(print, "expressions")));
+      return group(
+        join(
+          concat([";", line]),
+          path.map(
+            childPath =>
+              hasNgSideEffect(childPath)
+                ? print(childPath)
+                : concat(["(", print(childPath), ")"]),
+            "expressions"
+          )
+        )
+      );
     case "NGEmptyExpression":
       return "";
     case "NGQuotedExpression":
@@ -3477,6 +3489,20 @@ function isNgForOf(path) {
   );
 }
 
+/** identify if an angular expression seems to have side effects */
+function hasNgSideEffect(path) {
+  return hasNode(path.getValue(), node => {
+    switch (node.type) {
+      case undefined:
+        return false;
+      case "CallExpression":
+      case "OptionalCallExpression":
+      case "AssignmentExpression":
+        return true;
+    }
+  });
+}
+
 function printStatementSequence(path, options, print) {
   const printed = [];
 
diff --git a/src/language-js/utils.js b/src/language-js/utils.js
index b8a7a946f0a9..5721041bad15 100644
--- a/src/language-js/utils.js
+++ b/src/language-js/utils.js
@@ -31,7 +31,21 @@ function hasFlowAnnotationComment(comments) {
   return comments && comments[0].value.match(FLOW_ANNOTATION);
 }
 
+function hasNode(node, fn) {
+  if (!node || typeof node !== "object") {
+    return false;
+  }
+  if (Array.isArray(node)) {
+    return node.some(value => hasNode(value, fn));
+  }
+  const result = fn(node);
+  return typeof result === "boolean"
+    ? result
+    : Object.keys(node).some(key => hasNode(node[key], fn));
+}
+
 module.exports = {
+  hasNode,
   hasFlowShorthandAnnotationComment,
   hasFlowAnnotationComment
 };
diff --git a/tests/html_angular/__snapshots__/jsfmt.spec.js.snap b/tests/html_angular/__snapshots__/jsfmt.spec.js.snap
index dadfef4b189a..27164da3d155 100644
--- a/tests/html_angular/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_angular/__snapshots__/jsfmt.spec.js.snap
@@ -114,20 +114,20 @@ exports[`attributes.component.html - angular-verify 1`] = `
   [target]="a?.b()"
   [target]="a?.b"
   [target]="this.a"
-  on-target="(a = 1)"
-  (target)="(a = 1)"
-  (target)="(a.b = 1)"
-  (target)="(a[b] = 1)"
-  (target)="a // hello"
-  (target)="a; b"
-  (event)="0"
-  (event)="a.b"
-  (event)="hello"
+  on-target="a = 1"
+  (target)="a = 1"
+  (target)="a.b = 1"
+  (target)="a[b] = 1"
+  (target)="(a) // hello"
+  (target)="(a); (b)"
+  (event)="(0)"
+  (event)="(a.b)"
+  (event)="(hello)"
   (event)="hello()"
-  (event)="a && b"
+  (event)="(a && b)"
   (event)="a && b()"
-  (event)="(foo = $event)"
-  (event)="foo == $event"
+  (event)="foo = $event"
+  (event)="(foo == $event)"
   *ngIf="something ? true : false"
   *ngFor="let hero of heroes"
   *ngFor="
@@ -164,9 +164,9 @@ exports[`attributes.component.html - angular-verify 1`] = `
     else: hello
   "
   (target)="
-    listRow.NextScheduledSendStatus == 1 ||
+    (listRow.NextScheduledSendStatus == 1 ||
       listRow.NextScheduledSendStatus == 2 ||
-      listRow.NextScheduledSendStatus == 3
+      listRow.NextScheduledSendStatus == 3)
   "
   [target]="
     listRow.NextScheduledSendStatus == 1 ||
@@ -295,20 +295,20 @@ exports[`attributes.component.html - angular-verify 2`] = `
   [target]="a?.b()"
   [target]="a?.b"
   [target]="this.a"
-  on-target="(a = 1)"
-  (target)="(a = 1)"
-  (target)="(a.b = 1)"
-  (target)="(a[b] = 1)"
-  (target)="a // hello"
-  (target)="a; b"
-  (event)="0"
-  (event)="a.b"
-  (event)="hello"
+  on-target="a = 1"
+  (target)="a = 1"
+  (target)="a.b = 1"
+  (target)="a[b] = 1"
+  (target)="(a) // hello"
+  (target)="(a); (b)"
+  (event)="(0)"
+  (event)="(a.b)"
+  (event)="(hello)"
   (event)="hello()"
-  (event)="a && b"
+  (event)="(a && b)"
   (event)="a && b()"
-  (event)="(foo = $event)"
-  (event)="foo == $event"
+  (event)="foo = $event"
+  (event)="(foo == $event)"
   *ngIf="something ? true : false"
   *ngFor="let hero of heroes"
   *ngFor="
@@ -345,9 +345,9 @@ exports[`attributes.component.html - angular-verify 2`] = `
     else: hello
   "
   (target)="
-    listRow.NextScheduledSendStatus == 1 ||
+    (listRow.NextScheduledSendStatus == 1 ||
       listRow.NextScheduledSendStatus == 2 ||
-      listRow.NextScheduledSendStatus == 3
+      listRow.NextScheduledSendStatus == 3)
   "
   [target]="
     listRow.NextScheduledSendStatus == 1 ||
@@ -1380,7 +1380,7 @@ can be found in the LICENSE file at http://angular.io/license
 </ng-template>
 
 <p>Template reference variable expression context (#heroInput)</p>
-<div (keyup)="0" class="context">
+<div (keyup)="(0)" class="context">
   Type something: <input #heroInput /> {{ heroInput.value }}
 </div>
 
@@ -1444,7 +1444,7 @@ can be found in the LICENSE file at http://angular.io/license
 
 <button (click)="onSave()">Save</button>
 <app-hero-detail (deleteRequest)="deleteHero()"></app-hero-detail>
-<div (myClick)="(clicked = $event)" clickable>click me</div>
+<div (myClick)="clicked = $event" clickable>click me</div>
 {{ clicked }} <br /><br />
 
 <div>Hero Name: <input [(ngModel)]="name" /> {{ name }}</div>
@@ -1611,7 +1611,7 @@ can be found in the LICENSE file at http://angular.io/license
 
 <div>
   <!-- \`myClick\` is an event on the custom \`ClickDirective\` -->
-  <div (myClick)="(clickMessage = $event)" clickable>click with myClick</div>
+  <div (myClick)="clickMessage = $event" clickable>click with myClick</div>
   {{ clickMessage }}
 </div>
 
@@ -1652,10 +1652,7 @@ can be found in the LICENSE file at http://angular.io/license
 <br />
 <div id="two-way-2">
   <h3>De-sugared two-way binding</h3>
-  <app-sizer
-    [size]="fontSizePx"
-    (sizeChange)="(fontSizePx = $event)"
-  ></app-sizer>
+  <app-sizer [size]="fontSizePx" (sizeChange)="fontSizePx = $event"></app-sizer>
 </div>
 
 <a class="to-toc" href="#toc">top</a>
@@ -1671,14 +1668,14 @@ can be found in the LICENSE file at http://angular.io/license
 
 <input
   [value]="currentHero.name"
-  (input)="(currentHero.name = $event.target.value)"
+  (input)="currentHero.name = $event.target.value"
 />
 without NgModel <br />
 <input [(ngModel)]="currentHero.name" /> [(ngModel)] <br />
 <input bindon-ngModel="currentHero.name" /> bindon-ngModel <br />
 <input
   [ngModel]="currentHero.name"
-  (ngModelChange)="(currentHero.name = $event)"
+  (ngModelChange)="currentHero.name = $event"
 />
 (ngModelChange)="...name=$event" <br />
 <input
@@ -1706,7 +1703,7 @@ without NgModel <br />
   <input
     type="checkbox"
     [value]="!isUnchanged"
-    (change)="(isUnchanged = !isUnchanged)"
+    (change)="isUnchanged = !isUnchanged"
 /></label>
 | <label>special: <input type="checkbox" [(ngModel)]="isSpecial"/></label>
 <button (click)="setCurrentClasses()">Refresh currentClasses</button>
@@ -1942,7 +1939,7 @@ without NgModel <br />
 <app-hero-detail [hero]="currentHero" (deleteRequest)="deleteHero($event)">
 </app-hero-detail>
 
-<div (myClick)="(clickMessage2 = $event)" clickable>myClick2</div>
+<div (myClick)="clickMessage2 = $event" clickable>myClick2</div>
 {{ clickMessage2 }}
 
 <a class="to-toc" href="#toc">top</a>
@@ -2871,7 +2868,7 @@ can be found in the LICENSE file at http://angular.io/license
 </ng-template>
 
 <p>Template reference variable expression context (#heroInput)</p>
-<div (keyup)="0" class="context">
+<div (keyup)="(0)" class="context">
   Type something: <input #heroInput /> {{ heroInput.value }}
 </div>
 
@@ -2935,7 +2932,7 @@ can be found in the LICENSE file at http://angular.io/license
 
 <button (click)="onSave()">Save</button>
 <app-hero-detail (deleteRequest)="deleteHero()"></app-hero-detail>
-<div (myClick)="(clicked = $event)" clickable>click me</div>
+<div (myClick)="clicked = $event" clickable>click me</div>
 {{ clicked }} <br /><br />
 
 <div>Hero Name: <input [(ngModel)]="name" /> {{ name }}</div>
@@ -3102,7 +3099,7 @@ can be found in the LICENSE file at http://angular.io/license
 
 <div>
   <!-- \`myClick\` is an event on the custom \`ClickDirective\` -->
-  <div (myClick)="(clickMessage = $event)" clickable>click with myClick</div>
+  <div (myClick)="clickMessage = $event" clickable>click with myClick</div>
   {{ clickMessage }}
 </div>
 
@@ -3143,10 +3140,7 @@ can be found in the LICENSE file at http://angular.io/license
 <br />
 <div id="two-way-2">
   <h3>De-sugared two-way binding</h3>
-  <app-sizer
-    [size]="fontSizePx"
-    (sizeChange)="(fontSizePx = $event)"
-  ></app-sizer>
+  <app-sizer [size]="fontSizePx" (sizeChange)="fontSizePx = $event"></app-sizer>
 </div>
 
 <a class="to-toc" href="#toc">top</a>
@@ -3162,14 +3156,14 @@ can be found in the LICENSE file at http://angular.io/license
 
 <input
   [value]="currentHero.name"
-  (input)="(currentHero.name = $event.target.value)"
+  (input)="currentHero.name = $event.target.value"
 />
 without NgModel <br />
 <input [(ngModel)]="currentHero.name" /> [(ngModel)] <br />
 <input bindon-ngModel="currentHero.name" /> bindon-ngModel <br />
 <input
   [ngModel]="currentHero.name"
-  (ngModelChange)="(currentHero.name = $event)"
+  (ngModelChange)="currentHero.name = $event"
 />
 (ngModelChange)="...name=$event" <br />
 <input
@@ -3197,7 +3191,7 @@ without NgModel <br />
   <input
     type="checkbox"
     [value]="!isUnchanged"
-    (change)="(isUnchanged = !isUnchanged)"
+    (change)="isUnchanged = !isUnchanged"
 /></label>
 | <label>special: <input type="checkbox" [(ngModel)]="isSpecial"/></label>
 <button (click)="setCurrentClasses()">Refresh currentClasses</button>
@@ -3433,7 +3427,7 @@ without NgModel <br />
 <app-hero-detail [hero]="currentHero" (deleteRequest)="deleteHero($event)">
 </app-hero-detail>
 
-<div (myClick)="(clickMessage2 = $event)" clickable>myClick2</div>
+<div (myClick)="clickMessage2 = $event" clickable>myClick2</div>
 {{ clickMessage2 }}
 
 <a class="to-toc" href="#toc">top</a>

From 2277d5e2d1f814f550796c605db50302968f609d Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Tue, 30 Oct 2018 17:30:08 +0800
Subject: [PATCH 142/177] test: add tests

---
 .../__snapshots__/jsfmt.spec.js.snap          | 120 ++++++++++++++++++
 tests/html_tags/tags.html                     |  13 ++
 2 files changed, 133 insertions(+)

diff --git a/tests/html_tags/__snapshots__/jsfmt.spec.js.snap b/tests/html_tags/__snapshots__/jsfmt.spec.js.snap
index b344f2af6400..d543ed1c262d 100644
--- a/tests/html_tags/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_tags/__snapshots__/jsfmt.spec.js.snap
@@ -1467,6 +1467,19 @@ exports[`tags.html - html-verify 1`] = `
 <br /><br />
 <p>"<span [innerHTML]="title"></span>" is the <i>property bound</i> title.</p>
 <li>12345678901234567890123456789012345678901234567890123456789012345678901234567890</li>
+<div>
+<app-nav></app-nav>
+<router-outlet></router-outlet>
+<app-footer></app-footer>
+
+<app-nav [input]="something"></app-nav>
+<router-outlet></router-outlet>
+<app-footer></app-footer>
+
+<app-primary-navigation></app-primary-navigation>
+<router-outlet></router-outlet>
+<app-footer [input]="something"></app-footer>
+</div>
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 <br />
 <br />
@@ -1617,6 +1630,15 @@ exports[`tags.html - html-verify 1`] = `
 <li>
   12345678901234567890123456789012345678901234567890123456789012345678901234567890
 </li>
+<div>
+  <app-nav></app-nav> <router-outlet></router-outlet> <app-footer></app-footer>
+
+  <app-nav [input]="something"></app-nav> <router-outlet></router-outlet>
+  <app-footer></app-footer>
+
+  <app-primary-navigation></app-primary-navigation>
+  <router-outlet></router-outlet> <app-footer [input]="something"></app-footer>
+</div>
 
 `;
 
@@ -1709,6 +1731,19 @@ exports[`tags.html - html-verify 2`] = `
 <br /><br />
 <p>"<span [innerHTML]="title"></span>" is the <i>property bound</i> title.</p>
 <li>12345678901234567890123456789012345678901234567890123456789012345678901234567890</li>
+<div>
+<app-nav></app-nav>
+<router-outlet></router-outlet>
+<app-footer></app-footer>
+
+<app-nav [input]="something"></app-nav>
+<router-outlet></router-outlet>
+<app-footer></app-footer>
+
+<app-primary-navigation></app-primary-navigation>
+<router-outlet></router-outlet>
+<app-footer [input]="something"></app-footer>
+</div>
 ~
 <br />
 <br />
@@ -2029,6 +2064,23 @@ exports[`tags.html - html-verify 2`] = `
 <li>
   12345678901234567890123456789012345678901234567890123456789012345678901234567890
 </li>
+<div>
+  <app-nav></app-nav>
+  <router-outlet></router-outlet>
+  <app-footer></app-footer>
+
+  <app-nav
+    [input]="something"
+  ></app-nav>
+  <router-outlet></router-outlet>
+  <app-footer></app-footer>
+
+  <app-primary-navigation></app-primary-navigation>
+  <router-outlet></router-outlet>
+  <app-footer
+    [input]="something"
+  ></app-footer>
+</div>
 
 `;
 
@@ -2121,6 +2173,19 @@ exports[`tags.html - html-verify 3`] = `
 <br /><br />
 <p>"<span [innerHTML]="title"></span>" is the <i>property bound</i> title.</p>
 <li>12345678901234567890123456789012345678901234567890123456789012345678901234567890</li>
+<div>
+<app-nav></app-nav>
+<router-outlet></router-outlet>
+<app-footer></app-footer>
+
+<app-nav [input]="something"></app-nav>
+<router-outlet></router-outlet>
+<app-footer></app-footer>
+
+<app-primary-navigation></app-primary-navigation>
+<router-outlet></router-outlet>
+<app-footer [input]="something"></app-footer>
+</div>
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 <br />
 <br />
@@ -2205,6 +2270,13 @@ exports[`tags.html - html-verify 3`] = `
 <button bind-disabled="isUnchanged" on-click="onSave($event)">Disabled Cancel</button> <br /><br />
 <p>"<span [innerHTML]="title"></span>" is the <i>property bound</i> title.</p>
 <li>12345678901234567890123456789012345678901234567890123456789012345678901234567890</li>
+<div>
+  <app-nav></app-nav> <router-outlet></router-outlet> <app-footer></app-footer>
+
+  <app-nav [input]="something"></app-nav> <router-outlet></router-outlet> <app-footer></app-footer>
+
+  <app-primary-navigation></app-primary-navigation> <router-outlet></router-outlet> <app-footer [input]="something"></app-footer>
+</div>
 
 `;
 
@@ -2297,6 +2369,19 @@ exports[`tags.html - html-verify 4`] = `
 <br /><br />
 <p>"<span [innerHTML]="title"></span>" is the <i>property bound</i> title.</p>
 <li>12345678901234567890123456789012345678901234567890123456789012345678901234567890</li>
+<div>
+<app-nav></app-nav>
+<router-outlet></router-outlet>
+<app-footer></app-footer>
+
+<app-nav [input]="something"></app-nav>
+<router-outlet></router-outlet>
+<app-footer></app-footer>
+
+<app-primary-navigation></app-primary-navigation>
+<router-outlet></router-outlet>
+<app-footer [input]="something"></app-footer>
+</div>
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 <br />
 <br />
@@ -2426,6 +2511,15 @@ exports[`tags.html - html-verify 4`] = `
 <li
   >12345678901234567890123456789012345678901234567890123456789012345678901234567890</li
 >
+<div>
+  <app-nav></app-nav> <router-outlet></router-outlet> <app-footer></app-footer>
+
+  <app-nav [input]="something"></app-nav> <router-outlet></router-outlet>
+  <app-footer></app-footer>
+
+  <app-primary-navigation></app-primary-navigation>
+  <router-outlet></router-outlet> <app-footer [input]="something"></app-footer>
+</div>
 
 `;
 
@@ -2518,6 +2612,19 @@ exports[`tags.html - html-verify 5`] = `
 <br /><br />
 <p>"<span [innerHTML]="title"></span>" is the <i>property bound</i> title.</p>
 <li>12345678901234567890123456789012345678901234567890123456789012345678901234567890</li>
+<div>
+<app-nav></app-nav>
+<router-outlet></router-outlet>
+<app-footer></app-footer>
+
+<app-nav [input]="something"></app-nav>
+<router-outlet></router-outlet>
+<app-footer></app-footer>
+
+<app-primary-navigation></app-primary-navigation>
+<router-outlet></router-outlet>
+<app-footer [input]="something"></app-footer>
+</div>
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 <br />
 <br />
@@ -2697,6 +2804,19 @@ exports[`tags.html - html-verify 5`] = `
 <li>
   12345678901234567890123456789012345678901234567890123456789012345678901234567890
 </li>
+<div>
+  <app-nav></app-nav>
+  <router-outlet></router-outlet>
+  <app-footer></app-footer>
+
+  <app-nav [input]="something"></app-nav>
+  <router-outlet></router-outlet>
+  <app-footer></app-footer>
+
+  <app-primary-navigation></app-primary-navigation>
+  <router-outlet></router-outlet>
+  <app-footer [input]="something"></app-footer>
+</div>
 
 `;
 
diff --git a/tests/html_tags/tags.html b/tests/html_tags/tags.html
index adb9976b5699..df3f23f9c7fb 100644
--- a/tests/html_tags/tags.html
+++ b/tests/html_tags/tags.html
@@ -86,3 +86,16 @@
 <br /><br />
 <p>"<span [innerHTML]="title"></span>" is the <i>property bound</i> title.</p>
 <li>12345678901234567890123456789012345678901234567890123456789012345678901234567890</li>
+<div>
+<app-nav></app-nav>
+<router-outlet></router-outlet>
+<app-footer></app-footer>
+
+<app-nav [input]="something"></app-nav>
+<router-outlet></router-outlet>
+<app-footer></app-footer>
+
+<app-primary-navigation></app-primary-navigation>
+<router-outlet></router-outlet>
+<app-footer [input]="something"></app-footer>
+</div>

From fffa49d4057187c78425acc316537e96331c36ed Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Tue, 30 Oct 2018 17:33:11 +0800
Subject: [PATCH 143/177] feat: respect linebreak before/after custom elements

---
 src/language-html/parser-html.js              | 22 +++++++----
 src/language-html/utils.js                    | 39 ++++++++++++++++++-
 .../__snapshots__/jsfmt.spec.js.snap          | 32 ++++++++++-----
 3 files changed, 75 insertions(+), 18 deletions(-)

diff --git a/src/language-html/parser-html.js b/src/language-html/parser-html.js
index 701b68469280..596a83885943 100644
--- a/src/language-html/parser-html.js
+++ b/src/language-html/parser-html.js
@@ -148,8 +148,8 @@ function _parse(
     ast.children.unshift(frontMatter);
   }
 
-  const parseSubHtml = (subContent, startSourceSpan) => {
-    const { offset } = startSourceSpan;
+  const parseSubHtml = (subContent, startSpan) => {
+    const { offset } = startSpan;
     const fakeContent = text.slice(0, offset).replace(/[^\r\n]/g, " ");
     const realContent = subContent;
     const subAst = _parse(
@@ -160,7 +160,7 @@ function _parse(
     );
     const ParseSourceSpan = subAst.children[0].sourceSpan.constructor;
     subAst.sourceSpan = new ParseSourceSpan(
-      startSourceSpan,
+      startSpan,
       subAst.children[subAst.children.length - 1].sourceSpan.end
     );
     const firstText = subAst.children[0];
@@ -220,11 +220,19 @@ function parseIeConditionalComment(node, parseHtml) {
 
   const [, openingTagSuffix, condition, data] = match;
   const offset = "<!--".length + openingTagSuffix.length;
-  const startSourceSpan = node.sourceSpan.start.moveBy(offset);
-
-  return Object.assign({}, parseHtml(data, startSourceSpan), {
+  const contentStartSpan = node.sourceSpan.start.moveBy(offset);
+  const ParseSourceSpan = contentStartSpan.constructor;
+  return Object.assign({}, parseHtml(data, contentStartSpan), {
     type: "ieConditionalComment",
-    condition: condition.trim().replace(/\s+/g, " ")
+    condition: condition.trim().replace(/\s+/g, " "),
+    startSourceSpan: new ParseSourceSpan(
+      node.sourceSpan.start,
+      contentStartSpan
+    ),
+    endSourceSpan: new ParseSourceSpan(
+      contentStartSpan.moveBy(data.length),
+      node.sourceSpan.end
+    )
   });
 }
 
diff --git a/src/language-html/utils.js b/src/language-html/utils.js
index 0307612d6589..63ad3da50db3 100644
--- a/src/language-html/utils.js
+++ b/src/language-html/utils.js
@@ -250,12 +250,47 @@ function forceBreakChildren(node) {
 function preferHardlineAsLeadingSpaces(node) {
   return (
     preferHardlineAsSurroundingSpaces(node) ||
-    (node.prev && preferHardlineAsTrailingSpaces(node.prev))
+    (node.prev && preferHardlineAsTrailingSpaces(node.prev)) ||
+    isCustomElementWithSurroundingLineBreak(node)
   );
 }
 
 function preferHardlineAsTrailingSpaces(node) {
-  return preferHardlineAsSurroundingSpaces(node) || isElement(node, "br");
+  return (
+    preferHardlineAsSurroundingSpaces(node) ||
+    isElement(node, "br") ||
+    isCustomElementWithSurroundingLineBreak(node)
+  );
+}
+
+function isCustomElementWithSurroundingLineBreak(node) {
+  return isCustomElement(node) && hasSurroundingLineBreak(node);
+}
+
+function isCustomElement(node) {
+  return isElement(node) && node.name.includes("-");
+}
+
+function hasSurroundingLineBreak(node) {
+  return hasLeadingLineBreak(node) && hasTrailingLineBreak(node);
+}
+
+function hasLeadingLineBreak(node) {
+  return (
+    node.hasLeadingSpaces &&
+    (node.prev
+      ? node.prev.sourceSpan.end.line < node.sourceSpan.start.line
+      : node.parent.startSourceSpan.end.line < node.sourceSpan.start.line)
+  );
+}
+
+function hasTrailingLineBreak(node) {
+  return (
+    node.hasTrailingSpaces &&
+    (node.next
+      ? node.next.sourceSpan.start.line > node.sourceSpan.end.line
+      : node.parent.endSourceSpan.start.line > node.sourceSpan.end.line)
+  );
 }
 
 function preferHardlineAsSurroundingSpaces(node) {
diff --git a/tests/html_tags/__snapshots__/jsfmt.spec.js.snap b/tests/html_tags/__snapshots__/jsfmt.spec.js.snap
index d543ed1c262d..6b8d2e12b8bf 100644
--- a/tests/html_tags/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_tags/__snapshots__/jsfmt.spec.js.snap
@@ -1631,13 +1631,17 @@ exports[`tags.html - html-verify 1`] = `
   12345678901234567890123456789012345678901234567890123456789012345678901234567890
 </li>
 <div>
-  <app-nav></app-nav> <router-outlet></router-outlet> <app-footer></app-footer>
+  <app-nav></app-nav>
+  <router-outlet></router-outlet>
+  <app-footer></app-footer>
 
-  <app-nav [input]="something"></app-nav> <router-outlet></router-outlet>
+  <app-nav [input]="something"></app-nav>
+  <router-outlet></router-outlet>
   <app-footer></app-footer>
 
   <app-primary-navigation></app-primary-navigation>
-  <router-outlet></router-outlet> <app-footer [input]="something"></app-footer>
+  <router-outlet></router-outlet>
+  <app-footer [input]="something"></app-footer>
 </div>
 
 `;
@@ -2271,11 +2275,17 @@ exports[`tags.html - html-verify 3`] = `
 <p>"<span [innerHTML]="title"></span>" is the <i>property bound</i> title.</p>
 <li>12345678901234567890123456789012345678901234567890123456789012345678901234567890</li>
 <div>
-  <app-nav></app-nav> <router-outlet></router-outlet> <app-footer></app-footer>
+  <app-nav></app-nav>
+  <router-outlet></router-outlet>
+  <app-footer></app-footer>
 
-  <app-nav [input]="something"></app-nav> <router-outlet></router-outlet> <app-footer></app-footer>
+  <app-nav [input]="something"></app-nav>
+  <router-outlet></router-outlet>
+  <app-footer></app-footer>
 
-  <app-primary-navigation></app-primary-navigation> <router-outlet></router-outlet> <app-footer [input]="something"></app-footer>
+  <app-primary-navigation></app-primary-navigation>
+  <router-outlet></router-outlet>
+  <app-footer [input]="something"></app-footer>
 </div>
 
 `;
@@ -2512,13 +2522,17 @@ exports[`tags.html - html-verify 4`] = `
   >12345678901234567890123456789012345678901234567890123456789012345678901234567890</li
 >
 <div>
-  <app-nav></app-nav> <router-outlet></router-outlet> <app-footer></app-footer>
+  <app-nav></app-nav>
+  <router-outlet></router-outlet>
+  <app-footer></app-footer>
 
-  <app-nav [input]="something"></app-nav> <router-outlet></router-outlet>
+  <app-nav [input]="something"></app-nav>
+  <router-outlet></router-outlet>
   <app-footer></app-footer>
 
   <app-primary-navigation></app-primary-navigation>
-  <router-outlet></router-outlet> <app-footer [input]="something"></app-footer>
+  <router-outlet></router-outlet>
+  <app-footer [input]="something"></app-footer>
 </div>
 
 `;

From 54ef258aff48c105cecfcba5ee1f7855117745ff Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Thu, 1 Nov 2018 10:42:35 +0800
Subject: [PATCH 144/177] test: add tests

---
 tests/html_vue/__snapshots__/jsfmt.spec.js.snap | 8 ++++++++
 tests/html_vue/attributes.vue                   | 2 ++
 2 files changed, 10 insertions(+)

diff --git a/tests/html_vue/__snapshots__/jsfmt.spec.js.snap b/tests/html_vue/__snapshots__/jsfmt.spec.js.snap
index f824f6e7da96..dbd650d9c81d 100644
--- a/tests/html_vue/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_vue/__snapshots__/jsfmt.spec.js.snap
@@ -23,6 +23,8 @@ exports[`attributes.vue - vue-verify 1`] = `
   slot-scope="{destructuring:{a:{b}}}"
   :class="{ longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong: true }"
   :class="(() => { return 'hello' })()"
+  :key="index /* hello */ "
+  :key="index // hello "
 ></div>
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 <div
@@ -65,6 +67,8 @@ exports[`attributes.vue - vue-verify 1`] = `
       return 'hello';
     })()
   "
+  :key="index"
+  :key="index"
 ></div>
 
 `;
@@ -92,6 +96,8 @@ exports[`attributes.vue - vue-verify 2`] = `
   slot-scope="{destructuring:{a:{b}}}"
   :class="{ longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong: true }"
   :class="(() => { return 'hello' })()"
+  :key="index /* hello */ "
+  :key="index // hello "
 ></div>
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 <div
@@ -134,6 +140,8 @@ exports[`attributes.vue - vue-verify 2`] = `
       return 'hello';
     })()
   "
+  :key="index"
+  :key="index"
 ></div>
 
 `;
diff --git a/tests/html_vue/attributes.vue b/tests/html_vue/attributes.vue
index 55c85a895b7f..211fc141e480 100644
--- a/tests/html_vue/attributes.vue
+++ b/tests/html_vue/attributes.vue
@@ -20,4 +20,6 @@
   slot-scope="{destructuring:{a:{b}}}"
   :class="{ longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong: true }"
   :class="(() => { return 'hello' })()"
+  :key="index /* hello */ "
+  :key="index // hello "
 ></div>

From e6f2acf723d537875bc65e07ff1fabf443d5e6dc Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Thu, 1 Nov 2018 11:17:38 +0800
Subject: [PATCH 145/177] fix: correctly print comments in js expression

---
 src/common/internal-plugins.js                |  4 --
 src/language-js/parser-babylon.js             |  6 +-
 src/language-js/preprocess.js                 |  5 +-
 src/language-js/printer-estree.js             |  3 +-
 src/language-markdown/embed.js                |  2 +-
 src/main/comments.js                          | 15 +++--
 .../html_vue/__snapshots__/jsfmt.spec.js.snap | 12 ++--
 .../__snapshots__/jsfmt.spec.js.snap          | 56 +++++++++++++++++++
 .../with-comment/bottom-block-comment.json    |  1 +
 .../with-comment/bottom-line-comment.json     |  1 +
 website/static/worker.js                      |  4 --
 11 files changed, 84 insertions(+), 25 deletions(-)
 create mode 100644 tests/json/with-comment/bottom-block-comment.json
 create mode 100644 tests/json/with-comment/bottom-line-comment.json

diff --git a/src/common/internal-plugins.js b/src/common/internal-plugins.js
index 4dc6db630614..7332a658a5fd 100644
--- a/src/common/internal-plugins.js
+++ b/src/common/internal-plugins.js
@@ -29,10 +29,6 @@ module.exports = [
         return eval("require")("../language-js/parser-babylon").parsers
           .__js_expression;
       },
-      get __jsx_expression() {
-        return eval("require")("../language-js/parser-babylon").parsers
-          .__jsx_expression;
-      },
       // JS - Flow
       get flow() {
         return eval("require")("../language-js/parser-flow").parsers.flow;
diff --git a/src/language-js/parser-babylon.js b/src/language-js/parser-babylon.js
index 72570448cfe4..01e204d0dd5a 100644
--- a/src/language-js/parser-babylon.js
+++ b/src/language-js/parser-babylon.js
@@ -180,9 +180,7 @@ module.exports = {
       },
       locFns
     ),
-    /** @internal for html to print js without semicolon and trailing newline */
-    __js_expression: babylon,
-    /** @internal for mdx to print jsx without semicolon and outer parens */
-    __jsx_expression: babylon
+    /** @internal */
+    __js_expression: babylon
   }
 };
diff --git a/src/language-js/preprocess.js b/src/language-js/preprocess.js
index 712ed69b1398..a44572ca1533 100644
--- a/src/language-js/preprocess.js
+++ b/src/language-js/preprocess.js
@@ -11,10 +11,9 @@ function preprocess(ast, options) {
           options.parser === "__js_expression"
             ? "JsExpressionRoot"
             : "JsonRoot",
-        node: Object.assign({}, ast, { comments: [] })
+        node: ast,
+        comments: []
       });
-    // do not process jsx expression to avoid unnecessary parens
-    case "__jsx_expression":
     default:
       return ast;
   }
diff --git a/src/language-js/printer-estree.js b/src/language-js/printer-estree.js
index 5119635f96ff..253f7b6f9c04 100644
--- a/src/language-js/printer-estree.js
+++ b/src/language-js/printer-estree.js
@@ -5413,7 +5413,8 @@ function maybeWrapJSXElementInParens(path, elem) {
     ExpressionStatement: true,
     CallExpression: true,
     OptionalCallExpression: true,
-    ConditionalExpression: true
+    ConditionalExpression: true,
+    JsExpressionRoot: true
   };
   if (NO_WRAP_PARENTS[parent.type]) {
     return elem;
diff --git a/src/language-markdown/embed.js b/src/language-markdown/embed.js
index 3f943c9fc149..9161761609f1 100644
--- a/src/language-markdown/embed.js
+++ b/src/language-markdown/embed.js
@@ -57,7 +57,7 @@ function embed(path, print, textToDoc, options) {
     case "importExport":
       return textToDoc(node.value, { parser: "babylon" });
     case "jsx":
-      return textToDoc(node.value, { parser: "__jsx_expression" });
+      return textToDoc(node.value, { parser: "__js_expression" });
   }
 
   return null;
diff --git a/src/main/comments.js b/src/main/comments.js
index 3a784fbc8619..13ae9bab1726 100644
--- a/src/main/comments.js
+++ b/src/main/comments.js
@@ -181,11 +181,18 @@ function attach(comments, ast, text, options) {
 
   comments.forEach((comment, i) => {
     if (
-      (options.parser === "json" || options.parser === "json5") &&
-      locStart(comment) - locStart(ast) <= 0
+      options.parser === "json" ||
+      options.parser === "json5" ||
+      options.parser === "__js_expression"
     ) {
-      addLeadingComment(ast, comment);
-      return;
+      if (locStart(comment) - locStart(ast) <= 0) {
+        addLeadingComment(ast, comment);
+        return;
+      }
+      if (locEnd(comment) - locEnd(ast) >= 0) {
+        addTrailingComment(ast, comment);
+        return;
+      }
     }
 
     decorateComment(ast, comment, options);
diff --git a/tests/html_vue/__snapshots__/jsfmt.spec.js.snap b/tests/html_vue/__snapshots__/jsfmt.spec.js.snap
index dbd650d9c81d..9462bc3af6eb 100644
--- a/tests/html_vue/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_vue/__snapshots__/jsfmt.spec.js.snap
@@ -67,8 +67,10 @@ exports[`attributes.vue - vue-verify 1`] = `
       return 'hello';
     })()
   "
-  :key="index"
-  :key="index"
+  :key="index /* hello */"
+  :key="
+    index // hello
+  "
 ></div>
 
 `;
@@ -140,8 +142,10 @@ exports[`attributes.vue - vue-verify 2`] = `
       return 'hello';
     })()
   "
-  :key="index"
-  :key="index"
+  :key="index /* hello */"
+  :key="
+    index // hello
+  "
 ></div>
 
 `;
diff --git a/tests/json/with-comment/__snapshots__/jsfmt.spec.js.snap b/tests/json/with-comment/__snapshots__/jsfmt.spec.js.snap
index 3bd0d8fd03b9..7422eee2d3bc 100644
--- a/tests/json/with-comment/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/json/with-comment/__snapshots__/jsfmt.spec.js.snap
@@ -28,6 +28,62 @@ exports[`block-comment.json - json5-verify 2`] = `
 
 `;
 
+exports[`bottom-block-comment.json - json-verify 1`] = `
+1 /* block-comment */
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+1 /* block-comment */
+
+`;
+
+exports[`bottom-block-comment.json - json-verify 2`] = `
+1 /* block-comment */
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+1 /* block-comment */
+
+`;
+
+exports[`bottom-block-comment.json - json5-verify 1`] = `
+1 /* block-comment */
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+1 /* block-comment */
+
+`;
+
+exports[`bottom-block-comment.json - json5-verify 2`] = `
+1 /* block-comment */
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+1 /* block-comment */
+
+`;
+
+exports[`bottom-line-comment.json - json-verify 1`] = `
+1 // line-comment
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+1 // line-comment
+
+`;
+
+exports[`bottom-line-comment.json - json-verify 2`] = `
+1 // line-comment
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+1 // line-comment
+
+`;
+
+exports[`bottom-line-comment.json - json5-verify 1`] = `
+1 // line-comment
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+1 // line-comment
+
+`;
+
+exports[`bottom-line-comment.json - json5-verify 2`] = `
+1 // line-comment
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+1 // line-comment
+
+`;
+
 exports[`line-comment.json - json-verify 1`] = `
 {
   //comment
diff --git a/tests/json/with-comment/bottom-block-comment.json b/tests/json/with-comment/bottom-block-comment.json
new file mode 100644
index 000000000000..00b9a996621e
--- /dev/null
+++ b/tests/json/with-comment/bottom-block-comment.json
@@ -0,0 +1 @@
+1 /* block-comment */
diff --git a/tests/json/with-comment/bottom-line-comment.json b/tests/json/with-comment/bottom-line-comment.json
new file mode 100644
index 000000000000..ceb959ae29c8
--- /dev/null
+++ b/tests/json/with-comment/bottom-line-comment.json
@@ -0,0 +1 @@
+1 // line-comment
diff --git a/website/static/worker.js b/website/static/worker.js
index edef89746c2f..0531ee6f6577 100644
--- a/website/static/worker.js
+++ b/website/static/worker.js
@@ -33,10 +33,6 @@ var parsers = {
     importScriptOnce("lib/parser-babylon.js");
     return prettierPlugins.babylon.parsers.__js_expression;
   },
-  get __jsx_expression() {
-    importScriptOnce("lib/parser-babylon.js");
-    return prettierPlugins.babylon.parsers.__jsx_expression;
-  },
   // JS - Flow
   get flow() {
     importScriptOnce("lib/parser-flow.js");

From 413ba1ce5b6ca0b8c03a1a38cdc8a08cd6678841 Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Thu, 1 Nov 2018 11:37:38 +0800
Subject: [PATCH 146/177] test: add tests

---
 .../__snapshots__/jsfmt.spec.js.snap          | 24 +++++++++++++++++--
 .../angular_interpolation/pipe-expression.ng  | 12 +++++++++-
 2 files changed, 33 insertions(+), 3 deletions(-)

diff --git a/tests/angular_interpolation/__snapshots__/jsfmt.spec.js.snap b/tests/angular_interpolation/__snapshots__/jsfmt.spec.js.snap
index 3635682e285c..e21e8f52e5ca 100644
--- a/tests/angular_interpolation/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/angular_interpolation/__snapshots__/jsfmt.spec.js.snap
@@ -26,7 +26,17 @@ exports[`pipe-expression.ng - __ng_interpolation-verify 1`] = `
     a?.b(c | d),
     a[b | c],
     ($students | async).items,
-    ($students | async)()
+    ($students | async)(),
+    myData | myPipe:'arg1':'arg2':'arg3',
+    value
+      | pipeA: {
+        keyA: reallySuperLongValue,
+        keyB: shortValue | pipeB | pipeC: valueToPipeC
+      } : {
+        keyA: reallySuperLongValue,
+        keyB: shortValue | pipeB | pipeC: valueToPipeC
+      }
+      | aaa
 ]
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 [
@@ -41,6 +51,16 @@ exports[`pipe-expression.ng - __ng_interpolation-verify 1`] = `
   a?.b(c | d),
   a[b | c],
   ($students | async).items,
-  ($students | async)()
+  ($students | async)(),
+  myData | myPipe:"arg1":"arg2":"arg3",
+  value
+    | pipeA:{
+      keyA: reallySuperLongValue,
+      keyB: shortValue | pipeB | pipeC:valueToPipeC
+    }:{
+      keyA: reallySuperLongValue,
+      keyB: shortValue | pipeB | pipeC:valueToPipeC
+    }
+    | aaa
 ]
 `;
diff --git a/tests/angular_interpolation/pipe-expression.ng b/tests/angular_interpolation/pipe-expression.ng
index 27add64367b2..9477cadb738a 100644
--- a/tests/angular_interpolation/pipe-expression.ng
+++ b/tests/angular_interpolation/pipe-expression.ng
@@ -10,5 +10,15 @@
     a?.b(c | d),
     a[b | c],
     ($students | async).items,
-    ($students | async)()
+    ($students | async)(),
+    myData | myPipe:'arg1':'arg2':'arg3',
+    value
+      | pipeA: {
+        keyA: reallySuperLongValue,
+        keyB: shortValue | pipeB | pipeC: valueToPipeC
+      } : {
+        keyA: reallySuperLongValue,
+        keyB: shortValue | pipeB | pipeC: valueToPipeC
+      }
+      | aaa
 ]

From 217873d3927a1c4df3eec0a2ed749efaf7468ef4 Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Thu, 1 Nov 2018 11:38:22 +0800
Subject: [PATCH 147/177] fix(angular): improve pipe formatting

---
 src/language-js/printer-estree.js             | 13 ++++-
 .../__snapshots__/jsfmt.spec.js.snap          | 22 +++----
 .../__snapshots__/jsfmt.spec.js.snap          | 58 ++++++++++---------
 3 files changed, 56 insertions(+), 37 deletions(-)

diff --git a/src/language-js/printer-estree.js b/src/language-js/printer-estree.js
index 253f7b6f9c04..d3db9a49474f 100644
--- a/src/language-js/printer-estree.js
+++ b/src/language-js/printer-estree.js
@@ -5536,7 +5536,18 @@ function printBinaryishExpressions(
     const operator = node.type === "NGPipeExpression" ? "|" : node.operator;
     const rightSuffix =
       node.type === "NGPipeExpression" && node.arguments.length !== 0
-        ? concat([":", join(":", path.map(print, "arguments"))])
+        ? group(
+            indent(
+              concat([
+                softline,
+                ": ",
+                join(
+                  concat([softline, ":", ifBreak(" ")]),
+                  path.map(print, "arguments").map(arg => align(2, group(arg)))
+                )
+              ])
+            )
+          )
         : "";
 
     const right = shouldInline
diff --git a/tests/angular_interpolation/__snapshots__/jsfmt.spec.js.snap b/tests/angular_interpolation/__snapshots__/jsfmt.spec.js.snap
index e21e8f52e5ca..8885a5343b2b 100644
--- a/tests/angular_interpolation/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/angular_interpolation/__snapshots__/jsfmt.spec.js.snap
@@ -40,10 +40,10 @@ exports[`pipe-expression.ng - __ng_interpolation-verify 1`] = `
 ]
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 [
-  a ? (b | c:d) : (e | f:g),
+  a ? (b | c: d) : (e | f: g),
   a | b | c | d,
   a | b | c | d,
-  a | b:(c | d),
+  a | b: (c | d),
   { a: b | c },
   a + b | c,
   (a | b) + c,
@@ -52,15 +52,17 @@ exports[`pipe-expression.ng - __ng_interpolation-verify 1`] = `
   a[b | c],
   ($students | async).items,
   ($students | async)(),
-  myData | myPipe:"arg1":"arg2":"arg3",
+  myData | myPipe: "arg1":"arg2":"arg3",
   value
-    | pipeA:{
-      keyA: reallySuperLongValue,
-      keyB: shortValue | pipeB | pipeC:valueToPipeC
-    }:{
-      keyA: reallySuperLongValue,
-      keyB: shortValue | pipeB | pipeC:valueToPipeC
-    }
+    | pipeA
+      : {
+          keyA: reallySuperLongValue,
+          keyB: shortValue | pipeB | pipeC: valueToPipeC
+        }
+      : {
+          keyA: reallySuperLongValue,
+          keyB: shortValue | pipeB | pipeC: valueToPipeC
+        }
     | aaa
 ]
 `;
diff --git a/tests/html_angular/__snapshots__/jsfmt.spec.js.snap b/tests/html_angular/__snapshots__/jsfmt.spec.js.snap
index 27164da3d155..595e08e38aab 100644
--- a/tests/html_angular/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_angular/__snapshots__/jsfmt.spec.js.snap
@@ -80,10 +80,10 @@ exports[`attributes.component.html - angular-verify 1`] = `
 ></div>
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 <div
-  bindon-target="a | b:c"
-  [(target)]="a | b:c"
-  bind-target="a | b:c"
-  [target]="a | b:c"
+  bindon-target="a | b: c"
+  [(target)]="a | b: c"
+  bind-target="a | b: c"
+  [target]="a | b: c"
   [target]="0 - 1"
   [target]="-1"
   [target]="a ? 1 : 2"
@@ -261,10 +261,10 @@ exports[`attributes.component.html - angular-verify 2`] = `
 ></div>
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 <div
-  bindon-target="a | b:c"
-  [(target)]="a | b:c"
-  bind-target="a | b:c"
-  [target]="a | b:c"
+  bindon-target="a | b: c"
+  [(target)]="a | b: c"
+  bind-target="a | b: c"
+  [target]="a | b: c"
   [target]="0 - 1"
   [target]="-1"
   [target]="a ? 1 : 2"
@@ -407,7 +407,7 @@ exports[`interpolation.component.html - angular-verify 1`] = `
 <div class="Nemo possimus non voluptates dicta accusamus id quia">{{copyTypes[options.copyType]}}</div>
 {{listRow.NextScheduledSendStatus == 1 || listRow.NextScheduledSendStatus == 2 || listRow.NextScheduledSendStatus == 3}}
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-<div>{{ a | b:c }}</div>
+<div>{{ a | b: c }}</div>
 <div>{{ 0 - 1 }}</div>
 <div>{{ -1 }}</div>
 <div>{{ a ? 1 : 2 }}</div>
@@ -434,31 +434,32 @@ exports[`interpolation.component.html - angular-verify 1`] = `
 <div>{{ a?.b }}</div>
 <div>{{ a // hello }}</div>
 <label for="transmissionLayoutRadioButton">{{
-  "SearchSelection.transmissionLayoutRadioButton" | localize:localizationSection
+  "SearchSelection.transmissionLayoutRadioButton"
+    | localize: localizationSection
 }}</label>
 <label
   for="transmissionLayoutRadioButtontransmissionLayoutRadioButtontransmissionLayoutRadioButtontransmissionLayoutRadioButton"
   >{{
     "SearchSelection.transmissionLayoutRadioButton"
-      | localize:localizationSection
+      | localize: localizationSection
   }}</label
 >
 <label for="transmissionLayoutRadioButton"
   >{{
     "SearchSelection.transmissionLayoutRadioButton"
-      | localize:localizationSection
+      | localize: localizationSection
   }}
 </label>
 <label for="transmissionLayoutRadioButton">
   {{
     "SearchSelection.transmissionLayoutRadioButton"
-      | localize:localizationSection
+      | localize: localizationSection
   }}</label
 >
 <label for="transmissionLayoutRadioButton">
   {{
     "SearchSelection.transmissionLayoutRadioButton"
-      | localize:localizationSection
+      | localize: localizationSection
   }}
 </label>
 <div class="Nemo possimus non voluptates dicta accusamus id quia">
@@ -517,7 +518,7 @@ exports[`interpolation.component.html - angular-verify 2`] = `
 <div class="Nemo possimus non voluptates dicta accusamus id quia">{{copyTypes[options.copyType]}}</div>
 {{listRow.NextScheduledSendStatus == 1 || listRow.NextScheduledSendStatus == 2 || listRow.NextScheduledSendStatus == 3}}
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-<div>{{ a | b:c }}</div>
+<div>{{ a | b: c }}</div>
 <div>{{ 0 - 1 }}</div>
 <div>{{ -1 }}</div>
 <div>{{ a ? 1 : 2 }}</div>
@@ -544,31 +545,32 @@ exports[`interpolation.component.html - angular-verify 2`] = `
 <div>{{ a?.b }}</div>
 <div>{{ a // hello }}</div>
 <label for="transmissionLayoutRadioButton">{{
-  "SearchSelection.transmissionLayoutRadioButton" | localize:localizationSection
+  "SearchSelection.transmissionLayoutRadioButton"
+    | localize: localizationSection
 }}</label>
 <label
   for="transmissionLayoutRadioButtontransmissionLayoutRadioButtontransmissionLayoutRadioButtontransmissionLayoutRadioButton"
   >{{
     "SearchSelection.transmissionLayoutRadioButton"
-      | localize:localizationSection
+      | localize: localizationSection
   }}</label
 >
 <label for="transmissionLayoutRadioButton"
   >{{
     "SearchSelection.transmissionLayoutRadioButton"
-      | localize:localizationSection
+      | localize: localizationSection
   }}
 </label>
 <label for="transmissionLayoutRadioButton">
   {{
     "SearchSelection.transmissionLayoutRadioButton"
-      | localize:localizationSection
+      | localize: localizationSection
   }}</label
 >
 <label for="transmissionLayoutRadioButton">
   {{
     "SearchSelection.transmissionLayoutRadioButton"
-      | localize:localizationSection
+      | localize: localizationSection
   }}
 </label>
 <div class="Nemo possimus non voluptates dicta accusamus id quia">
@@ -1954,15 +1956,17 @@ without NgModel <br />
 <div>Title through a pipe chain: {{ title | uppercase | lowercase }}</div>
 
 <!-- pipe with configuration argument => "February 25, 1970" -->
-<div>Birthdate: {{ currentHero?.birthdate | date:"longDate" }}</div>
+<div>Birthdate: {{ currentHero?.birthdate | date: "longDate" }}</div>
 
 <div>{{ currentHero | json }}</div>
 
-<div>Birthdate: {{ currentHero?.birthdate | date:"longDate" | uppercase }}</div>
+<div>
+  Birthdate: {{ currentHero?.birthdate | date: "longDate" | uppercase }}
+</div>
 
 <div>
   <!-- pipe price to USD and display the $ symbol -->
-  <label>Price: </label>{{ product.price | currency:"USD":true }}
+  <label>Price: </label>{{ product.price | currency: "USD":true }}
 </div>
 
 <a class="to-toc" href="#toc">top</a>
@@ -3442,15 +3446,17 @@ without NgModel <br />
 <div>Title through a pipe chain: {{ title | uppercase | lowercase }}</div>
 
 <!-- pipe with configuration argument => "February 25, 1970" -->
-<div>Birthdate: {{ currentHero?.birthdate | date:"longDate" }}</div>
+<div>Birthdate: {{ currentHero?.birthdate | date: "longDate" }}</div>
 
 <div>{{ currentHero | json }}</div>
 
-<div>Birthdate: {{ currentHero?.birthdate | date:"longDate" | uppercase }}</div>
+<div>
+  Birthdate: {{ currentHero?.birthdate | date: "longDate" | uppercase }}
+</div>
 
 <div>
   <!-- pipe price to USD and display the $ symbol -->
-  <label>Price: </label>{{ product.price | currency:"USD":true }}
+  <label>Price: </label>{{ product.price | currency: "USD":true }}
 </div>
 
 <a class="to-toc" href="#toc">top</a>

From 41c3cd222efd37dc6e7fdecce3b3b968da1adc75 Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Thu, 1 Nov 2018 16:24:51 +0800
Subject: [PATCH 148/177] test: add tests

---
 .../__snapshots__/jsfmt.spec.js.snap          | 32 +++++++++++++++++++
 tests/html_attributes/srcset.html             |  9 ++++++
 2 files changed, 41 insertions(+)
 create mode 100644 tests/html_attributes/srcset.html

diff --git a/tests/html_attributes/__snapshots__/jsfmt.spec.js.snap b/tests/html_attributes/__snapshots__/jsfmt.spec.js.snap
index cbf575a57847..e3e88bd15ab4 100644
--- a/tests/html_attributes/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_attributes/__snapshots__/jsfmt.spec.js.snap
@@ -237,6 +237,38 @@ exports[`single-quotes.html - html-verify 1`] = `
 
 `;
 
+exports[`srcset.html - html-verify 1`] = `
+<img src="/assets/visual.png" 
+srcset="/assets/visual@0.5.png  400w, /assets/visual.png      805w" 
+sizes="(max-width: 66rem) 100vw, 66rem" alt=""/>
+<img src="/assets/visual.png" 
+srcset="/assets/visual@0.5.png  400w, /assets/visual.png      805w,	/assets/visual@2x.png   1610w,	/assets/visual@3x.png   2415w" 
+sizes="(max-width: 66rem) 100vw, 66rem" alt=""/>
+<img src="/assets/visual.png" 
+srcset="/assets/visual@0.5.png  0.5x, /assets/visual.png      1111x,	/assets/visual@2x.png   2x,	/assets/visual@3x.png   3.3333x" 
+sizes="(max-width: 66rem) 100vw, 66rem" alt=""/>
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+<img
+  src="/assets/visual.png"
+  srcset="/assets/visual@0.5.png  400w, /assets/visual.png      805w"
+  sizes="(max-width: 66rem) 100vw, 66rem"
+  alt=""
+/>
+<img
+  src="/assets/visual.png"
+  srcset="/assets/visual@0.5.png  400w, /assets/visual.png      805w,	/assets/visual@2x.png   1610w,	/assets/visual@3x.png   2415w"
+  sizes="(max-width: 66rem) 100vw, 66rem"
+  alt=""
+/>
+<img
+  src="/assets/visual.png"
+  srcset="/assets/visual@0.5.png  0.5x, /assets/visual.png      1111x,	/assets/visual@2x.png   2x,	/assets/visual@3x.png   3.3333x"
+  sizes="(max-width: 66rem) 100vw, 66rem"
+  alt=""
+/>
+
+`;
+
 exports[`without-quotes.html - html-verify 1`] = `
 <p title=Title>String</p>
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
diff --git a/tests/html_attributes/srcset.html b/tests/html_attributes/srcset.html
new file mode 100644
index 000000000000..a320c725d100
--- /dev/null
+++ b/tests/html_attributes/srcset.html
@@ -0,0 +1,9 @@
+<img src="/assets/visual.png" 
+srcset="/assets/visual@0.5.png  400w, /assets/visual.png      805w" 
+sizes="(max-width: 66rem) 100vw, 66rem" alt=""/>
+<img src="/assets/visual.png" 
+srcset="/assets/visual@0.5.png  400w, /assets/visual.png      805w,	/assets/visual@2x.png   1610w,	/assets/visual@3x.png   2415w" 
+sizes="(max-width: 66rem) 100vw, 66rem" alt=""/>
+<img src="/assets/visual.png" 
+srcset="/assets/visual@0.5.png  0.5x, /assets/visual.png      1111x,	/assets/visual@2x.png   2x,	/assets/visual@3x.png   3.3333x" 
+sizes="(max-width: 66rem) 100vw, 66rem" alt=""/>

From 6ef1328dce9653564b23e7b0db7347575d6b4f2f Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Thu, 1 Nov 2018 17:07:10 +0800
Subject: [PATCH 149/177] feat: support img.srcset

---
 package.json                                  |  1 +
 src/language-html/preprocess.js               |  9 +++
 src/language-html/printer-html.js             | 13 ++--
 src/language-html/syntax-attribute.js         | 64 +++++++++++++++++++
 .../__snapshots__/jsfmt.spec.js.snap          | 16 ++++-
 yarn.lock                                     |  4 ++
 6 files changed, 100 insertions(+), 7 deletions(-)
 create mode 100644 src/language-html/syntax-attribute.js

diff --git a/package.json b/package.json
index 5532531cef98..5eb3e1a34541 100644
--- a/package.json
+++ b/package.json
@@ -54,6 +54,7 @@
     "minimist": "1.2.0",
     "n-readlines": "1.0.0",
     "normalize-path": "3.0.0",
+    "parse-srcset": "ikatyang/parse-srcset#feat/report-error",
     "postcss-less": "1.1.5",
     "postcss-media-query-parser": "0.2.3",
     "postcss-scss": "1.0.6",
diff --git a/src/language-html/preprocess.js b/src/language-html/preprocess.js
index 8585e14f6e53..664debd4dbc8 100644
--- a/src/language-html/preprocess.js
+++ b/src/language-html/preprocess.js
@@ -366,6 +366,15 @@ function addShortcuts(ast /*, options */) {
       lastChild: { value: lastChild, enumerable: false }
     });
 
+    if (node.attrs) {
+      node.attrs.forEach(attribute =>
+        Object.defineProperty(attribute, "parent", {
+          value: node,
+          enumerable: false
+        })
+      );
+    }
+
     if (node.children) {
       node.children.forEach((child, childIndex) =>
         _addShortcuts(child, node, childIndex)
diff --git a/src/language-html/printer-html.js b/src/language-html/printer-html.js
index 46cb6eb4aa99..1ae8ead8e86b 100644
--- a/src/language-html/printer-html.js
+++ b/src/language-html/printer-html.js
@@ -40,6 +40,7 @@ const preprocess = require("./preprocess");
 const assert = require("assert");
 const { insertPragma } = require("./pragma");
 const { printVueFor, printVueSlotScope } = require("./syntax-vue");
+const { printImgSrcset } = require("./syntax-attribute");
 
 function concat(parts) {
   const newParts = normalizeParts(parts);
@@ -783,14 +784,18 @@ function printEmbeddedAttributeValue(node, originalTextToDoc, options) {
     }
   };
 
-  const printMaybeHug = doc =>
-    shouldHug
-      ? group(doc)
-      : group(concat([indent(concat([softline, doc])), softline]));
+  const printHug = doc => group(doc);
+  const printExpand = doc =>
+    group(concat([indent(concat([softline, doc])), softline]));
+  const printMaybeHug = doc => (shouldHug ? printHug(doc) : printExpand(doc));
 
   const textToDoc = (code, opts) =>
     originalTextToDoc(code, Object.assign({ __onHtmlBindingRoot }, opts));
 
+  if (node.name === "srcset" && node.parent.name === "img") {
+    return printExpand(printImgSrcset(getValue()));
+  }
+
   if (options.parser === "vue") {
     if (node.name === "v-for") {
       return printVueFor(getValue(), textToDoc);
diff --git a/src/language-html/syntax-attribute.js b/src/language-html/syntax-attribute.js
new file mode 100644
index 000000000000..46419cab91b7
--- /dev/null
+++ b/src/language-html/syntax-attribute.js
@@ -0,0 +1,64 @@
+"use strict";
+
+const {
+  builders: { concat, ifBreak, join, line }
+} = require("../doc");
+const parseSrcset = require("parse-srcset");
+
+function printImgSrcset(value) {
+  const srcset = parseSrcset(value, {
+    logger: {
+      error(message) {
+        throw new Error(message);
+      }
+    }
+  });
+
+  const hasW = srcset.some(src => src.w);
+  const hasH = srcset.some(src => src.h);
+  const hasX = srcset.some(src => src.d);
+
+  if (hasW + hasH + hasX !== 1) {
+    throw new Error(`Mixed descriptor in srcset is not supported`);
+  }
+
+  const key = hasW ? "w" : hasH ? "h" : "d";
+  const unit = hasW ? "w" : hasH ? "h" : "x";
+
+  const getMax = values => Math.max.apply(Math, values);
+
+  const urls = srcset.map(src => src.url);
+  const maxUrlLength = getMax(urls.map(url => url.length));
+
+  const descriptors = srcset
+    .map(src => src[key])
+    .map(descriptor => (descriptor ? descriptor.toString() : ""));
+  const descriptorLeftLengths = descriptors.map(descriptor => {
+    const index = descriptor.indexOf(".");
+    return index === -1 ? descriptor.length : index;
+  });
+  const maxDescriptorLeftLength = getMax(descriptorLeftLengths);
+
+  return join(
+    concat([",", line]),
+    urls.map((url, index) => {
+      const parts = [url];
+
+      const descriptor = descriptors[index];
+      if (descriptor) {
+        const urlPadding = maxUrlLength - url.length + 1;
+        const descriptorPadding =
+          maxDescriptorLeftLength - descriptorLeftLengths[index];
+
+        const alignment = " ".repeat(urlPadding + descriptorPadding);
+        parts.push(ifBreak(alignment, " "), descriptor + unit);
+      }
+
+      return concat(parts);
+    })
+  );
+}
+
+module.exports = {
+  printImgSrcset
+};
diff --git a/tests/html_attributes/__snapshots__/jsfmt.spec.js.snap b/tests/html_attributes/__snapshots__/jsfmt.spec.js.snap
index e3e88bd15ab4..ec16f2fce22d 100644
--- a/tests/html_attributes/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_attributes/__snapshots__/jsfmt.spec.js.snap
@@ -250,19 +250,29 @@ sizes="(max-width: 66rem) 100vw, 66rem" alt=""/>
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 <img
   src="/assets/visual.png"
-  srcset="/assets/visual@0.5.png  400w, /assets/visual.png      805w"
+  srcset="/assets/visual@0.5.png 400w, /assets/visual.png 805w"
   sizes="(max-width: 66rem) 100vw, 66rem"
   alt=""
 />
 <img
   src="/assets/visual.png"
-  srcset="/assets/visual@0.5.png  400w, /assets/visual.png      805w,	/assets/visual@2x.png   1610w,	/assets/visual@3x.png   2415w"
+  srcset="
+    /assets/visual@0.5.png  400w,
+    /assets/visual.png      805w,
+    /assets/visual@2x.png  1610w,
+    /assets/visual@3x.png  2415w
+  "
   sizes="(max-width: 66rem) 100vw, 66rem"
   alt=""
 />
 <img
   src="/assets/visual.png"
-  srcset="/assets/visual@0.5.png  0.5x, /assets/visual.png      1111x,	/assets/visual@2x.png   2x,	/assets/visual@3x.png   3.3333x"
+  srcset="
+    /assets/visual@0.5.png    0.5x,
+    /assets/visual.png     1111x,
+    /assets/visual@2x.png     2x,
+    /assets/visual@3x.png     3.3333x
+  "
   sizes="(max-width: 66rem) 100vw, 66rem"
   alt=""
 />
diff --git a/yarn.lock b/yarn.lock
index 41d400c9bb9b..69b07addcb2b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4438,6 +4438,10 @@ parse-json@^4.0.0:
     error-ex "^1.3.1"
     json-parse-better-errors "^1.0.1"
 
+parse-srcset@ikatyang/parse-srcset#feat/report-error:
+  version "1.0.2"
+  resolved "https://codeload.github.com/ikatyang/parse-srcset/tar.gz/54eb9c1cb21db5c62b4d0e275d7249516df6f0ee"
+
 parse5@4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/parse5/-/parse5-4.0.0.tgz#6d78656e3da8d78b4ec0b906f7c08ef1dfe3f608"

From 17d05f917a9747d4fdf5f420aac4d05b9c140c47 Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Thu, 1 Nov 2018 17:31:27 +0800
Subject: [PATCH 150/177] test: add tests

---
 .../__snapshots__/jsfmt.spec.js.snap          | 102 ++++++++++++++++++
 .../ignore-attribute.component.html           |  23 ++++
 2 files changed, 125 insertions(+)
 create mode 100644 tests/html_angular/ignore-attribute.component.html

diff --git a/tests/html_angular/__snapshots__/jsfmt.spec.js.snap b/tests/html_angular/__snapshots__/jsfmt.spec.js.snap
index 595e08e38aab..9e5266cab626 100644
--- a/tests/html_angular/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_angular/__snapshots__/jsfmt.spec.js.snap
@@ -362,6 +362,108 @@ exports[`attributes.component.html - angular-verify 2`] = `
 
 `;
 
+exports[`ignore-attribute.component.html - angular-verify 1`] = `
+<div
+    bindon-target=" a | b : c "
+    [(target)]=" a | b : c "
+    bind-target=" a | b : c "
+></div>
+<!--  prettier-ignore-attribute -->
+<div
+    bindon-target=" a | b : c "
+    [(target)]=" a | b : c "
+    bind-target=" a | b : c "
+></div>
+<!--  prettier-ignore-attribute bind-target -->
+<div
+    bindon-target=" a | b : c "
+    [(target)]=" a | b : c "
+    bind-target=" a | b : c "
+></div>
+<!--  prettier-ignore-attribute [(target)] bind-target -->
+<div
+    bindon-target=" a | b : c "
+    [(target)]=" a | b : c "
+    bind-target=" a | b : c "
+></div>
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+<div
+  bindon-target="a | b: c"
+  [(target)]="a | b: c"
+  bind-target="a | b: c"
+></div>
+<!-- prettier-ignore-attribute -->
+<div
+  bindon-target="a | b: c"
+  [(target)]="a | b: c"
+  bind-target="a | b: c"
+></div>
+<!-- prettier-ignore-attribute bind-target -->
+<div
+  bindon-target="a | b: c"
+  [(target)]="a | b: c"
+  bind-target="a | b: c"
+></div>
+<!-- prettier-ignore-attribute [(target)] bind-target -->
+<div
+  bindon-target="a | b: c"
+  [(target)]="a | b: c"
+  bind-target="a | b: c"
+></div>
+
+`;
+
+exports[`ignore-attribute.component.html - angular-verify 2`] = `
+<div
+    bindon-target=" a | b : c "
+    [(target)]=" a | b : c "
+    bind-target=" a | b : c "
+></div>
+<!--  prettier-ignore-attribute -->
+<div
+    bindon-target=" a | b : c "
+    [(target)]=" a | b : c "
+    bind-target=" a | b : c "
+></div>
+<!--  prettier-ignore-attribute bind-target -->
+<div
+    bindon-target=" a | b : c "
+    [(target)]=" a | b : c "
+    bind-target=" a | b : c "
+></div>
+<!--  prettier-ignore-attribute [(target)] bind-target -->
+<div
+    bindon-target=" a | b : c "
+    [(target)]=" a | b : c "
+    bind-target=" a | b : c "
+></div>
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+<div
+  bindon-target="a | b: c"
+  [(target)]="a | b: c"
+  bind-target="a | b: c"
+></div>
+<!-- prettier-ignore-attribute -->
+<div
+  bindon-target="a | b: c"
+  [(target)]="a | b: c"
+  bind-target="a | b: c"
+></div>
+<!-- prettier-ignore-attribute bind-target -->
+<div
+  bindon-target="a | b: c"
+  [(target)]="a | b: c"
+  bind-target="a | b: c"
+></div>
+<!-- prettier-ignore-attribute [(target)] bind-target -->
+<div
+  bindon-target="a | b: c"
+  [(target)]="a | b: c"
+  bind-target="a | b: c"
+></div>
+
+`;
+
 exports[`interpolation.component.html - angular-verify 1`] = `
 <div>{{ a | b : c }}</div>
 <div>{{ 0 - 1 }}</div>
diff --git a/tests/html_angular/ignore-attribute.component.html b/tests/html_angular/ignore-attribute.component.html
new file mode 100644
index 000000000000..93b1e2acf8db
--- /dev/null
+++ b/tests/html_angular/ignore-attribute.component.html
@@ -0,0 +1,23 @@
+<div
+    bindon-target=" a | b : c "
+    [(target)]=" a | b : c "
+    bind-target=" a | b : c "
+></div>
+<!--  prettier-ignore-attribute -->
+<div
+    bindon-target=" a | b : c "
+    [(target)]=" a | b : c "
+    bind-target=" a | b : c "
+></div>
+<!--  prettier-ignore-attribute bind-target -->
+<div
+    bindon-target=" a | b : c "
+    [(target)]=" a | b : c "
+    bind-target=" a | b : c "
+></div>
+<!--  prettier-ignore-attribute [(target)] bind-target -->
+<div
+    bindon-target=" a | b : c "
+    [(target)]=" a | b : c "
+    bind-target=" a | b : c "
+></div>

From 1a83e6b5385b2b567a62b241f2444451b675b758 Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Thu, 1 Nov 2018 17:39:26 +0800
Subject: [PATCH 151/177] feat: support prettier-ignore-attribute

---
 src/language-html/printer-html.js             | 26 ++++++++++++++++++-
 src/language-html/utils.js                    | 15 +++++++++++
 .../__snapshots__/jsfmt.spec.js.snap          | 24 ++++++++---------
 3 files changed, 52 insertions(+), 13 deletions(-)

diff --git a/src/language-html/printer-html.js b/src/language-html/printer-html.js
index 1ae8ead8e86b..23c529a6c3e2 100644
--- a/src/language-html/printer-html.js
+++ b/src/language-html/printer-html.js
@@ -26,6 +26,7 @@ const {
   forceNextEmptyLine,
   getCommentData,
   getLastDescendant,
+  getPrettierIgnoreAttributeCommentData,
   hasPrettierIgnore,
   inferScriptParser,
   isElement,
@@ -531,7 +532,30 @@ function printOpeningTag(path, options, print) {
           indent(
             concat([
               forceNotToBreakAttrContent ? " " : line,
-              join(line, path.map(print, "attrs"))
+              join(
+                line,
+                (ignoreAttributeData => {
+                  const hasPrettierIgnoreAttribute =
+                    typeof ignoreAttributeData === "boolean"
+                      ? () => ignoreAttributeData
+                      : Array.isArray(ignoreAttributeData)
+                        ? attr => ignoreAttributeData.indexOf(attr.name) !== -1
+                        : () => false;
+                  return path.map(attrPath => {
+                    const attr = attrPath.getValue();
+                    return hasPrettierIgnoreAttribute(attr)
+                      ? options.originalText.slice(
+                          options.locStart(attr),
+                          options.locEnd(attr)
+                        )
+                      : print(attrPath);
+                  }, "attrs");
+                })(
+                  node.prev &&
+                    node.prev.type === "comment" &&
+                    getPrettierIgnoreAttributeCommentData(node.prev.value)
+                )
+              )
             ])
           ),
           /**
diff --git a/src/language-html/utils.js b/src/language-html/utils.js
index 63ad3da50db3..3bc34d85089a 100644
--- a/src/language-html/utils.js
+++ b/src/language-html/utils.js
@@ -66,6 +66,20 @@ function isPrettierIgnore(node) {
   return node.type === "comment" && node.value.trim() === "prettier-ignore";
 }
 
+function getPrettierIgnoreAttributeCommentData(value) {
+  const match = value.trim().match(/^prettier-ignore-attribute(?:\s+([^]+))?$/);
+
+  if (!match) {
+    return false;
+  }
+
+  if (!match[1]) {
+    return true;
+  }
+
+  return match[1].split(/\s+/);
+}
+
 function isElement(node, nameOrNames) {
   if (node.type !== "element") {
     return false;
@@ -583,6 +597,7 @@ module.exports = {
   getLastDescendant,
   getNodeCssStyleDisplay,
   getNodeCssStyleWhiteSpace,
+  getPrettierIgnoreAttributeCommentData,
   getPrevNode,
   hasPrettierIgnore,
   identity,
diff --git a/tests/html_angular/__snapshots__/jsfmt.spec.js.snap b/tests/html_angular/__snapshots__/jsfmt.spec.js.snap
index 9e5266cab626..49ca1540dc40 100644
--- a/tests/html_angular/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_angular/__snapshots__/jsfmt.spec.js.snap
@@ -394,21 +394,21 @@ exports[`ignore-attribute.component.html - angular-verify 1`] = `
 ></div>
 <!-- prettier-ignore-attribute -->
 <div
-  bindon-target="a | b: c"
-  [(target)]="a | b: c"
-  bind-target="a | b: c"
+  bindon-target=" a | b : c "
+  [(target)]=" a | b : c "
+  bind-target=" a | b : c "
 ></div>
 <!-- prettier-ignore-attribute bind-target -->
 <div
   bindon-target="a | b: c"
   [(target)]="a | b: c"
-  bind-target="a | b: c"
+  bind-target=" a | b : c "
 ></div>
 <!-- prettier-ignore-attribute [(target)] bind-target -->
 <div
   bindon-target="a | b: c"
-  [(target)]="a | b: c"
-  bind-target="a | b: c"
+  [(target)]=" a | b : c "
+  bind-target=" a | b : c "
 ></div>
 
 `;
@@ -445,21 +445,21 @@ exports[`ignore-attribute.component.html - angular-verify 2`] = `
 ></div>
 <!-- prettier-ignore-attribute -->
 <div
-  bindon-target="a | b: c"
-  [(target)]="a | b: c"
-  bind-target="a | b: c"
+  bindon-target=" a | b : c "
+  [(target)]=" a | b : c "
+  bind-target=" a | b : c "
 ></div>
 <!-- prettier-ignore-attribute bind-target -->
 <div
   bindon-target="a | b: c"
   [(target)]="a | b: c"
-  bind-target="a | b: c"
+  bind-target=" a | b : c "
 ></div>
 <!-- prettier-ignore-attribute [(target)] bind-target -->
 <div
   bindon-target="a | b: c"
-  [(target)]="a | b: c"
-  bind-target="a | b: c"
+  [(target)]=" a | b : c "
+  bind-target=" a | b : c "
 ></div>
 
 `;

From 61519c3c5bc340387d5a1a7e080c57c6a2b9e24f Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Thu, 1 Nov 2018 19:09:29 +0800
Subject: [PATCH 152/177] feat: format source.srcset as well

---
 src/language-html/printer-html.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/language-html/printer-html.js b/src/language-html/printer-html.js
index 23c529a6c3e2..e2a26c31348e 100644
--- a/src/language-html/printer-html.js
+++ b/src/language-html/printer-html.js
@@ -816,7 +816,10 @@ function printEmbeddedAttributeValue(node, originalTextToDoc, options) {
   const textToDoc = (code, opts) =>
     originalTextToDoc(code, Object.assign({ __onHtmlBindingRoot }, opts));
 
-  if (node.name === "srcset" && node.parent.name === "img") {
+  if (
+    node.name === "srcset" &&
+    (node.parent.name === "img" || node.parent.name === "source")
+  ) {
     return printExpand(printImgSrcset(getValue()));
   }
 

From 4e84e47a67318bcbacd685c10d65a98b955b12e5 Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Thu, 1 Nov 2018 20:48:59 +0800
Subject: [PATCH 153/177] test: add tests

---
 .../__snapshots__/jsfmt.spec.js.snap          | 21 +++++++++++++++++++
 tests/html_tags/tags.html                     |  1 +
 2 files changed, 22 insertions(+)

diff --git a/tests/html_tags/__snapshots__/jsfmt.spec.js.snap b/tests/html_tags/__snapshots__/jsfmt.spec.js.snap
index 6b8d2e12b8bf..cc358f1a88a8 100644
--- a/tests/html_tags/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_tags/__snapshots__/jsfmt.spec.js.snap
@@ -1480,6 +1480,7 @@ exports[`tags.html - html-verify 1`] = `
 <router-outlet></router-outlet>
 <app-footer [input]="something"></app-footer>
 </div>
+<x:root><SPAN>foreign tag name should not be lower cased</SPAN></x:root>
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 <br />
 <br />
@@ -1643,6 +1644,7 @@ exports[`tags.html - html-verify 1`] = `
   <router-outlet></router-outlet>
   <app-footer [input]="something"></app-footer>
 </div>
+<x:root><span>foreign tag name should not be lower cased</span></x:root>
 
 `;
 
@@ -1748,6 +1750,7 @@ exports[`tags.html - html-verify 2`] = `
 <router-outlet></router-outlet>
 <app-footer [input]="something"></app-footer>
 </div>
+<x:root><SPAN>foreign tag name should not be lower cased</SPAN></x:root>
 ~
 <br />
 <br />
@@ -2085,6 +2088,18 @@ exports[`tags.html - html-verify 2`] = `
     [input]="something"
   ></app-footer>
 </div>
+<x:root
+  ><span
+    >foreign
+    tag
+    name
+    should
+    not
+    be
+    lower
+    cased</span
+  ></x:root
+>
 
 `;
 
@@ -2190,6 +2205,7 @@ exports[`tags.html - html-verify 3`] = `
 <router-outlet></router-outlet>
 <app-footer [input]="something"></app-footer>
 </div>
+<x:root><SPAN>foreign tag name should not be lower cased</SPAN></x:root>
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 <br />
 <br />
@@ -2287,6 +2303,7 @@ exports[`tags.html - html-verify 3`] = `
   <router-outlet></router-outlet>
   <app-footer [input]="something"></app-footer>
 </div>
+<x:root><span>foreign tag name should not be lower cased</span></x:root>
 
 `;
 
@@ -2392,6 +2409,7 @@ exports[`tags.html - html-verify 4`] = `
 <router-outlet></router-outlet>
 <app-footer [input]="something"></app-footer>
 </div>
+<x:root><SPAN>foreign tag name should not be lower cased</SPAN></x:root>
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 <br />
 <br />
@@ -2534,6 +2552,7 @@ exports[`tags.html - html-verify 4`] = `
   <router-outlet></router-outlet>
   <app-footer [input]="something"></app-footer>
 </div>
+<x:root><span>foreign tag name should not be lower cased</span></x:root>
 
 `;
 
@@ -2639,6 +2658,7 @@ exports[`tags.html - html-verify 5`] = `
 <router-outlet></router-outlet>
 <app-footer [input]="something"></app-footer>
 </div>
+<x:root><SPAN>foreign tag name should not be lower cased</SPAN></x:root>
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 <br />
 <br />
@@ -2831,6 +2851,7 @@ exports[`tags.html - html-verify 5`] = `
   <router-outlet></router-outlet>
   <app-footer [input]="something"></app-footer>
 </div>
+<x:root><span>foreign tag name should not be lower cased</span></x:root>
 
 `;
 
diff --git a/tests/html_tags/tags.html b/tests/html_tags/tags.html
index df3f23f9c7fb..5b13eb4cd02d 100644
--- a/tests/html_tags/tags.html
+++ b/tests/html_tags/tags.html
@@ -99,3 +99,4 @@
 <router-outlet></router-outlet>
 <app-footer [input]="something"></app-footer>
 </div>
+<x:root><SPAN>foreign tag name should not be lower cased</SPAN></x:root>

From 6274f12581c450f4f86dcd13316808f825e5aa58 Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Thu, 1 Nov 2018 21:27:24 +0800
Subject: [PATCH 154/177] fix: disable tag name normalization for foreign tags

---
 src/language-html/parser-html.js              | 61 ++++++++++++++-----
 src/language-html/preprocess.js               | 19 ++++--
 src/language-html/printer-html.js             | 28 ++++-----
 src/language-html/utils.js                    | 46 +++++++-------
 .../__snapshots__/jsfmt.spec.js.snap          | 12 ++--
 5 files changed, 102 insertions(+), 64 deletions(-)

diff --git a/src/language-html/parser-html.js b/src/language-html/parser-html.js
index 596a83885943..ab5ddf08689c 100644
--- a/src/language-html/parser-html.js
+++ b/src/language-html/parser-html.js
@@ -50,11 +50,26 @@ function ngHtmlParser(input, canSelfClose) {
     }
   };
 
+  const restoreName = node => {
+    const namespace = node.name.startsWith(":")
+      ? node.name.slice(1).split(":")[0]
+      : null;
+    const rawName = node.nameSpan ? node.nameSpan.toString() : node.name;
+    const hasExplicitNamespace = rawName.startsWith(`${namespace}:`);
+    const name = hasExplicitNamespace
+      ? rawName.slice(namespace.length + 1)
+      : rawName;
+
+    node.name = name;
+    node.namespace = namespace;
+    node.hasExplicitNamespace = hasExplicitNamespace;
+  };
+
   const restoreNameAndValue = node => {
     if (node instanceof Element) {
-      node.name = node.nameSpan ? node.nameSpan.toString() : node.name;
+      restoreName(node);
       node.attrs.forEach(attr => {
-        attr.name = attr.nameSpan.toString();
+        restoreName(attr);
         if (!attr.valueSpan) {
           attr.value = null;
         } else {
@@ -79,20 +94,28 @@ function ngHtmlParser(input, canSelfClose) {
   };
   const normalizeName = node => {
     if (node instanceof Element) {
-      node.name = lowerCaseIfFn(
-        node.name,
-        lowerCasedName => lowerCasedName in HTML_TAGS
-      );
+      if (
+        !node.namespace ||
+        node.namespace === node.tagDefinition.implicitNamespacePrefix
+      ) {
+        node.name = lowerCaseIfFn(
+          node.name,
+          lowerCasedName => lowerCasedName in HTML_TAGS
+        );
+      }
+
       const CURRENT_HTML_ELEMENT_ATTRIBUTES =
         HTML_ELEMENT_ATTRIBUTES[node.name] || Object.create(null);
       node.attrs.forEach(attr => {
-        attr.name = lowerCaseIfFn(
-          attr.name,
-          lowerCasedAttrName =>
-            node.name in HTML_ELEMENT_ATTRIBUTES &&
-            (lowerCasedAttrName in HTML_ELEMENT_ATTRIBUTES["*"] ||
-              lowerCasedAttrName in CURRENT_HTML_ELEMENT_ATTRIBUTES)
-        );
+        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)
+          );
+        }
       });
     }
   };
@@ -108,7 +131,15 @@ function ngHtmlParser(input, canSelfClose) {
 
   const addTagDefinition = node => {
     if (node instanceof Element) {
-      node.tagDefinition = getHtmlTagDefinition(node.name);
+      const tagDefinition = getHtmlTagDefinition(node.name);
+      if (
+        !node.namespace ||
+        node.namespace === tagDefinition.implicitNamespacePrefix
+      ) {
+        node.tagDefinition = tagDefinition;
+      } else {
+        node.tagDefinition = getHtmlTagDefinition(""); // the default one
+      }
     }
   };
 
@@ -117,8 +148,8 @@ function ngHtmlParser(input, canSelfClose) {
       visit(node) {
         addType(node);
         restoreNameAndValue(node);
-        normalizeName(node);
         addTagDefinition(node);
+        normalizeName(node);
         fixSourceSpan(node);
       }
     }(),
diff --git a/src/language-html/preprocess.js b/src/language-html/preprocess.js
index 664debd4dbc8..f2f6e1d948ae 100644
--- a/src/language-html/preprocess.js
+++ b/src/language-html/preprocess.js
@@ -366,11 +366,22 @@ function addShortcuts(ast /*, options */) {
       lastChild: { value: lastChild, enumerable: false }
     });
 
-    if (node.attrs) {
+    if (node.type === "element") {
+      const rawNameGetter = function() {
+        return this.hasExplicitNamespace ? this.fullName : this.name;
+      };
+      const fullNameGetter = function() {
+        return this.namespace ? this.namespace + ":" + this.name : this.name;
+      };
+      Object.defineProperties(node, {
+        rawName: { get: rawNameGetter, enumerable: false },
+        fullName: { get: fullNameGetter, enumerable: false }
+      });
       node.attrs.forEach(attribute =>
-        Object.defineProperty(attribute, "parent", {
-          value: node,
-          enumerable: false
+        Object.defineProperties(attribute, {
+          parent: { value: node, enumerable: false },
+          rawName: { get: rawNameGetter, enumerable: false },
+          fullName: { get: fullNameGetter, enumerable: false }
         })
       );
     }
diff --git a/src/language-html/printer-html.js b/src/language-html/printer-html.js
index e2a26c31348e..74d3d7f1a50d 100644
--- a/src/language-html/printer-html.js
+++ b/src/language-html/printer-html.js
@@ -29,7 +29,6 @@ const {
   getPrettierIgnoreAttributeCommentData,
   hasPrettierIgnore,
   inferScriptParser,
-  isElement,
   isPreLikeNode,
   isScriptLikeTag,
   normalizeParts,
@@ -107,7 +106,7 @@ function embed(path, print, textToDoc, options) {
       );
       if (embeddedAttributeValueDoc) {
         return concat([
-          node.name,
+          node.rawName,
           '="',
           mapDoc(
             embeddedAttributeValueDoc,
@@ -222,7 +221,7 @@ function genericPrint(path, options, print) {
                       : node.lastChild.hasTrailingSpaces &&
                         node.lastChild.isTrailingSpaceSensitive
                         ? line
-                        : isElement(node) &&
+                        : node.type === "element" &&
                           isPreLikeNode(node) &&
                           node.lastChild.type === "text" &&
                           (node.lastChild.value.indexOf("\n") === -1 ||
@@ -321,7 +320,7 @@ function genericPrint(path, options, print) {
     }
     case "attribute":
       return concat([
-        node.name,
+        node.rawName,
         node.value === null
           ? ""
           : concat([
@@ -514,9 +513,9 @@ function printOpeningTag(path, options, print) {
   const node = path.getValue();
   const forceNotToBreakAttrContent =
     node.type === "element" &&
-    node.name === "script" &&
+    node.fullName === "script" &&
     node.attrs.length === 1 &&
-    node.attrs[0].name === "src" &&
+    node.attrs[0].fullName === "src" &&
     node.children.length === 0;
   return concat([
     printOpeningTagStart(node),
@@ -539,7 +538,8 @@ function printOpeningTag(path, options, print) {
                     typeof ignoreAttributeData === "boolean"
                       ? () => ignoreAttributeData
                       : Array.isArray(ignoreAttributeData)
-                        ? attr => ignoreAttributeData.indexOf(attr.name) !== -1
+                        ? attr =>
+                            ignoreAttributeData.indexOf(attr.rawName) !== -1
                         : () => false;
                   return path.map(attrPath => {
                     const attr = attrPath.getValue();
@@ -731,7 +731,7 @@ function printOpeningTagStartMarker(node) {
     case "docType":
       return "<!DOCTYPE";
     default:
-      return `<${node.name}`;
+      return `<${node.rawName}`;
   }
 }
 
@@ -751,7 +751,7 @@ function printClosingTagStartMarker(node) {
     case "ieConditionalComment":
       return "<!";
     default:
-      return `</${node.name}`;
+      return `</${node.rawName}`;
   }
 }
 
@@ -786,7 +786,7 @@ function getTextValueParts(node, value = node.value) {
 
 function printEmbeddedAttributeValue(node, originalTextToDoc, options) {
   const isKeyMatched = patterns =>
-    new RegExp(patterns.join("|")).test(node.name);
+    new RegExp(patterns.join("|")).test(node.fullName);
   const getValue = () =>
     node.value.replace(/&quot;/g, '"').replace(/&apos;/g, "'");
 
@@ -817,18 +817,18 @@ function printEmbeddedAttributeValue(node, originalTextToDoc, options) {
     originalTextToDoc(code, Object.assign({ __onHtmlBindingRoot }, opts));
 
   if (
-    node.name === "srcset" &&
-    (node.parent.name === "img" || node.parent.name === "source")
+    node.fullName === "srcset" &&
+    (node.parent.fullName === "img" || node.parent.fullName === "source")
   ) {
     return printExpand(printImgSrcset(getValue()));
   }
 
   if (options.parser === "vue") {
-    if (node.name === "v-for") {
+    if (node.fullName === "v-for") {
       return printVueFor(getValue(), textToDoc);
     }
 
-    if (node.name === "slot-scope") {
+    if (node.fullName === "slot-scope") {
       return printVueSlotScope(getValue(), textToDoc);
     }
 
diff --git a/src/language-html/utils.js b/src/language-html/utils.js
index 3bc34d85089a..59acd028bf53 100644
--- a/src/language-html/utils.js
+++ b/src/language-html/utils.js
@@ -80,24 +80,12 @@ function getPrettierIgnoreAttributeCommentData(value) {
   return match[1].split(/\s+/);
 }
 
-function isElement(node, nameOrNames) {
-  if (node.type !== "element") {
-    return false;
-  }
-
-  if (!nameOrNames) {
-    return true;
-  }
-
-  if (typeof nameOrNames === "string") {
-    return node.name === nameOrNames;
-  }
-
-  return nameOrNames.indexOf(node.name) !== -1;
-}
-
 function isScriptLikeTag(node) {
-  return isElement(node, ["script", "style"]);
+  return (
+    node.type === "element" &&
+    !node.namespace &&
+    (node.name === "script" || node.name === "style")
+  );
 }
 
 function isFrontMatterNode(node) {
@@ -129,7 +117,11 @@ function isLeadingSpaceSensitiveNode(node, { prev, parent }) {
     return false;
   }
 
-  if (!node.prev && isElement(parent) && parent.tagDefinition.ignoreFirstLf) {
+  if (
+    !node.prev &&
+    parent.type === "element" &&
+    parent.tagDefinition.ignoreFirstLf
+  ) {
     return false;
   }
 
@@ -244,7 +236,7 @@ function forceNextEmptyLine(node) {
 function forceBreakContent(node) {
   return (
     forceBreakChildren(node) ||
-    (isElement(node) &&
+    (node.type === "element" &&
       node.children.length !== 0 &&
       (["body", "template", "script", "style"].indexOf(node.name) !== -1 ||
         node.children.some(child => hasNonTextChild(child))))
@@ -254,7 +246,7 @@ function forceBreakContent(node) {
 /** spaces between children */
 function forceBreakChildren(node) {
   return (
-    isElement(node) &&
+    node.type === "element" &&
     node.children.length !== 0 &&
     (["html", "head", "ul", "ol", "select"].indexOf(node.name) !== -1 ||
       (node.cssDisplay.startsWith("table") && node.cssDisplay !== "table-cell"))
@@ -272,7 +264,7 @@ function preferHardlineAsLeadingSpaces(node) {
 function preferHardlineAsTrailingSpaces(node) {
   return (
     preferHardlineAsSurroundingSpaces(node) ||
-    isElement(node, "br") ||
+    (node.type === "element" && node.fullName === "br") ||
     isCustomElementWithSurroundingLineBreak(node)
   );
 }
@@ -282,7 +274,7 @@ function isCustomElementWithSurroundingLineBreak(node) {
 }
 
 function isCustomElement(node) {
-  return isElement(node) && node.name.includes("-");
+  return node.type === "element" && !node.namespace && node.name.includes("-");
 }
 
 function hasSurroundingLineBreak(node) {
@@ -438,14 +430,19 @@ function getNodeCssStyleDisplay(node, prevNode, options) {
       return "block";
     default:
       return (
-        (isElement(node) && CSS_DISPLAY_TAGS[node.name]) || CSS_DISPLAY_DEFAULT
+        (node.type === "element" &&
+          !node.namespace &&
+          CSS_DISPLAY_TAGS[node.name]) ||
+        CSS_DISPLAY_DEFAULT
       );
   }
 }
 
 function getNodeCssStyleWhiteSpace(node) {
   return (
-    (isElement(node) && CSS_WHITE_SPACE_TAGS[node.name]) ||
+    (node.type === "element" &&
+      !node.namespace &&
+      CSS_WHITE_SPACE_TAGS[node.name]) ||
     CSS_WHITE_SPACE_DEFAULT
   );
 }
@@ -603,7 +600,6 @@ module.exports = {
   identity,
   inferScriptParser,
   isDanglingSpaceSensitiveNode,
-  isElement,
   isFrontMatterNode,
   isIndentationSensitiveNode,
   isLeadingSpaceSensitiveNode,
diff --git a/tests/html_tags/__snapshots__/jsfmt.spec.js.snap b/tests/html_tags/__snapshots__/jsfmt.spec.js.snap
index cc358f1a88a8..f0e284a3668a 100644
--- a/tests/html_tags/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_tags/__snapshots__/jsfmt.spec.js.snap
@@ -1644,7 +1644,7 @@ exports[`tags.html - html-verify 1`] = `
   <router-outlet></router-outlet>
   <app-footer [input]="something"></app-footer>
 </div>
-<x:root><span>foreign tag name should not be lower cased</span></x:root>
+<x:root><SPAN>foreign tag name should not be lower cased</SPAN></x:root>
 
 `;
 
@@ -2089,7 +2089,7 @@ exports[`tags.html - html-verify 2`] = `
   ></app-footer>
 </div>
 <x:root
-  ><span
+  ><SPAN
     >foreign
     tag
     name
@@ -2097,7 +2097,7 @@ exports[`tags.html - html-verify 2`] = `
     not
     be
     lower
-    cased</span
+    cased</SPAN
   ></x:root
 >
 
@@ -2303,7 +2303,7 @@ exports[`tags.html - html-verify 3`] = `
   <router-outlet></router-outlet>
   <app-footer [input]="something"></app-footer>
 </div>
-<x:root><span>foreign tag name should not be lower cased</span></x:root>
+<x:root><SPAN>foreign tag name should not be lower cased</SPAN></x:root>
 
 `;
 
@@ -2552,7 +2552,7 @@ exports[`tags.html - html-verify 4`] = `
   <router-outlet></router-outlet>
   <app-footer [input]="something"></app-footer>
 </div>
-<x:root><span>foreign tag name should not be lower cased</span></x:root>
+<x:root><SPAN>foreign tag name should not be lower cased</SPAN></x:root>
 
 `;
 
@@ -2851,7 +2851,7 @@ exports[`tags.html - html-verify 5`] = `
   <router-outlet></router-outlet>
   <app-footer [input]="something"></app-footer>
 </div>
-<x:root><span>foreign tag name should not be lower cased</span></x:root>
+<x:root><SPAN>foreign tag name should not be lower cased</SPAN></x:root>
 
 `;
 

From 0a00ffc9c7a2f9fd4872e2c00298b3363fdd3449 Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Thu, 1 Nov 2018 21:52:21 +0800
Subject: [PATCH 155/177] test: add tests

---
 .../html_vue/__snapshots__/jsfmt.spec.js.snap | 100 ++++++++++++++++++
 tests/html_vue/filter.vue                     |   7 ++
 2 files changed, 107 insertions(+)
 create mode 100644 tests/html_vue/filter.vue

diff --git a/tests/html_vue/__snapshots__/jsfmt.spec.js.snap b/tests/html_vue/__snapshots__/jsfmt.spec.js.snap
index 9462bc3af6eb..4a91256bae8c 100644
--- a/tests/html_vue/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_vue/__snapshots__/jsfmt.spec.js.snap
@@ -466,6 +466,106 @@ export default {
 
 `;
 
+exports[`filter.vue - vue-verify 1`] = `
+<!-- vue filters are only allowed in v-bind and interpolation -->
+<template>
+  <div class="allowed">{{value | thisIsARealSuperLongFilterPipe("arg1", arg2) | anotherPipeLongJustForFun | pipeTheThird}}</div>
+  <div class="allowed" v-bind:something='value | thisIsARealSuperLongFilterPipe("arg1", arg2) | anotherPipeLongJustForFun | pipeTheThird'></div>
+  <div class="allowed" :class='value | thisIsARealSuperLongFilterPipe("arg1", arg2) | anotherPipeLongJustForFun | pipeTheThird'></div>
+  <div class="not-allowed" v-if='value | thisIsARealSuperLongFilterPipe("arg1", arg2) | anotherPipeLongJustForFun | pipeTheThird'></div>
+</template>
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+<!-- vue filters are only allowed in v-bind and interpolation -->
+<template>
+  <div class="allowed">
+    {{
+      value |
+        thisIsARealSuperLongFilterPipe("arg1", arg2) |
+        anotherPipeLongJustForFun |
+        pipeTheThird
+    }}
+  </div>
+  <div
+    class="allowed"
+    v-bind:something="
+      value |
+        thisIsARealSuperLongFilterPipe('arg1', arg2) |
+        anotherPipeLongJustForFun |
+        pipeTheThird
+    "
+  ></div>
+  <div
+    class="allowed"
+    :class="
+      value |
+        thisIsARealSuperLongFilterPipe('arg1', arg2) |
+        anotherPipeLongJustForFun |
+        pipeTheThird
+    "
+  ></div>
+  <div
+    class="not-allowed"
+    v-if="
+      value |
+        thisIsARealSuperLongFilterPipe('arg1', arg2) |
+        anotherPipeLongJustForFun |
+        pipeTheThird
+    "
+  ></div>
+</template>
+
+`;
+
+exports[`filter.vue - vue-verify 2`] = `
+<!-- vue filters are only allowed in v-bind and interpolation -->
+<template>
+  <div class="allowed">{{value | thisIsARealSuperLongFilterPipe("arg1", arg2) | anotherPipeLongJustForFun | pipeTheThird}}</div>
+  <div class="allowed" v-bind:something='value | thisIsARealSuperLongFilterPipe("arg1", arg2) | anotherPipeLongJustForFun | pipeTheThird'></div>
+  <div class="allowed" :class='value | thisIsARealSuperLongFilterPipe("arg1", arg2) | anotherPipeLongJustForFun | pipeTheThird'></div>
+  <div class="not-allowed" v-if='value | thisIsARealSuperLongFilterPipe("arg1", arg2) | anotherPipeLongJustForFun | pipeTheThird'></div>
+</template>
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+<!-- vue filters are only allowed in v-bind and interpolation -->
+<template>
+  <div class="allowed">
+    {{
+      value |
+        thisIsARealSuperLongFilterPipe("arg1", arg2) |
+        anotherPipeLongJustForFun |
+        pipeTheThird
+    }}
+  </div>
+  <div
+    class="allowed"
+    v-bind:something="
+      value |
+        thisIsARealSuperLongFilterPipe('arg1', arg2) |
+        anotherPipeLongJustForFun |
+        pipeTheThird
+    "
+  ></div>
+  <div
+    class="allowed"
+    :class="
+      value |
+        thisIsARealSuperLongFilterPipe('arg1', arg2) |
+        anotherPipeLongJustForFun |
+        pipeTheThird
+    "
+  ></div>
+  <div
+    class="not-allowed"
+    v-if="
+      value |
+        thisIsARealSuperLongFilterPipe('arg1', arg2) |
+        anotherPipeLongJustForFun |
+        pipeTheThird
+    "
+  ></div>
+</template>
+
+`;
+
 exports[`interpolations.vue - vue-verify 1`] = `
 <div>Fuga magnam facilis. Voluptatem quaerat porro.{{
 
diff --git a/tests/html_vue/filter.vue b/tests/html_vue/filter.vue
new file mode 100644
index 000000000000..3ab5f8ba7d2a
--- /dev/null
+++ b/tests/html_vue/filter.vue
@@ -0,0 +1,7 @@
+<!-- vue filters are only allowed in v-bind and interpolation -->
+<template>
+  <div class="allowed">{{value | thisIsARealSuperLongFilterPipe("arg1", arg2) | anotherPipeLongJustForFun | pipeTheThird}}</div>
+  <div class="allowed" v-bind:something='value | thisIsARealSuperLongFilterPipe("arg1", arg2) | anotherPipeLongJustForFun | pipeTheThird'></div>
+  <div class="allowed" :class='value | thisIsARealSuperLongFilterPipe("arg1", arg2) | anotherPipeLongJustForFun | pipeTheThird'></div>
+  <div class="not-allowed" v-if='value | thisIsARealSuperLongFilterPipe("arg1", arg2) | anotherPipeLongJustForFun | pipeTheThird'></div>
+</template>

From c64f50f9d9cf3894ac6afb8034e9186a94d652a9 Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Thu, 1 Nov 2018 21:54:41 +0800
Subject: [PATCH 156/177] fix: `|` in vue expressions are considered vue
 filters

---
 src/common/internal-plugins.js                |  4 ++
 src/language-html/printer-html.js             | 19 ++++++--
 src/language-js/parser-babylon.js             |  4 +-
 src/language-js/preprocess.js                 |  6 +--
 src/language-js/printer-estree.js             |  4 +-
 src/main/comments.js                          |  3 +-
 .../html_vue/__snapshots__/jsfmt.spec.js.snap | 48 +++++++++----------
 website/static/worker.js                      |  4 ++
 8 files changed, 57 insertions(+), 35 deletions(-)

diff --git a/src/common/internal-plugins.js b/src/common/internal-plugins.js
index 7332a658a5fd..d071a32d79f5 100644
--- a/src/common/internal-plugins.js
+++ b/src/common/internal-plugins.js
@@ -29,6 +29,10 @@ module.exports = [
         return eval("require")("../language-js/parser-babylon").parsers
           .__js_expression;
       },
+      get __vue_expression() {
+        return eval("require")("../language-js/parser-babylon").parsers
+          .__vue_expression;
+      },
       // JS - Flow
       get flow() {
         return eval("require")("../language-js/parser-flow").parsers.flow;
diff --git a/src/language-html/printer-html.js b/src/language-html/printer-html.js
index 74d3d7f1a50d..f0f6d90bd41e 100644
--- a/src/language-html/printer-html.js
+++ b/src/language-html/printer-html.js
@@ -80,7 +80,9 @@ function embed(path, print, textToDoc, options) {
                 node.value,
                 options.parser === "angular"
                   ? { parser: "__ng_interpolation", trailingComma: "none" }
-                  : { parser: "__js_expression" }
+                  : options.parser === "vue"
+                    ? { parser: "__vue_expression" }
+                    : { parser: "__js_expression" }
               )
             ])
           ),
@@ -840,11 +842,14 @@ function printEmbeddedAttributeValue(node, originalTextToDoc, options) {
      */
     const vueEventBindingPatterns = ["^@", "^v-on:"];
     /**
-     *     :class="jsExpression"
-     *     v-bind:id="jsExpression"
+     *     :class="vueExpression"
+     *     v-bind:id="vueExpression"
+     */
+    const vueExpressionBindingPatterns = ["^:", "^v-bind:"];
+    /**
      *     v-if="jsExpression"
      */
-    const vueExpressionBindingPatterns = ["^:", "^v-"];
+    const jsExpressionBindingPatterns = ["^v-"];
 
     if (isKeyMatched(vueEventBindingPatterns)) {
       // copied from https://github.com/vuejs/vue/blob/v2.5.17/src/compiler/codegen/events.js#L3-L4
@@ -860,6 +865,12 @@ function printEmbeddedAttributeValue(node, originalTextToDoc, options) {
     }
 
     if (isKeyMatched(vueExpressionBindingPatterns)) {
+      return printMaybeHug(
+        textToDoc(getValue(), { parser: "__vue_expression" })
+      );
+    }
+
+    if (isKeyMatched(jsExpressionBindingPatterns)) {
       return printMaybeHug(
         textToDoc(getValue(), { parser: "__js_expression" })
       );
diff --git a/src/language-js/parser-babylon.js b/src/language-js/parser-babylon.js
index 01e204d0dd5a..aa26b2783d56 100644
--- a/src/language-js/parser-babylon.js
+++ b/src/language-js/parser-babylon.js
@@ -181,6 +181,8 @@ module.exports = {
       locFns
     ),
     /** @internal */
-    __js_expression: babylon
+    __js_expression: babylon,
+    /** for vue filter */
+    __vue_expression: babylon
   }
 };
diff --git a/src/language-js/preprocess.js b/src/language-js/preprocess.js
index a44572ca1533..57489c7b7ae4 100644
--- a/src/language-js/preprocess.js
+++ b/src/language-js/preprocess.js
@@ -6,11 +6,9 @@ function preprocess(ast, options) {
     case "json5":
     case "json-stringify":
     case "__js_expression":
+    case "__vue_expression":
       return Object.assign({}, ast, {
-        type:
-          options.parser === "__js_expression"
-            ? "JsExpressionRoot"
-            : "JsonRoot",
+        type: options.parser.startsWith("__") ? "JsExpressionRoot" : "JsonRoot",
         node: ast,
         comments: []
       });
diff --git a/src/language-js/printer-estree.js b/src/language-js/printer-estree.js
index d3db9a49474f..eeae7da53301 100644
--- a/src/language-js/printer-estree.js
+++ b/src/language-js/printer-estree.js
@@ -5530,7 +5530,9 @@ function printBinaryishExpressions(
 
     const shouldInline = shouldInlineLogicalExpression(node);
     const lineBeforeOperator =
-      (node.operator === "|>" || node.type === "NGPipeExpression") &&
+      (node.operator === "|>" ||
+        node.type === "NGPipeExpression" ||
+        (node.operator === "|" && options.parser === "__vue_expression")) &&
       !hasLeadingOwnLineComment(options.originalText, node.right, options);
 
     const operator = node.type === "NGPipeExpression" ? "|" : node.operator;
diff --git a/src/main/comments.js b/src/main/comments.js
index 13ae9bab1726..e32146e37ffc 100644
--- a/src/main/comments.js
+++ b/src/main/comments.js
@@ -183,7 +183,8 @@ function attach(comments, ast, text, options) {
     if (
       options.parser === "json" ||
       options.parser === "json5" ||
-      options.parser === "__js_expression"
+      options.parser === "__js_expression" ||
+      options.parser === "__vue_expression"
     ) {
       if (locStart(comment) - locStart(ast) <= 0) {
         addLeadingComment(ast, comment);
diff --git a/tests/html_vue/__snapshots__/jsfmt.spec.js.snap b/tests/html_vue/__snapshots__/jsfmt.spec.js.snap
index 4a91256bae8c..cfb1254a31cb 100644
--- a/tests/html_vue/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_vue/__snapshots__/jsfmt.spec.js.snap
@@ -479,28 +479,28 @@ exports[`filter.vue - vue-verify 1`] = `
 <template>
   <div class="allowed">
     {{
-      value |
-        thisIsARealSuperLongFilterPipe("arg1", arg2) |
-        anotherPipeLongJustForFun |
-        pipeTheThird
+      value
+        | thisIsARealSuperLongFilterPipe("arg1", arg2)
+        | anotherPipeLongJustForFun
+        | pipeTheThird
     }}
   </div>
   <div
     class="allowed"
     v-bind:something="
-      value |
-        thisIsARealSuperLongFilterPipe('arg1', arg2) |
-        anotherPipeLongJustForFun |
-        pipeTheThird
+      value
+        | thisIsARealSuperLongFilterPipe('arg1', arg2)
+        | anotherPipeLongJustForFun
+        | pipeTheThird
     "
   ></div>
   <div
     class="allowed"
     :class="
-      value |
-        thisIsARealSuperLongFilterPipe('arg1', arg2) |
-        anotherPipeLongJustForFun |
-        pipeTheThird
+      value
+        | thisIsARealSuperLongFilterPipe('arg1', arg2)
+        | anotherPipeLongJustForFun
+        | pipeTheThird
     "
   ></div>
   <div
@@ -529,28 +529,28 @@ exports[`filter.vue - vue-verify 2`] = `
 <template>
   <div class="allowed">
     {{
-      value |
-        thisIsARealSuperLongFilterPipe("arg1", arg2) |
-        anotherPipeLongJustForFun |
-        pipeTheThird
+      value
+        | thisIsARealSuperLongFilterPipe("arg1", arg2)
+        | anotherPipeLongJustForFun
+        | pipeTheThird
     }}
   </div>
   <div
     class="allowed"
     v-bind:something="
-      value |
-        thisIsARealSuperLongFilterPipe('arg1', arg2) |
-        anotherPipeLongJustForFun |
-        pipeTheThird
+      value
+        | thisIsARealSuperLongFilterPipe('arg1', arg2)
+        | anotherPipeLongJustForFun
+        | pipeTheThird
     "
   ></div>
   <div
     class="allowed"
     :class="
-      value |
-        thisIsARealSuperLongFilterPipe('arg1', arg2) |
-        anotherPipeLongJustForFun |
-        pipeTheThird
+      value
+        | thisIsARealSuperLongFilterPipe('arg1', arg2)
+        | anotherPipeLongJustForFun
+        | pipeTheThird
     "
   ></div>
   <div
diff --git a/website/static/worker.js b/website/static/worker.js
index 0531ee6f6577..e51a2e6181bc 100644
--- a/website/static/worker.js
+++ b/website/static/worker.js
@@ -33,6 +33,10 @@ var parsers = {
     importScriptOnce("lib/parser-babylon.js");
     return prettierPlugins.babylon.parsers.__js_expression;
   },
+  get __vue_expression() {
+    importScriptOnce("lib/parser-babylon.js");
+    return prettierPlugins.babylon.parsers.__vue_expression;
+  },
   // JS - Flow
   get flow() {
     importScriptOnce("lib/parser-flow.js");

From 298262f7b3d1ae3a24c7293b5b7f1017fd3b1f11 Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Fri, 2 Nov 2018 10:02:07 +0800
Subject: [PATCH 157/177] test: add tests

---
 tests/html_angular/__snapshots__/jsfmt.spec.js.snap | 4 ++++
 tests/html_angular/attributes.component.html        | 1 +
 2 files changed, 5 insertions(+)

diff --git a/tests/html_angular/__snapshots__/jsfmt.spec.js.snap b/tests/html_angular/__snapshots__/jsfmt.spec.js.snap
index 49ca1540dc40..04635c63ca75 100644
--- a/tests/html_angular/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_angular/__snapshots__/jsfmt.spec.js.snap
@@ -77,6 +77,7 @@ exports[`attributes.component.html - angular-verify 1`] = `
     [target]="listRow.NextScheduledSendStatus == 1 || listRow.NextScheduledSendStatus == 2 || listRow.NextScheduledSendStatus == 3"
     [target]="{ longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong: true }"
     [error]="'We couldn\\\\\\'t find anything with that name.'"
+    *ngIf="form.controls.details?.controls.amount?.errors.min"
 ></div>
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 <div
@@ -177,6 +178,7 @@ exports[`attributes.component.html - angular-verify 1`] = `
     longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong: true
   }"
   [error]="'We couldn\\\\\\'t find anything with that name.'"
+  *ngIf="((form.controls.details?.controls).amount?.errors).min"
 ></div>
 
 `;
@@ -258,6 +260,7 @@ exports[`attributes.component.html - angular-verify 2`] = `
     [target]="listRow.NextScheduledSendStatus == 1 || listRow.NextScheduledSendStatus == 2 || listRow.NextScheduledSendStatus == 3"
     [target]="{ longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong: true }"
     [error]="'We couldn\\\\\\'t find anything with that name.'"
+    *ngIf="form.controls.details?.controls.amount?.errors.min"
 ></div>
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 <div
@@ -358,6 +361,7 @@ exports[`attributes.component.html - angular-verify 2`] = `
     longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong: true
   }"
   [error]="'We couldn\\\\\\'t find anything with that name.'"
+  *ngIf="((form.controls.details?.controls).amount?.errors).min"
 ></div>
 
 `;
diff --git a/tests/html_angular/attributes.component.html b/tests/html_angular/attributes.component.html
index c1a30b657fff..1991e941a83a 100644
--- a/tests/html_angular/attributes.component.html
+++ b/tests/html_angular/attributes.component.html
@@ -74,4 +74,5 @@
     [target]="listRow.NextScheduledSendStatus == 1 || listRow.NextScheduledSendStatus == 2 || listRow.NextScheduledSendStatus == 3"
     [target]="{ longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong: true }"
     [error]="'We couldn\\\'t find anything with that name.'"
+    *ngIf="form.controls.details?.controls.amount?.errors.min"
 ></div>

From d38536af4fac316a7757b35ee61200b69f385fc4 Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Fri, 2 Nov 2018 10:03:55 +0800
Subject: [PATCH 158/177] fix(angular): correct chained optional expression

---
 package.json                                        | 2 +-
 tests/html_angular/__snapshots__/jsfmt.spec.js.snap | 4 ++--
 yarn.lock                                           | 6 +++---
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index 5eb3e1a34541..0953fb4e0c71 100644
--- a/package.json
+++ b/package.json
@@ -19,7 +19,7 @@
     "@babel/parser": "7.1.2",
     "@glimmer/syntax": "0.30.3",
     "@iarna/toml": "2.0.0",
-    "angular-estree-parser": "1.1.2",
+    "angular-estree-parser": "1.1.3",
     "angular-html-parser": "1.0.0",
     "camelcase": "4.1.0",
     "chalk": "2.1.0",
diff --git a/tests/html_angular/__snapshots__/jsfmt.spec.js.snap b/tests/html_angular/__snapshots__/jsfmt.spec.js.snap
index 04635c63ca75..31f333bd8f74 100644
--- a/tests/html_angular/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_angular/__snapshots__/jsfmt.spec.js.snap
@@ -178,7 +178,7 @@ exports[`attributes.component.html - angular-verify 1`] = `
     longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong: true
   }"
   [error]="'We couldn\\\\\\'t find anything with that name.'"
-  *ngIf="((form.controls.details?.controls).amount?.errors).min"
+  *ngIf="form.controls.details?.controls.amount?.errors.min"
 ></div>
 
 `;
@@ -361,7 +361,7 @@ exports[`attributes.component.html - angular-verify 2`] = `
     longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong: true
   }"
   [error]="'We couldn\\\\\\'t find anything with that name.'"
-  *ngIf="((form.controls.details?.controls).amount?.errors).min"
+  *ngIf="form.controls.details?.controls.amount?.errors.min"
 ></div>
 
 `;
diff --git a/yarn.lock b/yarn.lock
index 69b07addcb2b..3421bb7ef881 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -668,9 +668,9 @@ amdefine@>=0.0.4:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/amdefine/-/amdefine-1.0.1.tgz#4a5282ac164729e93619bcfd3ad151f817ce91f5"
 
-angular-estree-parser@1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/angular-estree-parser/-/angular-estree-parser-1.1.2.tgz#d95f263df5825ea59c643d38b67119576d21c844"
+angular-estree-parser@1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/angular-estree-parser/-/angular-estree-parser-1.1.3.tgz#679b7a1ab57e56cd484b5c44e380bcec7633df58"
   dependencies:
     lines-and-columns "^1.1.6"
     tslib "^1.9.3"

From c126eb06e566621d0ec817921a82d95b994252ca Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Fri, 2 Nov 2018 10:52:49 +0800
Subject: [PATCH 159/177] test: add tests

---
 .../__snapshots__/jsfmt.spec.js.snap          | 4724 ++++++++++++++++-
 tests/html_angular/jsfmt.spec.js              |    1 +
 2 files changed, 4493 insertions(+), 232 deletions(-)

diff --git a/tests/html_angular/__snapshots__/jsfmt.spec.js.snap b/tests/html_angular/__snapshots__/jsfmt.spec.js.snap
index 31f333bd8f74..019b687001a8 100644
--- a/tests/html_angular/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_angular/__snapshots__/jsfmt.spec.js.snap
@@ -366,6 +366,395 @@ exports[`attributes.component.html - angular-verify 2`] = `
 
 `;
 
+exports[`attributes.component.html - angular-verify 3`] = `
+<div
+    bindon-target=" a | b : c "
+    [(target)]=" a | b : c "
+    bind-target=" a | b : c "
+    [target]=" a | b : c "
+    [target]=" 0 - 1 "
+    [target]=" - 1 "
+    [target]=" a ? 1 : 2 "
+    [target]=" "
+    [target]=" a ( 1 ) ( 2 ) "
+    [target]=" a [ b ] "
+    [target]=" [ 1 ] "
+    [target]=" { 'a' : 1 } "
+    [target]=" { a : 1 } "
+    [target]=" { 
+      trailingComma : 'notAllowed'
+    }"
+    [target]=" true "
+    [target]=" undefined "
+    [target]=" null "
+    [target]=" ( 1 ) "
+    [target]=" 1 "
+    [target]="  'hello' "
+    [target]=" a ( 1 , 2 ) "
+    [target]=" a . b ( 1 , 2 ) "
+    [target]=" x ! "
+    [target]=" ! x "
+    [target]=" ( ( a ) ) "
+    [target]=" a "
+    [target]=" a // hello "
+    [target]=" a . b "
+    [target]=" javascript : 'hello world' "
+    [target]=" a ?. b ( ) "
+    [target]=" a ?. b "
+    [target]=" this . a "
+    on-target=" a = 1 "
+    (target)=" a = 1 "
+    (target)=" a . b = 1 "
+    (target)=" a [ b ] = 1 "
+    (target)=" a // hello "
+    (target)=" a ; b "
+    (event)="  0  "
+    (event)="  a.b  "
+    (event)="  hello  "
+    (event)="  hello()  "
+    (event)="  a && b  "
+    (event)="  a && b()  "
+    (event)="  foo = $event  "
+    (event)="  foo == $event  "
+    *ngIf=" something?true:false    "
+    *ngFor="  let     hero     of     heroes"
+    *ngFor="  let    hero     of[1,2,3,666666666666666666666666666666666666]; let i=index"
+    *ngFor="     let hero     of     heroes;     trackBy    :    trackByHeroes     "
+    *ngFor=" let     item   of   items   ;    index    as   i  ; trackBy  :     trackByFn"
+    *ngFor="  let    hero     of heroes; let i  =  index"
+    *ngFor="  let    hero     of heroes; value     myValue"
+    *ngIf=" condition  ;  then  thenBlock  else  elseBlock "
+    *ngIf=" condition  as  value  ;  else  elseBlock "
+    *directive=" let hero "
+    *directive=" let hero = hello "
+    *directive=" let hero of heroes "
+    *directive=" let hero ; of : heroes "
+    *directive=" a "
+    *directive=" a as b "
+    *directive=" a , b "
+    *directive=" a ; b "
+    *directive=" a ; b c "
+    *directive=" a ; b : c "
+    *directive=" a ; b : c as d "
+    *directive=" a ; b as c "
+    *ngIf="listRow.NextScheduledSendStatus == 1 || listRow.NextScheduledSendStatus == 2 || listRow.NextScheduledSendStatus == 3"
+    *ngIf="listRow.NextScheduledSendStatus == 1 || listRow.NextScheduledSendStatus == 2 || listRow.NextScheduledSendStatus == 3; else hello"
+    (target)="listRow.NextScheduledSendStatus == 1 || listRow.NextScheduledSendStatus == 2 || listRow.NextScheduledSendStatus == 3"
+    [target]="listRow.NextScheduledSendStatus == 1 || listRow.NextScheduledSendStatus == 2 || listRow.NextScheduledSendStatus == 3"
+    [target]="{ longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong: true }"
+    [error]="'We couldn\\\\\\'t find anything with that name.'"
+    *ngIf="form.controls.details?.controls.amount?.errors.min"
+></div>
+~
+<div
+  bindon-target="
+    a
+      | b
+        : c
+  "
+  [(target)]="
+    a
+      | b
+        : c
+  "
+  bind-target="
+    a
+      | b
+        : c
+  "
+  [target]="
+    a
+      | b
+        : c
+  "
+  [target]="
+    0 -
+    1
+  "
+  [target]="
+    -1
+  "
+  [target]="
+    a
+      ? 1
+      : 2
+  "
+  [target]="
+
+  "
+  [target]="
+    a(
+      1
+    )(
+      2
+    )
+  "
+  [target]="
+    a[
+      b
+    ]
+  "
+  [target]="
+    [
+      1
+    ]
+  "
+  [target]="{
+    a: 1
+  }"
+  [target]="{
+    a: 1
+  }"
+  [target]="{
+    trailingComma:
+      'notAllowed'
+  }"
+  [target]="
+    true
+  "
+  [target]="
+    undefined
+  "
+  [target]="
+    null
+  "
+  [target]="
+    1
+  "
+  [target]="
+    1
+  "
+  [target]="
+    'hello'
+  "
+  [target]="
+    a(
+      1,
+      2
+    )
+  "
+  [target]="
+    a.b(
+      1,
+      2
+    )
+  "
+  [target]="
+    x!
+  "
+  [target]="
+    !x
+  "
+  [target]="
+    a
+  "
+  [target]="
+    a
+  "
+  [target]="
+    a // hello
+  "
+  [target]="
+    a.b
+  "
+  [target]="
+    javascript: 'hello world'
+  "
+  [target]="
+    a?.b()
+  "
+  [target]="
+    a?.b
+  "
+  [target]="
+    this
+      .a
+  "
+  on-target="
+    a = 1
+  "
+  (target)="
+    a = 1
+  "
+  (target)="
+    a.b = 1
+  "
+  (target)="
+    a[
+      b
+    ] = 1
+  "
+  (target)="
+    (a) // hello
+  "
+  (target)="
+    (a);
+    (b)
+  "
+  (event)="
+    (0)
+  "
+  (event)="
+    (a.b)
+  "
+  (event)="
+    (hello)
+  "
+  (event)="
+    hello()
+  "
+  (event)="
+    (a &&
+      b)
+  "
+  (event)="
+    a &&
+      b()
+  "
+  (event)="
+    foo = $event
+  "
+  (event)="
+    (foo ==
+      $event)
+  "
+  *ngIf="
+    something
+      ? true
+      : false
+  "
+  *ngFor="
+    let hero of heroes
+  "
+  *ngFor="
+    let hero of [
+      1,
+      2,
+      3,
+      666666666666666666666666666666666666
+    ];
+    let i = index
+  "
+  *ngFor="
+    let hero of heroes;
+    trackBy: trackByHeroes
+  "
+  *ngFor="
+    let item of items;
+    index as i;
+    trackBy: trackByFn
+  "
+  *ngFor="
+    let hero of heroes;
+    let i = index
+  "
+  *ngFor="
+    let hero of heroes;
+    value: myValue
+  "
+  *ngIf="
+    condition;
+    then: thenBlock;
+    else: elseBlock
+  "
+  *ngIf="
+    condition as value;
+    else: elseBlock
+  "
+  *directive="
+    let hero
+  "
+  *directive="
+    let hero = hello
+  "
+  *directive="
+    let hero of heroes
+  "
+  *directive="
+    let hero of heroes
+  "
+  *directive="
+    a
+  "
+  *directive="
+    a as b
+  "
+  *directive="
+    a;
+    b
+  "
+  *directive="
+    a;
+    b
+  "
+  *directive="
+    a;
+    b: c
+  "
+  *directive="
+    a;
+    b: c
+  "
+  *directive="
+    a;
+    b: c as d
+  "
+  *directive="
+    a;
+    b as c
+  "
+  *ngIf="
+    listRow.NextScheduledSendStatus ==
+      1 ||
+    listRow.NextScheduledSendStatus ==
+      2 ||
+    listRow.NextScheduledSendStatus ==
+      3
+  "
+  *ngIf="
+    listRow.NextScheduledSendStatus ==
+      1 ||
+      listRow.NextScheduledSendStatus ==
+        2 ||
+      listRow.NextScheduledSendStatus ==
+        3;
+    else: hello
+  "
+  (target)="
+    (listRow.NextScheduledSendStatus ==
+      1 ||
+      listRow.NextScheduledSendStatus ==
+        2 ||
+      listRow.NextScheduledSendStatus ==
+        3)
+  "
+  [target]="
+    listRow.NextScheduledSendStatus ==
+      1 ||
+    listRow.NextScheduledSendStatus ==
+      2 ||
+    listRow.NextScheduledSendStatus ==
+      3
+  "
+  [target]="{
+    longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong: true
+  }"
+  [error]="
+    'We couldn\\\\\\'t find anything with that name.'
+  "
+  *ngIf="
+    form
+      .controls
+      .details
+      ?.controls
+      .amount
+      ?.errors
+      .min
+  "
+></div>
+
+`;
+
 exports[`ignore-attribute.component.html - angular-verify 1`] = `
 <div
     bindon-target=" a | b : c "
@@ -468,51 +857,132 @@ exports[`ignore-attribute.component.html - angular-verify 2`] = `
 
 `;
 
-exports[`interpolation.component.html - angular-verify 1`] = `
-<div>{{ a | b : c }}</div>
-<div>{{ 0 - 1 }}</div>
-<div>{{ - 1 }}</div>
-<div>{{ a ? 1 : 2 }}</div>
-<div>{{ a ( 1 ) ( 2 ) }}</div>
-<div>{{ a [ b ] }}</div>
-<div>{{ [ 1 ] }}</div>
-<div>{{ { 'a' : 1 } }}</div>
-<div>{{ { a : 1 } }}</div>
-<div>{{ true }}</div>
-<div>{{ undefined }}</div>
-<div>{{ null }}</div>
-<div>{{ ( 1 ) }}</div>
-<div>{{ 1 }}</div>
-<div>{{  'hello' }}</div>
-<div>{{ a ( 1 , 2 ) }}</div>
-<div>{{ a . b ( 1 , 2 ) }}</div>
-<div>{{ x ! }}</div>
-<div>{{ ! x }}</div>
-<div>{{ ( ( a ) ) }}</div>
-<div>{{ a }}</div>
-<div>{{ a // hello }}</div>
-<div>{{ a . b }}</div>
-<div>{{ a ?. b ( ) }}</div>
-<div>{{ a ?. b }}</div>
-<div>{{  a // hello  }}</div>
-<label for="transmissionLayoutRadioButton">{{
-"SearchSelection.transmissionLayoutRadioButton" | localize:localizationSection
-}}</label>
-<label for="transmissionLayoutRadioButtontransmissionLayoutRadioButtontransmissionLayoutRadioButtontransmissionLayoutRadioButton">{{
-"SearchSelection.transmissionLayoutRadioButton" | localize:localizationSection
-}}</label>
-<label for="transmissionLayoutRadioButton">{{
-"SearchSelection.transmissionLayoutRadioButton" | localize:localizationSection
-}} </label>
-<label for="transmissionLayoutRadioButton"> {{
-"SearchSelection.transmissionLayoutRadioButton" | localize:localizationSection
-}}</label>
-<label for="transmissionLayoutRadioButton"> {{
-"SearchSelection.transmissionLayoutRadioButton" | localize:localizationSection
-}} </label>
-<div class="Nemo possimus non voluptates dicta accusamus id quia">{{copyTypes[options.copyType]}}</div>
-{{listRow.NextScheduledSendStatus == 1 || listRow.NextScheduledSendStatus == 2 || listRow.NextScheduledSendStatus == 3}}
-~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+exports[`ignore-attribute.component.html - angular-verify 3`] = `
+<div
+    bindon-target=" a | b : c "
+    [(target)]=" a | b : c "
+    bind-target=" a | b : c "
+></div>
+<!--  prettier-ignore-attribute -->
+<div
+    bindon-target=" a | b : c "
+    [(target)]=" a | b : c "
+    bind-target=" a | b : c "
+></div>
+<!--  prettier-ignore-attribute bind-target -->
+<div
+    bindon-target=" a | b : c "
+    [(target)]=" a | b : c "
+    bind-target=" a | b : c "
+></div>
+<!--  prettier-ignore-attribute [(target)] bind-target -->
+<div
+    bindon-target=" a | b : c "
+    [(target)]=" a | b : c "
+    bind-target=" a | b : c "
+></div>
+~
+<div
+  bindon-target="
+    a
+      | b
+        : c
+  "
+  [(target)]="
+    a
+      | b
+        : c
+  "
+  bind-target="
+    a
+      | b
+        : c
+  "
+></div>
+<!--
+  prettier-ignore-attribute
+-->
+<div
+  bindon-target=" a | b : c "
+  [(target)]=" a | b : c "
+  bind-target=" a | b : c "
+></div>
+<!--
+  prettier-ignore-attribute bind-target
+-->
+<div
+  bindon-target="
+    a
+      | b
+        : c
+  "
+  [(target)]="
+    a
+      | b
+        : c
+  "
+  bind-target=" a | b : c "
+></div>
+<!--
+  prettier-ignore-attribute [(target)] bind-target
+-->
+<div
+  bindon-target="
+    a
+      | b
+        : c
+  "
+  [(target)]=" a | b : c "
+  bind-target=" a | b : c "
+></div>
+
+`;
+
+exports[`interpolation.component.html - angular-verify 1`] = `
+<div>{{ a | b : c }}</div>
+<div>{{ 0 - 1 }}</div>
+<div>{{ - 1 }}</div>
+<div>{{ a ? 1 : 2 }}</div>
+<div>{{ a ( 1 ) ( 2 ) }}</div>
+<div>{{ a [ b ] }}</div>
+<div>{{ [ 1 ] }}</div>
+<div>{{ { 'a' : 1 } }}</div>
+<div>{{ { a : 1 } }}</div>
+<div>{{ true }}</div>
+<div>{{ undefined }}</div>
+<div>{{ null }}</div>
+<div>{{ ( 1 ) }}</div>
+<div>{{ 1 }}</div>
+<div>{{  'hello' }}</div>
+<div>{{ a ( 1 , 2 ) }}</div>
+<div>{{ a . b ( 1 , 2 ) }}</div>
+<div>{{ x ! }}</div>
+<div>{{ ! x }}</div>
+<div>{{ ( ( a ) ) }}</div>
+<div>{{ a }}</div>
+<div>{{ a // hello }}</div>
+<div>{{ a . b }}</div>
+<div>{{ a ?. b ( ) }}</div>
+<div>{{ a ?. b }}</div>
+<div>{{  a // hello  }}</div>
+<label for="transmissionLayoutRadioButton">{{
+"SearchSelection.transmissionLayoutRadioButton" | localize:localizationSection
+}}</label>
+<label for="transmissionLayoutRadioButtontransmissionLayoutRadioButtontransmissionLayoutRadioButtontransmissionLayoutRadioButton">{{
+"SearchSelection.transmissionLayoutRadioButton" | localize:localizationSection
+}}</label>
+<label for="transmissionLayoutRadioButton">{{
+"SearchSelection.transmissionLayoutRadioButton" | localize:localizationSection
+}} </label>
+<label for="transmissionLayoutRadioButton"> {{
+"SearchSelection.transmissionLayoutRadioButton" | localize:localizationSection
+}}</label>
+<label for="transmissionLayoutRadioButton"> {{
+"SearchSelection.transmissionLayoutRadioButton" | localize:localizationSection
+}} </label>
+<div class="Nemo possimus non voluptates dicta accusamus id quia">{{copyTypes[options.copyType]}}</div>
+{{listRow.NextScheduledSendStatus == 1 || listRow.NextScheduledSendStatus == 2 || listRow.NextScheduledSendStatus == 3}}
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 <div>{{ a | b: c }}</div>
 <div>{{ 0 - 1 }}</div>
 <div>{{ -1 }}</div>
@@ -690,108 +1160,369 @@ exports[`interpolation.component.html - angular-verify 2`] = `
 
 `;
 
-exports[`real-world.component.html - angular-verify 1`] = `
-<!-- copied from: https://stackblitz.com/angular/ymdjlgmlavo -->
-
-<a id="toc"></a>
-<h1>Template Syntax</h1>
-<a href="#interpolation">Interpolation</a><br>
-<a href="#expression-context">Expression context</a><br>
-<a href="#statement-context">Statement context</a><br>
-<a href="#mental-model">Mental Model</a><br>
-<a href="#buttons">Buttons</a><br>
-<a href="#prop-vs-attrib">Properties vs. Attributes</a><br>
-<br>
-<a href="#property-binding">Property Binding</a><br>
-<div style="margin-left:8px">
-  <a href="#attribute-binding">Attribute Binding</a><br>
-  <a href="#class-binding">Class Binding</a><br>
-  <a href="#style-binding">Style Binding</a><br>
+exports[`interpolation.component.html - angular-verify 3`] = `
+<div>{{ a | b : c }}</div>
+<div>{{ 0 - 1 }}</div>
+<div>{{ - 1 }}</div>
+<div>{{ a ? 1 : 2 }}</div>
+<div>{{ a ( 1 ) ( 2 ) }}</div>
+<div>{{ a [ b ] }}</div>
+<div>{{ [ 1 ] }}</div>
+<div>{{ { 'a' : 1 } }}</div>
+<div>{{ { a : 1 } }}</div>
+<div>{{ true }}</div>
+<div>{{ undefined }}</div>
+<div>{{ null }}</div>
+<div>{{ ( 1 ) }}</div>
+<div>{{ 1 }}</div>
+<div>{{  'hello' }}</div>
+<div>{{ a ( 1 , 2 ) }}</div>
+<div>{{ a . b ( 1 , 2 ) }}</div>
+<div>{{ x ! }}</div>
+<div>{{ ! x }}</div>
+<div>{{ ( ( a ) ) }}</div>
+<div>{{ a }}</div>
+<div>{{ a // hello }}</div>
+<div>{{ a . b }}</div>
+<div>{{ a ?. b ( ) }}</div>
+<div>{{ a ?. b }}</div>
+<div>{{  a // hello  }}</div>
+<label for="transmissionLayoutRadioButton">{{
+"SearchSelection.transmissionLayoutRadioButton" | localize:localizationSection
+}}</label>
+<label for="transmissionLayoutRadioButtontransmissionLayoutRadioButtontransmissionLayoutRadioButtontransmissionLayoutRadioButton">{{
+"SearchSelection.transmissionLayoutRadioButton" | localize:localizationSection
+}}</label>
+<label for="transmissionLayoutRadioButton">{{
+"SearchSelection.transmissionLayoutRadioButton" | localize:localizationSection
+}} </label>
+<label for="transmissionLayoutRadioButton"> {{
+"SearchSelection.transmissionLayoutRadioButton" | localize:localizationSection
+}}</label>
+<label for="transmissionLayoutRadioButton"> {{
+"SearchSelection.transmissionLayoutRadioButton" | localize:localizationSection
+}} </label>
+<div class="Nemo possimus non voluptates dicta accusamus id quia">{{copyTypes[options.copyType]}}</div>
+{{listRow.NextScheduledSendStatus == 1 || listRow.NextScheduledSendStatus == 2 || listRow.NextScheduledSendStatus == 3}}
+~
+<div>
+  {{
+    a
+      | b
+        : c
+  }}
 </div>
-<br>
-<a href="#event-binding">Event Binding</a><br>
-<a href="#two-way">Two-way Binding</a><br>
-<br>
-<div>Directives</div>
-<div style="margin-left:8px">
-  <a href="#ngModel">NgModel (two-way) Binding</a><br>
-  <a href="#ngClass">NgClass Binding</a><br>
-  <a href="#ngStyle">NgStyle Binding</a><br>
-  <a href="#ngIf">NgIf</a><br>
-  <a href="#ngFor">NgFor</a><br>
-  <div style="margin-left:8px">
-    <a href="#ngFor-index">NgFor with index</a><br>
-    <a href="#ngFor-trackBy">NgFor with trackBy</a><br>
-  </div>
-  <a href="#ngSwitch">NgSwitch</a><br>
+<div>
+  {{
+    0 -
+      1
+  }}
 </div>
-<br>
-<a href="#ref-vars">Template reference variables</a><br>
-<a href="#inputs-and-outputs">Inputs and outputs</a><br>
-<a href="#pipes">Pipes</a><br>
-<a href="#safe-navigation-operator">Safe navigation operator <i>?.</i></a><br>
-<a href="#non-null-assertion-operator">Non-null assertion operator <i>!.</i></a><br>
-<a href="#enums">Enums</a><br>
-
-<!-- Interpolation and expressions -->
-<hr><h2 id="interpolation">Interpolation</h2>
-
-<p>My current hero is {{currentHero.name}}</p>
-
-<h3>
-  {{title}}
-  <img src="{{heroImageUrl}}" style="height:30px">
-</h3>
-
-<!-- "The sum of 1 + 1 is 2" -->
-<p>The sum of 1 + 1 is {{1 + 1}}</p>
-
-<!-- "The sum of 1 + 1 is not 4" -->
-<p>The sum of 1 + 1 is not {{1 + 1 + getVal()}}</p>
-
-<a class="to-toc" href="#toc">top</a>
-
-<hr><h2 id="expression-context">Expression context</h2>
-
-<p>Component expression context (&#123;&#123;title&#125;&#125;, [hidden]="isUnchanged")</p>
-<div class="context">
-  {{title}}
-  <span [hidden]="isUnchanged">changed</span>
+<div>
+  {{
+    -1
+  }}
 </div>
-
-
-<p>Template input variable expression context (let hero)</p>
-<!-- template hides the following; plenty of examples later -->
-<ng-template>
-  <div *ngFor="let hero of heroes">{{hero.name}}</div>
-</ng-template>
-
-<p>Template reference variable expression context (#heroInput)</p>
-<div (keyup)="0" class="context">
-  Type something:
-  <input #heroInput> {{heroInput.value}}
+<div>
+  {{
+    a
+      ? 1
+      : 2
+  }}
 </div>
-
-<a class="to-toc" href="#toc">top</a>
-
-<hr><h2 id="statement-context">Statement context</h2>
-
-<p>Component statement context ( (click)="onSave() )
-<div class="context">
-  <button (click)="deleteHero()">Delete hero</button>
+<div>
+  {{
+    a(
+      1
+    )(
+      2
+    )
+  }}
 </div>
-
-<p>Template $event statement context</p>
-<div class="context">
-  <button (click)="onSave($event)">Save</button>
+<div>
+  {{
+    a[
+      b
+    ]
+  }}
 </div>
-
-<p>Template input variable statement context (let hero)</p>
-<!-- template hides the following; plenty of examples later -->
-<div class="context">
-  <button *ngFor="let hero of heroes" (click)="deleteHero(hero)">{{hero.name}}</button>
+<div>
+  {{
+    [
+      1
+    ]
+  }}
 </div>
-
+<div>
+  {{
+    {
+      a: 1
+    }
+  }}
+</div>
+<div>
+  {{
+    {
+      a: 1
+    }
+  }}
+</div>
+<div>
+  {{
+    true
+  }}
+</div>
+<div>
+  {{
+    undefined
+  }}
+</div>
+<div>
+  {{
+    null
+  }}
+</div>
+<div>
+  {{
+    1
+  }}
+</div>
+<div>
+  {{
+    1
+  }}
+</div>
+<div>
+  {{
+    "hello"
+  }}
+</div>
+<div>
+  {{
+    a(
+      1,
+      2
+    )
+  }}
+</div>
+<div>
+  {{
+    a.b(
+      1,
+      2
+    )
+  }}
+</div>
+<div>
+  {{
+    x!
+  }}
+</div>
+<div>
+  {{
+    !x
+  }}
+</div>
+<div>
+  {{
+    a
+  }}
+</div>
+<div>
+  {{
+    a
+  }}
+</div>
+<div>
+  {{
+    a // hello
+  }}
+</div>
+<div>
+  {{
+    a.b
+  }}
+</div>
+<div>
+  {{
+    a?.b()
+  }}
+</div>
+<div>
+  {{
+    a?.b
+  }}
+</div>
+<div>
+  {{
+    a // hello
+  }}
+</div>
+<label
+  for="transmissionLayoutRadioButton"
+  >{{
+    "SearchSelection.transmissionLayoutRadioButton"
+      | localize
+        : localizationSection
+  }}</label
+>
+<label
+  for="transmissionLayoutRadioButtontransmissionLayoutRadioButtontransmissionLayoutRadioButtontransmissionLayoutRadioButton"
+  >{{
+    "SearchSelection.transmissionLayoutRadioButton"
+      | localize
+        : localizationSection
+  }}</label
+>
+<label
+  for="transmissionLayoutRadioButton"
+  >{{
+    "SearchSelection.transmissionLayoutRadioButton"
+      | localize
+        : localizationSection
+  }}
+</label>
+<label
+  for="transmissionLayoutRadioButton"
+>
+  {{
+    "SearchSelection.transmissionLayoutRadioButton"
+      | localize
+        : localizationSection
+  }}</label
+>
+<label
+  for="transmissionLayoutRadioButton"
+>
+  {{
+    "SearchSelection.transmissionLayoutRadioButton"
+      | localize
+        : localizationSection
+  }}
+</label>
+<div
+  class="Nemo possimus non voluptates dicta accusamus id quia"
+>
+  {{
+    copyTypes[
+      options
+        .copyType
+    ]
+  }}
+</div>
+{{
+  listRow.NextScheduledSendStatus ==
+    1 ||
+    listRow.NextScheduledSendStatus ==
+      2 ||
+    listRow.NextScheduledSendStatus ==
+      3
+}}
+
+`;
+
+exports[`real-world.component.html - angular-verify 1`] = `
+<!-- copied from: https://stackblitz.com/angular/ymdjlgmlavo -->
+
+<a id="toc"></a>
+<h1>Template Syntax</h1>
+<a href="#interpolation">Interpolation</a><br>
+<a href="#expression-context">Expression context</a><br>
+<a href="#statement-context">Statement context</a><br>
+<a href="#mental-model">Mental Model</a><br>
+<a href="#buttons">Buttons</a><br>
+<a href="#prop-vs-attrib">Properties vs. Attributes</a><br>
+<br>
+<a href="#property-binding">Property Binding</a><br>
+<div style="margin-left:8px">
+  <a href="#attribute-binding">Attribute Binding</a><br>
+  <a href="#class-binding">Class Binding</a><br>
+  <a href="#style-binding">Style Binding</a><br>
+</div>
+<br>
+<a href="#event-binding">Event Binding</a><br>
+<a href="#two-way">Two-way Binding</a><br>
+<br>
+<div>Directives</div>
+<div style="margin-left:8px">
+  <a href="#ngModel">NgModel (two-way) Binding</a><br>
+  <a href="#ngClass">NgClass Binding</a><br>
+  <a href="#ngStyle">NgStyle Binding</a><br>
+  <a href="#ngIf">NgIf</a><br>
+  <a href="#ngFor">NgFor</a><br>
+  <div style="margin-left:8px">
+    <a href="#ngFor-index">NgFor with index</a><br>
+    <a href="#ngFor-trackBy">NgFor with trackBy</a><br>
+  </div>
+  <a href="#ngSwitch">NgSwitch</a><br>
+</div>
+<br>
+<a href="#ref-vars">Template reference variables</a><br>
+<a href="#inputs-and-outputs">Inputs and outputs</a><br>
+<a href="#pipes">Pipes</a><br>
+<a href="#safe-navigation-operator">Safe navigation operator <i>?.</i></a><br>
+<a href="#non-null-assertion-operator">Non-null assertion operator <i>!.</i></a><br>
+<a href="#enums">Enums</a><br>
+
+<!-- Interpolation and expressions -->
+<hr><h2 id="interpolation">Interpolation</h2>
+
+<p>My current hero is {{currentHero.name}}</p>
+
+<h3>
+  {{title}}
+  <img src="{{heroImageUrl}}" style="height:30px">
+</h3>
+
+<!-- "The sum of 1 + 1 is 2" -->
+<p>The sum of 1 + 1 is {{1 + 1}}</p>
+
+<!-- "The sum of 1 + 1 is not 4" -->
+<p>The sum of 1 + 1 is not {{1 + 1 + getVal()}}</p>
+
+<a class="to-toc" href="#toc">top</a>
+
+<hr><h2 id="expression-context">Expression context</h2>
+
+<p>Component expression context (&#123;&#123;title&#125;&#125;, [hidden]="isUnchanged")</p>
+<div class="context">
+  {{title}}
+  <span [hidden]="isUnchanged">changed</span>
+</div>
+
+
+<p>Template input variable expression context (let hero)</p>
+<!-- template hides the following; plenty of examples later -->
+<ng-template>
+  <div *ngFor="let hero of heroes">{{hero.name}}</div>
+</ng-template>
+
+<p>Template reference variable expression context (#heroInput)</p>
+<div (keyup)="0" class="context">
+  Type something:
+  <input #heroInput> {{heroInput.value}}
+</div>
+
+<a class="to-toc" href="#toc">top</a>
+
+<hr><h2 id="statement-context">Statement context</h2>
+
+<p>Component statement context ( (click)="onSave() )
+<div class="context">
+  <button (click)="deleteHero()">Delete hero</button>
+</div>
+
+<p>Template $event statement context</p>
+<div class="context">
+  <button (click)="onSave($event)">Save</button>
+</div>
+
+<p>Template input variable statement context (let hero)</p>
+<!-- template hides the following; plenty of examples later -->
+<div class="context">
+  <button *ngFor="let hero of heroes" (click)="deleteHero(hero)">{{hero.name}}</button>
+</div>
+
 <p>Template reference variable statement context (#heroForm)</p>
 <div class="context">
   <form #heroForm (ngSubmit)="onSubmit(heroForm)"> ... </form>
@@ -3465,117 +4196,3457 @@ without NgModel <br />
   </div>
 </div>
 
-<p>with <i>generic</i> trackById function</p>
-<div class="box">
-  <div *ngFor="let hero of heroes; trackBy: trackById">
-    ({{ hero.id }}) {{ hero.name }}
+<p>with <i>generic</i> trackById function</p>
+<div class="box">
+  <div *ngFor="let hero of heroes; trackBy: trackById">
+    ({{ hero.id }}) {{ hero.name }}
+  </div>
+</div>
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- NgSwitch binding -->
+<hr />
+<h2 id="ngSwitch">NgSwitch Binding</h2>
+
+<p>Pick your favorite hero</p>
+<div>
+  <label *ngFor="let h of heroes">
+    <input type="radio" name="heroes" [(ngModel)]="currentHero" [value]="h" />{{
+      h.name
+    }}
+  </label>
+</div>
+
+<div [ngSwitch]="currentHero.emotion">
+  <app-happy-hero *ngSwitchCase="'happy'" [hero]="currentHero"></app-happy-hero>
+  <app-sad-hero *ngSwitchCase="'sad'" [hero]="currentHero"></app-sad-hero>
+  <app-confused-hero
+    *ngSwitchCase="'confused'"
+    [hero]="currentHero"
+  ></app-confused-hero>
+  <div *ngSwitchCase="'confused'">
+    Are you as confused as {{ currentHero.name }}?
+  </div>
+  <app-unknown-hero *ngSwitchDefault [hero]="currentHero"></app-unknown-hero>
+</div>
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- template reference variable -->
+<hr />
+<h2 id="ref-vars">Template reference variables</h2>
+
+<input #phone placeholder="phone number" />
+
+<!-- lots of other elements -->
+
+<!-- phone refers to the input element; pass its \`value\` to an event handler -->
+<button (click)="callPhone(phone.value)">Call</button>
+
+<input ref-fax placeholder="fax number" />
+<button (click)="callFax(fax.value)">Fax</button>
+
+<!-- btn refers to the button element; show its disabled state -->
+<button
+  #btn
+  disabled
+  [innerHTML]="'disabled by attribute: ' + btn.disabled"
+></button>
+
+<h4>Example Form</h4>
+<app-hero-form [hero]="currentHero"></app-hero-form>
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- inputs and output -->
+<hr />
+<h2 id="inputs-and-outputs">Inputs and Outputs</h2>
+
+<img [src]="iconUrl" /> <button (click)="onSave()">Save</button>
+
+<app-hero-detail [hero]="currentHero" (deleteRequest)="deleteHero($event)">
+</app-hero-detail>
+
+<div (myClick)="clickMessage2 = $event" clickable>myClick2</div>
+{{ clickMessage2 }}
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- Pipes -->
+<hr />
+<h2 id="pipes">Pipes</h2>
+
+<div>Title through uppercase pipe: {{ title | uppercase }}</div>
+
+<!-- Pipe chaining: convert title to uppercase, then to lowercase -->
+<div>Title through a pipe chain: {{ title | uppercase | lowercase }}</div>
+
+<!-- pipe with configuration argument => "February 25, 1970" -->
+<div>Birthdate: {{ currentHero?.birthdate | date: "longDate" }}</div>
+
+<div>{{ currentHero | json }}</div>
+
+<div>
+  Birthdate: {{ currentHero?.birthdate | date: "longDate" | uppercase }}
+</div>
+
+<div>
+  <!-- pipe price to USD and display the $ symbol -->
+  <label>Price: </label>{{ product.price | currency: "USD":true }}
+</div>
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- Null values and the safe navigation operator -->
+<hr />
+<h2 id="safe-navigation-operator">Safe navigation operator <i>?.</i></h2>
+
+<div>The title is {{ title }}</div>
+
+<div>The current hero's name is {{ currentHero?.name }}</div>
+
+<div>The current hero's name is {{ currentHero.name }}</div>
+
+<!--
+  The null hero's name is {{nullHero.name}}
+
+  See console log:
+    TypeError: Cannot read property 'name' of null in [null]
+-->
+
+<!-- No hero, div not displayed, no error -->
+<div *ngIf="nullHero">The null hero's name is {{ nullHero.name }}</div>
+
+<div>The null hero's name is {{ nullHero && nullHero.name }}</div>
+
+<div>
+  <!-- No hero, no problem! -->
+  The null hero's name is {{ nullHero?.name }}
+</div>
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- non-null assertion operator -->
+<hr />
+<h2 id="non-null-assertion-operator">Non-null assertion operator <i>!.</i></h2>
+
+<div>
+  <!-- No hero, no text -->
+  <div *ngIf="hero">The hero's name is {{ hero!.name }}</div>
+</div>
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- non-null assertion operator -->
+<hr />
+<h2 id="any-type-cast-function">$any type cast function <i>$any( )</i>.</h2>
+
+<div>
+  <!-- Accessing an undeclared member -->
+  <div>The hero's marker is {{ $any(hero).marker }}</div>
+</div>
+
+<div>
+  <!-- Accessing an undeclared member -->
+  <div>Undeclared members is {{$any(this).member}}</div>
+</div>
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- TODO: discuss this in the Style binding section -->
+<!-- enums in bindings -->
+<hr />
+<h2 id="enums">Enums in binding</h2>
+
+<p>
+  The name of the Color.Red enum is {{ Color[Color.Red] }}.<br />
+  The current color is {{ Color[color] }} and its number is {{ color }}.<br />
+  <button [style.color]="Color[color]" (click)="colorToggle()">
+    Enum Toggle
+  </button>
+</p>
+
+<a class="to-toc" href="#toc">top</a>
+
+<!--
+  Copyright 2017-2018 Google Inc. All Rights Reserved.
+  Use of this source code is governed by an MIT-style license that
+  can be found in the LICENSE file at http://angular.io/license
+-->
+
+<div id="heroForm">
+  <form (ngSubmit)="onSubmit(heroForm)" #heroForm="ngForm">
+    <div class="form-group">
+      <label for="name"
+        >Name
+        <input
+          class="form-control"
+          name="name"
+          required
+          [(ngModel)]="hero.name"
+        />
+      </label>
+    </div>
+    <button type="submit" [disabled]="!heroForm.form.valid">Submit</button>
+  </form>
+  <div [hidden]="!heroForm.form.valid">{{ submitMessage }}</div>
+</div>
+
+<!--
+  Copyright 2017-2018 Google Inc. All Rights Reserved.
+  Use of this source code is governed by an MIT-style license that
+  can be found in the LICENSE file at http://angular.io/license
+-->
+
+`;
+
+exports[`real-world.component.html - angular-verify 3`] = `
+<!-- copied from: https://stackblitz.com/angular/ymdjlgmlavo -->
+
+<a id="toc"></a>
+<h1>Template Syntax</h1>
+<a href="#interpolation">Interpolation</a><br>
+<a href="#expression-context">Expression context</a><br>
+<a href="#statement-context">Statement context</a><br>
+<a href="#mental-model">Mental Model</a><br>
+<a href="#buttons">Buttons</a><br>
+<a href="#prop-vs-attrib">Properties vs. Attributes</a><br>
+<br>
+<a href="#property-binding">Property Binding</a><br>
+<div style="margin-left:8px">
+  <a href="#attribute-binding">Attribute Binding</a><br>
+  <a href="#class-binding">Class Binding</a><br>
+  <a href="#style-binding">Style Binding</a><br>
+</div>
+<br>
+<a href="#event-binding">Event Binding</a><br>
+<a href="#two-way">Two-way Binding</a><br>
+<br>
+<div>Directives</div>
+<div style="margin-left:8px">
+  <a href="#ngModel">NgModel (two-way) Binding</a><br>
+  <a href="#ngClass">NgClass Binding</a><br>
+  <a href="#ngStyle">NgStyle Binding</a><br>
+  <a href="#ngIf">NgIf</a><br>
+  <a href="#ngFor">NgFor</a><br>
+  <div style="margin-left:8px">
+    <a href="#ngFor-index">NgFor with index</a><br>
+    <a href="#ngFor-trackBy">NgFor with trackBy</a><br>
+  </div>
+  <a href="#ngSwitch">NgSwitch</a><br>
+</div>
+<br>
+<a href="#ref-vars">Template reference variables</a><br>
+<a href="#inputs-and-outputs">Inputs and outputs</a><br>
+<a href="#pipes">Pipes</a><br>
+<a href="#safe-navigation-operator">Safe navigation operator <i>?.</i></a><br>
+<a href="#non-null-assertion-operator">Non-null assertion operator <i>!.</i></a><br>
+<a href="#enums">Enums</a><br>
+
+<!-- Interpolation and expressions -->
+<hr><h2 id="interpolation">Interpolation</h2>
+
+<p>My current hero is {{currentHero.name}}</p>
+
+<h3>
+  {{title}}
+  <img src="{{heroImageUrl}}" style="height:30px">
+</h3>
+
+<!-- "The sum of 1 + 1 is 2" -->
+<p>The sum of 1 + 1 is {{1 + 1}}</p>
+
+<!-- "The sum of 1 + 1 is not 4" -->
+<p>The sum of 1 + 1 is not {{1 + 1 + getVal()}}</p>
+
+<a class="to-toc" href="#toc">top</a>
+
+<hr><h2 id="expression-context">Expression context</h2>
+
+<p>Component expression context (&#123;&#123;title&#125;&#125;, [hidden]="isUnchanged")</p>
+<div class="context">
+  {{title}}
+  <span [hidden]="isUnchanged">changed</span>
+</div>
+
+
+<p>Template input variable expression context (let hero)</p>
+<!-- template hides the following; plenty of examples later -->
+<ng-template>
+  <div *ngFor="let hero of heroes">{{hero.name}}</div>
+</ng-template>
+
+<p>Template reference variable expression context (#heroInput)</p>
+<div (keyup)="0" class="context">
+  Type something:
+  <input #heroInput> {{heroInput.value}}
+</div>
+
+<a class="to-toc" href="#toc">top</a>
+
+<hr><h2 id="statement-context">Statement context</h2>
+
+<p>Component statement context ( (click)="onSave() )
+<div class="context">
+  <button (click)="deleteHero()">Delete hero</button>
+</div>
+
+<p>Template $event statement context</p>
+<div class="context">
+  <button (click)="onSave($event)">Save</button>
+</div>
+
+<p>Template input variable statement context (let hero)</p>
+<!-- template hides the following; plenty of examples later -->
+<div class="context">
+  <button *ngFor="let hero of heroes" (click)="deleteHero(hero)">{{hero.name}}</button>
+</div>
+
+<p>Template reference variable statement context (#heroForm)</p>
+<div class="context">
+  <form #heroForm (ngSubmit)="onSubmit(heroForm)"> ... </form>
+</div>
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- New Mental Model -->
+<hr><h2 id="mental-model">New Mental Model</h2>
+
+<!--<img src="http://www.wpclipart.com/cartoon/people/hero/hero_silhoutte_T.png">-->
+<!-- Public Domain terms of use: http://www.wpclipart.com/terms.html -->
+<div class="special">Mental Model</div>
+<img src="assets/images/hero.png">
+<button disabled>Save</button>
+<br><br>
+
+<div>
+  <!-- Normal HTML -->
+  <div class="special">Mental Model</div>
+  <!-- Wow! A new element! -->
+  <app-hero-detail></app-hero-detail>
+</div>
+<br><br>
+
+<div>
+  <!-- Bind button disabled state to \`isUnchanged\` property -->
+  <button [disabled]="isUnchanged">Save</button>
+</div>
+<br><br>
+
+<div>
+  <img [src]="heroImageUrl">
+  <app-hero-detail [hero]="currentHero"></app-hero-detail>
+  <div [ngClass]="{'special': isSpecial}"></div>
+</div>
+<br><br>
+
+<button (click)="onSave()">Save</button>
+<app-hero-detail (deleteRequest)="deleteHero()"></app-hero-detail>
+<div (myClick)="clicked=$event" clickable>click me</div>
+{{clicked}}
+<br><br>
+
+<div>
+  Hero Name:
+  <input [(ngModel)]="name">
+  {{name}}
+</div>
+<br><br>
+
+<button [attr.aria-label]="help">help</button>
+<br><br>
+
+<div [class.special]="isSpecial">Special</div>
+<br><br>
+
+<button [style.color]="isSpecial ? 'red' : 'green'">
+button</button>
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- property vs. attribute -->
+<hr><h2 id="prop-vs-attrib">Property vs. Attribute (img examples)</h2>
+<!-- examine the following <img> tag in the browser tools -->
+<img src="images/ng-logo.png"
+    [src]="heroImageUrl">
+
+<br><br>
+
+<img [src]="iconUrl"/>
+<img bind-src="heroImageUrl"/>
+<img [attr.src]="villainImageUrl"/>
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- buttons -->
+<hr><h2 id="buttons">Buttons</h2>
+
+<button>Enabled (but does nothing)</button>
+<button disabled>Disabled</button>
+<button disabled=false>Still disabled</button>
+<br><br>
+<button disabled>disabled by attribute</button>
+<button [disabled]="isUnchanged">disabled by property binding</button>
+<br><br>
+<button bind-disabled="isUnchanged" on-click="onSave($event)">Disabled Cancel</button>
+<button [disabled]="!canSave" (click)="onSave($event)">Enabled Save</button>
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- property binding -->
+<hr><h2 id="property-binding">Property Binding</h2>
+
+<img [src]="heroImageUrl">
+<button [disabled]="isUnchanged">Cancel is disabled</button>
+<div [ngClass]="classes">[ngClass] binding to the classes property</div>
+<app-hero-detail [hero]="currentHero"></app-hero-detail>
+<img bind-src="heroImageUrl">
+
+<!-- ERROR: HeroDetailComponent.hero expects a
+     Hero object, not the string "currentHero" -->
+<div *ngIf="false">
+  <app-hero-detail hero="currentHero"></app-hero-detail>
+</div>
+<app-hero-detail prefix="You are my" [hero]="currentHero"></app-hero-detail>
+
+<p><img src="{{heroImageUrl}}"> is the <i>interpolated</i> image.</p>
+<p><img [src]="heroImageUrl"> is the <i>property bound</i> image.</p>
+
+<p><span>"{{title}}" is the <i>interpolated</i> title.</span></p>
+<p>"<span [innerHTML]="title"></span>" is the <i>property bound</i> title.</p>
+
+<!--
+  Angular generates warnings for these two lines as it sanitizes them
+  WARNING: sanitizing HTML stripped some content (see http://g.co/ng/security#xss).
+ -->
+<p><span>"{{evilTitle}}" is the <i>interpolated</i> evil title.</span></p>
+<p>"<span [innerHTML]="evilTitle"></span>" is the <i>property bound</i> evil title.</p>
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- attribute binding -->
+<hr><h2 id="attribute-binding">Attribute Binding</h2>
+
+<!--  create and set a colspan attribute -->
+<table border=1>
+  <!--  expression calculates colspan=2 -->
+  <tr><td [attr.colspan]="1 + 1">One-Two</td></tr>
+
+  <!-- ERROR: There is no \`colspan\` property to set!
+    <tr><td colspan="{{1 + 1}}">Three-Four</td></tr>
+  -->
+
+  <tr><td>Five</td><td>Six</td></tr>
+</table>
+
+<br>
+<!-- create and set an aria attribute for assistive technology -->
+<button [attr.aria-label]="actionName">{{actionName}} with Aria</button>
+<br><br>
+
+<!-- The following effects are not discussed in the chapter -->
+<div>
+  <!-- any use of [attr.disabled] creates the disabled attribute -->
+  <button [attr.disabled]="isUnchanged">Disabled</button>
+
+  <button [attr.disabled]="!isUnchanged">Disabled as well</button>
+
+  <!-- we'd have to remove it with property binding -->
+  <button disabled [disabled]="false">Enabled (but inert)</button>
+</div>
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- class binding -->
+<hr><h2 id="class-binding">Class Binding</h2>
+
+<!-- standard class attribute setting  -->
+<div class="bad curly special">Bad curly special</div>
+
+<!-- reset/override all class names with a binding  -->
+<div class="bad curly special"
+     [class]="badCurly">Bad curly</div>
+
+<!-- toggle the "special" class on/off with a property -->
+<div [class.special]="isSpecial">The class binding is special</div>
+
+<!-- binding to \`class.special\` trumps the class attribute -->
+<div class="special"
+     [class.special]="!isSpecial">This one is not so special</div>
+
+<div bind-class.special="isSpecial">This class binding is special too</div>
+
+<a class="to-toc" href="#toc">top</a>
+
+<!--style binding -->
+<hr><h2 id="style-binding">Style Binding</h2>
+
+<button [style.color]="isSpecial ? 'red': 'green'">Red</button>
+<button [style.background-color]="canSave ? 'cyan': 'grey'" >Save</button>
+
+<button [style.font-size.em]="isSpecial ? 3 : 1" >Big</button>
+<button [style.font-size.%]="!isSpecial ? 150 : 50" >Small</button>
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- event binding -->
+<hr><h2 id="event-binding">Event Binding</h2>
+
+<button (click)="onSave()">Save</button>
+
+<button on-click="onSave()">On Save</button>
+
+<div>
+<!-- \`myClick\` is an event on the custom \`ClickDirective\` -->
+<div (myClick)="clickMessage=$event" clickable>click with myClick</div>
+{{clickMessage}}
+</div>
+
+
+<!-- binding to a nested component -->
+<app-hero-detail (deleteRequest)="deleteHero($event)" [hero]="currentHero"></app-hero-detail>
+<br>
+
+<app-big-hero-detail
+    (deleteRequest)="deleteHero($event)"
+    [hero]="currentHero">
+</app-big-hero-detail>
+
+<div class="parent-div" (click)="onClickMe($event)" clickable>Click me
+  <div class="child-div">Click me too!</div>
+</div>
+
+<!-- Will save only once -->
+<div (click)="onSave()" clickable>
+  <button (click)="onSave($event)">Save, no propagation</button>
+</div>
+
+<!-- Will save twice -->
+<div (click)="onSave()" clickable>
+  <button (click)="onSave()">Save w/ propagation</button>
+</div>
+
+<a class="to-toc" href="#toc">top</a>
+
+<hr><h2 id="two-way">Two-way Binding</h2>
+<div id="two-way-1">
+  <app-sizer [(size)]="fontSizePx"></app-sizer>
+  <div [style.font-size.px]="fontSizePx">Resizable Text</div>
+  <label>FontSize (px): <input [(ngModel)]="fontSizePx"></label>
+</div>
+<br>
+<div id="two-way-2">
+  <h3>De-sugared two-way binding</h3>
+  <app-sizer [size]="fontSizePx" (sizeChange)="fontSizePx=$event"></app-sizer>
+</div>
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- Two way data binding unwound;
+    passing the changed display value to the event handler via \`$event\` -->
+<hr><h2 id="ngModel">NgModel (two-way) Binding</h2>
+
+<h3>Result: {{currentHero.name}}</h3>
+
+<input [value]="currentHero.name"
+       (input)="currentHero.name=$event.target.value" >
+without NgModel
+<br>
+<input [(ngModel)]="currentHero.name">
+[(ngModel)]
+<br>
+<input bindon-ngModel="currentHero.name">
+bindon-ngModel
+<br>
+<input
+  [ngModel]="currentHero.name"
+  (ngModelChange)="currentHero.name=$event">
+(ngModelChange)="...name=$event"
+<br>
+<input
+  [ngModel]="currentHero.name"
+  (ngModelChange)="setUppercaseName($event)">
+(ngModelChange)="setUppercaseName($event)"
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- NgClass binding -->
+<hr><h2 id="ngClass">NgClass Binding</h2>
+
+<p>currentClasses is {{currentClasses | json}}</p>
+<div [ngClass]="currentClasses">This div is initially saveable, unchanged, and special</div>
+
+<!-- not used in chapter -->
+<br>
+<label>saveable   <input type="checkbox" [(ngModel)]="canSave"></label> |
+<label>modified:  <input type="checkbox" [value]="!isUnchanged" (change)="isUnchanged=!isUnchanged"></label> |
+<label>special:   <input type="checkbox" [(ngModel)]="isSpecial"></label>
+<button (click)="setCurrentClasses()">Refresh currentClasses</button>
+<br><br>
+<div [ngClass]="currentClasses">
+  This div should be {{ canSave ? "": "not"}} saveable,
+                  {{ isUnchanged ? "unchanged" : "modified" }} and,
+                  {{ isSpecial ? "": "not"}} special after clicking "Refresh".</div>
+<br><br>
+
+<div [ngClass]="isSpecial ? 'special' : ''">This div is special</div>
+
+<div class="bad curly special">Bad curly special</div>
+<div [ngClass]="{'bad':false, 'curly':true, 'special':true}">Curly special</div>
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- NgStyle binding -->
+<hr><h2 id="ngStyle">NgStyle Binding</h2>
+
+<div [style.font-size]="isSpecial ? 'x-large' : 'smaller'" >
+  This div is x-large or smaller.
+</div>
+
+<h3>[ngStyle] binding to currentStyles - CSS property names</h3>
+<p>currentStyles is {{currentStyles | json}}</p>
+<div [ngStyle]="currentStyles">
+  This div is initially italic, normal weight, and extra large (24px).
+</div>
+
+<!-- not used in chapter -->
+<br>
+<label>italic: <input type="checkbox" [(ngModel)]="canSave"></label> |
+<label>normal: <input type="checkbox" [(ngModel)]="isUnchanged"></label> |
+<label>xlarge: <input type="checkbox" [(ngModel)]="isSpecial"></label>
+<button (click)="setCurrentStyles()">Refresh currentStyles</button>
+<br><br>
+<div [ngStyle]="currentStyles">
+  This div should be {{ canSave ? "italic": "plain"}},
+                  {{ isUnchanged ? "normal weight" : "bold" }} and,
+                  {{ isSpecial ? "extra large": "normal size"}} after clicking "Refresh".</div>
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- NgIf binding -->
+<hr><h2 id="ngIf">NgIf Binding</h2>
+
+<app-hero-detail *ngIf="isActive"></app-hero-detail>
+
+<div *ngIf="currentHero">Hello, {{currentHero.name}}</div>
+<div *ngIf="nullHero">Hello, {{nullHero.name}}</div>
+
+<!-- NgIf binding with template (no *) -->
+
+<ng-template [ngIf]="currentHero">Add {{currentHero.name}} with template</ng-template>
+
+<!-- Does not show because isActive is false! -->
+<div>Hero Detail removed from DOM (via template) because isActive is false</div>
+<ng-template [ngIf]="isActive">
+  <app-hero-detail></app-hero-detail>
+</ng-template>
+
+<!-- isSpecial is true -->
+<div [class.hidden]="!isSpecial">Show with class</div>
+<div [class.hidden]="isSpecial">Hide with class</div>
+
+<!-- HeroDetail is in the DOM but hidden -->
+<app-hero-detail [class.hidden]="isSpecial"></app-hero-detail>
+
+<div [style.display]="isSpecial ? 'block' : 'none'">Show with style</div>
+<div [style.display]="isSpecial ? 'none'  : 'block'">Hide with style</div>
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- NgFor binding -->
+<hr><h2 id="ngFor">NgFor Binding</h2>
+
+<div class="box">
+  <div *ngFor="let hero of heroes">{{hero.name}}</div>
+</div>
+<br>
+
+<div class="box">
+  <!-- *ngFor w/ hero-detail Component -->
+  <app-hero-detail *ngFor="let hero of heroes" [hero]="hero"></app-hero-detail>
+</div>
+
+<a class="to-toc" href="#toc">top</a>
+
+<h4 id="ngFor-index">*ngFor with index</h4>
+<p>with <i>semi-colon</i> separator</p>
+<div class="box">
+  <div *ngFor="let hero of heroes; let i=index">{{i + 1}} - {{hero.name}}</div>
+</div>
+
+<p>with <i>comma</i> separator</p>
+<div class="box">
+  <!-- Ex: "1 - Hercules" -->
+  <div *ngFor="let hero of heroes, let i=index">{{i + 1}} - {{hero.name}}</div>
+</div>
+
+<a class="to-toc" href="#toc">top</a>
+
+<h4 id="ngFor-trackBy">*ngFor trackBy</h4>
+<button (click)="resetHeroes()">Reset heroes</button>
+<button (click)="changeIds()">Change ids</button>
+<button (click)="clearTrackByCounts()">Clear counts</button>
+
+<p><i>without</i> trackBy</p>
+<div class="box">
+  <div #noTrackBy *ngFor="let hero of heroes">({{hero.id}}) {{hero.name}}</div>
+
+  <div id="noTrackByCnt" *ngIf="heroesNoTrackByCount" >
+    Hero DOM elements change #{{heroesNoTrackByCount}} without trackBy
+  </div>
+</div>
+
+<p>with trackBy</p>
+<div class="box">
+  <div #withTrackBy *ngFor="let hero of heroes; trackBy: trackByHeroes">({{hero.id}}) {{hero.name}}</div>
+
+  <div id="withTrackByCnt" *ngIf="heroesWithTrackByCount">
+    Hero DOM elements change #{{heroesWithTrackByCount}} with trackBy
+  </div>
+</div>
+
+<br><br><br>
+
+<p>with trackBy and <i>semi-colon</i> separator</p>
+<div class="box">
+  <div *ngFor="let hero of heroes; trackBy: trackByHeroes">
+    ({{hero.id}}) {{hero.name}}
+  </div>
+</div>
+
+<p>with trackBy and <i>comma</i> separator</p>
+<div class="box">
+  <div *ngFor="let hero of heroes, trackBy: trackByHeroes">({{hero.id}}) {{hero.name}}</div>
+</div>
+
+<p>with trackBy and <i>space</i> separator</p>
+<div class="box">
+  <div *ngFor="let hero of heroes trackBy: trackByHeroes">({{hero.id}}) {{hero.name}}</div>
+</div>
+
+<p>with <i>generic</i> trackById function</p>
+<div class="box">
+  <div *ngFor="let hero of heroes, trackBy: trackById">({{hero.id}}) {{hero.name}}</div>
+</div>
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- NgSwitch binding -->
+<hr><h2 id="ngSwitch">NgSwitch Binding</h2>
+
+<p>Pick your favorite hero</p>
+<div>
+  <label *ngFor="let h of heroes">
+    <input type="radio" name="heroes" [(ngModel)]="currentHero" [value]="h">{{h.name}}
+  </label>
+</div>
+
+<div [ngSwitch]="currentHero.emotion">
+  <app-happy-hero    *ngSwitchCase="'happy'"    [hero]="currentHero"></app-happy-hero>
+  <app-sad-hero      *ngSwitchCase="'sad'"      [hero]="currentHero"></app-sad-hero>
+  <app-confused-hero *ngSwitchCase="'confused'" [hero]="currentHero"></app-confused-hero>
+  <div *ngSwitchCase="'confused'">Are you as confused as {{currentHero.name}}?</div>
+  <app-unknown-hero  *ngSwitchDefault           [hero]="currentHero"></app-unknown-hero>
+</div>
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- template reference variable -->
+<hr><h2 id="ref-vars">Template reference variables</h2>
+
+<input #phone placeholder="phone number">
+
+<!-- lots of other elements -->
+
+<!-- phone refers to the input element; pass its \`value\` to an event handler -->
+<button (click)="callPhone(phone.value)">Call</button>
+
+<input ref-fax placeholder="fax number">
+<button (click)="callFax(fax.value)">Fax</button>
+
+<!-- btn refers to the button element; show its disabled state -->
+<button #btn disabled [innerHTML]="'disabled by attribute: '+btn.disabled"></button>
+
+<h4>Example Form</h4>
+<app-hero-form [hero]="currentHero"></app-hero-form>
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- inputs and output -->
+<hr><h2 id="inputs-and-outputs">Inputs and Outputs</h2>
+
+<img [src]="iconUrl"/>
+<button (click)="onSave()">Save</button>
+
+<app-hero-detail [hero]="currentHero" (deleteRequest)="deleteHero($event)">
+</app-hero-detail>
+
+<div (myClick)="clickMessage2=$event" clickable>myClick2</div>
+{{clickMessage2}}
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- Pipes -->
+<hr><h2 id="pipes">Pipes</h2>
+
+<div>Title through uppercase pipe: {{title | uppercase}}</div>
+
+<!-- Pipe chaining: convert title to uppercase, then to lowercase -->
+<div>
+  Title through a pipe chain:
+  {{title | uppercase | lowercase}}
+</div>
+
+<!-- pipe with configuration argument => "February 25, 1970" -->
+<div>Birthdate: {{currentHero?.birthdate | date:'longDate'}}</div>
+
+<div>{{currentHero | json}}</div>
+
+<div>Birthdate: {{(currentHero?.birthdate | date:'longDate') | uppercase}}</div>
+
+<div>
+  <!-- pipe price to USD and display the $ symbol -->
+  <label>Price: </label>{{product.price | currency:'USD':true}}
+</div>
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- Null values and the safe navigation operator -->
+<hr><h2 id="safe-navigation-operator">Safe navigation operator <i>?.</i></h2>
+
+<div>
+  The title is {{title}}
+</div>
+
+<div>
+  The current hero's name is {{currentHero?.name}}
+</div>
+
+<div>
+  The current hero's name is {{currentHero.name}}
+</div>
+
+
+<!--
+The null hero's name is {{nullHero.name}}
+
+See console log:
+  TypeError: Cannot read property 'name' of null in [null]
+-->
+
+<!--No hero, div not displayed, no error -->
+<div *ngIf="nullHero">The null hero's name is {{nullHero.name}}</div>
+
+<div>
+The null hero's name is {{nullHero && nullHero.name}}
+</div>
+
+<div>
+  <!-- No hero, no problem! -->
+  The null hero's name is {{nullHero?.name}}
+</div>
+
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- non-null assertion operator -->
+<hr><h2 id="non-null-assertion-operator">Non-null assertion operator <i>!.</i></h2>
+
+<div>
+  <!--No hero, no text -->
+  <div *ngIf="hero">
+    The hero's name is {{hero!.name}}
+  </div>
+</div>
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- non-null assertion operator -->
+<hr><h2 id="any-type-cast-function">$any type cast function <i>$any( )</i>.</h2>
+
+<div>
+  <!-- Accessing an undeclared member -->
+  <div>
+    The hero's marker is {{$any(hero).marker}}
+  </div>
+</div>
+
+<div>
+  <!-- Accessing an undeclared member -->
+  <div>
+    Undeclared members is {{$any(this).member}}
+  </div>
+</div>
+
+<a class="to-toc" href="#toc">top</a>
+
+<!-- TODO: discuss this in the Style binding section -->
+<!-- enums in bindings -->
+<hr><h2 id="enums">Enums in binding</h2>
+
+<p>
+  The name of the Color.Red enum is {{Color[Color.Red]}}.<br>
+  The current color is {{Color[color]}} and its number is {{color}}.<br>
+  <button [style.color]="Color[color]" (click)="colorToggle()">Enum Toggle</button>
+</p>
+
+<a class="to-toc" href="#toc">top</a>
+
+
+<!-- 
+Copyright 2017-2018 Google Inc. All Rights Reserved.
+Use of this source code is governed by an MIT-style license that
+can be found in the LICENSE file at http://angular.io/license
+-->
+
+<div id="heroForm">
+  <form (ngSubmit)="onSubmit(heroForm)" #heroForm="ngForm">
+    <div class="form-group">
+      <label for="name">Name
+        <input class="form-control" name="name" required [(ngModel)]="hero.name">
+      </label>
+    </div>
+    <button type="submit" [disabled]="!heroForm.form.valid">Submit</button>
+  </form>
+  <div [hidden]="!heroForm.form.valid">
+    {{submitMessage}}
+  </div>
+</div>
+
+
+<!-- 
+Copyright 2017-2018 Google Inc. All Rights Reserved.
+Use of this source code is governed by an MIT-style license that
+can be found in the LICENSE file at http://angular.io/license
+-->
+~
+<!--
+  copied from: https://stackblitz.com/angular/ymdjlgmlavo
+-->
+
+<a
+  id="toc"
+></a>
+<h1>
+  Template
+  Syntax
+</h1>
+<a
+  href="#interpolation"
+  >Interpolation</a
+><br />
+<a
+  href="#expression-context"
+  >Expression
+  context</a
+><br />
+<a
+  href="#statement-context"
+  >Statement
+  context</a
+><br />
+<a
+  href="#mental-model"
+  >Mental
+  Model</a
+><br />
+<a
+  href="#buttons"
+  >Buttons</a
+><br />
+<a
+  href="#prop-vs-attrib"
+  >Properties
+  vs.
+  Attributes</a
+><br />
+<br />
+<a
+  href="#property-binding"
+  >Property
+  Binding</a
+><br />
+<div
+  style="margin-left:8px"
+>
+  <a
+    href="#attribute-binding"
+    >Attribute
+    Binding</a
+  ><br />
+  <a
+    href="#class-binding"
+    >Class
+    Binding</a
+  ><br />
+  <a
+    href="#style-binding"
+    >Style
+    Binding</a
+  ><br />
+</div>
+<br />
+<a
+  href="#event-binding"
+  >Event
+  Binding</a
+><br />
+<a
+  href="#two-way"
+  >Two-way
+  Binding</a
+><br />
+<br />
+<div>
+  Directives
+</div>
+<div
+  style="margin-left:8px"
+>
+  <a
+    href="#ngModel"
+    >NgModel
+    (two-way)
+    Binding</a
+  ><br />
+  <a
+    href="#ngClass"
+    >NgClass
+    Binding</a
+  ><br />
+  <a
+    href="#ngStyle"
+    >NgStyle
+    Binding</a
+  ><br />
+  <a
+    href="#ngIf"
+    >NgIf</a
+  ><br />
+  <a
+    href="#ngFor"
+    >NgFor</a
+  ><br />
+  <div
+    style="margin-left:8px"
+  >
+    <a
+      href="#ngFor-index"
+      >NgFor
+      with
+      index</a
+    ><br />
+    <a
+      href="#ngFor-trackBy"
+      >NgFor
+      with
+      trackBy</a
+    ><br />
+  </div>
+  <a
+    href="#ngSwitch"
+    >NgSwitch</a
+  ><br />
+</div>
+<br />
+<a
+  href="#ref-vars"
+  >Template
+  reference
+  variables</a
+><br />
+<a
+  href="#inputs-and-outputs"
+  >Inputs
+  and
+  outputs</a
+><br />
+<a
+  href="#pipes"
+  >Pipes</a
+><br />
+<a
+  href="#safe-navigation-operator"
+  >Safe
+  navigation
+  operator
+  <i
+    >?.</i
+  ></a
+><br />
+<a
+  href="#non-null-assertion-operator"
+  >Non-null
+  assertion
+  operator
+  <i
+    >!.</i
+  ></a
+><br />
+<a
+  href="#enums"
+  >Enums</a
+><br />
+
+<!--
+  Interpolation and expressions
+-->
+<hr />
+<h2
+  id="interpolation"
+>
+  Interpolation
+</h2>
+
+<p>
+  My
+  current
+  hero
+  is
+  {{
+    currentHero.name
+  }}
+</p>
+
+<h3>
+  {{
+    title
+  }}
+  <img
+    src="{{heroImageUrl}}"
+    style="height:30px"
+  />
+</h3>
+
+<!--
+  "The sum of 1 + 1 is 2"
+-->
+<p>
+  The
+  sum
+  of
+  1
+  +
+  1
+  is
+  {{
+    1 +
+      1
+  }}
+</p>
+
+<!--
+  "The sum of 1 + 1 is not 4"
+-->
+<p>
+  The
+  sum
+  of
+  1
+  +
+  1
+  is
+  not
+  {{
+    1 +
+      1 +
+      getVal()
+  }}
+</p>
+
+<a
+  class="to-toc"
+  href="#toc"
+  >top</a
+>
+
+<hr />
+<h2
+  id="expression-context"
+>
+  Expression
+  context
+</h2>
+
+<p>
+  Component
+  expression
+  context
+  (&#123;&#123;title&#125;&#125;,
+  [hidden]="isUnchanged")
+</p>
+<div
+  class="context"
+>
+  {{
+    title
+  }}
+  <span
+    [hidden]="
+      isUnchanged
+    "
+    >changed</span
+  >
+</div>
+
+<p>
+  Template
+  input
+  variable
+  expression
+  context
+  (let
+  hero)
+</p>
+<!--
+  template hides the following; plenty of examples later
+-->
+<ng-template>
+  <div
+    *ngFor="
+      let hero of heroes
+    "
+  >
+    {{
+      hero.name
+    }}
+  </div>
+</ng-template>
+
+<p>
+  Template
+  reference
+  variable
+  expression
+  context
+  (#heroInput)
+</p>
+<div
+  (keyup)="
+    (0)
+  "
+  class="context"
+>
+  Type
+  something:
+  <input
+    #heroInput
+  />
+  {{
+    heroInput.value
+  }}
+</div>
+
+<a
+  class="to-toc"
+  href="#toc"
+  >top</a
+>
+
+<hr />
+<h2
+  id="statement-context"
+>
+  Statement
+  context
+</h2>
+
+<p>
+  Component
+  statement
+  context
+  (
+  (click)="onSave()
+  )
+</p>
+<div
+  class="context"
+>
+  <button
+    (click)="
+      deleteHero()
+    "
+  >
+    Delete
+    hero
+  </button>
+</div>
+
+<p>
+  Template
+  $event
+  statement
+  context
+</p>
+<div
+  class="context"
+>
+  <button
+    (click)="
+      onSave(
+        $event
+      )
+    "
+  >
+    Save
+  </button>
+</div>
+
+<p>
+  Template
+  input
+  variable
+  statement
+  context
+  (let
+  hero)
+</p>
+<!--
+  template hides the following; plenty of examples later
+-->
+<div
+  class="context"
+>
+  <button
+    *ngFor="
+      let hero of heroes
+    "
+    (click)="
+      deleteHero(
+        hero
+      )
+    "
+  >
+    {{
+      hero.name
+    }}
+  </button>
+</div>
+
+<p>
+  Template
+  reference
+  variable
+  statement
+  context
+  (#heroForm)
+</p>
+<div
+  class="context"
+>
+  <form
+    #heroForm
+    (ngSubmit)="
+      onSubmit(
+        heroForm
+      )
+    "
+  >
+    ...
+  </form>
+</div>
+
+<a
+  class="to-toc"
+  href="#toc"
+  >top</a
+>
+
+<!--
+  New Mental Model
+-->
+<hr />
+<h2
+  id="mental-model"
+>
+  New
+  Mental
+  Model
+</h2>
+
+<!--
+  <img src="http://www.wpclipart.com/cartoon/people/hero/hero_silhoutte_T.png">
+-->
+<!--
+  Public Domain terms of use: http://www.wpclipart.com/terms.html
+-->
+<div
+  class="special"
+>
+  Mental
+  Model
+</div>
+<img
+  src="assets/images/hero.png"
+/>
+<button
+  disabled
+>
+  Save
+</button>
+<br /><br />
+
+<div>
+  <!--
+    Normal HTML
+  -->
+  <div
+    class="special"
+  >
+    Mental
+    Model
+  </div>
+  <!--
+    Wow! A new element!
+  -->
+  <app-hero-detail></app-hero-detail>
+</div>
+<br /><br />
+
+<div>
+  <!--
+    Bind button disabled state to \`isUnchanged\` property
+  -->
+  <button
+    [disabled]="
+      isUnchanged
+    "
+  >
+    Save
+  </button>
+</div>
+<br /><br />
+
+<div>
+  <img
+    [src]="
+      heroImageUrl
+    "
+  />
+  <app-hero-detail
+    [hero]="
+      currentHero
+    "
+  ></app-hero-detail>
+  <div
+    [ngClass]="{
+      special: isSpecial
+    }"
+  ></div>
+</div>
+<br /><br />
+
+<button
+  (click)="
+    onSave()
+  "
+>
+  Save
+</button>
+<app-hero-detail
+  (deleteRequest)="
+    deleteHero()
+  "
+></app-hero-detail>
+<div
+  (myClick)="
+    clicked = $event
+  "
+  clickable
+>
+  click
+  me
+</div>
+{{
+  clicked
+}}
+<br /><br />
+
+<div>
+  Hero
+  Name:
+  <input
+    [(ngModel)]="
+      name
+    "
+  />
+  {{
+    name
+  }}
+</div>
+<br /><br />
+
+<button
+  [attr.aria-label]="
+    help
+  "
+>
+  help
+</button>
+<br /><br />
+
+<div
+  [class.special]="
+    isSpecial
+  "
+>
+  Special
+</div>
+<br /><br />
+
+<button
+  [style.color]="
+    isSpecial
+      ? 'red'
+      : 'green'
+  "
+>
+  button
+</button>
+
+<a
+  class="to-toc"
+  href="#toc"
+  >top</a
+>
+
+<!--
+  property vs. attribute
+-->
+<hr />
+<h2
+  id="prop-vs-attrib"
+>
+  Property
+  vs.
+  Attribute
+  (img
+  examples)
+</h2>
+<!--
+  examine the following <img> tag in the browser tools
+-->
+<img
+  src="images/ng-logo.png"
+  [src]="
+    heroImageUrl
+  "
+/>
+
+<br /><br />
+
+<img
+  [src]="
+    iconUrl
+  "
+/>
+<img
+  bind-src="
+    heroImageUrl
+  "
+/>
+<img
+  [attr.src]="
+    villainImageUrl
+  "
+/>
+
+<a
+  class="to-toc"
+  href="#toc"
+  >top</a
+>
+
+<!--
+  buttons
+-->
+<hr />
+<h2
+  id="buttons"
+>
+  Buttons
+</h2>
+
+<button>
+  Enabled
+  (but
+  does
+  nothing)
+</button>
+<button
+  disabled
+>
+  Disabled
+</button>
+<button
+  disabled="false"
+>
+  Still
+  disabled
+</button>
+<br /><br />
+<button
+  disabled
+>
+  disabled
+  by
+  attribute
+</button>
+<button
+  [disabled]="
+    isUnchanged
+  "
+>
+  disabled
+  by
+  property
+  binding
+</button>
+<br /><br />
+<button
+  bind-disabled="
+    isUnchanged
+  "
+  on-click="
+    onSave(
+      $event
+    )
+  "
+>
+  Disabled
+  Cancel
+</button>
+<button
+  [disabled]="
+    !canSave
+  "
+  (click)="
+    onSave(
+      $event
+    )
+  "
+>
+  Enabled
+  Save
+</button>
+
+<a
+  class="to-toc"
+  href="#toc"
+  >top</a
+>
+
+<!--
+  property binding
+-->
+<hr />
+<h2
+  id="property-binding"
+>
+  Property
+  Binding
+</h2>
+
+<img
+  [src]="
+    heroImageUrl
+  "
+/>
+<button
+  [disabled]="
+    isUnchanged
+  "
+>
+  Cancel
+  is
+  disabled
+</button>
+<div
+  [ngClass]="
+    classes
+  "
+>
+  [ngClass]
+  binding
+  to
+  the
+  classes
+  property
+</div>
+<app-hero-detail
+  [hero]="
+    currentHero
+  "
+></app-hero-detail>
+<img
+  bind-src="
+    heroImageUrl
+  "
+/>
+
+<!--
+  ERROR: HeroDetailComponent.hero expects a
+  Hero object, not the string "currentHero"
+-->
+<div
+  *ngIf="
+    false
+  "
+>
+  <app-hero-detail
+    hero="currentHero"
+  ></app-hero-detail>
+</div>
+<app-hero-detail
+  prefix="You are my"
+  [hero]="
+    currentHero
+  "
+></app-hero-detail>
+
+<p>
+  <img
+    src="{{heroImageUrl}}"
+  />
+  is
+  the
+  <i
+    >interpolated</i
+  >
+  image.
+</p>
+<p>
+  <img
+    [src]="
+      heroImageUrl
+    "
+  />
+  is
+  the
+  <i
+    >property
+    bound</i
+  >
+  image.
+</p>
+
+<p>
+  <span
+    >"{{
+      title
+    }}"
+    is
+    the
+    <i
+      >interpolated</i
+    >
+    title.</span
+  >
+</p>
+<p>
+  "<span
+    [innerHTML]="
+      title
+    "
+  ></span
+  >"
+  is
+  the
+  <i
+    >property
+    bound</i
+  >
+  title.
+</p>
+
+<!--
+  Angular generates warnings for these two lines as it sanitizes them
+  WARNING: sanitizing HTML stripped some content (see http://g.co/ng/security#xss).
+-->
+<p>
+  <span
+    >"{{
+      evilTitle
+    }}"
+    is
+    the
+    <i
+      >interpolated</i
+    >
+    evil
+    title.</span
+  >
+</p>
+<p>
+  "<span
+    [innerHTML]="
+      evilTitle
+    "
+  ></span
+  >"
+  is
+  the
+  <i
+    >property
+    bound</i
+  >
+  evil
+  title.
+</p>
+
+<a
+  class="to-toc"
+  href="#toc"
+  >top</a
+>
+
+<!--
+  attribute binding
+-->
+<hr />
+<h2
+  id="attribute-binding"
+>
+  Attribute
+  Binding
+</h2>
+
+<!--
+  create and set a colspan attribute
+-->
+<table
+  border="1"
+>
+  <!--
+    expression calculates colspan=2
+  -->
+  <tr>
+    <td
+      [attr.colspan]="
+        1 +
+        1
+      "
+    >
+      One-Two
+    </td>
+  </tr>
+
+  <!--
+    ERROR: There is no \`colspan\` property to set!
+    <tr><td colspan="{{1 + 1}}">Three-Four</td></tr>
+  -->
+
+  <tr>
+    <td>
+      Five
+    </td>
+    <td>
+      Six
+    </td>
+  </tr>
+</table>
+
+<br />
+<!--
+  create and set an aria attribute for assistive technology
+-->
+<button
+  [attr.aria-label]="
+    actionName
+  "
+>
+  {{
+    actionName
+  }}
+  with
+  Aria
+</button>
+<br /><br />
+
+<!--
+  The following effects are not discussed in the chapter
+-->
+<div>
+  <!--
+    any use of [attr.disabled] creates the disabled attribute
+  -->
+  <button
+    [attr.disabled]="
+      isUnchanged
+    "
+  >
+    Disabled
+  </button>
+
+  <button
+    [attr.disabled]="
+      !isUnchanged
+    "
+  >
+    Disabled
+    as
+    well
+  </button>
+
+  <!--
+    we'd have to remove it with property binding
+  -->
+  <button
+    disabled
+    [disabled]="
+      false
+    "
+  >
+    Enabled
+    (but
+    inert)
+  </button>
+</div>
+
+<a
+  class="to-toc"
+  href="#toc"
+  >top</a
+>
+
+<!--
+  class binding
+-->
+<hr />
+<h2
+  id="class-binding"
+>
+  Class
+  Binding
+</h2>
+
+<!--
+  standard class attribute setting
+-->
+<div
+  class="bad curly special"
+>
+  Bad
+  curly
+  special
+</div>
+
+<!--
+  reset/override all class names with a binding
+-->
+<div
+  class="bad curly special"
+  [class]="
+    badCurly
+  "
+>
+  Bad
+  curly
+</div>
+
+<!--
+  toggle the "special" class on/off with a property
+-->
+<div
+  [class.special]="
+    isSpecial
+  "
+>
+  The
+  class
+  binding
+  is
+  special
+</div>
+
+<!--
+  binding to \`class.special\` trumps the class attribute
+-->
+<div
+  class="special"
+  [class.special]="
+    !isSpecial
+  "
+>
+  This
+  one
+  is
+  not
+  so
+  special
+</div>
+
+<div
+  bind-class.special="
+    isSpecial
+  "
+>
+  This
+  class
+  binding
+  is
+  special
+  too
+</div>
+
+<a
+  class="to-toc"
+  href="#toc"
+  >top</a
+>
+
+<!--
+  style binding
+-->
+<hr />
+<h2
+  id="style-binding"
+>
+  Style
+  Binding
+</h2>
+
+<button
+  [style.color]="
+    isSpecial
+      ? 'red'
+      : 'green'
+  "
+>
+  Red
+</button>
+<button
+  [style.background-color]="
+    canSave
+      ? 'cyan'
+      : 'grey'
+  "
+>
+  Save
+</button>
+
+<button
+  [style.font-size.em]="
+    isSpecial
+      ? 3
+      : 1
+  "
+>
+  Big
+</button>
+<button
+  [style.font-size.%]="
+    !isSpecial
+      ? 150
+      : 50
+  "
+>
+  Small
+</button>
+
+<a
+  class="to-toc"
+  href="#toc"
+  >top</a
+>
+
+<!--
+  event binding
+-->
+<hr />
+<h2
+  id="event-binding"
+>
+  Event
+  Binding
+</h2>
+
+<button
+  (click)="
+    onSave()
+  "
+>
+  Save
+</button>
+
+<button
+  on-click="
+    onSave()
+  "
+>
+  On
+  Save
+</button>
+
+<div>
+  <!--
+    \`myClick\` is an event on the custom \`ClickDirective\`
+  -->
+  <div
+    (myClick)="
+      clickMessage = $event
+    "
+    clickable
+  >
+    click
+    with
+    myClick
+  </div>
+  {{
+    clickMessage
+  }}
+</div>
+
+<!--
+  binding to a nested component
+-->
+<app-hero-detail
+  (deleteRequest)="
+    deleteHero(
+      $event
+    )
+  "
+  [hero]="
+    currentHero
+  "
+></app-hero-detail>
+<br />
+
+<app-big-hero-detail
+  (deleteRequest)="
+    deleteHero(
+      $event
+    )
+  "
+  [hero]="
+    currentHero
+  "
+>
+</app-big-hero-detail>
+
+<div
+  class="parent-div"
+  (click)="
+    onClickMe(
+      $event
+    )
+  "
+  clickable
+>
+  Click
+  me
+  <div
+    class="child-div"
+  >
+    Click
+    me
+    too!
+  </div>
+</div>
+
+<!--
+  Will save only once
+-->
+<div
+  (click)="
+    onSave()
+  "
+  clickable
+>
+  <button
+    (click)="
+      onSave(
+        $event
+      )
+    "
+  >
+    Save,
+    no
+    propagation
+  </button>
+</div>
+
+<!--
+  Will save twice
+-->
+<div
+  (click)="
+    onSave()
+  "
+  clickable
+>
+  <button
+    (click)="
+      onSave()
+    "
+  >
+    Save
+    w/
+    propagation
+  </button>
+</div>
+
+<a
+  class="to-toc"
+  href="#toc"
+  >top</a
+>
+
+<hr />
+<h2
+  id="two-way"
+>
+  Two-way
+  Binding
+</h2>
+<div
+  id="two-way-1"
+>
+  <app-sizer
+    [(size)]="
+      fontSizePx
+    "
+  ></app-sizer>
+  <div
+    [style.font-size.px]="
+      fontSizePx
+    "
+  >
+    Resizable
+    Text
+  </div>
+  <label
+    >FontSize
+    (px):
+    <input
+      [(ngModel)]="
+        fontSizePx
+      "
+  /></label>
+</div>
+<br />
+<div
+  id="two-way-2"
+>
+  <h3>
+    De-sugared
+    two-way
+    binding
+  </h3>
+  <app-sizer
+    [size]="
+      fontSizePx
+    "
+    (sizeChange)="
+      fontSizePx = $event
+    "
+  ></app-sizer>
+</div>
+
+<a
+  class="to-toc"
+  href="#toc"
+  >top</a
+>
+
+<!--
+  Two way data binding unwound;
+  passing the changed display value to the event handler via \`$event\`
+-->
+<hr />
+<h2
+  id="ngModel"
+>
+  NgModel
+  (two-way)
+  Binding
+</h2>
+
+<h3>
+  Result:
+  {{
+    currentHero.name
+  }}
+</h3>
+
+<input
+  [value]="
+    currentHero.name
+  "
+  (input)="
+    currentHero.name =
+      $event.target.value
+  "
+/>
+without
+NgModel
+<br />
+<input
+  [(ngModel)]="
+    currentHero.name
+  "
+/>
+[(ngModel)]
+<br />
+<input
+  bindon-ngModel="
+    currentHero.name
+  "
+/>
+bindon-ngModel
+<br />
+<input
+  [ngModel]="
+    currentHero.name
+  "
+  (ngModelChange)="
+    currentHero.name = $event
+  "
+/>
+(ngModelChange)="...name=$event"
+<br />
+<input
+  [ngModel]="
+    currentHero.name
+  "
+  (ngModelChange)="
+    setUppercaseName(
+      $event
+    )
+  "
+/>
+(ngModelChange)="setUppercaseName($event)"
+
+<a
+  class="to-toc"
+  href="#toc"
+  >top</a
+>
+
+<!--
+  NgClass binding
+-->
+<hr />
+<h2
+  id="ngClass"
+>
+  NgClass
+  Binding
+</h2>
+
+<p>
+  currentClasses
+  is
+  {{
+    currentClasses
+      | json
+  }}
+</p>
+<div
+  [ngClass]="
+    currentClasses
+  "
+>
+  This
+  div
+  is
+  initially
+  saveable,
+  unchanged,
+  and
+  special
+</div>
+
+<!--
+  not used in chapter
+-->
+<br />
+<label
+  >saveable
+  <input
+    type="checkbox"
+    [(ngModel)]="
+      canSave
+    "
+/></label>
+|
+<label
+  >modified:
+  <input
+    type="checkbox"
+    [value]="
+      !isUnchanged
+    "
+    (change)="
+      isUnchanged = !isUnchanged
+    "
+/></label>
+|
+<label
+  >special:
+  <input
+    type="checkbox"
+    [(ngModel)]="
+      isSpecial
+    "
+/></label>
+<button
+  (click)="
+    setCurrentClasses()
+  "
+>
+  Refresh
+  currentClasses
+</button>
+<br /><br />
+<div
+  [ngClass]="
+    currentClasses
+  "
+>
+  This
+  div
+  should
+  be
+  {{
+    canSave
+      ? ""
+      : "not"
+  }}
+  saveable,
+  {{
+    isUnchanged
+      ? "unchanged"
+      : "modified"
+  }}
+  and,
+  {{
+    isSpecial
+      ? ""
+      : "not"
+  }}
+  special
+  after
+  clicking
+  "Refresh".
+</div>
+<br /><br />
+
+<div
+  [ngClass]="
+    isSpecial
+      ? 'special'
+      : ''
+  "
+>
+  This
+  div
+  is
+  special
+</div>
+
+<div
+  class="bad curly special"
+>
+  Bad
+  curly
+  special
+</div>
+<div
+  [ngClass]="{
+    bad: false,
+    curly: true,
+    special: true
+  }"
+>
+  Curly
+  special
+</div>
+
+<a
+  class="to-toc"
+  href="#toc"
+  >top</a
+>
+
+<!--
+  NgStyle binding
+-->
+<hr />
+<h2
+  id="ngStyle"
+>
+  NgStyle
+  Binding
+</h2>
+
+<div
+  [style.font-size]="
+    isSpecial
+      ? 'x-large'
+      : 'smaller'
+  "
+>
+  This
+  div
+  is
+  x-large
+  or
+  smaller.
+</div>
+
+<h3>
+  [ngStyle]
+  binding
+  to
+  currentStyles
+  -
+  CSS
+  property
+  names
+</h3>
+<p>
+  currentStyles
+  is
+  {{
+    currentStyles
+      | json
+  }}
+</p>
+<div
+  [ngStyle]="
+    currentStyles
+  "
+>
+  This
+  div
+  is
+  initially
+  italic,
+  normal
+  weight,
+  and
+  extra
+  large
+  (24px).
+</div>
+
+<!--
+  not used in chapter
+-->
+<br />
+<label
+  >italic:
+  <input
+    type="checkbox"
+    [(ngModel)]="
+      canSave
+    "
+/></label>
+|
+<label
+  >normal:
+  <input
+    type="checkbox"
+    [(ngModel)]="
+      isUnchanged
+    "
+/></label>
+|
+<label
+  >xlarge:
+  <input
+    type="checkbox"
+    [(ngModel)]="
+      isSpecial
+    "
+/></label>
+<button
+  (click)="
+    setCurrentStyles()
+  "
+>
+  Refresh
+  currentStyles
+</button>
+<br /><br />
+<div
+  [ngStyle]="
+    currentStyles
+  "
+>
+  This
+  div
+  should
+  be
+  {{
+    canSave
+      ? "italic"
+      : "plain"
+  }},
+  {{
+    isUnchanged
+      ? "normal weight"
+      : "bold"
+  }}
+  and,
+  {{
+    isSpecial
+      ? "extra large"
+      : "normal size"
+  }}
+  after
+  clicking
+  "Refresh".
+</div>
+
+<a
+  class="to-toc"
+  href="#toc"
+  >top</a
+>
+
+<!--
+  NgIf binding
+-->
+<hr />
+<h2
+  id="ngIf"
+>
+  NgIf
+  Binding
+</h2>
+
+<app-hero-detail
+  *ngIf="
+    isActive
+  "
+></app-hero-detail>
+
+<div
+  *ngIf="
+    currentHero
+  "
+>
+  Hello,
+  {{
+    currentHero.name
+  }}
+</div>
+<div
+  *ngIf="
+    nullHero
+  "
+>
+  Hello,
+  {{
+    nullHero.name
+  }}
+</div>
+
+<!--
+  NgIf binding with template (no *)
+-->
+
+<ng-template
+  [ngIf]="
+    currentHero
+  "
+  >Add
+  {{
+    currentHero.name
+  }}
+  with
+  template</ng-template
+>
+
+<!--
+  Does not show because isActive is false!
+-->
+<div>
+  Hero
+  Detail
+  removed
+  from
+  DOM
+  (via
+  template)
+  because
+  isActive
+  is
+  false
+</div>
+<ng-template
+  [ngIf]="
+    isActive
+  "
+>
+  <app-hero-detail></app-hero-detail>
+</ng-template>
+
+<!--
+  isSpecial is true
+-->
+<div
+  [class.hidden]="
+    !isSpecial
+  "
+>
+  Show
+  with
+  class
+</div>
+<div
+  [class.hidden]="
+    isSpecial
+  "
+>
+  Hide
+  with
+  class
+</div>
+
+<!--
+  HeroDetail is in the DOM but hidden
+-->
+<app-hero-detail
+  [class.hidden]="
+    isSpecial
+  "
+></app-hero-detail>
+
+<div
+  [style.display]="
+    isSpecial
+      ? 'block'
+      : 'none'
+  "
+>
+  Show
+  with
+  style
+</div>
+<div
+  [style.display]="
+    isSpecial
+      ? 'none'
+      : 'block'
+  "
+>
+  Hide
+  with
+  style
+</div>
+
+<a
+  class="to-toc"
+  href="#toc"
+  >top</a
+>
+
+<!--
+  NgFor binding
+-->
+<hr />
+<h2
+  id="ngFor"
+>
+  NgFor
+  Binding
+</h2>
+
+<div
+  class="box"
+>
+  <div
+    *ngFor="
+      let hero of heroes
+    "
+  >
+    {{
+      hero.name
+    }}
+  </div>
+</div>
+<br />
+
+<div
+  class="box"
+>
+  <!--
+    *ngFor w/ hero-detail Component
+  -->
+  <app-hero-detail
+    *ngFor="
+      let hero of heroes
+    "
+    [hero]="
+      hero
+    "
+  ></app-hero-detail>
+</div>
+
+<a
+  class="to-toc"
+  href="#toc"
+  >top</a
+>
+
+<h4
+  id="ngFor-index"
+>
+  *ngFor
+  with
+  index
+</h4>
+<p>
+  with
+  <i
+    >semi-colon</i
+  >
+  separator
+</p>
+<div
+  class="box"
+>
+  <div
+    *ngFor="
+      let hero of heroes;
+      let i = index
+    "
+  >
+    {{
+      i +
+        1
+    }}
+    -
+    {{
+      hero.name
+    }}
+  </div>
+</div>
+
+<p>
+  with
+  <i
+    >comma</i
+  >
+  separator
+</p>
+<div
+  class="box"
+>
+  <!--
+    Ex: "1 - Hercules"
+  -->
+  <div
+    *ngFor="
+      let hero of heroes;
+      let i = index
+    "
+  >
+    {{
+      i +
+        1
+    }}
+    -
+    {{
+      hero.name
+    }}
+  </div>
+</div>
+
+<a
+  class="to-toc"
+  href="#toc"
+  >top</a
+>
+
+<h4
+  id="ngFor-trackBy"
+>
+  *ngFor
+  trackBy
+</h4>
+<button
+  (click)="
+    resetHeroes()
+  "
+>
+  Reset
+  heroes
+</button>
+<button
+  (click)="
+    changeIds()
+  "
+>
+  Change
+  ids
+</button>
+<button
+  (click)="
+    clearTrackByCounts()
+  "
+>
+  Clear
+  counts
+</button>
+
+<p>
+  <i
+    >without</i
+  >
+  trackBy
+</p>
+<div
+  class="box"
+>
+  <div
+    #noTrackBy
+    *ngFor="
+      let hero of heroes
+    "
+  >
+    ({{
+      hero.id
+    }})
+    {{
+      hero.name
+    }}
+  </div>
+
+  <div
+    id="noTrackByCnt"
+    *ngIf="
+      heroesNoTrackByCount
+    "
+  >
+    Hero
+    DOM
+    elements
+    change
+    #{{
+      heroesNoTrackByCount
+    }}
+    without
+    trackBy
+  </div>
+</div>
+
+<p>
+  with
+  trackBy
+</p>
+<div
+  class="box"
+>
+  <div
+    #withTrackBy
+    *ngFor="
+      let hero of heroes;
+      trackBy: trackByHeroes
+    "
+  >
+    ({{
+      hero.id
+    }})
+    {{
+      hero.name
+    }}
+  </div>
+
+  <div
+    id="withTrackByCnt"
+    *ngIf="
+      heroesWithTrackByCount
+    "
+  >
+    Hero
+    DOM
+    elements
+    change
+    #{{
+      heroesWithTrackByCount
+    }}
+    with
+    trackBy
+  </div>
+</div>
+
+<br /><br /><br />
+
+<p>
+  with
+  trackBy
+  and
+  <i
+    >semi-colon</i
+  >
+  separator
+</p>
+<div
+  class="box"
+>
+  <div
+    *ngFor="
+      let hero of heroes;
+      trackBy: trackByHeroes
+    "
+  >
+    ({{
+      hero.id
+    }})
+    {{
+      hero.name
+    }}
+  </div>
+</div>
+
+<p>
+  with
+  trackBy
+  and
+  <i
+    >comma</i
+  >
+  separator
+</p>
+<div
+  class="box"
+>
+  <div
+    *ngFor="
+      let hero of heroes;
+      trackBy: trackByHeroes
+    "
+  >
+    ({{
+      hero.id
+    }})
+    {{
+      hero.name
+    }}
+  </div>
+</div>
+
+<p>
+  with
+  trackBy
+  and
+  <i
+    >space</i
+  >
+  separator
+</p>
+<div
+  class="box"
+>
+  <div
+    *ngFor="
+      let hero of heroes;
+      trackBy: trackByHeroes
+    "
+  >
+    ({{
+      hero.id
+    }})
+    {{
+      hero.name
+    }}
+  </div>
+</div>
+
+<p>
+  with
+  <i
+    >generic</i
+  >
+  trackById
+  function
+</p>
+<div
+  class="box"
+>
+  <div
+    *ngFor="
+      let hero of heroes;
+      trackBy: trackById
+    "
+  >
+    ({{
+      hero.id
+    }})
+    {{
+      hero.name
+    }}
   </div>
 </div>
 
-<a class="to-toc" href="#toc">top</a>
+<a
+  class="to-toc"
+  href="#toc"
+  >top</a
+>
 
-<!-- NgSwitch binding -->
+<!--
+  NgSwitch binding
+-->
 <hr />
-<h2 id="ngSwitch">NgSwitch Binding</h2>
+<h2
+  id="ngSwitch"
+>
+  NgSwitch
+  Binding
+</h2>
 
-<p>Pick your favorite hero</p>
+<p>
+  Pick
+  your
+  favorite
+  hero
+</p>
 <div>
-  <label *ngFor="let h of heroes">
-    <input type="radio" name="heroes" [(ngModel)]="currentHero" [value]="h" />{{
+  <label
+    *ngFor="
+      let h of heroes
+    "
+  >
+    <input
+      type="radio"
+      name="heroes"
+      [(ngModel)]="
+        currentHero
+      "
+      [value]="
+        h
+      "
+    />{{
       h.name
     }}
   </label>
 </div>
 
-<div [ngSwitch]="currentHero.emotion">
-  <app-happy-hero *ngSwitchCase="'happy'" [hero]="currentHero"></app-happy-hero>
-  <app-sad-hero *ngSwitchCase="'sad'" [hero]="currentHero"></app-sad-hero>
+<div
+  [ngSwitch]="
+    currentHero.emotion
+  "
+>
+  <app-happy-hero
+    *ngSwitchCase="
+      'happy'
+    "
+    [hero]="
+      currentHero
+    "
+  ></app-happy-hero>
+  <app-sad-hero
+    *ngSwitchCase="
+      'sad'
+    "
+    [hero]="
+      currentHero
+    "
+  ></app-sad-hero>
   <app-confused-hero
-    *ngSwitchCase="'confused'"
-    [hero]="currentHero"
+    *ngSwitchCase="
+      'confused'
+    "
+    [hero]="
+      currentHero
+    "
   ></app-confused-hero>
-  <div *ngSwitchCase="'confused'">
-    Are you as confused as {{ currentHero.name }}?
+  <div
+    *ngSwitchCase="
+      'confused'
+    "
+  >
+    Are
+    you
+    as
+    confused
+    as
+    {{
+      currentHero.name
+    }}?
   </div>
-  <app-unknown-hero *ngSwitchDefault [hero]="currentHero"></app-unknown-hero>
-</div>
-
-<a class="to-toc" href="#toc">top</a>
+  <app-unknown-hero
+    *ngSwitchDefault
+    [hero]="
+      currentHero
+    "
+  ></app-unknown-hero>
+</div>
+
+<a
+  class="to-toc"
+  href="#toc"
+  >top</a
+>
 
-<!-- template reference variable -->
+<!--
+  template reference variable
+-->
 <hr />
-<h2 id="ref-vars">Template reference variables</h2>
+<h2
+  id="ref-vars"
+>
+  Template
+  reference
+  variables
+</h2>
 
-<input #phone placeholder="phone number" />
+<input
+  #phone
+  placeholder="phone number"
+/>
 
-<!-- lots of other elements -->
+<!--
+  lots of other elements
+-->
 
-<!-- phone refers to the input element; pass its \`value\` to an event handler -->
-<button (click)="callPhone(phone.value)">Call</button>
+<!--
+  phone refers to the input element; pass its \`value\` to an event handler
+-->
+<button
+  (click)="
+    callPhone(
+      phone.value
+    )
+  "
+>
+  Call
+</button>
 
-<input ref-fax placeholder="fax number" />
-<button (click)="callFax(fax.value)">Fax</button>
+<input
+  ref-fax
+  placeholder="fax number"
+/>
+<button
+  (click)="
+    callFax(
+      fax.value
+    )
+  "
+>
+  Fax
+</button>
 
-<!-- btn refers to the button element; show its disabled state -->
+<!--
+  btn refers to the button element; show its disabled state
+-->
 <button
   #btn
   disabled
-  [innerHTML]="'disabled by attribute: ' + btn.disabled"
+  [innerHTML]="
+    'disabled by attribute: ' +
+    btn.disabled
+  "
 ></button>
 
-<h4>Example Form</h4>
-<app-hero-form [hero]="currentHero"></app-hero-form>
+<h4>
+  Example
+  Form
+</h4>
+<app-hero-form
+  [hero]="
+    currentHero
+  "
+></app-hero-form>
 
-<a class="to-toc" href="#toc">top</a>
+<a
+  class="to-toc"
+  href="#toc"
+  >top</a
+>
 
-<!-- inputs and output -->
+<!--
+  inputs and output
+-->
 <hr />
-<h2 id="inputs-and-outputs">Inputs and Outputs</h2>
-
-<img [src]="iconUrl" /> <button (click)="onSave()">Save</button>
+<h2
+  id="inputs-and-outputs"
+>
+  Inputs
+  and
+  Outputs
+</h2>
+
+<img
+  [src]="
+    iconUrl
+  "
+/>
+<button
+  (click)="
+    onSave()
+  "
+>
+  Save
+</button>
 
-<app-hero-detail [hero]="currentHero" (deleteRequest)="deleteHero($event)">
+<app-hero-detail
+  [hero]="
+    currentHero
+  "
+  (deleteRequest)="
+    deleteHero(
+      $event
+    )
+  "
+>
 </app-hero-detail>
 
-<div (myClick)="clickMessage2 = $event" clickable>myClick2</div>
-{{ clickMessage2 }}
+<div
+  (myClick)="
+    clickMessage2 = $event
+  "
+  clickable
+>
+  myClick2
+</div>
+{{
+  clickMessage2
+}}
 
-<a class="to-toc" href="#toc">top</a>
+<a
+  class="to-toc"
+  href="#toc"
+  >top</a
+>
 
-<!-- Pipes -->
+<!--
+  Pipes
+-->
 <hr />
-<h2 id="pipes">Pipes</h2>
+<h2
+  id="pipes"
+>
+  Pipes
+</h2>
 
-<div>Title through uppercase pipe: {{ title | uppercase }}</div>
+<div>
+  Title
+  through
+  uppercase
+  pipe:
+  {{
+    title
+      | uppercase
+  }}
+</div>
 
-<!-- Pipe chaining: convert title to uppercase, then to lowercase -->
-<div>Title through a pipe chain: {{ title | uppercase | lowercase }}</div>
+<!--
+  Pipe chaining: convert title to uppercase, then to lowercase
+-->
+<div>
+  Title
+  through
+  a
+  pipe
+  chain:
+  {{
+    title
+      | uppercase
+      | lowercase
+  }}
+</div>
 
-<!-- pipe with configuration argument => "February 25, 1970" -->
-<div>Birthdate: {{ currentHero?.birthdate | date: "longDate" }}</div>
+<!--
+  pipe with configuration argument => "February 25, 1970"
+-->
+<div>
+  Birthdate:
+  {{
+    currentHero?.birthdate
+      | date
+        : "longDate"
+  }}
+</div>
 
-<div>{{ currentHero | json }}</div>
+<div>
+  {{
+    currentHero
+      | json
+  }}
+</div>
 
 <div>
-  Birthdate: {{ currentHero?.birthdate | date: "longDate" | uppercase }}
+  Birthdate:
+  {{
+    currentHero?.birthdate
+      | date
+        : "longDate"
+      | uppercase
+  }}
 </div>
 
 <div>
-  <!-- pipe price to USD and display the $ symbol -->
-  <label>Price: </label>{{ product.price | currency: "USD":true }}
+  <!--
+    pipe price to USD and display the $ symbol
+  -->
+  <label
+    >Price: </label
+  >{{
+    product.price
+      | currency
+        : "USD"
+        : true
+  }}
 </div>
 
-<a class="to-toc" href="#toc">top</a>
+<a
+  class="to-toc"
+  href="#toc"
+  >top</a
+>
 
-<!-- Null values and the safe navigation operator -->
+<!--
+  Null values and the safe navigation operator
+-->
 <hr />
-<h2 id="safe-navigation-operator">Safe navigation operator <i>?.</i></h2>
+<h2
+  id="safe-navigation-operator"
+>
+  Safe
+  navigation
+  operator
+  <i
+    >?.</i
+  >
+</h2>
 
-<div>The title is {{ title }}</div>
+<div>
+  The
+  title
+  is
+  {{
+    title
+  }}
+</div>
 
-<div>The current hero's name is {{ currentHero?.name }}</div>
+<div>
+  The
+  current
+  hero's
+  name
+  is
+  {{
+    currentHero?.name
+  }}
+</div>
 
-<div>The current hero's name is {{ currentHero.name }}</div>
+<div>
+  The
+  current
+  hero's
+  name
+  is
+  {{
+    currentHero.name
+  }}
+</div>
 
 <!--
   The null hero's name is {{nullHero.name}}
@@ -3584,59 +7655,215 @@ without NgModel <br />
     TypeError: Cannot read property 'name' of null in [null]
 -->
 
-<!-- No hero, div not displayed, no error -->
-<div *ngIf="nullHero">The null hero's name is {{ nullHero.name }}</div>
+<!--
+  No hero, div not displayed, no error
+-->
+<div
+  *ngIf="
+    nullHero
+  "
+>
+  The
+  null
+  hero's
+  name
+  is
+  {{
+    nullHero.name
+  }}
+</div>
 
-<div>The null hero's name is {{ nullHero && nullHero.name }}</div>
+<div>
+  The
+  null
+  hero's
+  name
+  is
+  {{
+    nullHero &&
+      nullHero.name
+  }}
+</div>
 
 <div>
-  <!-- No hero, no problem! -->
-  The null hero's name is {{ nullHero?.name }}
+  <!--
+    No hero, no problem!
+  -->
+  The
+  null
+  hero's
+  name
+  is
+  {{
+    nullHero?.name
+  }}
 </div>
 
-<a class="to-toc" href="#toc">top</a>
+<a
+  class="to-toc"
+  href="#toc"
+  >top</a
+>
 
-<!-- non-null assertion operator -->
+<!--
+  non-null assertion operator
+-->
 <hr />
-<h2 id="non-null-assertion-operator">Non-null assertion operator <i>!.</i></h2>
+<h2
+  id="non-null-assertion-operator"
+>
+  Non-null
+  assertion
+  operator
+  <i
+    >!.</i
+  >
+</h2>
 
 <div>
-  <!-- No hero, no text -->
-  <div *ngIf="hero">The hero's name is {{ hero!.name }}</div>
+  <!--
+    No hero, no text
+  -->
+  <div
+    *ngIf="
+      hero
+    "
+  >
+    The
+    hero's
+    name
+    is
+    {{
+      hero!
+        .name
+    }}
+  </div>
 </div>
 
-<a class="to-toc" href="#toc">top</a>
+<a
+  class="to-toc"
+  href="#toc"
+  >top</a
+>
 
-<!-- non-null assertion operator -->
+<!--
+  non-null assertion operator
+-->
 <hr />
-<h2 id="any-type-cast-function">$any type cast function <i>$any( )</i>.</h2>
+<h2
+  id="any-type-cast-function"
+>
+  $any
+  type
+  cast
+  function
+  <i
+    >$any(
+    )</i
+  >.
+</h2>
 
 <div>
-  <!-- Accessing an undeclared member -->
-  <div>The hero's marker is {{ $any(hero).marker }}</div>
+  <!--
+    Accessing an undeclared member
+  -->
+  <div>
+    The
+    hero's
+    marker
+    is
+    {{
+      $any(
+        hero
+      )
+        .marker
+    }}
+  </div>
 </div>
 
 <div>
-  <!-- Accessing an undeclared member -->
-  <div>Undeclared members is {{$any(this).member}}</div>
+  <!--
+    Accessing an undeclared member
+  -->
+  <div>
+    Undeclared
+    members
+    is
+    {{$any(this).member}}
+  </div>
 </div>
 
-<a class="to-toc" href="#toc">top</a>
+<a
+  class="to-toc"
+  href="#toc"
+  >top</a
+>
 
-<!-- TODO: discuss this in the Style binding section -->
-<!-- enums in bindings -->
+<!--
+  TODO: discuss this in the Style binding section
+-->
+<!--
+  enums in bindings
+-->
 <hr />
-<h2 id="enums">Enums in binding</h2>
+<h2
+  id="enums"
+>
+  Enums
+  in
+  binding
+</h2>
 
 <p>
-  The name of the Color.Red enum is {{ Color[Color.Red] }}.<br />
-  The current color is {{ Color[color] }} and its number is {{ color }}.<br />
-  <button [style.color]="Color[color]" (click)="colorToggle()">
-    Enum Toggle
+  The
+  name
+  of
+  the
+  Color.Red
+  enum
+  is
+  {{
+    Color[
+      Color
+        .Red
+    ]
+  }}.<br />
+  The
+  current
+  color
+  is
+  {{
+    Color[
+      color
+    ]
+  }}
+  and
+  its
+  number
+  is
+  {{
+    color
+  }}.<br />
+  <button
+    [style.color]="
+      Color[
+        color
+      ]
+    "
+    (click)="
+      colorToggle()
+    "
+  >
+    Enum
+    Toggle
   </button>
 </p>
 
-<a class="to-toc" href="#toc">top</a>
+<a
+  class="to-toc"
+  href="#toc"
+  >top</a
+>
 
 <!--
   Copyright 2017-2018 Google Inc. All Rights Reserved.
@@ -3644,22 +7871,55 @@ without NgModel <br />
   can be found in the LICENSE file at http://angular.io/license
 -->
 
-<div id="heroForm">
-  <form (ngSubmit)="onSubmit(heroForm)" #heroForm="ngForm">
-    <div class="form-group">
-      <label for="name"
+<div
+  id="heroForm"
+>
+  <form
+    (ngSubmit)="
+      onSubmit(
+        heroForm
+      )
+    "
+    #heroForm="ngForm"
+  >
+    <div
+      class="form-group"
+    >
+      <label
+        for="name"
         >Name
         <input
           class="form-control"
           name="name"
           required
-          [(ngModel)]="hero.name"
+          [(ngModel)]="
+            hero.name
+          "
         />
       </label>
     </div>
-    <button type="submit" [disabled]="!heroForm.form.valid">Submit</button>
+    <button
+      type="submit"
+      [disabled]="
+        !heroForm
+          .form
+          .valid
+      "
+    >
+      Submit
+    </button>
   </form>
-  <div [hidden]="!heroForm.form.valid">{{ submitMessage }}</div>
+  <div
+    [hidden]="
+      !heroForm
+        .form
+        .valid
+    "
+  >
+    {{
+      submitMessage
+    }}
+  </div>
 </div>
 
 <!--
diff --git a/tests/html_angular/jsfmt.spec.js b/tests/html_angular/jsfmt.spec.js
index 21bd6c0be802..d491f09bd527 100644
--- a/tests/html_angular/jsfmt.spec.js
+++ b/tests/html_angular/jsfmt.spec.js
@@ -1,2 +1,3 @@
 run_spec(__dirname, ["angular"]);
 run_spec(__dirname, ["angular"], { trailingComma: "es5" });
+run_spec(__dirname, ["angular"], { printWidth: 1 });

From 15316f7987b6fa7e9a95a9377e52893b654a1f6f Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Fri, 2 Nov 2018 10:55:30 +0800
Subject: [PATCH 160/177] test: add tests

---
 .../__snapshots__/jsfmt.spec.js.snap          | 56 +++++++++++++++++++
 .../html_angular/interpolation.component.html |  9 +++
 2 files changed, 65 insertions(+)

diff --git a/tests/html_angular/__snapshots__/jsfmt.spec.js.snap b/tests/html_angular/__snapshots__/jsfmt.spec.js.snap
index 019b687001a8..28106ad0ec28 100644
--- a/tests/html_angular/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_angular/__snapshots__/jsfmt.spec.js.snap
@@ -982,6 +982,15 @@ exports[`interpolation.component.html - angular-verify 1`] = `
 }} </label>
 <div class="Nemo possimus non voluptates dicta accusamus id quia">{{copyTypes[options.copyType]}}</div>
 {{listRow.NextScheduledSendStatus == 1 || listRow.NextScheduledSendStatus == 2 || listRow.NextScheduledSendStatus == 3}}
+<span
+><!--
+--><span
+  >{{a}}</span
+><!--
+--><span
+  >{{b}}</span
+><!--
+--></span>
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 <div>{{ a | b: c }}</div>
 <div>{{ 0 - 1 }}</div>
@@ -1046,6 +1055,13 @@ exports[`interpolation.component.html - angular-verify 1`] = `
     listRow.NextScheduledSendStatus == 2 ||
     listRow.NextScheduledSendStatus == 3
 }}
+<span
+  ><!--
+  --><span>{{ a }}</span
+  ><!--
+  --><span>{{ b }}</span
+  ><!--
+--></span>
 
 `;
 
@@ -1093,6 +1109,15 @@ exports[`interpolation.component.html - angular-verify 2`] = `
 }} </label>
 <div class="Nemo possimus non voluptates dicta accusamus id quia">{{copyTypes[options.copyType]}}</div>
 {{listRow.NextScheduledSendStatus == 1 || listRow.NextScheduledSendStatus == 2 || listRow.NextScheduledSendStatus == 3}}
+<span
+><!--
+--><span
+  >{{a}}</span
+><!--
+--><span
+  >{{b}}</span
+><!--
+--></span>
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 <div>{{ a | b: c }}</div>
 <div>{{ 0 - 1 }}</div>
@@ -1157,6 +1182,13 @@ exports[`interpolation.component.html - angular-verify 2`] = `
     listRow.NextScheduledSendStatus == 2 ||
     listRow.NextScheduledSendStatus == 3
 }}
+<span
+  ><!--
+  --><span>{{ a }}</span
+  ><!--
+  --><span>{{ b }}</span
+  ><!--
+--></span>
 
 `;
 
@@ -1204,6 +1236,15 @@ exports[`interpolation.component.html - angular-verify 3`] = `
 }} </label>
 <div class="Nemo possimus non voluptates dicta accusamus id quia">{{copyTypes[options.copyType]}}</div>
 {{listRow.NextScheduledSendStatus == 1 || listRow.NextScheduledSendStatus == 2 || listRow.NextScheduledSendStatus == 3}}
+<span
+><!--
+--><span
+  >{{a}}</span
+><!--
+--><span
+  >{{b}}</span
+><!--
+--></span>
 ~
 <div>
   {{
@@ -1418,6 +1459,21 @@ exports[`interpolation.component.html - angular-verify 3`] = `
     listRow.NextScheduledSendStatus ==
       3
 }}
+<span
+  ><!--
+  --><span
+    >{{
+      a
+    }}</span
+
+  ><!--
+  --><span
+    >{{
+      b
+    }}</span
+
+  ><!--
+--></span>
 
 `;
 
diff --git a/tests/html_angular/interpolation.component.html b/tests/html_angular/interpolation.component.html
index 2056dd136053..d8021e80db5f 100644
--- a/tests/html_angular/interpolation.component.html
+++ b/tests/html_angular/interpolation.component.html
@@ -41,3 +41,12 @@
 }} </label>
 <div class="Nemo possimus non voluptates dicta accusamus id quia">{{copyTypes[options.copyType]}}</div>
 {{listRow.NextScheduledSendStatus == 1 || listRow.NextScheduledSendStatus == 2 || listRow.NextScheduledSendStatus == 3}}
+<span
+><!--
+--><span
+  >{{a}}</span
+><!--
+--><span
+  >{{b}}</span
+><!--
+--></span>

From 44f211a3da9effff4ed14f08cf7099a1a581c706 Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Fri, 2 Nov 2018 10:55:47 +0800
Subject: [PATCH 161/177] fix: remove unexpected newlines

---
 src/language-html/printer-html.js              | 18 +++++++++---------
 .../__snapshots__/jsfmt.spec.js.snap           |  2 --
 2 files changed, 9 insertions(+), 11 deletions(-)

diff --git a/src/language-html/printer-html.js b/src/language-html/printer-html.js
index f0f6d90bd41e..ebacf59f3a19 100644
--- a/src/language-html/printer-html.js
+++ b/src/language-html/printer-html.js
@@ -211,15 +211,15 @@ function genericPrint(path, options, print) {
                       printChildren(path, options, print)
                     ])
                   ),
-                  shouldHugContent
-                    ? ifBreak(softline, "", { groupId: attrGroupId })
-                    : (node.next
-                      ? needsToBorrowPrevClosingTagEndMarker(node.next)
-                      : needsToBorrowLastChildClosingTagEndMarker(node.parent))
-                      ? node.lastChild.hasTrailingSpaces &&
-                        node.lastChild.isTrailingSpaceSensitive
-                        ? " "
-                        : ""
+                  (node.next
+                  ? needsToBorrowPrevClosingTagEndMarker(node.next)
+                  : needsToBorrowLastChildClosingTagEndMarker(node.parent))
+                    ? node.lastChild.hasTrailingSpaces &&
+                      node.lastChild.isTrailingSpaceSensitive
+                      ? " "
+                      : ""
+                    : shouldHugContent
+                      ? ifBreak(softline, "", { groupId: attrGroupId })
                       : node.lastChild.hasTrailingSpaces &&
                         node.lastChild.isTrailingSpaceSensitive
                         ? line
diff --git a/tests/html_angular/__snapshots__/jsfmt.spec.js.snap b/tests/html_angular/__snapshots__/jsfmt.spec.js.snap
index 28106ad0ec28..b535bd63ef6a 100644
--- a/tests/html_angular/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_angular/__snapshots__/jsfmt.spec.js.snap
@@ -1465,13 +1465,11 @@ exports[`interpolation.component.html - angular-verify 3`] = `
     >{{
       a
     }}</span
-
   ><!--
   --><span
     >{{
       b
     }}</span
-
   ><!--
 --></span>
 

From f2c9532a816a00e85fe6e6aa341933d61e52799e Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Fri, 2 Nov 2018 11:22:11 +0800
Subject: [PATCH 162/177] fix: potential regex.lastIndex issue

---
 src/language-js/embed.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/language-js/embed.js b/src/language-js/embed.js
index dd7f94db35be..a47585906179 100644
--- a/src/language-js/embed.js
+++ b/src/language-js/embed.js
@@ -565,7 +565,8 @@ function isHtml(path) {
 function printHtmlTemplateLiteral(path, print, textToDoc, parser) {
   const node = path.getValue();
 
-  const placeholderRegex = /prettierhtmlplaceholder(\d+)redlohecalplmthreitterp/g;
+  const placeholderPattern =
+    "prettierhtmlplaceholder(\\d+)redlohecalplmthreitterp";
   const placeholders = node.expressions.map(
     (_, i) => `prettierhtmlplaceholder${i}redlohecalplmthreitterp`
   );
@@ -584,6 +585,7 @@ function printHtmlTemplateLiteral(path, print, textToDoc, parser) {
   const contentDoc = mapDoc(
     stripTrailingHardline(textToDoc(text, { parser })),
     doc => {
+      const placeholderRegex = new RegExp(placeholderPattern, "g");
       const hasPlaceholder =
         typeof doc === "string" && placeholderRegex.test(doc);
 

From 7c47af8feecb7be5ad20730ccf7603fd2521cddf Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Fri, 2 Nov 2018 12:33:10 +0800
Subject: [PATCH 163/177] test: add tests

---
 .../__snapshots__/jsfmt.spec.js.snap          | 19 +++++++++++++++++++
 .../non-breaking-whitespace.html              |  4 ++++
 2 files changed, 23 insertions(+)
 create mode 100644 tests/html_whitespace/non-breaking-whitespace.html

diff --git a/tests/html_whitespace/__snapshots__/jsfmt.spec.js.snap b/tests/html_whitespace/__snapshots__/jsfmt.spec.js.snap
index 379e1e7cf0f3..83874c574601 100644
--- a/tests/html_whitespace/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_whitespace/__snapshots__/jsfmt.spec.js.snap
@@ -151,6 +151,25 @@ conubia nostra, per inceptos himenaeos. Donec in ornare velit.</p>
 
 `;
 
+exports[`non-breaking-whitespace.html - html-verify 1`] = `
+<!-- normal whitespaces -->
+<span>Nihil aut odit omnis. Quam maxime est molestiae. Maxime dolorem dolores voluptas quaerat ut qui sunt vitae error.</span>
+<!-- non-breaking whitespaces -->
+<span>Nihil aut odit omnis. Quam maxime est molestiae. Maxime dolorem dolores voluptas quaerat ut qui sunt vitae error.</span>
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+<!-- normal whitespaces -->
+<span
+  >Nihil aut odit omnis. Quam maxime est molestiae. Maxime dolorem dolores
+  voluptas quaerat ut qui sunt vitae error.</span
+>
+<!-- non-breaking whitespaces -->
+<span
+  >Nihil aut odit omnis. Quam maxime est molestiae. Maxime dolorem dolores
+  voluptas quaerat ut qui sunt vitae error.</span
+>
+
+`;
+
 exports[`table.html - html-verify 1`] = `
 <table>
   <thead>
diff --git a/tests/html_whitespace/non-breaking-whitespace.html b/tests/html_whitespace/non-breaking-whitespace.html
new file mode 100644
index 000000000000..371f0eeae4b8
--- /dev/null
+++ b/tests/html_whitespace/non-breaking-whitespace.html
@@ -0,0 +1,4 @@
+<!-- normal whitespaces -->
+<span>Nihil aut odit omnis. Quam maxime est molestiae. Maxime dolorem dolores voluptas quaerat ut qui sunt vitae error.</span>
+<!-- non-breaking whitespaces -->
+<span>Nihil aut odit omnis. Quam maxime est molestiae. Maxime dolorem dolores voluptas quaerat ut qui sunt vitae error.</span>

From b1528011147e07f9024f1c5e462f439b819c9f19 Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Fri, 2 Nov 2018 12:36:34 +0800
Subject: [PATCH 164/177] fix: do not break non-breaking whitespace

---
 src/language-html/printer-html.js                      | 3 ++-
 tests/html_whitespace/__snapshots__/jsfmt.spec.js.snap | 3 +--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/language-html/printer-html.js b/src/language-html/printer-html.js
index ebacf59f3a19..caba01a65d62 100644
--- a/src/language-html/printer-html.js
+++ b/src/language-html/printer-html.js
@@ -783,7 +783,8 @@ function getTextValueParts(node, value = node.value) {
           dedentString(value.replace(/^\s*?\n|\n\s*?$/g, "")),
           hardline
         )
-    : join(line, value.split(/\s+/)).parts;
+    : // non-breaking whitespace: 0xA0
+      join(line, value.split(/[^\S\xA0]+/)).parts;
 }
 
 function printEmbeddedAttributeValue(node, originalTextToDoc, options) {
diff --git a/tests/html_whitespace/__snapshots__/jsfmt.spec.js.snap b/tests/html_whitespace/__snapshots__/jsfmt.spec.js.snap
index 83874c574601..3beba36dcc75 100644
--- a/tests/html_whitespace/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_whitespace/__snapshots__/jsfmt.spec.js.snap
@@ -164,8 +164,7 @@ exports[`non-breaking-whitespace.html - html-verify 1`] = `
 >
 <!-- non-breaking whitespaces -->
 <span
-  >Nihil aut odit omnis. Quam maxime est molestiae. Maxime dolorem dolores
-  voluptas quaerat ut qui sunt vitae error.</span
+  >Nihil aut odit omnis. Quam maxime est molestiae. Maxime dolorem dolores voluptas quaerat ut qui sunt vitae error.</span
 >
 
 `;

From ef3e23e0037de496033e7c743519a40a8c8d8972 Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Fri, 2 Nov 2018 13:33:19 +0800
Subject: [PATCH 165/177] test: add tests

---
 .../__snapshots__/jsfmt.spec.js.snap          | 96 +++++++++++++++++++
 tests/html_tags/tags.html                     |  8 ++
 2 files changed, 104 insertions(+)

diff --git a/tests/html_tags/__snapshots__/jsfmt.spec.js.snap b/tests/html_tags/__snapshots__/jsfmt.spec.js.snap
index f0e284a3668a..623b44f84418 100644
--- a/tests/html_tags/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_tags/__snapshots__/jsfmt.spec.js.snap
@@ -1481,6 +1481,14 @@ exports[`tags.html - html-verify 1`] = `
 <app-footer [input]="something"></app-footer>
 </div>
 <x:root><SPAN>foreign tag name should not be lower cased</SPAN></x:root>
+<div>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+  "<strong>seddoeiusmod</strong>".
+</div>
+<div>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+  <strong>seddoeiusmod</strong>.
+</div>
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 <br />
 <br />
@@ -1645,6 +1653,15 @@ exports[`tags.html - html-verify 1`] = `
   <app-footer [input]="something"></app-footer>
 </div>
 <x:root><SPAN>foreign tag name should not be lower cased</SPAN></x:root>
+<div>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit, "<strong
+    >seddoeiusmod</strong
+  >".
+</div>
+<div>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+  <strong>seddoeiusmod</strong>.
+</div>
 
 `;
 
@@ -1751,6 +1768,14 @@ exports[`tags.html - html-verify 2`] = `
 <app-footer [input]="something"></app-footer>
 </div>
 <x:root><SPAN>foreign tag name should not be lower cased</SPAN></x:root>
+<div>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+  "<strong>seddoeiusmod</strong>".
+</div>
+<div>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+  <strong>seddoeiusmod</strong>.
+</div>
 ~
 <br />
 <br />
@@ -2100,6 +2125,32 @@ exports[`tags.html - html-verify 2`] = `
     cased</SPAN
   ></x:root
 >
+<div>
+  Lorem
+  ipsum
+  dolor
+  sit
+  amet,
+  consectetur
+  adipiscing
+  elit,
+  "<strong
+    >seddoeiusmod</strong
+  >".
+</div>
+<div>
+  Lorem
+  ipsum
+  dolor
+  sit
+  amet,
+  consectetur
+  adipiscing
+  elit,
+  <strong
+    >seddoeiusmod</strong
+  >.
+</div>
 
 `;
 
@@ -2206,6 +2257,14 @@ exports[`tags.html - html-verify 3`] = `
 <app-footer [input]="something"></app-footer>
 </div>
 <x:root><SPAN>foreign tag name should not be lower cased</SPAN></x:root>
+<div>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+  "<strong>seddoeiusmod</strong>".
+</div>
+<div>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+  <strong>seddoeiusmod</strong>.
+</div>
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 <br />
 <br />
@@ -2304,6 +2363,8 @@ exports[`tags.html - html-verify 3`] = `
   <app-footer [input]="something"></app-footer>
 </div>
 <x:root><SPAN>foreign tag name should not be lower cased</SPAN></x:root>
+<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, "<strong>seddoeiusmod</strong>".</div>
+<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, <strong>seddoeiusmod</strong>.</div>
 
 `;
 
@@ -2410,6 +2471,14 @@ exports[`tags.html - html-verify 4`] = `
 <app-footer [input]="something"></app-footer>
 </div>
 <x:root><SPAN>foreign tag name should not be lower cased</SPAN></x:root>
+<div>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+  "<strong>seddoeiusmod</strong>".
+</div>
+<div>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+  <strong>seddoeiusmod</strong>.
+</div>
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 <br />
 <br />
@@ -2553,6 +2622,15 @@ exports[`tags.html - html-verify 4`] = `
   <app-footer [input]="something"></app-footer>
 </div>
 <x:root><SPAN>foreign tag name should not be lower cased</SPAN></x:root>
+<div>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit, "<strong
+    >seddoeiusmod</strong
+  >".
+</div>
+<div>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+  <strong>seddoeiusmod</strong>.
+</div>
 
 `;
 
@@ -2659,6 +2737,14 @@ exports[`tags.html - html-verify 5`] = `
 <app-footer [input]="something"></app-footer>
 </div>
 <x:root><SPAN>foreign tag name should not be lower cased</SPAN></x:root>
+<div>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+  "<strong>seddoeiusmod</strong>".
+</div>
+<div>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+  <strong>seddoeiusmod</strong>.
+</div>
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 <br />
 <br />
@@ -2852,6 +2938,16 @@ exports[`tags.html - html-verify 5`] = `
   <app-footer [input]="something"></app-footer>
 </div>
 <x:root><SPAN>foreign tag name should not be lower cased</SPAN></x:root>
+<div>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit, "
+  <strong>seddoeiusmod</strong>
+  ".
+</div>
+<div>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+  <strong>seddoeiusmod</strong>
+  .
+</div>
 
 `;
 
diff --git a/tests/html_tags/tags.html b/tests/html_tags/tags.html
index 5b13eb4cd02d..8d978c4f1b04 100644
--- a/tests/html_tags/tags.html
+++ b/tests/html_tags/tags.html
@@ -100,3 +100,11 @@
 <app-footer [input]="something"></app-footer>
 </div>
 <x:root><SPAN>foreign tag name should not be lower cased</SPAN></x:root>
+<div>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+  "<strong>seddoeiusmod</strong>".
+</div>
+<div>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+  <strong>seddoeiusmod</strong>.
+</div>

From a4dce4b76ce3744aee6dc41509e754774010c874 Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Fri, 2 Nov 2018 21:47:57 +0800
Subject: [PATCH 166/177] refactor

---
 src/language-html/ast.js         | 128 +++++++++++++++++++++++++++
 src/language-html/parser-html.js |  22 +++--
 src/language-html/preprocess.js  | 143 ++++++++++---------------------
 src/language-html/utils.js       |  29 -------
 4 files changed, 187 insertions(+), 135 deletions(-)
 create mode 100644 src/language-html/ast.js

diff --git a/src/language-html/ast.js b/src/language-html/ast.js
new file mode 100644
index 000000000000..9fc4244013f8
--- /dev/null
+++ b/src/language-html/ast.js
@@ -0,0 +1,128 @@
+"use strict";
+
+const NODES_KEYS = {
+  attrs: true,
+  children: true
+};
+
+class Node {
+  constructor(props = {}) {
+    for (const key of Object.keys(props)) {
+      const value = props[key];
+      if (key in NODES_KEYS) {
+        this._setNodes(key, value);
+      } else {
+        this[key] = value;
+      }
+    }
+  }
+
+  _setNodes(key, nodes) {
+    if (nodes !== this[key]) {
+      this[key] = cloneAndUpdateNodes(nodes, this);
+    }
+  }
+
+  map(fn) {
+    let newNode = null;
+
+    for (const NODES_KEY in NODES_KEYS) {
+      const nodes = this[NODES_KEY];
+      if (nodes) {
+        const mappedNodes = mapNodesIfChanged(nodes, node => node.map(fn));
+        if (newNode !== nodes) {
+          if (!newNode) {
+            newNode = new Node();
+          }
+          newNode._setNodes(NODES_KEY, mappedNodes);
+        }
+      }
+    }
+
+    if (newNode) {
+      for (const key in this) {
+        if (!(key in NODES_KEYS)) {
+          newNode[key] = this[key];
+        }
+      }
+      const { index, siblings, prev, next, parent } = this;
+      setNonEnumerableProperties(newNode, {
+        index,
+        siblings,
+        prev,
+        next,
+        parent
+      });
+    }
+
+    return fn(newNode || this);
+  }
+
+  clone(overrides) {
+    return new Node(overrides ? Object.assign({}, this, overrides) : this);
+  }
+
+  get firstChild() {
+    return this.children && this.children.length !== 0
+      ? this.children[0]
+      : null;
+  }
+
+  get lastChild() {
+    return this.children && this.children.length !== 0
+      ? this.children[this.children.length - 1]
+      : null;
+  }
+
+  // for element and attribute
+  get rawName() {
+    return this.hasExplicitNamespace ? this.fullName : this.name;
+  }
+  get fullName() {
+    return this.namespace ? this.namespace + ":" + this.name : this.name;
+  }
+}
+
+function mapNodesIfChanged(nodes, fn) {
+  const newNodes = nodes.map(fn);
+  return newNodes.some((newNode, index) => newNode !== nodes[index])
+    ? newNodes
+    : nodes;
+}
+
+function cloneAndUpdateNodes(nodes, parent) {
+  const siblings = nodes.map(
+    node => (node instanceof Node ? node.clone() : new Node(node))
+  );
+
+  let prev = null;
+  let current = siblings[0];
+  let next = siblings[1] || null;
+
+  for (let index = 0; index < siblings.length; index++) {
+    setNonEnumerableProperties(current, {
+      index,
+      siblings,
+      prev,
+      next,
+      parent
+    });
+    prev = current;
+    current = next;
+    next = siblings[index + 2] || null;
+  }
+
+  return siblings;
+}
+
+function setNonEnumerableProperties(obj, props) {
+  const descriptors = Object.keys(props).reduce((reduced, key) => {
+    reduced[key] = { value: props[key], enumerable: false };
+    return reduced;
+  }, {});
+  Object.defineProperties(obj, descriptors);
+}
+
+module.exports = {
+  Node
+};
diff --git a/src/language-html/parser-html.js b/src/language-html/parser-html.js
index ab5ddf08689c..ff929e712220 100644
--- a/src/language-html/parser-html.js
+++ b/src/language-html/parser-html.js
@@ -1,9 +1,10 @@
 "use strict";
 
 const parseFrontMatter = require("../utils/front-matter");
-const { HTML_ELEMENT_ATTRIBUTES, HTML_TAGS, mapNode } = require("./utils");
+const { HTML_ELEMENT_ATTRIBUTES, HTML_TAGS } = require("./utils");
 const { hasPragma } = require("./pragma");
 const createError = require("../common/parser-create-error");
+const { Node } = require("./ast");
 
 function ngHtmlParser(input, canSelfClose) {
   const parser = require("angular-html-parser");
@@ -169,16 +170,18 @@ function _parse(
     ? parseFrontMatter(text)
     : { frontMatter: null, content: text };
 
-  const ast = {
+  const rawAst = {
     type: "root",
     sourceSpan: { start: { offset: 0 }, end: { offset: text.length } },
     children: ngHtmlParser(content, recognizeSelfClosing)
   };
 
   if (frontMatter) {
-    ast.children.unshift(frontMatter);
+    rawAst.children.unshift(frontMatter);
   }
 
+  const ast = new Node(rawAst);
+
   const parseSubHtml = (subContent, startSpan) => {
     const { offset } = startSpan;
     const fakeContent = text.slice(0, offset).replace(/[^\r\n]/g, " ");
@@ -207,19 +210,20 @@ function _parse(
     return subAst;
   };
 
-  return mapNode(ast, node => {
-    if (node.children) {
+  const isFakeElement = node => node.type === "element" && !node.nameSpan;
+  return ast.map(node => {
+    if (node.children && node.children.some(isFakeElement)) {
       const newChildren = [];
 
       for (const child of node.children) {
-        if (child.type === "element" && !child.nameSpan) {
+        if (isFakeElement(child)) {
           Array.prototype.push.apply(newChildren, child.children);
         } else {
           newChildren.push(child);
         }
       }
 
-      return Object.assign({}, node, { children: newChildren });
+      return node.clone({ children: newChildren });
     }
 
     if (node.type === "comment") {
@@ -252,8 +256,8 @@ function parseIeConditionalComment(node, parseHtml) {
   const [, openingTagSuffix, condition, data] = match;
   const offset = "<!--".length + openingTagSuffix.length;
   const contentStartSpan = node.sourceSpan.start.moveBy(offset);
-  const ParseSourceSpan = contentStartSpan.constructor;
-  return Object.assign({}, parseHtml(data, contentStartSpan), {
+  const ParseSourceSpan = node.sourceSpan.constructor;
+  return Object.assign(parseHtml(data, contentStartSpan), {
     type: "ieConditionalComment",
     condition: condition.trim().replace(/\s+/g, " "),
     startSourceSpan: new ParseSourceSpan(
diff --git a/src/language-html/preprocess.js b/src/language-html/preprocess.js
index f2f6e1d948ae..4c953c0dded2 100644
--- a/src/language-html/preprocess.js
+++ b/src/language-html/preprocess.js
@@ -3,13 +3,11 @@
 const {
   canHaveInterpolation,
   getNodeCssStyleDisplay,
-  getPrevNode,
   isDanglingSpaceSensitiveNode,
   isIndentationSensitiveNode,
   isLeadingSpaceSensitiveNode,
   isTrailingSpaceSensitiveNode,
-  isWhitespaceSensitiveNode,
-  mapNode
+  isWhitespaceSensitiveNode
 } = require("./utils");
 
 const PREPROCESS_PIPELINE = [
@@ -19,8 +17,7 @@ const PREPROCESS_PIPELINE = [
   addIsSelfClosing,
   extractWhitespaces,
   addCssDisplay,
-  addIsSpaceSensitive,
-  addShortcuts
+  addIsSpaceSensitive
 ];
 
 function preprocess(ast, options) {
@@ -31,7 +28,7 @@ function preprocess(ast, options) {
 }
 
 function removeIgnorableFirstLf(ast /*, options */) {
-  return mapNode(ast, node => {
+  return ast.map(node => {
     if (
       node.type === "element" &&
       node.tagDefinition.ignoreFirstLf &&
@@ -40,12 +37,12 @@ function removeIgnorableFirstLf(ast /*, options */) {
       node.children[0].value[0] === "\n"
     ) {
       const text = node.children[0];
-      return Object.assign({}, node, {
+      return node.clone({
         children:
           text.value.length === 1
             ? node.children.slice(1)
             : [].concat(
-                Object.assign({}, text, { value: text.value.slice(1) }),
+                text.clone({ value: text.value.slice(1) }),
                 node.children.slice(1)
               )
       });
@@ -55,7 +52,7 @@ function removeIgnorableFirstLf(ast /*, options */) {
 }
 
 function mergeCdataIntoText(ast /*, options */) {
-  return mapNode(ast, node => {
+  return ast.map(node => {
     if (node.children && node.children.some(child => child.type === "cdata")) {
       const newChildren = [];
       for (const child of node.children) {
@@ -67,7 +64,7 @@ function mergeCdataIntoText(ast /*, options */) {
         const newChild =
           child.type === "text"
             ? child
-            : Object.assign({}, child, {
+            : child.clone({
                 type: "text",
                 value: `<![CDATA[${child.value}]]>`
               });
@@ -83,7 +80,7 @@ function mergeCdataIntoText(ast /*, options */) {
         const lastChild = newChildren.pop();
         const ParseSourceSpan = lastChild.sourceSpan.constructor;
         newChildren.push(
-          Object.assign({}, lastChild, {
+          lastChild.clone({
             value: lastChild.value + newChild.value,
             sourceSpan: new ParseSourceSpan(
               lastChild.sourceSpan.start,
@@ -92,7 +89,7 @@ function mergeCdataIntoText(ast /*, options */) {
           })
         );
       }
-      return Object.assign({}, node, { children: newChildren });
+      return node.clone({ children: newChildren });
     }
 
     return node;
@@ -105,7 +102,7 @@ function extractInterpolation(ast, options) {
   }
 
   const interpolationRegex = /\{\{([\s\S]+?)\}\}/g;
-  return mapNode(ast, node => {
+  return ast.map(node => {
     if (!canHaveInterpolation(node)) {
       return node;
     }
@@ -118,6 +115,8 @@ function extractInterpolation(ast, options) {
         continue;
       }
 
+      const ParseSourceSpan = child.sourceSpan.constructor;
+
       let startSourceSpan = child.sourceSpan.start;
       let endSourceSpan = null;
       const components = child.value.split(interpolationRegex);
@@ -134,7 +133,7 @@ function extractInterpolation(ast, options) {
             newChildren.push({
               type: "text",
               value,
-              sourceSpan: { start: startSourceSpan, end: endSourceSpan }
+              sourceSpan: new ParseSourceSpan(startSourceSpan, endSourceSpan)
             });
           }
           continue;
@@ -143,7 +142,7 @@ function extractInterpolation(ast, options) {
         endSourceSpan = startSourceSpan.moveBy(value.length + 4); // `{{` + `}}`
         newChildren.push({
           type: "interpolation",
-          sourceSpan: { start: startSourceSpan, end: endSourceSpan },
+          sourceSpan: new ParseSourceSpan(startSourceSpan, endSourceSpan),
           children:
             value.length === 0
               ? []
@@ -151,23 +150,23 @@ function extractInterpolation(ast, options) {
                   {
                     type: "text",
                     value,
-                    sourceSpan: {
-                      start: startSourceSpan.moveBy(2),
-                      end: endSourceSpan.moveBy(-2)
-                    }
+                    sourceSpan: new ParseSourceSpan(
+                      startSourceSpan.moveBy(2),
+                      endSourceSpan.moveBy(-2)
+                    )
                   }
                 ]
         });
       }
     }
 
-    return Object.assign({}, node, { children: newChildren });
+    return node.clone({ children: newChildren });
   });
 }
 
 /** add `isSelfClosing` for void tags, directives, and comments */
 function addIsSelfClosing(ast /*, options */) {
-  return mapNode(ast, node => {
+  return ast.map(node => {
     if (
       !node.children ||
       (node.type === "element" &&
@@ -175,7 +174,7 @@ function addIsSelfClosing(ast /*, options */) {
           // self-closing
           node.startSourceSpan === node.endSourceSpan))
     ) {
-      return Object.assign({}, node, { isSelfClosing: true });
+      return node.clone({ isSelfClosing: true });
     }
     return node;
   });
@@ -190,7 +189,7 @@ function addIsSelfClosing(ast /*, options */) {
  */
 function extractWhitespaces(ast /*, options*/) {
   const TYPE_WHITESPACE = "whitespace";
-  return mapNode(ast, node => {
+  return ast.map(node => {
     if (!node.children) {
       return node;
     }
@@ -201,7 +200,7 @@ function extractWhitespaces(ast /*, options*/) {
         node.children[0].type === "text" &&
         node.children[0].value.trim().length === 0)
     ) {
-      return Object.assign({}, node, {
+      return node.clone({
         children: [],
         hasDanglingSpaces: node.children.length !== 0
       });
@@ -210,7 +209,7 @@ function extractWhitespaces(ast /*, options*/) {
     const isWhitespaceSensitive = isWhitespaceSensitiveNode(node);
     const isIndentationSensitive = isIndentationSensitiveNode(node);
 
-    return Object.assign({}, node, {
+    return node.clone({
       children: node.children
         // extract whitespace nodes
         .reduce((newChildren, child) => {
@@ -237,14 +236,16 @@ function extractWhitespaces(ast /*, options*/) {
             localChildren.push({ type: TYPE_WHITESPACE });
           }
 
+          const ParseSourceSpan = child.sourceSpan.constructor;
+
           if (text) {
             localChildren.push({
               type: "text",
               value: text,
-              sourceSpan: {
-                start: child.sourceSpan.start.moveBy(leadingSpaces.length),
-                end: child.sourceSpan.end.moveBy(-trailingSpaces.length)
-              }
+              sourceSpan: new ParseSourceSpan(
+                child.sourceSpan.start.moveBy(leadingSpaces.length),
+                child.sourceSpan.end.moveBy(-trailingSpaces.length)
+              )
             });
           }
 
@@ -278,10 +279,9 @@ function extractWhitespaces(ast /*, options*/) {
 }
 
 function addCssDisplay(ast, options) {
-  return mapNode(ast, (node, stack) => {
-    const prevNode = getPrevNode(stack);
-    return Object.assign({}, node, {
-      cssDisplay: getNodeCssStyleDisplay(node, prevNode, options)
+  return ast.map(node => {
+    return node.clone({
+      cssDisplay: getNodeCssStyleDisplay(node, node.prev, options)
     });
   });
 }
@@ -292,24 +292,24 @@ function addCssDisplay(ast, options) {
  * - add `isDanglingSpaceSensitive` field for parent nodes
  */
 function addIsSpaceSensitive(ast /*, options */) {
-  return mapNode(ast, node => {
+  return ast.map(node => {
     if (!node.children) {
       return node;
     }
 
     if (node.children.length === 0) {
-      return Object.assign({}, node, {
+      return node.clone({
         isDanglingSpaceSensitive: isDanglingSpaceSensitiveNode(node)
       });
     }
 
-    return Object.assign({}, node, {
+    return node.clone({
       children: node.children
         // set isLeadingSpaceSensitive
         .map((child, i, children) => {
           const prevChild = i === 0 ? null : children[i - 1];
           const nextChild = i === children.length - 1 ? null : children[i + 1];
-          return Object.assign({}, child, {
+          return child.clone({
             isLeadingSpaceSensitive: isLeadingSpaceSensitiveNode(child, {
               parent: node,
               prev: prevChild,
@@ -330,15 +330,15 @@ function addIsSpaceSensitive(ast /*, options */) {
                   next: nextChild
                 });
           return newChildren.concat(
-            Object.assign(
-              {},
-              child,
-              { isTrailingSpaceSensitive },
-              prevChild &&
-              !prevChild.isTrailingSpaceSensitive &&
-              child.isLeadingSpaceSensitive
-                ? { isLeadingSpaceSensitive: false }
-                : null
+            child.clone(
+              Object.assign(
+                { isTrailingSpaceSensitive },
+                prevChild &&
+                !prevChild.isTrailingSpaceSensitive &&
+                child.isLeadingSpaceSensitive
+                  ? { isLeadingSpaceSensitive: false }
+                  : null
+              )
             )
           );
         }, [])
@@ -346,55 +346,4 @@ function addIsSpaceSensitive(ast /*, options */) {
   });
 }
 
-function addShortcuts(ast /*, options */) {
-  function _addShortcuts(node, parent, index) {
-    const prev = index === -1 ? null : parent.children[index - 1];
-    const next = index === -1 ? null : parent.children[index + 1];
-
-    const hasChildren = node.children && node.children.length !== 0;
-
-    const firstChild = !hasChildren ? null : node.children[0];
-    const lastChild = !hasChildren
-      ? null
-      : node.children[node.children.length - 1];
-
-    Object.defineProperties(node, {
-      parent: { value: parent, enumerable: false },
-      prev: { value: prev, enumerable: false },
-      next: { value: next, enumerable: false },
-      firstChild: { value: firstChild, enumerable: false },
-      lastChild: { value: lastChild, enumerable: false }
-    });
-
-    if (node.type === "element") {
-      const rawNameGetter = function() {
-        return this.hasExplicitNamespace ? this.fullName : this.name;
-      };
-      const fullNameGetter = function() {
-        return this.namespace ? this.namespace + ":" + this.name : this.name;
-      };
-      Object.defineProperties(node, {
-        rawName: { get: rawNameGetter, enumerable: false },
-        fullName: { get: fullNameGetter, enumerable: false }
-      });
-      node.attrs.forEach(attribute =>
-        Object.defineProperties(attribute, {
-          parent: { value: node, enumerable: false },
-          rawName: { get: rawNameGetter, enumerable: false },
-          fullName: { get: fullNameGetter, enumerable: false }
-        })
-      );
-    }
-
-    if (node.children) {
-      node.children.forEach((child, childIndex) =>
-        _addShortcuts(child, node, childIndex)
-      );
-    }
-  }
-
-  _addShortcuts(ast, null, -1);
-  return ast;
-}
-
 module.exports = preprocess;
diff --git a/src/language-html/utils.js b/src/language-html/utils.js
index 59acd028bf53..8531ed7fb290 100644
--- a/src/language-html/utils.js
+++ b/src/language-html/utils.js
@@ -181,33 +181,6 @@ function isDanglingSpaceSensitiveNode(node) {
   );
 }
 
-/**
- * @param {unknown} node
- * @param {(node: unknown, stack: Array<string | object>)} fn
- * @param {unknown=} parent
- */
-function mapNode(node, fn, stack = []) {
-  const newNode = Object.assign({}, node);
-
-  if (newNode.children) {
-    newNode.children = newNode.children.map((child, childIndex) =>
-      mapNode(child, fn, [childIndex, node].concat(stack))
-    );
-  }
-
-  return fn(newNode, stack);
-}
-
-function getPrevNode(stack) {
-  const [index, parent] = stack;
-
-  if (typeof index !== "number" || index === 0) {
-    return null;
-  }
-
-  return parent.children[index - 1];
-}
-
 function replaceNewlines(text, replacement) {
   return text
     .split(/(\n)/g)
@@ -595,7 +568,6 @@ module.exports = {
   getNodeCssStyleDisplay,
   getNodeCssStyleWhiteSpace,
   getPrettierIgnoreAttributeCommentData,
-  getPrevNode,
   hasPrettierIgnore,
   identity,
   inferScriptParser,
@@ -607,7 +579,6 @@ module.exports = {
   isScriptLikeTag,
   isTrailingSpaceSensitiveNode,
   isWhitespaceSensitiveNode,
-  mapNode,
   normalizeParts,
   preferHardlineAsLeadingSpaces,
   preferHardlineAsTrailingSpaces,

From 3d712d76e90422c3822fd4cf0640bdf4ded5db81 Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Fri, 2 Nov 2018 22:23:09 +0800
Subject: [PATCH 167/177] refactor

---
 src/language-html/preprocess.js | 53 +++++++++++----------------------
 src/language-html/utils.js      | 42 +++++++++++++++-----------
 2 files changed, 42 insertions(+), 53 deletions(-)

diff --git a/src/language-html/preprocess.js b/src/language-html/preprocess.js
index 4c953c0dded2..fd3704e2b118 100644
--- a/src/language-html/preprocess.js
+++ b/src/language-html/preprocess.js
@@ -305,43 +305,26 @@ function addIsSpaceSensitive(ast /*, options */) {
 
     return node.clone({
       children: node.children
-        // set isLeadingSpaceSensitive
-        .map((child, i, children) => {
-          const prevChild = i === 0 ? null : children[i - 1];
-          const nextChild = i === children.length - 1 ? null : children[i + 1];
-          return child.clone({
-            isLeadingSpaceSensitive: isLeadingSpaceSensitiveNode(child, {
-              parent: node,
-              prev: prevChild,
-              next: nextChild
-            })
+        .map(child => {
+          return Object.assign({}, child, {
+            isLeadingSpaceSensitive: isLeadingSpaceSensitiveNode(child),
+            isTrailingSpaceSensitive: isTrailingSpaceSensitiveNode(child)
           });
         })
-        // set isTrailingSpaceSensitive and update isLeadingSpaceSensitive if necessary
-        .reduce((newChildren, child, i, children) => {
-          const prevChild = i === 0 ? null : newChildren[i - 1];
-          const nextChild = i === children.length - 1 ? null : children[i + 1];
-          const isTrailingSpaceSensitive =
-            nextChild && !nextChild.isLeadingSpaceSensitive
-              ? false
-              : isTrailingSpaceSensitiveNode(child, {
-                  parent: node,
-                  prev: prevChild,
-                  next: nextChild
-                });
-          return newChildren.concat(
-            child.clone(
-              Object.assign(
-                { isTrailingSpaceSensitive },
-                prevChild &&
-                !prevChild.isTrailingSpaceSensitive &&
-                child.isLeadingSpaceSensitive
-                  ? { isLeadingSpaceSensitive: false }
-                  : null
-              )
-            )
-          );
-        }, [])
+        .map((child, index, children) =>
+          Object.assign({}, child, {
+            isLeadingSpaceSensitive:
+              index === 0
+                ? child.isLeadingSpaceSensitive
+                : children[index - 1].isTrailingSpaceSensitive &&
+                  child.isLeadingSpaceSensitive,
+            isTrailingSpaceSensitive:
+              index === children.length - 1
+                ? child.isTrailingSpaceSensitive
+                : children[index + 1].isLeadingSpaceSensitive &&
+                  child.isTrailingSpaceSensitive
+          })
+        )
     });
   });
 }
diff --git a/src/language-html/utils.js b/src/language-html/utils.js
index 8531ed7fb290..bb60803e79df 100644
--- a/src/language-html/utils.js
+++ b/src/language-html/utils.js
@@ -108,66 +108,72 @@ function isIndentationSensitiveNode(node) {
   return getNodeCssStyleWhiteSpace(node).startsWith("pre");
 }
 
-function isLeadingSpaceSensitiveNode(node, { prev, parent }) {
+function isLeadingSpaceSensitiveNode(node) {
   if (isFrontMatterNode(node)) {
     return false;
   }
 
-  if (!parent || parent.cssDisplay === "none") {
+  if (!node.parent || node.parent.cssDisplay === "none") {
     return false;
   }
 
   if (
     !node.prev &&
-    parent.type === "element" &&
-    parent.tagDefinition.ignoreFirstLf
+    node.parent.type === "element" &&
+    node.parent.tagDefinition.ignoreFirstLf
   ) {
     return false;
   }
 
-  if (isPreLikeNode(parent)) {
+  if (isPreLikeNode(node.parent)) {
     return true;
   }
 
   if (
-    !prev &&
-    (parent.type === "root" ||
-      isScriptLikeTag(parent) ||
-      !isFirstChildLeadingSpaceSensitiveCssDisplay(parent.cssDisplay))
+    !node.prev &&
+    (node.parent.type === "root" ||
+      isScriptLikeTag(node.parent) ||
+      !isFirstChildLeadingSpaceSensitiveCssDisplay(node.parent.cssDisplay))
   ) {
     return false;
   }
 
-  if (prev && !isNextLeadingSpaceSensitiveCssDisplay(prev.cssDisplay)) {
+  if (
+    node.prev &&
+    !isNextLeadingSpaceSensitiveCssDisplay(node.prev.cssDisplay)
+  ) {
     return false;
   }
 
   return true;
 }
 
-function isTrailingSpaceSensitiveNode(node, { next, parent }) {
+function isTrailingSpaceSensitiveNode(node) {
   if (isFrontMatterNode(node)) {
     return false;
   }
 
-  if (!parent || parent.cssDisplay === "none") {
+  if (!node.parent || node.parent.cssDisplay === "none") {
     return false;
   }
 
-  if (isPreLikeNode(parent)) {
+  if (isPreLikeNode(node.parent)) {
     return true;
   }
 
   if (
-    !next &&
-    (parent.type === "root" ||
-      isScriptLikeTag(parent) ||
-      !isLastChildTrailingSpaceSensitiveCssDisplay(parent.cssDisplay))
+    !node.next &&
+    (node.parent.type === "root" ||
+      isScriptLikeTag(node.parent) ||
+      !isLastChildTrailingSpaceSensitiveCssDisplay(node.parent.cssDisplay))
   ) {
     return false;
   }
 
-  if (next && !isPrevTrailingSpaceSensitiveCssDisplay(next.cssDisplay)) {
+  if (
+    node.next &&
+    !isPrevTrailingSpaceSensitiveCssDisplay(node.next.cssDisplay)
+  ) {
     return false;
   }
 

From 68bb0d7a54dfdf258439ba8c83dbe2ea2d3e3d6a Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Fri, 2 Nov 2018 22:32:55 +0800
Subject: [PATCH 168/177] refactor

---
 src/language-html/preprocess.js | 8 +++-----
 src/language-html/utils.js      | 6 +++---
 2 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/src/language-html/preprocess.js b/src/language-html/preprocess.js
index fd3704e2b118..3450d75ed702 100644
--- a/src/language-html/preprocess.js
+++ b/src/language-html/preprocess.js
@@ -279,11 +279,9 @@ function extractWhitespaces(ast /*, options*/) {
 }
 
 function addCssDisplay(ast, options) {
-  return ast.map(node => {
-    return node.clone({
-      cssDisplay: getNodeCssStyleDisplay(node, node.prev, options)
-    });
-  });
+  return ast.map(node =>
+    node.clone({ cssDisplay: getNodeCssStyleDisplay(node, options) })
+  );
 }
 
 /**
diff --git a/src/language-html/utils.js b/src/language-html/utils.js
index bb60803e79df..3cd56b50a2dd 100644
--- a/src/language-html/utils.js
+++ b/src/language-html/utils.js
@@ -393,10 +393,10 @@ function countParents(path, predicate = () => true) {
   return counter;
 }
 
-function getNodeCssStyleDisplay(node, prevNode, options) {
-  if (prevNode && prevNode.type === "comment") {
+function getNodeCssStyleDisplay(node, options) {
+  if (node.prev && node.prev.type === "comment") {
     // <!-- display: block -->
-    const match = prevNode.value.match(/^\s*display:\s*([a-z]+)\s*$/);
+    const match = node.prev.value.match(/^\s*display:\s*([a-z]+)\s*$/);
     if (match) {
       return match[1];
     }

From 38ab648b2e6f11ce2c326cc586c58538389e8a5d Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Fri, 2 Nov 2018 22:43:15 +0800
Subject: [PATCH 169/177] refactor

---
 src/language-html/preprocess.js | 33 +++++++++++++++------------------
 1 file changed, 15 insertions(+), 18 deletions(-)

diff --git a/src/language-html/preprocess.js b/src/language-html/preprocess.js
index 3450d75ed702..7bbf1b31fe92 100644
--- a/src/language-html/preprocess.js
+++ b/src/language-html/preprocess.js
@@ -14,9 +14,9 @@ const PREPROCESS_PIPELINE = [
   removeIgnorableFirstLf,
   mergeCdataIntoText,
   extractInterpolation,
-  addIsSelfClosing,
   extractWhitespaces,
   addCssDisplay,
+  addIsSelfClosing,
   addIsSpaceSensitive
 ];
 
@@ -164,22 +164,6 @@ function extractInterpolation(ast, options) {
   });
 }
 
-/** add `isSelfClosing` for void tags, directives, and comments */
-function addIsSelfClosing(ast /*, options */) {
-  return ast.map(node => {
-    if (
-      !node.children ||
-      (node.type === "element" &&
-        (node.tagDefinition.isVoid ||
-          // self-closing
-          node.startSourceSpan === node.endSourceSpan))
-    ) {
-      return node.clone({ isSelfClosing: true });
-    }
-    return node;
-  });
-}
-
 /**
  * - add `hasLeadingSpaces` field
  * - add `hasTrailingSpaces` field
@@ -278,9 +262,22 @@ function extractWhitespaces(ast /*, options*/) {
   });
 }
 
+function addIsSelfClosing(ast /*, options */) {
+  return ast.map(node =>
+    Object.assign(node, {
+      isSelfClosing:
+        !node.children ||
+        (node.type === "element" &&
+          (node.tagDefinition.isVoid ||
+            // self-closing
+            node.startSourceSpan === node.endSourceSpan))
+    })
+  );
+}
+
 function addCssDisplay(ast, options) {
   return ast.map(node =>
-    node.clone({ cssDisplay: getNodeCssStyleDisplay(node, options) })
+    Object.assign(node, { cssDisplay: getNodeCssStyleDisplay(node, options) })
   );
 }
 

From 4eafbf1a18f6285964c4670b1297b54ffd643f80 Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Fri, 2 Nov 2018 23:14:55 +0800
Subject: [PATCH 170/177] refactor

---
 src/language-html/preprocess.js | 80 ++++++++++++++++++---------------
 1 file changed, 45 insertions(+), 35 deletions(-)

diff --git a/src/language-html/preprocess.js b/src/language-html/preprocess.js
index 7bbf1b31fe92..948806e5e1a8 100644
--- a/src/language-html/preprocess.js
+++ b/src/language-html/preprocess.js
@@ -51,51 +51,61 @@ function removeIgnorableFirstLf(ast /*, options */) {
   });
 }
 
-function mergeCdataIntoText(ast /*, options */) {
+function mergeNodeIntoText(ast, shouldMerge, getValue) {
   return ast.map(node => {
-    if (node.children && node.children.some(child => child.type === "cdata")) {
-      const newChildren = [];
-      for (const child of node.children) {
-        if (child.type !== "text" && child.type !== "cdata") {
-          newChildren.push(child);
-          continue;
-        }
+    if (node.children) {
+      const shouldMergeResults = node.children.map(shouldMerge);
+      if (shouldMergeResults.some(Boolean)) {
+        const newChildren = [];
+        for (let i = 0; i < node.children.length; i++) {
+          const child = node.children[i];
+
+          if (child.type !== "text" && !shouldMergeResults[i]) {
+            newChildren.push(child);
+            continue;
+          }
 
-        const newChild =
-          child.type === "text"
-            ? child
-            : child.clone({
-                type: "text",
-                value: `<![CDATA[${child.value}]]>`
-              });
-
-        if (
-          newChildren.length === 0 ||
-          newChildren[newChildren.length - 1].type !== "text"
-        ) {
-          newChildren.push(newChild);
-          continue;
-        }
+          const newChild =
+            child.type === "text"
+              ? child
+              : child.clone({ type: "text", value: getValue(child) });
+
+          if (
+            newChildren.length === 0 ||
+            newChildren[newChildren.length - 1].type !== "text"
+          ) {
+            newChildren.push(newChild);
+            continue;
+          }
 
-        const lastChild = newChildren.pop();
-        const ParseSourceSpan = lastChild.sourceSpan.constructor;
-        newChildren.push(
-          lastChild.clone({
-            value: lastChild.value + newChild.value,
-            sourceSpan: new ParseSourceSpan(
-              lastChild.sourceSpan.start,
-              newChild.sourceSpan.end
-            )
-          })
-        );
+          const lastChild = newChildren.pop();
+          const ParseSourceSpan = lastChild.sourceSpan.constructor;
+          newChildren.push(
+            lastChild.clone({
+              value: lastChild.value + newChild.value,
+              sourceSpan: new ParseSourceSpan(
+                lastChild.sourceSpan.start,
+                newChild.sourceSpan.end
+              )
+            })
+          );
+        }
+        return node.clone({ children: newChildren });
       }
-      return node.clone({ children: newChildren });
     }
 
     return node;
   });
 }
 
+function mergeCdataIntoText(ast /*, options */) {
+  return mergeNodeIntoText(
+    ast,
+    node => node.type === "cdata",
+    node => `<![CDATA[${node.value}]]>`
+  );
+}
+
 function extractInterpolation(ast, options) {
   if (options.parser === "html") {
     return ast;

From 5de51d3438e29e4ee5787a4b3e1987ce0b1cf006 Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Fri, 2 Nov 2018 23:43:38 +0800
Subject: [PATCH 171/177] feat: treat simple element as text

---
 src/language-html/preprocess.js               | 60 ++++++++++++++++++-
 .../__snapshots__/jsfmt.spec.js.snap          | 14 ++---
 2 files changed, 64 insertions(+), 10 deletions(-)

diff --git a/src/language-html/preprocess.js b/src/language-html/preprocess.js
index 948806e5e1a8..d12c4d03cd15 100644
--- a/src/language-html/preprocess.js
+++ b/src/language-html/preprocess.js
@@ -17,7 +17,8 @@ const PREPROCESS_PIPELINE = [
   extractWhitespaces,
   addCssDisplay,
   addIsSelfClosing,
-  addIsSpaceSensitive
+  addIsSpaceSensitive,
+  mergeSimpleElementIntoText
 ];
 
 function preprocess(ast, options) {
@@ -106,6 +107,63 @@ function mergeCdataIntoText(ast /*, options */) {
   );
 }
 
+function mergeSimpleElementIntoText(ast /*, options */) {
+  const isSimpleElement = node =>
+    node.type === "element" &&
+    node.attrs.length === 0 &&
+    node.children.length === 1 &&
+    node.firstChild.type === "text" &&
+    // \xA0: non-breaking whitespace
+    !/[^\S\xA0]/.test(node.children[0].value) &&
+    !node.firstChild.hasLeadingSpaces &&
+    !node.firstChild.hasTrailingSpaces &&
+    node.isLeadingSpaceSensitive &&
+    !node.hasLeadingSpaces &&
+    node.isTrailingSpaceSensitive &&
+    !node.hasTrailingSpaces &&
+    node.prev &&
+    node.prev.type === "text" &&
+    node.next &&
+    node.next.type === "text";
+  return ast.map(node => {
+    if (node.children) {
+      const isSimpleElementResults = node.children.map(isSimpleElement);
+      if (isSimpleElementResults.some(Boolean)) {
+        const newChildren = [];
+        for (let i = 0; i < node.children.length; i++) {
+          const child = node.children[i];
+          if (isSimpleElementResults[i]) {
+            const lastChild = newChildren.pop();
+            const nextChild = node.children[++i];
+            const ParseSourceSpan = node.sourceSpan.constructor;
+            const { isTrailingSpaceSensitive, hasTrailingSpaces } = nextChild;
+            newChildren.push(
+              lastChild.clone({
+                value:
+                  lastChild.value +
+                  `<${child.rawName}>` +
+                  child.firstChild.value +
+                  `</${child.rawName}>` +
+                  nextChild.value,
+                sourceSpan: new ParseSourceSpan(
+                  lastChild.sourceSpan.start,
+                  nextChild.sourceSpan.end
+                ),
+                isTrailingSpaceSensitive,
+                hasTrailingSpaces
+              })
+            );
+          } else {
+            newChildren.push(child);
+          }
+        }
+        return node.clone({ children: newChildren });
+      }
+    }
+    return node;
+  });
+}
+
 function extractInterpolation(ast, options) {
   if (options.parser === "html") {
     return ast;
diff --git a/tests/html_tags/__snapshots__/jsfmt.spec.js.snap b/tests/html_tags/__snapshots__/jsfmt.spec.js.snap
index 623b44f84418..008704521b93 100644
--- a/tests/html_tags/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_tags/__snapshots__/jsfmt.spec.js.snap
@@ -1654,9 +1654,8 @@ exports[`tags.html - html-verify 1`] = `
 </div>
 <x:root><SPAN>foreign tag name should not be lower cased</SPAN></x:root>
 <div>
-  Lorem ipsum dolor sit amet, consectetur adipiscing elit, "<strong
-    >seddoeiusmod</strong
-  >".
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+  "<strong>seddoeiusmod</strong>".
 </div>
 <div>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit,
@@ -2134,9 +2133,7 @@ exports[`tags.html - html-verify 2`] = `
   consectetur
   adipiscing
   elit,
-  "<strong
-    >seddoeiusmod</strong
-  >".
+  "<strong>seddoeiusmod</strong>".
 </div>
 <div>
   Lorem
@@ -2623,9 +2620,8 @@ exports[`tags.html - html-verify 4`] = `
 </div>
 <x:root><SPAN>foreign tag name should not be lower cased</SPAN></x:root>
 <div>
-  Lorem ipsum dolor sit amet, consectetur adipiscing elit, "<strong
-    >seddoeiusmod</strong
-  >".
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+  "<strong>seddoeiusmod</strong>".
 </div>
 <div>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit,

From 4df14e0ab7993b29de754a6841efd4b3a4b31629 Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Fri, 2 Nov 2018 23:44:26 +0800
Subject: [PATCH 172/177] test: add tests

---
 .../__snapshots__/jsfmt.spec.js.snap          | 24 +++++++++++++++++++
 tests/html_angular/attributes.component.html  |  3 +++
 2 files changed, 27 insertions(+)

diff --git a/tests/html_angular/__snapshots__/jsfmt.spec.js.snap b/tests/html_angular/__snapshots__/jsfmt.spec.js.snap
index b535bd63ef6a..888ca33b77c1 100644
--- a/tests/html_angular/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_angular/__snapshots__/jsfmt.spec.js.snap
@@ -18,6 +18,9 @@ exports[`attributes.component.html - angular-verify 1`] = `
     [target]=" { 
       trailingComma : 'notAllowed'
     }"
+    [target]=" [ 
+      longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong
+    ]"
     [target]=" true "
     [target]=" undefined "
     [target]=" null "
@@ -97,6 +100,11 @@ exports[`attributes.component.html - angular-verify 1`] = `
   [target]="{
     trailingComma: 'notAllowed'
   }"
+  [target]="
+    [
+      longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong
+    ]
+  "
   [target]="true"
   [target]="undefined"
   [target]="null"
@@ -201,6 +209,9 @@ exports[`attributes.component.html - angular-verify 2`] = `
     [target]=" { 
       trailingComma : 'notAllowed'
     }"
+    [target]=" [ 
+      longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong
+    ]"
     [target]=" true "
     [target]=" undefined "
     [target]=" null "
@@ -280,6 +291,11 @@ exports[`attributes.component.html - angular-verify 2`] = `
   [target]="{
     trailingComma: 'notAllowed'
   }"
+  [target]="
+    [
+      longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong
+    ]
+  "
   [target]="true"
   [target]="undefined"
   [target]="null"
@@ -384,6 +400,9 @@ exports[`attributes.component.html - angular-verify 3`] = `
     [target]=" { 
       trailingComma : 'notAllowed'
     }"
+    [target]=" [ 
+      longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong
+    ]"
     [target]=" true "
     [target]=" undefined "
     [target]=" null "
@@ -509,6 +528,11 @@ exports[`attributes.component.html - angular-verify 3`] = `
     trailingComma:
       'notAllowed'
   }"
+  [target]="
+    [
+      longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong
+    ]
+  "
   [target]="
     true
   "
diff --git a/tests/html_angular/attributes.component.html b/tests/html_angular/attributes.component.html
index 1991e941a83a..06e4b89b6bf8 100644
--- a/tests/html_angular/attributes.component.html
+++ b/tests/html_angular/attributes.component.html
@@ -15,6 +15,9 @@
     [target]=" { 
       trailingComma : 'notAllowed'
     }"
+    [target]=" [ 
+      longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong
+    ]"
     [target]=" true "
     [target]=" undefined "
     [target]=" null "

From cc19d0abbc5676fb3303ea5e1f200e7d6b9cfc87 Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Fri, 2 Nov 2018 23:45:36 +0800
Subject: [PATCH 173/177] fix: hug array expression

---
 src/language-html/printer-html.js             |  6 +++-
 .../__snapshots__/jsfmt.spec.js.snap          | 32 +++++++------------
 2 files changed, 17 insertions(+), 21 deletions(-)

diff --git a/src/language-html/printer-html.js b/src/language-html/printer-html.js
index caba01a65d62..990b78fe1b56 100644
--- a/src/language-html/printer-html.js
+++ b/src/language-html/printer-html.js
@@ -806,7 +806,11 @@ function printEmbeddedAttributeValue(node, originalTextToDoc, options) {
         : root.type === "JsExpressionRoot"
           ? root.node
           : root;
-    if (rootNode && rootNode.type === "ObjectExpression") {
+    if (
+      rootNode &&
+      (rootNode.type === "ObjectExpression" ||
+        rootNode.type === "ArrayExpression")
+    ) {
       shouldHug = true;
     }
   };
diff --git a/tests/html_angular/__snapshots__/jsfmt.spec.js.snap b/tests/html_angular/__snapshots__/jsfmt.spec.js.snap
index 888ca33b77c1..7ab4c3c1a7ce 100644
--- a/tests/html_angular/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_angular/__snapshots__/jsfmt.spec.js.snap
@@ -100,11 +100,9 @@ exports[`attributes.component.html - angular-verify 1`] = `
   [target]="{
     trailingComma: 'notAllowed'
   }"
-  [target]="
-    [
-      longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong
-    ]
-  "
+  [target]="[
+    longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong
+  ]"
   [target]="true"
   [target]="undefined"
   [target]="null"
@@ -291,11 +289,9 @@ exports[`attributes.component.html - angular-verify 2`] = `
   [target]="{
     trailingComma: 'notAllowed'
   }"
-  [target]="
-    [
-      longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong
-    ]
-  "
+  [target]="[
+    longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong
+  ]"
   [target]="true"
   [target]="undefined"
   [target]="null"
@@ -513,11 +509,9 @@ exports[`attributes.component.html - angular-verify 3`] = `
       b
     ]
   "
-  [target]="
-    [
-      1
-    ]
-  "
+  [target]="[
+    1
+  ]"
   [target]="{
     a: 1
   }"
@@ -528,11 +522,9 @@ exports[`attributes.component.html - angular-verify 3`] = `
     trailingComma:
       'notAllowed'
   }"
-  [target]="
-    [
-      longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong
-    ]
-  "
+  [target]="[
+    longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong
+  ]"
   [target]="
     true
   "

From c17a52c209f734ae474aa2a2ecb9773b0cf079ac Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Sat, 3 Nov 2018 10:06:41 +0800
Subject: [PATCH 174/177] fix: do not throw on root custom elements

---
 src/language-html/utils.js                    |  6 ++-
 .../__snapshots__/jsfmt.spec.js.snap          | 45 +++++++++++++++++++
 tests/html_tags/custom-element.html           |  2 +
 3 files changed, 51 insertions(+), 2 deletions(-)
 create mode 100644 tests/html_tags/custom-element.html

diff --git a/src/language-html/utils.js b/src/language-html/utils.js
index 3cd56b50a2dd..4fca166e6802 100644
--- a/src/language-html/utils.js
+++ b/src/language-html/utils.js
@@ -265,7 +265,8 @@ function hasLeadingLineBreak(node) {
     node.hasLeadingSpaces &&
     (node.prev
       ? node.prev.sourceSpan.end.line < node.sourceSpan.start.line
-      : node.parent.startSourceSpan.end.line < node.sourceSpan.start.line)
+      : node.parent.type === "root" ||
+        node.parent.startSourceSpan.end.line < node.sourceSpan.start.line)
   );
 }
 
@@ -274,7 +275,8 @@ function hasTrailingLineBreak(node) {
     node.hasTrailingSpaces &&
     (node.next
       ? node.next.sourceSpan.start.line > node.sourceSpan.end.line
-      : node.parent.endSourceSpan.start.line > node.sourceSpan.end.line)
+      : node.parent.type === "root" ||
+        node.parent.endSourceSpan.start.line > node.sourceSpan.end.line)
   );
 }
 
diff --git a/tests/html_tags/__snapshots__/jsfmt.spec.js.snap b/tests/html_tags/__snapshots__/jsfmt.spec.js.snap
index 008704521b93..0115eee0fd53 100644
--- a/tests/html_tags/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_tags/__snapshots__/jsfmt.spec.js.snap
@@ -204,6 +204,51 @@ exports[`closing-at-start.html - html-verify 5`] = `
 
 `;
 
+exports[`custom-element.html - html-verify 1`] = `
+<app-foo></app-foo>
+<app-bar></app-bar>
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+<app-foo></app-foo>
+<app-bar></app-bar>
+
+`;
+
+exports[`custom-element.html - html-verify 2`] = `
+<app-foo></app-foo>
+<app-bar></app-bar>
+~
+<app-foo></app-foo>
+<app-bar></app-bar>
+
+`;
+
+exports[`custom-element.html - html-verify 3`] = `
+<app-foo></app-foo>
+<app-bar></app-bar>
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+<app-foo></app-foo>
+<app-bar></app-bar>
+
+`;
+
+exports[`custom-element.html - html-verify 4`] = `
+<app-foo></app-foo>
+<app-bar></app-bar>
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+<app-foo></app-foo>
+<app-bar></app-bar>
+
+`;
+
+exports[`custom-element.html - html-verify 5`] = `
+<app-foo></app-foo>
+<app-bar></app-bar>
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+<app-foo></app-foo>
+<app-bar></app-bar>
+
+`;
+
 exports[`openging-at-end.html - html-verify 1`] = `
 <p
   >Want to write us a letter? Use our<a
diff --git a/tests/html_tags/custom-element.html b/tests/html_tags/custom-element.html
new file mode 100644
index 000000000000..c430869731c8
--- /dev/null
+++ b/tests/html_tags/custom-element.html
@@ -0,0 +1,2 @@
+<app-foo></app-foo>
+<app-bar></app-bar>

From ddc95999c24aed0871106648448b6c4b135b0b4c Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Sun, 4 Nov 2018 21:53:01 +0800
Subject: [PATCH 175/177] refactor

---
 src/language-html/ast.js   |  8 ++++++++
 src/language-html/utils.js | 31 +++++++++++++------------------
 2 files changed, 21 insertions(+), 18 deletions(-)

diff --git a/src/language-html/ast.js b/src/language-html/ast.js
index 9fc4244013f8..13b6c9ba8aa2 100644
--- a/src/language-html/ast.js
+++ b/src/language-html/ast.js
@@ -20,6 +20,14 @@ class Node {
   _setNodes(key, nodes) {
     if (nodes !== this[key]) {
       this[key] = cloneAndUpdateNodes(nodes, this);
+      if (key === "attrs") {
+        setNonEnumerableProperties(this, {
+          attrMap: this[key].reduce((reduced, attr) => {
+            reduced[attr.fullName] = attr.value;
+            return reduced;
+          }, Object.create(null))
+        });
+      }
     }
   }
 
diff --git a/src/language-html/utils.js b/src/language-html/utils.js
index 4fca166e6802..9ed695f654a8 100644
--- a/src/language-html/utils.js
+++ b/src/language-html/utils.js
@@ -301,45 +301,40 @@ function hasNonTextChild(node) {
 }
 
 function inferScriptParser(node) {
-  const attrMap = node.attrs.reduce((reduced, attr) => {
-    reduced[attr.name] = attr.value;
-    return reduced;
-  }, {});
-
-  if (node.name === "script" && !attrMap.src) {
+  if (node.name === "script" && !node.attrMap.src) {
     if (
-      (!attrMap.lang && !attrMap.type) ||
-      attrMap.type === "module" ||
-      attrMap.type === "text/javascript" ||
-      attrMap.type === "text/babel" ||
-      attrMap.type === "application/javascript"
+      (!node.attrMap.lang && !node.attrMap.type) ||
+      node.attrMap.type === "module" ||
+      node.attrMap.type === "text/javascript" ||
+      node.attrMap.type === "text/babel" ||
+      node.attrMap.type === "application/javascript"
     ) {
       return "babylon";
     }
 
     if (
-      attrMap.type === "application/x-typescript" ||
-      attrMap.lang === "ts" ||
-      attrMap.lang === "tsx"
+      node.attrMap.type === "application/x-typescript" ||
+      node.attrMap.lang === "ts" ||
+      node.attrMap.lang === "tsx"
     ) {
       return "typescript";
     }
 
-    if (attrMap.type === "text/markdown") {
+    if (node.attrMap.type === "text/markdown") {
       return "markdown";
     }
   }
 
   if (node.name === "style") {
-    if (!attrMap.lang || attrMap.lang === "postcss") {
+    if (!node.attrMap.lang || node.attrMap.lang === "postcss") {
       return "css";
     }
 
-    if (attrMap.lang === "scss") {
+    if (node.attrMap.lang === "scss") {
       return "scss";
     }
 
-    if (attrMap.lang === "less") {
+    if (node.attrMap.lang === "less") {
       return "less";
     }
   }

From 1b74237ddd6f51021a570d42144dd5aa1fb30d6d Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Sun, 4 Nov 2018 22:04:17 +0800
Subject: [PATCH 176/177] test: add tests

---
 .../html_svg/__snapshots__/jsfmt.spec.js.snap | 55 +++++++++++++++++++
 tests/html_svg/svg.html                       | 33 +++++++++++
 2 files changed, 88 insertions(+)

diff --git a/tests/html_svg/__snapshots__/jsfmt.spec.js.snap b/tests/html_svg/__snapshots__/jsfmt.spec.js.snap
index ba4529020731..ad2cd84d7849 100644
--- a/tests/html_svg/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_svg/__snapshots__/jsfmt.spec.js.snap
@@ -12,6 +12,39 @@ exports[`svg.html - html-verify 1`] = `
     </svg>
   </body>
 </html>
+
+<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+<defs /> <style >
+    polygon { fill: black }
+
+    div {
+  color: white;
+      font:18px serif;
+      height: 100%;
+      overflow: auto;
+    }
+  </style>
+
+ <g>
+  <g><polygon points="5,5 195,10 185,185 10,195" />
+      <text>    Text</text></g>
+  </g>
+
+  <!-- Common use case: embed HTML text into SVG -->
+  <foreignObject x="20" y="20" width="160" height="160">
+    <!--
+      In the context of SVG embeded into HTML, the XHTML namespace could be avoided, but it is mandatory in the context of an SVG document
+    -->
+    <div xmlns="http://www.w3.org/1999/xhtml">
+    <p>
+  123
+      </p>
+      <span>
+        123
+        </span>
+    </div>
+  </foreignObject>
+</svg>
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 <!DOCTYPE html>
 <html>
@@ -32,4 +65,26 @@ exports[`svg.html - html-verify 1`] = `
   </body>
 </html>
 
+<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+  <defs />
+  <style>
+    polygon { fill: black } div { color: white; font:18px serif; height: 100%;
+    overflow: auto; }
+  </style>
+
+  <g>
+    <g><polygon points="5,5 195,10 185,185 10,195" /> <text> Text</text></g>
+  </g>
+
+  <!-- Common use case: embed HTML text into SVG -->
+  <foreignObject x="20" y="20" width="160" height="160">
+    <!--
+      In the context of SVG embeded into HTML, the XHTML namespace could be avoided, but it is mandatory in the context of an SVG document
+    -->
+    <div xmlns="http://www.w3.org/1999/xhtml">
+      <p> 123 </p> <span> 123 </span>
+    </div>
+  </foreignObject>
+</svg>
+
 `;
diff --git a/tests/html_svg/svg.html b/tests/html_svg/svg.html
index 5d3189faf391..7009b55de539 100644
--- a/tests/html_svg/svg.html
+++ b/tests/html_svg/svg.html
@@ -9,3 +9,36 @@
     </svg>
   </body>
 </html>
+
+<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+<defs /> <style >
+    polygon { fill: black }
+
+    div {
+  color: white;
+      font:18px serif;
+      height: 100%;
+      overflow: auto;
+    }
+  </style>
+
+ <g>
+  <g><polygon points="5,5 195,10 185,185 10,195" />
+      <text>    Text</text></g>
+  </g>
+
+  <!-- Common use case: embed HTML text into SVG -->
+  <foreignObject x="20" y="20" width="160" height="160">
+    <!--
+      In the context of SVG embeded into HTML, the XHTML namespace could be avoided, but it is mandatory in the context of an SVG document
+    -->
+    <div xmlns="http://www.w3.org/1999/xhtml">
+    <p>
+  123
+      </p>
+      <span>
+        123
+        </span>
+    </div>
+  </foreignObject>
+</svg>

From 519024cec4284946cf30bf23c7b5917fe334e8f1 Mon Sep 17 00:00:00 2001
From: Ika <ikatyang@gmail.com>
Date: Sun, 4 Nov 2018 22:25:52 +0800
Subject: [PATCH 177/177] feat: improve svg in html formatting

---
 src/language-html/utils.js                    | 30 +++++++++++++++++--
 .../html_svg/__snapshots__/jsfmt.spec.js.snap | 20 ++++++++++---
 2 files changed, 43 insertions(+), 7 deletions(-)

diff --git a/src/language-html/utils.js b/src/language-html/utils.js
index 9ed695f654a8..cd50b31a1d94 100644
--- a/src/language-html/utils.js
+++ b/src/language-html/utils.js
@@ -83,8 +83,9 @@ function getPrettierIgnoreAttributeCommentData(value) {
 function isScriptLikeTag(node) {
   return (
     node.type === "element" &&
-    !node.namespace &&
-    (node.name === "script" || node.name === "style")
+    (node.fullName === "script" ||
+      node.fullName === "style" ||
+      node.fullName === "svg:style")
   );
 }
 
@@ -390,6 +391,20 @@ function countParents(path, predicate = () => true) {
   return counter;
 }
 
+function hasParent(node, fn) {
+  let current = node;
+
+  while (current) {
+    if (fn(current)) {
+      return true;
+    }
+
+    current = current.parent;
+  }
+
+  return false;
+}
+
 function getNodeCssStyleDisplay(node, options) {
   if (node.prev && node.prev.type === "comment") {
     // <!-- display: block -->
@@ -399,6 +414,15 @@ function getNodeCssStyleDisplay(node, options) {
     }
   }
 
+  let isInSvgForeignObject = false;
+  if (node.type === "element" && node.namespace === "svg") {
+    if (hasParent(node, parent => parent.fullName === "svg:foreignObject")) {
+      isInSvgForeignObject = true;
+    } else {
+      return node.name === "svg" ? "inline-block" : "block";
+    }
+  }
+
   switch (options.htmlWhitespaceSensitivity) {
     case "strict":
       return "inline";
@@ -407,7 +431,7 @@ function getNodeCssStyleDisplay(node, options) {
     default:
       return (
         (node.type === "element" &&
-          !node.namespace &&
+          (!node.namespace || isInSvgForeignObject) &&
           CSS_DISPLAY_TAGS[node.name]) ||
         CSS_DISPLAY_DEFAULT
       );
diff --git a/tests/html_svg/__snapshots__/jsfmt.spec.js.snap b/tests/html_svg/__snapshots__/jsfmt.spec.js.snap
index ad2cd84d7849..112639ef3d2d 100644
--- a/tests/html_svg/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_svg/__snapshots__/jsfmt.spec.js.snap
@@ -68,12 +68,23 @@ exports[`svg.html - html-verify 1`] = `
 <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
   <defs />
   <style>
-    polygon { fill: black } div { color: white; font:18px serif; height: 100%;
-    overflow: auto; }
+    polygon {
+      fill: black;
+    }
+
+    div {
+      color: white;
+      font: 18px serif;
+      height: 100%;
+      overflow: auto;
+    }
   </style>
 
   <g>
-    <g><polygon points="5,5 195,10 185,185 10,195" /> <text> Text</text></g>
+    <g>
+      <polygon points="5,5 195,10 185,185 10,195" />
+      <text>Text</text>
+    </g>
   </g>
 
   <!-- Common use case: embed HTML text into SVG -->
@@ -82,7 +93,8 @@ exports[`svg.html - html-verify 1`] = `
       In the context of SVG embeded into HTML, the XHTML namespace could be avoided, but it is mandatory in the context of an SVG document
     -->
     <div xmlns="http://www.w3.org/1999/xhtml">
-      <p> 123 </p> <span> 123 </span>
+      <p>123</p>
+      <span> 123 </span>
     </div>
   </foreignObject>
 </svg>