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

@@ -77,6 +77,8 @@ type HistoryItem = {
   treeSnapshot: TreeSnapshot,
 };
 
+export type FlushHistory = Array<HistoryItem>;
+
 var hooks = [];
 var didHookThrowForEvent = {};
 
@@ -343,7 +345,7 @@ var ReactDebugTool = {
     resetMeasurements();
     ReactDebugTool.removeHook(ReactHostOperationHistoryHook);
   },
-  getFlushHistory(): Array<HistoryItem> {
+  getFlushHistory(): FlushHistory {
     return flushHistory;
   },
   onBeginFlush(): void {

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 ' +