[BUGFIX] Treat classes as attributes to be merged, not appended

cibernox · cibernox · commit 6dc68709580d · 2020-03-23T18:58:32.000+01:00
diff --git a/src/result.js b/src/result.js
@@ -51,9 +51,11 @@ class Result {
     return insertIntoIndexHTML(
       this._html,
       this._htmlAttributes,
+      this._htmlClass,
       this._head,
       this._body,
-      this._bodyAttributes
+      this._bodyAttributes,
+      this._bodyClass
     );
   }
 
@@ -72,9 +74,11 @@ class Result {
     return insertIntoIndexHTML(
       this._html,
       this._htmlAttributes,
+      this._htmlClass,
       this._head,
       this._body,
-      this._bodyAttributes
+      this._bodyAttributes,
+      this._bodyClass
     ).then(html => {
       let docParts = html.match(HTML_HEAD_REGEX);
       if (!docParts || docParts.length === 1) {
@@ -173,17 +177,13 @@ class Result {
     let head = this._doc.head;
     let body = this._doc.body;
 
-    if (htmlElement.attributes.length > 0) {
-      this._htmlAttributes = HTMLSerializer.attributes(htmlElement.attributes);
-    } else {
-      this._htmlAttributes = null;
-    }
+    let { klass: htmlClass, attributes: htmlAttributes } = extractExtraAttributes(htmlElement);
+    this._htmlClass = htmlClass;
+    this._htmlAttributes = htmlAttributes;
 
-    if (body.attributes.length > 0) {
-      this._bodyAttributes = HTMLSerializer.attributes(body.attributes);
-    } else {
-      this._bodyAttributes = null;
-    }
+    let { klass: bodyClass, attributes: bodyAttributes } = extractExtraAttributes(body);
+    this._bodyClass = bodyClass;
+    this._bodyAttributes = bodyAttributes;
 
     if (head) {
       head = HTMLSerializer.serializeChildren(head);
@@ -198,13 +198,44 @@ class Result {
   }
 }
 
+function extractExtraAttributes(element) {
+  let klass;
+  let attributes;
+  if (element.attributes.length > 0) {
+    let elementClass = element.attributes.find(attr => attr.name === 'class');
+    if (elementClass) {
+      klass = elementClass;
+      let otherAttrs = element.attributes.filter(attr => attr.name !== 'class');
+      if (otherAttrs.length > 0) {
+        attributes = HTMLSerializer.attributes(otherAttrs);
+      } else {
+        attributes = null;
+      }
+    } else {
+      attributes = HTMLSerializer.attributes(element.attributes);
+      klass = null;
+    }
+  } else {
+    klass = attributes = null;
+  }
+  return { klass, attributes };
+}
+
 function missingTag(tag) {
   throw new Error(
     `Fastboot was not able to find ${tag} in base HTML. It could not replace the contents.`
   );
 }
 
-async function insertIntoIndexHTML(html, htmlAttributes, head, body, bodyAttributes) {
+async function insertIntoIndexHTML(
+  html,
+  htmlAttributes,
+  htmlClass,
+  head,
+  body,
+  bodyAttributes,
+  bodyClass
+) {
   if (!html) {
     return Promise.resolve(html);
   }
@@ -222,12 +253,22 @@ async function insertIntoIndexHTML(html, htmlAttributes, head, body, bodyAttribu
     return '';
   });
 
+  if (htmlClass) {
+    html = html.replace(/(<html.*)class=\"([^"]*)\"([^>]*)/i, function(_, prefix, klass, suffix) {
+      return prefix + `class="${klass + ' ' + htmlClass.value}"` + suffix;
+    });
+  }
   if (htmlAttributes) {
     html = html.replace(/<html[^>]*/i, function(match) {
       return match + ' ' + htmlAttributes;
     });
   }
 
+  if (bodyClass) {
+    html = html.replace(/(<body.*)class=\"([^"]*)\"([^>]*)/i, function(_, prefix, klass, suffix) {
+      return prefix + `class="${klass + ' ' + bodyClass.value}"` + suffix;
+    });
+  }
   if (bodyAttributes) {
     html = html.replace(/<body[^>]*/i, function(match) {
       return match + ' ' + bodyAttributes;
diff --git a/test/fastboot-test.js b/test/fastboot-test.js
@@ -125,7 +125,7 @@ describe('FastBoot', function() {
       .visit('/')
       .then(r => r.html())
       .then(html => {
-        expect(html).to.match(/<html data-foo=1 +class="it-works"/);
+        expect(html).to.match(/<html data-before=1 +class="a b it-works" data-after=2/);
       });
   });
 
@@ -138,7 +138,7 @@ describe('FastBoot', function() {
       .visit('/')
       .then(r => r.html())
       .then(html => {
-        expect(html).to.match(/<body data-foo=1 +class="it-works"/);
+        expect(html).to.match(/<body data-before=1 +class="no-js default-class it-works" data-after=2/);
       });
   });
 
diff --git a/test/fixtures/custom-body-attrs/index.html b/test/fixtures/custom-body-attrs/index.html
@@ -12,7 +12,7 @@
 
 
   </head>
-  <body class="no-js" data-foo=1>
+  <body data-before=1 class="no-js default-class" data-after=2>
     <!-- EMBER_CLI_FASTBOOT_BODY -->
 
     <script src="/assets/vendor.js"></script>
diff --git a/test/fixtures/custom-html-attrs/index.html b/test/fixtures/custom-html-attrs/index.html
@@ -1,13 +1,13 @@
 <!DOCTYPE html>
-<html data-foo=1>
+<html data-before=1 class="a b" data-after=2>
   <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <title>FastbootTest</title>
     <meta name="description" content="">
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
-    
+
 <!-- EMBER_CLI_FASTBOOT_TITLE --><!-- EMBER_CLI_FASTBOOT_HEAD -->
 
 
@@ -18,6 +18,6 @@
     <script src="/assets/vendor.js"></script>
     <script src="/assets/fastboot-test.js"></script>
 
-    
+
   </body>
 </html>
