fix(html): do not format unknown script (#5132)

- do not format unknown script
- do not normalize spaces in script tags

src/language-html/embed.js

@@ -15,7 +15,7 @@ function embed(path, print, textToDoc, options) {
       // Inline JavaScript
       if (
         parent.type === "script" &&
-        (!parent.attribs.lang ||
+        ((!parent.attribs.lang && !parent.attribs.type) ||
           parent.attribs.type === "text/javascript" ||
           parent.attribs.type === "application/javascript")
       ) {

src/language-html/parser-html.js

@@ -91,11 +91,19 @@ function normalize(node, text) {
   }
 
   if (node.attribs) {
-    node.attributes = Object.keys(node.attribs).map(attributeKey => ({
+    const attributes = Object.keys(node.attribs).map(attributeKey => ({
       type: "attribute",
       key: isCaseSensitiveTag ? attributeKey : attributeKey.toLowerCase(),
       value: node.attribs[attributeKey]
     }));
+
+    const attribs = Object.create(null);
+    for (const attribute of attributes) {
+      attribs[attribute.key] = attribute.value;
+    }
+
+    node.attribs = attribs;
+    node.attributes = attributes;
   }
 
   if (node.children) {

src/language-html/printer-htmlparser2.js

@@ -52,7 +52,11 @@ function genericPrint(path, options, print) {
     case "text": {
       const parentNode = path.getParentNode();
 
-      if (isPreTagNode(parentNode) || isTextAreaTagNode(parentNode)) {
+      if (
+        isPreTagNode(parentNode) ||
+        isTextAreaTagNode(parentNode) ||
+        isScriptTagNode(parentNode)
+      ) {
         return concat(
           n.data.split(/(\n)/g).map((x, i) => (i % 2 === 1 ? hardline : x))
         );

tests/html_js/__snapshots__/jsfmt.spec.js.snap

@@ -96,6 +96,19 @@ document.getElementById("demo").innerHTML = "Hello JavaScript!";
 
 `;
 
+exports[`something-else.html - html-verify 1`] = `
+<script type="text/template">
+ <div>
+    </div>
+</script>
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+<script type="text/template">
+ <div>
+    </div>
+</script>
+
+`;
+
 exports[`typescript.html - html-verify 1`] = `
 <script type="application/x-typescript">
   class Student {
@@ -176,7 +189,31 @@ exports[`typescript.html - html-verify 1`] = `
   }
 </script>
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-<script type="application/x-typescript">class Student { fullName: string; constructor(public firstName: string, public middleInitial: string, public lastName: string) { this.fullName = firstName + " " + middleInitial + " " + lastName; } } interface Person { firstName: string; lastName: string; } function greeter(person : Person) { return "Hello, " + person.firstName + " " + person.lastName; } let user = new Student("Jane", "M.", "User"); document.body.innerHTML = greeter(user);</script>
+<script type="application/x-typescript">
+class Student {
+  fullName: string;
+  constructor(
+    public firstName: string,
+    public middleInitial: string,
+    public lastName: string
+  ) {
+    this.fullName = firstName + " " + middleInitial + " " + lastName;
+  }
+}
+
+interface Person {
+  firstName: string;
+  lastName: string;
+}
+
+function greeter(person: Person) {
+  return "Hello, " + person.firstName + " " + person.lastName;
+}
+
+let user = new Student("Jane", "M.", "User");
+
+document.body.innerHTML = greeter(user);
+</script>
 <script lang="ts">
 class Student {
   fullName: string;
@@ -202,6 +239,41 @@ let user = new Student("Jane", "M.", "User");
 
 document.body.innerHTML = greeter(user);
 </script>
-<script lang="tsx">class CommentBox extends React.Component<{ url: string, pollInterval: number}, CommentData> { constructor(){ super() this.state = { data: [] }; } fetchComments() { $.ajax({ url: this.props.url, dataType: 'json', cache: false, 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); 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> ); } }</script>
+<script lang="tsx">
+  class CommentBox extends React.Component<{ url: string, pollInterval: number}, CommentData> {
+    constructor(){
+      super()
+      this.state = { data: [] };
+    }
+    fetchComments() {
+      $.ajax({
+        url: this.props.url,
+        dataType: 'json',
+        cache: false,
+        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);
+        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>
+    );
+    }
+  }
+</script>
 
 `;

tests/html_js/something-else.html

@@ -0,0 +1,4 @@
+<script type="text/template">
+ <div>
+    </div>
+</script>