Add bundle progress bar to logs

react-native-scripts/package.json

@@ -33,8 +33,9 @@
     "match-require": "^2.0.0",
     "minimist": "^1.2.0",
     "path-exists": "^3.0.0",
+    "progress": "^1.1.8",
     "qrcode-terminal": "^0.11.0",
-    "xdl": "^37.0.0"
+    "xdl": "38.0.0-beta.2"
   },
   "devDependencies": {
     "babel-plugin-add-module-exports": "^0.2.1",

react-native-scripts/src/util/log.js

@@ -0,0 +1,35 @@
+import chalk from 'chalk';
+
+let _bundleProgressBar;
+
+function respectProgressBars(commitLogs) {
+  if (_bundleProgressBar) {
+    _bundleProgressBar.terminate();
+    _bundleProgressBar.lastDraw = '';
+    commitLogs();
+    _bundleProgressBar.render();
+  } else {
+    commitLogs();
+  }
+}
+
+log.setBundleProgressBar = function setBundleProgressBar(bar) {
+  _bundleProgressBar = bar;
+};
+
+function log() {
+  const prefix = chalk.dim(new Date().toLocaleTimeString()) + ':';
+  var args = [prefix].concat(Array.prototype.slice.call(arguments, 0));
+
+  respectProgressBars(() => {
+    console.log(...args);
+  });
+}
+
+log.withoutPrefix = function(...args) {
+  respectProgressBars(() => {
+    console.log(...args);
+  });
+};
+
+export default log;

react-native-scripts/src/util/packager.js

@@ -1,10 +1,13 @@
 // @flow
 
-import { Project, ProjectSettings, ProjectUtils } from 'xdl';
+import { PackagerLogsStream, Project, ProjectSettings, ProjectUtils } from 'xdl';
 
+import ProgressBar from 'progress';
 import bunyan from 'bunyan';
 import chalk from 'chalk';
 
+import log from './log';
+
 // TODO get babel output that's nice enough to let it take over the console
 function clearConsole() {
   process.stdout.write(process.platform === 'win32' ? '\x1Bc' : '\x1B[2J\x1B[3J\x1B[H');
@@ -23,9 +26,10 @@ function installExitHooks(projectDir) {
   }
 
   process.on('SIGINT', () => {
-    console.log('\nStopping packager...');
+    log('\nStopping packager...');
     cleanUpPackager(projectDir).then(() => {
-      console.log(chalk.green('Packager stopped.'));
+      // TODO: this shows up after process exits, fix it
+      log(chalk.green('Packager stopped.'));
       process.exit();
     });
   });
@@ -52,66 +56,107 @@ function run(onReady: () => ?any, options: Object = {}) {
   let packagerReady = false;
   let needsClear = false;
   let logBuffer = '';
+  let progressBar;
   const projectDir = process.cwd();
-  ProjectUtils.attachLoggerStream(projectDir, {
-    stream: {
-      write: chunk => {
-        // don't show the initial packager setup, so that we can display a nice getting started message
-        // note: it's possible for the RN packager to log its setup before the express server is done
-        // this is a potential race condition but it'll work for now
-        if (chunk.msg.indexOf('Loading dependency graph, done.') >= 0) {
-          packagerReady = true;
-          // TODO clearConsole();
-          onReady();
-          return;
-        }
 
-        const messagePrefix = chalk.dim(new Date().toLocaleTimeString()) + ':';
+  const handleLogChunk = chunk => {
+    // we don't need to print the entire manifest when loading the app
+    if (chunk.msg.indexOf(' with appParams: ') >= 0) {
+      if (needsClear) {
+        // this is set when we previously encountered an error
+        // TODO clearConsole();
+      }
+      log(`Loading your app...\n`);
+      return;
+    }
+
+    if (
+      chunk.msg === 'Dependency graph loaded' ||
+      chunk.msg.indexOf('Loading dependency graph, done.') >= 0
+    ) {
+      packagerReady = true;
+      onReady();
+      return;
+    }
 
-        // we don't need to print the entire manifest when loading the app
-        if (chunk.msg.indexOf(' with appParams: ') >= 0) {
-          if (needsClear) {
-            // this is set when we previously encountered an error
-            // TODO clearConsole();
-          }
-          console.log(`${messagePrefix} Loading your app...\n`);
-          return;
-        }
+    if (packagerReady) {
+      const message = `${chunk.msg.trim()}\n`;
+      if (chunk.level <= bunyan.INFO) {
+        log(message);
+      } else if (chunk.level === bunyan.WARN) {
+        log(chalk.yellow(message));
+      } else {
+        log(chalk.red(message));
 
-        if (packagerReady) {
-          const message = `${messagePrefix} ${chunk.msg}\n`;
-          if (chunk.level <= bunyan.INFO) {
-            console.log(message);
-          } else if (chunk.level === bunyan.WARN) {
-            console.log(chalk.yellow(message));
-          } else {
-            console.log(chalk.red(message));
-
-            // if you run into a syntax error then we should clear log output on reload
-            needsClear = message.indexOf('SyntaxError') >= 0;
-          }
-        } else {
-          if (chunk.level >= bunyan.ERROR) {
-            console.log(chalk.yellow('***ERROR STARTING PACKAGER***'));
-            console.log(logBuffer);
-            console.log(chalk.red(chunk.msg));
-            logBuffer = '';
-          } else {
-            logBuffer += chunk.msg + '\n';
-          }
+        // if you run into a syntax error then we should clear log output on reload
+        needsClear = message.indexOf('SyntaxError') >= 0;
+      }
+    } else {
+      if (chunk.level >= bunyan.ERROR) {
+        log.withoutPrefix(chalk.yellow('***ERROR STARTING PACKAGER***'));
+        log.withoutPrefix(logBuffer);
+        log.withoutPrefix(chalk.red(chunk.msg));
+        logBuffer = '';
+      } else {
+        logBuffer += chunk.msg + '\n';
+      }
+    }
+  };
+
+  // Subscribe to packager/server logs
+  let packagerLogsStream = new PackagerLogsStream({
+    projectRoot: projectDir,
+    onStartBuildBundle: () => {
+      progressBar = new ProgressBar('Building JavaScript bundle [:bar] :percent', {
+        total: 100,
+        clear: true,
+        complete: '=',
+        incomplete: ' ',
+      });
+
+      log.setBundleProgressBar(progressBar);
+    },
+    onProgressBuildBundle: percent => {
+      if (!progressBar || progressBar.complete) return;
+      let ticks = percent - progressBar.curr;
+      ticks > 0 && progressBar.tick(ticks);
+    },
+    onFinishBuildBundle: () => {
+      if (progressBar && !progressBar.complete) {
+        progressBar.tick(100 - progressBar.curr);
+      }
+
+      if (progressBar) {
+        log.setBundleProgressBar(null);
+        progressBar = null;
+        log(chalk.green('Finished building JavaScript bundle'));
+      }
+    },
+    updateLogs: updater => {
+      let newLogChunks = updater([]);
+      newLogChunks.map(handleLogChunk);
+    },
+  });
+
+  // Subscribe to device updates separately from packager/server updates
+  ProjectUtils.attachLoggerStream(projectDir, {
+    stream: {
+      write: chunk => {
+        if (chunk.tag === 'device') {
+          handleLogChunk(chunk);
         }
       },
     },
     type: 'raw',
   });
 
   installExitHooks(projectDir);
-  console.log('Starting packager...');
+  log('Starting packager...');
 
   Project.startAsync(projectDir, options).then(
     () => {},
     reason => {
-      console.log(chalk.red(`Error starting packager: ${reason.stack}`));
+      log(chalk.red(`Error starting packager: ${reason.stack}`));
       process.exit(1);
     }
   );