react 15.0.2 → 15.1.0

package/lib/ReactMount.js

@@ -22,7 +22,6 @@ var ReactElement = require('./ReactElement');
 var ReactFeatureFlags = require('./ReactFeatureFlags');
 var ReactInstrumentation = require('./ReactInstrumentation');
 var ReactMarkupChecksum = require('./ReactMarkupChecksum');
-var ReactPerf = require('./ReactPerf');
 var ReactReconciler = require('./ReactReconciler');
 var ReactUpdateQueue = require('./ReactUpdateQueue');
 var ReactUpdates = require('./ReactUpdates');
@@ -260,6 +259,10 @@ var ReactMount = {
    * @return {ReactComponent} nextComponent
    */
   _renderNewRootComponent: function (nextElement, container, shouldReuseMarkup, context) {
+    if (process.env.NODE_ENV !== 'production') {
+      ReactInstrumentation.debugTool.onBeginFlush();
+    }
+
     // Various parts of our code (such as ReactCompositeComponent's
     // _renderValidatedComponent) assume that calls to render aren't nested;
     // verify that that's the case.
@@ -270,6 +273,12 @@ var ReactMount = {
     ReactBrowserEventEmitter.ensureScrollValueMonitoring();
     var componentInstance = instantiateReactComponent(nextElement);
 
+    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.
+      componentInstance._debugID = 0;
+    }
+
     // 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.
@@ -280,7 +289,9 @@ var ReactMount = {
     instancesByReactRootID[wrapperID] = componentInstance;
 
     if (process.env.NODE_ENV !== 'production') {
-      ReactInstrumentation.debugTool.onMountRootComponent(componentInstance);
+      // The instance here is TopLevelWrapper so we report mount for its child.
+      ReactInstrumentation.debugTool.onMountRootComponent(componentInstance._renderedComponent._debugID);
+      ReactInstrumentation.debugTool.onEndFlush();
     }
 
     return componentInstance;
@@ -360,6 +371,7 @@ var ReactMount = {
 
   /**
    * Renders a React component into the DOM in the supplied `container`.
+   * See https://facebook.github.io/react/docs/top-level-api.html#reactdom.render
    *
    * If the React component was previously rendered into `container`, this will
    * perform an update on it and only mutate the DOM as necessary to reflect the
@@ -376,6 +388,7 @@ var ReactMount = {
 
   /**
    * Unmounts and destroys the React component rendered in the `container`.
+   * See https://facebook.github.io/react/docs/top-level-api.html#reactdom.unmountcomponentatnode
    *
    * @param {DOMElement} container DOM element containing a React component.
    * @return {boolean} True if a component was found in and unmounted from
@@ -467,12 +480,14 @@ var ReactMount = {
       setInnerHTML(container, markup);
       ReactDOMComponentTree.precacheNode(instance, container.firstChild);
     }
+
+    if (process.env.NODE_ENV !== 'production') {
+      var nativeNode = ReactDOMComponentTree.getInstanceFromNode(container.firstChild);
+      if (nativeNode._debugID !== 0) {
+        ReactInstrumentation.debugTool.onNativeOperation(nativeNode._debugID, 'mount', markup.toString());
+      }
+    }
   }
 };
 
-ReactPerf.measureMethods(ReactMount, 'ReactMount', {
-  _renderNewRootComponent: '_renderNewRootComponent',
-  _mountImageIntoNode: '_mountImageIntoNode'
-});
-
 module.exports = ReactMount;

package/lib/ReactMultiChild.js

@@ -12,12 +12,14 @@
 'use strict';
 
 var ReactComponentEnvironment = require('./ReactComponentEnvironment');
+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');
 
@@ -134,6 +136,15 @@ function processQueue(inst, updateQueue) {
   ReactComponentEnvironment.processChildrenUpdates(inst, updateQueue);
 }
 
+var setChildrenForInstrumentation = emptyFunction;
+if (process.env.NODE_ENV !== 'production') {
+  setChildrenForInstrumentation = function (children) {
+    ReactInstrumentation.debugTool.onSetChildren(this._debugID, children ? Object.keys(children).map(function (key) {
+      return children[key]._debugID;
+    }) : []);
+  };
+}
+
 /**
  * ReactMultiChild are capable of reconciling multiple children.
  *
@@ -195,6 +206,7 @@ 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) {
@@ -205,6 +217,11 @@ var ReactMultiChild = {
           mountImages.push(mountImage);
         }
       }
+
+      if (process.env.NODE_ENV !== 'production') {
+        setChildrenForInstrumentation.call(this, children);
+      }
+
       return mountImages;
     },
 
@@ -311,6 +328,10 @@ var ReactMultiChild = {
         processQueue(this, updates);
       }
       this._renderedChildren = nextChildren;
+
+      if (process.env.NODE_ENV !== 'production') {
+        setChildrenForInstrumentation.call(this, nextChildren);
+      }
     },
 
     /**

package/lib/ReactNativeAttributePayload.js

@@ -11,7 +11,6 @@
  */
 'use strict';
 
-var Platform = require('Platform');
 var ReactNativePropRegistry = require('./ReactNativePropRegistry');
 
 var deepDiffer = require('deepDiffer');
@@ -35,21 +34,6 @@ var emptyObject = {};
 var removedKeys = null;
 var removedKeyCount = 0;
 
-function translateKey(propKey) {
-  if (propKey === 'transform') {
-    // We currently special case the key for `transform`. iOS uses the
-    // transformMatrix name and Android uses the decomposedMatrix name.
-    // TODO: We could unify these names and just use the name `transform`
-    // all the time. Just need to update the native side.
-    if (Platform.OS === 'android') {
-      return 'decomposedMatrix';
-    } else {
-      return 'transformMatrix';
-    }
-  }
-  return propKey;
-}
-
 function defaultDiffer(prevProp, nextProp) {
   if (typeof nextProp !== 'object' || nextProp === null) {
     // Scalars have already been checked for equality
@@ -224,7 +208,6 @@ function diffProperties(updatePayload, prevProps, nextProps, validAttributes) {
   var attributeConfig;
   var nextProp;
   var prevProp;
-  var altKey;
 
   for (var propKey in nextProps) {
     attributeConfig = validAttributes[propKey];
@@ -232,12 +215,6 @@ function diffProperties(updatePayload, prevProps, nextProps, validAttributes) {
       continue; // not a valid native prop
     }
 
-    altKey = translateKey(propKey);
-    if (!validAttributes[altKey]) {
-      // If there is no config for the alternative, bail out. Helps ART.
-      altKey = propKey;
-    }
-
     prevProp = prevProps[propKey];
     nextProp = nextProps[propKey];
 
@@ -265,7 +242,7 @@ function diffProperties(updatePayload, prevProps, nextProps, validAttributes) {
       removedKeys[propKey] = false;
     }
 
-    if (updatePayload && updatePayload[altKey] !== undefined) {
+    if (updatePayload && updatePayload[propKey] !== undefined) {
       // Something else already triggered an update to this key because another
       // value diffed. Since we're now later in the nested arrays our value is
       // more important so we need to calculate it and override the existing
@@ -274,11 +251,11 @@ function diffProperties(updatePayload, prevProps, nextProps, validAttributes) {
       // Pattern match on: attributeConfig
       if (typeof attributeConfig !== 'object') {
         // case: !Object is the default case
-        updatePayload[altKey] = nextProp;
+        updatePayload[propKey] = nextProp;
       } else if (typeof attributeConfig.diff === 'function' || typeof attributeConfig.process === 'function') {
         // case: CustomAttributeConfiguration
         var nextValue = typeof attributeConfig.process === 'function' ? attributeConfig.process(nextProp) : nextProp;
-        updatePayload[altKey] = nextValue;
+        updatePayload[propKey] = nextValue;
       }
       continue;
     }
@@ -292,14 +269,14 @@ function diffProperties(updatePayload, prevProps, nextProps, validAttributes) {
       // case: !Object is the default case
       if (defaultDiffer(prevProp, nextProp)) {
         // a normal leaf has changed
-        (updatePayload || (updatePayload = {}))[altKey] = nextProp;
+        (updatePayload || (updatePayload = {}))[propKey] = nextProp;
       }
     } else if (typeof attributeConfig.diff === 'function' || typeof attributeConfig.process === 'function') {
       // case: CustomAttributeConfiguration
       var shouldUpdate = prevProp === undefined || (typeof attributeConfig.diff === 'function' ? attributeConfig.diff(prevProp, nextProp) : defaultDiffer(prevProp, nextProp));
       if (shouldUpdate) {
         nextValue = typeof attributeConfig.process === 'function' ? attributeConfig.process(nextProp) : nextProp;
-        (updatePayload || (updatePayload = {}))[altKey] = nextValue;
+        (updatePayload || (updatePayload = {}))[propKey] = nextValue;
       }
     } else {
       // default: fallthrough case when nested properties are defined
@@ -325,13 +302,7 @@ function diffProperties(updatePayload, prevProps, nextProps, validAttributes) {
       continue; // not a valid native prop
     }
 
-    altKey = translateKey(propKey);
-    if (!attributeConfig[altKey]) {
-      // If there is no config for the alternative, bail out. Helps ART.
-      altKey = propKey;
-    }
-
-    if (updatePayload && updatePayload[altKey] !== undefined) {
+    if (updatePayload && updatePayload[propKey] !== undefined) {
       // This was already updated to a diff result earlier.
       continue;
     }
@@ -345,7 +316,7 @@ function diffProperties(updatePayload, prevProps, nextProps, validAttributes) {
 
       // case: CustomAttributeConfiguration | !Object
       // Flag the leaf property for removal by sending a sentinel.
-      (updatePayload || (updatePayload = {}))[altKey] = null;
+      (updatePayload || (updatePayload = {}))[propKey] = null;
       if (!removedKeys) {
         removedKeys = {};
       }

package/lib/{IOSNativeBridgeEventPlugin.js → ReactNativeBridgeEventPlugin.js}

@@ -6,16 +6,19 @@
  * 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 IOSNativeBridgeEventPlugin
+ * @providesModule ReactNativeBridgeEventPlugin
  * 
  */
 'use strict';
 
+var _assign = require('object-assign');
+
+var _extends = _assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
 var EventPropagators = require('./EventPropagators');
 var SyntheticEvent = require('./SyntheticEvent');
 var UIManager = require('UIManager');
 
-var merge = require('merge');
 var warning = require('fbjs/lib/warning');
 
 var customBubblingEventTypes = UIManager.customBubblingEventTypes;
@@ -32,9 +35,9 @@ for (var directTypeName in customDirectEventTypes) {
   allTypesByEventName[directTypeName] = customDirectEventTypes[directTypeName];
 }
 
-var IOSNativeBridgeEventPlugin = {
+var ReactNativeBridgeEventPlugin = {
 
-  eventTypes: merge(customBubblingEventTypes, customDirectEventTypes),
+  eventTypes: _extends({}, customBubblingEventTypes, customDirectEventTypes),
 
   /**
    * @see {EventPluginHub.extractEvents}
@@ -54,4 +57,4 @@ var IOSNativeBridgeEventPlugin = {
   }
 };
 
-module.exports = IOSNativeBridgeEventPlugin;
+module.exports = ReactNativeBridgeEventPlugin;

package/lib/ReactNativeDOMIDOperations.js

@@ -13,7 +13,6 @@
 
 var ReactNativeComponentTree = require('./ReactNativeComponentTree');
 var ReactMultiChildUpdateTypes = require('./ReactMultiChildUpdateTypes');
-var ReactPerf = require('./ReactPerf');
 var UIManager = require('UIManager');
 
 /**
@@ -64,9 +63,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 +71,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

@@ -15,40 +15,43 @@
  * Make sure essential globals are available and are patched correctly. Please don't remove this
  * line. Bundles created by react-packager `require` it before executing any application code. This
  * ensures it exists in the dependency graph and can be `require`d.
+ * TODO: require this in packager, not in React #10932517
  */
 
 require('InitializeJavaScriptAppEngine');
 
 var EventPluginHub = require('./EventPluginHub');
 var EventPluginUtils = require('./EventPluginUtils');
-var IOSDefaultEventPluginOrder = require('./IOSDefaultEventPluginOrder');
-var IOSNativeBridgeEventPlugin = require('./IOSNativeBridgeEventPlugin');
-var ReactElement = require('./ReactElement');
+var RCTEventEmitter = require('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 ReactNativeComponentEnvironment = require('./ReactNativeComponentEnvironment');
+var ReactNativeComponentTree = require('./ReactNativeComponentTree');
+var ReactNativeEventEmitter = require('./ReactNativeEventEmitter');
+var ReactNativeEventPluginOrder = require('./ReactNativeEventPluginOrder');
 var ReactNativeGlobalResponderHandler = require('./ReactNativeGlobalResponderHandler');
 var ReactNativeTextComponent = require('./ReactNativeTextComponent');
 var ReactNativeTreeTraversal = require('./ReactNativeTreeTraversal');
-var ReactNativeComponent = require('./ReactNativeComponent');
-var ReactNativeComponentTree = require('./ReactNativeComponentTree');
 var ReactSimpleEmptyComponent = require('./ReactSimpleEmptyComponent');
 var ReactUpdates = require('./ReactUpdates');
 var ResponderEventPlugin = require('./ResponderEventPlugin');
 
 var invariant = require('fbjs/lib/invariant');
 
-// Just to ensure this gets packaged, since its only caller is from Native.
-require('RCTEventEmitter');
-require('RCTLog');
-require('JSTimersExecution');
-
 function inject() {
+  /**
+   * Register the event emitter with the native bridge
+   */
+  RCTEventEmitter.register(ReactNativeEventEmitter);
+
   /**
    * Inject module for resolving DOM hierarchy and plugin ordering.
    */
-  EventPluginHub.injection.injectEventPluginOrder(IOSDefaultEventPluginOrder);
+  EventPluginHub.injection.injectEventPluginOrder(ReactNativeEventPluginOrder);
   EventPluginUtils.injection.injectComponentTree(ReactNativeComponentTree);
   EventPluginUtils.injection.injectTreeTraversal(ReactNativeTreeTraversal);
 
@@ -60,7 +63,7 @@ function inject() {
    */
   EventPluginHub.injection.injectEventPluginsByName({
     'ResponderEventPlugin': ResponderEventPlugin,
-    'IOSNativeBridgeEventPlugin': IOSNativeBridgeEventPlugin
+    'ReactNativeBridgeEventPlugin': ReactNativeBridgeEventPlugin
   });
 
   ReactUpdates.injection.injectReconcileTransaction(ReactNativeComponentEnvironment.ReactReconcileTransaction);

package/lib/ReactNativeEventEmitter.js

@@ -11,15 +11,18 @@
  */
 'use strict';
 
+var _assign = require('object-assign');
+
+var _extends = _assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var EventConstants = require('./EventConstants');
 var EventPluginHub = require('./EventPluginHub');
 var EventPluginRegistry = require('./EventPluginRegistry');
 var ReactEventEmitterMixin = require('./ReactEventEmitterMixin');
 var ReactNativeComponentTree = require('./ReactNativeComponentTree');
 var ReactNativeTagHandles = require('./ReactNativeTagHandles');
 var ReactUpdates = require('./ReactUpdates');
-var EventConstants = require('./EventConstants');
 
-var merge = require('merge');
 var warning = require('fbjs/lib/warning');
 
 var topLevelTypes = EventConstants.topLevelTypes;
@@ -88,7 +91,7 @@ var removeTouchesAtIndices = function (touches, indices) {
  *
  * @internal
  */
-var ReactNativeEventEmitter = merge(ReactEventEmitterMixin, {
+var ReactNativeEventEmitter = _extends({}, ReactEventEmitterMixin, {
 
   registrationNames: EventPluginRegistry.registrationNameModules,
 

package/lib/{IOSDefaultEventPluginOrder.js → ReactNativeEventPluginOrder.js}

@@ -6,11 +6,11 @@
  * 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 IOSDefaultEventPluginOrder
+ * @providesModule ReactNativeEventPluginOrder
  * 
  */
 'use strict';
 
-var IOSDefaultEventPluginOrder = ['ResponderEventPlugin', 'IOSNativeBridgeEventPlugin'];
+var ReactNativeEventPluginOrder = ['ResponderEventPlugin', 'ReactNativeBridgeEventPlugin'];
 
-module.exports = IOSDefaultEventPluginOrder;
+module.exports = ReactNativeEventPluginOrder;

package/lib/ReactNativeMount.js

@@ -12,9 +12,9 @@
 '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');
@@ -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;