Added initial support for EventComponent/EventTarget
Brian Vaughn committed
Mar 30, 2019 at 09:02 UTC
7cac619c6862ed0068a464a6d1053a964353c260
3 files changed
+71
-19
src/backend/renderer.js
+49
-10
@@ -5,6 +5,8 @@ import {
5
ElementTypeClass,
6
ElementTypeFunction,
7
ElementTypeContext,
8
+ ElementTypeEventComponent,
9
+ ElementTypeEventTarget,
10
ElementTypeForwardRef,
11
ElementTypeMemo,
12
ElementTypeOtherOrUnknown,
@@ -47,6 +49,12 @@ function getInternalReactConstants(version) {
49
CONTEXT_CONSUMER_SYMBOL_STRING: 'Symbol(react.context)',
50
CONTEXT_PROVIDER_NUMBER: 0xeacd,
51
CONTEXT_PROVIDER_SYMBOL_STRING: 'Symbol(react.provider)',
52
+ EVENT_COMPONENT_NUMBER: 0xead5,
53
+ EVENT_COMPONENT_STRING: 'Symbol(react.event_component)',
54
+ EVENT_TARGET_NUMBER: 0xead6,
55
+ EVENT_TARGET_STRING: 'Symbol(react.event_target)',
56
+ EVENT_TARGET_TOUCH_HIT_NUMBER: 0xead7,
57
+ EVENT_TARGET_TOUCH_HIT_STRING: 'Symbol(react.event_target.touch_hit)',
58
FORWARD_REF_NUMBER: 0xead0,
59
FORWARD_REF_SYMBOL_STRING: 'Symbol(react.forward_ref)',
60
MEMO_NUMBER: 0xead3,
@@ -79,6 +87,8 @@ function getInternalReactConstants(version) {
87
ContextProvider: 10,
88
CoroutineComponent: -1, // Removed
89
CoroutineHandlerPhase: -1, // Removed
90
+ EventComponent: 19, // Added in 16.9
91
+ EventTarget: 20, // Added in 16.9
92
ForwardRef: 11,
93
Fragment: 7,
94
FunctionComponent: 0,
@@ -103,6 +113,8 @@ function getInternalReactConstants(version) {
113
ContextProvider: 12,
114
CoroutineComponent: -1, // Removed
115
CoroutineHandlerPhase: -1, // Removed
116
+ EventComponent: -1, // Doesn't exist yet
117
+ EventTarget: -1, // Doesn't exist yet
118
ForwardRef: 13,
119
Fragment: 9,
120
FunctionComponent: 0,
@@ -127,6 +139,8 @@ function getInternalReactConstants(version) {
139
ContextProvider: 13,
140
CoroutineComponent: 7,
141
CoroutineHandlerPhase: 8,
142
+ EventComponent: -1, // Doesn't exist yet
143
+ EventTarget: -1, // Doesn't exist yet
144
ForwardRef: 14,
145
Fragment: 10,
146
FunctionComponent: 1,
@@ -172,6 +186,8 @@ export function attach(
186
FunctionComponent,
187
ClassComponent,
188
ContextConsumer,
189
+ EventComponent,
190
+ EventTarget,
191
Fragment,
192
ForwardRef,
193
HostRoot,
@@ -191,6 +207,8 @@ export function attach(
207
CONTEXT_CONSUMER_SYMBOL_STRING,
208
CONTEXT_PROVIDER_NUMBER,
209
CONTEXT_PROVIDER_SYMBOL_STRING,
210
+ EVENT_TARGET_TOUCH_HIT_NUMBER,
211
+ EVENT_TARGET_TOUCH_HIT_STRING,
212
PROFILER_NUMBER,
213
PROFILER_SYMBOL_STRING,
214
STRICT_MODE_NUMBER,
@@ -241,13 +259,14 @@ export function attach(
259
case MemoComponent:
260
case SimpleMemoComponent:
261
return false;
262
+ case EventComponent:
263
case HostPortal:
264
case HostComponent:
265
case HostText:
266
case Fragment:
267
return true;
268
default:
250
- const typeSymbol = getTypeSymbol(fiber);
269
+ const typeSymbol = getTypeSymbol(fiber.type);
270
271
switch (typeSymbol) {
272
case CONCURRENT_MODE_NUMBER:
@@ -272,9 +291,7 @@ export function attach(
291
}
292
}
293
275
- function getTypeSymbol(fiber: Fiber): Symbol | number {
276
- const { type } = fiber;
277
-
294
+ function getTypeSymbol(type: any): Symbol | number {
295
const symbolOrNumber =
296
typeof type === 'object' && type !== null ? type.$$typeof : type;
297
@@ -318,6 +335,29 @@ export function attach(
335
type: ElementTypeFunction,
336
};
337
break;
338
+ case EventComponent:
339
+ fiberData = {
340
+ displayName: null,
341
+ key,
342
+ type: ElementTypeEventComponent,
343
+ };
344
+ break;
345
+ case EventTarget:
346
+ switch (getTypeSymbol(elementType.type)) {
347
+ case EVENT_TARGET_TOUCH_HIT_NUMBER:
348
+ case EVENT_TARGET_TOUCH_HIT_STRING:
349
+ displayName = 'TouchHitTarget';
350
+ break;
351
+ default:
352
+ displayName = 'EventTarget';
353
+ break;
354
+ }
355
+ fiberData = {
356
+ displayName,
357
+ key,
358
+ type: ElementTypeEventTarget,
359
+ };
360
+ break;
361
case ForwardRef:
362
const functionName = getDisplayName(resolvedType.render, '');
363
displayName =
@@ -342,7 +382,7 @@ export function attach(
382
case Fragment:
383
return {
384
displayName: null,
345
- key: null,
385
+ key,
386
type: ElementTypeOtherOrUnknown,
387
};
388
case MemoComponent:
@@ -360,7 +400,7 @@ export function attach(
400
};
401
break;
402
default:
363
- const typeSymbol = getTypeSymbol(fiber);
403
+ const typeSymbol = getTypeSymbol(type);
404
405
switch (typeSymbol) {
406
case CONCURRENT_MODE_NUMBER:
@@ -1254,7 +1294,7 @@ export function attach(
1294
tag === ForwardRef) &&
1295
!!memoizedState;
1296
1257
- const typeSymbol = getTypeSymbol(fiber);
1297
+ const typeSymbol = getTypeSymbol(type);
1298
1299
let canViewSource = false;
1300
let context = null;
@@ -1284,13 +1324,12 @@ export function attach(
1324
// Look for overridden value.
1325
let current = ((fiber: any): Fiber).return;
1326
while (current !== null) {
1287
- const currentTypeSymbol = getTypeSymbol(current);
1327
+ const currentType = current.type;
1328
+ const currentTypeSymbol = getTypeSymbol(currentType);
1329
if (
1330
currentTypeSymbol === CONTEXT_PROVIDER_NUMBER ||
1331
currentTypeSymbol === CONTEXT_PROVIDER_SYMBOL_STRING
1332
) {
1292
- const currentType = current.type;
1293
-
1333
// 16.3.0 exposed the context object as "context"
1334
// PR #12501 changed it to "_context" for 16.3.1+
1335
// NOTE Keep in sync with getDataForFiber()
src/devtools/store.js
+11
@@ -160,6 +160,17 @@ export default class Store extends EventEmitter {
160
return this._supportsReloadAndProfile;
161
}
162
163
+ clearProfilingData(): void {
164
+ this._profilingOperations = new Map();
165
+ this._profilingSnapshot = new Map();
166
+
167
+ // Invalidate suspense cache if profiling data is being (re-)recorded.
168
+ // Note that we clear now because any existing data is "stale".
169
+ this._profilingCache.invalidate();
170
+
171
+ this.emit('isProfiling');
172
+ }
173
+
174
getElementAtIndex(index: number): Element | null {
175
if (index < 0 || index >= this.numElements) {
176
console.warn(
src/devtools/types.js
+11
-9
@@ -1,16 +1,18 @@
1
// @flow
2
3
export const ElementTypeClass = 1;
4
-export const ElementTypeFunction = 2;
5
-export const ElementTypeContext = 3;
6
-export const ElementTypeForwardRef = 4;
7
-export const ElementTypeMemo = 5;
8
-export const ElementTypeOtherOrUnknown = 6;
9
-export const ElementTypeProfiler = 7;
10
-export const ElementTypeRoot = 8;
11
-export const ElementTypeSuspense = 9;
4
+export const ElementTypeEventComponent = 2;
5
+export const ElementTypeEventTarget = 3;
6
+export const ElementTypeFunction = 4;
7
+export const ElementTypeContext = 5;
8
+export const ElementTypeForwardRef = 6;
9
+export const ElementTypeMemo = 7;
10
+export const ElementTypeOtherOrUnknown = 8;
11
+export const ElementTypeProfiler = 9;
12
+export const ElementTypeRoot = 10;
13
+export const ElementTypeSuspense = 11;
14
15
// Different types of elements displayed in the Elements tree.
16
// These types may be used to visually distinguish types,
17
// or to enable/disable certain functionality.
16
-export type ElementType = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
18
+export type ElementType = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11;