Stop exposing ReactComponentTreeDevtool internal tree directly
Dan Abramov committed
Apr 22, 2016 at 15:45 UTC
df3c85886e31da8adb5ee670e523edb1230cd299
2 files changed
+65
-58
src/isomorphic/devtools/ReactComponentTreeDevtool.js
+32
-11
@@ -23,7 +23,10 @@ function updateTree(id, update) {
23
return;
24
}
25
if (!tree[id]) {
26
- tree[id] = {};
26
+ tree[id] = {
27
+ parentID: null,
28
+ childIDs: [],
29
+ };
30
}
31
update(tree[id]);
32
}
@@ -41,10 +44,7 @@ function purgeTree(id) {
44
allChildIDsByContainerID[containerID] = allChildIDsByContainerID[containerID]
45
.filter(childID => childID !== id);
46
}
44
-
45
- if (childIDs) {
46
- childIDs.forEach(purgeTree);
47
- }
47
+ childIDs.forEach(purgeTree);
48
}
49
50
var ReactComponentTreeDevtool = {
@@ -65,7 +65,7 @@ var ReactComponentTreeDevtool = {
65
66
onSetChildren(id, nextChildIDs) {
67
updateTree(id, item => {
68
- var prevChildIDs = item.childIDs || [];
68
+ var prevChildIDs = item.childIDs;
69
item.childIDs = nextChildIDs;
70
71
prevChildIDs.forEach(prevChildID => {
@@ -136,11 +136,32 @@ var ReactComponentTreeDevtool = {
136
unmountedContainerIDs = [];
137
},
138
139
- getTree() {
140
- return Object.keys(tree).reduce((result, key) => {
141
- result[key] = {...tree[key]};
142
- return result;
143
- }, {});
139
+ isComposite(id) {
140
+ return tree[id].isComposite;
141
+ },
142
+
143
+ getChildIDs(id) {
144
+ return tree[id].childIDs;
145
+ },
146
+
147
+ getDisplayName(id) {
148
+ return tree[id].displayName;
149
+ },
150
+
151
+ getOwnerID(id) {
152
+ return tree[id].ownerID;
153
+ },
154
+
155
+ getParentID(id) {
156
+ return tree[id].parentID;
157
+ },
158
+
159
+ getText(id) {
160
+ return tree[id].text;
161
+ },
162
+
163
+ getRegisteredIDs() {
164
+ return Object.keys(tree);
165
},
166
};
167
src/isomorphic/devtools/__tests__/ReactComponentTreeDevtool-test.js
+33
-47
@@ -36,38 +36,38 @@ describe('ReactComponentTreeDevtool', () => {
36
ReactDebugTool.removeDevtool(ReactComponentTreeDevtool);
37
});
38
39
- function explodeTree(
40
- tree,
41
- rootID,
42
- includeOwner = false,
43
- expectedParentID = null
44
- ) {
45
- var item = tree[rootID];
39
+ function getRegisteredDisplayNames() {
40
+ return ReactComponentTreeDevtool.getRegisteredIDs()
41
+ .map(ReactComponentTreeDevtool.getDisplayName);
42
+ }
43
+
44
+ function getTree(rootID, includeOwner = false, expectedParentID = null) {
45
var result = {
47
- isComposite: item.isComposite,
48
- displayName: item.displayName,
46
+ isComposite: ReactComponentTreeDevtool.isComposite(rootID),
47
+ displayName: ReactComponentTreeDevtool.getDisplayName(rootID),
48
};
49
50
+ var parentID = ReactComponentTreeDevtool.getParentID(rootID);
51
if (expectedParentID) {
52
- expect(item.parentID).toBe(expectedParentID);
52
+ expect(parentID).toBe(expectedParentID);
53
}
54
55
- if (item.childIDs) {
56
- result.children = item.childIDs.map(childID =>
57
- explodeTree(tree, childID, includeOwner, rootID)
55
+ var childIDs = ReactComponentTreeDevtool.getChildIDs(rootID);
56
+ var text = ReactComponentTreeDevtool.getText(rootID);
57
+ if (text != null) {
58
+ result.text = text;
59
+ } else {
60
+ result.children = childIDs.map(childID =>
61
+ getTree(childID, includeOwner, rootID)
62
);
63
}
60
- if (item.text != null) {
61
- result.text = item.text;
62
- }
63
- if (includeOwner && item.ownerID) {
64
- result.ownerDisplayName = tree[item.ownerID].displayName;
64
+
65
+ var ownerID = ReactComponentTreeDevtool.getOwnerID(rootID);
66
+ if (includeOwner && ownerID) {
67
+ result.ownerDisplayName = ReactComponentTreeDevtool.getDisplayName(ownerID);
68
}
66
- return result;
67
- }
69
69
- function getRegisteredDisplayNames(tree) {
70
- return Object.keys(tree).map(id => tree[id].displayName);
70
+ return result;
71
}
72
73
function assertTreeMatches(pairs, includeOwner) {
@@ -89,29 +89,21 @@ describe('ReactComponentTreeDevtool', () => {
89
pairs.forEach(([element, expectedTree]) => {
90
currentElement = element;
91
ReactDOM.render(<Wrapper />, node);
92
- expect(explodeTree(
93
- ReactComponentTreeDevtool.getTree(),
94
- rootInstance._renderedComponent._debugID,
95
- includeOwner
96
- )).toEqual(expectedTree);
92
+ expect(
93
+ getTree(rootInstance._renderedComponent._debugID, includeOwner)
94
+ ).toEqual(expectedTree);
95
});
96
ReactDOM.unmountComponentAtNode(node);
99
- expect(
100
- getRegisteredDisplayNames(ReactComponentTreeDevtool.getTree())
101
- ).toEqual([]);
97
+ expect(getRegisteredDisplayNames()).toEqual([]);
98
99
pairs.forEach(([element, expectedTree]) => {
100
currentElement = element;
101
ReactDOMServer.renderToString(<Wrapper />);
106
- expect(explodeTree(
107
- ReactComponentTreeDevtool.getTree(),
108
- rootInstance._renderedComponent._debugID,
109
- includeOwner
110
- )).toEqual(expectedTree);
111
- ReactComponentTreeDevtool.purgeUnmountedContainers();
102
expect(
113
- getRegisteredDisplayNames(ReactComponentTreeDevtool.getTree())
114
- ).toEqual([]);
103
+ getTree(rootInstance._renderedComponent._debugID, includeOwner)
104
+ ).toEqual(expectedTree);
105
+ ReactComponentTreeDevtool.purgeUnmountedContainers();
106
+ expect(getRegisteredDisplayNames()).toEqual([]);
107
});
108
}
109
@@ -1835,16 +1827,10 @@ describe('ReactComponentTreeDevtool', () => {
1827
it('ignores top-level wrapper', () => {
1828
var node = document.createElement('div');
1829
ReactDOM.render(<div className="a" />, node);
1838
- expect(
1839
- getRegisteredDisplayNames(ReactComponentTreeDevtool.getTree())
1840
- ).toEqual(['div']);
1830
+ expect(getRegisteredDisplayNames()).toEqual(['div']);
1831
ReactDOM.render(<div className="b" />, node);
1842
- expect(
1843
- getRegisteredDisplayNames(ReactComponentTreeDevtool.getTree())
1844
- ).toEqual(['div']);
1832
+ expect(getRegisteredDisplayNames()).toEqual(['div']);
1833
ReactDOM.unmountComponentAtNode(node);
1846
- expect(
1847
- getRegisteredDisplayNames(ReactComponentTreeDevtool.getTree())
1848
- ).toEqual([]);
1834
+ expect(getRegisteredDisplayNames()).toEqual([]);
1835
});
1836
});