From fdb7467de7e8f0791e25f580e75aee09273bf136 Mon Sep 17 00:00:00 2001
From: Lucas Azzola <derflatulator@gmail.com>
Date: Sun, 11 Jun 2017 13:10:34 +1000
Subject: [PATCH] feat(html): add support for HTML fragments (#2093)

---
 src/parser-parse5.js                          |  3 +-
 src/printer-htmlparser2.js                    | 12 +++++-
 .../__snapshots__/jsfmt.spec.js.snap          | 28 +++++++++----
 tests/html_basics/html-fragment.html          |  3 ++
 .../__snapshots__/jsfmt.spec.js.snap          | 21 ++++++----
 .../__snapshots__/jsfmt.spec.js.snap          | 19 +++++----
 .../__snapshots__/jsfmt.spec.js.snap          | 25 ++++++-----
 .../__snapshots__/jsfmt.spec.js.snap          | 41 +++++++++++++++++++
 tests/multiparser_vue/jsfmt.spec.js           |  1 +
 tests/multiparser_vue/vue-component.vue       | 16 ++++++++
 tests_config/run_spec.js                      |  6 +--
 11 files changed, 138 insertions(+), 37 deletions(-)
 create mode 100644 tests/html_basics/html-fragment.html
 create mode 100644 tests/multiparser_vue/__snapshots__/jsfmt.spec.js.snap
 create mode 100644 tests/multiparser_vue/jsfmt.spec.js
 create mode 100644 tests/multiparser_vue/vue-component.vue

diff --git a/src/parser-parse5.js b/src/parser-parse5.js
index 6f15988b2..18abfaf54 100644
--- a/src/parser-parse5.js
+++ b/src/parser-parse5.js
@@ -6,7 +6,8 @@ function parse(text) {
   // Inline the require to avoid loading all the JS if we don't use it
   const parse5 = require("parse5");
   try {
-    const ast = parse5.parse(text, {
+    const isFragment = !/^\s*<(!doctype|html|head|body)/i.test(text);
+    const ast = (isFragment ? parse5.parseFragment : parse5.parse)(text, {
       treeAdapter: parse5.treeAdapters.htmlparser2,
       locationInfo: true
     });
diff --git a/src/printer-htmlparser2.js b/src/printer-htmlparser2.js
index 5044a8c27..fe6237018 100644
--- a/src/printer-htmlparser2.js
+++ b/src/printer-htmlparser2.js
@@ -1,5 +1,6 @@
 "use strict";
 
+const util = require("./util");
 const docBuilders = require("./doc-builders");
 const concat = docBuilders.concat;
 const join = docBuilders.join;
@@ -62,15 +63,24 @@ function genericPrint(path, options, print) {
         children.push(childPath.call(print));
       }, "children");
 
+      const hasNewline = util.hasNewlineInRange(
+        options.originalText,
+        util.locStart(n),
+        util.locEnd(n)
+      );
+
       return group(
         concat([
+          hasNewline ? hardline : "",
           "<",
           n.name,
           printAttributes(n.attribs),
 
           n.children.length ? ">" : selfClose,
 
-          indent(concat(children)),
+          n.name.toLowerCase() === "html"
+            ? concat(children)
+            : indent(concat(children)),
           n.children.length ? concat([softline, "</", n.name, ">"]) : ""
         ])
       );
diff --git a/tests/html_basics/__snapshots__/jsfmt.spec.js.snap b/tests/html_basics/__snapshots__/jsfmt.spec.js.snap
index 2bcd2edbd..c9d9b2683 100644
--- a/tests/html_basics/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html_basics/__snapshots__/jsfmt.spec.js.snap
@@ -17,13 +17,27 @@ exports[`hello-world.html 1`] = `
 
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 <!DOCTYPE html>
+
 <html lang="en">
-  <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <title>Document</title>
-  </head>
-  <body><!-- A comment --><h1>Hello World</h1></body>
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>Document</title>
+</head>
+
+<body>
+  <!-- A comment -->
+  <h1>Hello World</h1>
+</body>
 </html>
 `;
+
+exports[`html-fragment.html 1`] = `
+<a href="#">Link</a>
+
+<textarea>
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+<a href="#">Link</a><textarea />
+`;
diff --git a/tests/html_basics/html-fragment.html b/tests/html_basics/html-fragment.html
new file mode 100644
index 000000000..2c4026152
--- /dev/null
+++ b/tests/html_basics/html-fragment.html
@@ -0,0 +1,3 @@
+<a href="#">Link</a>
+
+<textarea>
diff --git a/tests/multiparser_html_css/__snapshots__/jsfmt.spec.js.snap b/tests/multiparser_html_css/__snapshots__/jsfmt.spec.js.snap
index bdb844029..c50a1d58e 100644
--- a/tests/multiparser_html_css/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/multiparser_html_css/__snapshots__/jsfmt.spec.js.snap
@@ -15,14 +15,19 @@ exports[`html-with-css-style.html 1`] = `
 
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 <!DOCTYPE html>
+
 <html lang="en">
-  <head>
-    <style>
-      blink {
-        display: none;
-      }
-    </style>
-  </head>
-  <body></body>
+
+<head>
+
+  <style>
+    blink {
+      display: none;
+    }
+  </style>
+</head>
+
+<body>
+</body>
 </html>
 `;
diff --git a/tests/multiparser_html_js/__snapshots__/jsfmt.spec.js.snap b/tests/multiparser_html_js/__snapshots__/jsfmt.spec.js.snap
index b690ed2fc..f58a39ae4 100644
--- a/tests/multiparser_html_js/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/multiparser_html_js/__snapshots__/jsfmt.spec.js.snap
@@ -14,13 +14,18 @@ exports[`html-with-js-script.html 1`] = `
 
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 <!DOCTYPE html>
-<html lang="en">
-  <head>
-    <script type="text/javascript">
-      hello("world");
 
-    </script>
-  </head>
-  <body></body>
+<html lang="en">
+
+<head>
+
+  <script type="text/javascript">
+    hello("world");
+
+  </script>
+</head>
+
+<body>
+</body>
 </html>
 `;
diff --git a/tests/multiparser_html_ts/__snapshots__/jsfmt.spec.js.snap b/tests/multiparser_html_ts/__snapshots__/jsfmt.spec.js.snap
index 1d38772dd..2af6d9f6c 100644
--- a/tests/multiparser_html_ts/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/multiparser_html_ts/__snapshots__/jsfmt.spec.js.snap
@@ -23,16 +23,21 @@ exports[`html-with-ts-script.html 1`] = `
 
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 <!DOCTYPE html>
-<html lang="en">
-  <head>
-    <script lang="ts">
-      type X = { [K in keyof Y]: Partial<K> };
-      class Foo<T> {
-        constructor(private foo: keyof Apple) {}
-      }
 
-    </script>
-  </head>
-  <body></body>
+<html lang="en">
+
+<head>
+
+  <script lang="ts">
+    type X = { [K in keyof Y]: Partial<K> };
+    class Foo<T> {
+      constructor(private foo: keyof Apple) {}
+    }
+
+  </script>
+</head>
+
+<body>
+</body>
 </html>
 `;
diff --git a/tests/multiparser_vue/__snapshots__/jsfmt.spec.js.snap b/tests/multiparser_vue/__snapshots__/jsfmt.spec.js.snap
new file mode 100644
index 000000000..3ca08999c
--- /dev/null
+++ b/tests/multiparser_vue/__snapshots__/jsfmt.spec.js.snap
@@ -0,0 +1,41 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`vue-component.vue 1`] = `
+<template >
+  <h1 >{{greeting}}     world</h1  >
+</template >
+
+<script>
+module  .  exports  =
+{data : function () {return {
+	greeting: "Hello"
+}}
+}
+</script>
+
+<style   scoped >
+p { font-size : 2em ; text-align : center ; }
+
+  </style >
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+<template>
+  <h1>{{greeting}} world</h1>
+</template>
+<script>
+  module.exports = {
+    data: function() {
+      return {
+        greeting: "Hello"
+      };
+    }
+  };
+
+</script>
+<style scoped>
+  p {
+    font-size: 2em;
+    text-align: center;
+  }
+</style>
+`;
diff --git a/tests/multiparser_vue/jsfmt.spec.js b/tests/multiparser_vue/jsfmt.spec.js
new file mode 100644
index 000000000..04b24727f
--- /dev/null
+++ b/tests/multiparser_vue/jsfmt.spec.js
@@ -0,0 +1 @@
+run_spec(__dirname, { parser: "parse5" });
diff --git a/tests/multiparser_vue/vue-component.vue b/tests/multiparser_vue/vue-component.vue
new file mode 100644
index 000000000..f3d37eeba
--- /dev/null
+++ b/tests/multiparser_vue/vue-component.vue
@@ -0,0 +1,16 @@
+<template >
+  <h1 >{{greeting}}     world</h1  >
+</template >
+
+<script>
+module  .  exports  =
+{data : function () {return {
+	greeting: "Hello"
+}}
+}
+</script>
+
+<style   scoped >
+p { font-size : 2em ; text-align : center ; }
+
+  </style >
diff --git a/tests_config/run_spec.js b/tests_config/run_spec.js
index f846d5cd4..5d87bf10d 100644
--- a/tests_config/run_spec.js
+++ b/tests_config/run_spec.js
@@ -14,12 +14,12 @@ const ALL_PARSERS = process.env["ALL_PARSERS"]
 
 function run_spec(dirname, options, additionalParsers) {
   fs.readdirSync(dirname).forEach(filename => {
-    const extension = extname(filename);
+    const path = dirname + "/" + filename;
     if (
-      /^\.([jt]sx?|css|graphql|html)$/.test(extension) &&
+      extname(filename) !== ".snap" &&
+      fs.lstatSync(path).isFile() &&
       filename !== "jsfmt.spec.js"
     ) {
-      const path = dirname + "/" + filename;
       let rangeStart = 0;
       let rangeEnd = Infinity;
       const source = read(path)