[react-packager] Support @nx resolution postfix for assets

Author: Amjad Masad

packager/react-packager/src/DependencyResolver/ModuleDescriptor.js

@@ -37,6 +37,12 @@ function ModuleDescriptor(fields) {
     throw new Error('Cannot be an asset and a deprecated asset');
   }
 
+  this.resolution = fields.resolution;
+
+  if (this.isAsset && isNaN(this.resolution)) {
+    throw new Error('Expected resolution to be a number for asset modules');
+  }
+
   this.altId = fields.altId;
 
   this._fields = fields;

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

@@ -169,7 +169,74 @@ describe('DependencyGraph', function() {
             {  id: 'rootPackage/imgs/a.png',
                path: '/root/imgs/a.png',
                dependencies: [],
-               isAsset: true
+               isAsset: true,
+               resolution: 1,
+            },
+          ]);
+      });
+    });
+
+    pit('should get dependencies with assets and resolution', function() {
+      var root = '/root';
+      fs.__setMockFilesystem({
+        'root': {
+          'index.js': [
+            '/**',
+            ' * @providesModule index',
+            ' */',
+            'require("./imgs/a.png");',
+            'require("./imgs/b.png");',
+            'require("./imgs/c.png");',
+          ].join('\n'),
+          'imgs': {
+            'a@1.5x.png': '',
+            'b@.7x.png': '',
+            'c.png': '',
+            'c@2x.png': '',
+          },
+          'package.json': JSON.stringify({
+            name: 'rootPackage'
+          }),
+        }
+      });
+
+      var dgraph = new DependencyGraph({
+        roots: [root],
+        fileWatcher: fileWatcher,
+      });
+      return dgraph.load().then(function() {
+        expect(dgraph.getOrderedDependencies('/root/index.js'))
+          .toEqual([
+            {
+              id: 'index',
+              altId: 'rootPackage/index',
+              path: '/root/index.js',
+              dependencies: [
+                './imgs/a.png',
+                './imgs/b.png',
+                './imgs/c.png',
+              ]
+            },
+            {
+              id: 'rootPackage/imgs/a.png',
+              path: '/root/imgs/a@1.5x.png',
+              resolution: 1.5,
+              dependencies: [],
+              isAsset: true,
+            },
+            {
+              id: 'rootPackage/imgs/b.png',
+              path: '/root/imgs/b@.7x.png',
+              resolution: 0.7,
+              dependencies: [],
+              isAsset: true
+            },
+            {
+              id: 'rootPackage/imgs/c.png',
+              path: '/root/imgs/c.png',
+              resolution: 1,
+              dependencies: [],
+              isAsset: true
             },
           ]);
       });
@@ -213,7 +280,8 @@ describe('DependencyGraph', function() {
               id: 'rootPackage/imgs/a.png',
               path: '/root/imgs/a.png',
               dependencies: [],
-              isAsset: true
+              isAsset: true,
+              resolution: 1,
             },
             {
               id: 'image!a',
@@ -1332,6 +1400,7 @@ describe('DependencyGraph', function() {
               path: '/root/foo.png',
               dependencies: [],
               isAsset: true,
+              resolution: 1,
             },
           ]);
         });

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

@@ -258,18 +258,22 @@ DependecyGraph.prototype.resolveDependency = function(
     }
 
     // JS modules can be required without extensios.
-    if (this._assetExts.indexOf(extname(modulePath)) === -1) {
+    if (!this._isFileAsset(modulePath)) {
       modulePath = withExtJs(modulePath);
     }
 
     dep = this._graph[modulePath];
 
     // Maybe the dependency is a directory and there is an index.js inside it.
     if (dep == null) {
-      modulePath = path.join(dir, depModuleId, 'index.js');
+      dep = this._graph[path.join(dir, depModuleId, 'index.js')];
     }
 
-    dep = this._graph[modulePath];
+    // Maybe it's an asset with @n.nx resolution and the path doesn't map
+    // to the id
+    if (dep == null && this._isFileAsset(modulePath)) {
+      dep = this._moduleById[this._lookupName(modulePath)];
+    }
 
     if (dep == null) {
       debug(
@@ -417,11 +421,14 @@ DependecyGraph.prototype._processModule = function(modulePath) {
   var module;
 
   if (this._assetExts.indexOf(extname(modulePath)) > -1) {
-    moduleData.id = this._lookupName(modulePath);
+    var assetData = extractResolutionPostfix(this._lookupName(modulePath));
+    moduleData.id = assetData.assetName;
+    moduleData.resolution = assetData.resolution;
     moduleData.isAsset = true;
     moduleData.dependencies = [];
-    module = Promise.resolve(new ModuleDescriptor(moduleData));
+    module = new ModuleDescriptor(moduleData);
     this._updateGraphWithModule(module);
+    return Promise.resolve(module);
   }
 
   var self = this;
@@ -652,6 +659,10 @@ DependecyGraph.prototype._processAssetChange_DEPRECATED = function(eventType, fi
   }
 };
 
+DependecyGraph.prototype._isFileAsset = function(file) {
+  return this._assetExts.indexOf(extname(file)) !== -1;
+};
+
 /**
  * Extract all required modules from a `code` string.
  */
@@ -761,6 +772,27 @@ function extname(name) {
   return path.extname(name).replace(/^\./, '');
 }
 
+function extractResolutionPostfix(filename) {
+  var ext = extname(filename);
+  var re = new RegExp('@([\\d\\.]+)x\\.' + ext + '$');
+
+  var match = filename.match(re);
+  var resolution;
+
+  if (!(match && match[1])) {
+    resolution = 1;
+  } else {
+    resolution = parseFloat(match[1], 10);
+    if (isNaN(resolution)) {
+      resolution = 1;
+    }
+  }
+
+  return {
+    resolution: resolution,
+    assetName: match ? filename.replace(re, '.' + ext) : filename,
+  };
+}
 
 function NotFoundError() {
   Error.call(this);

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

@@ -57,6 +57,7 @@ describe('Packager', function() {
         id: 'new_image.png',
         path: '/root/img/new_image.png',
         isAsset: true,
+        resolution: 2,
         dependencies: []
       }
     ];
@@ -111,8 +112,8 @@ describe('Packager', function() {
           isStatic: true,
           path: '/root/img/new_image.png',
           uri: 'img/new_image.png',
-          width: 50,
-          height: 100,
+          width: 25,
+          height: 50,
         };
 
         expect(p.addModule.mock.calls[3]).toEqual([

packager/react-packager/src/Packager/index.js

@@ -195,8 +195,8 @@ function generateAssetModule(module, relPath) {
       isStatic: true,
       path: module.path, //TODO(amasad): this should be path inside tar file.
       uri: relPath,
-      width: dimensions.width,
-      height: dimensions.height,
+      width: dimensions.width / module.resolution,
+      height: dimensions.height / module.resolution,
     };
 
     var code = 'module.exports = ' + JSON.stringify(img) + ';';