Type ReactPerf (#7585)
We need to export FlushHistory type and I submitted a PR on flow to fix the type of console.table which is too restrictive. I'm already starting to see the benefits of flow, I can look at random variables in the code and flow knows what shape the objects are! It's really useful to try and understand what's going on :)
Christopher Chedeau committed
Aug 27, 2016 at 14:12 UTC
2fb5eae3723ff0fb31c2826dcb928c4f7d4eaff7
2 files changed
+22
-11
src/renderers/shared/ReactDebugTool.js
+3
-1
@@ -77,6 +77,8 @@ type HistoryItem = {
77
treeSnapshot: TreeSnapshot,
78
};
79
80
+export type FlushHistory = Array<HistoryItem>;
81
+
82
var hooks = [];
83
var didHookThrowForEvent = {};
84
@@ -343,7 +345,7 @@ var ReactDebugTool = {
345
resetMeasurements();
346
ReactDebugTool.removeHook(ReactHostOperationHistoryHook);
347
},
346
- getFlushHistory(): Array<HistoryItem> {
348
+ getFlushHistory(): FlushHistory {
349
return flushHistory;
350
},
351
onBeginFlush(): void {
src/renderers/shared/ReactPerf.js
+19
-10
@@ -7,6 +7,7 @@
7
* of patent rights can be found in the PATENTS file in the same directory.
8
*
9
* @providesModule ReactPerf
10
+ * @flow
11
*/
12
13
'use strict';
@@ -15,11 +16,19 @@ var ReactDebugTool = require('ReactDebugTool');
16
var warning = require('warning');
17
var alreadyWarned = false;
18
19
+import type { FlushHistory } from 'ReactDebugTool';
20
+
21
function roundFloat(val, base = 2) {
22
var n = Math.pow(10, base);
23
return Math.floor(val * n) / n;
24
}
25
26
+// Flow type definition of console.table is too strict right now, see
27
+// https://github.com/facebook/flow/pull/2353 for updates
28
+function consoleTable(table: Array<{[key: string]: any}>): void {
29
+ console.table((table: any));
30
+}
31
+
32
function warnInProduction() {
33
if (alreadyWarned) {
34
return;
@@ -296,7 +305,7 @@ function getOperations(flushHistory = getLastMeasurements()) {
305
return stats;
306
}
307
299
-function printExclusive(flushHistory) {
308
+function printExclusive(flushHistory: FlushHistory) {
309
if (!__DEV__) {
310
warnInProduction();
311
return;
@@ -319,10 +328,10 @@ function printExclusive(flushHistory) {
328
'Total lifecycle time (ms)': roundFloat(totalDuration - renderDuration),
329
};
330
});
322
- console.table(table);
331
+ consoleTable(table);
332
}
333
325
-function printInclusive(flushHistory) {
334
+function printInclusive(flushHistory: FlushHistory) {
335
if (!__DEV__) {
336
warnInProduction();
337
return;
@@ -338,10 +347,10 @@ function printInclusive(flushHistory) {
347
'Render count': renderCount,
348
};
349
});
341
- console.table(table);
350
+ consoleTable(table);
351
}
352
344
-function printWasted(flushHistory) {
353
+function printWasted(flushHistory: FlushHistory) {
354
if (!__DEV__) {
355
warnInProduction();
356
return;
@@ -357,10 +366,10 @@ function printWasted(flushHistory) {
366
'Render count': renderCount,
367
};
368
});
360
- console.table(table);
369
+ consoleTable(table);
370
}
371
363
-function printOperations(flushHistory) {
372
+function printOperations(flushHistory: FlushHistory) {
373
if (!__DEV__) {
374
warnInProduction();
375
return;
@@ -377,11 +386,11 @@ function printOperations(flushHistory) {
386
'Owner Component ID': stat.ownerID,
387
'DOM Component ID': stat.instanceID,
388
}));
380
- console.table(table);
389
+ consoleTable(table);
390
}
391
392
var warnedAboutPrintDOM = false;
384
-function printDOM(measurements) {
393
+function printDOM(measurements: FlushHistory) {
394
warning(
395
warnedAboutPrintDOM,
396
'`ReactPerf.printDOM(...)` is deprecated. Use ' +
@@ -392,7 +401,7 @@ function printDOM(measurements) {
401
}
402
403
var warnedAboutGetMeasurementsSummaryMap = false;
395
-function getMeasurementsSummaryMap(measurements) {
404
+function getMeasurementsSummaryMap(measurements: FlushHistory) {
405
warning(
406
warnedAboutGetMeasurementsSummaryMap,
407
'`ReactPerf.getMeasurementsSummaryMap(...)` is deprecated. Use ' +