Move React Core Integration to a Dependency

Summary:Adding the react native renderer dependency and various fixes to support React 15.

Don't use dispatchID for touchableHandleResponderGrant

This callback argument was removed because "IDs" no longer exist. Instead, we'll
use the tag from the event target.

The corresponding PR on React Core is: facebook/react#6338

Reviewed By: spicyj

Differential Revision: D3159788

fb-gh-sync-id: 60e5cd2aa0af69d83fcdac3dfde0a85a748cb7b9
fbshipit-source-id: 60e5cd2aa0af69d83fcdac3dfde0a85a748cb7b9

Libraries/Components/Touchable/Touchable.js

@@ -360,10 +360,10 @@ var TouchableMixin = {
   /**
    * Place as callback for a DOM element's `onResponderGrant` event.
    * @param {SyntheticEvent} e Synthetic event from event system.
-   * @param {string} dispatchID ID of node that e was dispatched to.
    *
    */
-  touchableHandleResponderGrant: function(e, dispatchID) {
+  touchableHandleResponderGrant: function(e) {
+    var dispatchID = e.currentTarget;
     // Since e is used in a callback invoked on another event loop
     // (as in setTimeout etc), we need to call e.persist() on the
     // event to make sure it doesn't get reused in the event object pool.

Libraries/DebugComponentHierarchy/RCTDebugComponentOwnership.js

@@ -16,28 +16,8 @@
 'use strict';
 
 var BatchedBridge = require('BatchedBridge');
-var DebugComponentOwnershipModule = require('NativeModules').DebugComponentOwnershipModule;
-var InspectorUtils = require('InspectorUtils');
-var ReactNativeTagHandles = require('ReactNativeTagHandles');
-
-function componentToString(component) {
-  return component.getName ? component.getName() : 'Unknown';
-}
-
-function getRootTagForTag(tag: number): ?number {
-  var rootNodeID = ReactNativeTagHandles.tagToRootNodeID[tag];
-  if (!rootNodeID) {
-    return null;
-  }
-  var rootID = ReactNativeTagHandles.getNativeTopRootIDFromNodeID(rootNodeID);
-  if (!rootID) {
-    return null;
-  }
-  return ReactNativeTagHandles.rootNodeIDToTag[rootID];
-}
 
 var RCTDebugComponentOwnership = {
-
   /**
    * Asynchronously returns the owner hierarchy as an array of strings. Request id is
    * passed along to the native module so that the native module can identify the
@@ -46,12 +26,10 @@ var RCTDebugComponentOwnership = {
    * Example returned owner hierarchy: ['RootView', 'Dialog', 'TitleView', 'Text']
    */
   getOwnerHierarchy: function(requestID: number, tag: number) {
-    var rootTag = getRootTagForTag(tag);
-    var instance = InspectorUtils.findInstanceByNativeTag(rootTag, tag);
-    var ownerHierarchy = instance ?
-        InspectorUtils.getOwnerHierarchy(instance).map(componentToString) :
-        null;
-    DebugComponentOwnershipModule.receiveOwnershipHierarchy(requestID, tag, ownerHierarchy);
+    // Consider cleaning up these unused modules in a separate diff.
+    throw new Error(
+      'This seems to be unused. Will disable until it is needed again.'
+    );
   },
 };
 

Libraries/Devtools/setupDevtools.js

@@ -64,12 +64,27 @@ function setupDevtools() {
       console.error('Failed to eval: ' + e.message);
       return;
     }
+    // This is breaking encapsulation of the React package. Move plz.
+    var ReactNativeComponentTree = require('ReactNativeComponentTree');
     window.__REACT_DEVTOOLS_GLOBAL_HOOK__.inject({
-      CurrentOwner: require('ReactCurrentOwner'),
-      InstanceHandles: require('ReactInstanceHandles'),
+      ComponentTree: {
+        getClosestInstanceFromNode: function (node) {
+          return ReactNativeComponentTree.getClosestInstanceFromNode(node);
+        },
+        getNodeFromInstance: function (inst) {
+          // inst is an internal instance (but could be a composite)
+          while (inst._renderedComponent) {
+            inst = inst._renderedComponent;
+          }
+          if (inst) {
+            return ReactNativeComponentTree.getNodeFromInstance(inst);
+          } else {
+            return null;
+          }
+        }
+      },
       Mount: require('ReactNativeMount'),
-      Reconciler: require('ReactReconciler'),
-      TextComponent: require('ReactNativeTextComponent'),
+      Reconciler: require('ReactReconciler')
     });
     ws.onmessage = handleMessage;
   }

Libraries/Inspector/Inspector.js

@@ -9,14 +9,16 @@
  * @providesModule Inspector
  * @flow
  */
+
+/* eslint-disable dot-notation, no-dimensions-get-window */
+
 'use strict';
 
 var Dimensions = require('Dimensions');
 var InspectorOverlay = require('InspectorOverlay');
 var InspectorPanel = require('InspectorPanel');
 var InspectorUtils = require('InspectorUtils');
 var React = require('React');
-var ReactNative = require('ReactNative');
 var StyleSheet = require('StyleSheet');
 var Touchable = require('Touchable');
 var UIManager = require('NativeModules').UIManager;
@@ -28,24 +30,43 @@ if (window.__REACT_DEVTOOLS_GLOBAL_HOOK__) {
 }
 
 class Inspector extends React.Component {
+  props: {
+    inspectedViewTag: ?number,
+    rootTag: ?number,
+    onRequestRerenderApp: (callback: (tag: ?number) => void) => void
+  };
+
+  state: {
+    devtoolsAgent: ?Object,
+    hierarchy: any,
+    panelPos: string,
+    inspecting: bool,
+    selection: ?number,
+    perfing: bool,
+    inspected: any,
+    inspectedViewTag: any,
+  };
+
   _subs: ?Array<() => void>;
 
   constructor(props: Object) {
     super(props);
 
     this.state = {
       devtoolsAgent: null,
+      hierarchy: null,
       panelPos: 'bottom',
       inspecting: true,
       perfing: false,
       inspected: null,
+      selection: null,
       inspectedViewTag: this.props.inspectedViewTag,
     };
   }
 
   componentDidMount() {
     if (window.__REACT_DEVTOOLS_GLOBAL_HOOK__) {
-      this.attachToDevtools = this.attachToDevtools.bind(this);
+      (this : any).attachToDevtools = this.attachToDevtools.bind(this);
       window.__REACT_DEVTOOLS_GLOBAL_HOOK__.on('react-devtools', this.attachToDevtools);
       // if devtools is already started
       if (window.__REACT_DEVTOOLS_GLOBAL_HOOK__.reactDevtoolsAgent) {
@@ -107,8 +128,8 @@ class Inspector extends React.Component {
     var instance = this.state.hierarchy[i];
     // if we inspect a stateless component we can't use the getPublicInstance method
     // therefore we use the internal _instance property directly.
-    var publicInstance = instance._instance || {};
-    UIManager.measure(ReactNative.findNodeHandle(instance), (x, y, width, height, left, top) => {
+    var publicInstance = instance['_instance'] || {};
+    UIManager.measure(instance.getNativeNode(), (x, y, width, height, left, top) => {
       this.setState({
         inspected: {
           frame: {left, top, width, height},

Libraries/Inspector/InspectorUtils.js

@@ -10,10 +10,7 @@
  */
 'use strict';
 
-var ReactInstanceHandles = require('ReactInstanceHandles');
-var ReactInstanceMap = require('ReactInstanceMap');
-var ReactNativeMount = require('ReactNativeMount');
-var ReactNativeTagHandles = require('ReactNativeTagHandles');
+var ReactNativeComponentTree = require('ReactNativeComponentTree');
 
 function traverseOwnerTreeUp(hierarchy, instance) {
   if (instance) {
@@ -22,38 +19,8 @@ function traverseOwnerTreeUp(hierarchy, instance) {
   }
 }
 
-function findInstance(component, targetID) {
-  if (targetID === findRootNodeID(component)) {
-    return component;
-  }
-  if (component._renderedComponent) {
-    return findInstance(component._renderedComponent, targetID);
-  } else {
-    for (var key in component._renderedChildren) {
-      var child = component._renderedChildren[key];
-      if (ReactInstanceHandles.isAncestorIDOf(findRootNodeID(child), targetID)) {
-        var instance = findInstance(child, targetID);
-        if (instance) {
-          return instance;
-        }
-      }
-    }
-  }
-}
-
-function findRootNodeID(component) {
-  var internalInstance = ReactInstanceMap.get(component);
-  return internalInstance ? internalInstance._rootNodeID : component._rootNodeID;
-}
-
 function findInstanceByNativeTag(rootTag, nativeTag) {
-  var containerID = ReactNativeTagHandles.tagToRootNodeID[rootTag];
-  var rootInstance = ReactNativeMount._instancesByContainerID[containerID];
-  var targetID = ReactNativeTagHandles.tagToRootNodeID[nativeTag];
-  if (!targetID) {
-    return undefined;
-  }
-  return findInstance(rootInstance, targetID);
+  return ReactNativeComponentTree.getInstanceFromNode(nativeTag);
 }
 
 function getOwnerHierarchy(instance) {

Libraries/RKBackendNode/queryLayoutByID.js

@@ -11,7 +11,6 @@
  */
 'use strict';
 
-var ReactNativeTagHandles = require('ReactNativeTagHandles');
 var UIManager = require('UIManager');
 
 type OnSuccessCallback = (
@@ -41,18 +40,21 @@ type OnErrorCallback = (error: any) => void
  *
  * This is an IOS specific implementation.
  *
- * @param {string} rootNodeID ID of the platform specific node to be measured.
+ * @param {number} tag ID of the platform specific node to be measured.
  * @param {function} onError `func(error)`
  * @param {function} onSuccess `func(left, top, width, height, pageX, pageY)`
  */
 var queryLayoutByID = function(
-  rootNodeID: string,
+  tag: ?number,
   onError: OnErrorCallback,
   onSuccess: OnSuccessCallback
 ): void {
+  if (tag == null) {
+    return;
+  }
   // Native bridge doesn't *yet* surface errors.
   UIManager.measure(
-    ReactNativeTagHandles.rootNodeIDToTag[rootNodeID],
+    tag,
     onSuccess
   );
 };