[react-packager] Add dev option to CLI | James Ide

Summary: Exposes the dev option that is already there to the CLI so that you can turn off invariant checks, etc. I also made it omit the inlined source map when dev=false which made it a lot faster to run on a phone, both due to smaller download size and fewer bytes to copy from Obj-C to JS and evaluate. Closes facebook#112 Github Author: James Ide <[email protected]> Test Plan: * ./runJestTests.sh * test bundle creation with `bundle.sh` * test `load_dependencies.js` script * start the server and click around shell app
vjeux · Mar 3, 2015 · e5d86ae · e5d86ae
1 parent bb70408
commit e5d86ae
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 11 deletions.
diff --git a/packager/packager.js b/packager/packager.js
@@ -29,6 +29,10 @@ var options = parseCommandLine([{
 }, {
   command: 'root',
   description: 'add another root(s) to be used by the packager in this project',
+}, {
+  command: 'dev',
+  default: true,
+  description: 'produce development packages with extra warnings enabled',
 }]);
 
 if (!options.projectRoots) {
@@ -93,7 +97,7 @@ function openStackFrameInEditor(req, res, next) {
 
 function getAppMiddleware(options) {
   return ReactPackager.middleware({
-    dev: true,
+    dev: options.dev,
     projectRoots: options.projectRoots,
     blacklistRE: blacklist(false),
     cacheVersion: '2',

diff --git a/packager/react-packager/src/Packager/Package.js b/packager/react-packager/src/Packager/Package.js
@@ -40,12 +40,17 @@ Package.prototype.finalize = function(options) {
   Object.seal(this._modules);
 };
 
-Package.prototype.getSource = function() {
-  return this._source || (
-    this._source = _.pluck(this._modules, 'transformedCode').join('\n') + '\n' +
-    'RAW_SOURCE_MAP = ' + JSON.stringify(this.getSourceMap({excludeSource: true})) +
-    ';\n' + '\/\/@ sourceMappingURL=' + this._sourceMapUrl
-  );
+Package.prototype.getSource = function(options) {
+  if (!this._source) {
+    options = options || {};
+    this._source = _.pluck(this._modules, 'transformedCode').join('\n');
+    if (options.inlineSourceMap) {
+      var sourceMap = this.getSourceMap({excludeSource: true});
+      this._source += '\nRAW_SOURCE_MAP = ' + JSON.stringify(sourceMap) + ';';
+    }
+    this._source += '\n\/\/@ sourceMappingURL=' + this._sourceMapUrl;
+  }
+  return this._source;
 };
 
 Package.prototype.getSourceMap = function(options) {

diff --git a/packager/react-packager/src/Packager/__tests__/Package-test.js b/packager/react-packager/src/Packager/__tests__/Package-test.js
@@ -21,7 +21,7 @@ describe('Package', function() {
       ppackage.addModule('transformed foo;', 'source foo', 'foo path');
       ppackage.addModule('transformed bar;', 'source bar', 'bar path');
       ppackage.finalize({});
-      expect(ppackage.getSource()).toBe([
+      expect(ppackage.getSource({inlineSourceMap: true})).toBe([
         'transformed foo;',
         'transformed bar;',
         'RAW_SOURCE_MAP = "test-source-map";',
@@ -34,7 +34,7 @@ describe('Package', function() {
       ppackage.addModule('transformed bar;', 'source bar', 'bar path');
       ppackage.setMainModuleId('foo');
       ppackage.finalize({runMainModule: true});
-      expect(ppackage.getSource()).toBe([
+      expect(ppackage.getSource({inlineSourceMap: true})).toBe([
         'transformed foo;',
         'transformed bar;',
         ';require("foo");',

diff --git a/packager/react-packager/src/Server/index.js b/packager/react-packager/src/Server/index.js
@@ -51,6 +51,7 @@ var validateOpts = declareOpts({
 
 function Server(options) {
   var opts = validateOpts(options);
+  this._dev = opts.dev;
   this._projectRoots = opts.projectRoots;
   this._packages = Object.create(null);
   this._packager = new Packager(opts);
@@ -72,13 +73,14 @@ Server.prototype._onFileChange = function(type, filepath, root) {
 };
 
 Server.prototype._rebuildPackages = function() {
+  var dev = this._dev;
   var buildPackage = this._buildPackage.bind(this);
   var packages = this._packages;
   Object.keys(packages).forEach(function(key) {
     var options = getOptionsFromPath(url.parse(key).pathname);
     packages[key] = buildPackage(options).then(function(p) {
       // Make a throwaway call to getSource to cache the source string.
-      p.getSource();
+      p.getSource({inlineSourceMap: dev});
       return p;
     });
   });
@@ -159,10 +161,11 @@ Server.prototype.processRequest = function(req, res, next) {
   var options = getOptionsFromPath(url.parse(req.url).pathname);
   var building = this._packages[req.url] || this._buildPackage(options);
   this._packages[req.url] = building;
+  var dev = this._dev;
   building.then(
     function(p) {
       if (requestType === 'bundle') {
-        res.end(p.getSource());
+        res.end(p.getSource({inlineSourceMap: dev}));
         Activity.endEvent(startReqEventId);
       } else if (requestType === 'map') {
         res.end(JSON.stringify(p.getSourceMap()));