[react-packager] Add first class support to popular image formats

Summary:
@public
1. Default to first class support of popular image formats
2. Add tests to make sure we support other than png

Test Plan:
1. ./runJestTests.sh
2. Add test.png and test.jpg images in the Playground app dir
3. require both images and render then in the playground app
4. they render

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

@@ -47,6 +47,32 @@ describe('AssetServer', function() {
       });
     });
 
+    pit('should work for the simple case with jpg', function() {
+      var server = new AssetServer({
+        projectRoots: ['/root'],
+        assetExts: ['png', 'jpg'],
+      });
+
+      fs.__setMockFilesystem({
+        'root': {
+          imgs: {
+            'b.png': 'png image',
+            'b.jpg': 'jpeg image',
+          }
+        }
+      });
+
+      return Promise.all([
+        server.get('imgs/b.jpg'),
+        server.get('imgs/b.png'),
+      ]).then(function(data) {
+        expect(data).toEqual([
+          'jpeg image',
+          'png image',
+        ]);
+      });
+    });
+
     pit('should pick the bigger one', function() {
       var server = new AssetServer({
         projectRoots: ['/root'],
@@ -136,5 +162,45 @@ describe('AssetServer', function() {
         });
       });
     });
+
+    pit('should get assetData for non-png images', 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', 'jpeg'],
+      });
+
+      fs.__setMockFilesystem({
+        'root': {
+          imgs: {
+            'b@1x.jpg': 'b1 image',
+            'b@2x.jpg': 'b2 image',
+            'b@4x.jpg': 'b4 image',
+            'b@4.5x.jpg': 'b4.5 image',
+          }
+        }
+      });
+
+      return server.getAssetData('imgs/b.jpg').then(function(data) {
+        expect(hash.update.mock.calls.length).toBe(4);
+        expect(data).toEqual({
+          type: 'jpg',
+          name: 'b',
+          scales: [1, 2, 4, 4.5],
+          hash: 'wow such hash',
+        });
+      });
+    });
   });
 });

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

@@ -28,7 +28,7 @@ var validateOpts = declareOpts({
   },
   assetExts: {
     type: 'array',
-    default: ['png'],
+    required: true,
   },
 });
 
