Updates from Fri 24 Apr

debugger.html

@@ -41,13 +41,13 @@ var messageHandlers = {
     window.localStorage.setItem('sessionID', message.id);
     window.location.reload();
   },
-  'executeApplicationScript:sourceURL:onComplete:': function(message, sendReply) {
+  'executeApplicationScript': function(message, sendReply) {
     for (var key in message.inject) {
       window[key] = JSON.parse(message.inject[key]);
     }
     loadScript(message.url, sendReply.bind(null, null));
   },
-  'executeJSCall:method:arguments:callback:': function(message, sendReply) {
+  'executeJSCall': function(message, sendReply) {
     var returnValue = [[], [], [], [], []];
     try {
       if (window && window.require) {

getFlowTypeCheckMiddleware.js

@@ -10,12 +10,14 @@
 
 var chalk = require('chalk');
 var exec = require('child_process').exec;
+var Activity = require('./react-packager/src/Activity');
 
 var hasWarned = {};
 
 function getFlowTypeCheckMiddleware(options) {
   return function(req, res, next) {
-    if (options.skipflow) {
+    var isBundle = req.url.indexOf('.bundle') !== -1;
+    if (options.skipflow || !isBundle) {
       return next();
     }
     if (options.flowroot || options.projectRoots.length === 1) {
@@ -44,20 +46,10 @@ function getFlowTypeCheckMiddleware(options) {
 
 function doFlowTypecheck(res, flowroot, next) {
   var flowCmd = 'cd "' + flowroot + '" && flow --json --timeout 20';
-  var start = Date.now();
-  // Log start message if flow is slow to let user know something is happening.
-  var flowSlow = setTimeout(
-    function() {
-      console.log(chalk.gray('flow: Running static typechecks.'));
-    },
-    500
-  );
+  var eventId = Activity.startEvent('flow static typechecks');
   exec(flowCmd, function(flowError, stdout, stderr) {
-    clearTimeout(flowSlow);
+    Activity.endEvent(eventId);
     if (!flowError) {
-      console.log(chalk.gray(
-        'flow: Typechecks passed (' + (Date.now() - start) + 'ms).')
-      );
       return next();
     } else {
       try {

launchEditor.js

@@ -8,23 +8,21 @@
  */
 'use strict';
 
+var chalk = require('chalk');
 var fs = require('fs');
-var spawn = require('child_process').spawn;
+var exec = require('child_process').exec;
 
-var firstLaunch = true;
-
-function guessEditor() {
-  if (firstLaunch) {
-    console.log('When you see Red Box with stack trace, you can click any ' +
-      'stack frame to jump to the source file. The packager will launch your ' +
-      'editor of choice. It will first look at REACT_EDITOR environment ' +
-      'variable, then at EDITOR. To set it up, you can add something like ' +
-      'REACT_EDITOR=atom to your .bashrc.');
-    firstLaunch = false;
-  }
-
-  var editor = process.env.REACT_EDITOR || process.env.EDITOR || 'subl';
-  return editor;
+function printInstructions(title) {
+  console.log([
+    '',
+    chalk.bgBlue.white.bold(' ' + title + ' '),
+    '  When you see Red Box with stack trace, you can click any ',
+    '  stack frame to jump to the source file. The packager will launch your ',
+    '  editor of choice. It will first look at REACT_EDITOR environment ',
+    '  variable, then at EDITOR. To set it up, you can add something like ',
+    '  REACT_EDITOR=atom to your .bashrc.',
+    ''
+  ].join('\n'));
 }
 
 function launchEditor(fileName, lineNumber) {
@@ -37,9 +35,18 @@ function launchEditor(fileName, lineNumber) {
     argument += ':' + lineNumber;
   }
 
-  var editor = guessEditor();
-  console.log('Opening ' + fileName + ' with ' + editor);
-  spawn(editor, [argument], { stdio: ['pipe', 'pipe', process.stderr] });
+  var editor = process.env.REACT_EDITOR || process.env.EDITOR;
+  if (editor) {
+    console.log('Opening ' + chalk.underline(fileName) + ' with ' + chalk.bold(editor));
+    exec(editor + ' ' + argument, function(error) {
+      if (error) {
+        console.log(chalk.red(error.message));
+        printInstructions('How to fix');
+      }
+    });
+  } else {
+    printInstructions('PRO TIP');
+  }
 }
 
 module.exports = launchEditor;

packager.js

@@ -200,6 +200,7 @@ function getAppMiddleware(options) {
     cacheVersion: '2',
     transformModulePath: require.resolve('./transformer.js'),
     assetRoots: options.assetRoots,
+    assetExts: ['png', 'jpeg', 'jpg']
   });
 }
 

react-packager/src/Activity/__mocks__/chalk.js

@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ */
+'use strict';
+
+module.exports = {
+  dim: function(s) { return s; },
+};

react-packager/src/Activity/index.js

@@ -8,6 +8,8 @@
  */
 'use strict';
 
+var chalk = require('chalk');
+
 var COLLECTION_PERIOD = 1000;
 
 var _endedEvents = Object.create(null);
@@ -132,22 +134,22 @@ function _writeAction(action) {
 
   switch (action.action) {
     case 'startEvent':
-      console.log(
+      console.log(chalk.dim(
         '[' + fmtTime + '] ' +
         '<START> ' + action.eventName +
         data
-      );
+      ));
       break;
 
     case 'endEvent':
       var startAction = _eventStarts[action.eventId];
       var startData = startAction.data ? ': ' + JSON.stringify(startAction.data) : '';
-      console.log(
+      console.log(chalk.dim(
         '[' + fmtTime + '] ' +
         '<END>   ' + startAction.eventName +
-        '(' + (action.tstamp - startAction.tstamp) + 'ms)' +
+        ' (' + (action.tstamp - startAction.tstamp) + 'ms)' +
         startData
-      );
+      ));
       delete _eventStarts[action.eventId];
       break;
 

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

@@ -1,72 +1,82 @@
 'use strict';
 
 jest
-  .autoMockOff()
-  .mock('../../lib/declareOpts')
-  .mock('fs');
+  .dontMock('path')
+  .dontMock('../../lib/getAssetDataFromName')
+  .dontMock('../');
 
-var fs = require('fs');
-var AssetServer = require('../');
 var Promise = require('bluebird');
 
 describe('AssetServer', function() {
-  pit('should work for the simple case', function() {
-    var server = new AssetServer({
-      projectRoots: ['/root'],
-      assetExts: ['png'],
-    });
+  var AssetServer;
+  var crypto;
+  var fs;
 
-    fs.__setMockFilesystem({
-      'root': {
-        imgs: {
-          'b.png': 'b image',
-          'b@2x.png': 'b2 image',
+  beforeEach(function() {
+    AssetServer = require('../');
+    crypto = require('crypto');
+    fs = require('fs');
+  });
+
+  describe('assetServer.get', function() {
+    pit('should work for the simple case', function() {
+      var server = new AssetServer({
+        projectRoots: ['/root'],
+        assetExts: ['png'],
+      });
+
+      fs.__setMockFilesystem({
+        'root': {
+          imgs: {
+            'b.png': 'b image',
+            'b@2x.png': 'b2 image',
+          }
         }
-      }
-    });
+      });
 
-    return Promise.all([
-      server.get('imgs/b.png'),
-      server.get('imgs/b@1x.png'),
-    ]).then(function(resp) {
-      resp.forEach(function(data) {
-        expect(data).toBe('b image');
+      return Promise.all([
+        server.get('imgs/b.png'),
+        server.get('imgs/b@1x.png'),
+      ]).then(function(resp) {
+        resp.forEach(function(data) {
+          expect(data).toBe('b image');
+        });
       });
     });
-  });
 
-  pit.only('should pick the bigger one', function() {
-    var server = new AssetServer({
-      projectRoots: ['/root'],
-      assetExts: ['png'],
-    });
+    pit('should pick the bigger one', function() {
+      var server = new AssetServer({
+        projectRoots: ['/root'],
+        assetExts: ['png'],
+      });
 
-    fs.__setMockFilesystem({
-      'root': {
-        imgs: {
-          'b@1x.png': 'b1 image',
-          'b@2x.png': 'b2 image',
-          'b@4x.png': 'b4 image',
-          'b@4.5x.png': 'b4.5 image',
+      fs.__setMockFilesystem({
+        'root': {
+          imgs: {
+            'b@1x.png': 'b1 image',
+            'b@2x.png': 'b2 image',
+            'b@4x.png': 'b4 image',
+            'b@4.5x.png': 'b4.5 image',
+          }
         }
-      }
+      });
+
+      return server.get('imgs/b@3x.png').then(function(data) {
+        expect(data).toBe('b4 image');
+      });
     });
 
-    return server.get('imgs/b@3x.png').then(function(data) {
-      expect(data).toBe('b4 image');
-    });
-  });
+    pit('should support multiple project roots', function() {
+      var server = new AssetServer({
+        projectRoots: ['/root', '/root2'],
+        assetExts: ['png'],
+      });
 
-  pit('should support multiple project roots', function() {
-    var server = new AssetServer({
-      projectRoots: ['/root'],
-      assetExts: ['png'],
-    });
-
-    fs.__setMockFilesystem({
-      'root': {
-        imgs: {
-          'b.png': 'b image',
+      fs.__setMockFilesystem({
+        'root': {
+          imgs: {
+            'b.png': 'b image',
+          },
         },
         'root2': {
           'newImages': {
@@ -75,11 +85,53 @@ describe('AssetServer', function() {
             },
           },
         },
-      }
-    });
+      });
 
-    return server.get('newImages/imgs/b.png').then(function(data) {
-      expect(data).toBe('b1 image');
+      return server.get('newImages/imgs/b.png').then(function(data) {
+        expect(data).toBe('b1 image');
+      });
+    });
+  });
+
+  describe('assetSerer.getAssetData', function() {
+    pit('should get assetData', function() {
+      var hash = {
+        update: jest.genMockFn(),
+        digest: jest.genMockFn(),
+      };
+
+      hash.digest.mockImpl(function() {
+        return 'wow such hash';
+      });
+      crypto.createHash.mockImpl(function() {
+        return hash;
+      });
+
+      var server = new AssetServer({
+        projectRoots: ['/root'],
+        assetExts: ['png'],
+      });
+
+      fs.__setMockFilesystem({
+        'root': {
+          imgs: {
+            'b@1x.png': 'b1 image',
+            'b@2x.png': 'b2 image',
+            'b@4x.png': 'b4 image',
+            'b@4.5x.png': 'b4.5 image',
+          }
+        }
+      });
+
+      return server.getAssetData('imgs/b.png').then(function(data) {
+        expect(hash.update.mock.calls.length).toBe(4);
+        expect(data).toEqual({
+          type: 'png',
+          name: 'b',
+          scales: [1, 2, 4, 4.5],
+          hash: 'wow such hash',
+        });
+      });
     });
   });
 });

react-packager/src/AssetServer/index.js

@@ -9,10 +9,11 @@
 'use strict';
 
 var declareOpts = require('../lib/declareOpts');
-var extractAssetResolution = require('../lib/extractAssetResolution');
+var getAssetDataFromName = require('../lib/getAssetDataFromName');
 var path = require('path');
 var Promise = require('bluebird');
 var fs = require('fs');
+var crypto = require('crypto');
 
 var lstat = Promise.promisify(fs.lstat);
 var readDir = Promise.promisify(fs.readdir);
@@ -44,11 +45,11 @@ function AssetServer(options) {
  *
  * 1. We first parse the directory of the asset
  * 2. We check to find a matching directory in one of the project roots
- * 3. We then build a map of all assets and their resolutions in this directory
+ * 3. We then build a map of all assets and their scales in this directory
  * 4. Then pick the closest resolution (rounding up) to the requested one
  */
 
-AssetServer.prototype.get = function(assetPath) {
+AssetServer.prototype._getAssetRecord = function(assetPath) {
   var filename = path.basename(assetPath);
 
   return findRoot(
@@ -60,13 +61,7 @@ AssetServer.prototype.get = function(assetPath) {
       readDir(dir),
     ];
   }).spread(function(dir, files) {
-    // Easy case. File exactly what the client requested.
-    var index = files.indexOf(filename);
-    if (index > -1) {
-      return readFile(path.join(dir, filename));
-    }
-
-    var assetData = extractAssetResolution(filename);
+    var assetData = getAssetDataFromName(filename);
     var map = buildAssetMap(dir, files);
     var record = map[assetData.assetName];
 
@@ -74,8 +69,15 @@ AssetServer.prototype.get = function(assetPath) {
       throw new Error('Asset not found');
     }
 
-    for (var i = 0; i < record.resolutions.length; i++) {
-      if (record.resolutions[i] >= assetData.resolution) {
+    return record;
+  });
+};
+
+AssetServer.prototype.get = function(assetPath) {
+  var assetData = getAssetDataFromName(assetPath);
+  return this._getAssetRecord(assetPath).then(function(record) {
+    for (var i = 0; i < record.scales.length; i++) {
+      if (record.scales[i] >= assetData.resolution) {
         return readFile(record.files[i]);
       }
     }
@@ -84,6 +86,33 @@ AssetServer.prototype.get = function(assetPath) {
   });
 };
 
+AssetServer.prototype.getAssetData = function(assetPath) {
+  var nameData = getAssetDataFromName(assetPath);
+  var data = {
+    name: nameData.name,
+    type: 'png',
+  };
+
+  return this._getAssetRecord(assetPath).then(function(record) {
+    data.scales = record.scales;
+
+    return Promise.all(
+      record.files.map(function(file) {
+        return lstat(file);
+      })
+    );
+  }).then(function(stats) {
+    var hash = crypto.createHash('md5');
+
+    stats.forEach(function(stat) {
+      hash.update(stat.mtime.getTime().toString());
+    });
+
+    data.hash = hash.digest('hex');
+    return data;
+  });
+};
+
 function findRoot(roots, dir) {
   return Promise.some(
     roots.map(function(root) {
@@ -105,26 +134,26 @@ function findRoot(roots, dir) {
 }
 
 function buildAssetMap(dir, files) {
-  var assets = files.map(extractAssetResolution);
+  var assets = files.map(getAssetDataFromName);
   var map = Object.create(null);
   assets.forEach(function(asset, i) {
     var file = files[i];
     var record = map[asset.assetName];
     if (!record) {
       record = map[asset.assetName] = {
-        resolutions: [],
+        scales: [],
         files: [],
       };
     }
 
     var insertIndex;
-    var length = record.resolutions.length;
+    var length = record.scales.length;
     for (insertIndex = 0; insertIndex < length; insertIndex++) {
-      if (asset.resolution <  record.resolutions[insertIndex]) {
+      if (asset.resolution <  record.scales[insertIndex]) {
         break;
       }
     }
-    record.resolutions.splice(insertIndex, 0, asset.resolution);
+    record.scales.splice(insertIndex, 0, asset.resolution);
     record.files.splice(insertIndex, 0, path.join(dir, file));
   });
 

react-packager/src/DependencyResolver/ModuleDescriptor.js

@@ -45,6 +45,8 @@ function ModuleDescriptor(fields) {
 
   this.altId = fields.altId;
 
+  this.isJSON = fields.isJSON;
+
   this._fields = fields;
 }
 

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

@@ -14,7 +14,7 @@ jest
   .dontMock('absolute-path')
   .dontMock('../docblock')
   .dontMock('../../replacePatterns')
-  .dontMock('../../../../lib/extractAssetResolution')
+  .dontMock('../../../../lib/getAssetDataFromName')
   .setMock('../../../ModuleDescriptor', function(data) {return data;});
 
 describe('DependencyGraph', function() {
@@ -101,6 +101,46 @@ describe('DependencyGraph', function() {
       });
     });
 
+    pit('should get json dependencies', function() {
+      var root = '/root';
+      fs.__setMockFilesystem({
+        'root': {
+          'package.json': JSON.stringify({
+            name: 'package'
+          }),
+          'index.js': [
+            '/**',
+            ' * @providesModule index',
+            ' */',
+            'require("./a.json")'
+          ].join('\n'),
+          'a.json': JSON.stringify({}),
+        }
+      });
+
+      var dgraph = new DependencyGraph({
+        roots: [root],
+        fileWatcher: fileWatcher
+      });
+      return dgraph.load().then(function() {
+        expect(dgraph.getOrderedDependencies('/root/index.js'))
+          .toEqual([
+            {
+              id: 'index',
+              altId: 'package/index',
+              path: '/root/index.js',
+              dependencies: ['./a.json']
+            },
+            {
+              id: 'package/a.json',
+              isJSON: true,
+              path: '/root/a.json',
+              dependencies: []
+            },
+          ]);
+      });
+    });
+
     pit('should get dependencies with deprecated assets', function() {
       var root = '/root';
       fs.__setMockFilesystem({
@@ -129,7 +169,8 @@ describe('DependencyGraph', function() {
             {  id: 'image!a',
                path: '/root/imgs/a.png',
                dependencies: [],
-               isAsset_DEPRECATED: true
+               isAsset_DEPRECATED: true,
+               resolution: 1,
             },
           ]);
       });
@@ -288,7 +329,8 @@ describe('DependencyGraph', function() {
               id: 'image!a',
               path: '/root/imgs/a.png',
               dependencies: [],
-              isAsset_DEPRECATED: true
+              isAsset_DEPRECATED: true,
+              resolution: 1,
             },
           ]);
       });
@@ -1350,6 +1392,7 @@ describe('DependencyGraph', function() {
               path: '/root/foo.png',
               dependencies: [],
               isAsset_DEPRECATED: true,
+              resolution: 1,
             },
           ]);
         });

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

@@ -18,7 +18,7 @@ var isAbsolutePath = require('absolute-path');
 var debug = require('debug')('DependecyGraph');
 var util = require('util');
 var declareOpts = require('../../../lib/declareOpts');
-var extractAssetResolution = require('../../../lib/extractAssetResolution');
+var getAssetDataFromName = require('../../../lib/getAssetDataFromName');
 
 var readFile = Promise.promisify(fs.readFile);
 var readDir = Promise.promisify(fs.readdir);
@@ -66,7 +66,7 @@ function DependecyGraph(options) {
   this._debugUpdateEvents = [];
 
   this._moduleExtPattern = new RegExp(
-    '\.(' + ['js'].concat(this._assetExts).join('|') + ')$'
+    '\.(' + ['js', 'json'].concat(this._assetExts).join('|') + ')$'
   );
 
   // Kick off the search process to precompute the dependency graph.
@@ -259,7 +259,7 @@ DependecyGraph.prototype.resolveDependency = function(
     }
 
     // JS modules can be required without extensios.
-    if (!this._isFileAsset(modulePath)) {
+    if (!this._isFileAsset(modulePath) && !modulePath.match(/\.json$/)) {
       modulePath = withExtJs(modulePath);
     }
 
@@ -422,7 +422,7 @@ DependecyGraph.prototype._processModule = function(modulePath) {
   var module;
 
   if (this._assetExts.indexOf(extname(modulePath)) > -1) {
-    var assetData = extractAssetResolution(this._lookupName(modulePath));
+    var assetData = getAssetDataFromName(this._lookupName(modulePath));
     moduleData.id = assetData.assetName;
     moduleData.resolution = assetData.resolution;
     moduleData.isAsset = true;
@@ -432,13 +432,23 @@ DependecyGraph.prototype._processModule = function(modulePath) {
     return Promise.resolve(module);
   }
 
+  if (extname(modulePath) === 'json') {
+    moduleData.id = this._lookupName(modulePath);
+    moduleData.isJSON = true;
+    moduleData.dependencies = [];
+    module = new ModuleDescriptor(moduleData);
+    this._updateGraphWithModule(module);
+    return Promise.resolve(module);
+  }
+
   var self = this;
   return readFile(modulePath, 'utf8')
     .then(function(content) {
       var moduleDocBlock = docblock.parseAsObject(content);
       if (moduleDocBlock.providesModule || moduleDocBlock.provides) {
-        moduleData.id =
-          moduleDocBlock.providesModule || moduleDocBlock.provides;
+        moduleData.id = /^(\S*)/.exec(
+          moduleDocBlock.providesModule || moduleDocBlock.provides
+        )[1];
 
         // Incase someone wants to require this module via
         // packageName/path/to/module
@@ -641,6 +651,7 @@ DependecyGraph.prototype._processAsset_DEPRECATED = function(file) {
       path: path.resolve(file),
       isAsset_DEPRECATED: true,
       dependencies: [],
+      resolution: getAssetDataFromName(file).resolution,
     });
   }
 };

react-packager/src/FileWatcher/index.js

@@ -26,7 +26,7 @@ var detectingWatcherClass = new Promise(function(resolve) {
 
 module.exports = FileWatcher;
 
-var MAX_WAIT_TIME = 3000;
+var MAX_WAIT_TIME = 10000;
 
 // Singleton
 var fileWatcher = null;
@@ -73,7 +73,7 @@ function createWatcher(rootConfig) {
       var rejectTimeout = setTimeout(function() {
         reject(new Error([
           'Watcher took too long to load',
-          'Try running `watchman` from your terminal',
+          'Try running `watchman version` from your terminal',
           'https://facebook.github.io/watchman/docs/troubleshooting.html',
         ].join('\n')));
       }, MAX_WAIT_TIME);

react-packager/src/Packager/Package.js

@@ -17,6 +17,7 @@ module.exports = Package;
 function Package(sourceMapUrl) {
   this._finalized = false;
   this._modules = [];
+  this._assets = [];
   this._sourceMapUrl = sourceMapUrl;
 }
 
@@ -36,6 +37,10 @@ Package.prototype.addModule = function(
   });
 };
 
+Package.prototype.addAsset = function(asset) {
+  this._assets.push(asset);
+};
+
 Package.prototype.finalize = function(options) {
   options = options || {};
   if (options.runMainModule) {
@@ -49,6 +54,8 @@ Package.prototype.finalize = function(options) {
 
   Object.freeze(this._modules);
   Object.seal(this._modules);
+  Object.freeze(this._assets);
+  Object.seal(this._assets);
   this._finalized = true;
 };
 
@@ -146,6 +153,10 @@ Package.prototype.getSourceMap = function(options) {
   return map;
 };
 
+Package.prototype.getAssets = function() {
+  return this._assets;
+};
+
 Package.prototype._getMappings = function() {
   var modules = this._modules;
 

react-packager/src/Packager/__tests__/Package-test.js

@@ -76,6 +76,18 @@ describe('Package', function() {
       expect(s).toEqual(genSourceMap(p._modules));
     });
   });
+
+  describe('getAssets()', function() {
+    it('should save and return asset objects', function() {
+      var p = new Package('test_url');
+      var asset1 = {};
+      var asset2 = {};
+      p.addAsset(asset1);
+      p.addAsset(asset2);
+      p.finalize();
+      expect(p.getAssets()).toEqual([asset1, asset2]);
+    });
+  });
 });
 
  function genSourceMap(modules) {

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

@@ -43,7 +43,20 @@ describe('Packager', function() {
       };
     });
 
-    var packager = new Packager({projectRoots: ['/root']});
+
+    require('fs').readFile.mockImpl(function(file, callback) {
+      callback(null, '{"json":true}');
+    });
+
+    var assetServer = {
+      getAssetData: jest.genMockFn(),
+    };
+
+    var packager = new Packager({
+      projectRoots: ['/root'],
+      assetServer: assetServer,
+    });
+
     var modules = [
       {id: 'foo', path: '/root/foo.js', dependencies: []},
       {id: 'bar', path: '/root/bar.js', dependencies: []},
@@ -52,6 +65,7 @@ describe('Packager', function() {
         path: '/root/img/img.png',
         isAsset_DEPRECATED: true,
         dependencies: [],
+        resolution: 2,
       },
       {
         id: 'new_image.png',
@@ -59,7 +73,13 @@ describe('Packager', function() {
         isAsset: true,
         resolution: 2,
         dependencies: []
-      }
+      },
+      {
+        id: 'package/file.json',
+        path: '/root/file.json',
+        isJSON: true,
+        dependencies: [],
+      },
     ];
 
     getDependencies.mockImpl(function() {
@@ -86,6 +106,15 @@ describe('Packager', function() {
       cb(null, { width: 50, height: 100 });
     });
 
+    assetServer.getAssetData.mockImpl(function() {
+      return {
+        scales: [1,2,3],
+        hash: 'i am a hash',
+        name: 'img',
+        type: 'png',
+      };
+    });
+
     return packager.package('/root/foo.js', true, 'source_map_url')
       .then(function(p) {
         expect(p.addModule.mock.calls[0]).toEqual([
@@ -98,22 +127,37 @@ describe('Packager', function() {
           'source /root/bar.js',
           '/root/bar.js'
         ]);
+
+        var imgModule_DEPRECATED = {
+          __packager_asset: true,
+          isStatic: true,
+          path: '/root/img/img.png',
+          uri: 'img',
+          width: 25,
+          height: 50,
+          deprecated: true,
+        };
+
         expect(p.addModule.mock.calls[2]).toEqual([
           'lol module.exports = ' +
-            JSON.stringify({ uri: 'img', isStatic: true}) +
+            JSON.stringify(imgModule_DEPRECATED) +
             '; lol',
           'module.exports = ' +
-            JSON.stringify({ uri: 'img', isStatic: true}) +
+            JSON.stringify(imgModule_DEPRECATED) +
             ';',
           '/root/img/img.png'
         ]);
 
         var imgModule = {
-          isStatic: true,
-          path: '/root/img/new_image.png',
-          uri: 'assets/img/new_image.png',
+          __packager_asset: true,
+          fileSystemLocation: '/root/img',
+          httpServerLocation: '/assets/img',
           width: 25,
           height: 50,
+          scales: [1, 2, 3],
+          hash: 'i am a hash',
+          name: 'img',
+          type: 'png',
         };
 
         expect(p.addModule.mock.calls[3]).toEqual([
@@ -126,9 +170,23 @@ describe('Packager', function() {
           '/root/img/new_image.png'
         ]);
 
+        expect(p.addModule.mock.calls[4]).toEqual([
+          'lol module.exports = {"json":true}; lol',
+          'module.exports = {"json":true};',
+          '/root/file.json'
+        ]);
+
         expect(p.finalize.mock.calls[0]).toEqual([
           {runMainModule: true}
         ]);
+
+        expect(p.addAsset.mock.calls[0]).toEqual([
+          imgModule_DEPRECATED
+        ]);
+
+        expect(p.addAsset.mock.calls[1]).toEqual([
+          imgModule
+        ]);
       });
   });
 

react-packager/src/Packager/index.js

@@ -20,6 +20,9 @@ var Activity = require('../Activity');
 var declareOpts = require('../lib/declareOpts');
 var imageSize = require('image-size');
 
+var sizeOf = Promise.promisify(imageSize);
+var readFile = Promise.promisify(fs.readFile);
+
 var validateOpts = declareOpts({
   projectRoots: {
     type: 'array',
@@ -64,6 +67,10 @@ var validateOpts = declareOpts({
     type: 'object',
     required: true,
   },
+  assetServer: {
+    type: 'object',
+    required: true,
+  }
 });
 
 function Packager(options) {
@@ -91,6 +98,7 @@ function Packager(options) {
   });
 
   this._projectRoots = opts.projectRoots;
+  this._assetServer = opts.assetServer;
 }
 
 Packager.prototype.kill = function() {
@@ -98,9 +106,9 @@ Packager.prototype.kill = function() {
 };
 
 Packager.prototype.package = function(main, runModule, sourceMapUrl, isDev) {
-  var transformModule = this._transformModule.bind(this);
   var ppackage = new Package(sourceMapUrl);
 
+  var transformModule = this._transformModule.bind(this, ppackage);
   var findEventId = Activity.startEvent('find dependencies');
   var transformEventId;
 
@@ -138,16 +146,15 @@ Packager.prototype.getDependencies = function(main, isDev) {
   return this._resolver.getDependencies(main, { dev: isDev });
 };
 
-Packager.prototype._transformModule = function(module) {
+Packager.prototype._transformModule = function(ppackage, module) {
   var transform;
 
   if (module.isAsset_DEPRECATED) {
-    transform = Promise.resolve(generateAssetModule_DEPRECATED(module));
+    transform = this.generateAssetModule_DEPRECATED(ppackage, module);
   } else if (module.isAsset) {
-    transform = generateAssetModule(
-      module,
-      getPathRelativeToRoot(this._projectRoots, module.path)
-    );
+    transform = this.generateAssetModule(ppackage, module);
+  } else if (module.isJSON) {
+    transform = generateJSONModule(module);
   } else {
     transform = this._transformer.loadFileAndTransform(
       path.resolve(module.path)
@@ -164,43 +171,69 @@ Packager.prototype._transformModule = function(module) {
   });
 };
 
-
-function verifyRootExists(root) {
-  // Verify that the root exists.
-  assert(fs.statSync(root).isDirectory(), 'Root has to be a valid directory');
-}
-
 Packager.prototype.getGraphDebugInfo = function() {
   return this._resolver.getDebugInfo();
 };
 
-function generateAssetModule_DEPRECATED(module) {
-  var code = 'module.exports = ' + JSON.stringify({
-    uri: module.id.replace(/^[^!]+!/, ''),
-    isStatic: true,
-  }) + ';';
-
-  return {
-    code: code,
-    sourceCode: code,
-    sourcePath: module.path,
-  };
-}
-
-var sizeOf = Promise.promisify(imageSize);
-
-function generateAssetModule(module, relPath) {
+Packager.prototype.generateAssetModule_DEPRECATED = function(ppackage, module) {
   return sizeOf(module.path).then(function(dimensions) {
     var img = {
+      __packager_asset: true,
       isStatic: true,
-      path: module.path, //TODO(amasad): this should be path inside tar file.
-      uri: path.join('assets', relPath),
+      path: module.path,
+      uri: module.id.replace(/^[^!]+!/, ''),
       width: dimensions.width / module.resolution,
       height: dimensions.height / module.resolution,
+      deprecated: true,
     };
 
+    ppackage.addAsset(img);
+
     var code = 'module.exports = ' + JSON.stringify(img) + ';';
 
+    return {
+      code: code,
+      sourceCode: code,
+      sourcePath: module.path,
+    };
+  });
+};
+
+Packager.prototype.generateAssetModule = function(ppackage, module) {
+  var relPath = getPathRelativeToRoot(this._projectRoots, module.path);
+
+  return Promise.all([
+    sizeOf(module.path),
+    this._assetServer.getAssetData(relPath),
+  ]).spread(function(dimensions, assetData) {
+    var img = {
+      __packager_asset: true,
+      fileSystemLocation: path.dirname(module.path),
+      httpServerLocation: path.join('/assets', path.dirname(relPath)),
+      width: dimensions.width / module.resolution,
+      height: dimensions.height / module.resolution,
+      scales: assetData.scales,
+      hash: assetData.hash,
+      name: assetData.name,
+      type: assetData.type,
+    };
+
+    ppackage.addAsset(img);
+
+    var code = 'module.exports = ' + JSON.stringify(img) + ';';
+
+    return {
+      code: code,
+      sourceCode: code,
+      sourcePath: module.path,
+    };
+  });
+};
+
+function generateJSONModule(module) {
+  return readFile(module.path).then(function(data) {
+    var code = 'module.exports = ' + data.toString('utf8') + ';';
+
     return {
       code: code,
       sourceCode: code,
@@ -222,4 +255,9 @@ function getPathRelativeToRoot(roots, absPath) {
   );
 }
 
+function verifyRootExists(root) {
+  // Verify that the root exists.
+  assert(fs.statSync(root).isDirectory(), 'Root has to be a valid directory');
+}
+
 module.exports = Packager;

react-packager/src/Server/index.js

@@ -71,13 +71,17 @@ function Server(options) {
   this._packages = Object.create(null);
   this._changeWatchers = [];
 
+  var assetGlobs = opts.assetExts.map(function(ext) {
+    return '**/*.' + ext;
+  });
+
   var watchRootConfigs = opts.projectRoots.map(function(dir) {
     return {
       dir: dir,
       globs: [
         '**/*.js',
-        '**/package.json',
-      ]
+        '**/*.json',
+      ].concat(assetGlobs),
     };
   });
 
@@ -86,9 +90,7 @@ function Server(options) {
       opts.assetRoots.map(function(dir) {
         return {
           dir: dir,
-          globs: opts.assetExts.map(function(ext) {
-            return '**/*.' + ext;
-          }),
+          globs: assetGlobs,
         };
       })
     );
@@ -98,15 +100,16 @@ function Server(options) {
     ? FileWatcher.createDummyWatcher()
     : new FileWatcher(watchRootConfigs);
 
-  var packagerOpts = Object.create(opts);
-  packagerOpts.fileWatcher = this._fileWatcher;
-  this._packager = new Packager(packagerOpts);
-
   this._assetServer = new AssetServer({
     projectRoots: opts.projectRoots,
     assetExts: opts.assetExts,
   });
 
+  var packagerOpts = Object.create(opts);
+  packagerOpts.fileWatcher = this._fileWatcher;
+  packagerOpts.assetServer = this._assetServer;
+  this._packager = new Packager(packagerOpts);
+
   var onFileChange = this._onFileChange.bind(this);
   this._fileWatcher.on('all', onFileChange);
 

react-packager/src/__mocks__/fs.js

@@ -67,6 +67,12 @@ fs.lstat.mockImpl(function(filepath, callback) {
     return callback(e);
   }
 
+  var mtime = {
+    getTime: function() {
+      return Math.ceil(Math.random() * 10000000);
+    }
+  };
+
   if (node && typeof node === 'object' && node.SYMLINK == null) {
     callback(null, {
       isDirectory: function() {
@@ -74,7 +80,8 @@ fs.lstat.mockImpl(function(filepath, callback) {
       },
       isSymbolicLink: function() {
         return false;
-      }
+      },
+      mtime: mtime,
     });
   } else {
     callback(null, {
@@ -86,7 +93,8 @@ fs.lstat.mockImpl(function(filepath, callback) {
           return true;
         }
         return false;
-      }
+      },
+      mtime: mtime,
     });
   }
 });

react-packager/src/lib/__tests__/extractAssetResolution-test.js

@@ -1,42 +1,52 @@
 'use strict';
 
 jest.autoMockOff();
-var extractAssetResolution = require('../extractAssetResolution');
+var getAssetDataFromName = require('../getAssetDataFromName');
 
-describe('extractAssetResolution', function() {
+describe('getAssetDataFromName', function() {
   it('should extract resolution simple case', function() {
-    var data = extractAssetResolution('test@2x.png');
+    var data = getAssetDataFromName('test@2x.png');
     expect(data).toEqual({
       assetName: 'test.png',
       resolution: 2,
+      type: 'png',
+      name: 'test',
     });
   });
 
   it('should default resolution to 1', function() {
-    var data = extractAssetResolution('test.png');
+    var data = getAssetDataFromName('test.png');
     expect(data).toEqual({
       assetName: 'test.png',
       resolution: 1,
+      type: 'png',
+      name: 'test',
     });
   });
 
   it('should support float', function() {
-    var data = extractAssetResolution('test@1.1x.png');
+    var data = getAssetDataFromName('test@1.1x.png');
     expect(data).toEqual({
       assetName: 'test.png',
       resolution: 1.1,
+      type: 'png',
+      name: 'test',
     });
 
-    data = extractAssetResolution('test@.1x.png');
+    data = getAssetDataFromName('test@.1x.png');
     expect(data).toEqual({
       assetName: 'test.png',
       resolution: 0.1,
+      type: 'png',
+      name: 'test',
     });
 
-    data = extractAssetResolution('test@0.2x.png');
+    data = getAssetDataFromName('test@0.2x.png');
     expect(data).toEqual({
       assetName: 'test.png',
       resolution: 0.2,
+      type: 'png',
+      name: 'test',
     });
   });
 });

react-packager/src/lib/getAssetDataFromName.js

@@ -2,7 +2,7 @@
 
 var path = require('path');
 
-function extractAssetResolution(filename) {
+function getAssetDataFromName(filename) {
   var ext = path.extname(filename);
 
   var re = new RegExp('@([\\d\\.]+)x\\' + ext + '$');
@@ -19,10 +19,13 @@ function extractAssetResolution(filename) {
     }
   }
 
+  var assetName = match ? filename.replace(re, ext) : filename;
   return {
     resolution: resolution,
-    assetName: match ? filename.replace(re, ext) : filename,
+    assetName: assetName,
+    type: ext.slice(1),
+    name: path.basename(assetName, ext)
   };
 }
 
-module.exports = extractAssetResolution;
+module.exports = getAssetDataFromName;