react 15.0.3-alpha.1 → 15.2.0-rc.1

package/lib/ReactMultiChild.js

@@ -11,13 +11,18 @@
 
 'use strict';
 
+var _prodInvariant = require('./reactProdInvariant');
+
 var ReactComponentEnvironment = require('./ReactComponentEnvironment');
+var ReactInstanceMap = require('./ReactInstanceMap');
+var ReactInstrumentation = require('./ReactInstrumentation');
 var ReactMultiChildUpdateTypes = require('./ReactMultiChildUpdateTypes');
 
 var ReactCurrentOwner = require('./ReactCurrentOwner');
 var ReactReconciler = require('./ReactReconciler');
 var ReactChildReconciler = require('./ReactChildReconciler');
 
+var emptyFunction = require('fbjs/lib/emptyFunction');
 var flattenChildren = require('./flattenChildren');
 var invariant = require('fbjs/lib/invariant');
 
@@ -53,7 +58,7 @@ function makeMove(child, afterNode, toIndex) {
     type: ReactMultiChildUpdateTypes.MOVE_EXISTING,
     content: null,
     fromIndex: child._mountIndex,
-    fromNode: ReactReconciler.getNativeNode(child),
+    fromNode: ReactReconciler.getHostNode(child),
     toIndex: toIndex,
     afterNode: afterNode
   };
@@ -134,6 +139,31 @@ function processQueue(inst, updateQueue) {
   ReactComponentEnvironment.processChildrenUpdates(inst, updateQueue);
 }
 
+var setParentForInstrumentation = emptyFunction;
+var setChildrenForInstrumentation = emptyFunction;
+if (process.env.NODE_ENV !== 'production') {
+  var getDebugID = function (inst) {
+    if (!inst._debugID) {
+      // Check for ART-like instances. TODO: This is silly/gross.
+      var internal;
+      if (internal = ReactInstanceMap.get(inst)) {
+        inst = internal;
+      }
+    }
+    return inst._debugID;
+  };
+  setParentForInstrumentation = function (child) {
+    if (child._debugID !== 0) {
+      ReactInstrumentation.debugTool.onSetParent(child._debugID, getDebugID(this));
+    }
+  };
+  setChildrenForInstrumentation = function (children) {
+    ReactInstrumentation.debugTool.onSetChildren(getDebugID(this), children ? Object.keys(children).map(function (key) {
+      return children[key]._debugID;
+    }) : []);
+  };
+}
+
 /**
  * ReactMultiChild are capable of reconciling multiple children.
  *
@@ -156,7 +186,7 @@ var ReactMultiChild = {
         if (this._currentElement) {
           try {
             ReactCurrentOwner.current = this._currentElement._owner;
-            return ReactChildReconciler.instantiateChildren(nestedChildren, transaction, context);
+            return ReactChildReconciler.instantiateChildren(nestedChildren, transaction, context, this._debugID);
           } finally {
             ReactCurrentOwner.current = null;
           }
@@ -171,7 +201,7 @@ var ReactMultiChild = {
         if (this._currentElement) {
           try {
             ReactCurrentOwner.current = this._currentElement._owner;
-            nextChildren = flattenChildren(nextNestedChildrenElements);
+            nextChildren = flattenChildren(nextNestedChildrenElements, this._debugID);
           } finally {
             ReactCurrentOwner.current = null;
           }
@@ -195,16 +225,25 @@ var ReactMultiChild = {
     mountChildren: function (nestedChildren, transaction, context) {
       var children = this._reconcilerInstantiateChildren(nestedChildren, transaction, context);
       this._renderedChildren = children;
+
       var mountImages = [];
       var index = 0;
       for (var name in children) {
         if (children.hasOwnProperty(name)) {
           var child = children[name];
-          var mountImage = ReactReconciler.mountComponent(child, transaction, this, this._nativeContainerInfo, context);
+          if (process.env.NODE_ENV !== 'production') {
+            setParentForInstrumentation.call(this, child);
+          }
+          var mountImage = ReactReconciler.mountComponent(child, transaction, this, this._hostContainerInfo, context);
           child._mountIndex = index++;
           mountImages.push(mountImage);
         }
       }
+
+      if (process.env.NODE_ENV !== 'production') {
+        setChildrenForInstrumentation.call(this, children);
+      }
+
       return mountImages;
     },
 
@@ -220,7 +259,7 @@ var ReactMultiChild = {
       ReactChildReconciler.unmountChildren(prevChildren, false);
       for (var name in prevChildren) {
         if (prevChildren.hasOwnProperty(name)) {
-          !false ? process.env.NODE_ENV !== 'production' ? invariant(false, 'updateTextContent called on non-empty component.') : invariant(false) : void 0;
+          !false ? process.env.NODE_ENV !== 'production' ? invariant(false, 'updateTextContent called on non-empty component.') : _prodInvariant('118') : void 0;
         }
       }
       // Set new text content.
@@ -240,7 +279,7 @@ var ReactMultiChild = {
       ReactChildReconciler.unmountChildren(prevChildren, false);
       for (var name in prevChildren) {
         if (prevChildren.hasOwnProperty(name)) {
-          !false ? process.env.NODE_ENV !== 'production' ? invariant(false, 'updateTextContent called on non-empty component.') : invariant(false) : void 0;
+          !false ? process.env.NODE_ENV !== 'production' ? invariant(false, 'updateTextContent called on non-empty component.') : _prodInvariant('118') : void 0;
         }
       }
       var updates = [makeSetMarkup(nextMarkup)];
@@ -299,7 +338,7 @@ var ReactMultiChild = {
           updates = enqueue(updates, this._mountChildAtIndex(nextChild, lastPlacedNode, nextIndex, transaction, context));
         }
         nextIndex++;
-        lastPlacedNode = ReactReconciler.getNativeNode(nextChild);
+        lastPlacedNode = ReactReconciler.getHostNode(nextChild);
       }
       // Remove children that are no longer present.
       for (name in removedNodes) {
@@ -311,6 +350,10 @@ var ReactMultiChild = {
         processQueue(this, updates);
       }
       this._renderedChildren = nextChildren;
+
+      if (process.env.NODE_ENV !== 'production') {
+        setChildrenForInstrumentation.call(this, nextChildren);
+      }
     },
 
     /**
@@ -376,7 +419,7 @@ var ReactMultiChild = {
      * @private
      */
     _mountChildAtIndex: function (child, afterNode, index, transaction, context) {
-      var mountImage = ReactReconciler.mountComponent(child, transaction, this, this._nativeContainerInfo, context);
+      var mountImage = ReactReconciler.mountComponent(child, transaction, this, this._hostContainerInfo, context);
       child._mountIndex = index;
       return this.createChild(child, afterNode, mountImage);
     },

