Add ReactDebugIntrospection

src/isomorphic/ReactDebugInstanceMap.js

@@ -86,15 +86,18 @@ var ReactDebugInstanceMap = {
     }
     return getIDForInstance(internalInstance);
   },
+
   getInstanceByID(instanceID) {
     return getInstanceByID(instanceID);
   },
+
   isRegisteredInstance(internalInstance) {
     if (!checkValidInstance(internalInstance)) {
       return false;
     }
     return isRegisteredInstance(internalInstance);
   },
+
   registerInstance(internalInstance) {
     if (!checkValidInstance(internalInstance)) {
       return;
@@ -107,6 +110,7 @@ var ReactDebugInstanceMap = {
     );
     registerInstance(internalInstance);
   },
+
   unregisterInstance(internalInstance) {
     if (!checkValidInstance(internalInstance)) {
       return;

src/isomorphic/ReactDebugIntrospection.js

@@ -0,0 +1,166 @@
+/**
+ * Copyright 2016-present, 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 ReactDebugIntrospection
+ */
+
+'use strict';
+
+var ReactDebugInstanceMap = require('ReactDebugInstanceMap');
+
+function getChildren(instance) {
+  if (instance._renderedComponent) {
+    if (instance._renderedComponent._currentElement) {
+      return [instance._renderedComponent];
+    } else {
+      return [];
+    }
+  } else if (instance._renderedChildren) {
+    var children = [];
+    for (var key in instance._renderedChildren) {
+      children.push(instance._renderedChildren[key]);
+    }
+    return children;
+  } else {
+    return [];
+  }
+}
+
+function getDisplayName(instance) {
+  var element = instance._currentElement;
+  if (element == null) {
+    return '#empty';
+  } else if (typeof element === 'string' || typeof element === 'number') {
+    return '#text';
+  } else if (typeof element.type === 'string') {
+    return element.type;
+  } else if (instance.getName) {
+    return instance.getName() || 'Unknown';
+  } else {
+    return element.type.displayName || element.type.name || 'Unknown';
+  }
+}
+
+function getOwner(instance) {
+  var element = instance._currentElement;
+  if (element == null) {
+    return null;
+  }
+  return element._owner;
+}
+
+function isComposite(instance) {
+  var element = instance._currentElement;
+  if (element == null) {
+    return false;
+  }
+  return typeof element.type === 'function';
+}
+
+var INLINED_CHILDREN_TYPES = {'string': true, 'number': true};
+var INLINE_ID_PREFIX = 'text:';
+
+function createInlineTextID(parentInstanceID) {
+  return `${INLINE_ID_PREFIX}${parentInstanceID}`;
+}
+function isInlineTextID(instanceID) {
+  return instanceID.substr(0, INLINE_ID_PREFIX.length) === INLINE_ID_PREFIX;
+}
+function getParentInstanceIDOfInlineTextID(instanceID) {
+  return instanceID.substr(INLINE_ID_PREFIX.length);
+}
+
+function getInlineText(instance) {
+  var element = instance._currentElement;
+  var props = element && element.props;
+  if (props && INLINED_CHILDREN_TYPES[typeof props.children]) {
+    return props.children.toString();
+  }
+}
+
+var ReactDebugIntrospection = {
+  getChildIDs(instanceID) {
+    var instance = ReactDebugInstanceMap.getInstanceByID(instanceID);
+    if (!instance) {
+      return [];
+    }
+
+    var childInstances = getChildren(instance);
+    var childIDs = childInstances.map(ReactDebugInstanceMap.getIDForInstance);
+
+    // DOM components inline a single child.
+    // It doesn't correspond to a real instance but we pretend that it does
+    // because this is an implementation detail of the DOM renderer.
+    if (!childIDs.length && getInlineText(instance)) {
+      var inlineChildID = createInlineTextID(instanceID);
+      childIDs.push(inlineChildID);
+    }
+
+    return childIDs;
+  },
+
+  getDisplayName(instanceID) {
+    var instance = ReactDebugInstanceMap.getInstanceByID(instanceID);
+    if (!instance) {
+      if (isInlineTextID(instanceID)) {
+        return '#text';
+      } else {
+        return 'Unknown';
+      }
+    }
+    return getDisplayName(instance);
+  },
+
+  getText(instanceID) {
+    var instance = ReactDebugInstanceMap.getInstanceByID(instanceID);
+    if (instance) {
+      return instance._stringText;
+    }
+
+    if (isInlineTextID(instanceID)) {
+      var parentInstanceID = getParentInstanceIDOfInlineTextID(instanceID);
+      var parentInstance = ReactDebugInstanceMap.getInstanceByID(
+        parentInstanceID
+      );
+      if (parentInstance) {
+        return getInlineText(parentInstance);
+      }
+    }
+  },
+
+  isComposite(instanceID) {
+    var instance = ReactDebugInstanceMap.getInstanceByID(instanceID);
+    if (!instance) {
+      return false;
+    }
+    return isComposite(instance);
+  },
+
+  // TODO: make the new ReactPerf depend on element source location instead.
+  unstable_getOwnerID(instanceID) {
+    // Note: this method can't determine the owner for text components
+    // because they are not created from real elements.
+    var instance = ReactDebugInstanceMap.getInstanceByID(instanceID);
+    if (!instance) {
+      return null;
+    }
+    var owner = getOwner(instance);
+    if (!owner) {
+      return null;
+    }
+    return ReactDebugInstanceMap.getIDForInstance(owner);
+  },
+
+  // TODO: stop exposing this method when ReactDebugIntrospection provides all
+  // functions that React DevTools need without exposing internal instances.
+  unstable_getInternalInstanceByID(instanceID) {
+    return ReactDebugInstanceMap.getInstanceByID(instanceID);
+  },
+};
+
+module.exports = ReactDebugIntrospection;

src/isomorphic/ReactDebugTool.js

@@ -11,6 +11,7 @@
 
 'use strict';
 
+var ReactDebugInstanceMap = require('ReactDebugInstanceMap');
 var ReactInvalidSetStateWarningDevTool = require('ReactInvalidSetStateWarningDevTool');
 var warning = require('warning');
 
@@ -58,6 +59,10 @@ var ReactDebugTool = {
   onSetState() {
     emitEvent('onSetState');
   },
+  onInstantiateComponent(internalInstance) {
+    ReactDebugInstanceMap.registerInstance(internalInstance);
+    emitEvent('onInstantiateComponent', internalInstance);
+  },
   onMountRootComponent(internalInstance) {
     emitEvent('onMountRootComponent', internalInstance);
   },
@@ -69,6 +74,7 @@ var ReactDebugTool = {
   },
   onUnmountComponent(internalInstance) {
     emitEvent('onUnmountComponent', internalInstance);
+    ReactDebugInstanceMap.unregisterInstance(internalInstance);
   },
 };
 

src/isomorphic/__tests__/ReactDebugInstanceMap-test.js

@@ -15,12 +15,18 @@ describe('ReactDebugInstanceMap', function() {
   var React;
   var ReactDebugInstanceMap;
   var ReactDOM;
+  var ReactDOMComponentTree;
+  var ReactDOMServer;
+  var ReactInstanceMap;
 
   beforeEach(function() {
     jest.resetModuleRegistry();
     React = require('React');
     ReactDebugInstanceMap = require('ReactDebugInstanceMap');
     ReactDOM = require('ReactDOM');
+    ReactDOMComponentTree = require('ReactDOMComponentTree');
+    ReactDOMServer = require('ReactDOMServer');
+    ReactInstanceMap = require('ReactInstanceMap');
   });
 
   function createStubInstance() {
@@ -170,4 +176,115 @@ describe('ReactDebugInstanceMap', function() {
       );
     }
   });
+
+  describe('integration', () => {
+    describe('ReactDOM', () => {
+      it('registers native components', () => {
+        var div = document.createElement('div');
+
+        var spanInst;
+        ReactDOM.render(
+          <span ref={span => {
+            if (span) {
+              spanInst = ReactDOMComponentTree.getInstanceFromNode(span);
+            }
+          }} />,
+          div
+        );
+        expect(ReactDebugInstanceMap.isRegisteredInstance(spanInst)).toBe(true);
+
+        var pInst;
+        ReactDOM.render(
+          <p ref={p => {
+            if (p) {
+              pInst = ReactDOMComponentTree.getInstanceFromNode(p);
+            }
+          }} />,
+          div
+        );
+        expect(ReactDebugInstanceMap.isRegisteredInstance(spanInst)).toBe(false);
+        expect(ReactDebugInstanceMap.isRegisteredInstance(pInst)).toBe(true);
+
+        ReactDOM.unmountComponentAtNode(div);
+        expect(ReactDebugInstanceMap.isRegisteredInstance(spanInst)).toBe(false);
+        expect(ReactDebugInstanceMap.isRegisteredInstance(pInst)).toBe(false);
+      });
+
+      it('registers composite components', () => {
+        var fooInst;
+        var Foo = React.createClass({
+          render() {
+            fooInst = ReactInstanceMap.get(this);
+            return null;
+          },
+        });
+        var barInst;
+        var Bar = React.createClass({
+          render() {
+            barInst = ReactInstanceMap.get(this);
+            return null;
+          },
+        });
+        var div = document.createElement('div');
+
+        ReactDOM.render(<Foo />, div);
+        expect(ReactDebugInstanceMap.isRegisteredInstance(fooInst)).toBe(true);
+
+        ReactDOM.render(<Bar />, div);
+        expect(ReactDebugInstanceMap.isRegisteredInstance(fooInst)).toBe(false);
+        expect(ReactDebugInstanceMap.isRegisteredInstance(barInst)).toBe(true);
+
+        ReactDOM.unmountComponentAtNode(div);
+        expect(ReactDebugInstanceMap.isRegisteredInstance(fooInst)).toBe(false);
+        expect(ReactDebugInstanceMap.isRegisteredInstance(barInst)).toBe(false);
+      });
+    });
+  });
+
+  describe('ReactDOMServer', () => {
+    it('registers components but unregisters them in the end', () => {
+      var fooInst;
+      var Foo = React.createClass({
+        render() {
+          fooInst = ReactInstanceMap.get(this);
+          expect(ReactDebugInstanceMap.isRegisteredInstance(fooInst)).toBe(true);
+          return null;
+        },
+      });
+
+      ReactDOMServer.renderToString(<Foo />);
+      expect(ReactDebugInstanceMap.isRegisteredInstance(fooInst)).toBe(false);
+
+      ReactDOMServer.renderToStaticMarkup(<Foo />);
+      expect(ReactDebugInstanceMap.isRegisteredInstance(fooInst)).toBe(false);
+    });
+
+    it('can be used together with ReactDOM', () => {
+      var fooInst;
+      var Foo = React.createClass({
+        render() {
+          fooInst = ReactInstanceMap.get(this);
+          expect(ReactDebugInstanceMap.isRegisteredInstance(fooInst)).toBe(true);
+          return null;
+        },
+      });
+      var barInst;
+      var Bar = React.createClass({
+        render() {
+          barInst = ReactInstanceMap.get(this);
+          expect(ReactDebugInstanceMap.isRegisteredInstance(barInst)).toBe(true);
+          return <div>{ReactDOMServer.renderToString(<Foo />)}</div>;
+        },
+      });
+
+      var div = document.createElement('div');
+      ReactDOM.render(<Bar />, div);
+      expect(ReactDebugInstanceMap.isRegisteredInstance(fooInst)).toBe(false);
+      expect(ReactDebugInstanceMap.isRegisteredInstance(barInst)).toBe(true);
+
+      ReactDOM.unmountComponentAtNode(div);
+      expect(ReactDebugInstanceMap.isRegisteredInstance(fooInst)).toBe(false);
+      expect(ReactDebugInstanceMap.isRegisteredInstance(barInst)).toBe(false);
+    });
+  });
 });