Move packager initialization events to reporter

Summary:
This PR depends on #13172

Packager events are mostly logged through the TerminalReporter by default (#13172 makes this configurable). But there are a few things that aren't passed through TerminalReporter.

- We [log a banner with some information about the port and what's going on](8c7b32d5f1/local-cli/server/server.js (L22-L32))
- Also [a message about looking for JS files](8c7b32d5f1/local-cli/server/server.js (L34-L38)) (not sure what that is for / if it is useful beyond telling the user what directory root they started the packager in, but that's another thing).
- If the packager fails to start, then [we log an error message](8c7b32d5f1/local-cli/server/server.js (L41-L61)).

This pull request changes those log messages to be handled by TerminalReporter. I tri
Closes https://github.com/facebook/react-native/pull/13209

Differential Revision: D4809759

Pulled By: davidaurelio

fbshipit-source-id: 2c427ec0c1accaf54bf6b2d1da882cd6bfaa7829

packages/metro-bundler/src/lib/TerminalReporter.js

@@ -11,11 +11,13 @@
 
 'use strict';
 
+const chalk = require('chalk');
 const path = require('path');
 const reporting = require('./reporting');
 const terminal = require('./terminal');
 const throttle = require('lodash/throttle');
 const util = require('util');
+const formatBanner = require('../../../local-cli/server/formatBanner');
 
 import type {ReportableEvent, GlobalCacheDisabledReason} from './reporting';
 
@@ -133,12 +135,70 @@ class TerminalReporter {
     }
   }
 
+
+  _logPackagerInitializing(port: number, projectRoots: Array<string>) {
+    terminal.log(
+      formatBanner(
+        'Running packager on port ' +
+          port +
+          '.\n\n' +
+          'Keep this packager running while developing on any JS projects. ' +
+          'Feel free to close this tab and run your own packager instance if you ' +
+          'prefer.\n\n' +
+          'https://github.com/facebook/react-native',
+        {
+          marginLeft: 1,
+          marginRight: 1,
+          paddingBottom: 1,
+        }
+      )
+    );
+
+    terminal.log(
+      'Looking for JS files in\n  ',
+      chalk.dim(projectRoots.join('\n   ')),
+      '\n'
+    );
+  }
+
+  _logPackagerInitializingFailed(port: number, error: Error) {
+    if (error.code === 'EADDRINUSE') {
+      terminal.log(
+        chalk.bgRed.bold(' ERROR '),
+        chalk.red("Packager can't listen on port", chalk.bold(port))
+      );
+      terminal.log('Most likely another process is already using this port');
+      terminal.log('Run the following command to find out which process:');
+      terminal.log('\n  ', chalk.bold('lsof -i :' + port), '\n');
+      terminal.log('Then, you can either shut down the other process:');
+      terminal.log('\n  ', chalk.bold('kill -9 <PID>'), '\n');
+      terminal.log('or run packager on different port.');
+    } else {
+      terminal.log(chalk.bgRed.bold(' ERROR '), chalk.red(error.message));
+      const errorAttributes = JSON.stringify(error);
+      if (errorAttributes !== '{}') {
+        terminal.log(chalk.red(errorAttributes));
+      }
+      terminal.log(chalk.red(error.stack));
+    }
+  }
+
+
   /**
    * This function is only concerned with logging and should not do state
    * or terminal status updates.
    */
   _log(event: TerminalReportableEvent): void {
     switch (event.type) {
+      case 'initialize_packager_started':
+        this._logPackagerInitializing(event.port, event.projectRoots);
+        break;
+      case 'initialize_packager_done':
+        terminal.log('\nReact packager ready.\n');
+        break;
+      case 'initialize_packager_failed':
+        this._logPackagerInitializingFailed(event.port, event.error);
+        break;
       case 'bundle_build_done':
         this._logBundleBuildDone(event.entryFilePath);
         break;

packages/metro-bundler/src/lib/reporting.js

@@ -23,6 +23,16 @@ export type GlobalCacheDisabledReason = 'too_many_errors' | 'too_many_misses';
  * report to the tool user.
  */
 export type ReportableEvent = {
+  port: number,
+  projectRoots: Array<string>,
+  type: 'initialize_packager_started',
+} | {
+  type: 'initialize_packager_done',
+} | {
+  type: 'initialize_packager_failed',
+  port: number,
+  error: Error,
+} | {
   entryFilePath: string,
   type: 'bundle_build_done',
 } | {