package/lib/ReactNativeAttributePayload.js

@@ -13,8 +13,8 @@
 
 var ReactNativePropRegistry = require('./ReactNativePropRegistry');
 
-var deepDiffer = require('deepDiffer');
-var flattenStyle = require('flattenStyle');
+var deepDiffer = require('react-native/lib/deepDiffer');
+var flattenStyle = require('react-native/lib/flattenStyle');
 
 var emptyObject = {};
 
@@ -282,6 +282,9 @@ function diffProperties(updatePayload, prevProps, nextProps, validAttributes) {
       // default: fallthrough case when nested properties are defined
       removedKeys = null;
       removedKeyCount = 0;
+      // We think that attributeConfig is not CustomAttributeConfiguration at
+      // this point so we assume it must be AttributeConfiguration.
+      // $FlowFixMe
       updatePayload = diffNestedProperty(updatePayload, prevProp, nextProp, attributeConfig);
       if (removedKeyCount > 0 && updatePayload) {
         restoreDeletedValuesInNestedArray(updatePayload, nextProp, attributeConfig);

package/lib/ReactNativeBaseComponent.js

@@ -19,9 +19,9 @@ var ReactNativeComponentTree = require('./ReactNativeComponentTree');
 var ReactNativeEventEmitter = require('./ReactNativeEventEmitter');
 var ReactNativeTagHandles = require('./ReactNativeTagHandles');
 var ReactMultiChild = require('./ReactMultiChild');
-var UIManager = require('UIManager');
+var UIManager = require('react-native/lib/UIManager');
 
-var deepFreezeAndThrowOnMutationInDev = require('deepFreezeAndThrowOnMutationInDev');
+var deepFreezeAndThrowOnMutationInDev = require('react-native/lib/deepFreezeAndThrowOnMutationInDev');
 
 var registrationNames = ReactNativeEventEmitter.registrationNames;
 var putListener = ReactNativeEventEmitter.putListener;
@@ -150,7 +150,7 @@ ReactNativeBaseComponent.Mixin = {
    *
    * @return {null} Null.
    */
-  getNativeNode: function () {
+  getHostNode: function () {
     return this._rootNodeID;
   },
 
@@ -159,12 +159,12 @@ ReactNativeBaseComponent.Mixin = {
    * @param {Transaction} transaction For creating/updating.
    * @return {string} Unique iOS view tag.
    */
-  mountComponent: function (transaction, nativeParent, nativeContainerInfo, context) {
+  mountComponent: function (transaction, hostParent, hostContainerInfo, context) {
     var tag = ReactNativeTagHandles.allocateTag();
 
     this._rootNodeID = tag;
-    this._nativeParent = nativeParent;
-    this._nativeContainerInfo = nativeContainerInfo;
+    this._hostParent = hostParent;
+    this._hostContainerInfo = hostContainerInfo;
 
     if (process.env.NODE_ENV !== 'production') {
       for (var key in this.viewConfig.validAttributes) {
@@ -176,7 +176,7 @@ ReactNativeBaseComponent.Mixin = {
 
     var updatePayload = ReactNativeAttributePayload.create(this._currentElement.props, this.viewConfig.validAttributes);
 
-    var nativeTopRootTag = nativeContainerInfo._tag;
+    var nativeTopRootTag = hostContainerInfo._tag;
     UIManager.createView(tag, this.viewConfig.uiViewClassName, nativeTopRootTag, updatePayload);
 
     ReactNativeComponentTree.precacheNode(this, tag);

package/lib/ReactNativeBridgeEventPlugin.js

@@ -17,7 +17,7 @@ var _extends = _assign || function (target) { for (var i = 1; i < arguments.leng
 
 var EventPropagators = require('./EventPropagators');
 var SyntheticEvent = require('./SyntheticEvent');
-var UIManager = require('UIManager');
+var UIManager = require('react-native/lib/UIManager');
 
 var warning = require('fbjs/lib/warning');
 

package/lib/ReactNativeComponentTree.js

@@ -11,18 +11,20 @@
 
 'use strict';
 
+var _prodInvariant = require('./reactProdInvariant');
+
 var invariant = require('fbjs/lib/invariant');
 
 var instanceCache = {};
 
 /**
- * Drill down (through composites and empty components) until we get a native or
- * native text component.
+ * Drill down (through composites and empty components) until we get a host or
+ * host text component.
  *
  * This is pretty polymorphic but unavoidable with the current structure we have
  * for `_renderedChildren`.
  */
-function getRenderedNativeOrTextFromComponent(component) {
+function getRenderedHostOrTextFromComponent(component) {
   var rendered;
   while (rendered = component._renderedComponent) {
     component = rendered;
@@ -31,11 +33,11 @@ function getRenderedNativeOrTextFromComponent(component) {
 }
 
 /**
- * Populate `_nativeNode` on the rendered native/text component with the given
+ * Populate `_hostNode` on the rendered host/text component with the given
  * DOM node. The passed `inst` can be a composite.
  */
 function precacheNode(inst, tag) {
-  var nativeInst = getRenderedNativeOrTextFromComponent(inst);
+  var nativeInst = getRenderedHostOrTextFromComponent(inst);
   instanceCache[tag] = nativeInst;
 }
 
@@ -51,7 +53,7 @@ function getInstanceFromTag(tag) {
 }
 
 function getTagFromInstance(inst) {
-  !inst._rootNodeID ? process.env.NODE_ENV !== 'production' ? invariant(false, 'All native instances should have a tag.') : invariant(false) : void 0;
+  !inst._rootNodeID ? process.env.NODE_ENV !== 'production' ? invariant(false, 'All native instances should have a tag.') : _prodInvariant('17') : void 0;
   return inst._rootNodeID;
 }
 

package/lib/ReactNativeDOMIDOperations.js

@@ -7,14 +7,12 @@
  * of patent rights can be found in the PATENTS file in the same directory.
  *
  * @providesModule ReactNativeDOMIDOperations
- * 
  */
 'use strict';
 
 var ReactNativeComponentTree = require('./ReactNativeComponentTree');
 var ReactMultiChildUpdateTypes = require('./ReactMultiChildUpdateTypes');
-var ReactPerf = require('./ReactPerf');
-var UIManager = require('UIManager');
+var UIManager = require('react-native/lib/UIManager');
 
 /**
  * Updates a component's children by processing a series of updates.
@@ -64,9 +62,7 @@ var dangerouslyProcessChildrenUpdates = function (inst, childrenUpdates) {
  * `ReactComponent.DOMIDOperations`.
  */
 var ReactNativeDOMIDOperations = {
-  dangerouslyProcessChildrenUpdates: ReactPerf.measure(
-  // FIXME(frantic): #4441289 Hack to avoid modifying react-tools
-  'ReactDOMIDOperations', 'dangerouslyProcessChildrenUpdates', dangerouslyProcessChildrenUpdates),
+  dangerouslyProcessChildrenUpdates: dangerouslyProcessChildrenUpdates,
 
   /**
    * Replaces a view that exists in the document with markup.
@@ -74,10 +70,10 @@ var ReactNativeDOMIDOperations = {
    * @param {string} id ID of child to be replaced.
    * @param {string} markup Mount image to replace child with id.
    */
-  dangerouslyReplaceNodeWithMarkupByID: ReactPerf.measure('ReactDOMIDOperations', 'dangerouslyReplaceNodeWithMarkupByID', function (id, mountImage) {
+  dangerouslyReplaceNodeWithMarkupByID: function (id, mountImage) {
     var oldTag = id;
     UIManager.replaceExistingNonRootView(oldTag, mountImage);
-  })
+  }
 };
 
 module.exports = ReactNativeDOMIDOperations;

package/lib/ReactNativeDefaultInjection.js

@@ -18,17 +18,19 @@
  * TODO: require this in packager, not in React #10932517
  */
 
-require('InitializeJavaScriptAppEngine');
+var _prodInvariant = require('./reactProdInvariant');
+
+require('react-native/lib/InitializeJavaScriptAppEngine');
 
 var EventPluginHub = require('./EventPluginHub');
 var EventPluginUtils = require('./EventPluginUtils');
-var RCTEventEmitter = require('RCTEventEmitter');
+var RCTEventEmitter = require('react-native/lib/RCTEventEmitter');
 var ReactComponentEnvironment = require('./ReactComponentEnvironment');
 var ReactDefaultBatchingStrategy = require('./ReactDefaultBatchingStrategy');
 var ReactElement = require('./ReactElement');
 var ReactEmptyComponent = require('./ReactEmptyComponent');
 var ReactNativeBridgeEventPlugin = require('./ReactNativeBridgeEventPlugin');
-var ReactNativeComponent = require('./ReactNativeComponent');
+var ReactHostComponent = require('./ReactHostComponent');
 var ReactNativeComponentEnvironment = require('./ReactNativeComponentEnvironment');
 var ReactNativeComponentTree = require('./ReactNativeComponentTree');
 var ReactNativeEventEmitter = require('./ReactNativeEventEmitter');
@@ -74,7 +76,7 @@ function inject() {
 
   var EmptyComponent = function (instantiate) {
     // Can't import View at the top because it depends on React to make its composite
-    var View = require('View');
+    var View = require('react-native/lib/View');
     return new ReactSimpleEmptyComponent(ReactElement.createElement(View, {
       collapsable: true,
       style: { position: 'absolute' }
@@ -83,14 +85,14 @@ function inject() {
 
   ReactEmptyComponent.injection.injectEmptyComponentFactory(EmptyComponent);
 
-  ReactNativeComponent.injection.injectTextComponentClass(ReactNativeTextComponent);
-  ReactNativeComponent.injection.injectGenericComponentClass(function (tag) {
+  ReactHostComponent.injection.injectTextComponentClass(ReactNativeTextComponent);
+  ReactHostComponent.injection.injectGenericComponentClass(function (tag) {
     // Show a nicer error message for non-function tags
     var info = '';
     if (typeof tag === 'string' && /^[a-z]/.test(tag)) {
       info += ' Each component name should start with an uppercase letter.';
     }
-    !false ? process.env.NODE_ENV !== 'production' ? invariant(false, 'Expected a component class, got %s.%s', tag, info) : invariant(false) : void 0;
+    !false ? process.env.NODE_ENV !== 'production' ? invariant(false, 'Expected a component class, got %s.%s', tag, info) : _prodInvariant('18', tag, info) : void 0;
   });
 }
 

package/lib/ReactNativeGlobalResponderHandler.js

@@ -10,7 +10,7 @@
  */
 'use strict';
 
-var UIManager = require('UIManager');
+var UIManager = require('react-native/lib/UIManager');
 
 var ReactNativeGlobalResponderHandler = {
   onChange: function (from, to, blockNativeResponder) {

package/lib/ReactNativeMount.js

@@ -12,13 +12,13 @@
 'use strict';
 
 var ReactElement = require('./ReactElement');
+var ReactInstrumentation = require('./ReactInstrumentation');
 var ReactNativeContainerInfo = require('./ReactNativeContainerInfo');
 var ReactNativeTagHandles = require('./ReactNativeTagHandles');
-var ReactPerf = require('./ReactPerf');
 var ReactReconciler = require('./ReactReconciler');
 var ReactUpdateQueue = require('./ReactUpdateQueue');
 var ReactUpdates = require('./ReactUpdates');
-var UIManager = require('UIManager');
+var UIManager = require('react-native/lib/UIManager');
 
 var emptyObject = require('fbjs/lib/emptyObject');
 var instantiateReactComponent = require('./instantiateReactComponent');
@@ -109,11 +109,26 @@ var ReactNativeMount = {
     var instance = instantiateReactComponent(nextWrappedElement);
     ReactNativeMount._instancesByContainerID[containerTag] = instance;
 
+    if (process.env.NODE_ENV !== 'production') {
+      // Mute future events from the top level wrapper.
+      // It is an implementation detail that devtools should not know about.
+      instance._debugID = 0;
+
+      if (process.env.NODE_ENV !== 'production') {
+        ReactInstrumentation.debugTool.onBeginFlush();
+      }
+    }
+
     // The initial render is synchronous but any updates that happen during
     // rendering, in componentWillMount or componentDidMount, will be batched
     // according to the current batching strategy.
 
     ReactUpdates.batchedUpdates(batchedMountComponentIntoNode, instance, containerTag);
+    if (process.env.NODE_ENV !== 'production') {
+      // The instance here is TopLevelWrapper so we report mount for its child.
+      ReactInstrumentation.debugTool.onMountRootComponent(instance._renderedComponent._debugID);
+      ReactInstrumentation.debugTool.onEndFlush();
+    }
     var component = instance.getPublicInstance();
     if (callback) {
       callback.call(component);
@@ -125,14 +140,12 @@ var ReactNativeMount = {
    * @param {View} view View tree image.
    * @param {number} containerViewID View to insert sub-view into.
    */
-  _mountImageIntoNode: ReactPerf.measure(
-  // FIXME(frantic): #4441289 Hack to avoid modifying react-tools
-  'ReactComponentBrowserEnvironment', 'mountImageIntoNode', function (mountImage, containerID) {
+  _mountImageIntoNode: function (mountImage, containerID) {
     // Since we now know that the `mountImage` has been mounted, we can
     // mark it as such.
     var childTag = mountImage;
     UIManager.setChildren(containerID, [childTag]);
-  }),
+  },
 
   /**
    * Standard unmounting of the component that is rendered into `containerID`,
@@ -163,8 +176,14 @@ var ReactNativeMount = {
     if (!instance) {
       return false;
     }
+    if (process.env.NODE_ENV !== 'production') {
+      ReactInstrumentation.debugTool.onBeginFlush();
+    }
     ReactNativeMount.unmountComponentFromNode(instance, containerTag);
     delete ReactNativeMount._instancesByContainerID[containerTag];
+    if (process.env.NODE_ENV !== 'production') {
+      ReactInstrumentation.debugTool.onEndFlush();
+    }
     return true;
   },
 
@@ -185,6 +204,4 @@ var ReactNativeMount = {
 
 };
 
-ReactNativeMount.renderComponent = ReactPerf.measure('ReactMount', '_renderNewRootComponent', ReactNativeMount.renderComponent);
-
 module.exports = ReactNativeMount;