From e5d86aeb5b3ae907bfda7455fc2434b7a7f6608b Mon Sep 17 00:00:00 2001 From: James Ide Date: Mon, 2 Mar 2015 20:46:45 -0800 Subject: [PATCH] [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 https://github.com/facebook/react-native/pull/112 Github Author: James Ide Test Plan: * ./runJestTests.sh * test bundle creation with `bundle.sh` * test `load_dependencies.js` script * start the server and click around shell app --- packager/packager.js | 6 +++++- packager/react-packager/src/Packager/Package.js | 17 +++++++++++------ .../src/Packager/__tests__/Package-test.js | 4 ++-- packager/react-packager/src/Server/index.js | 7 +++++-- 4 files changed, 23 insertions(+), 11 deletions(-) diff --git a/packager/packager.js b/packager/packager.js index 6d5336ef4..08bab38b0 100644 --- 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 index a4080d3b3..cc0c32920 100644 --- 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 index 74a2f4379..572516c0a 100644 --- 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 index accce205a..83592fea9 100644 --- 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()));