@samitouri / QOS-React / commits / acd67c368d

Remove isComposite and hide TopLevelWrapper

Dan Abramov committed Apr 24, 2016 at 02:55 UTC acd67c368d1ff66d80657094f136e87b36413210
12 files changed +143 -352
src/isomorphic/ReactDebugTool.js
+21 -14
@@ -37,6 +37,11 @@ function emitEvent(handlerFunctionName, arg1, arg2, arg3, arg4, arg5) {
37 }
38 }
39
40 +// This can be removed once TopLevelWrapper is gone.
41 +function isTopLevelWrapper(debugID) {
42 + return debugID === 0;
43 +}
44 +
45 var ReactDebugTool = {
46 addDevtool(devtool) {
47 eventHandlers.push(devtool);
@@ -58,17 +63,16 @@ var ReactDebugTool = {
63 onSetState() {
64 emitEvent('onSetState');
65 },
61 - onSetIsTopLevelWrapper(debugID, isTopLevelWrapper) {
62 - emitEvent('onSetIsTopLevelWrapper', debugID, isTopLevelWrapper);
63 - },
64 - onSetIsComposite(debugID, isComposite) {
65 - emitEvent('onSetIsComposite', debugID, isComposite);
66 - },
66 onSetDisplayName(debugID, displayName) {
67 emitEvent('onSetDisplayName', debugID, displayName);
68 },
69 + onSetIsEmpty(debugID, isEmpty) {
70 + emitEvent('onSetIsEmpty', debugID, isEmpty);
71 + },
72 onSetChildren(debugID, childDebugIDs) {
71 - emitEvent('onSetChildren', debugID, childDebugIDs);
73 + if (!isTopLevelWrapper(debugID)) {
74 + emitEvent('onSetChildren', debugID, childDebugIDs);
75 + }
76 },
77 onSetOwner(debugID, ownerDebugID) {
78 emitEvent('onSetOwner', debugID, ownerDebugID);
@@ -79,17 +83,20 @@ var ReactDebugTool = {
83 onMountRootComponent(debugID) {
84 emitEvent('onMountRootComponent', debugID);
85 },
82 - onMountComponent(debugID, nativeContainerDebugID) {
83 - emitEvent('onMountComponent', debugID, nativeContainerDebugID);
86 + onMountComponent(debugID) {
87 + if (!isTopLevelWrapper(debugID)) {
88 + emitEvent('onMountComponent', debugID);
89 + }
90 },
91 onUpdateComponent(debugID) {
86 - emitEvent('onUpdateComponent', debugID);
92 + if (!isTopLevelWrapper(debugID)) {
93 + emitEvent('onUpdateComponent', debugID);
94 + }
95 },
96 onUnmountComponent(debugID) {
89 - emitEvent('onUnmountComponent', debugID);
90 - },
91 - onUnmountNativeContainer(nativeContainerDebugID) {
92 - emitEvent('onUnmountNativeContainer', nativeContainerDebugID);
97 + if (!isTopLevelWrapper(debugID)) {
98 + emitEvent('onUnmountComponent', debugID);
99 + }
100 },
101 };
102
src/isomorphic/devtools/ReactComponentTreeDevtool.js
+30 -47
@@ -13,40 +13,36 @@
13
14 var invariant = require('invariant');
15
16 -var unmountedContainerIDs = [];
16 var tree = {};
17 +var rootIDs = [];
18
19 function updateTree(id, update) {
20 if (!tree[id]) {
21 tree[id] = {
22 - nativeContainerID: null,
22 parentID: null,
23 ownerID: null,
24 text: null,
25 childIDs: [],
26 displayName: 'Unknown',
28 - isTopLevelWrapper: false,
27 + isMounted: false,
28 + isEmpty: false,
29 };
30 }
31 update(tree[id]);
32 }
33
34 -function purgeTree(id) {
34 +function purgeDeep(id) {
35 var item = tree[id];
36 if (item) {
37 var {childIDs} = item;
38 delete tree[id];
39 - childIDs.forEach(purgeTree);
39 + childIDs.forEach(purgeDeep);
40 }
41 }
42
43 var ReactComponentTreeDevtool = {
44 - onSetIsTopLevelWrapper(id, isTopLevelWrapper) {
45 - updateTree(id, item => item.isTopLevelWrapper = isTopLevelWrapper);
46 - },
47 -
48 - onSetIsComposite(id, isComposite) {
49 - updateTree(id, item => item.isComposite = isComposite);
44 + onSetIsEmpty(id, isEmpty) {
45 + updateTree(id, item => item.isEmpty = isEmpty);
46 },
47
48 onSetDisplayName(id, displayName) {
@@ -54,21 +50,10 @@ var ReactComponentTreeDevtool = {
50 },
51
52 onSetChildren(id, nextChildIDs) {
57 - if (ReactComponentTreeDevtool.isTopLevelWrapper(id)) {
58 - return;
59 - }
60 -
53 updateTree(id, item => {
54 var prevChildIDs = item.childIDs;
55 item.childIDs = nextChildIDs;
56
65 - prevChildIDs.forEach(prevChildID => {
66 - var prevChild = tree[prevChildID];
67 - if (prevChild && nextChildIDs.indexOf(prevChildID) === -1) {
68 - prevChild.parentID = null;
69 - }
70 - });
71 -
57 nextChildIDs.forEach(nextChildID => {
58 var nextChild = tree[nextChildID];
59 invariant(
@@ -76,11 +61,6 @@ var ReactComponentTreeDevtool = {
61 'Expected devtool events to fire for the child ' +
62 'before its parent includes it in onSetChildren().'
63 );
79 - invariant(
80 - nextChild.isComposite != null,
81 - 'Expected onSetIsComposite() to fire for the child ' +
82 - 'before its parent includes it in onSetChildren().'
83 - );
64 invariant(
65 nextChild.displayName != null,
66 'Expected onSetDisplayName() to fire for the child ' +
@@ -88,7 +68,12 @@ var ReactComponentTreeDevtool = {
68 );
69 invariant(
70 nextChild.childIDs != null || nextChild.text != null,
91 - 'Expected either onSetChildren() or onSetText() to fire for the child ' +
71 + 'Expected onSetChildren() or onSetText() to fire for the child ' +
72 + 'before its parent includes it in onSetChildren().'
73 + );
74 + invariant(
75 + nextChild.isMounted,
76 + 'Expected onMountComponent() to fire for the child ' +
77 'before its parent includes it in onSetChildren().'
78 );
79
@@ -107,39 +92,33 @@ var ReactComponentTreeDevtool = {
92 updateTree(id, item => item.text = text);
93 },
94
110 - onMountComponent(id, nativeContainerID) {
111 - updateTree(id, item => item.nativeContainerID = nativeContainerID);
95 + onMountComponent(id) {
96 + updateTree(id, item => item.isMounted = true);
97 },
98
114 - onUnmountComponent(id) {
115 - purgeTree(id);
99 + onMountRootComponent(id) {
100 + rootIDs.push(id);
101 },
102
118 - onUnmountNativeContainer(nativeContainerID) {
119 - unmountedContainerIDs.push(nativeContainerID);
103 + onUnmountComponent(id) {
104 + updateTree(id, item => item.isMounted = false);
105 + rootIDs = rootIDs.filter(rootID => rootID !== id);
106 },
107
108 purgeUnmountedComponents() {
123 - var unmountedIDs = Object.keys(tree).filter(id =>
124 - unmountedContainerIDs.indexOf(tree[id].nativeContainerID) !== -1
125 - );
126 - unmountedContainerIDs = [];
127 - unmountedIDs.forEach(purgeTree);
109 + Object.keys(tree)
110 + .filter(id => !tree[id].isMounted)
111 + .forEach(purgeDeep);
112 },
113
130 - isComposite(id) {
114 + isMounted(id) {
115 var item = tree[id];
132 - return item ? item.isComposite : false;
133 - },
134 -
135 - isTopLevelWrapper(id) {
136 - var item = tree[id];
137 - return item ? item.isTopLevelWrapper : false;
116 + return item ? item.isMounted : false;
117 },
118
119 getChildIDs(id) {
120 var item = tree[id];
142 - return item ? item.childIDs : [];
121 + return item ? item.childIDs.filter(childID => !tree[childID].isEmpty) : [];
122 },
123
124 getDisplayName(id) {
@@ -162,6 +141,10 @@ var ReactComponentTreeDevtool = {
141 return item ? item.text : null;
142 },
143
144 + getRootIDs() {
145 + return rootIDs;
146 + },
147 +
148 getRegisteredIDs() {
149 return Object.keys(tree);
150 },
src/isomorphic/devtools/__tests__/ReactComponentTreeDevtool-test.js
+24 -223
@@ -36,9 +36,13 @@ describe('ReactComponentTreeDevtool', () => {
36 ReactDebugTool.removeDevtool(ReactComponentTreeDevtool);
37 });
38
39 + function getRootDisplayNames() {
40 + return ReactComponentTreeDevtool.getRootIDs()
41 + .map(ReactComponentTreeDevtool.getDisplayName);
42 + }
43 +
44 function getRegisteredDisplayNames() {
45 return ReactComponentTreeDevtool.getRegisteredIDs()
41 - .filter(id => !ReactComponentTreeDevtool.isTopLevelWrapper(id))
46 .map(ReactComponentTreeDevtool.getDisplayName);
47 }
48
@@ -50,7 +54,6 @@ describe('ReactComponentTreeDevtool', () => {
54 } = options;
55
56 var result = {
53 - isComposite: ReactComponentTreeDevtool.isComposite(rootID),
57 displayName: ReactComponentTreeDevtool.getDisplayName(rootID),
58 };
59
@@ -102,14 +105,14 @@ describe('ReactComponentTreeDevtool', () => {
105 currentElement = element;
106 ReactDOM.render(<Wrapper />, node);
107 expect(getActualTree()).toEqual(expectedTree);
108 + ReactComponentTreeDevtool.purgeUnmountedComponents();
109 + expect(getActualTree()).toEqual(expectedTree);
110 });
111 ReactDOM.unmountComponentAtNode(node);
112
108 - var lastExpectedTree = pairs[pairs.length - 1][1];
109 - expect(getActualTree()).toEqual(lastExpectedTree);
110 -
113 ReactComponentTreeDevtool.purgeUnmountedComponents();
114 expect(getActualTree()).toBe(undefined);
115 + expect(getRootDisplayNames()).toEqual([]);
116 expect(getRegisteredDisplayNames()).toEqual([]);
117
118 pairs.forEach(([element, expectedTree]) => {
@@ -119,6 +122,7 @@ describe('ReactComponentTreeDevtool', () => {
122
123 ReactComponentTreeDevtool.purgeUnmountedComponents();
124 expect(getActualTree()).toBe(undefined);
125 + expect(getRootDisplayNames()).toEqual([]);
126 expect(getRegisteredDisplayNames()).toEqual([]);
127 });
128 }
@@ -145,18 +149,14 @@ describe('ReactComponentTreeDevtool', () => {
149
150 var element = <div><Foo /><Baz /><Qux /></div>;
151 var tree = {
148 - isComposite: false,
152 displayName: 'div',
153 children: [{
151 - isComposite: true,
154 displayName: 'Bar',
155 children: [],
156 }, {
155 - isComposite: true,
157 displayName: 'Baz',
158 children: [],
159 }, {
159 - isComposite: true,
160 displayName: 'Unknown',
161 children: [],
162 }],
@@ -185,18 +185,14 @@ describe('ReactComponentTreeDevtool', () => {
185
186 var element = <div><Foo /><Baz /><Qux /></div>;
187 var tree = {
188 - isComposite: false,
188 displayName: 'div',
189 children: [{
191 - isComposite: true,
190 displayName: 'Bar',
191 children: [],
192 }, {
195 - isComposite: true,
193 displayName: 'Baz',
194 children: [],
195 }, {
199 - isComposite: true,
196 // Note: Ideally fallback name should be consistent (e.g. "Unknown")
197 displayName: 'ReactComponent',
198 children: [],
@@ -232,18 +228,14 @@ describe('ReactComponentTreeDevtool', () => {
228
229 var element = <div><Foo /><Baz /><Qux /></div>;
230 var tree = {
235 - isComposite: false,
231 displayName: 'div',
232 children: [{
238 - isComposite: true,
233 displayName: 'Bar',
234 children: [],
235 }, {
242 - isComposite: true,
236 displayName: 'Baz',
237 children: [],
238 }, {
246 - isComposite: true,
239 displayName: 'Unknown',
240 children: [],
241 }],
@@ -266,18 +258,14 @@ describe('ReactComponentTreeDevtool', () => {
258
259 var element = <div><Foo /><Baz /><Qux /></div>;
260 var tree = {
269 - isComposite: false,
261 displayName: 'div',
262 children: [{
272 - isComposite: true,
263 displayName: 'Bar',
264 children: [],
265 }, {
276 - isComposite: true,
266 displayName: 'Baz',
267 children: [],
268 }, {
280 - isComposite: true,
269 displayName: 'Unknown',
270 children: [],
271 }],
@@ -298,26 +286,20 @@ describe('ReactComponentTreeDevtool', () => {
286 </div>
287 );
288 var tree = {
301 - isComposite: false,
289 displayName: 'div',
290 children: [{
304 - isComposite: false,
291 displayName: 'p',
292 children: [{
307 - isComposite: false,
293 displayName: 'span',
294 children: [{
310 - isComposite: false,
295 displayName: '#text',
296 text: 'Hi!',
297 }],
298 }, {
315 - isComposite: false,
299 displayName: '#text',
300 text: 'Wow.',
301 }],
302 }, {
320 - isComposite: false,
303 displayName: 'hr',
304 children: [],
305 }],
@@ -334,10 +316,8 @@ describe('ReactComponentTreeDevtool', () => {
316
317 var element = <Foo />;
318 var tree = {
337 - isComposite: true,
319 displayName: 'Foo',
320 children: [{
340 - isComposite: false,
321 displayName: 'div',
322 children: [],
323 }],
@@ -378,44 +358,33 @@ describe('ReactComponentTreeDevtool', () => {
358
359 var element = <Baz />;
360 var tree = {
381 - isComposite: true,
361 displayName: 'Baz',
362 children: [{
384 - isComposite: false,
363 displayName: 'div',
364 children: [{
387 - isComposite: true,
365 displayName: 'Foo',
366 children: [{
390 - isComposite: true,
367 displayName: 'Qux',
368 children: [],
369 }],
370 }, {
395 - isComposite: true,
371 displayName: 'Bar',
372 children: [{
398 - isComposite: false,
373 displayName: 'h1',
374 children: [{
401 - isComposite: false,
375 displayName: 'span',
376 children: [{
404 - isComposite: false,
377 displayName: '#text',
378 text: 'Hi,',
379 }],
380 }, {
409 - isComposite: false,
381 displayName: '#text',
382 text: 'Mom',
383 }],
384 }],
385 }, {
415 - isComposite: false,
386 displayName: 'a',
387 children: [{
418 - isComposite: false,
388 displayName: '#text',
389 text: 'Click me.',
390 }],
@@ -433,7 +402,6 @@ describe('ReactComponentTreeDevtool', () => {
402 }
403 var element = <Foo />;
404 var tree = {
436 - isComposite: true,
405 displayName: 'Foo',
406 children: [],
407 };
@@ -448,7 +416,6 @@ describe('ReactComponentTreeDevtool', () => {
416 }
417 var element = <Foo />;
418 var tree = {
451 - isComposite: true,
419 displayName: 'Foo',
420 children: [],
421 };
@@ -458,14 +425,11 @@ describe('ReactComponentTreeDevtool', () => {
425 it('reports text nodes as children', () => {
426 var element = <div>{'1'}{2}</div>;
427 var tree = {
461 - isComposite: false,
428 displayName: 'div',
429 children: [{
464 - isComposite: false,
430 displayName: '#text',
431 text: '1',
432 }, {
468 - isComposite: false,
433 displayName: '#text',
434 text: '2',
435 }],
@@ -476,10 +440,8 @@ describe('ReactComponentTreeDevtool', () => {
440 it('reports a single text node as a child', () => {
441 var element = <div>{'1'}</div>;
442 var tree = {
479 - isComposite: false,
443 displayName: 'div',
444 children: [{
482 - isComposite: false,
445 displayName: '#text',
446 text: '1',
447 }],
@@ -490,10 +452,8 @@ describe('ReactComponentTreeDevtool', () => {
452 it('reports a single number node as a child', () => {
453 var element = <div>{42}</div>;
454 var tree = {
493 - isComposite: false,
455 displayName: 'div',
456 children: [{
496 - isComposite: false,
457 displayName: '#text',
458 text: '42',
459 }],
@@ -504,10 +464,8 @@ describe('ReactComponentTreeDevtool', () => {
464 it('reports a zero as a child', () => {
465 var element = <div>{0}</div>;
466 var tree = {
507 - isComposite: false,
467 displayName: 'div',
468 children: [{
510 - isComposite: false,
469 displayName: '#text',
470 text: '0',
471 }],
@@ -529,21 +487,16 @@ describe('ReactComponentTreeDevtool', () => {
487 </div>
488 );
489 var tree = {
532 - isComposite: false,
490 displayName: 'div',
491 children: [{
535 - isComposite: false,
492 displayName: '#text',
493 text: 'hi',
494 }, {
539 - isComposite: false,
495 displayName: '#text',
496 text: '42',
497 }, {
543 - isComposite: true,
498 displayName: 'Foo',
499 children: [{
546 - isComposite: false,
500 displayName: 'div',
501 children: [],
502 }],
@@ -555,7 +508,6 @@ describe('ReactComponentTreeDevtool', () => {
508 it('reports html content as no children', () => {
509 var element = <div dangerouslySetInnerHTML={{__html: 'Bye.'}} />;
510 var tree = {
558 - isComposite: false,
511 displayName: 'div',
512 children: [],
513 };
@@ -568,10 +520,8 @@ describe('ReactComponentTreeDevtool', () => {
520 it('updates text of a single text child', () => {
521 var elementBefore = <div>Hi.</div>;
522 var treeBefore = {
571 - isComposite: false,
523 displayName: 'div',
524 children: [{
574 - isComposite: false,
525 displayName: '#text',
526 text: 'Hi.',
527 }],
@@ -579,10 +529,8 @@ describe('ReactComponentTreeDevtool', () => {
529
530 var elementAfter = <div>Bye.</div>;
531 var treeAfter = {
582 - isComposite: false,
532 displayName: 'div',
533 children: [{
585 - isComposite: false,
534 displayName: '#text',
535 text: 'Bye.',
536 }],
@@ -597,17 +545,14 @@ describe('ReactComponentTreeDevtool', () => {
545 it('updates from no children to a single text child', () => {
546 var elementBefore = <div />;
547 var treeBefore = {
600 - isComposite: false,
548 displayName: 'div',
549 children: [],
550 };
551
552 var elementAfter = <div>Hi.</div>;
553 var treeAfter = {
607 - isComposite: false,
554 displayName: 'div',
555 children: [{
610 - isComposite: false,
556 displayName: '#text',
557 text: 'Hi.',
558 }],
@@ -622,10 +567,8 @@ describe('ReactComponentTreeDevtool', () => {
567 it('updates from a single text child to no children', () => {
568 var elementBefore = <div>Hi.</div>;
569 var treeBefore = {
625 - isComposite: false,
570 displayName: 'div',
571 children: [{
628 - isComposite: false,
572 displayName: '#text',
573 text: 'Hi.',
574 }],
@@ -633,7 +576,6 @@ describe('ReactComponentTreeDevtool', () => {
576
577 var elementAfter = <div />;
578 var treeAfter = {
636 - isComposite: false,
579 displayName: 'div',
580 children: [],
581 };
@@ -647,17 +589,14 @@ describe('ReactComponentTreeDevtool', () => {
589 it('updates from html content to a single text child', () => {
590 var elementBefore = <div dangerouslySetInnerHTML={{__html: 'Hi.'}} />;
591 var treeBefore = {
650 - isComposite: false,
592 displayName: 'div',
593 children: [],
594 };
595
596 var elementAfter = <div>Hi.</div>;
597 var treeAfter = {
657 - isComposite: false,
598 displayName: 'div',
599 children: [{
660 - isComposite: false,
600 displayName: '#text',
601 text: 'Hi.',
602 }],
@@ -672,10 +611,8 @@ describe('ReactComponentTreeDevtool', () => {
611 it('updates from a single text child to html content', () => {
612 var elementBefore = <div>Hi.</div>;
613 var treeBefore = {
675 - isComposite: false,
614 displayName: 'div',
615 children: [{
678 - isComposite: false,
616 displayName: '#text',
617 text: 'Hi.',
618 }],
@@ -683,7 +620,6 @@ describe('ReactComponentTreeDevtool', () => {
620
621 var elementAfter = <div dangerouslySetInnerHTML={{__html: 'Hi.'}} />;
622 var treeAfter = {
686 - isComposite: false,
623 displayName: 'div',
624 children: [],
625 };
@@ -697,21 +633,17 @@ describe('ReactComponentTreeDevtool', () => {
633 it('updates from no children to multiple text children', () => {
634 var elementBefore = <div />;
635 var treeBefore = {
700 - isComposite: false,
636 displayName: 'div',
637 children: [],
638 };
639
640 var elementAfter = <div>{'Hi.'}{'Bye.'}</div>;
641 var treeAfter = {
707 - isComposite: false,
642 displayName: 'div',
643 children: [{
710 - isComposite: false,
644 displayName: '#text',
645 text: 'Hi.',
646 }, {
714 - isComposite: false,
647 displayName: '#text',
648 text: 'Bye.',
649 }],
@@ -726,14 +658,11 @@ describe('ReactComponentTreeDevtool', () => {
658 it('updates from multiple text children to no children', () => {
659 var elementBefore = <div>{'Hi.'}{'Bye.'}</div>;
660 var treeBefore = {
729 - isComposite: false,
661 displayName: 'div',
662 children: [{
732 - isComposite: false,
663 displayName: '#text',
664 text: 'Hi.',
665 }, {
736 - isComposite: false,
666 displayName: '#text',
667 text: 'Bye.',
668 }],
@@ -741,7 +670,6 @@ describe('ReactComponentTreeDevtool', () => {
670
671 var elementAfter = <div />;
672 var treeAfter = {
744 - isComposite: false,
673 displayName: 'div',
674 children: [],
675 };
@@ -755,21 +683,17 @@ describe('ReactComponentTreeDevtool', () => {
683 it('updates from html content to multiple text children', () => {
684 var elementBefore = <div dangerouslySetInnerHTML={{__html: 'Hi.'}} />;
685 var treeBefore = {
758 - isComposite: false,
686 displayName: 'div',
687 children: [],
688 };
689
690 var elementAfter = <div>{'Hi.'}{'Bye.'}</div>;
691 var treeAfter = {
765 - isComposite: false,
692 displayName: 'div',
693 children: [{
768 - isComposite: false,
694 displayName: '#text',
695 text: 'Hi.',
696 }, {
772 - isComposite: false,
697 displayName: '#text',
698 text: 'Bye.',
699 }],
@@ -784,14 +708,11 @@ describe('ReactComponentTreeDevtool', () => {
708 it('updates from multiple text children to html content', () => {
709 var elementBefore = <div>{'Hi.'}{'Bye.'}</div>;
710 var treeBefore = {
787 - isComposite: false,
711 displayName: 'div',
712 children: [{
790 - isComposite: false,
713 displayName: '#text',
714 text: 'Hi.',
715 }, {
794 - isComposite: false,
716 displayName: '#text',
717 text: 'Bye.',
718 }],
@@ -799,7 +720,6 @@ describe('ReactComponentTreeDevtool', () => {
720
721 var elementAfter = <div dangerouslySetInnerHTML={{__html: 'Hi.'}} />;
722 var treeAfter = {
802 - isComposite: false,
723 displayName: 'div',
724 children: [],
725 };
@@ -813,14 +733,12 @@ describe('ReactComponentTreeDevtool', () => {
733 it('updates from html content to no children', () => {
734 var elementBefore = <div dangerouslySetInnerHTML={{__html: 'Hi.'}} />;
735 var treeBefore = {
816 - isComposite: false,
736 displayName: 'div',
737 children: [],
738 };
739
740 var elementAfter = <div />;
741 var treeAfter = {
823 - isComposite: false,
742 displayName: 'div',
743 children: [],
744 };
@@ -834,14 +752,12 @@ describe('ReactComponentTreeDevtool', () => {
752 it('updates from no children to html content', () => {
753 var elementBefore = <div />;
754 var treeBefore = {
837 - isComposite: false,
755 displayName: 'div',
756 children: [],
757 };
758
759 var elementAfter = <div dangerouslySetInnerHTML={{__html: 'Hi.'}} />;
760 var treeAfter = {
844 - isComposite: false,
761 displayName: 'div',
762 children: [],
763 };
@@ -855,10 +771,8 @@ describe('ReactComponentTreeDevtool', () => {
771 it('updates from one text child to multiple text children', () => {
772 var elementBefore = <div>Hi.</div>;
773 var treeBefore = {
858 - isComposite: false,
774 displayName: 'div',
775 children: [{
861 - isComposite: false,
776 displayName: '#text',
777 text: 'Hi.',
778 }],
@@ -866,14 +780,11 @@ describe('ReactComponentTreeDevtool', () => {
780
781 var elementAfter = <div>{'Hi.'}{'Bye.'}</div>;
782 var treeAfter = {
869 - isComposite: false,
783 displayName: 'div',
784 children: [{
872 - isComposite: false,
785 displayName: '#text',
786 text: 'Hi.',
787 }, {
876 - isComposite: false,
788 displayName: '#text',
789 text: 'Bye.',
790 }],
@@ -888,14 +799,11 @@ describe('ReactComponentTreeDevtool', () => {
799 it('updates from multiple text children to one text child', () => {
800 var elementBefore = <div>{'Hi.'}{'Bye.'}</div>;
801 var treeBefore = {
891 - isComposite: false,
802 displayName: 'div',
803 children: [{
894 - isComposite: false,
804 displayName: '#text',
805 text: 'Hi.',
806 }, {
898 - isComposite: false,
807 displayName: '#text',
808 text: 'Bye.',
809 }],
@@ -903,10 +811,8 @@ describe('ReactComponentTreeDevtool', () => {
811
812 var elementAfter = <div>Hi.</div>;
813 var treeAfter = {
906 - isComposite: false,
814 displayName: 'div',
815 children: [{
909 - isComposite: false,
816 displayName: '#text',
817 text: 'Hi.',
818 }],
@@ -920,14 +826,11 @@ describe('ReactComponentTreeDevtool', () => {
826 it('updates text nodes when reordering', () => {
827 var elementBefore = <div>{'Hi.'}{'Bye.'}</div>;
828 var treeBefore = {
923 - isComposite: false,
829 displayName: 'div',
830 children: [{
926 - isComposite: false,
831 displayName: '#text',
832 text: 'Hi.',
833 }, {
930 - isComposite: false,
834 displayName: '#text',
835 text: 'Bye.',
836 }],
@@ -935,14 +838,11 @@ describe('ReactComponentTreeDevtool', () => {
838
839 var elementAfter = <div>{'Bye.'}{'Hi.'}</div>;
840 var treeAfter = {
938 - isComposite: false,
841 displayName: 'div',
842 children: [{
941 - isComposite: false,
843 displayName: '#text',
844 text: 'Bye.',
845 }, {
945 - isComposite: false,
846 displayName: '#text',
847 text: 'Hi.',
848 }],
@@ -961,21 +861,16 @@ describe('ReactComponentTreeDevtool', () => {
861 </div>
862 );
863 var treeBefore = {
964 - isComposite: false,
864 displayName: 'div',
865 children: [{
967 - isComposite: false,
866 displayName: 'div',
867 children: [{
970 - isComposite: false,
868 displayName: '#text',
869 text: 'Hi.',
870 }],
871 }, {
975 - isComposite: false,
872 displayName: 'div',
873 children: [{
978 - isComposite: false,
874 displayName: '#text',
875 text: 'Bye.',
876 }],
@@ -989,21 +884,16 @@ describe('ReactComponentTreeDevtool', () => {
884 </div>
885 );
886 var treeAfter = {
992 - isComposite: false,
887 displayName: 'div',
888 children: [{
995 - isComposite: false,
889 displayName: 'div',
890 children: [{
998 - isComposite: false,
891 displayName: '#text',
892 text: 'Bye.',
893 }],
894 }, {
1003 - isComposite: false,
895 displayName: 'div',
896 children: [{
1006 - isComposite: false,
897 displayName: '#text',
898 text: 'Hi.',
899 }],
@@ -1024,21 +914,16 @@ describe('ReactComponentTreeDevtool', () => {
914 </div>
915 );
916 var treeBefore = {
1027 - isComposite: false,
917 displayName: 'div',
918 children: [{
1030 - isComposite: false,
919 displayName: 'div',
920 children: [{
1033 - isComposite: false,
921 displayName: '#text',
922 text: 'Hi.',
923 }],
924 }, {
1038 - isComposite: false,
925 displayName: 'div',
926 children: [{
1041 - isComposite: false,
927 displayName: '#text',
928 text: 'Bye.',
929 }],
@@ -1052,21 +937,16 @@ describe('ReactComponentTreeDevtool', () => {
937 </div>
938 );
939 var treeAfter = {
1055 - isComposite: false,
940 displayName: 'div',
941 children: [{
1058 - isComposite: false,
942 displayName: 'div',
943 children: [{
1061 - isComposite: false,
944 displayName: '#text',
945 text: 'Bye.',
946 }],
947 }, {
1066 - isComposite: false,
948 displayName: 'div',
949 children: [{
1069 - isComposite: false,
950 displayName: '#text',
951 text: 'Hi.',
952 }],
@@ -1090,10 +970,8 @@ describe('ReactComponentTreeDevtool', () => {
970
971 var elementBefore = <div><Foo /></div>;
972 var treeBefore = {
1093 - isComposite: false,
973 displayName: 'div',
974 children: [{
1096 - isComposite: true,
975 displayName: 'Foo',
976 children: [],
977 }],
@@ -1101,10 +979,8 @@ describe('ReactComponentTreeDevtool', () => {
979
980 var elementAfter = <div><Bar /></div>;
981 var treeAfter = {
1104 - isComposite: false,
982 displayName: 'div',
983 children: [{
1107 - isComposite: true,
984 displayName: 'Bar',
985 children: [],
986 }],
@@ -1123,13 +999,10 @@ describe('ReactComponentTreeDevtool', () => {
999
1000 var elementBefore = <div><Foo><div /></Foo></div>;
1001 var treeBefore = {
1126 - isComposite: false,
1002 displayName: 'div',
1003 children: [{
1129 - isComposite: true,
1004 displayName: 'Foo',
1005 children: [{
1132 - isComposite: false,
1006 displayName: 'div',
1007 children: [],
1008 }],
@@ -1138,13 +1011,10 @@ describe('ReactComponentTreeDevtool', () => {
1011
1012 var elementAfter = <div><Foo><span /></Foo></div>;
1013 var treeAfter = {
1141 - isComposite: false,
1014 displayName: 'div',
1015 children: [{
1144 - isComposite: true,
1016 displayName: 'Foo',
1017 children: [{
1147 - isComposite: false,
1018 displayName: 'span',
1019 children: [],
1020 }],
@@ -1164,17 +1034,14 @@ describe('ReactComponentTreeDevtool', () => {
1034
1035 var elementBefore = <div />;
1036 var treeBefore = {
1167 - isComposite: false,
1037 displayName: 'div',
1038 children: [],
1039 };
1040
1041 var elementAfter = <div><Foo /></div>;
1042 var treeAfter = {
1174 - isComposite: false,
1043 displayName: 'div',
1044 children: [{
1177 - isComposite: true,
1045 displayName: 'Foo',
1046 children: [],
1047 }],
@@ -1193,10 +1060,8 @@ describe('ReactComponentTreeDevtool', () => {
1060
1061 var elementBefore = <div><Foo /></div>;
1062 var treeBefore = {
1196 - isComposite: false,
1063 displayName: 'div',
1064 children: [{
1199 - isComposite: true,
1065 displayName: 'Foo',
1066 children: [],
1067 }],
@@ -1204,7 +1069,6 @@ describe('ReactComponentTreeDevtool', () => {
1069
1070 var elementAfter = <div />;
1071 var treeAfter = {
1207 - isComposite: false,
1072 displayName: 'div',
1073 children: [],
1074 };
@@ -1229,21 +1093,16 @@ describe('ReactComponentTreeDevtool', () => {
1093 </div>
1094 );
1095 var tree1 = {
1232 - isComposite: false,
1096 displayName: 'div',
1097 children: [{
1235 - isComposite: false,
1098 displayName: '#text',
1099 text: 'hi',
1100 }, {
1239 - isComposite: false,
1101 displayName: '#text',
1102 text: '42',
1103 }, {
1243 - isComposite: true,
1104 displayName: 'Foo',
1105 children: [{
1246 - isComposite: false,
1106 displayName: 'div',
1107 children: [],
1108 }],
@@ -1259,18 +1118,14 @@ describe('ReactComponentTreeDevtool', () => {
1118 </div>
1119 );
1120 var tree2 = {
1262 - isComposite: false,
1121 displayName: 'div',
1122 children: [{
1265 - isComposite: true,
1123 displayName: 'Foo',
1124 children: [{
1268 - isComposite: false,
1125 displayName: 'div',
1126 children: [],
1127 }],
1128 }, {
1273 - isComposite: false,
1129 displayName: '#text',
1130 text: 'hi',
1131 }],
@@ -1282,13 +1137,10 @@ describe('ReactComponentTreeDevtool', () => {
1137 </div>
1138 );
1139 var tree3 = {
1285 - isComposite: false,
1140 displayName: 'div',
1141 children: [{
1288 - isComposite: true,
1142 displayName: 'Foo',
1143 children: [{
1291 - isComposite: false,
1144 displayName: 'div',
1145 children: [],
1146 }],
@@ -1311,10 +1163,8 @@ describe('ReactComponentTreeDevtool', () => {
1163
1164 var elementBefore = <Foo><div /></Foo>;
1165 var treeBefore = {
1314 - isComposite: true,
1166 displayName: 'Foo',
1167 children: [{
1317 - isComposite: false,
1168 displayName: 'div',
1169 children: [],
1170 }],
@@ -1322,10 +1172,8 @@ describe('ReactComponentTreeDevtool', () => {
1172
1173 var elementAfter = <Foo><span /></Foo>;
1174 var treeAfter = {
1325 - isComposite: true,
1175 displayName: 'Foo',
1176 children: [{
1328 - isComposite: false,
1177 displayName: 'span',
1178 children: [],
1179 }],
@@ -1344,17 +1192,14 @@ describe('ReactComponentTreeDevtool', () => {
1192
1193 var elementBefore = <Foo>{null}</Foo>;
1194 var treeBefore = {
1347 - isComposite: true,
1195 displayName: 'Foo',
1196 children: [],
1197 };
1198
1199 var elementAfter = <Foo><div /></Foo>;
1200 var treeAfter = {
1354 - isComposite: true,
1201 displayName: 'Foo',
1202 children: [{
1357 - isComposite: false,
1203 displayName: 'div',
1204 children: [],
1205 }],
@@ -1373,10 +1218,8 @@ describe('ReactComponentTreeDevtool', () => {
1218
1219 var elementBefore = <Foo><div /></Foo>;
1220 var treeBefore = {
1376 - isComposite: true,
1221 displayName: 'Foo',
1222 children: [{
1379 - isComposite: false,
1223 displayName: 'div',
1224 children: [],
1225 }],
@@ -1384,7 +1227,6 @@ describe('ReactComponentTreeDevtool', () => {
1227
1228 var elementAfter = <Foo>{null}</Foo>;
1229 var treeAfter = {
1387 - isComposite: true,
1230 displayName: 'Foo',
1231 children: [],
1232 };
@@ -1406,10 +1248,8 @@ describe('ReactComponentTreeDevtool', () => {
1248
1249 var elementBefore = <Foo><div /></Foo>;
1250 var treeBefore = {
1409 - isComposite: true,
1251 displayName: 'Foo',
1252 children: [{
1412 - isComposite: false,
1253 displayName: 'div',
1254 children: [],
1255 }],
@@ -1417,10 +1257,8 @@ describe('ReactComponentTreeDevtool', () => {
1257
1258 var elementAfter = <Foo><Bar /></Foo>;
1259 var treeAfter = {
1420 - isComposite: true,
1260 displayName: 'Foo',
1261 children: [{
1423 - isComposite: true,
1262 displayName: 'Bar',
1263 children: [],
1264 }],
@@ -1443,10 +1281,8 @@ describe('ReactComponentTreeDevtool', () => {
1281
1282 var elementBefore = <Foo><Bar /></Foo>;
1283 var treeBefore = {
1446 - isComposite: true,
1284 displayName: 'Foo',
1285 children: [{
1449 - isComposite: true,
1286 displayName: 'Bar',
1287 children: [],
1288 }],
@@ -1454,10 +1290,8 @@ describe('ReactComponentTreeDevtool', () => {
1290
1291 var elementAfter = <Foo><div /></Foo>;
1292 var treeAfter = {
1457 - isComposite: true,
1293 displayName: 'Foo',
1294 children: [{
1460 - isComposite: false,
1295 displayName: 'div',
1296 children: [],
1297 }],
@@ -1480,17 +1314,14 @@ describe('ReactComponentTreeDevtool', () => {
1314
1315 var elementBefore = <Foo>{null}</Foo>;
1316 var treeBefore = {
1483 - isComposite: true,
1317 displayName: 'Foo',
1318 children: [],
1319 };
1320
1321 var elementAfter = <Foo><Bar /></Foo>;
1322 var treeAfter = {
1490 - isComposite: true,
1323 displayName: 'Foo',
1324 children: [{
1493 - isComposite: true,
1325 displayName: 'Bar',
1326 children: [],
1327 }],
@@ -1513,10 +1344,8 @@ describe('ReactComponentTreeDevtool', () => {
1344
1345 var elementBefore = <Foo><Bar /></Foo>;
1346 var treeBefore = {
1516 - isComposite: true,
1347 displayName: 'Foo',
1348 children: [{
1519 - isComposite: true,
1349 displayName: 'Bar',
1350 children: [],
1351 }],
@@ -1524,7 +1353,6 @@ describe('ReactComponentTreeDevtool', () => {
1353
1354 var elementAfter = <Foo>{null}</Foo>;
1355 var treeAfter = {
1527 - isComposite: true,
1356 displayName: 'Foo',
1357 children: [],
1358 };
@@ -1546,10 +1374,8 @@ describe('ReactComponentTreeDevtool', () => {
1374
1375 var elementBefore = <Foo><div /></Foo>;
1376 var treeBefore = {
1549 - isComposite: true,
1377 displayName: 'Foo',
1378 children: [{
1552 - isComposite: false,
1379 displayName: 'div',
1380 children: [],
1381 }],
@@ -1557,10 +1383,8 @@ describe('ReactComponentTreeDevtool', () => {
1383
1384 var elementAfter = <Foo><span /></Foo>;
1385 var treeAfter = {
1560 - isComposite: true,
1386 displayName: 'Foo',
1387 children: [{
1563 - isComposite: false,
1388 displayName: 'span',
1389 children: [],
1390 }],
@@ -1581,17 +1405,14 @@ describe('ReactComponentTreeDevtool', () => {
1405
1406 var elementBefore = <Foo>{null}</Foo>;
1407 var treeBefore = {
1584 - isComposite: true,
1408 displayName: 'Foo',
1409 children: [],
1410 };
1411
1412 var elementAfter = <Foo><div /></Foo>;
1413 var treeAfter = {
1591 - isComposite: true,
1414 displayName: 'Foo',
1415 children: [{
1594 - isComposite: false,
1416 displayName: 'div',
1417 children: [],
1418 }],
@@ -1612,10 +1433,8 @@ describe('ReactComponentTreeDevtool', () => {
1433
1434 var elementBefore = <Foo><div /></Foo>;
1435 var treeBefore = {
1615 - isComposite: true,
1436 displayName: 'Foo',
1437 children: [{
1618 - isComposite: false,
1438 displayName: 'div',
1439 children: [],
1440 }],
@@ -1623,7 +1442,6 @@ describe('ReactComponentTreeDevtool', () => {
1442
1443 var elementAfter = <Foo>{null}</Foo>;
1444 var treeAfter = {
1626 - isComposite: true,
1445 displayName: 'Foo',
1446 children: [],
1447 };
@@ -1649,10 +1467,8 @@ describe('ReactComponentTreeDevtool', () => {
1467
1468 var elementBefore = <Foo><div /></Foo>;
1469 var treeBefore = {
1652 - isComposite: true,
1470 displayName: 'Foo',
1471 children: [{
1655 - isComposite: false,
1472 displayName: 'div',
1473 children: [],
1474 }],
@@ -1660,10 +1476,8 @@ describe('ReactComponentTreeDevtool', () => {
1476
1477 var elementAfter = <Foo><Bar /></Foo>;
1478 var treeAfter = {
1663 - isComposite: true,
1479 displayName: 'Foo',
1480 children: [{
1666 - isComposite: true,
1481 displayName: 'Bar',
1482 children: [],
1483 }],
@@ -1690,10 +1504,8 @@ describe('ReactComponentTreeDevtool', () => {
1504
1505 var elementBefore = <Foo><Bar /></Foo>;
1506 var treeBefore = {
1693 - isComposite: true,
1507 displayName: 'Foo',
1508 children: [{
1696 - isComposite: true,
1509 displayName: 'Bar',
1510 children: [],
1511 }],
@@ -1701,10 +1513,8 @@ describe('ReactComponentTreeDevtool', () => {
1513
1514 var elementAfter = <Foo><div /></Foo>;
1515 var treeAfter = {
1704 - isComposite: true,
1516 displayName: 'Foo',
1517 children: [{
1707 - isComposite: false,
1518 displayName: 'div',
1519 children: [],
1520 }],
@@ -1731,17 +1541,14 @@ describe('ReactComponentTreeDevtool', () => {
1541
1542 var elementBefore = <Foo>{null}</Foo>;
1543 var treeBefore = {
1734 - isComposite: true,
1544 displayName: 'Foo',
1545 children: [],
1546 };
1547
1548 var elementAfter = <Foo><Bar /></Foo>;
1549 var treeAfter = {
1741 - isComposite: true,
1550 displayName: 'Foo',
1551 children: [{
1744 - isComposite: true,
1552 displayName: 'Bar',
1553 children: [],
1554 }],
@@ -1768,10 +1575,8 @@ describe('ReactComponentTreeDevtool', () => {
1575
1576 var elementBefore = <Foo><Bar /></Foo>;
1577 var treeBefore = {
1771 - isComposite: true,
1578 displayName: 'Foo',
1579 children: [{
1774 - isComposite: true,
1580 displayName: 'Bar',
1581 children: [],
1582 }],
@@ -1779,7 +1584,6 @@ describe('ReactComponentTreeDevtool', () => {
1584
1585 var elementAfter = <Foo>{null}</Foo>;
1586 var treeAfter = {
1782 - isComposite: true,
1587 displayName: 'Foo',
1588 children: [],
1589 };
@@ -1806,30 +1610,23 @@ describe('ReactComponentTreeDevtool', () => {
1610 // because they are not created from real elements.
1611 var element = <article><Foo /></article>;
1612 var tree = {
1809 - isComposite: false,
1613 displayName: 'article',
1614 children: [{
1812 - isComposite: true,
1615 displayName: 'Foo',
1616 children: [{
1815 - isComposite: true,
1617 displayName: 'Bar',
1618 ownerDisplayName: 'Foo',
1619 children: [{
1819 - isComposite: false,
1620 displayName: 'div',
1621 ownerDisplayName: 'Bar',
1622 children: [{
1823 - isComposite: false,
1623 displayName: 'h1',
1624 ownerDisplayName: 'Foo',
1625 children: [{
1827 - isComposite: false,
1626 displayName: '#text',
1627 text: 'Hi.',
1628 }],
1629 }, {
1832 - isComposite: false,
1630 displayName: '#text',
1631 text: ' Mom',
1632 }],
@@ -1840,7 +1637,7 @@ describe('ReactComponentTreeDevtool', () => {
1637 assertTreeMatches([element, tree], {includeOwnerDisplayName: true});
1638 });
1639
1843 - it.only('preserves unmounted components until purge', () => {
1640 + it('preserves unmounted components until purge', () => {
1641 var node = document.createElement('div');
1642 var renderBar = true;
1643 var fooInstance;
@@ -1864,10 +1661,9 @@ describe('ReactComponentTreeDevtool', () => {
1661 expect(
1662 getTree(barInstance._debugID, {
1663 includeParentDisplayName: true,
1867 - expectedParentID: fooInstance._debugID
1664 + expectedParentID: fooInstance._debugID,
1665 })
1666 ).toEqual({
1870 - isComposite: true,
1667 displayName: 'Bar',
1668 parentDisplayName: 'Foo',
1669 children: [],
@@ -1878,10 +1674,9 @@ describe('ReactComponentTreeDevtool', () => {
1674 expect(
1675 getTree(barInstance._debugID, {
1676 includeParentDisplayName: true,
1881 - expectedParentID: fooInstance._debugID
1677 + expectedParentID: fooInstance._debugID,
1678 })
1679 ).toEqual({
1884 - isComposite: true,
1680 displayName: 'Bar',
1681 parentDisplayName: 'Foo',
1682 children: [],
@@ -1894,7 +1689,6 @@ describe('ReactComponentTreeDevtool', () => {
1689 expectedParentID: fooInstance._debugID,
1690 })
1691 ).toEqual({
1897 - isComposite: true,
1692 displayName: 'Bar',
1693 parentDisplayName: 'Foo',
1694 children: [],
@@ -1904,21 +1698,28 @@ describe('ReactComponentTreeDevtool', () => {
1698 expect(
1699 getTree(barInstance._debugID, {includeParentDisplayName: true})
1700 ).toEqual({
1907 - isComposite: false,
1701 displayName: 'Unknown',
1702 children: [],
1703 });
1704 });
1705
1913 - it('ignores top-level wrapper', () => {
1706 + it('does not report top-level wrapper as a root', () => {
1707 var node = document.createElement('div');
1708 +
1709 ReactDOM.render(<div className="a" />, node);
1916 - expect(getRegisteredDisplayNames()).toEqual(['div']);
1710 + expect(getRootDisplayNames()).toEqual(['div']);
1711 +
1712 ReactDOM.render(<div className="b" />, node);
1918 - expect(getRegisteredDisplayNames()).toEqual(['div']);
1713 + expect(getRootDisplayNames()).toEqual(['div']);
1714 +
1715 ReactDOM.unmountComponentAtNode(node);
1920 - expect(getRegisteredDisplayNames()).toEqual(['div']);
1716 + expect(getRootDisplayNames()).toEqual([]);
1717 +
1718 ReactComponentTreeDevtool.purgeUnmountedComponents();
1719 + expect(getRootDisplayNames()).toEqual([]);
1720 +
1721 + // This currently contains TopLevelWrapper until purge
1722 + // so we only check it at the very end.
1723 expect(getRegisteredDisplayNames()).toEqual([]);
1724 });
1725 });
src/renderers/dom/client/ReactMount.js
+8 -10
@@ -332,11 +332,11 @@ var ReactMount = {
332
333 ReactBrowserEventEmitter.ensureScrollValueMonitoring();
334 var componentInstance = instantiateReactComponent(nextElement);
335 +
336 if (__DEV__) {
336 - ReactInstrumentation.debugTool.onSetIsTopLevelWrapper(
337 - componentInstance._debugID,
338 - true
339 - );
337 + // Mute future events from the top level wrapper.
338 + // It is an implementation detail that devtools should not know about.
339 + componentInstance._debugID = 0;
340 }
341
342 // The initial render is synchronous but any updates that happen during
@@ -355,7 +355,10 @@ var ReactMount = {
355 instancesByReactRootID[wrapperID] = componentInstance;
356
357 if (__DEV__) {
358 - ReactInstrumentation.debugTool.onMountRootComponent(componentInstance._debugID);
358 + // The instance here is TopLevelWrapper so we report mount for its child.
359 + ReactInstrumentation.debugTool.onMountRootComponent(
360 + componentInstance._renderedComponent._debugID
361 + );
362 }
363
364 return componentInstance;
@@ -582,11 +585,6 @@ var ReactMount = {
585 container,
586 false
587 );
585 - if (__DEV__) {
586 - ReactInstrumentation.debugTool.onUnmountNativeContainer(
587 - prevComponent._nativeContainerInfo._debugID
588 - );
589 - }
588 return true;
589 },
590
src/renderers/dom/server/ReactServerRendering.js
+3 -4
@@ -38,17 +38,16 @@ function renderToStringImpl(element, makeStaticMarkup) {
38
39 return transaction.perform(function() {
40 var componentInstance = instantiateReactComponent(element);
41 - var nativeContainerInfo = ReactDOMContainerInfo();
41 var markup = ReactReconciler.mountComponent(
42 componentInstance,
43 transaction,
44 null,
46 - nativeContainerInfo,
45 + ReactDOMContainerInfo(),
46 emptyObject
47 );
48 if (__DEV__) {
50 - ReactInstrumentation.debugTool.onUnmountNativeContainer(
51 - nativeContainerInfo._debugID
49 + ReactInstrumentation.debugTool.onUnmountComponent(
50 + componentInstance._debugID
51 );
52 }
53 if (!makeStaticMarkup) {
src/renderers/dom/shared/ReactDOMComponent.js
+18 -14
@@ -36,6 +36,7 @@ var ReactInstrumentation = require('ReactInstrumentation');
36 var ReactMultiChild = require('ReactMultiChild');
37 var ReactPerf = require('ReactPerf');
38
39 +var emptyFunction = require('emptyFunction');
40 var escapeTextContentForBrowser = require('escapeTextContentForBrowser');
41 var invariant = require('invariant');
42 var isEventSupported = require('isEventSupported');
@@ -246,6 +247,20 @@ function optionPostMount() {
247 ReactDOMOption.postMountWrapper(inst);
248 }
249
250 +var setContentChildForInstrumentation = emptyFunction;
251 +if (__DEV__) {
252 + setContentChildForInstrumentation = function(contentToUse) {
253 + var debugID = this._debugID;
254 + var contentDebugID = debugID + '#text';
255 + this._contentDebugID = contentDebugID;
256 + ReactInstrumentation.debugTool.onSetIsEmpty(contentDebugID, false);
257 + ReactInstrumentation.debugTool.onSetDisplayName(contentDebugID, '#text');
258 + ReactInstrumentation.debugTool.onSetText(contentDebugID, '' + contentToUse);
259 + ReactInstrumentation.debugTool.onMountComponent(contentDebugID);
260 + ReactInstrumentation.debugTool.onSetChildren(debugID, [contentDebugID]);
261 + };
262 +}
263 +
264 // There are so many media events, it makes sense to just
265 // maintain a list rather than create a `trapBubbledEvent` for each
266 var mediaEvents = {
@@ -720,11 +735,7 @@ ReactDOMComponent.Mixin = {
735 // TODO: Validate that text is allowed as a child of this node
736 ret = escapeTextContentForBrowser(contentToUse);
737 if (__DEV__) {
723 - this._contentDebugID = this._debugID + '#text';
724 - ReactInstrumentation.debugTool.onSetIsComposite(this._contentDebugID, false);
725 - ReactInstrumentation.debugTool.onSetDisplayName(this._contentDebugID, '#text');
726 - ReactInstrumentation.debugTool.onSetText(this._contentDebugID, '' + contentToUse);
727 - ReactInstrumentation.debugTool.onSetChildren(this._debugID, [this._contentDebugID]);
738 + setContentChildForInstrumentation.call(this, contentToUse);
739 }
740 } else if (childrenToUse != null) {
741 var mountImages = this.mountChildren(
@@ -766,11 +777,7 @@ ReactDOMComponent.Mixin = {
777 if (contentToUse != null) {
778 // TODO: Validate that text is allowed as a child of this node
779 if (__DEV__) {
769 - this._contentDebugID = this._debugID + '#text';
770 - ReactInstrumentation.debugTool.onSetIsComposite(this._contentDebugID, false);
771 - ReactInstrumentation.debugTool.onSetDisplayName(this._contentDebugID, '#text');
772 - ReactInstrumentation.debugTool.onSetText(this._contentDebugID, '' + contentToUse);
773 - ReactInstrumentation.debugTool.onSetChildren(this._debugID, [this._contentDebugID]);
780 + setContentChildForInstrumentation.call(this, contentToUse);
781 }
782 DOMLazyTree.queueText(lazyTree, contentToUse);
783 } else if (childrenToUse != null) {
@@ -1029,10 +1036,7 @@ ReactDOMComponent.Mixin = {
1036 this.updateTextContent('' + nextContent);
1037 if (__DEV__) {
1038 this._contentDebugID = this._debugID + '#text';
1032 - ReactInstrumentation.debugTool.onSetIsComposite(this._contentDebugID, false);
1033 - ReactInstrumentation.debugTool.onSetDisplayName(this._contentDebugID, '#text');
1034 - ReactInstrumentation.debugTool.onSetText(this._contentDebugID, '' + nextContent);
1035 - ReactInstrumentation.debugTool.onSetChildren(this._debugID, [this._contentDebugID]);
1039 + setContentChildForInstrumentation.call(this, nextContent);
1040 }
1041 }
1042 } else if (nextHtml != null) {
src/renderers/dom/shared/ReactDOMContainerInfo.js
-2
@@ -14,7 +14,6 @@
14 var validateDOMNesting = require('validateDOMNesting');
15
16 var DOC_NODE_TYPE = 9;
17 -var nextContainerDebugID = 1;
17
18 function ReactDOMContainerInfo(topLevelWrapper, node) {
19 var info = {
@@ -28,7 +27,6 @@ function ReactDOMContainerInfo(topLevelWrapper, node) {
27 _namespaceURI: node ? node.namespaceURI : null,
28 };
29 if (__DEV__) {
31 - info._debugID = nextContainerDebugID++;
30 info._ancestorInfo = node ?
31 validateDOMNesting.updatedAncestorInfo(null, info._tag, null) : null;
32 }
src/renderers/shared/reconciler/ReactCompositeComponent.js
+15 -16
@@ -377,14 +377,6 @@ var ReactCompositeComponentMixin = {
377 this._renderedComponent = this._instantiateReactComponent(
378 renderedElement
379 );
380 - if (__DEV__) {
381 - ReactInstrumentation.debugTool.onSetChildren(
382 - this._debugID,
383 - this._renderedNodeType === ReactNodeTypes.EMPTY ?
384 - [] :
385 - [this._renderedComponent._debugID]
386 - );
387 - }
380
381 var markup = ReactReconciler.mountComponent(
382 this._renderedComponent,
@@ -394,6 +386,13 @@ var ReactCompositeComponentMixin = {
386 this._processChildContext(context)
387 );
388
389 + if (__DEV__) {
390 + ReactInstrumentation.debugTool.onSetChildren(
391 + this._debugID,
392 + [this._renderedComponent._debugID]
393 + );
394 + }
395 +
396 return markup;
397 },
398
@@ -861,14 +860,6 @@ var ReactCompositeComponentMixin = {
860 this._renderedComponent = this._instantiateReactComponent(
861 nextRenderedElement
862 );
864 - if (__DEV__) {
865 - ReactInstrumentation.debugTool.onSetChildren(
866 - this._debugID,
867 - this._renderedNodeType === ReactNodeTypes.EMPTY ?
868 - [] :
869 - [this._renderedComponent._debugID]
870 - );
871 - }
863
864 var nextMarkup = ReactReconciler.mountComponent(
865 this._renderedComponent,
@@ -877,6 +868,14 @@ var ReactCompositeComponentMixin = {
868 this._nativeContainerInfo,
869 this._processChildContext(context)
870 );
871 +
872 + if (__DEV__) {
873 + ReactInstrumentation.debugTool.onSetChildren(
874 + this._debugID,
875 + [this._renderedComponent._debugID]
876 + );
877 + }
878 +
879 this._replaceNodeWithMarkup(oldNativeNode, nextMarkup);
880 }
881 },
src/renderers/shared/reconciler/ReactMultiChild.js
+13 -12
@@ -19,6 +19,7 @@ var ReactCurrentOwner = require('ReactCurrentOwner');
19 var ReactReconciler = require('ReactReconciler');
20 var ReactChildReconciler = require('ReactChildReconciler');
21
22 +var emptyFunction = require('emptyFunction');
23 var flattenChildren = require('flattenChildren');
24 var invariant = require('invariant');
25
@@ -138,6 +139,16 @@ function processQueue(inst, updateQueue) {
139 );
140 }
141
142 +var setChildrenForInstrumentation = emptyFunction;
143 +if (__DEV__) {
144 + setChildrenForInstrumentation = function(children) {
145 + ReactInstrumentation.debugTool.onSetChildren(
146 + this._debugID,
147 + children ? Object.keys(children).map(key => children[key]._debugID) : []
148 + );
149 + };
150 +}
151 +
152 /**
153 * ReactMultiChild are capable of reconciling multiple children.
154 *
@@ -234,12 +245,7 @@ var ReactMultiChild = {
245 }
246
247 if (__DEV__) {
237 - ReactInstrumentation.debugTool.onSetChildren(
238 - this._debugID,
239 - children ?
240 - Object.keys(children).map(key => children[key]._debugID) :
241 - []
242 - );
248 + setChildrenForInstrumentation.call(this, children);
249 }
250
251 return mountImages;
@@ -371,12 +377,7 @@ var ReactMultiChild = {
377 this._renderedChildren = nextChildren;
378
379 if (__DEV__) {
374 - ReactInstrumentation.debugTool.onSetChildren(
375 - this._debugID,
376 - nextChildren ?
377 - Object.keys(nextChildren).map(key => nextChildren[key]._debugID) :
378 - []
379 - );
380 + setChildrenForInstrumentation.call(this, nextChildren);
381 }
382 },
383
src/renderers/shared/reconciler/ReactReconciler.js
+1 -4
@@ -53,10 +53,7 @@ var ReactReconciler = {
53 transaction.getReactMountReady().enqueue(attachRefs, internalInstance);
54 }
55 if (__DEV__) {
56 - ReactInstrumentation.debugTool.onMountComponent(
57 - internalInstance._debugID,
58 - nativeContainerInfo._debugID
59 - );
56 + ReactInstrumentation.debugTool.onMountComponent(internalInstance._debugID);
57 }
58 return markup;
59 },
src/renderers/shared/reconciler/instantiateReactComponent.js
+9 -5
@@ -86,8 +86,10 @@ function instantiateReactComponent(node) {
86
87 var isNative = false;
88 var isComposite = false;
89 + var isEmpty = false;
90
91 if (node === null || node === false) {
92 + isEmpty = true;
93 instance = ReactEmptyComponent.create(instantiateReactComponent);
94 } else if (typeof node === 'object') {
95 var element = node;
@@ -146,16 +148,18 @@ function instantiateReactComponent(node) {
148 }
149
150 if (__DEV__) {
149 - instance._debugID = nextDebugID++;
151 + var debugID = nextDebugID++;
152 + instance._debugID = debugID;
153 +
154 var displayName = getDisplayName(instance);
151 - ReactInstrumentation.debugTool.onSetIsComposite(instance._debugID, isComposite);
152 - ReactInstrumentation.debugTool.onSetDisplayName(instance._debugID, displayName);
155 + ReactInstrumentation.debugTool.onSetDisplayName(debugID, displayName);
156 + ReactInstrumentation.debugTool.onSetIsEmpty(debugID, isEmpty);
157 if (isNative || isComposite) {
154 - ReactInstrumentation.debugTool.onSetChildren(instance._debugID, []);
158 + ReactInstrumentation.debugTool.onSetChildren(debugID, []);
159 }
160 var owner = node && node._owner;
161 if (owner) {
158 - ReactInstrumentation.debugTool.onSetOwner(instance._debugID, owner._debugID);
162 + ReactInstrumentation.debugTool.onSetOwner(debugID, owner._debugID);
163 }
164 }
165
src/test/ReactTestUtils.js
+1 -1
@@ -466,7 +466,7 @@ ReactShallowRenderer.prototype._render = function(element, transaction, context)
466 this._instance.receiveComponent(element, transaction, context);
467 } else {
468 var instance = new ShallowComponentWrapper(element);
469 - instance.mountComponent(transaction, null, {}, context);
469 + instance.mountComponent(transaction, null, null, context);
470 this._instance = instance;
471 }
472 };