[react-packager] Additional data to asset modules

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

@@ -3,6 +3,7 @@
 jest
   .autoMockOff()
   .mock('../../lib/declareOpts')
+  .mock('crypto')
   .mock('fs');
 
 var fs = require('fs');
@@ -10,63 +11,65 @@ var AssetServer = require('../');
 var Promise = require('bluebird');
 
 describe('AssetServer', function() {
-  pit('should work for the simple case', function() {
+  describe('assetServer.get', function() {
-    var server = new AssetServer({
+    pit('should work for the simple case', function() {
-      projectRoots: ['/root'],
+      var server = new AssetServer({
-      assetExts: ['png'],
+        projectRoots: ['/root'],
-    });
+        assetExts: ['png'],
+      });
 
-    fs.__setMockFilesystem({
+      fs.__setMockFilesystem({
-      'root': {
+        'root': {
-        imgs: {
+          imgs: {
-          'b.png': 'b image',
+            'b.png': 'b image',
-          'b@2x.png': 'b2 image',
+            'b@2x.png': 'b2 image',
+          }
         }
-      }
+      });
-    });
 
-    return Promise.all([
+      return Promise.all([
-      server.get('imgs/b.png'),
+        server.get('imgs/b.png'),
-      server.get('imgs/b@1x.png'),
+        server.get('imgs/b@1x.png'),
-    ]).then(function(resp) {
+      ]).then(function(resp) {
-      resp.forEach(function(data) {
+        resp.forEach(function(data) {
-        expect(data).toBe('b image');
+          expect(data).toBe('b image');
+        });
       });
     });
-  });
 
-  pit.only('should pick the bigger one', function() {
+    pit('should pick the bigger one', function() {
-    var server = new AssetServer({
+      var server = new AssetServer({
-      projectRoots: ['/root'],
+        projectRoots: ['/root'],
-      assetExts: ['png'],
+        assetExts: ['png'],
-    });
+      });
 
-    fs.__setMockFilesystem({
+      fs.__setMockFilesystem({
-      'root': {
+        'root': {
-        imgs: {
+          imgs: {
-          'b@1x.png': 'b1 image',
+            'b@1x.png': 'b1 image',
-          'b@2x.png': 'b2 image',
+            'b@2x.png': 'b2 image',
-          'b@4x.png': 'b4 image',
+            'b@4x.png': 'b4 image',
-          'b@4.5x.png': 'b4.5 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) {
+    pit('should support multiple project roots', function() {
-      expect(data).toBe('b4 image');
+      var server = new AssetServer({
-    });
+        projectRoots: ['/root', '/root2'],
-  });
+        assetExts: ['png'],
+      });
 
-  pit('should support multiple project roots', function() {
+      fs.__setMockFilesystem({
-    var server = new AssetServer({
+        'root': {
-      projectRoots: ['/root'],
+          imgs: {
-      assetExts: ['png'],
+            'b.png': 'b image',
-    });
+          },
-
-    fs.__setMockFilesystem({
-      'root': {
-        imgs: {
-          'b.png': 'b image',
         },
         'root2': {
           'newImages': {
@@ -75,11 +78,53 @@ describe('AssetServer', function() {
             },
           },
         },
-      }
+      });
-    });
 
-    return server.get('newImages/imgs/b.png').then(function(data) {
+      return server.get('newImages/imgs/b.png').then(function(data) {
-      expect(data).toBe('b1 image');
+        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';
+      });
+      require('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 assetData = getAssetDataFromName(filename);
-    var index = files.indexOf(filename);
-    if (index > -1) {
-      return readFile(path.join(dir, filename));
-    }
-
-    var assetData = extractAssetResolution(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++) {
+    return record;
-      if (record.resolutions[i] >= assetData.resolution) {
+  });
+};
+
+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/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() {

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);
@@ -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;
@@ -651,7 +651,7 @@ DependecyGraph.prototype._processAsset_DEPRECATED = function(file) {
       path: path.resolve(file),
       isAsset_DEPRECATED: true,
       dependencies: [],
-      resolution: extractAssetResolution(file).resolution,
+      resolution: getAssetDataFromName(file).resolution,
     });
   }
 };

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

@@ -43,11 +43,20 @@ describe('Packager', function() {
       };
     });
 
+
     require('fs').readFile.mockImpl(function(file, callback) {
       callback(null, '{"json":true}');
     });
 
-    var packager = new Packager({projectRoots: ['/root']});
+    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: []},
@@ -97,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([
@@ -111,6 +129,7 @@ describe('Packager', function() {
         ]);
 
         var imgModule_DEPRECATED = {
+          __packager_asset: true,
           isStatic: true,
           path: '/root/img/img.png',
           uri: 'img',
@@ -130,11 +149,15 @@ describe('Packager', function() {
         ]);
 
         var imgModule = {
-          isStatic: true,
+          __packager_asset: true,
-          path: '/root/img/new_image.png',
+          fileSystemLocation: '/root/img',
-          uri: 'assets/img/new_image.png',
+          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([

react-packager/src/Packager/index.js

@@ -67,6 +67,10 @@ var validateOpts = declareOpts({
     type: 'object',
     required: true,
   },
+  assetServer: {
+    type: 'object',
+    required: true,
+  }
 });
 
 function Packager(options) {
@@ -94,6 +98,7 @@ function Packager(options) {
   });
 
   this._projectRoots = opts.projectRoots;
+  this._assetServer = opts.assetServer;
 }
 
 Packager.prototype.kill = function() {
@@ -173,6 +178,7 @@ Packager.prototype.getGraphDebugInfo = function() {
 Packager.prototype.generateAssetModule_DEPRECATED = function(ppackage, module) {
   return sizeOf(module.path).then(function(dimensions) {
     var img = {
+      __packager_asset: true,
       isStatic: true,
       path: module.path,
       uri: module.id.replace(/^[^!]+!/, ''),
@@ -196,13 +202,20 @@ Packager.prototype.generateAssetModule_DEPRECATED = function(ppackage, module) {
 Packager.prototype.generateAssetModule = function(ppackage, module) {
   var relPath = getPathRelativeToRoot(this._projectRoots, module.path);
 
-  return sizeOf(module.path).then(function(dimensions) {
+  return Promise.all([
+    sizeOf(module.path),
+    this._assetServer.getAssetData(relPath),
+  ]).spread(function(dimensions, assetData) {
     var img = {
-      isStatic: true,
+      __packager_asset: true,
-      path: module.path, //TODO(amasad): this should be path inside tar file.
+      fileSystemLocation: path.dirname(module.path),
-      uri: path.join('assets', relPath),
+      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);

react-packager/src/Server/index.js

@@ -100,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;