BREAKING: Bump metro-bundler to v0.21.0

Summary:
`metro-bundler` v0.21 contains a rewritten bundling mechanism, with simplified logic and much faster rebuild times, called delta bundler. This release contains a couple of breaking changes:

* Now, when using a custom transformer, the list of additional babel plugins to apply are passed to the `transform()` method. These are used in non-dev mode for optimization purposes (Check 367a5f5db8 (diff-40653f0c822ac59a5af13d5b4ab31d84) to see how to handle them from the transformer).
* Now, when using a custom transformer outputting `rawMappings`, the transformer does not need to call the `compactMappings` method before returning (check d74685fd1d (diff-40653f0c822ac59a5af13d5b4ab31d84) for more info).
* We've removed support for two config parameters: `postProcessModules` and `postProcessBundleSourcemap`.

Reviewed By: davidaurelio

Differential Revision: D6186035

fbshipit-source-id: 242c5c2a954c6b9b6f339d345f888eaa44704579

local-cli/bundle/buildBundle.js

@@ -48,16 +48,7 @@ const {ASSET_REGISTRY_PATH} = require('../core/Constants');
 import type {RequestOptions, OutputOptions} from './types.flow';
 import type {ConfigT} from 'metro-bundler';
 
-function saveBundle(output, bundle, args) {
+async function buildBundle(
-  return Promise.resolve(
-    /* $FlowFixMe(>=0.56.0 site=react_native_oss) This comment suppresses an
-     * error found when Flow v0.56 was deployed. To see the error delete this
-     * comment and run Flow. */
-    output.save(bundle, args, log)
-  ).then(() => bundle);
-}
-
-function buildBundle(
   args: OutputOptions & {
     assetsDest: mixed,
     entryFile: string,
@@ -129,7 +120,6 @@ function buildBundle(
       sourceExts: defaultSourceExts.concat(sourceExts),
       transformCache: TransformCaching.useTempDir(),
       transformModulePath: transformModulePath,
-      useDeltaBundler: false,
       watch: false,
       workerPath: config.getWorkerPath && config.getWorkerPath(),
     };
@@ -138,26 +128,27 @@ function buildBundle(
     shouldClosePackager = true;
   }
 
-  const bundlePromise = output.build(packagerInstance, requestOpts)
+  const bundle = await output.build(packagerInstance, requestOpts);
-    .then(bundle => {
+
-      if (shouldClosePackager) {
+  await output.save(bundle, args, log);
-        packagerInstance.end();
-      }
-      return saveBundle(output, bundle, args);
-    });
 
   // Save the assets of the bundle
-  const assets = bundlePromise
+  const outputAssets = await packagerInstance.getAssets({
-    // TODO: Use the packager.getAssets() method to get the bundle assets.
+    ...Server.DEFAULT_BUNDLE_OPTIONS,
-    // $FlowFixMe: This code is going away.
+    ...requestOpts,
-    .then(bundle => bundle.getAssets && bundle.getAssets())
+  });
-    .then(outputAssets => outputAssets && saveAssets(
+
+  // When we're done saving bundle output and the assets, we're done.
+  const assets = await saveAssets(
     outputAssets,
     args.platform,
     args.assetsDest,
-    ));
+  );
+
+  if (shouldClosePackager) {
+    packagerInstance.end();
+  }
 
-  // When we're done saving bundle output and the assets, we're done.
   return assets;
 }
 

local-cli/server/middleware/getDevToolsMiddleware.js

@@ -25,10 +25,7 @@ function escapePath(pathname) {
   return '"' + pathname + '"';
 }
 
-function launchDevTools(
+function launchDevTools({port, projectRoots}, isChromeConnected) {
-  {port, projectRoots, useDeltaBundler},
-  isChromeConnected,
-) {
   // Explicit config always wins
   var customDebugger = process.env.REACT_DEBUGGER;
   if (customDebugger) {
@@ -42,7 +39,7 @@ function launchDevTools(
     });
   } else if (!isChromeConnected()) {
     // Dev tools are not yet open; we need to open a session
-    launchChromeDevTools(port, useDeltaBundler ? '#useDeltaBundler' : '');
+    launchChromeDevTools(port);
   }
 }
 

local-cli/server/runServer.js

@@ -17,12 +17,15 @@ require('../../setupBabel')();
  * found when Flow v0.54 was deployed. To see the error delete this comment and
  * run Flow. */
 const ReactPackager = require('metro-bundler');
+
+const HmrServer = require('metro-bundler/src/HmrServer');
+
 /* $FlowFixMe(>=0.54.0 site=react_native_oss) This comment suppresses an error
  * found when Flow v0.54 was deployed. To see the error delete this comment and
  * run Flow. */
 const Terminal = require('metro-bundler/src/lib/Terminal');
 
-const attachHMRServer = require('./util/attachHMRServer');
+const attachWebsocketServer = require('./util/attachWebsocketServer');
 /* $FlowFixMe(>=0.54.0 site=react_native_oss) This comment suppresses an error
  * found when Flow v0.54 was deployed. To see the error delete this comment and
  * run Flow. */
@@ -131,10 +134,10 @@ function runServer(
     : http.createServer(app);
 
   serverInstance.listen(args.port, args.host, 511, function() {
-    attachHMRServer({
+    attachWebsocketServer({
       httpServer: serverInstance,
       path: '/hot',
-      packagerServer,
+      websocketServer: new HmrServer(packagerServer, reporter),
     });
 
     wsProxy = webSocketProxy.attachToServer(serverInstance, '/debugger-proxy');
@@ -200,7 +203,6 @@ function getPackagerServer(args, config, reporter) {
     sourceExts: defaultSourceExts.concat(args.sourceExts),
     transformModulePath: transformModulePath,
     transformCache: TransformCaching.useTempDir(),
-    useDeltaBundler: false,
     verbose: args.verbose,
     watch: !args.nonPersistent,
     workerPath: config.getWorkerPath(),

local-cli/server/util/debugger-ui/index.html

@@ -206,10 +206,6 @@
   connectToDebuggerProxy();
 
   async function getBlobUrl(url) {
-    if (window.location.hash.indexOf('useDeltaBundler') === -1) {
-      return url;
-    }
-
     return await window.deltaUrlToBlobUrl(url.replace('.bundle', '.delta'));
   }
 })();

package.json

@@ -172,7 +172,7 @@
     "graceful-fs": "^4.1.3",
     "inquirer": "^3.0.6",
     "lodash": "^4.16.6",
-    "metro-bundler": "^0.20.0",
+    "metro-bundler": "^0.21.0",
     "mime": "^1.3.4",
     "minimist": "^1.2.0",
     "mkdirp": "^0.5.1",