From 0249adf3db4e6147c9689d4ecb3d4dfc4344d43e Mon Sep 17 00:00:00 2001
From: Eric O'Connell <eric.oconnell@idealist.org>
Date: Wed, 8 Jul 2015 20:31:10 -0700
Subject: [PATCH 1/5] Handle escaping when comparing server/client markup

---
 src/renderers/dom/client/ReactMount.js          |  8 ++++++--
 .../dom/client/__tests__/ReactMount-test.js     | 17 +++++++++++++++++
 2 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/src/renderers/dom/client/ReactMount.js b/src/renderers/dom/client/ReactMount.js
index 3aadb2f9b64..758f7ee6b8c 100644
--- a/src/renderers/dom/client/ReactMount.js
+++ b/src/renderers/dom/client/ReactMount.js
@@ -880,9 +880,13 @@ var ReactMount = {
           checksum
         );
 
-        var diffIndex = firstDifferenceIndex(markup, rootMarkup);
+        var normalizer = document.createElement('div');
+        normalizer.innerHTML = markup;
+        var normalizedMarkup = normalizer.innerHTML;
+
+        var diffIndex = firstDifferenceIndex(normalizedMarkup, rootMarkup);
         var difference = ' (client) ' +
-          markup.substring(diffIndex - 20, diffIndex + 20) +
+          normalizedMarkup.substring(diffIndex - 20, diffIndex + 20) +
           '\n (server) ' + rootMarkup.substring(diffIndex - 20, diffIndex + 20);
 
         invariant(
diff --git a/src/renderers/dom/client/__tests__/ReactMount-test.js b/src/renderers/dom/client/__tests__/ReactMount-test.js
index d5700df411b..ea875eb38f9 100644
--- a/src/renderers/dom/client/__tests__/ReactMount-test.js
+++ b/src/renderers/dom/client/__tests__/ReactMount-test.js
@@ -16,6 +16,7 @@ var mocks = require('mocks');
 describe('ReactMount', function() {
   var React = require('React');
   var ReactMount = require('ReactMount');
+  var ReactMarkupChecksum = require('ReactMarkupChecksum');
   var ReactTestUtils = require('ReactTestUtils');
   var WebComponents = WebComponents;
 
@@ -156,6 +157,22 @@ describe('ReactMount', function() {
     );
   });
 
+  it('should account for escaping on a checksum mismatch', function () {
+    var div = document.createElement('div');
+    var markup = React.renderToString(
+      <div>This markup contains an html entity: &amp; server text</div>);
+    div.innerHTML = markup;
+
+    spyOn(console, 'error');
+    React.render(
+      <div>This markup contains an html entity: &amp; client text</div>, div);
+    expect(console.error.calls.length).toBe(1);
+    expect(console.error.calls[0].args[0]).toContain(
+      ' (client)  html entity: &amp; client text</div>\n' +
+      ' (server)  html entity: &amp; server text</div>'
+    )
+  });
+
   if (WebComponents !== undefined) {
     it('should allow mounting/unmounting to document fragment container',
         function() {

From 1316160b866f7e34506910313338fabafb9defc3 Mon Sep 17 00:00:00 2001
From: Eric O'Connell <eric.oconnell@idealist.org>
Date: Thu, 9 Jul 2015 11:48:42 -0700
Subject: [PATCH 2/5] Properly handle rendering into document when comparing
 markup

---
 src/renderers/dom/client/ReactMount.js | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/src/renderers/dom/client/ReactMount.js b/src/renderers/dom/client/ReactMount.js
index 758f7ee6b8c..f2f9f262b4c 100644
--- a/src/renderers/dom/client/ReactMount.js
+++ b/src/renderers/dom/client/ReactMount.js
@@ -880,9 +880,20 @@ var ReactMount = {
           checksum
         );
 
-        var normalizer = document.createElement('div');
-        normalizer.innerHTML = markup;
-        var normalizedMarkup = normalizer.innerHTML;
+        // because rootMarkup is retrieved from the DOM, various normalizations
+        // will have occurred which will not be present in `markup`. Here,
+        // insert markup into a <div> or <iframe> depending on the container
+        // type to perform the same normalizations before comparing.
+        if (container.nodeType === ELEMENT_NODE_TYPE) {
+          var normalizer = document.createElement('div');
+          normalizer.innerHTML = markup;
+          var normalizedMarkup = normalizer.innerHTML;
+        } else {
+          var normalizer = document.createElement('iframe');
+          document.body.appendChild(normalizer);
+          normalizer.contentDocument.write(markup);
+          var normalizedMarkup = normalizer.contentDocument.documentElement.outerHTML;
+        }
 
         var diffIndex = firstDifferenceIndex(normalizedMarkup, rootMarkup);
         var difference = ' (client) ' +

From 902b607f1f3c91a51042dbdc0cf27ef11eb521da Mon Sep 17 00:00:00 2001
From: Eric O'Connell <eric.oconnell@idealist.org>
Date: Thu, 9 Jul 2015 13:41:56 -0700
Subject: [PATCH 3/5] Fix some lint

---
 src/renderers/dom/client/ReactMount.js                | 9 +++++----
 src/renderers/dom/client/__tests__/ReactMount-test.js | 3 +--
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/renderers/dom/client/ReactMount.js b/src/renderers/dom/client/ReactMount.js
index f2f9f262b4c..4345563f200 100644
--- a/src/renderers/dom/client/ReactMount.js
+++ b/src/renderers/dom/client/ReactMount.js
@@ -884,15 +884,16 @@ var ReactMount = {
         // will have occurred which will not be present in `markup`. Here,
         // insert markup into a <div> or <iframe> depending on the container
         // type to perform the same normalizations before comparing.
+        var normalizer, normalizedMarkup;
         if (container.nodeType === ELEMENT_NODE_TYPE) {
-          var normalizer = document.createElement('div');
+          normalizer = document.createElement('div');
           normalizer.innerHTML = markup;
-          var normalizedMarkup = normalizer.innerHTML;
+          normalizedMarkup = normalizer.innerHTML;
         } else {
-          var normalizer = document.createElement('iframe');
+          normalizer = document.createElement('iframe');
           document.body.appendChild(normalizer);
           normalizer.contentDocument.write(markup);
-          var normalizedMarkup = normalizer.contentDocument.documentElement.outerHTML;
+          normalizedMarkup = normalizer.contentDocument.documentElement.outerHTML;
         }
 
         var diffIndex = firstDifferenceIndex(normalizedMarkup, rootMarkup);
diff --git a/src/renderers/dom/client/__tests__/ReactMount-test.js b/src/renderers/dom/client/__tests__/ReactMount-test.js
index ea875eb38f9..3d0c1080e72 100644
--- a/src/renderers/dom/client/__tests__/ReactMount-test.js
+++ b/src/renderers/dom/client/__tests__/ReactMount-test.js
@@ -16,7 +16,6 @@ var mocks = require('mocks');
 describe('ReactMount', function() {
   var React = require('React');
   var ReactMount = require('ReactMount');
-  var ReactMarkupChecksum = require('ReactMarkupChecksum');
   var ReactTestUtils = require('ReactTestUtils');
   var WebComponents = WebComponents;
 
@@ -170,7 +169,7 @@ describe('ReactMount', function() {
     expect(console.error.calls[0].args[0]).toContain(
       ' (client)  html entity: &amp; client text</div>\n' +
       ' (server)  html entity: &amp; server text</div>'
-    )
+    );
   });
 
   if (WebComponents !== undefined) {

From 0941cc9884e0a1a91fd1bc0ba8b4cff271a5eb14 Mon Sep 17 00:00:00 2001
From: Eric O'Connell <eric.oconnell@idealist.org>
Date: Thu, 9 Jul 2015 14:56:55 -0700
Subject: [PATCH 4/5] Use a test case that demonstrates the fix.

---
 src/renderers/dom/client/__tests__/ReactMount-test.js | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/renderers/dom/client/__tests__/ReactMount-test.js b/src/renderers/dom/client/__tests__/ReactMount-test.js
index 3d0c1080e72..efbd1154325 100644
--- a/src/renderers/dom/client/__tests__/ReactMount-test.js
+++ b/src/renderers/dom/client/__tests__/ReactMount-test.js
@@ -159,16 +159,18 @@ describe('ReactMount', function() {
   it('should account for escaping on a checksum mismatch', function () {
     var div = document.createElement('div');
     var markup = React.renderToString(
-      <div>This markup contains an html entity: &amp; server text</div>);
+      <div>This markup contains an nbsp entity: &nbsp; server text</div>);
     div.innerHTML = markup;
 
     spyOn(console, 'error');
     React.render(
-      <div>This markup contains an html entity: &amp; client text</div>, div);
+      <div>This markup contains an nbsp entity: &nbsp; client text</div>,
+      div
+    );
     expect(console.error.calls.length).toBe(1);
     expect(console.error.calls[0].args[0]).toContain(
-      ' (client)  html entity: &amp; client text</div>\n' +
-      ' (server)  html entity: &amp; server text</div>'
+      ' (client) nbsp entity: &nbsp; client text</div>\n' +
+      ' (server) nbsp entity: &nbsp; server text</div>'
     );
   });
 

From d2e8449bf03ccec1c3764c136401652dc844e51a Mon Sep 17 00:00:00 2001
From: Eric O'Connell <eric.oconnell@idealist.org>
Date: Thu, 9 Jul 2015 15:49:49 -0700
Subject: [PATCH 5/5] Only perform expensive checks in __DEV__, clean up after
 inserted iframe

---
 src/renderers/dom/client/ReactMount.js | 32 +++++++++++++++-----------
 1 file changed, 18 insertions(+), 14 deletions(-)

diff --git a/src/renderers/dom/client/ReactMount.js b/src/renderers/dom/client/ReactMount.js
index 4345563f200..22710be7d35 100644
--- a/src/renderers/dom/client/ReactMount.js
+++ b/src/renderers/dom/client/ReactMount.js
@@ -880,20 +880,24 @@ var ReactMount = {
           checksum
         );
 
-        // because rootMarkup is retrieved from the DOM, various normalizations
-        // will have occurred which will not be present in `markup`. Here,
-        // insert markup into a <div> or <iframe> depending on the container
-        // type to perform the same normalizations before comparing.
-        var normalizer, normalizedMarkup;
-        if (container.nodeType === ELEMENT_NODE_TYPE) {
-          normalizer = document.createElement('div');
-          normalizer.innerHTML = markup;
-          normalizedMarkup = normalizer.innerHTML;
-        } else {
-          normalizer = document.createElement('iframe');
-          document.body.appendChild(normalizer);
-          normalizer.contentDocument.write(markup);
-          normalizedMarkup = normalizer.contentDocument.documentElement.outerHTML;
+        var normalizedMarkup = markup;
+        if (__DEV__) {
+          // because rootMarkup is retrieved from the DOM, various normalizations
+          // will have occurred which will not be present in `markup`. Here,
+          // insert markup into a <div> or <iframe> depending on the container
+          // type to perform the same normalizations before comparing.
+          var normalizer;
+          if (container.nodeType === ELEMENT_NODE_TYPE) {
+            normalizer = document.createElement('div');
+            normalizer.innerHTML = markup;
+            normalizedMarkup = normalizer.innerHTML;
+          } else {
+            normalizer = document.createElement('iframe');
+            document.body.appendChild(normalizer);
+            normalizer.contentDocument.write(markup);
+            normalizedMarkup = normalizer.contentDocument.documentElement.outerHTML;
+            document.body.removeChild(normalizer);
+          }
         }
 
         var diffIndex = firstDifferenceIndex(normalizedMarkup, rootMarkup);