@@ -90,7 +90,7 @@ AssetServer.prototype.getAssetData = function(assetPath) {
   var nameData = getAssetDataFromName(assetPath);
   var data = {
     name: nameData.name,
-    type: 'png',
+    type: nameData.type,
   };
 
   return this._getAssetRecord(assetPath).then(function(record) {

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

@@ -55,7 +55,8 @@ describe('DependencyGraph', function() {
 
       var dgraph = new DependencyGraph({
         roots: [root],
-        fileWatcher: fileWatcher
+        fileWatcher: fileWatcher,
+        assetExts: ['png', 'jpg'],
       });
       return dgraph.load().then(function() {
         expect(dgraph.getOrderedDependencies('/root/index.js'))
@@ -91,7 +92,8 @@ describe('DependencyGraph', function() {
 
       var dgraph = new DependencyGraph({
         roots: [root],
-        fileWatcher: fileWatcher
+        fileWatcher: fileWatcher,
+        assetExts: ['png', 'jpg'],
       });
       return dgraph.load().then(function() {
         expect(dgraph.getOrderedDependencies('/root/index.js'))
@@ -121,7 +123,8 @@ describe('DependencyGraph', function() {
 
       var dgraph = new DependencyGraph({
         roots: [root],
-        fileWatcher: fileWatcher
+        fileWatcher: fileWatcher,
+        assetExts: ['png', 'jpg'],
       });
       return dgraph.load().then(function() {
         expect(dgraph.getOrderedDependencies('/root/index.js'))
@@ -161,6 +164,7 @@ describe('DependencyGraph', function() {
       var dgraph = new DependencyGraph({
         roots: [root],
         fileWatcher: fileWatcher,
+        assetExts: ['png', 'jpg'],
         assetRoots_DEPRECATED: ['/root/imgs'],
       });
       return dgraph.load().then(function() {
@@ -199,6 +203,7 @@ describe('DependencyGraph', function() {
       var dgraph = new DependencyGraph({
         roots: [root],
         fileWatcher: fileWatcher,
+        assetExts: ['png', 'jpg'],
       });
       return dgraph.load().then(function() {
         expect(dgraph.getOrderedDependencies('/root/index.js'))
@@ -246,6 +251,7 @@ describe('DependencyGraph', function() {
       var dgraph = new DependencyGraph({
         roots: [root],
         fileWatcher: fileWatcher,
+        assetExts: ['png', 'jpg'],
       });
       return dgraph.load().then(function() {
         expect(dgraph.getOrderedDependencies('/root/index.js'))
@@ -308,6 +314,7 @@ describe('DependencyGraph', function() {
       var dgraph = new DependencyGraph({
         roots: [root],
         fileWatcher: fileWatcher,
+        assetExts: ['png', 'jpg'],
         assetRoots_DEPRECATED: ['/root/imgs'],
       });
       return dgraph.load().then(function() {
@@ -358,7 +365,8 @@ describe('DependencyGraph', function() {
 
       var dgraph = new DependencyGraph({
         roots: [root],
-        fileWatcher: fileWatcher
+        fileWatcher: fileWatcher,
+        assetExts: ['png', 'jpg'],
       });
       return dgraph.load().then(function() {
         expect(dgraph.getOrderedDependencies('/root/index.js'))
@@ -391,7 +399,8 @@ describe('DependencyGraph', function() {
 
       var dgraph = new DependencyGraph({
         roots: [root],
-        fileWatcher: fileWatcher
+        fileWatcher: fileWatcher,
+        assetExts: ['png', 'jpg'],
       });
       return dgraph.load().then(function() {
         expect(dgraph.getOrderedDependencies('/root/index.js'))
@@ -421,7 +430,8 @@ describe('DependencyGraph', function() {
 
       var dgraph = new DependencyGraph({
         roots: [root],
-        fileWatcher: fileWatcher
+        fileWatcher: fileWatcher,
+        assetExts: ['png', 'jpg'],
       });
       return dgraph.load().then(function() {
         expect(dgraph.getOrderedDependencies('/root/index.js'))
@@ -455,7 +465,8 @@ describe('DependencyGraph', function() {
 
       var dgraph = new DependencyGraph({
         roots: [root],
-        fileWatcher: fileWatcher
+        fileWatcher: fileWatcher,
+        assetExts: ['png', 'jpg'],
       });
       return dgraph.load().then(function() {
         expect(dgraph.getOrderedDependencies('/root/index.js'))
@@ -489,7 +500,8 @@ describe('DependencyGraph', function() {
 
       var dgraph = new DependencyGraph({
         roots: [root],
-        fileWatcher: fileWatcher
+        fileWatcher: fileWatcher,
+        assetExts: ['png', 'jpg'],
       });
       return dgraph.load().then(function() {
         expect(dgraph.getOrderedDependencies('/root/index.js'))
@@ -519,7 +531,8 @@ describe('DependencyGraph', function() {
 
       var dgraph = new DependencyGraph({
         roots: [root],
-        fileWatcher: fileWatcher
+        fileWatcher: fileWatcher,
+        assetExts: ['png', 'jpg'],
       });
       return dgraph.load().then(function() {
         expect(dgraph.getOrderedDependencies('/root/index.js'))
@@ -552,7 +565,8 @@ describe('DependencyGraph', function() {
 
       var dgraph = new DependencyGraph({
         roots: [root],
-        fileWatcher: fileWatcher
+        fileWatcher: fileWatcher,
+        assetExts: ['png', 'jpg'],
       });
       return dgraph.load().then(function() {
         expect(dgraph.getOrderedDependencies('/root/index.js'))
@@ -595,7 +609,8 @@ describe('DependencyGraph', function() {
 
       var dgraph = new DependencyGraph({
         roots: [root],
-        fileWatcher: fileWatcher
+        fileWatcher: fileWatcher,
+        assetExts: ['png', 'jpg'],
       });
       return dgraph.load().then(function() {
         expect(dgraph.getOrderedDependencies('/root/somedir/somefile.js'))
@@ -641,7 +656,8 @@ describe('DependencyGraph', function() {
 
       var dgraph = new DependencyGraph({
         roots: [root],
-        fileWatcher: fileWatcher
+        fileWatcher: fileWatcher,
+        assetExts: ['png', 'jpg'],
       });
       return dgraph.load().then(function() {
         expect(dgraph.getOrderedDependencies('/root/index.js'))
@@ -674,7 +690,8 @@ describe('DependencyGraph', function() {
 
       var dgraph = new DependencyGraph({
         roots: [root],
-        fileWatcher: fileWatcher
+        fileWatcher: fileWatcher,
+        assetExts: ['png', 'jpg'],
       });
       return dgraph.load().then(function() {
         expect(dgraph.getOrderedDependencies('/root/index.js'))
@@ -712,7 +729,8 @@ describe('DependencyGraph', function() {
 
       var dgraph = new DependencyGraph({
         roots: [root],
-        fileWatcher: fileWatcher
+        fileWatcher: fileWatcher,
+        assetExts: ['png', 'jpg'],
       });
       return dgraph.load().then(function() {
         expect(dgraph.getOrderedDependencies('/root/index.js'))
@@ -755,7 +773,8 @@ describe('DependencyGraph', function() {
 
       var dgraph = new DependencyGraph({
         roots: [root],
-        fileWatcher: fileWatcher
+        fileWatcher: fileWatcher,
+        assetExts: ['png', 'jpg'],
       });
       return dgraph.load().then(function() {
         expect(dgraph.getOrderedDependencies('/root/index.js'))
@@ -798,7 +817,8 @@ describe('DependencyGraph', function() {
 
       var dgraph = new DependencyGraph({
         roots: [root],
-        fileWatcher: fileWatcher
+        fileWatcher: fileWatcher,
+        assetExts: ['png', 'jpg'],
       });
       return dgraph.load().then(function() {
         expect(dgraph.getOrderedDependencies('/root/index.js'))
@@ -847,7 +867,8 @@ describe('DependencyGraph', function() {
 
       var dgraph = new DependencyGraph({
         roots: [root],
-        fileWatcher: fileWatcher
+        fileWatcher: fileWatcher,
+        assetExts: ['png', 'jpg'],
       });
       return dgraph.load().then(function() {
         expect(dgraph.getOrderedDependencies('/root/index.js'))
@@ -888,7 +909,8 @@ describe('DependencyGraph', function() {
 
       var dgraph = new DependencyGraph({
         roots: [root],
-        fileWatcher: fileWatcher
+        fileWatcher: fileWatcher,
+        assetExts: ['png', 'jpg'],
       });
       return dgraph.load().then(function() {
         expect(dgraph.getOrderedDependencies('/root/index.js'))
@@ -931,7 +953,8 @@ describe('DependencyGraph', function() {
 
       var dgraph = new DependencyGraph({
         roots: [root],
-        fileWatcher: fileWatcher
+        fileWatcher: fileWatcher,
+        assetExts: ['png', 'jpg'],
       });
       return dgraph.load().then(function() {
         expect(dgraph.getOrderedDependencies('/root/index.js'))
@@ -974,7 +997,8 @@ describe('DependencyGraph', function() {
 
       var dgraph = new DependencyGraph({
         roots: [root],
-        fileWatcher: fileWatcher
+        fileWatcher: fileWatcher,
+        assetExts: ['png', 'jpg'],
       });
       return dgraph.load().then(function() {
         expect(dgraph.getOrderedDependencies('/root/index.js'))
@@ -1027,7 +1051,8 @@ describe('DependencyGraph', function() {
 
       var dgraph = new DependencyGraph({
         roots: [root],
-        fileWatcher: fileWatcher
+        fileWatcher: fileWatcher,
+        assetExts: ['png', 'jpg'],
       });
       return dgraph.load().then(function() {
         expect(dgraph.getOrderedDependencies('/root/index.js'))
@@ -1092,7 +1117,8 @@ describe('DependencyGraph', function() {
 
       var dgraph = new DependencyGraph({
         roots: [root],
-        fileWatcher: fileWatcher
+        fileWatcher: fileWatcher,
+        assetExts: ['png', 'jpg'],
       });
       return dgraph.load().then(function() {
         expect(dgraph.getOrderedDependencies('/root/index.js'))
@@ -1158,7 +1184,8 @@ describe('DependencyGraph', function() {
 
       var dgraph = new DependencyGraph({
         roots: [root],
-        fileWatcher: fileWatcher
+        fileWatcher: fileWatcher,
+        assetExts: ['png', 'jpg'],
       });
       return dgraph.load().then(function() {
         filesystem.root['index.js'] =
@@ -1209,7 +1236,8 @@ describe('DependencyGraph', function() {
 
       var dgraph = new DependencyGraph({
         roots: [root],
-        fileWatcher: fileWatcher
+        fileWatcher: fileWatcher,
+        assetExts: ['png', 'jpg'],
       });
       return dgraph.load().then(function() {
         filesystem.root['index.js'] =
@@ -1260,7 +1288,8 @@ describe('DependencyGraph', function() {
 
       var dgraph = new DependencyGraph({
         roots: [root],
-        fileWatcher: fileWatcher
+        fileWatcher: fileWatcher,
+        assetExts: ['png', 'jpg'],
       });
       return dgraph.load().then(function() {
         delete filesystem.root.foo;
@@ -1310,7 +1339,8 @@ describe('DependencyGraph', function() {
 
       var dgraph = new DependencyGraph({
         roots: [root],
-        fileWatcher: fileWatcher
+        fileWatcher: fileWatcher,
+        assetExts: ['png', 'jpg'],
       });
       return dgraph.load().then(function() {
         filesystem.root['bar.js'] = [
@@ -1367,7 +1397,7 @@ describe('DependencyGraph', function() {
         roots: [root],
         assetRoots_DEPRECATED: [root],
         assetExts: ['png'],
-        fileWatcher: fileWatcher
+        fileWatcher: fileWatcher,
       });
 
       return dgraph.load().then(function() {
@@ -1419,7 +1449,7 @@ describe('DependencyGraph', function() {
       var dgraph = new DependencyGraph({
         roots: [root],
         assetExts: ['png'],
-        fileWatcher: fileWatcher
+        fileWatcher: fileWatcher,
       });
 
       return dgraph.load().then(function() {
@@ -1482,6 +1512,7 @@ describe('DependencyGraph', function() {
       var dgraph = new DependencyGraph({
         roots: [root],
         fileWatcher: fileWatcher,
+        assetExts: ['png', 'jpg'],
         ignoreFilePath: function(filePath) {
           if (filePath === '/root/bar.js') {
             return true;
@@ -1550,7 +1581,8 @@ describe('DependencyGraph', function() {
       });
       var dgraph = new DependencyGraph({
         roots: [root],
-        fileWatcher: fileWatcher
+        fileWatcher: fileWatcher,
+        assetExts: ['png', 'jpg'],
       });
       return dgraph.load().then(function() {
         triggerFileChange('change', 'aPackage', '/root', {

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

@@ -44,7 +44,7 @@ var validateOpts = declareOpts({
   },
   assetExts: {
     type: 'array',
-    default: ['png'],
+    required: true,
   }
 });
 

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

@@ -54,6 +54,10 @@ var validateOpts = declareOpts({
     type: 'object',
     required: true,
   },
+  assetExts: {
+    type: 'array',
+    required: true,
+  }
 });
 
 function HasteDependencyResolver(options) {
@@ -62,6 +66,7 @@ function HasteDependencyResolver(options) {
   this._depGraph = new DependencyGraph({
     roots: opts.projectRoots,
     assetRoots_DEPRECATED: opts.assetRoots,
+    assetExts: opts.assetExts,
     ignoreFilePath: function(filepath) {
       return filepath.indexOf('__tests__') !== -1 ||
         (opts.blacklistRE && opts.blacklistRE.test(filepath));

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

@@ -86,6 +86,7 @@ function Packager(options) {
     moduleFormat: opts.moduleFormat,
     assetRoots: opts.assetRoots,
     fileWatcher: opts.fileWatcher,
+    assetExts: opts.assetExts,
   });
 
   this._transformer = new Transformer({

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

@@ -60,7 +60,7 @@ var validateOpts = declareOpts({
   },
   assetExts: {
     type: 'array',
-    default: ['png'],
+    default: ['png', 'jpg', 'jpeg', 'bmp', 'gif', 'webp'],
   },
 });