Add progress bar to Metro cli build

Reviewed By: davidaurelio

Differential Revision: D6899035

fbshipit-source-id: 4e9c852ecc8d7d172919a79385903e95c0bc239e

packages/metro/src/commands/build.js

@@ -13,10 +13,12 @@
 'use strict';
 
 const MetroApi = require('..');
+const TerminalReporter = require('../lib/TerminalReporter');
 
 const os = require('os');
 
 const {makeAsyncCommand} = require('../cli-utils');
+const {Terminal} = require('metro-core');
 
 import typeof Yargs from 'yargs';
 
@@ -53,6 +55,9 @@ exports.builder = (yargs: Yargs) => {
   yargs.option('reset-cache', {type: 'boolean', describe: null});
 };
 
+const term = new Terminal(process.stdout);
+const updateReporter = new TerminalReporter(term);
+
 // eslint-disable-next-line no-unclear-flowtypes
 exports.handler = makeAsyncCommand(async (argv: any) => {
   // $FlowFixMe: Flow + Promises don't work consistently https://fb.facebook.com/groups/flow/permalink/1772334656148475/
@@ -62,5 +67,36 @@ exports.handler = makeAsyncCommand(async (argv: any) => {
     config.getProjectRoots = () => argv.projectRoots;
   }
 
-  await MetroApi.runBuild({...argv, config});
+  await MetroApi.runBuild({
+    ...argv,
+    config,
+    onBegin: () => {
+      updateReporter.update({
+        buildID: '$',
+        type: 'bundle_build_started',
+        bundleDetails: {
+          entryFile: argv.O,
+          platform: argv.platform,
+          dev: !!argv.dev,
+          minify: !!argv.optimize,
+          bundleType: 'Bundle',
+        },
+      });
+    },
+    onProgress: (transformedFileCount, totalFileCount) => {
+      updateReporter.update({
+        buildID: '$',
+        type: 'bundle_transform_progressed_throttled',
+        transformedFileCount,
+        totalFileCount,
+      });
+    },
+    onComplete: () => {
+      term.log('onComplete called');
+      updateReporter.update({
+        buildID: '$',
+        type: 'bundle_build_done',
+      });
+    },
+  });
 });

packages/metro/src/index.js

@@ -270,6 +270,9 @@ type RunBuildOptions = {|
   entry: string,
   out: string,
   dev?: boolean,
+  onBegin?: () => void,
+  onProgress?: (transformedFileCount: number, totalFileCount: number) => void,
+  onComplete?: () => void,
   optimize?: boolean,
   platform?: string,
   sourceMap?: boolean,
@@ -294,10 +297,19 @@ exports.runBuild = async (options: RunBuildOptions) => {
     createModuleIdFactory: options.config
       ? options.config.createModuleIdFactory
       : undefined,
+    onProgress: options.onProgress,
   };
 
+  if (options.onBegin) {
+    options.onBegin();
+  }
+
   const metroBundle = await MetroBundler.build(metroServer, requestOptions);
 
+  if (options.onComplete) {
+    options.onComplete();
+  }
+
   const outputOptions: OutputOptions = {
     bundleOutput: options.out.replace(/(\.js)?$/, '.js'),
     sourcemapOutput:

packages/metro/src/lib/TerminalReporter.js

@@ -161,6 +161,7 @@ class TerminalReporter {
         'done',
       );
       this.terminal.log(msg);
+      this._activeBundles.delete(buildID);
     }
   }
 

packages/metro/src/shared/types.flow.js

@@ -122,4 +122,5 @@ export type RequestOptions = {|
   minify: boolean,
   platform: string,
   createModuleIdFactory?: () => (path: string) => number,
+  onProgress?: (transformedFileCount: number, totalFileCount: number) => void,
 |};