Default to showing host nodes for legacy renderer
Dan Abramov committed
May 31, 2019 at 15:38 UTC
6fd83acb1dd29c0a5102204b48369e5ec7879cde
5 files changed
+192
-112
src/__tests__/legacy/__snapshots__/storeLegacy-v15-test.js.snap
+163
-93
@@ -3,46 +3,68 @@
3
exports[`Store (legacy) collapseNodesByDefault:false should filter DOM nodes from the store tree: 1: mount 1`] = `
4
[root]
5
▾ <Grandparent>
6
- ▾ <Parent>
7
- <Child>
8
- ▾ <Parent>
9
- <Child>
6
+ ▾ <div>
7
+ ▾ <div>
8
+ ▾ <Parent>
9
+ ▾ <div>
10
+ ▾ <Child>
11
+ <div>
12
+ ▾ <Parent>
13
+ ▾ <div>
14
+ ▾ <Child>
15
+ <div>
16
`;
17
18
exports[`Store (legacy) collapseNodesByDefault:false should support collapsing parts of the tree: 1: mount 1`] = `
19
[root]
20
▾ <Grandparent>
15
- ▾ <Parent>
16
- <Child key="0">
17
- <Child key="1">
18
- ▾ <Parent>
19
- <Child key="0">
20
- <Child key="1">
21
+ ▾ <div>
22
+ ▾ <Parent>
23
+ ▾ <div>
24
+ ▾ <Child key="0">
25
+ <div>
26
+ ▾ <Child key="1">
27
+ <div>
28
+ ▾ <Parent>
29
+ ▾ <div>
30
+ ▾ <Child key="0">
31
+ <div>
32
+ ▾ <Child key="1">
33
+ <div>
34
`;
35
36
exports[`Store (legacy) collapseNodesByDefault:false should support collapsing parts of the tree: 2: collapse first Parent 1`] = `
37
[root]
38
▾ <Grandparent>
26
- ▸ <Parent>
27
- ▾ <Parent>
28
- <Child key="0">
29
- <Child key="1">
39
+ ▾ <div>
40
+ ▸ <Parent>
41
+ ▾ <Parent>
42
+ ▾ <div>
43
+ ▾ <Child key="0">
44
+ <div>
45
+ ▾ <Child key="1">
46
+ <div>
47
`;
48
49
exports[`Store (legacy) collapseNodesByDefault:false should support collapsing parts of the tree: 3: collapse second Parent 1`] = `
50
[root]
51
▾ <Grandparent>
35
- ▸ <Parent>
36
- ▸ <Parent>
52
+ ▾ <div>
53
+ ▸ <Parent>
54
+ ▸ <Parent>
55
`;
56
57
exports[`Store (legacy) collapseNodesByDefault:false should support collapsing parts of the tree: 4: expand first Parent 1`] = `
58
[root]
59
▾ <Grandparent>
42
- ▾ <Parent>
43
- <Child key="0">
44
- <Child key="1">
45
- ▸ <Parent>
60
+ ▾ <div>
61
+ ▾ <Parent>
62
+ ▾ <div>
63
+ ▾ <Child key="0">
64
+ <div>
65
+ ▾ <Child key="1">
66
+ <div>
67
+ ▸ <Parent>
68
`;
69
70
exports[`Store (legacy) collapseNodesByDefault:false should support collapsing parts of the tree: 5: collapse Grandparent 1`] = `
@@ -53,43 +75,66 @@ exports[`Store (legacy) collapseNodesByDefault:false should support collapsing p
75
exports[`Store (legacy) collapseNodesByDefault:false should support collapsing parts of the tree: 6: expand Grandparent 1`] = `
76
[root]
77
▾ <Grandparent>
56
- ▾ <Parent>
57
- <Child key="0">
58
- <Child key="1">
59
- ▸ <Parent>
78
+ ▾ <div>
79
+ ▾ <Parent>
80
+ ▾ <div>
81
+ ▾ <Child key="0">
82
+ <div>
83
+ ▾ <Child key="1">
84
+ <div>
85
+ ▸ <Parent>
86
`;
87
88
exports[`Store (legacy) collapseNodesByDefault:false should support mount and update operations for multiple roots: 1: mount 1`] = `
89
[root]
90
▾ <Parent key="A">
65
- <Child key="0">
66
- <Child key="1">
67
- <Child key="2">
91
+ ▾ <div>
92
+ ▾ <Child key="0">
93
+ <div>
94
+ ▾ <Child key="1">
95
+ <div>
96
+ ▾ <Child key="2">
97
+ <div>
98
[root]
99
▾ <Parent key="B">
70
- <Child key="0">
71
- <Child key="1">
100
+ ▾ <div>
101
+ ▾ <Child key="0">
102
+ <div>
103
+ ▾ <Child key="1">
104
+ <div>
105
`;
106
107
exports[`Store (legacy) collapseNodesByDefault:false should support mount and update operations for multiple roots: 2: update 1`] = `
108
[root]
109
▾ <Parent key="A">
77
- <Child key="0">
78
- <Child key="1">
79
- <Child key="2">
80
- <Child key="3">
110
+ ▾ <div>
111
+ ▾ <Child key="0">
112
+ <div>
113
+ ▾ <Child key="1">
114
+ <div>
115
+ ▾ <Child key="2">
116
+ <div>
117
+ ▾ <Child key="3">
118
+ <div>
119
[root]
120
▾ <Parent key="B">
83
- <Child key="0">
121
+ ▾ <div>
122
+ ▾ <Child key="0">
123
+ <div>
124
`;
125
126
exports[`Store (legacy) collapseNodesByDefault:false should support mount and update operations for multiple roots: 3: unmount B 1`] = `
127
[root]
128
▾ <Parent key="A">
89
- <Child key="0">
90
- <Child key="1">
91
- <Child key="2">
92
- <Child key="3">
129
+ ▾ <div>
130
+ ▾ <Child key="0">
131
+ <div>
132
+ ▾ <Child key="1">
133
+ <div>
134
+ ▾ <Child key="2">
135
+ <div>
136
+ ▾ <Child key="3">
137
+ <div>
138
`;
139
140
exports[`Store (legacy) collapseNodesByDefault:false should support mount and update operations for multiple roots: 4: unmount A 1`] = ``;
@@ -97,49 +142,66 @@ exports[`Store (legacy) collapseNodesByDefault:false should support mount and up
142
exports[`Store (legacy) collapseNodesByDefault:false should support mount and update operations: 1: mount 1`] = `
143
[root]
144
▾ <Grandparent>
100
- ▾ <Parent>
101
- <Child key="0">
102
- <Child key="1">
103
- <Child key="2">
104
- <Child key="3">
105
- ▾ <Parent>
106
- <Child key="0">
107
- <Child key="1">
108
- <Child key="2">
109
- <Child key="3">
145
+ ▾ <div>
146
+ ▾ <Parent>
147
+ ▾ <div>
148
+ ▾ <Child key="0">
149
+ <div>
150
+ ▾ <Child key="1">
151
+ <div>
152
+ ▾ <Child key="2">
153
+ <div>
154
+ ▾ <Child key="3">
155
+ <div>
156
+ ▾ <Parent>
157
+ ▾ <div>
158
+ ▾ <Child key="0">
159
+ <div>
160
+ ▾ <Child key="1">
161
+ <div>
162
+ ▾ <Child key="2">
163
+ <div>
164
+ ▾ <Child key="3">
165
+ <div>
166
`;
167
168
exports[`Store (legacy) collapseNodesByDefault:false should support mount and update operations: 2: update 1`] = `
169
[root]
170
▾ <Grandparent>
115
- ▾ <Parent>
116
- <Child key="0">
117
- <Child key="1">
118
- ▾ <Parent>
119
- <Child key="0">
120
- <Child key="1">
171
+ ▾ <div>
172
+ ▾ <Parent>
173
+ ▾ <div>
174
+ ▾ <Child key="0">
175
+ <div>
176
+ ▾ <Child key="1">
177
+ <div>
178
+ ▾ <Parent>
179
+ ▾ <div>
180
+ ▾ <Child key="0">
181
+ <div>
182
+ ▾ <Child key="1">
183
+ <div>
184
`;
185
186
exports[`Store (legacy) collapseNodesByDefault:false should support mount and update operations: 3: unmount 1`] = ``;
187
125
-exports[`Store (legacy) collapseNodesByDefault:true should filter DOM nodes from the store tree: 1: mount 1`] = `
188
+exports[`Store (legacy) collapseNodesByDefault:true should not filter DOM nodes from the store tree: 1: mount 1`] = `
189
[root]
190
▸ <Grandparent>
191
`;
192
130
-exports[`Store (legacy) collapseNodesByDefault:true should filter DOM nodes from the store tree: 2: expand Grandparent 1`] = `
193
+exports[`Store (legacy) collapseNodesByDefault:true should not filter DOM nodes from the store tree: 2: expand Grandparent 1`] = `
194
[root]
195
▾ <Grandparent>
133
- ▸ <Parent>
134
- ▸ <Parent>
196
+ ▸ <div>
197
`;
198
137
-exports[`Store (legacy) collapseNodesByDefault:true should filter DOM nodes from the store tree: 3: expand Parent 1`] = `
199
+exports[`Store (legacy) collapseNodesByDefault:true should not filter DOM nodes from the store tree: 3: expand div 1`] = `
200
[root]
201
▾ <Grandparent>
140
- ▾ <Parent>
141
- <Child>
142
- ▸ <Parent>
202
+ ▾ <div>
203
+ ▸ <div>
204
+ ▸ <Parent>
205
`;
206
207
exports[`Store (legacy) collapseNodesByDefault:true should support expanding deep parts of the tree: 1: mount 1`] = `
@@ -153,7 +215,8 @@ exports[`Store (legacy) collapseNodesByDefault:true should support expanding dee
215
▾ <Nested>
216
▾ <Nested>
217
▾ <Nested>
156
- <Nested>
218
+ ▾ <Nested>
219
+ <div>
220
`;
221
222
exports[`Store (legacy) collapseNodesByDefault:true should support expanding deep parts of the tree: 3: collapse root 1`] = `
@@ -167,7 +230,8 @@ exports[`Store (legacy) collapseNodesByDefault:true should support expanding dee
230
▾ <Nested>
231
▾ <Nested>
232
▾ <Nested>
170
- <Nested>
233
+ ▾ <Nested>
234
+ <div>
235
`;
236
237
exports[`Store (legacy) collapseNodesByDefault:true should support expanding deep parts of the tree: 5: collapse middle node 1`] = `
@@ -182,7 +246,8 @@ exports[`Store (legacy) collapseNodesByDefault:true should support expanding dee
246
▾ <Nested>
247
▾ <Nested>
248
▾ <Nested>
185
- <Nested>
249
+ ▾ <Nested>
250
+ <div>
251
`;
252
253
exports[`Store (legacy) collapseNodesByDefault:true should support expanding parts of the tree: 1: mount 1`] = `
@@ -193,47 +258,54 @@ exports[`Store (legacy) collapseNodesByDefault:true should support expanding par
258
exports[`Store (legacy) collapseNodesByDefault:true should support expanding parts of the tree: 2: expand Grandparent 1`] = `
259
[root]
260
▾ <Grandparent>
196
- ▸ <Parent>
197
- ▸ <Parent>
261
+ ▸ <div>
262
`;
263
200
-exports[`Store (legacy) collapseNodesByDefault:true should support expanding parts of the tree: 3: expand first Parent 1`] = `
264
+exports[`Store (legacy) collapseNodesByDefault:true should support expanding parts of the tree: 3: expand parent div 1`] = `
265
[root]
266
▾ <Grandparent>
203
- ▾ <Parent>
204
- <Child key="0">
205
- <Child key="1">
206
- ▸ <Parent>
267
+ ▾ <div>
268
+ ▸ <Parent>
269
+ ▸ <Parent>
270
`;
271
209
-exports[`Store (legacy) collapseNodesByDefault:true should support expanding parts of the tree: 4: expand second Parent 1`] = `
272
+exports[`Store (legacy) collapseNodesByDefault:true should support expanding parts of the tree: 4: expand first Parent 1`] = `
273
[root]
274
▾ <Grandparent>
212
- ▾ <Parent>
213
- <Child key="0">
214
- <Child key="1">
215
- ▾ <Parent>
216
- <Child key="0">
217
- <Child key="1">
275
+ ▾ <div>
276
+ ▾ <Parent>
277
+ ▸ <div>
278
+ ▸ <Parent>
279
`;
280
220
-exports[`Store (legacy) collapseNodesByDefault:true should support expanding parts of the tree: 5: collapse first Parent 1`] = `
281
+exports[`Store (legacy) collapseNodesByDefault:true should support expanding parts of the tree: 5: expand second Parent 1`] = `
282
[root]
283
▾ <Grandparent>
223
- ▸ <Parent>
224
- ▾ <Parent>
225
- <Child key="0">
226
- <Child key="1">
284
+ ▾ <div>
285
+ ▾ <Parent>
286
+ ▸ <div>
287
+ ▾ <Parent>
288
+ ▸ <div>
289
`;
290
229
-exports[`Store (legacy) collapseNodesByDefault:true should support expanding parts of the tree: 6: collapse second Parent 1`] = `
291
+exports[`Store (legacy) collapseNodesByDefault:true should support expanding parts of the tree: 6: collapse first Parent 1`] = `
292
[root]
293
▾ <Grandparent>
232
- ▸ <Parent>
233
- ▸ <Parent>
294
+ ▾ <div>
295
+ ▸ <Parent>
296
+ ▾ <Parent>
297
+ ▸ <div>
298
`;
299
236
-exports[`Store (legacy) collapseNodesByDefault:true should support expanding parts of the tree: 7: collapse Grandparent 1`] = `
300
+exports[`Store (legacy) collapseNodesByDefault:true should support expanding parts of the tree: 7: collapse second Parent 1`] = `
301
+[root]
302
+ ▾ <Grandparent>
303
+ ▾ <div>
304
+ ▸ <Parent>
305
+ ▸ <Parent>
306
+`;
307
+
308
+exports[`Store (legacy) collapseNodesByDefault:true should support expanding parts of the tree: 8: collapse Grandparent 1`] = `
309
[root]
310
▸ <Grandparent>
311
`;
@@ -261,19 +333,17 @@ exports[`Store (legacy) collapseNodesByDefault:true should support mount and upd
333
334
exports[`Store (legacy) collapseNodesByDefault:true should support mount and update operations: 1: mount 1`] = `
335
[root]
264
- ▸ <Parent>
265
- ▸ <Parent>
336
+ ▸ <div>
337
`;
338
339
exports[`Store (legacy) collapseNodesByDefault:true should support mount and update operations: 2: update 1`] = `
340
[root]
270
- ▸ <Parent>
271
- ▸ <Parent>
341
+ ▸ <div>
342
`;
343
344
exports[`Store (legacy) collapseNodesByDefault:true should support mount and update operations: 3: unmount 1`] = ``;
345
346
exports[`Store (legacy) should not allow a root node to be collapsed: 1: mount 1`] = `
347
[root]
278
- <Component>
348
+ ▸ <Component>
349
`;
src/__tests__/legacy/storeLegacy-v15-test.js
+15
-11
@@ -157,8 +157,8 @@ describe('Store (legacy)', () => {
157
expect(store).toMatchSnapshot('1: mount');
158
159
const grandparentID = store.getElementIDAtIndex(0);
160
- const parentOneID = store.getElementIDAtIndex(1);
161
- const parentTwoID = store.getElementIDAtIndex(4);
160
+ const parentOneID = store.getElementIDAtIndex(2);
161
+ const parentTwoID = store.getElementIDAtIndex(8);
162
163
act(() => store.toggleIsCollapsed(parentOneID, true));
164
expect(store).toMatchSnapshot('2: collapse first Parent');
@@ -318,7 +318,7 @@ describe('Store (legacy)', () => {
318
expect(store).toMatchSnapshot('4: unmount A');
319
});
320
321
- it('should filter DOM nodes from the store tree', () => {
321
+ it('should not filter DOM nodes from the store tree', () => {
322
const Grandparent = () => (
323
<div>
324
<div>
@@ -346,7 +346,7 @@ describe('Store (legacy)', () => {
346
expect(store).toMatchSnapshot('2: expand Grandparent');
347
348
act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(1), false));
349
- expect(store).toMatchSnapshot('3: expand Parent');
349
+ expect(store).toMatchSnapshot('3: expand div');
350
});
351
352
it('should support expanding parts of the tree', () => {
@@ -378,23 +378,27 @@ describe('Store (legacy)', () => {
378
act(() => store.toggleIsCollapsed(grandparentID, false));
379
expect(store).toMatchSnapshot('2: expand Grandparent');
380
381
- const parentOneID = store.getElementIDAtIndex(1);
382
- const parentTwoID = store.getElementIDAtIndex(2);
381
+ const parentDivID = store.getElementIDAtIndex(1);
382
+ act(() => store.toggleIsCollapsed(parentDivID, false));
383
+ expect(store).toMatchSnapshot('3: expand parent div');
384
+
385
+ const parentOneID = store.getElementIDAtIndex(2);
386
+ const parentTwoID = store.getElementIDAtIndex(3);
387
388
act(() => store.toggleIsCollapsed(parentOneID, false));
385
- expect(store).toMatchSnapshot('3: expand first Parent');
389
+ expect(store).toMatchSnapshot('4: expand first Parent');
390
391
act(() => store.toggleIsCollapsed(parentTwoID, false));
388
- expect(store).toMatchSnapshot('4: expand second Parent');
392
+ expect(store).toMatchSnapshot('5: expand second Parent');
393
394
act(() => store.toggleIsCollapsed(parentOneID, true));
391
- expect(store).toMatchSnapshot('5: collapse first Parent');
395
+ expect(store).toMatchSnapshot('6: collapse first Parent');
396
397
act(() => store.toggleIsCollapsed(parentTwoID, true));
394
- expect(store).toMatchSnapshot('6: collapse second Parent');
398
+ expect(store).toMatchSnapshot('7: collapse second Parent');
399
400
act(() => store.toggleIsCollapsed(grandparentID, true));
397
- expect(store).toMatchSnapshot('7: collapse Grandparent');
401
+ expect(store).toMatchSnapshot('8: collapse Grandparent');
402
});
403
404
it('should support expanding deep parts of the tree', () => {
src/backend/legacy/getData.js
+7
-2
@@ -1,6 +1,10 @@
1
// @flow
2
3
-import { ElementTypeClass, ElementTypeOtherOrUnknown } from 'src/types';
3
+import {
4
+ ElementTypeClass,
5
+ ElementTypeHostComponent,
6
+ ElementTypeOtherOrUnknown,
7
+} from 'src/types';
8
import { getDisplayName } from 'src/utils';
9
10
import type { InternalInstance } from './renderer';
@@ -19,7 +23,8 @@ export default function getData(internalInstance: InternalInstance): FiberData {
23
24
const elementType = internalInstance._currentElement.type;
25
if (typeof elementType === 'string') {
22
- // ...
26
+ type = ElementTypeHostComponent;
27
+ displayName = elementType;
28
} else if (typeof elementType === 'function') {
29
// TODO Can we differentiate between function and class component types?
30
// Dan said _compositeType tells you PureClass, ImpureClass, StatelessFunctional but it was only added in v14
src/backend/legacy/getElementType.js
+7
-1
@@ -1,5 +1,9 @@
1
// @flow
2
-import { ElementTypeClass, ElementTypeOtherOrUnknown } from 'src/types';
2
+import {
3
+ ElementTypeClass,
4
+ ElementTypeHostComponent,
5
+ ElementTypeOtherOrUnknown,
6
+} from 'src/types';
7
8
import type { InternalInstance } from './renderer';
9
import type { ElementType } from 'src/types';
@@ -12,6 +16,8 @@ export default function getElementType(
16
const elementType = internalInstance._currentElement.type;
17
if (typeof elementType === 'function') {
18
return ElementTypeClass;
19
+ } else if (typeof elementType === 'string') {
20
+ return ElementTypeHostComponent;
21
}
22
}
23
src/backend/legacy/renderer.js
-5
@@ -67,10 +67,6 @@ export function attach(
67
return getChildren(internalInstance).map(getID);
68
}
69
70
- //function getParentID(internalInstance: InternalInstance): number {
71
- // return getID(internalInstance._hostParent);
72
- //}
73
-
70
function findNearestAncestorInTree(
71
internalInstance: InternalInstance
72
): number | null {
@@ -313,7 +309,6 @@ export function attach(
309
) {
310
const internalInstance = idToInternalInstanceMap.get(id);
311
316
- // TODO (legacy) Support component filtering
312
const shouldIncludeInTree =
313
parentID === 0 ||
314
getElementType(internalInstance) !== ElementTypeOtherOrUnknown;