Tie MultiChild queue to ReactReconcileTransaction

Fixes facebook#1147.

This now forces all DOM operations for a subtree to be applied when the calling `setState` or `React.renderComponent` call returns (when updates aren't being batched). This means that we can't batch innerHTML setting across different component hierarchies, but our strategy for doing so before seems flawed. It could be possible to make the old way work but it would require making setState always async even when batching isn't in play and refactoring DOMChildrenOperations to not be confused by multiple updates to the same node.

Author: sophiebits

src/browser/ReactReconcileTransaction.js

@@ -23,6 +23,7 @@ var CallbackQueue = require('CallbackQueue');
 var PooledClass = require('PooledClass');
 var ReactEventEmitter = require('ReactEventEmitter');
 var ReactInputSelection = require('ReactInputSelection');
+var ReactMultiChildUpdateQueue = require('ReactMultiChildUpdateQueue');
 var ReactPutListenerQueue = require('ReactPutListenerQueue');
 var Transaction = require('Transaction');
 
@@ -98,12 +99,23 @@ var PUT_LISTENER_QUEUEING = {
   }
 };
 
+var MULTI_CHILD_UPDATE_QUEUEING = {
+  initialize: function() {
+    this.multiChildUpdateQueue.reset();
+  },
+
+  close: function() {
+    this.multiChildUpdateQueue.processUpdates();
+  }
+};
+
 /**
  * Executed within the scope of the `Transaction` instance. Consider these as
  * being member methods, but with an implied ordering while being isolated from
  * each other.
  */
 var TRANSACTION_WRAPPERS = [
+  MULTI_CHILD_UPDATE_QUEUEING,
   PUT_LISTENER_QUEUEING,
   SELECTION_RESTORATION,
   EVENT_SUPPRESSION,
@@ -134,6 +146,7 @@ function ReactReconcileTransaction() {
   this.renderToStaticMarkup = false;
   this.reactMountReady = CallbackQueue.getPooled(null);
   this.putListenerQueue = ReactPutListenerQueue.getPooled();
+  this.multiChildUpdateQueue = ReactMultiChildUpdateQueue.getPooled();
 }
 
 var Mixin = {
@@ -159,6 +172,10 @@ var Mixin = {
     return this.putListenerQueue;
   },
 
+  getMultiChildUpdateQueue: function() {
+    return this.multiChildUpdateQueue;
+  },
+
   /**
    * `PooledClass` looks for this, and will invoke this before allowing this
    * instance to be resused.

src/browser/ui/ReactDOMComponent.js

@@ -377,12 +377,12 @@ ReactDOMComponent.Mixin = {
     if (lastChildren != null && nextChildren == null) {
       this.updateChildren(null, transaction);
     } else if (lastHasContentOrHtml && !nextHasContentOrHtml) {
-      this.updateTextContent('');
+      this.updateTextContent('', transaction);
     }
 
     if (nextContent != null) {
       if (lastContent !== nextContent) {
-        this.updateTextContent('' + nextContent);
+        this.updateTextContent('' + nextContent, transaction);
       }
     } else if (nextHtml != null) {
       if (lastHtml !== nextHtml) {

src/browser/ui/__tests__/ReactDOMComponent-test.js

@@ -157,6 +157,7 @@ describe('ReactDOMComponent', function() {
 
       expect(stub.getDOMNode().innerHTML).toEqual(':)');
       stub.receiveComponent({props: {}}, transaction);
+      transaction.getMultiChildUpdateQueue().processUpdates();
       expect(stub.getDOMNode().innerHTML).toEqual('');
     });
 
@@ -180,6 +181,7 @@ describe('ReactDOMComponent', function() {
 
       expect(stub.getDOMNode().innerHTML).toEqual('bonjour');
       stub.receiveComponent({props: {children: 'adieu'}}, transaction);
+      transaction.getMultiChildUpdateQueue().processUpdates();
       expect(stub.getDOMNode().innerHTML).toEqual('adieu');
     });