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/scripts/android.js

@@ -1,10 +1,13 @@
+// @flow
+
 import { Android, Config, ProjectSettings, UrlUtils } from 'xdl';
 
 import chalk from 'chalk';
 import indent from 'indent-string';
 import path from 'path';
 import pathExists from 'path-exists';
 import qr from 'qrcode-terminal';
+import log from '../util/log';
 
 import packager from '../util/packager';
 
@@ -19,12 +22,12 @@ packager.run(startAndroidAndPrintInfo);
 // print a nicely formatted message with setup information
 async function startAndroidAndPrintInfo() {
   const address = await UrlUtils.constructManifestUrlAsync(process.cwd());
-  console.log('Starting Android...');
+  log('Starting Android...');
 
   const { success, error } = await Android.openProjectAsync(process.cwd());
 
   qr.generate(address, qrCode => {
-    console.log(
+    log(
       `${chalk.green('Packager started!')}
 
 To view your app with live reloading, point the Expo app to this QR code.
@@ -46,6 +49,6 @@ Logs from serving your app will appear here. Press Ctrl+C at any time to stop.
   });
 
   if (!success) {
-    console.log(chalk.red(error.message));
+    log(chalk.red(error.message));
   }
 }

react-native-scripts/src/scripts/eject.js

@@ -6,6 +6,7 @@ import inquirer from 'inquirer';
 import matchRequire from 'match-require';
 import path from 'path';
 import spawn from 'cross-spawn';
+import log from '../util/log';
 
 import { detach } from '../util/expo';
 
@@ -31,7 +32,7 @@ We didn't find any uses of the Expo SDK in your project, so you should be fine t
 "Plain" React Native. (This check isn't very sophisticated, though.)`;
     }
 
-    console.log(
+    log(
       `
 ${expoSdkWarning}
 
@@ -87,7 +88,7 @@ Ejecting is permanent! Please be careful with your selection.
         newDisplayName = expName;
       }
 
-      console.log(
+      log(
         "We have a couple of questions to ask you about how you'd like to name your app:"
       );
       const { enteredName, enteredDisplayname } = await inquirer.prompt([
@@ -112,10 +113,10 @@ Ejecting is permanent! Please be careful with your selection.
       appJson.name = enteredName;
       appJson.displayName = enteredDisplayname;
 
-      console.log('Writing your selections to app.json...');
+      log('Writing your selections to app.json...');
       // write the updated app.json file
       await fsp.writeFile(path.resolve('app.json'), JSON.stringify(appJson, null, 2));
-      console.log(chalk.green('Wrote to app.json, please update it manually in the future.'));
+      log(chalk.green('Wrote to app.json, please update it manually in the future.'));
 
       const ejectCommand = 'node';
       const ejectArgs = [
@@ -128,13 +129,13 @@ Ejecting is permanent! Please be careful with your selection.
       });
 
       if (status !== 0) {
-        console.log(
+        log(
           chalk.red(`Eject failed with exit code ${status}, see above output for any issues.`)
         );
-        console.log(chalk.yellow('You may want to delete the `ios` and/or `android` directories.'));
+        log(chalk.yellow('You may want to delete the `ios` and/or `android` directories.'));
         process.exit(1);
       } else {
-        console.log('Successfully copied template native code.');
+        log('Successfully copied template native code.');
       }
 
       // if the project .babelrc matches the template one, then we don't need to have it around anymore
@@ -148,28 +149,28 @@ Ejecting is permanent! Please be careful with your selection.
 
         if (projectBabelRc === templateBabelRc) {
           await fsp.unlink(projectBabelPath);
-          console.log(
+          log(
             chalk.green(
               `The template .babelrc is no longer necessary after ejecting.
 It has been successfully deleted.`
             )
           );
         } else {
-          console.log(
+          log(
             chalk.yellow(
               `It looks like you modified your .babelrc file.
 Make sure to change your babel preset to \`react-native\`.`
             )
           );
         }
       } catch (e) {
-        console.log(
+        log(
           chalk.yellow(
             `We had an issue preparing your .babelrc for ejection.
 If you have a .babelrc in your project, make sure to change the preset to \`react-native\`.`
           )
         );
-        console.log(chalk.red(e));
+        log(chalk.red(e));
       }
 
       delete pkgJson.main;
@@ -187,14 +188,14 @@ If you have a .babelrc in your project, make sure to change the preset to \`reac
       // no longer relevant to an ejected project (maybe build is?)
       delete pkgJson.scripts.eject;
 
-      console.log(`Updating your ${npmOrYarn} scripts in package.json...`);
+      log(`Updating your ${npmOrYarn} scripts in package.json...`);
 
       await fsp.writeFile(path.resolve('package.json'), JSON.stringify(pkgJson, null, 2));
 
-      console.log(chalk.green('Your package.json is up to date!'));
+      log(chalk.green('Your package.json is up to date!'));
 
       // FIXME now we need to provide platform-specific entry points until upstream uses a single one
-      console.log(`Adding platform-specific entry points...`);
+      log(`Adding platform-specific entry points...`);
 
       const lolThatsSomeComplexCode = `import { AppRegistry } from 'react-native';
 import App from './App';
@@ -204,15 +205,15 @@ AppRegistry.registerComponent('${newName}', () => App);
       await fsp.writeFile(path.resolve('index.ios.js'), lolThatsSomeComplexCode);
       await fsp.writeFile(path.resolve('index.android.js'), lolThatsSomeComplexCode);
 
-      console.log(chalk.green('Added new entry points!'));
+      log(chalk.green('Added new entry points!'));
 
-      console.log(
+      log(
         `
 Note that using \`${npmOrYarn} start\` will now require you to run Xcode and/or
 Android Studio to build the native code for your project.`
       );
 
-      console.log(
+      log(
         chalk.yellow(
           `
 It's recommended to delete your node_modules directory and rerun ${npmOrYarn}
@@ -224,11 +225,11 @@ to ensure that the changes we made to package.json persist correctly.
       await detach();
     } else {
       // we don't want to print the survey for cancellations
-      console.log('OK! If you change your mind you can run this command again.');
+      log('OK! If you change your mind you can run this command again.');
       return;
     }
 
-    console.log(
+    log(
       `${chalk.green('Ejected successfully!')}
 Please consider letting us know why you ejected in this survey:
   ${chalk.cyan('https://goo.gl/forms/iD6pl218r7fn9N0d2')}`

react-native-scripts/src/scripts/init.js

@@ -5,12 +5,13 @@ import fsp from 'fs-promise';
 import path from 'path';
 import pathExists from 'path-exists';
 import spawn from 'cross-spawn';
+import log from '../util/log';
 
 // UPDATE DEPENDENCY VERSIONS HERE
 const DEFAULT_DEPENDENCIES = {
-  expo: '^15.1.0',
+  expo: '^16.0.0-beta.0',
   react: '~15.4.0',
-  'react-native': '0.42.3',
+  'react-native': 'github:expo/react-native#exp-latest',
 };
 
 // TODO figure out how this interacts with ejection
@@ -94,8 +95,8 @@ module.exports = async (appPath: string, appName: string, verbose: boolean, cwd:
     }
   }
 
-  console.log(`Installing dependencies using ${command}...`);
-  console.log();
+  log(`Installing dependencies using ${command}...`);
+  log(); // why is this here
 
   if (command === 'yarnpkg') {
     // it's weird to print a yarn alias that no one uses
@@ -118,7 +119,7 @@ module.exports = async (appPath: string, appName: string, verbose: boolean, cwd:
       cdpath = appPath;
     }
 
-    console.log(
+    log(
       `
 
 Success! Created ${appName} at ${appPath}
@@ -151,13 +152,13 @@ We suggest that you begin by typing:
     );
 
     if (readmeExists) {
-      console.log(
+      log(
         `
 ${chalk.yellow('You had a `README.md` file, we renamed it to `README.old.md`')}`
       );
     }
 
-    console.log();
-    console.log('Happy hacking!');
+    log();
+    log('Happy hacking!');
   });
 };

react-native-scripts/src/scripts/ios.js

@@ -1,10 +1,13 @@
+// @flow
+
 import { Config, ProjectSettings, Simulator, UrlUtils } from 'xdl';
 
 import chalk from 'chalk';
 import indent from 'indent-string';
 import path from 'path';
 import pathExists from 'path-exists';
 import qr from 'qrcode-terminal';
+import log from '../util/log';
 
 import packager from '../util/packager';
 
@@ -15,12 +18,12 @@ Config.offline = true;
 const command: string = pathExists.sync(path.join(process.cwd(), 'yarn.lock')) ? 'yarnpkg' : 'npm';
 
 if (!Simulator.isPlatformSupported()) {
-  console.log(
+  log(
     chalk.red(
       '\nThis command only works on macOS computers with Xcode and the iOS simulator installed.'
     )
   );
-  console.log(
+  log(
     chalk.yellow(
       `If you run \`${chalk.cyan(command + ' start')}\` then you can view your app on a physical device.\n`
     )
@@ -37,12 +40,12 @@ async function startSimulatorAndPrintInfo() {
     hostType: 'localhost',
   });
 
-  console.log('Starting simulator...');
+  log('Starting simulator...');
   const { success, msg } = await Simulator.openUrlInSimulatorSafeAsync(localAddress);
 
   if (success) {
     qr.generate(address, qrCode => {
-      console.log(
+      log(
         `${chalk.green('Packager started!')}
 
 To view your app with live reloading, point the Expo app to this QR code.
@@ -65,7 +68,7 @@ If you restart the simulator or change the simulated hardware, you may need to r
       );
     });
   } else {
-    console.log(
+    log(
       `${chalk.red('Failed to start simulator:')}
 
 ${msg}

react-native-scripts/src/scripts/start.js

@@ -5,6 +5,7 @@ import { Config, ProjectSettings, UrlUtils } from 'xdl';
 import chalk from 'chalk';
 import indent from 'indent-string';
 import qr from 'qrcode-terminal';
+import log from '../util/log';
 
 import packager from '../util/packager';
 
@@ -17,7 +18,7 @@ const args = require('minimist')(process.argv.slice(2), { boolean: ['--reset-cac
 const options = {};
 if (args['reset-cache']) {
   options.reset = true;
-  console.log('Asking packager to reset its cache...');
+  log('Asking packager to reset its cache...');
 }
 
 packager.run(printServerInfo, options);
@@ -28,7 +29,7 @@ async function printServerInfo() {
   // who knows why qrcode-terminal takes a callback instead of just returning a string
   const address = await UrlUtils.constructManifestUrlAsync(process.cwd());
   qr.generate(address, qrCode => {
-    console.log(
+    log(
       `${chalk.green('Packager started!')}
 
 To view your app with live reloading, point the Expo app to this QR code.

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

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