diff --git a/src/isomorphic/devtools/__tests__/ReactComponentTreeDevtool-test.js b/src/isomorphic/devtools/__tests__/ReactComponentTreeDevtool-test.js index ef5516238a..e0a7692e41 100644 --- a/src/isomorphic/devtools/__tests__/ReactComponentTreeDevtool-test.js +++ b/src/isomorphic/devtools/__tests__/ReactComponentTreeDevtool-test.js @@ -268,7 +268,6 @@ describe('ReactComponentTreeDevtool', () => { displayName: 'p', children: [{ displayName: 'span', - element: Hi!, children: [{ displayName: '#text', text: 'Hi!', @@ -353,12 +352,10 @@ describe('ReactComponentTreeDevtool', () => { }], }, { displayName: 'Bar', - element: Hi,Mom, children: [{ displayName: 'h1', children: [{ displayName: 'span', - element: Hi,, children: [{ displayName: '#text', element: 'Hi,', @@ -372,7 +369,6 @@ describe('ReactComponentTreeDevtool', () => { }], }, { displayName: 'a', - element: Click me., children: [{ displayName: '#text', text: 'Click me.', diff --git a/src/isomorphic/devtools/__tests__/ReactComponentTreeDevtool-test.native.js b/src/isomorphic/devtools/__tests__/ReactComponentTreeDevtool-test.native.js index 746f7a82be..4ba5cdc9d9 100644 --- a/src/isomorphic/devtools/__tests__/ReactComponentTreeDevtool-test.native.js +++ b/src/isomorphic/devtools/__tests__/ReactComponentTreeDevtool-test.native.js @@ -277,10 +277,8 @@ describe('ReactComponentTreeDevtool', () => { element, children: [{ displayName: 'View', - element: Hi!, children: [{ displayName: 'Text', - element: Hi!, children: [{ displayName: 'RCText', children: [{ @@ -369,7 +367,6 @@ describe('ReactComponentTreeDevtool', () => { displayName: 'View', children: [{ displayName: 'Text', - element: Hi,, children: [{ displayName: 'RCText', children: [{ diff --git a/src/renderers/dom/shared/ReactDOMComponent.js b/src/renderers/dom/shared/ReactDOMComponent.js index 61dc9f87ad..0a8b106837 100644 --- a/src/renderers/dom/shared/ReactDOMComponent.js +++ b/src/renderers/dom/shared/ReactDOMComponent.js @@ -248,16 +248,34 @@ function optionPostMount() { var setContentChildForInstrumentation = emptyFunction; if (__DEV__) { - setContentChildForInstrumentation = function(contentToUse) { + setContentChildForInstrumentation = function(content) { + var hasExistingContent = this._contentDebugID != null; var debugID = this._debugID; var contentDebugID = debugID + '#text'; + + if (content == null) { + if (hasExistingContent) { + ReactInstrumentation.debugTool.onUnmountComponent(this._contentDebugID); + } + this._contentDebugID = null; + return; + } + this._contentDebugID = contentDebugID; + var text = '' + content; + ReactInstrumentation.debugTool.onSetDisplayName(contentDebugID, '#text'); ReactInstrumentation.debugTool.onSetParent(contentDebugID, debugID); - ReactInstrumentation.debugTool.onBeforeMountComponent(contentDebugID); - ReactInstrumentation.debugTool.onSetText(contentDebugID, '' + contentToUse); - ReactInstrumentation.debugTool.onMountComponent(contentDebugID); - ReactInstrumentation.debugTool.onSetChildren(debugID, [contentDebugID]); + ReactInstrumentation.debugTool.onSetText(contentDebugID, text); + + if (hasExistingContent) { + ReactInstrumentation.debugTool.onBeforeUpdateComponent(contentDebugID, content); + ReactInstrumentation.debugTool.onUpdateComponent(contentDebugID); + } else { + ReactInstrumentation.debugTool.onBeforeMountComponent(contentDebugID, content); + ReactInstrumentation.debugTool.onMountComponent(contentDebugID); + ReactInstrumentation.debugTool.onSetChildren(debugID, [contentDebugID]); + } }; } @@ -468,7 +486,7 @@ function ReactDOMComponent(element) { this._flags = 0; if (__DEV__) { this._ancestorInfo = null; - this._contentDebugID = null; + setContentChildForInstrumentation.call(this, null); } } @@ -1042,7 +1060,6 @@ ReactDOMComponent.Mixin = { if (lastContent !== nextContent) { this.updateTextContent('' + nextContent); if (__DEV__) { - this._contentDebugID = this._debugID + '#text'; setContentChildForInstrumentation.call(this, nextContent); } } @@ -1055,10 +1072,7 @@ ReactDOMComponent.Mixin = { } } else if (nextChildren != null) { if (__DEV__) { - if (this._contentDebugID) { - ReactInstrumentation.debugTool.onUnmountComponent(this._contentDebugID); - this._contentDebugID = null; - } + setContentChildForInstrumentation.call(this, null); } this.updateChildren(nextChildren, transaction, context); @@ -1124,10 +1138,7 @@ ReactDOMComponent.Mixin = { this._wrapperState = null; if (__DEV__) { - if (this._contentDebugID) { - ReactInstrumentation.debugTool.onUnmountComponent(this._contentDebugID); - this._contentDebugID = null; - } + setContentChildForInstrumentation.call(this, null); } }, diff --git a/src/renderers/shared/stack/reconciler/ReactReconciler.js b/src/renderers/shared/stack/reconciler/ReactReconciler.js index 149bbedd80..f9e6473b7a 100644 --- a/src/renderers/shared/stack/reconciler/ReactReconciler.js +++ b/src/renderers/shared/stack/reconciler/ReactReconciler.js @@ -46,14 +46,14 @@ var ReactReconciler = { ) { if (__DEV__) { if (internalInstance._debugID !== 0) { - ReactInstrumentation.debugTool.onBeginReconcilerTimer( - internalInstance._debugID, - 'mountComponent' - ); ReactInstrumentation.debugTool.onBeforeMountComponent( internalInstance._debugID, internalInstance._currentElement ); + ReactInstrumentation.debugTool.onBeginReconcilerTimer( + internalInstance._debugID, + 'mountComponent' + ); } } var markup = internalInstance.mountComponent( @@ -150,14 +150,14 @@ var ReactReconciler = { if (__DEV__) { if (internalInstance._debugID !== 0) { + ReactInstrumentation.debugTool.onBeforeUpdateComponent( + internalInstance._debugID, + nextElement + ); ReactInstrumentation.debugTool.onBeginReconcilerTimer( internalInstance._debugID, 'receiveComponent' ); - ReactInstrumentation.debugTool.onBeforeUpdateComponent( - internalInstance._debugID, - internalInstance._currentElement - ); } } diff --git a/src/test/ReactComponentTreeTestUtils.js b/src/test/ReactComponentTreeTestUtils.js index 91da5e4a71..1f5967d3dd 100644 --- a/src/test/ReactComponentTreeTestUtils.js +++ b/src/test/ReactComponentTreeTestUtils.js @@ -11,7 +11,6 @@ 'use strict'; -var ReactChildren = require('ReactChildren'); var ReactComponentTreeDevtool = require('ReactComponentTreeDevtool'); function getRootDisplayNames() { @@ -24,17 +23,6 @@ function getRegisteredDisplayNames() { .map(ReactComponentTreeDevtool.getDisplayName); } -function stripElement(element) { - if (!element || !element.props) { - return element; - } - return { - props: element.props, - type: element.type, - children: ReactChildren.map(element.children, stripElement), - }; -} - function expectTree(rootID, expectedTree, parentPath) { var displayName = ReactComponentTreeDevtool.getDisplayName(rootID); var ownerID = ReactComponentTreeDevtool.getOwnerID(rootID); @@ -80,10 +68,12 @@ function expectTree(rootID, expectedTree, parentPath) { expectEqual(text, null, 'text'); } if (expectedTree.element !== undefined) { + // TODO: Comparing elements makes tests run out of memory on errors. + // For now, compare just types. expectEqual( - stripElement(element), - stripElement(expectedTree.element), - 'element' + element && element.type, + expectedTree.element && expectedTree.element.type, + 'element.type' ); } else if (text == null) { expectEqual(typeof element, 'object', 'typeof element');