Skip to content

Commit 5247dc3

Browse files
gaearonzpao
gaearon
authored and
zpao
committed
Merge pull request facebook#6789 from gaearon/tree-devtool-fixes
Make sure element is reported correctly by tree devtool (cherry picked from commit 7f08961)
1 parent b340601 commit 5247dc3

File tree

5 files changed

+85
-24
lines changed

5 files changed

+85
-24
lines changed

‎src/isomorphic/devtools/__tests__/ReactComponentTreeDevtool-test.js‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -160,6 +160,7 @@ describe('ReactComponentTreeDevtool', () => {
160160
var element = <div><Foo /><Baz /><Qux /></div>;
161161
var tree = {
162162
displayName: 'div',
163+
element,
163164
children: [{
164165
displayName: 'Bar',
165166
children: [],
@@ -203,6 +204,7 @@ describe('ReactComponentTreeDevtool', () => {
203204
var element = <div><Foo /><Baz /><Qux /></div>;
204205
var tree = {
205206
displayName: 'div',
207+
element,
206208
children: [{
207209
displayName: 'Bar',
208210
children: [],
@@ -233,6 +235,7 @@ describe('ReactComponentTreeDevtool', () => {
233235
var element = <div><Foo /><Baz /><Qux /></div>;
234236
var tree = {
235237
displayName: 'div',
238+
element,
236239
children: [{
237240
displayName: 'Bar',
238241
children: [],
@@ -275,6 +278,7 @@ describe('ReactComponentTreeDevtool', () => {
275278
}],
276279
}, {
277280
displayName: 'hr',
281+
element: <hr />,
278282
children: [],
279283
}],
280284
};
@@ -291,8 +295,10 @@ describe('ReactComponentTreeDevtool', () => {
291295
var element = <Foo />;
292296
var tree = {
293297
displayName: 'Foo',
298+
element,
294299
children: [{
295300
displayName: 'div',
301+
element: <div />,
296302
children: [],
297303
}],
298304
};
@@ -333,12 +339,15 @@ describe('ReactComponentTreeDevtool', () => {
333339
var element = <Baz />;
334340
var tree = {
335341
displayName: 'Baz',
342+
element,
336343
children: [{
337344
displayName: 'div',
338345
children: [{
339346
displayName: 'Foo',
347+
element: <Foo />,
340348
children: [{
341349
displayName: 'Qux',
350+
element: <Qux />,
342351
children: [],
343352
}],
344353
}, {
@@ -349,18 +358,21 @@ describe('ReactComponentTreeDevtool', () => {
349358
displayName: 'span',
350359
children: [{
351360
displayName: '#text',
361+
element: 'Hi,',
352362
text: 'Hi,',
353363
}],
354364
}, {
355365
displayName: '#text',
356366
text: 'Mom',
367+
element: 'Mom',
357368
}],
358369
}],
359370
}, {
360371
displayName: 'a',
361372
children: [{
362373
displayName: '#text',
363374
text: 'Click me.',
375+
element: 'Click me.',
364376
}],
365377
}],
366378
}],
@@ -400,6 +412,7 @@ describe('ReactComponentTreeDevtool', () => {
400412
var element = <div>{'1'}{2}</div>;
401413
var tree = {
402414
displayName: 'div',
415+
element,
403416
children: [{
404417
displayName: '#text',
405418
text: '1',
@@ -415,6 +428,7 @@ describe('ReactComponentTreeDevtool', () => {
415428
var element = <div>{'1'}</div>;
416429
var tree = {
417430
displayName: 'div',
431+
element,
418432
children: [{
419433
displayName: '#text',
420434
text: '1',
@@ -427,6 +441,7 @@ describe('ReactComponentTreeDevtool', () => {
427441
var element = <div>{42}</div>;
428442
var tree = {
429443
displayName: 'div',
444+
element,
430445
children: [{
431446
displayName: '#text',
432447
text: '42',
@@ -439,6 +454,7 @@ describe('ReactComponentTreeDevtool', () => {
439454
var element = <div>{0}</div>;
440455
var tree = {
441456
displayName: 'div',
457+
element,
442458
children: [{
443459
displayName: '#text',
444460
text: '0',
@@ -462,16 +478,21 @@ describe('ReactComponentTreeDevtool', () => {
462478
);
463479
var tree = {
464480
displayName: 'div',
481+
element,
465482
children: [{
466483
displayName: '#text',
467484
text: 'hi',
485+
element: 'hi',
468486
}, {
469487
displayName: '#text',
470488
text: '42',
489+
element: 42,
471490
}, {
472491
displayName: 'Foo',
492+
element: <Foo />,
473493
children: [{
474494
displayName: 'div',
495+
element: <div />,
475496
children: [],
476497
}],
477498
}],

‎src/isomorphic/devtools/__tests__/ReactComponentTreeDevtool-test.native.js‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -137,6 +137,7 @@ describe('ReactComponentTreeDevtool', () => {
137137
var element = <View><Foo /><Baz /><Qux /></View>;
138138
var tree = {
139139
displayName: 'View',
140+
element,
140141
children: [{
141142
displayName: 'Bar',
142143
children: [],
@@ -273,6 +274,7 @@ describe('ReactComponentTreeDevtool', () => {
273274
);
274275
var tree = {
275276
displayName: 'View',
277+
element,
276278
children: [{
277279
displayName: 'View',
278280
children: [{
@@ -281,12 +283,14 @@ describe('ReactComponentTreeDevtool', () => {
281283
displayName: 'RCText',
282284
children: [{
283285
displayName: '#text',
286+
element: 'Hi!',
284287
text: 'Hi!',
285288
}],
286289
}],
287290
}],
288291
}, {
289292
displayName: 'Image',
293+
element: <Image />,
290294
children: [],
291295
}],
292296
};
@@ -303,8 +307,10 @@ describe('ReactComponentTreeDevtool', () => {
303307
var element = <Foo />;
304308
var tree = {
305309
displayName: 'Foo',
310+
element,
306311
children: [{
307312
displayName: 'Image',
313+
element: <Image />,
308314
children: [],
309315
}],
310316
};
@@ -344,12 +350,15 @@ describe('ReactComponentTreeDevtool', () => {
344350
var element = <Baz />;
345351
var tree = {
346352
displayName: 'Baz',
353+
element,
347354
children: [{
348355
displayName: 'View',
349356
children: [{
350357
displayName: 'Foo',
358+
element: <Foo />,
351359
children: [{
352360
displayName: 'Qux',
361+
element: <Qux />,
353362
children: [],
354363
}],
355364
}, {
@@ -362,13 +371,15 @@ describe('ReactComponentTreeDevtool', () => {
362371
displayName: 'RCText',
363372
children: [{
364373
displayName: '#text',
374+
element: 'Hi,',
365375
text: 'Hi,',
366376
}],
367377
}],
368378
}],
369379
}],
370380
}, {
371381
displayName: 'Image',
382+
element: <Image />,
372383
children: [],
373384
}],
374385
}],
@@ -481,16 +492,21 @@ describe('ReactComponentTreeDevtool', () => {
481492
);
482493
var tree = {
483494
displayName: 'View',
495+
element,
484496
children: [{
485497
displayName: 'Foo',
498+
element: <Foo />,
486499
children: [{
487500
displayName: 'Image',
501+
element: <Image />,
488502
children: [],
489503
}],
490504
}, {
491505
displayName: 'Foo',
506+
element: <Foo />,
492507
children: [{
493508
displayName: 'Image',
509+
element: <Image />,
494510
children: [],
495511
}],
496512
}],

‎src/renderers/dom/shared/ReactDOMComponent.js‎

Lines changed: 26 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -247,16 +247,34 @@ function optionPostMount() {
247247

248248
var setContentChildForInstrumentation = emptyFunction;
249249
if (__DEV__) {
250-
setContentChildForInstrumentation = function(contentToUse) {
250+
setContentChildForInstrumentation = function(content) {
251+
var hasExistingContent = this._contentDebugID != null;
251252
var debugID = this._debugID;
252253
var contentDebugID = debugID + '#text';
254+
255+
if (content == null) {
256+
if (hasExistingContent) {
257+
ReactInstrumentation.debugTool.onUnmountComponent(this._contentDebugID);
258+
}
259+
this._contentDebugID = null;
260+
return;
261+
}
262+
253263
this._contentDebugID = contentDebugID;
264+
var text = '' + content;
265+
254266
ReactInstrumentation.debugTool.onSetDisplayName(contentDebugID, '#text');
255267
ReactInstrumentation.debugTool.onSetParent(contentDebugID, debugID);
256-
ReactInstrumentation.debugTool.onBeforeMountComponent(contentDebugID);
257-
ReactInstrumentation.debugTool.onSetText(contentDebugID, '' + contentToUse);
258-
ReactInstrumentation.debugTool.onMountComponent(contentDebugID);
259-
ReactInstrumentation.debugTool.onSetChildren(debugID, [contentDebugID]);
268+
ReactInstrumentation.debugTool.onSetText(contentDebugID, text);
269+
270+
if (hasExistingContent) {
271+
ReactInstrumentation.debugTool.onBeforeUpdateComponent(contentDebugID, content);
272+
ReactInstrumentation.debugTool.onUpdateComponent(contentDebugID);
273+
} else {
274+
ReactInstrumentation.debugTool.onBeforeMountComponent(contentDebugID, content);
275+
ReactInstrumentation.debugTool.onMountComponent(contentDebugID);
276+
ReactInstrumentation.debugTool.onSetChildren(debugID, [contentDebugID]);
277+
}
260278
};
261279
}
262280

@@ -463,7 +481,7 @@ function ReactDOMComponent(element) {
463481
this._flags = 0;
464482
if (__DEV__) {
465483
this._ancestorInfo = null;
466-
this._contentDebugID = null;
484+
setContentChildForInstrumentation.call(this, null);
467485
}
468486
}
469487

@@ -1035,7 +1053,6 @@ ReactDOMComponent.Mixin = {
10351053
if (lastContent !== nextContent) {
10361054
this.updateTextContent('' + nextContent);
10371055
if (__DEV__) {
1038-
this._contentDebugID = this._debugID + '#text';
10391056
setContentChildForInstrumentation.call(this, nextContent);
10401057
}
10411058
}
@@ -1048,10 +1065,7 @@ ReactDOMComponent.Mixin = {
10481065
}
10491066
} else if (nextChildren != null) {
10501067
if (__DEV__) {
1051-
if (this._contentDebugID) {
1052-
ReactInstrumentation.debugTool.onUnmountComponent(this._contentDebugID);
1053-
this._contentDebugID = null;
1054-
}
1068+
setContentChildForInstrumentation.call(this, null);
10551069
}
10561070

10571071
this.updateChildren(nextChildren, transaction, context);
@@ -1113,10 +1127,7 @@ ReactDOMComponent.Mixin = {
11131127
this._wrapperState = null;
11141128

11151129
if (__DEV__) {
1116-
if (this._contentDebugID) {
1117-
ReactInstrumentation.debugTool.onUnmountComponent(this._contentDebugID);
1118-
this._contentDebugID = null;
1119-
}
1130+
setContentChildForInstrumentation.call(this, null);
11201131
}
11211132
},
11221133

‎src/renderers/shared/stack/reconciler/ReactReconciler.js‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -46,14 +46,14 @@ var ReactReconciler = {
4646
) {
4747
if (__DEV__) {
4848
if (internalInstance._debugID !== 0) {
49-
ReactInstrumentation.debugTool.onBeginReconcilerTimer(
50-
internalInstance._debugID,
51-
'mountComponent'
52-
);
5349
ReactInstrumentation.debugTool.onBeforeMountComponent(
5450
internalInstance._debugID,
5551
internalInstance._currentElement
5652
);
53+
ReactInstrumentation.debugTool.onBeginReconcilerTimer(
54+
internalInstance._debugID,
55+
'mountComponent'
56+
);
5757
}
5858
}
5959
var markup = internalInstance.mountComponent(
@@ -150,13 +150,13 @@ var ReactReconciler = {
150150

151151
if (__DEV__) {
152152
if (internalInstance._debugID !== 0) {
153-
ReactInstrumentation.debugTool.onBeginReconcilerTimer(
153+
ReactInstrumentation.debugTool.onBeforeUpdateComponent(
154154
internalInstance._debugID,
155-
'receiveComponent'
155+
nextElement
156156
);
157-
ReactInstrumentation.debugTool.onBeforeUpdateComponent(
157+
ReactInstrumentation.debugTool.onBeginReconcilerTimer(
158158
internalInstance._debugID,
159-
internalInstance._currentElement
159+
'receiveComponent'
160160
);
161161
}
162162
}

‎src/test/ReactComponentTreeTestUtils.js‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,12 +23,13 @@ function getRegisteredDisplayNames() {
2323
.map(ReactComponentTreeDevtool.getDisplayName);
2424
}
2525

26-
function expectTree(rootID, expectedTree, parentPath = '') {
26+
function expectTree(rootID, expectedTree, parentPath) {
2727
var displayName = ReactComponentTreeDevtool.getDisplayName(rootID);
2828
var ownerID = ReactComponentTreeDevtool.getOwnerID(rootID);
2929
var parentID = ReactComponentTreeDevtool.getParentID(rootID);
3030
var childIDs = ReactComponentTreeDevtool.getChildIDs(rootID);
3131
var text = ReactComponentTreeDevtool.getText(rootID);
32+
var element = ReactComponentTreeDevtool.getElement(rootID);
3233
var path = parentPath ? `${parentPath} > ${displayName}` : displayName;
3334

3435
function expectEqual(actual, expected, name) {
@@ -62,9 +63,21 @@ function expectTree(rootID, expectedTree, parentPath = '') {
6263
}
6364
if (expectedTree.text !== undefined) {
6465
expectEqual(text, expectedTree.text, 'text');
66+
expectEqual('' + element, expectedTree.text, 'element.toString()');
6567
} else {
6668
expectEqual(text, null, 'text');
6769
}
70+
if (expectedTree.element !== undefined) {
71+
// TODO: Comparing elements makes tests run out of memory on errors.
72+
// For now, compare just types.
73+
expectEqual(
74+
element && element.type,
75+
expectedTree.element && expectedTree.element.type,
76+
'element.type'
77+
);
78+
} else if (text == null) {
79+
expectEqual(typeof element, 'object', 'typeof element');
80+
}
6881
if (expectedTree.children !== undefined) {
6982
expectEqual(
7083
childIDs.length,

0 commit comments

Comments
 (0)