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');