Sourcemaps support for RAM

Summary:This rev adds support for production sourcemaps on RAM.

When we inject a module into JSC we use the original `sourceURL` and specify the `startingLineNumber` of the module relative to a "regular" bundle. By doing so, when an error is thrown, JSC will include the provided `sourceURL` as the filename and will use the indicated `startingLineNumber` to figure out on which line the error actually occurred.

To make things a bit simpler and avoid having to deal with columns, we tweak the generated bundle so that each module starts on a new line. Since we cannot assure that each module's code will be on a single line as the minifier might break it on multiple (UglifyJS does so due to a bug on old versions of Chrome), we include on the index the line number that should be used when invoking `JSEvaluateScript`. Since the module length was not being used we replaced the placeholder we have there for the line number.

Reviewed By: javache

Differential Revision: D2997520

fb-gh-sync-id: 3243a489cbb5b48a963f4ccdd98ba63b30f53f3f
shipit-source-id: 3243a489cbb5b48a963f4ccdd98ba63b30f53f3f

react-packager/src/Bundler/Bundle.js

@@ -16,9 +16,6 @@ const crypto = require('crypto');
 
 const SOURCEMAPPING_URL = '\n\/\/# sourceMappingURL=';
 
-const getCode = x => x.code;
-const getNameAndCode = ({name, code}) => ({name, code});
-
 class Bundle extends BundleBase {
   constructor({sourceMapUrl, minify} = {}) {
     super();
@@ -40,6 +37,7 @@ class Bundle extends BundleBase {
       map: moduleTransport.map,
       meta: moduleTransport.meta,
       minify: this._minify,
+      polyfill: module.isPolyfill(),
     }).then(({code, map}) => {
       // If we get a map from the transformer we'll switch to a mode
       // were we're combining the source maps as opposed to
@@ -113,20 +111,21 @@ class Bundle extends BundleBase {
     const modules =
       allModules
         .splice(prependedModules, allModules.length - requireCalls - prependedModules);
-    const startupCode = allModules.map(getCode).join('\n');
+    const startupCode = allModules.map(({code}) => code).join('\n');
 
     return {
       startupCode,
-      modules: modules.map(getNameAndCode)
+      modules: modules.map(({name, code, polyfill}) =>
+        ({name, code, polyfill})
+      ),
     };
   }
 
   /**
-   * I found a neat trick in the sourcemap spec that makes it easy
+   * Combine each of the sourcemaps multiple modules have into a single big
-   * to concat sourcemaps. The `sections` field allows us to combine
+   * one. This works well thanks to a neat trick defined on the sourcemap spec
-   * the sourcemap easily by adding an offset. Tested on chrome.
+   * that makes use of of the `sections` field to combine sourcemaps by adding
-   * Seems like it's not yet in Firefox but that should be fine for
+   * an offset. This is supported only by Chrome for now.
-   * now.
    */
   _getCombinedSourceMaps(options) {
     const result = {

react-packager/src/Bundler/__tests__/Bundle-test.js

@@ -123,7 +123,7 @@ describe('Bundle', () => {
       };
 
       const promise = Promise.all(
-        moduleTransports.map(m => bundle.addModule(resolver, null, null, m)))
+        moduleTransports.map(m => bundle.addModule(resolver, null, {isPolyfill: () => false}, m)))
       .then(() => {
         expect(bundle.getModules())
           .toEqual(moduleTransports);
@@ -375,12 +375,19 @@ function resolverFor(code, map) {
   };
 }
 
-function addModule({bundle, code, sourceCode, sourcePath, map, virtual}) {
+function addModule({bundle, code, sourceCode, sourcePath, map, virtual, polyfill}) {
   return bundle.addModule(
     resolverFor(code, map),
     null,
-    null,
+    {isPolyfill: () => polyfill},
-    createModuleTransport({code, sourceCode, sourcePath, map, virtual})
+    createModuleTransport({
+      code,
+      sourceCode,
+      sourcePath,
+      map,
+      virtual,
+      polyfill,
+    }),
   );
 }
 

react-packager/src/Bundler/__tests__/Bundler-test.js

@@ -204,6 +204,7 @@ describe('Bundler', function() {
           transform: {
             dev: true,
             hot: false,
+            generateSourceMaps: false,
             projectRoots,
           }
         },

react-packager/src/Bundler/index.js

@@ -230,8 +230,9 @@ class Bundler {
     platform,
     moduleSystemDeps = [],
     hot,
+    unbundle,
     entryModuleOnly,
-    resolutionResponse
+    resolutionResponse,
   }) {
     const onResolutionResponse = response => {
       bundle.setMainModuleId(response.mainModuleId);
@@ -265,6 +266,7 @@ class Bundler {
       platform,
       bundle,
       hot,
+      unbundle,
       resolutionResponse,
       onResolutionResponse,
       finalizeBundle,
@@ -316,6 +318,7 @@ class Bundler {
     platform,
     bundle,
     hot,
+    unbundle,
     resolutionResponse,
     onResolutionResponse = noop,
     onModuleTransformed = noop,
@@ -336,8 +339,15 @@ class Bundler {
         };
       }
 
-      resolutionResponse = this.getDependencies(
+      resolutionResponse = this.getDependencies({
-        {entryFile, dev, platform, hot, onProgess, minify});
+        entryFile,
+        dev,
+        platform,
+        hot,
+        onProgess,
+        minify,
+        generateSourceMaps: unbundle,
+      });
     }
 
     return Promise.resolve(resolutionResponse).then(response => {
@@ -391,10 +401,18 @@ class Bundler {
     minify = !dev,
     hot = false,
     recursive = true,
+    generateSourceMaps = false,
     onProgess,
   }) {
     return this.getTransformOptions(
-      entryFile, {dev, platform, hot, projectRoots: this._projectRoots}
+      entryFile,
+      {
+        dev,
+        platform,
+        hot,
+        generateSourceMaps,
+        projectRoots: this._projectRoots,
+      },
     ).then(transformSpecificOptions => {
       const transformOptions = {
         minify,

react-packager/src/Resolver/index.js

@@ -261,6 +261,10 @@ class Resolver {
       : result;
   }
 
+  minifyModule({path, code, map}) {
+    return this._minifyCode(path, code, map);
+  }
+
   getDebugInfo() {
     return this._depGraph.getDebugInfo();
   }

react-packager/src/lib/ModuleTransport.js

@@ -22,6 +22,7 @@ function ModuleTransport(data) {
 
   this.virtual = data.virtual;
   this.meta = data.meta;
+  this.polyfill = data.polyfill;
   this.map = data.map;
 
   Object.freeze(this);