Type ReactDebugTool (#7576)
Christopher Chedeau committed
Aug 26, 2016 at 14:47 UTC
c086e5f94efe71612696744a9c6feae745618533
1 file changed
+99
-39
src/renderers/shared/ReactDebugTool.js
+99
-39
@@ -7,6 +7,7 @@
7
* of patent rights can be found in the PATENTS file in the same directory.
8
*
9
* @providesModule ReactDebugTool
10
+ * @flow
11
*/
12
13
'use strict';
@@ -20,6 +21,62 @@ var ExecutionEnvironment = require('ExecutionEnvironment');
21
var performanceNow = require('performanceNow');
22
var warning = require('warning');
23
24
+import type { ReactElement } from 'ReactElementType';
25
+import type { DebugID } from 'ReactInstanceType';
26
+
27
+type Hook = any;
28
+type Payload = mixed;
29
+
30
+type TimerType =
31
+ 'ctor' |
32
+ 'render' |
33
+ 'componentWillMount' |
34
+ 'componentWillUnmount' |
35
+ 'componentWillReceiveProps' |
36
+ 'shouldComponentUpdate' |
37
+ 'componentWillUpdate' |
38
+ 'componentDidUpdate' |
39
+ 'componentDidMount';
40
+
41
+type HostOperationType =
42
+ 'mount' |
43
+ 'insert child' |
44
+ 'move child' |
45
+ 'remove child' |
46
+ 'replace children' |
47
+ 'replace text' |
48
+ 'replace with';
49
+
50
+type Operation = {
51
+ instanceID: DebugID,
52
+ type: string,
53
+ payload: Payload,
54
+};
55
+
56
+type Measurement = {
57
+ timerType: TimerType,
58
+ instanceID: DebugID,
59
+ duration: number,
60
+};
61
+
62
+type TreeSnapshot = {
63
+ [key: DebugID]: {
64
+ displayName: string,
65
+ text: string,
66
+ updateCount: number,
67
+ childIDs: Array<DebugID>,
68
+ ownerID: DebugID,
69
+ parentID: DebugID,
70
+ }
71
+};
72
+
73
+type HistoryItem = {
74
+ duration: number,
75
+ measurements: Array<Measurement>,
76
+ operations: Array<Operation>,
77
+ treeSnapshot: TreeSnapshot,
78
+};
79
+
80
var hooks = [];
81
var didHookThrowForEvent = {};
82
@@ -51,11 +108,11 @@ var isProfiling = false;
108
var flushHistory = [];
109
var lifeCycleTimerStack = [];
110
var currentFlushNesting = 0;
54
-var currentFlushMeasurements = null;
55
-var currentFlushStartTime = null;
111
+var currentFlushMeasurements = [];
112
+var currentFlushStartTime = 0;
113
var currentTimerDebugID = null;
57
-var currentTimerStartTime = null;
58
-var currentTimerNestedFlushDuration = null;
114
+var currentTimerStartTime = 0;
115
+var currentTimerNestedFlushDuration = 0;
116
var currentTimerType = null;
117
118
var lifeCycleTimerHasWarned = false;
@@ -75,7 +132,9 @@ function getTreeSnapshot(registeredIDs) {
132
updateCount: ReactComponentTreeHook.getUpdateCount(id),
133
childIDs: ReactComponentTreeHook.getChildIDs(id),
134
// Text nodes don't have owners but this is close enough.
78
- ownerID: ownerID || ReactComponentTreeHook.getOwnerID(parentID),
135
+ ownerID: ownerID ||
136
+ parentID && ReactComponentTreeHook.getOwnerID(parentID) ||
137
+ 0,
138
parentID,
139
};
140
return tree;
@@ -84,12 +143,12 @@ function getTreeSnapshot(registeredIDs) {
143
144
function resetMeasurements() {
145
var previousStartTime = currentFlushStartTime;
87
- var previousMeasurements = currentFlushMeasurements || [];
146
+ var previousMeasurements = currentFlushMeasurements;
147
var previousOperations = ReactHostOperationHistoryHook.getHistory();
148
149
if (currentFlushNesting === 0) {
91
- currentFlushStartTime = null;
92
- currentFlushMeasurements = null;
150
+ currentFlushStartTime = 0;
151
+ currentFlushMeasurements = [];
152
clearHistory();
153
return;
154
}
@@ -163,8 +222,8 @@ function endLifeCycleTimer(debugID, timerType) {
222
duration: performanceNow() - currentTimerStartTime - currentTimerNestedFlushDuration,
223
});
224
}
166
- currentTimerStartTime = null;
167
- currentTimerNestedFlushDuration = null;
225
+ currentTimerStartTime = 0;
226
+ currentTimerNestedFlushDuration = 0;
227
currentTimerDebugID = null;
228
currentTimerType = null;
229
}
@@ -177,8 +236,8 @@ function pauseCurrentLifeCycleTimer() {
236
timerType: currentTimerType,
237
};
238
lifeCycleTimerStack.push(currentTimer);
180
- currentTimerStartTime = null;
181
- currentTimerNestedFlushDuration = null;
239
+ currentTimerStartTime = 0;
240
+ currentTimerNestedFlushDuration = 0;
241
currentTimerDebugID = null;
242
currentTimerType = null;
243
}
@@ -192,8 +251,9 @@ function resumeCurrentLifeCycleTimer() {
251
currentTimerType = timerType;
252
}
253
195
-var lastMarkTimeStamp = null;
196
-var canUsePerformanceMeasure =
254
+var lastMarkTimeStamp = 0;
255
+var canUsePerformanceMeasure: bool =
256
+// $FlowFixMe https://github.com/facebook/flow/issues/2345
257
typeof performance !== 'undefined' &&
258
typeof performance.mark === 'function' &&
259
typeof performance.clearMarks === 'function' &&
@@ -231,7 +291,7 @@ function markEnd(debugID, markType) {
291
}
292
293
var markName = `${debugID}::${markType}`;
234
- var displayName = ReactComponentTreeHook.getDisplayName(debugID);
294
+ var displayName = ReactComponentTreeHook.getDisplayName(debugID) || 'Unknown';
295
296
// Chrome has an issue of dropping markers recorded too fast:
297
// https://bugs.chromium.org/p/chromium/issues/detail?id=640652
@@ -250,10 +310,10 @@ function markEnd(debugID, markType) {
310
}
311
312
var ReactDebugTool = {
253
- addHook(hook) {
313
+ addHook(hook: Hook): void {
314
hooks.push(hook);
315
},
256
- removeHook(hook) {
316
+ removeHook(hook: Hook): void {
317
for (var i = 0; i < hooks.length; i++) {
318
if (hooks[i] === hook) {
319
hooks.splice(i, 1);
@@ -261,10 +321,10 @@ var ReactDebugTool = {
321
}
322
}
323
},
264
- isProfiling() {
324
+ isProfiling(): bool {
325
return isProfiling;
326
},
267
- beginProfiling() {
327
+ beginProfiling(): void {
328
if (isProfiling) {
329
return;
330
}
@@ -274,7 +334,7 @@ var ReactDebugTool = {
334
resetMeasurements();
335
ReactDebugTool.addHook(ReactHostOperationHistoryHook);
336
},
277
- endProfiling() {
337
+ endProfiling(): void {
338
if (!isProfiling) {
339
return;
340
}
@@ -283,90 +343,90 @@ var ReactDebugTool = {
343
resetMeasurements();
344
ReactDebugTool.removeHook(ReactHostOperationHistoryHook);
345
},
286
- getFlushHistory() {
346
+ getFlushHistory(): Array<HistoryItem> {
347
return flushHistory;
348
},
289
- onBeginFlush() {
349
+ onBeginFlush(): void {
350
currentFlushNesting++;
351
resetMeasurements();
352
pauseCurrentLifeCycleTimer();
353
emitEvent('onBeginFlush');
354
},
295
- onEndFlush() {
355
+ onEndFlush(): void {
356
resetMeasurements();
357
currentFlushNesting--;
358
resumeCurrentLifeCycleTimer();
359
emitEvent('onEndFlush');
360
},
301
- onBeginLifeCycleTimer(debugID, timerType) {
361
+ onBeginLifeCycleTimer(debugID: DebugID, timerType: TimerType): void {
362
checkDebugID(debugID);
363
emitEvent('onBeginLifeCycleTimer', debugID, timerType);
364
markBegin(debugID, timerType);
365
beginLifeCycleTimer(debugID, timerType);
366
},
307
- onEndLifeCycleTimer(debugID, timerType) {
367
+ onEndLifeCycleTimer(debugID: DebugID, timerType: TimerType): void {
368
checkDebugID(debugID);
369
endLifeCycleTimer(debugID, timerType);
370
markEnd(debugID, timerType);
371
emitEvent('onEndLifeCycleTimer', debugID, timerType);
372
},
313
- onBeginProcessingChildContext() {
373
+ onBeginProcessingChildContext(): void {
374
emitEvent('onBeginProcessingChildContext');
375
},
316
- onEndProcessingChildContext() {
376
+ onEndProcessingChildContext(): void {
377
emitEvent('onEndProcessingChildContext');
378
},
319
- onHostOperation(debugID, type, payload) {
379
+ onHostOperation(debugID: DebugID, type: HostOperationType, payload: Payload): void {
380
checkDebugID(debugID);
381
emitEvent('onHostOperation', debugID, type, payload);
382
},
323
- onSetState() {
383
+ onSetState(): void {
384
emitEvent('onSetState');
385
},
326
- onSetChildren(debugID, childDebugIDs) {
386
+ onSetChildren(debugID: DebugID, childDebugIDs: Array<DebugID>) {
387
checkDebugID(debugID);
388
childDebugIDs.forEach(checkDebugID);
389
emitEvent('onSetChildren', debugID, childDebugIDs);
390
},
331
- onBeforeMountComponent(debugID, element, parentDebugID) {
391
+ onBeforeMountComponent(debugID: DebugID, element: ReactElement, parentDebugID: DebugID): void {
392
checkDebugID(debugID);
393
checkDebugID(parentDebugID, true);
394
emitEvent('onBeforeMountComponent', debugID, element, parentDebugID);
395
markBegin(debugID, 'mount');
396
},
337
- onMountComponent(debugID) {
397
+ onMountComponent(debugID: DebugID): void {
398
checkDebugID(debugID);
399
markEnd(debugID, 'mount');
400
emitEvent('onMountComponent', debugID);
401
},
342
- onBeforeUpdateComponent(debugID, element) {
402
+ onBeforeUpdateComponent(debugID: DebugID, element: ReactElement): void {
403
checkDebugID(debugID);
404
emitEvent('onBeforeUpdateComponent', debugID, element);
405
markBegin(debugID, 'update');
406
},
347
- onUpdateComponent(debugID) {
407
+ onUpdateComponent(debugID: DebugID): void {
408
checkDebugID(debugID);
409
markEnd(debugID, 'update');
410
emitEvent('onUpdateComponent', debugID);
411
},
352
- onBeforeUnmountComponent(debugID) {
412
+ onBeforeUnmountComponent(debugID: DebugID): void {
413
checkDebugID(debugID);
414
emitEvent('onBeforeUnmountComponent', debugID);
415
markBegin(debugID, 'unmount');
416
},
357
- onUnmountComponent(debugID) {
417
+ onUnmountComponent(debugID: DebugID): void {
418
checkDebugID(debugID);
419
markEnd(debugID, 'unmount');
420
emitEvent('onUnmountComponent', debugID);
421
},
362
- onTestEvent() {
422
+ onTestEvent(): void {
423
emitEvent('onTestEvent');
424
},
425
};
426
427
// TODO remove these when RN/www gets updated
368
-ReactDebugTool.addDevtool = ReactDebugTool.addHook;
369
-ReactDebugTool.removeDevtool = ReactDebugTool.removeHook;
428
+(ReactDebugTool: any).addDevtool = ReactDebugTool.addHook;
429
+(ReactDebugTool: any).removeDevtool = ReactDebugTool.removeHook;
430
431
ReactDebugTool.addHook(ReactInvalidSetStateWarningHook);
432
ReactDebugTool.addHook(ReactComponentTreeHook);