Updates from Thu Mar 5

- [react_native] JS files for D1885531 | Martin Konicek
- Ported TabBarIOS to OSS and unified implementation | Nick Lockwood
- [react-packager] Add minify option as query param | Amjad Masad
- [ReactNative] Fix ExpandingText prop types | Christopher Chedeau
- [react-packager] Make dev a query param option | Amjad Masad

packager.js

@@ -29,10 +29,6 @@ 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) {
@@ -97,7 +93,6 @@ function openStackFrameInEditor(req, res, next) {
 
 function getAppMiddleware(options) {
   return ReactPackager.middleware({
-    dev: options.dev,
     projectRoots: options.projectRoots,
     blacklistRE: blacklist(false),
     cacheVersion: '2',
@@ -106,7 +101,7 @@ function getAppMiddleware(options) {
 }
 
 function runServer(
-  options, /* {string projectRoot, bool web, bool dev} */
+  options, /* {[]string projectRoot, bool web} */
   readyCallback
 ) {
   var app = connect()

react-packager/src/DependencyResolver/haste/__tests__/HasteDependencyResolver-test.js

@@ -24,7 +24,6 @@ describe('HasteDependencyResolver', function() {
 
       var depResolver = new HasteDependencyResolver({
         projectRoot: '/root',
-        dev: false,
       });
 
       // Is there a better way? How can I mock the prototype instead?
@@ -36,7 +35,7 @@ describe('HasteDependencyResolver', function() {
         return q();
       });
 
-      return depResolver.getDependencies('/root/index.js')
+      return depResolver.getDependencies('/root/index.js', { dev: false })
         .then(function(result) {
           expect(result.mainModuleId).toEqual('index');
           expect(result.dependencies).toEqual([
@@ -85,7 +84,6 @@ describe('HasteDependencyResolver', function() {
 
       var depResolver = new HasteDependencyResolver({
         projectRoot: '/root',
-        dev: true,
       });
 
       // Is there a better way? How can I mock the prototype instead?
@@ -97,7 +95,7 @@ describe('HasteDependencyResolver', function() {
         return q();
       });
 
-      return depResolver.getDependencies('/root/index.js')
+      return depResolver.getDependencies('/root/index.js', { dev: true })
         .then(function(result) {
           expect(result.mainModuleId).toEqual('index');
           expect(result.dependencies).toEqual([
@@ -147,7 +145,6 @@ describe('HasteDependencyResolver', function() {
       var depResolver = new HasteDependencyResolver({
         projectRoot: '/root',
         polyfillModuleNames: ['some module'],
-        dev: false,
       });
 
       // Is there a better way? How can I mock the prototype instead?
@@ -159,7 +156,7 @@ describe('HasteDependencyResolver', function() {
         return q();
       });
 
-      return depResolver.getDependencies('/root/index.js')
+      return depResolver.getDependencies('/root/index.js', { dev: false })
         .then(function(result) {
           expect(result.mainModuleId).toEqual('index');
           expect(result.dependencies).toEqual([
@@ -218,7 +215,6 @@ describe('HasteDependencyResolver', function() {
     it('should ', function() {
       var depResolver = new HasteDependencyResolver({
         projectRoot: '/root',
-        dev: false,
       });
 
       var depGraph = depResolver._depGraph;

react-packager/src/DependencyResolver/haste/index.js

@@ -32,10 +32,6 @@ var validateOpts = declareOpts({
     type: 'array',
     default: [],
   },
-  dev: {
-    type: 'boolean',
-    default: true,
-  },
   nonPersistent: {
     type: 'boolean',
     default: false,
@@ -62,20 +58,20 @@ function HasteDependencyResolver(options) {
     fileWatcher: this._fileWatcher
   });
 
-  this._polyfillModuleNames = [
-    opts.dev
-      ? path.join(__dirname, 'polyfills/prelude_dev.js')
-      : path.join(__dirname, 'polyfills/prelude.js'),
-    path.join(__dirname, 'polyfills/require.js'),
-    path.join(__dirname, 'polyfills/polyfills.js'),
-    path.join(__dirname, 'polyfills/console.js'),
-    path.join(__dirname, 'polyfills/error-guard.js'),
-  ].concat(
-    opts.polyfillModuleNames || []
-  );
+
+  this._polyfillModuleNames = opts.polyfillModuleNames || [];
 }
 
-HasteDependencyResolver.prototype.getDependencies = function(main) {
+var getDependenciesValidateOpts = declareOpts({
+  dev: {
+    type: 'boolean',
+    default: true,
+  },
+});
+
+HasteDependencyResolver.prototype.getDependencies = function(main, options) {
+  var opts = getDependenciesValidateOpts(options);
+
   var depGraph = this._depGraph;
   var self = this;
 
@@ -84,7 +80,7 @@ HasteDependencyResolver.prototype.getDependencies = function(main) {
       var dependencies = depGraph.getOrderedDependencies(main);
       var mainModuleId = dependencies[0].id;
 
-      self._prependPolyfillDependencies(dependencies);
+      self._prependPolyfillDependencies(dependencies, opts.dev);
 
       return {
         mainModuleId: mainModuleId,
@@ -94,10 +90,19 @@ HasteDependencyResolver.prototype.getDependencies = function(main) {
 };
 
 HasteDependencyResolver.prototype._prependPolyfillDependencies = function(
-  dependencies
+  dependencies,
+  isDev
 ) {
-  var polyfillModuleNames = this._polyfillModuleNames;
-  if (polyfillModuleNames.length > 0) {
+  var polyfillModuleNames = [
+   isDev
+      ? path.join(__dirname, 'polyfills/prelude_dev.js')
+      : path.join(__dirname, 'polyfills/prelude.js'),
+    path.join(__dirname, 'polyfills/require.js'),
+    path.join(__dirname, 'polyfills/polyfills.js'),
+    path.join(__dirname, 'polyfills/console.js'),
+    path.join(__dirname, 'polyfills/error-guard.js'),
+  ].concat(this._polyfillModuleNames);
+
   var polyfillModules = polyfillModuleNames.map(
     function(polyfillModuleName, idx) {
       return new ModuleDescriptor({
@@ -109,7 +114,6 @@ HasteDependencyResolver.prototype._prependPolyfillDependencies = function(
     }
   );
   dependencies.unshift.apply(dependencies, polyfillModules);
-  }
 };
 
 HasteDependencyResolver.prototype.wrapModule = function(module, code) {

react-packager/src/JSTransformer/index.js

@@ -34,10 +34,6 @@ var validateOpts = declareOpts({
     type: 'boolean',
     default: false,
   },
-  dev: {
-    type: 'boolean',
-    default: true,
-  },
   transformModulePath: {
     type:'string',
     required: false,

react-packager/src/Packager/Package.js

@@ -7,6 +7,7 @@ var UglifyJS = require('uglify-js');
 module.exports = Package;
 
 function Package(sourceMapUrl) {
+  this._finalized = false;
   this._modules = [];
   this._sourceMapUrl = sourceMapUrl;
 }
@@ -40,23 +41,56 @@ Package.prototype.finalize = function(options) {
 
   Object.freeze(this._modules);
   Object.seal(this._modules);
+  this._finalized = true;
 };
 
-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) + ';';
+Package.prototype._assertFinalized = function() {
+  if (!this._finalized) {
+    throw new Error('Package need to be finalized before getting any source');
   }
-    this._source += '\n\/\/@ sourceMappingURL=' + this._sourceMapUrl;
+};
+
+Package.prototype._getSource = function() {
+  if (this._source == null) {
+    this._source = _.pluck(this._modules, 'transformedCode').join('\n');
   }
   return this._source;
 };
 
+Package.prototype._getInlineSourceMap = function() {
+  if (this._inlineSourceMap == null) {
+    var sourceMap = this.getSourceMap({excludeSource: true});
+    this._inlineSourceMap = '\nRAW_SOURCE_MAP = ' +
+      JSON.stringify(sourceMap) + ';';
+  }
+
+  return this._inlineSourceMap;
+};
+
+Package.prototype.getSource = function(options) {
+  this._assertFinalized();
+
+  options = options || {};
+
+  if (options.minify) {
+    return this.getMinifiedSourceAndMap().code;
+  }
+
+  var source = this._getSource();
+
+  if (options.inlineSourceMap) {
+    source += this._getInlineSourceMap();
+  }
+
+  source += '\n\/\/@ sourceMappingURL=' + this._sourceMapUrl;
+
+  return source;
+};
+
 Package.prototype.getMinifiedSourceAndMap = function() {
-  var source = this.getSource({inlineSourceMap: false});
+  this._assertFinalized();
+
+  var source = this._getSource();
   try {
     return UglifyJS.minify(source, {
       fromString: true,
@@ -88,6 +122,8 @@ Package.prototype.getMinifiedSourceAndMap = function() {
 };
 
 Package.prototype.getSourceMap = function(options) {
+  this._assertFinalized();
+
   options = options || {};
   var mappings = this._getMappings();
   var map = {
@@ -102,7 +138,6 @@ Package.prototype.getSourceMap = function(options) {
   return map;
 };
 
-
 Package.prototype._getMappings = function() {
   var modules = this._modules;
 

react-packager/src/Packager/index.js

@@ -36,10 +36,6 @@ var validateOpts = declareOpts({
     type: 'boolean',
     default: false,
   },
-  dev: {
-    type: 'boolean',
-    default: true,
-  },
   transformModulePath: {
     type:'string',
     required: false,
@@ -59,7 +55,6 @@ function Packager(options) {
     projectRoots: opts.projectRoots,
     blacklistRE: opts.blacklistRE,
     polyfillModuleNames: opts.polyfillModuleNames,
-    dev: opts.dev,
     nonPersistent: opts.nonPersistent,
     moduleFormat: opts.moduleFormat
   });
@@ -69,7 +64,6 @@ function Packager(options) {
     blacklistRE: opts.blacklistRE,
     cacheVersion: opts.cacheVersion,
     resetCache: opts.resetCache,
-    dev: opts.dev,
     transformModulePath: opts.transformModulePath,
     nonPersistent: opts.nonPersistent,
   });
@@ -82,14 +76,14 @@ Packager.prototype.kill = function() {
   ]);
 };
 
-Packager.prototype.package = function(main, runModule, sourceMapUrl) {
+Packager.prototype.package = function(main, runModule, sourceMapUrl, isDev) {
   var transformModule = this._transformModule.bind(this);
   var ppackage = new Package(sourceMapUrl);
 
   var findEventId = Activity.startEvent('find dependencies');
   var transformEventId;
 
-  return this.getDependencies(main)
+  return this.getDependencies(main, isDev)
     .then(function(result) {
       Activity.endEvent(findEventId);
       transformEventId = Activity.startEvent('transform');
@@ -119,8 +113,8 @@ Packager.prototype.invalidateFile = function(filePath) {
   this._transformer.invalidateFile(filePath);
 };
 
-Packager.prototype.getDependencies = function(main) {
-  return this._resolver.getDependencies(main);
+Packager.prototype.getDependencies = function(main, isDev) {
+  return this._resolver.getDependencies(main, { dev: isDev });
 };
 
 Packager.prototype._transformModule = function(module) {

react-packager/src/Server/index.js

@@ -35,10 +35,6 @@ var validateOpts = declareOpts({
     type: 'boolean',
     default: false,
   },
-  dev: {
-    type: 'boolean',
-    default: true,
-  },
   transformModulePath: {
     type:'string',
     required: false,
@@ -51,7 +47,6 @@ 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);
@@ -73,14 +68,16 @@ 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 = getOptionsFromUrl(key);
     packages[key] = buildPackage(options).then(function(p) {
       // Make a throwaway call to getSource to cache the source string.
-      p.getSource({inlineSourceMap: dev});
+      p.getSource({
+        inlineSourceMap: options.dev,
+        minify: options.minify,
+      });
       return p;
     });
   });
@@ -97,7 +94,8 @@ Server.prototype._buildPackage = function(options) {
   return this._packager.package(
     options.main,
     options.runModule,
-    options.sourceMapUrl
+    options.sourceMapUrl,
+    options.dev
   );
 };
 
@@ -166,11 +164,13 @@ Server.prototype.processRequest = function(req, res, next) {
   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({inlineSourceMap: dev}));
+        res.end(p.getSource({
+          inlineSourceMap: options.dev,
+          minify: options.minify,
+        }));
         Activity.endEvent(startReqEventId);
       } else if (requestType === 'map') {
         res.end(JSON.stringify(p.getSourceMap()));
@@ -196,8 +196,9 @@ function getOptionsFromUrl(reqUrl) {
   return {
     sourceMapUrl: urlObj.pathname.replace(/\.bundle$/, '.map'),
     main: main,
-    runModule: urlObj.query.runModule === 'true' ||
-      urlObj.query.runModule === '1' ||
+    dev: getBoolOptionFromQuery(urlObj.query, 'dev'),
+    minify: getBoolOptionFromQuery(urlObj.query, 'minify'),
+    runModule: getBoolOptionFromQuery(urlObj.query, 'runModule') ||
       // Backwards compatibility.
       urlObj.pathname.split('.').some(function(part) {
         return part === 'runModule';
@@ -205,6 +206,10 @@ function getOptionsFromUrl(reqUrl) {
   };
 }
 
+function getBoolOptionFromQuery(query, opt) {
+  return query[opt] === 'true' || query[opt] === '1';
+}
+
 function handleError(res, error) {
   res.writeHead(500, {
     'Content-Type': 'application/json; charset=UTF-8',

react-packager/src/lib/declareOpts.js

@@ -42,6 +42,8 @@ module.exports = function(descriptor) {
   var schema = Joi.object().keys(joiKeys);
 
   return function(opts) {
+    opts = opts || {};
+
     var res = Joi.validate(opts, schema, {
       abortEarly: true,
       allowUnknown: false,