react 0.14.0-alpha3 → 0.14.0-beta1

package/lib/ReactPropTypes.js

@@ -137,7 +137,7 @@ function createArrayOfTypeChecker(typeChecker) {
       return new Error('Invalid ' + locationName + ' `' + propFullName + '` of type ' + ('`' + propType + '` supplied to `' + componentName + '`, expected an array.'));
     }
     for (var i = 0; i < propValue.length; i++) {
-      var error = typeChecker(propValue, i, componentName, location, '' + propFullName + '[' + i + ']');
+      var error = typeChecker(propValue, i, componentName, location, propFullName + '[' + i + ']');
       if (error instanceof Error) {
         return error;
       }
@@ -202,7 +202,7 @@ function createObjectOfTypeChecker(typeChecker) {
     }
     for (var key in propValue) {
       if (propValue.hasOwnProperty(key)) {
-        var error = typeChecker(propValue, key, componentName, location, '' + propFullName + '.' + key);
+        var error = typeChecker(propValue, key, componentName, location, propFullName + '.' + key);
         if (error instanceof Error) {
           return error;
         }
@@ -258,7 +258,7 @@ function createShapeTypeChecker(shapeTypes) {
       if (!checker) {
         continue;
       }
-      var error = checker(propValue, key, componentName, location, '' + propFullName + '.' + key);
+      var error = checker(propValue, key, componentName, location, propFullName + '.' + key);
       if (error) {
         return error;
       }

package/lib/ReactReconcileTransaction.js

@@ -118,7 +118,7 @@ var Mixin = {
    * @see Transaction
    * @abstract
    * @final
-   * @return {array<object>} List of operation wrap proceedures.
+   * @return {array<object>} List of operation wrap procedures.
    *   TODO: convert to array<TransactionWrapper>
    */
   getTransactionWrappers: function () {
@@ -134,7 +134,7 @@ var Mixin = {
 
   /**
    * `PooledClass` looks for this, and will invoke this before allowing this
-   * instance to be resused.
+   * instance to be reused.
    */
   destructor: function () {
     CallbackQueue.release(this.reactMountReady);

package/lib/ReactReconciler.js

@@ -12,7 +12,6 @@
 'use strict';
 
 var ReactRef = require("./ReactRef");
-var ReactElementValidator = require("./ReactElementValidator");
 
 /**
  * Helper to call ReactRef.attachRefs with this composite component, split out
@@ -36,10 +35,9 @@ var ReactReconciler = {
    */
   mountComponent: function (internalInstance, rootID, transaction, context) {
     var markup = internalInstance.mountComponent(rootID, transaction, context);
-    if ('production' !== process.env.NODE_ENV) {
-      ReactElementValidator.checkAndWarnForMutatedProps(internalInstance._currentElement);
+    if (internalInstance._currentElement.ref != null) {
+      transaction.getReactMountReady().enqueue(attachRefs, internalInstance);
     }
-    transaction.getReactMountReady().enqueue(attachRefs, internalInstance);
     return markup;
   },
 
@@ -65,8 +63,9 @@ var ReactReconciler = {
    */
   receiveComponent: function (internalInstance, nextElement, transaction, context) {
     var prevElement = internalInstance._currentElement;
-
-    if (nextElement === prevElement && nextElement._owner != null) {
+    if (nextElement === prevElement && nextElement._owner != null
+    // TODO: Shouldn't we need to do this: `&& context === internalInstance._context`
+    ) {
       // Since elements are immutable after the owner is rendered,
       // we can do a cheap identity compare here to determine if this is a
       // superfluous reconcile. It's possible for state to be mutable but such
@@ -74,11 +73,10 @@ var ReactReconciler = {
       // the element. We explicitly check for the existence of an owner since
       // it's possible for an element created outside a composite to be
       // deeply mutated and reused.
-      return;
-    }
 
-    if ('production' !== process.env.NODE_ENV) {
-      ReactElementValidator.checkAndWarnForMutatedProps(nextElement);
+      // TODO: Bailing out early is just a perf optimization right?
+      // TODO: Removing the return statement should affect correctness?
+      return;
     }
 
     var refsChanged = ReactRef.shouldUpdateRefs(prevElement, nextElement);

package/lib/ReactServerBatchingStrategy.js

@@ -0,0 +1,23 @@
+/**
+ * Copyright 2014-2015, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @providesModule ReactServerBatchingStrategy
+ * @typechecks
+ */
+
+'use strict';
+
+var ReactServerBatchingStrategy = {
+  isBatchingUpdates: false,
+  batchedUpdates: function (callback) {}
+};
+
+module.exports = ReactServerBatchingStrategy;
+
+// Don't do anything here. During the server rendering we don't want to
+// schedule any updates. We will simply ignore them.

package/lib/ReactServerRendering.js

@@ -11,10 +11,13 @@
  */
 'use strict';
 
+var ReactDefaultBatchingStrategy = require("./ReactDefaultBatchingStrategy");
 var ReactElement = require("./ReactElement");
 var ReactInstanceHandles = require("./ReactInstanceHandles");
 var ReactMarkupChecksum = require("./ReactMarkupChecksum");
+var ReactServerBatchingStrategy = require("./ReactServerBatchingStrategy");
 var ReactServerRenderingTransaction = require("./ReactServerRenderingTransaction");
+var ReactUpdates = require("./ReactUpdates");
 
 var emptyObject = require("./emptyObject");
 var instantiateReactComponent = require("./instantiateReactComponent");
@@ -29,6 +32,8 @@ function renderToString(element) {
 
   var transaction;
   try {
+    ReactUpdates.injection.injectBatchingStrategy(ReactServerBatchingStrategy);
+
     var id = ReactInstanceHandles.createReactRootID();
     transaction = ReactServerRenderingTransaction.getPooled(false);
 
@@ -39,6 +44,9 @@ function renderToString(element) {
     }, null);
   } finally {
     ReactServerRenderingTransaction.release(transaction);
+    // Revert to the DOM batching strategy since these two renderers
+    // currently share these stateful modules.
+    ReactUpdates.injection.injectBatchingStrategy(ReactDefaultBatchingStrategy);
   }
 }
 
@@ -52,6 +60,8 @@ function renderToStaticMarkup(element) {
 
   var transaction;
   try {
+    ReactUpdates.injection.injectBatchingStrategy(ReactServerBatchingStrategy);
+
     var id = ReactInstanceHandles.createReactRootID();
     transaction = ReactServerRenderingTransaction.getPooled(true);
 
@@ -61,6 +71,9 @@ function renderToStaticMarkup(element) {
     }, null);
   } finally {
     ReactServerRenderingTransaction.release(transaction);
+    // Revert to the DOM batching strategy since these two renderers
+    // currently share these stateful modules.
+    ReactUpdates.injection.injectBatchingStrategy(ReactDefaultBatchingStrategy);
   }
 }
 

package/lib/ReactServerRenderingTransaction.js

@@ -56,7 +56,7 @@ var Mixin = {
    * @see Transaction
    * @abstract
    * @final
-   * @return {array} Empty list of operation wrap proceedures.
+   * @return {array} Empty list of operation wrap procedures.
    */
   getTransactionWrappers: function () {
     return TRANSACTION_WRAPPERS;
@@ -71,7 +71,7 @@ var Mixin = {
 
   /**
    * `PooledClass` looks for this, and will invoke this before allowing this
-   * instance to be resused.
+   * instance to be reused.
    */
   destructor: function () {
     CallbackQueue.release(this.reactMountReady);

package/lib/ReactTestUtils.js

@@ -28,6 +28,7 @@ var SyntheticEvent = require("./SyntheticEvent");
 var assign = require("./Object.assign");
 var emptyObject = require("./emptyObject");
 var findDOMNode = require("./findDOMNode");
+var invariant = require("./invariant");
 
 var topLevelTypes = EventConstants.topLevelTypes;
 
@@ -37,6 +38,27 @@ function Event(suffix) {}
  * @class ReactTestUtils
  */
 
+function findAllInRenderedTreeInternal(inst, test) {
+  if (!inst || !inst.getPublicInstance) {
+    return [];
+  }
+  var publicInst = inst.getPublicInstance();
+  var ret = test(publicInst) ? [publicInst] : [];
+  if (ReactTestUtils.isDOMComponent(publicInst)) {
+    var renderedChildren = inst._renderedChildren;
+    var key;
+    for (key in renderedChildren) {
+      if (!renderedChildren.hasOwnProperty(key)) {
+        continue;
+      }
+      ret = ret.concat(findAllInRenderedTreeInternal(renderedChildren[key], test));
+    }
+  } else if (ReactTestUtils.isCompositeComponent(publicInst)) {
+    ret = ret.concat(findAllInRenderedTreeInternal(inst._renderedComponent, test));
+  }
+  return ret;
+}
+
 /**
  * Todo: Support the entire DOM.scry query syntax. For now, these simple
  * utilities will suffice for testing purposes.
@@ -64,7 +86,7 @@ var ReactTestUtils = {
   isDOMComponent: function (inst) {
     // TODO: Fix this heuristic. It's just here because composites can currently
     // pretend to be DOM components.
-    return !!(inst && inst.tagName && inst.getDOMNode);
+    return !!(inst && inst.nodeType === 1 && inst.tagName);
   },
 
   isDOMComponentElement: function (inst) {
@@ -72,11 +94,22 @@ var ReactTestUtils = {
   },
 
   isCompositeComponent: function (inst) {
+    if (ReactTestUtils.isDOMComponent(inst)) {
+      // Accessing inst.setState warns; just return false as that'll be what
+      // this returns when we have DOM nodes as refs directly
+      return false;
+    }
     return typeof inst.render === 'function' && typeof inst.setState === 'function';
   },
 
   isCompositeComponentWithType: function (inst, type) {
-    return !!(ReactTestUtils.isCompositeComponent(inst) && inst.constructor === type);
+    if (!ReactTestUtils.isCompositeComponent(inst)) {
+      return false;
+    }
+    var internalInstance = ReactInstanceMap.get(inst);
+    var constructor = internalInstance._currentElement.type;
+
+    return constructor === type;
   },
 
   isCompositeComponentElement: function (inst) {
@@ -90,7 +123,10 @@ var ReactTestUtils = {
   },
 
   isCompositeComponentElementWithType: function (inst, type) {
-    return !!(ReactTestUtils.isCompositeComponentElement(inst) && inst.constructor === type);
+    var internalInstance = ReactInstanceMap.get(inst);
+    var constructor = internalInstance._currentElement.type;
+
+    return !!(ReactTestUtils.isCompositeComponentElement(inst) && constructor === type);
   },
 
   getRenderedChildOfCompositeComponent: function (inst) {
@@ -105,35 +141,22 @@ var ReactTestUtils = {
     if (!inst) {
       return [];
     }
-    var ret = test(inst) ? [inst] : [];
-    if (ReactTestUtils.isDOMComponent(inst)) {
-      var internalInstance = ReactInstanceMap.get(inst);
-      var renderedChildren = internalInstance._renderedComponent._renderedChildren;
-      var key;
-      for (key in renderedChildren) {
-        if (!renderedChildren.hasOwnProperty(key)) {
-          continue;
-        }
-        if (!renderedChildren[key].getPublicInstance) {
-          continue;
-        }
-        ret = ret.concat(ReactTestUtils.findAllInRenderedTree(renderedChildren[key].getPublicInstance(), test));
-      }
-    } else if (ReactTestUtils.isCompositeComponent(inst)) {
-      ret = ret.concat(ReactTestUtils.findAllInRenderedTree(ReactTestUtils.getRenderedChildOfCompositeComponent(inst), test));
-    }
-    return ret;
+    !ReactTestUtils.isCompositeComponent(inst) ? 'production' !== process.env.NODE_ENV ? invariant(false, 'findAllInRenderedTree(...): instance must be a composite component') : invariant(false) : undefined;
+    return findAllInRenderedTreeInternal(ReactInstanceMap.get(inst), test);
   },
 
   /**
    * Finds all instance of components in the rendered tree that are DOM
    * components with the class name matching `className`.
-   * @return an array of all the matches.
+   * @return {array} an array of all the matches.
    */
   scryRenderedDOMComponentsWithClass: function (root, className) {
     return ReactTestUtils.findAllInRenderedTree(root, function (inst) {
-      var instClassName = inst.props.className;
-      return ReactTestUtils.isDOMComponent(inst) && (instClassName && (' ' + instClassName + ' ').indexOf(' ' + className + ' ') !== -1);
+      if (ReactTestUtils.isDOMComponent(inst)) {
+        var instClassName = React.findDOMNode(inst).className;
+        return instClassName && ('' + instClassName).split(/\s+/).indexOf(className) !== -1;
+      }
+      return false;
     });
   },
 
@@ -154,7 +177,7 @@ var ReactTestUtils = {
   /**
    * Finds all instance of components in the rendered tree that are DOM
    * components with the tag name matching `tagName`.
-   * @return an array of all the matches.
+   * @return {array} an array of all the matches.
    */
   scryRenderedDOMComponentsWithTag: function (root, tagName) {
     return ReactTestUtils.findAllInRenderedTree(root, function (inst) {
@@ -178,7 +201,7 @@ var ReactTestUtils = {
 
   /**
    * Finds all instances of components with type equal to `componentType`.
-   * @return an array of all the matches.
+   * @return {array} an array of all the matches.
    */
   scryRenderedComponentsWithType: function (root, componentType) {
     return ReactTestUtils.findAllInRenderedTree(root, function (inst) {
@@ -195,7 +218,7 @@ var ReactTestUtils = {
   findRenderedComponentWithType: function (root, componentType) {
     var all = ReactTestUtils.scryRenderedComponentsWithType(root, componentType);
     if (all.length !== 1) {
-      throw new Error('Did not find exactly one match for componentType:' + componentType);
+      throw new Error('Did not find exactly one match for componentType:' + componentType + ' (found ' + all.length + ')');
     }
     return all[0];
   },
@@ -226,7 +249,7 @@ var ReactTestUtils = {
   /**
    * Simulates a top level event being dispatched from a raw event that occured
    * on an `Element` node.
-   * @param topLevelType {Object} A type from `EventConstants.topLevelTypes`
+   * @param {Object} topLevelType A type from `EventConstants.topLevelTypes`
    * @param {!Element} node The dom to simulate an event occurring on.
    * @param {?Event} fakeNativeEvent Fake native event to use in SyntheticEvent.
    */
@@ -238,8 +261,8 @@ var ReactTestUtils = {
   /**
    * Simulates a top level event being dispatched from a raw event that occured
    * on the `ReactDOMComponent` `comp`.
-   * @param topLevelType {Object} A type from `EventConstants.topLevelTypes`.
-   * @param comp {!ReactDOMComponent}
+   * @param {Object} topLevelType A type from `EventConstants.topLevelTypes`.
+   * @param {!ReactDOMComponent} comp
    * @param {?Event} fakeNativeEvent Fake native event to use in SyntheticEvent.
    */
   simulateNativeEventOnDOMComponent: function (topLevelType, comp, fakeNativeEvent) {
@@ -350,7 +373,7 @@ function makeSimulator(eventType) {
     fakeNativeEvent.target = node;
     // We don't use SyntheticEvent.getPooled in order to not have to worry about
     // properly destroying any properties assigned from `eventData` upon release
-    var event = new SyntheticEvent(dispatchConfig, ReactMount.getID(node), fakeNativeEvent);
+    var event = new SyntheticEvent(dispatchConfig, ReactMount.getID(node), fakeNativeEvent, node);
     assign(event, eventData);
 
     if (dispatchConfig.phasedRegistrationNames) {
@@ -372,7 +395,7 @@ function buildSimulators() {
   var eventType;
   for (eventType in ReactBrowserEventEmitter.eventNameDispatchConfigs) {
     /**
-     * @param {!Element || ReactDOMComponent} domComponentOrNode
+     * @param {!Element|ReactDOMComponent} domComponentOrNode
      * @param {?object} eventData Fake event data to use in SyntheticEvent.
      */
     ReactTestUtils.Simulate[eventType] = makeSimulator(eventType);
@@ -427,7 +450,7 @@ for (eventType in topLevelTypes) {
   // Event type is stored as 'topClick' - we transform that to 'click'
   var convenienceName = eventType.indexOf('top') === 0 ? eventType.charAt(3).toLowerCase() + eventType.substr(4) : eventType;
   /**
-   * @param {!Element || ReactDOMComponent} domComponentOrNode
+   * @param {!Element|ReactDOMComponent} domComponentOrNode
    * @param {?Event} nativeEventData Fake native event to use in SyntheticEvent.
    */
   ReactTestUtils.SimulateNative[convenienceName] = makeNativeSimulator(eventType);

package/lib/ReactUpdateQueue.js

@@ -11,7 +11,6 @@
 
 'use strict';
 
-var ReactLifeCycle = require("./ReactLifeCycle");
 var ReactCurrentOwner = require("./ReactCurrentOwner");
 var ReactElement = require("./ReactElement");
 var ReactInstanceMap = require("./ReactInstanceMap");
@@ -22,17 +21,13 @@ var invariant = require("./invariant");
 var warning = require("./warning");
 
 function enqueueUpdate(internalInstance) {
-  if (internalInstance !== ReactLifeCycle.currentlyMountingInstance) {
-    // If we're in a componentWillMount handler, don't enqueue a rerender
-    // because ReactUpdates assumes we're in a browser context (which is
-    // wrong for server rendering) and we're about to do a render anyway.
-    // See bug in #1740.
-    ReactUpdates.enqueueUpdate(internalInstance);
-  }
+  ReactUpdates.enqueueUpdate(internalInstance);
 }
 
 function getInternalInstanceReadyForUpdate(publicInstance, callerName) {
-  !(ReactCurrentOwner.current == null) ? 'production' !== process.env.NODE_ENV ? invariant(false, '%s(...): Cannot update during an existing state transition ' + '(such as within `render`). Render methods should be a pure function ' + 'of props and state.', callerName) : invariant(false) : undefined;
+  if ('production' !== process.env.NODE_ENV) {
+    'production' !== process.env.NODE_ENV ? warning(ReactCurrentOwner.current == null, '%s(...): Cannot update during an existing state transition ' + '(such as within `render`). Render methods should be a pure function ' + 'of props and state.', callerName) : undefined;
+  }
 
   var internalInstance = ReactInstanceMap.get(publicInstance);
   if (!internalInstance) {
@@ -40,15 +35,11 @@ function getInternalInstanceReadyForUpdate(publicInstance, callerName) {
       // Only warn when we have a callerName. Otherwise we should be silent.
       // We're probably calling from enqueueCallback. We don't want to warn
       // there because we already warned for the corresponding lifecycle method.
-      'production' !== process.env.NODE_ENV ? warning(!callerName, '%s(...): Can only update a mounted or mounting component. ' + 'This usually means you called %s() on an unmounted ' + 'component. This is a no-op.', callerName, callerName) : undefined;
+      'production' !== process.env.NODE_ENV ? warning(!callerName, '%s(...): Can only update a mounted or mounting component. ' + 'This usually means you called %s() on an unmounted component. ' + 'This is a no-op. Please check the code for the %s component.', callerName, callerName, publicInstance.constructor.displayName) : undefined;
     }
     return null;
   }
 
-  if (internalInstance === ReactLifeCycle.currentlyUnmountingInstance) {
-    return null;
-  }
-
   return internalInstance;
 }
 
@@ -58,6 +49,32 @@ function getInternalInstanceReadyForUpdate(publicInstance, callerName) {
  */
 var ReactUpdateQueue = {
 
+  /**
+   * Checks whether or not this composite component is mounted.
+   * @param {ReactClass} publicInstance The instance we want to test.
+   * @return {boolean} True if mounted, false otherwise.
+   * @protected
+   * @final
+   */
+  isMounted: function (publicInstance) {
+    if ('production' !== process.env.NODE_ENV) {
+      var owner = ReactCurrentOwner.current;
+      if (owner !== null) {
+        'production' !== process.env.NODE_ENV ? warning(owner._warnedAboutRefsInRender, '%s is accessing isMounted inside its render() function. ' + 'render() should be a pure function of props and state. It should ' + 'never access something that requires stale data from the previous ' + 'render, such as refs. Move this logic to componentDidMount and ' + 'componentDidUpdate instead.', owner.getName() || 'A component') : undefined;
+        owner._warnedAboutRefsInRender = true;
+      }
+    }
+    var internalInstance = ReactInstanceMap.get(publicInstance);
+    if (internalInstance) {
+      // During componentWillMount and render this will still be null but after
+      // that will always render to something. At least for now. So we can use
+      // this hack.
+      return !!internalInstance._renderedComponent;
+    } else {
+      return false;
+    }
+  },
+
   /**
    * Enqueue a callback that will be executed after all the pending updates
    * have processed.
@@ -75,7 +92,7 @@ var ReactUpdateQueue = {
     // behavior we have in other enqueue* methods.
     // We also need to ignore callbacks in componentWillMount. See
     // enqueueUpdates.
-    if (!internalInstance || internalInstance === ReactLifeCycle.currentlyMountingInstance) {
+    if (!internalInstance) {
       return null;
     }
 
@@ -108,7 +125,7 @@ var ReactUpdateQueue = {
    * You may want to call this when you know that some deeper aspect of the
    * component's state has changed but `setState` was not called.
    *
-   * This will not invoke `shouldUpdateComponent`, but it will invoke
+   * This will not invoke `shouldComponentUpdate`, but it will invoke
    * `componentWillUpdate` and `componentDidUpdate`.
    *
    * @param {ReactClass} publicInstance The instance that should rerender.
@@ -182,20 +199,24 @@ var ReactUpdateQueue = {
    */
   enqueueSetProps: function (publicInstance, partialProps) {
     var internalInstance = getInternalInstanceReadyForUpdate(publicInstance, 'setProps');
-
     if (!internalInstance) {
       return;
     }
+    ReactUpdateQueue.enqueueSetPropsInternal(internalInstance, partialProps);
+  },
 
-    !internalInstance._isTopLevel ? 'production' !== process.env.NODE_ENV ? invariant(false, 'setProps(...): You called `setProps` on a ' + 'component with a parent. This is an anti-pattern since props will ' + 'get reactively updated when rendered. Instead, change the owner\'s ' + '`render` method to pass the correct value as props to the component ' + 'where it is created.') : invariant(false) : undefined;
+  enqueueSetPropsInternal: function (internalInstance, partialProps) {
+    var topLevelWrapper = internalInstance._topLevelWrapper;
+    !topLevelWrapper ? 'production' !== process.env.NODE_ENV ? invariant(false, 'setProps(...): You called `setProps` on a ' + 'component with a parent. This is an anti-pattern since props will ' + 'get reactively updated when rendered. Instead, change the owner\'s ' + '`render` method to pass the correct value as props to the component ' + 'where it is created.') : invariant(false) : undefined;
 
     // Merge with the pending element if it exists, otherwise with existing
     // element props.
-    var element = internalInstance._pendingElement || internalInstance._currentElement;
+    var wrapElement = topLevelWrapper._pendingElement || topLevelWrapper._currentElement;
+    var element = wrapElement.props;
     var props = assign({}, element.props, partialProps);
-    internalInstance._pendingElement = ReactElement.cloneAndReplaceProps(element, props);
+    topLevelWrapper._pendingElement = ReactElement.cloneAndReplaceProps(wrapElement, ReactElement.cloneAndReplaceProps(element, props));
 
-    enqueueUpdate(internalInstance);
+    enqueueUpdate(topLevelWrapper);
   },
 
   /**
@@ -207,19 +228,23 @@ var ReactUpdateQueue = {
    */
   enqueueReplaceProps: function (publicInstance, props) {
     var internalInstance = getInternalInstanceReadyForUpdate(publicInstance, 'replaceProps');
-
     if (!internalInstance) {
       return;
     }
+    ReactUpdateQueue.enqueueReplacePropsInternal(internalInstance, props);
+  },
 
-    !internalInstance._isTopLevel ? 'production' !== process.env.NODE_ENV ? invariant(false, 'replaceProps(...): You called `replaceProps` on a ' + 'component with a parent. This is an anti-pattern since props will ' + 'get reactively updated when rendered. Instead, change the owner\'s ' + '`render` method to pass the correct value as props to the component ' + 'where it is created.') : invariant(false) : undefined;
+  enqueueReplacePropsInternal: function (internalInstance, props) {
+    var topLevelWrapper = internalInstance._topLevelWrapper;
+    !topLevelWrapper ? 'production' !== process.env.NODE_ENV ? invariant(false, 'replaceProps(...): You called `replaceProps` on a ' + 'component with a parent. This is an anti-pattern since props will ' + 'get reactively updated when rendered. Instead, change the owner\'s ' + '`render` method to pass the correct value as props to the component ' + 'where it is created.') : invariant(false) : undefined;
 
     // Merge with the pending element if it exists, otherwise with existing
     // element props.
-    var element = internalInstance._pendingElement || internalInstance._currentElement;
-    internalInstance._pendingElement = ReactElement.cloneAndReplaceProps(element, props);
+    var wrapElement = topLevelWrapper._pendingElement || topLevelWrapper._currentElement;
+    var element = wrapElement.props;
+    topLevelWrapper._pendingElement = ReactElement.cloneAndReplaceProps(wrapElement, ReactElement.cloneAndReplaceProps(element, props));
 
-    enqueueUpdate(internalInstance);
+    enqueueUpdate(topLevelWrapper);
   },
 
   enqueueElementInternal: function (internalInstance, newElement) {