From 2fb5eae3723ff0fb31c2826dcb928c4f7d4eaff7 Mon Sep 17 00:00:00 2001 From: Christopher Chedeau Date: Sat, 27 Aug 2016 14:12:54 -0700 Subject: [PATCH] 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 :) --- src/renderers/shared/ReactDebugTool.js | 4 +++- src/renderers/shared/ReactPerf.js | 29 +++++++++++++++++--------- 2 files changed, 22 insertions(+), 11 deletions(-) diff --git a/src/renderers/shared/ReactDebugTool.js b/src/renderers/shared/ReactDebugTool.js index 45ee5addf3..7b726d7dd1 100644 --- a/src/renderers/shared/ReactDebugTool.js +++ b/src/renderers/shared/ReactDebugTool.js @@ -77,6 +77,8 @@ type HistoryItem = { treeSnapshot: TreeSnapshot, }; +export type FlushHistory = Array; + var hooks = []; var didHookThrowForEvent = {}; @@ -343,7 +345,7 @@ var ReactDebugTool = { resetMeasurements(); ReactDebugTool.removeHook(ReactHostOperationHistoryHook); }, - getFlushHistory(): Array { + getFlushHistory(): FlushHistory { return flushHistory; }, onBeginFlush(): void { diff --git a/src/renderers/shared/ReactPerf.js b/src/renderers/shared/ReactPerf.js index 9307ace3af..95b92f1ac6 100644 --- a/src/renderers/shared/ReactPerf.js +++ b/src/renderers/shared/ReactPerf.js @@ -7,6 +7,7 @@ * of patent rights can be found in the PATENTS file in the same directory. * * @providesModule ReactPerf + * @flow */ 'use strict'; @@ -15,11 +16,19 @@ var ReactDebugTool = require('ReactDebugTool'); var warning = require('warning'); var alreadyWarned = false; +import type { FlushHistory } from 'ReactDebugTool'; + function roundFloat(val, base = 2) { var n = Math.pow(10, base); return Math.floor(val * n) / n; } +// Flow type definition of console.table is too strict right now, see +// https://github.com/facebook/flow/pull/2353 for updates +function consoleTable(table: Array<{[key: string]: any}>): void { + console.table((table: any)); +} + function warnInProduction() { if (alreadyWarned) { return; @@ -296,7 +305,7 @@ function getOperations(flushHistory = getLastMeasurements()) { return stats; } -function printExclusive(flushHistory) { +function printExclusive(flushHistory: FlushHistory) { if (!__DEV__) { warnInProduction(); return; @@ -319,10 +328,10 @@ function printExclusive(flushHistory) { 'Total lifecycle time (ms)': roundFloat(totalDuration - renderDuration), }; }); - console.table(table); + consoleTable(table); } -function printInclusive(flushHistory) { +function printInclusive(flushHistory: FlushHistory) { if (!__DEV__) { warnInProduction(); return; @@ -338,10 +347,10 @@ function printInclusive(flushHistory) { 'Render count': renderCount, }; }); - console.table(table); + consoleTable(table); } -function printWasted(flushHistory) { +function printWasted(flushHistory: FlushHistory) { if (!__DEV__) { warnInProduction(); return; @@ -357,10 +366,10 @@ function printWasted(flushHistory) { 'Render count': renderCount, }; }); - console.table(table); + consoleTable(table); } -function printOperations(flushHistory) { +function printOperations(flushHistory: FlushHistory) { if (!__DEV__) { warnInProduction(); return; @@ -377,11 +386,11 @@ function printOperations(flushHistory) { 'Owner Component ID': stat.ownerID, 'DOM Component ID': stat.instanceID, })); - console.table(table); + consoleTable(table); } var warnedAboutPrintDOM = false; -function printDOM(measurements) { +function printDOM(measurements: FlushHistory) { warning( warnedAboutPrintDOM, '`ReactPerf.printDOM(...)` is deprecated. Use ' + @@ -392,7 +401,7 @@ function printDOM(measurements) { } var warnedAboutGetMeasurementsSummaryMap = false; -function getMeasurementsSummaryMap(measurements) { +function getMeasurementsSummaryMap(measurements: FlushHistory) { warning( warnedAboutGetMeasurementsSummaryMap, '`ReactPerf.getMeasurementsSummaryMap(...)` is deprecated. Use ' +