diff --git a/src/browser/ReactReconcileTransaction.js b/src/browser/ReactReconcileTransaction.js index 7398beca1686..87f726884a79 100644 --- a/src/browser/ReactReconcileTransaction.js +++ b/src/browser/ReactReconcileTransaction.js @@ -19,10 +19,10 @@ "use strict"; +var CallbackQueue = require('CallbackQueue'); var PooledClass = require('PooledClass'); var ReactEventEmitter = require('ReactEventEmitter'); var ReactInputSelection = require('ReactInputSelection'); -var ReactMountReady = require('ReactMountReady'); var ReactPutListenerQueue = require('ReactPutListenerQueue'); var Transaction = require('Transaction'); @@ -69,8 +69,8 @@ var EVENT_SUPPRESSION = { }; /** - * Provides a `ReactMountReady` queue for collecting `onDOMReady` callbacks - * during the performing of the transaction. + * Provides a queue for collecting `componentDidMount` and + * `componentDidUpdate` callbacks during the the transaction. */ var ON_DOM_READY_QUEUEING = { /** @@ -132,7 +132,7 @@ function ReactReconcileTransaction() { // accessible and defaults to false when `ReactDOMComponent` and // `ReactTextComponent` checks it in `mountComponent`.` this.renderToStaticMarkup = false; - this.reactMountReady = ReactMountReady.getPooled(null); + this.reactMountReady = CallbackQueue.getPooled(null); this.putListenerQueue = ReactPutListenerQueue.getPooled(); } @@ -150,7 +150,6 @@ var Mixin = { /** * @return {object} The queue to collect `onDOMReady` callbacks with. - * TODO: convert to ReactMountReady */ getReactMountReady: function() { return this.reactMountReady; @@ -165,7 +164,7 @@ var Mixin = { * instance to be resused. */ destructor: function() { - ReactMountReady.release(this.reactMountReady); + CallbackQueue.release(this.reactMountReady); this.reactMountReady = null; ReactPutListenerQueue.release(this.putListenerQueue); diff --git a/src/browser/server/ReactServerRenderingTransaction.js b/src/browser/server/ReactServerRenderingTransaction.js index a7981a27d902..2251f82f96bd 100644 --- a/src/browser/server/ReactServerRenderingTransaction.js +++ b/src/browser/server/ReactServerRenderingTransaction.js @@ -20,7 +20,7 @@ "use strict"; var PooledClass = require('PooledClass'); -var ReactMountReady = require('ReactMountReady'); +var CallbackQueue = require('CallbackQueue'); var ReactPutListenerQueue = require('ReactPutListenerQueue'); var Transaction = require('Transaction'); @@ -28,7 +28,7 @@ var emptyFunction = require('emptyFunction'); var mixInto = require('mixInto'); /** - * Provides a `ReactMountReady` queue for collecting `onDOMReady` callbacks + * Provides a `CallbackQueue` queue for collecting `onDOMReady` callbacks * during the performing of the transaction. */ var ON_DOM_READY_QUEUEING = { @@ -67,7 +67,7 @@ var TRANSACTION_WRAPPERS = [ function ReactServerRenderingTransaction(renderToStaticMarkup) { this.reinitializeTransaction(); this.renderToStaticMarkup = renderToStaticMarkup; - this.reactMountReady = ReactMountReady.getPooled(null); + this.reactMountReady = CallbackQueue.getPooled(null); this.putListenerQueue = ReactPutListenerQueue.getPooled(); } @@ -84,7 +84,6 @@ var Mixin = { /** * @return {object} The queue to collect `onDOMReady` callbacks with. - * TODO: convert to ReactMountReady */ getReactMountReady: function() { return this.reactMountReady; @@ -99,7 +98,7 @@ var Mixin = { * instance to be resused. */ destructor: function() { - ReactMountReady.release(this.reactMountReady); + CallbackQueue.release(this.reactMountReady); this.reactMountReady = null; ReactPutListenerQueue.release(this.putListenerQueue); diff --git a/src/core/ReactCompositeComponent.js b/src/core/ReactCompositeComponent.js index dc03cf3c4d66..4a1fa7f10db3 100644 --- a/src/core/ReactCompositeComponent.js +++ b/src/core/ReactCompositeComponent.js @@ -740,7 +740,7 @@ var ReactCompositeComponentMixin = { mountDepth + 1 ); if (this.componentDidMount) { - transaction.getReactMountReady().enqueue(this, this.componentDidMount); + transaction.getReactMountReady().enqueue(this.componentDidMount, this); } return markup; } @@ -1049,8 +1049,8 @@ var ReactCompositeComponentMixin = { if (this.componentDidUpdate) { transaction.getReactMountReady().enqueue( - this, - this.componentDidUpdate.bind(this, prevProps, prevState, prevContext) + this.componentDidUpdate.bind(this, prevProps, prevState, prevContext), + this ); } }, diff --git a/src/core/ReactMountReady.js b/src/utils/CallbackQueue.js similarity index 57% rename from src/core/ReactMountReady.js rename to src/utils/CallbackQueue.js index 6449c09455c5..9d989b59ecf8 100644 --- a/src/core/ReactMountReady.js +++ b/src/utils/CallbackQueue.js @@ -13,13 +13,14 @@ * See the License for the specific language governing permissions and * limitations under the License. * - * @providesModule ReactMountReady + * @providesModule CallbackQueue */ "use strict"; var PooledClass = require('PooledClass'); +var invariant = require('invariant'); var mixInto = require('mixInto'); /** @@ -27,30 +28,31 @@ var mixInto = require('mixInto'); * be notified when their DOM representations are available for use. * * This implements `PooledClass`, so you should never need to instantiate this. - * Instead, use `ReactMountReady.getPooled()`. + * Instead, use `CallbackQueue.getPooled()`. * - * @param {?array} initialCollection * @class ReactMountReady * @implements PooledClass * @internal */ -function ReactMountReady(initialCollection) { - this._queue = initialCollection || null; +function CallbackQueue() { + this._callbacks = null; + this._contexts = null; } -mixInto(ReactMountReady, { +mixInto(CallbackQueue, { /** - * Enqueues a callback to be invoked when `notifyAll` is invoked. This is used - * to enqueue calls to `componentDidMount` and `componentDidUpdate`. + * Enqueues a callback to be invoked when `notifyAll` is invoked. * - * @param {ReactComponent} component Component being rendered. - * @param {function(DOMElement)} callback Invoked when `notifyAll` is invoked. + * @param {function} callback Invoked when `notifyAll` is invoked. + * @param {?object} context Context to call `callback` with. * @internal */ - enqueue: function(component, callback) { - this._queue = this._queue || []; - this._queue.push({component: component, callback: callback}); + enqueue: function(callback, context) { + this._callbacks = this._callbacks || []; + this._contexts = this._contexts || []; + this._callbacks.push(callback); + this._contexts.push(context); }, /** @@ -60,15 +62,20 @@ mixInto(ReactMountReady, { * @internal */ notifyAll: function() { - var queue = this._queue; - if (queue) { - this._queue = null; - for (var i = 0, l = queue.length; i < l; i++) { - var component = queue[i].component; - var callback = queue[i].callback; - callback.call(component); + var callbacks = this._callbacks; + var contexts = this._contexts; + if (callbacks) { + invariant( + callbacks.length === contexts.length, + "Mismatched list of contexts in callback queue" + ); + this._callbacks = null; + this._contexts = null; + for (var i = 0, l = callbacks.length; i < l; i++) { + callbacks[i].call(contexts[i]); } - queue.length = 0; + callbacks.length = 0; + contexts.length = 0; } }, @@ -78,7 +85,8 @@ mixInto(ReactMountReady, { * @internal */ reset: function() { - this._queue = null; + this._callbacks = null; + this._contexts = null; }, /** @@ -90,6 +98,6 @@ mixInto(ReactMountReady, { }); -PooledClass.addPoolingTo(ReactMountReady); +PooledClass.addPoolingTo(CallbackQueue); -module.exports = ReactMountReady; +module.exports = CallbackQueue;