Fix text component rendering with server markup

These weren't caught by CI in facebook#5753 because we don't automatically test that yet... fixing that next.
sophiebits · Feb 19, 2016 · e8fb8c7 · e8fb8c7
1 parent 684ef3e
commit e8fb8c7
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 6 deletions.
diff --git a/src/renderers/dom/shared/ReactDOMTextComponent.js b/src/renderers/dom/shared/ReactDOMTextComponent.js
@@ -18,6 +18,7 @@ var ReactPerf = require('ReactPerf');
 
 var assign = require('Object.assign');
 var escapeTextContentForBrowser = require('escapeTextContentForBrowser');
+var invariant = require('invariant');
 var validateDOMNesting = require('validateDOMNesting');
 
 /**
@@ -46,7 +47,7 @@ var ReactDOMTextComponent = function(text) {
   // Properties
   this._domID = null;
   this._mountIndex = 0;
-  this._openingComment = null;
+  this._closingComment = null;
   this._commentNodes = null;
 };
 
@@ -98,8 +99,8 @@ assign(ReactDOMTextComponent.prototype, {
         );
       }
       DOMLazyTree.queueChild(lazyTree, DOMLazyTree(closingComment));
-      this._openingComment = openingComment;
-      ReactDOMComponentTree.precacheNode(this, closingComment);
+      ReactDOMComponentTree.precacheNode(this, openingComment);
+      this._closingComment = closingComment;
       return lazyTree;
     } else {
       var escapedText = escapeTextContentForBrowser(this._stringText);
@@ -149,13 +150,29 @@ assign(ReactDOMTextComponent.prototype, {
     if (nativeNode) {
       return nativeNode;
     }
-    nativeNode = [this._openingComment, this._nativeNode];
+    if (!this._closingComment) {
+      var openingComment = ReactDOMComponentTree.getNodeFromInstance(this);
+      var node = openingComment.nextSibling;
+      while (true) {
+        invariant(
+          node != null,
+          'Missing closing comment for text component %s',
+          this._domID
+        );
+        if (node.nodeType === 8 && node.nodeValue === ' /react-text ') {
+          this._closingComment = node;
+          break;
+        }
+        node = node.nextSibling;
+      }
+    }
+    nativeNode = [this._nativeNode, this._closingComment];
     this._commentNodes = nativeNode;
     return nativeNode;
   },
 
   unmountComponent: function() {
-    this._openingComment = null;
+    this._closingComment = null;
     this._commentNodes = null;
     ReactDOMComponentTree.uncacheNode(this);
   },

diff --git a/src/test/ReactDefaultPerf.js b/src/test/ReactDefaultPerf.js
@@ -233,7 +233,7 @@ var ReactDefaultPerf = {
             // Old node is already unmounted; can't get its instance
             id = ReactDOMComponentTree.getInstanceFromNode(args[1].node)._rootNodeID;
           } else if (fnName === 'replaceDelimitedText') {
-            id = getID(ReactDOMComponentTree.getInstanceFromNode(args[1]));
+            id = getID(ReactDOMComponentTree.getInstanceFromNode(args[0]));
           } else if (typeof id === 'object') {
             id = getID(ReactDOMComponentTree.getInstanceFromNode(args[0]));
           }