<\/article>;\n var tree = {\n- isComposite: false,\n displayName: 'article',\n children: [{\n- isComposite: true,\n displayName: 'Foo',\n children: [{\n- isComposite: true,\n displayName: 'Bar',\n ownerDisplayName: 'Foo',\n children: [{\n- isComposite: false,\n displayName: 'div',\n ownerDisplayName: 'Bar',\n children: [{\n- isComposite: false,\n displayName: 'h1',\n ownerDisplayName: 'Foo',\n children: [{\n- isComposite: false,\n displayName: '#text',\n text: 'Hi.',\n }],\n }, {\n- isComposite: false,\n displayName: '#text',\n text: ' Mom',\n }],\n@@ -1840,7 +1637,7 @@ describe('ReactComponentTreeDevtool', () => {\n assertTreeMatches([element, tree], {includeOwnerDisplayName: true});\n });\n \n- it.only('preserves unmounted components until purge', () => {\n+ it('preserves unmounted components until purge', () => {\n var node = document.createElement('div');\n var renderBar = true;\n var fooInstance;\n@@ -1864,10 +1661,9 @@ describe('ReactComponentTreeDevtool', () => {\n expect(\n getTree(barInstance._debugID, {\n includeParentDisplayName: true,\n- expectedParentID: fooInstance._debugID\n+ expectedParentID: fooInstance._debugID,\n })\n ).toEqual({\n- isComposite: true,\n displayName: 'Bar',\n parentDisplayName: 'Foo',\n children: [],\n@@ -1878,10 +1674,9 @@ describe('ReactComponentTreeDevtool', () => {\n expect(\n getTree(barInstance._debugID, {\n includeParentDisplayName: true,\n- expectedParentID: fooInstance._debugID\n+ expectedParentID: fooInstance._debugID,\n })\n ).toEqual({\n- isComposite: true,\n displayName: 'Bar',\n parentDisplayName: 'Foo',\n children: [],\n@@ -1894,7 +1689,6 @@ describe('ReactComponentTreeDevtool', () => {\n expectedParentID: fooInstance._debugID,\n })\n ).toEqual({\n- isComposite: true,\n displayName: 'Bar',\n parentDisplayName: 'Foo',\n children: [],\n@@ -1904,21 +1698,28 @@ describe('ReactComponentTreeDevtool', () => {\n expect(\n getTree(barInstance._debugID, {includeParentDisplayName: true})\n ).toEqual({\n- isComposite: false,\n displayName: 'Unknown',\n children: [],\n });\n });\n \n- it('ignores top-level wrapper', () => {\n+ it('does not report top-level wrapper as a root', () => {\n var node = document.createElement('div');\n+\n ReactDOM.render(

, node);\n- expect(getRegisteredDisplayNames()).toEqual(['div']);\n+ expect(getRootDisplayNames()).toEqual(['div']);\n+\n ReactDOM.render(

, node);\n- expect(getRegisteredDisplayNames()).toEqual(['div']);\n+ expect(getRootDisplayNames()).toEqual(['div']);\n+\n ReactDOM.unmountComponentAtNode(node);\n- expect(getRegisteredDisplayNames()).toEqual(['div']);\n+ expect(getRootDisplayNames()).toEqual([]);\n+\n ReactComponentTreeDevtool.purgeUnmountedComponents();\n+ expect(getRootDisplayNames()).toEqual([]);\n+\n+ \/\/ This currently contains TopLevelWrapper until purge\n+ \/\/ so we only check it at the very end.\n expect(getRegisteredDisplayNames()).toEqual([]);\n });\n });\ndiff --git a\/src\/renderers\/dom\/client\/ReactMount.js b\/src\/renderers\/dom\/client\/ReactMount.js\nindex 87c9e1489a..1984e146f3 100644\n--- a\/src\/renderers\/dom\/client\/ReactMount.js\n+++ b\/src\/renderers\/dom\/client\/ReactMount.js\n@@ -332,11 +332,11 @@ var ReactMount = {\n \n ReactBrowserEventEmitter.ensureScrollValueMonitoring();\n var componentInstance = instantiateReactComponent(nextElement);\n+\n if (__DEV__) {\n- ReactInstrumentation.debugTool.onSetIsTopLevelWrapper(\n- componentInstance._debugID,\n- true\n- );\n+ \/\/ Mute future events from the top level wrapper.\n+ \/\/ It is an implementation detail that devtools should not know about.\n+ componentInstance._debugID = 0;\n }\n \n \/\/ The initial render is synchronous but any updates that happen during\n@@ -355,7 +355,10 @@ var ReactMount = {\n instancesByReactRootID[wrapperID] = componentInstance;\n \n if (__DEV__) {\n- ReactInstrumentation.debugTool.onMountRootComponent(componentInstance._debugID);\n+ \/\/ The instance here is TopLevelWrapper so we report mount for its child.\n+ ReactInstrumentation.debugTool.onMountRootComponent(\n+ componentInstance._renderedComponent._debugID\n+ );\n }\n \n return componentInstance;\n@@ -582,11 +585,6 @@ var ReactMount = {\n container,\n false\n );\n- if (__DEV__) {\n- ReactInstrumentation.debugTool.onUnmountNativeContainer(\n- prevComponent._nativeContainerInfo._debugID\n- );\n- }\n return true;\n },\n \ndiff --git a\/src\/renderers\/dom\/server\/ReactServerRendering.js b\/src\/renderers\/dom\/server\/ReactServerRendering.js\nindex 8b6e0cb74d..2d30f1a18d 100644\n--- a\/src\/renderers\/dom\/server\/ReactServerRendering.js\n+++ b\/src\/renderers\/dom\/server\/ReactServerRendering.js\n@@ -38,17 +38,16 @@ function renderToStringImpl(element, makeStaticMarkup) {\n \n return transaction.perform(function() {\n var componentInstance = instantiateReactComponent(element);\n- var nativeContainerInfo = ReactDOMContainerInfo();\n var markup = ReactReconciler.mountComponent(\n componentInstance,\n transaction,\n null,\n- nativeContainerInfo,\n+ ReactDOMContainerInfo(),\n emptyObject\n );\n if (__DEV__) {\n- ReactInstrumentation.debugTool.onUnmountNativeContainer(\n- nativeContainerInfo._debugID\n+ ReactInstrumentation.debugTool.onUnmountComponent(\n+ componentInstance._debugID\n );\n }\n if (!makeStaticMarkup) {\ndiff --git a\/src\/renderers\/dom\/shared\/ReactDOMComponent.js b\/src\/renderers\/dom\/shared\/ReactDOMComponent.js\nindex 78fc7c9ea6..6545f12d83 100644\n--- a\/src\/renderers\/dom\/shared\/ReactDOMComponent.js\n+++ b\/src\/renderers\/dom\/shared\/ReactDOMComponent.js\n@@ -36,6 +36,7 @@ var ReactInstrumentation = require('ReactInstrumentation');\n var ReactMultiChild = require('ReactMultiChild');\n var ReactPerf = require('ReactPerf');\n \n+var emptyFunction = require('emptyFunction');\n var escapeTextContentForBrowser = require('escapeTextContentForBrowser');\n var invariant = require('invariant');\n var isEventSupported = require('isEventSupported');\n@@ -246,6 +247,20 @@ function optionPostMount() {\n ReactDOMOption.postMountWrapper(inst);\n }\n \n+var setContentChildForInstrumentation = emptyFunction;\n+if (__DEV__) {\n+ setContentChildForInstrumentation = function(contentToUse) {\n+ var debugID = this._debugID;\n+ var contentDebugID = debugID + '#text';\n+ this._contentDebugID = contentDebugID;\n+ ReactInstrumentation.debugTool.onSetIsEmpty(contentDebugID, false);\n+ ReactInstrumentation.debugTool.onSetDisplayName(contentDebugID, '#text');\n+ ReactInstrumentation.debugTool.onSetText(contentDebugID, '' + contentToUse);\n+ ReactInstrumentation.debugTool.onMountComponent(contentDebugID);\n+ ReactInstrumentation.debugTool.onSetChildren(debugID, [contentDebugID]);\n+ };\n+}\n+\n \/\/ There are so many media events, it makes sense to just\n \/\/ maintain a list rather than create a `trapBubbledEvent` for each\n var mediaEvents = {\n@@ -720,11 +735,7 @@ ReactDOMComponent.Mixin = {\n \/\/ TODO: Validate that text is allowed as a child of this node\n ret = escapeTextContentForBrowser(contentToUse);\n if (__DEV__) {\n- this._contentDebugID = this._debugID + '#text';\n- ReactInstrumentation.debugTool.onSetIsComposite(this._contentDebugID, false);\n- ReactInstrumentation.debugTool.onSetDisplayName(this._contentDebugID, '#text');\n- ReactInstrumentation.debugTool.onSetText(this._contentDebugID, '' + contentToUse);\n- ReactInstrumentation.debugTool.onSetChildren(this._debugID, [this._contentDebugID]);\n+ setContentChildForInstrumentation.call(this, contentToUse);\n }\n } else if (childrenToUse != null) {\n var mountImages = this.mountChildren(\n@@ -766,11 +777,7 @@ ReactDOMComponent.Mixin = {\n if (contentToUse != null) {\n \/\/ TODO: Validate that text is allowed as a child of this node\n if (__DEV__) {\n- this._contentDebugID = this._debugID + '#text';\n- ReactInstrumentation.debugTool.onSetIsComposite(this._contentDebugID, false);\n- ReactInstrumentation.debugTool.onSetDisplayName(this._contentDebugID, '#text');\n- ReactInstrumentation.debugTool.onSetText(this._contentDebugID, '' + contentToUse);\n- ReactInstrumentation.debugTool.onSetChildren(this._debugID, [this._contentDebugID]);\n+ setContentChildForInstrumentation.call(this, contentToUse);\n }\n DOMLazyTree.queueText(lazyTree, contentToUse);\n } else if (childrenToUse != null) {\n@@ -1029,10 +1036,7 @@ ReactDOMComponent.Mixin = {\n this.updateTextContent('' + nextContent);\n if (__DEV__) {\n this._contentDebugID = this._debugID + '#text';\n- ReactInstrumentation.debugTool.onSetIsComposite(this._contentDebugID, false);\n- ReactInstrumentation.debugTool.onSetDisplayName(this._contentDebugID, '#text');\n- ReactInstrumentation.debugTool.onSetText(this._contentDebugID, '' + nextContent);\n- ReactInstrumentation.debugTool.onSetChildren(this._debugID, [this._contentDebugID]);\n+ setContentChildForInstrumentation.call(this, nextContent);\n }\n }\n } else if (nextHtml != null) {\ndiff --git a\/src\/renderers\/dom\/shared\/ReactDOMContainerInfo.js b\/src\/renderers\/dom\/shared\/ReactDOMContainerInfo.js\nindex 09a54e5896..0f74f733a7 100644\n--- a\/src\/renderers\/dom\/shared\/ReactDOMContainerInfo.js\n+++ b\/src\/renderers\/dom\/shared\/ReactDOMContainerInfo.js\n@@ -14,7 +14,6 @@\n var validateDOMNesting = require('validateDOMNesting');\n \n var DOC_NODE_TYPE = 9;\n-var nextContainerDebugID = 1;\n \n function ReactDOMContainerInfo(topLevelWrapper, node) {\n var info = {\n@@ -28,7 +27,6 @@ function ReactDOMContainerInfo(topLevelWrapper, node) {\n _namespaceURI: node ? node.namespaceURI : null,\n };\n if (__DEV__) {\n- info._debugID = nextContainerDebugID++;\n info._ancestorInfo = node ?\n validateDOMNesting.updatedAncestorInfo(null, info._tag, null) : null;\n }\ndiff --git a\/src\/renderers\/shared\/reconciler\/ReactCompositeComponent.js b\/src\/renderers\/shared\/reconciler\/ReactCompositeComponent.js\nindex 103e21d89e..411eca4827 100644\n--- a\/src\/renderers\/shared\/reconciler\/ReactCompositeComponent.js\n+++ b\/src\/renderers\/shared\/reconciler\/ReactCompositeComponent.js\n@@ -377,14 +377,6 @@ var ReactCompositeComponentMixin = {\n this._renderedComponent = this._instantiateReactComponent(\n renderedElement\n );\n- if (__DEV__) {\n- ReactInstrumentation.debugTool.onSetChildren(\n- this._debugID,\n- this._renderedNodeType === ReactNodeTypes.EMPTY ?\n- [] :\n- [this._renderedComponent._debugID]\n- );\n- }\n \n var markup = ReactReconciler.mountComponent(\n this._renderedComponent,\n@@ -394,6 +386,13 @@ var ReactCompositeComponentMixin = {\n this._processChildContext(context)\n );\n \n+ if (__DEV__) {\n+ ReactInstrumentation.debugTool.onSetChildren(\n+ this._debugID,\n+ [this._renderedComponent._debugID]\n+ );\n+ }\n+\n return markup;\n },\n \n@@ -861,14 +860,6 @@ var ReactCompositeComponentMixin = {\n this._renderedComponent = this._instantiateReactComponent(\n nextRenderedElement\n );\n- if (__DEV__) {\n- ReactInstrumentation.debugTool.onSetChildren(\n- this._debugID,\n- this._renderedNodeType === ReactNodeTypes.EMPTY ?\n- [] :\n- [this._renderedComponent._debugID]\n- );\n- }\n \n var nextMarkup = ReactReconciler.mountComponent(\n this._renderedComponent,\n@@ -877,6 +868,14 @@ var ReactCompositeComponentMixin = {\n this._nativeContainerInfo,\n this._processChildContext(context)\n );\n+\n+ if (__DEV__) {\n+ ReactInstrumentation.debugTool.onSetChildren(\n+ this._debugID,\n+ [this._renderedComponent._debugID]\n+ );\n+ }\n+\n this._replaceNodeWithMarkup(oldNativeNode, nextMarkup);\n }\n },\ndiff --git a\/src\/renderers\/shared\/reconciler\/ReactMultiChild.js b\/src\/renderers\/shared\/reconciler\/ReactMultiChild.js\nindex 2a7ccb70e3..474ddc63dc 100644\n--- a\/src\/renderers\/shared\/reconciler\/ReactMultiChild.js\n+++ b\/src\/renderers\/shared\/reconciler\/ReactMultiChild.js\n@@ -19,6 +19,7 @@ var ReactCurrentOwner = require('ReactCurrentOwner');\n var ReactReconciler = require('ReactReconciler');\n var ReactChildReconciler = require('ReactChildReconciler');\n \n+var emptyFunction = require('emptyFunction');\n var flattenChildren = require('flattenChildren');\n var invariant = require('invariant');\n \n@@ -138,6 +139,16 @@ function processQueue(inst, updateQueue) {\n );\n }\n \n+var setChildrenForInstrumentation = emptyFunction;\n+if (__DEV__) {\n+ setChildrenForInstrumentation = function(children) {\n+ ReactInstrumentation.debugTool.onSetChildren(\n+ this._debugID,\n+ children ? Object.keys(children).map(key => children[key]._debugID) : []\n+ );\n+ };\n+}\n+\n \/**\n * ReactMultiChild are capable of reconciling multiple children.\n *\n@@ -234,12 +245,7 @@ var ReactMultiChild = {\n }\n \n if (__DEV__) {\n- ReactInstrumentation.debugTool.onSetChildren(\n- this._debugID,\n- children ?\n- Object.keys(children).map(key => children[key]._debugID) :\n- []\n- );\n+ setChildrenForInstrumentation.call(this, children);\n }\n \n return mountImages;\n@@ -371,12 +377,7 @@ var ReactMultiChild = {\n this._renderedChildren = nextChildren;\n \n if (__DEV__) {\n- ReactInstrumentation.debugTool.onSetChildren(\n- this._debugID,\n- nextChildren ?\n- Object.keys(nextChildren).map(key => nextChildren[key]._debugID) :\n- []\n- );\n+ setChildrenForInstrumentation.call(this, nextChildren);\n }\n },\n \ndiff --git a\/src\/renderers\/shared\/reconciler\/ReactReconciler.js b\/src\/renderers\/shared\/reconciler\/ReactReconciler.js\nindex 542bd9524f..f6741a84ed 100644\n--- a\/src\/renderers\/shared\/reconciler\/ReactReconciler.js\n+++ b\/src\/renderers\/shared\/reconciler\/ReactReconciler.js\n@@ -53,10 +53,7 @@ var ReactReconciler = {\n transaction.getReactMountReady().enqueue(attachRefs, internalInstance);\n }\n if (__DEV__) {\n- ReactInstrumentation.debugTool.onMountComponent(\n- internalInstance._debugID,\n- nativeContainerInfo._debugID\n- );\n+ ReactInstrumentation.debugTool.onMountComponent(internalInstance._debugID);\n }\n return markup;\n },\ndiff --git a\/src\/renderers\/shared\/reconciler\/instantiateReactComponent.js b\/src\/renderers\/shared\/reconciler\/instantiateReactComponent.js\nindex 0e228725e1..0943964ed3 100644\n--- a\/src\/renderers\/shared\/reconciler\/instantiateReactComponent.js\n+++ b\/src\/renderers\/shared\/reconciler\/instantiateReactComponent.js\n@@ -86,8 +86,10 @@ function instantiateReactComponent(node) {\n \n var isNative = false;\n var isComposite = false;\n+ var isEmpty = false;\n \n if (node === null || node === false) {\n+ isEmpty = true;\n instance = ReactEmptyComponent.create(instantiateReactComponent);\n } else if (typeof node === 'object') {\n var element = node;\n@@ -146,16 +148,18 @@ function instantiateReactComponent(node) {\n }\n \n if (__DEV__) {\n- instance._debugID = nextDebugID++;\n+ var debugID = nextDebugID++;\n+ instance._debugID = debugID;\n+\n var displayName = getDisplayName(instance);\n- ReactInstrumentation.debugTool.onSetIsComposite(instance._debugID, isComposite);\n- ReactInstrumentation.debugTool.onSetDisplayName(instance._debugID, displayName);\n+ ReactInstrumentation.debugTool.onSetDisplayName(debugID, displayName);\n+ ReactInstrumentation.debugTool.onSetIsEmpty(debugID, isEmpty);\n if (isNative || isComposite) {\n- ReactInstrumentation.debugTool.onSetChildren(instance._debugID, []);\n+ ReactInstrumentation.debugTool.onSetChildren(debugID, []);\n }\n var owner = node && node._owner;\n if (owner) {\n- ReactInstrumentation.debugTool.onSetOwner(instance._debugID, owner._debugID);\n+ ReactInstrumentation.debugTool.onSetOwner(debugID, owner._debugID);\n }\n }\n \ndiff --git a\/src\/test\/ReactTestUtils.js b\/src\/test\/ReactTestUtils.js\nindex 5686744db3..20f2cb5adb 100644\n--- a\/src\/test\/ReactTestUtils.js\n+++ b\/src\/test\/ReactTestUtils.js\n@@ -466,7 +466,7 @@ ReactShallowRenderer.prototype._render = function(element, transaction, context)\n this._instance.receiveComponent(element, transaction, context);\n } else {\n var instance = new ShallowComponentWrapper(element);\n- instance.mountComponent(transaction, null, {}, context);\n+ instance.mountComponent(transaction, null, null, context);\n this._instance = instance;\n }\n };\n"}

dillon1000/react

Files changed