From 2271166a83b36ef110034f4d4fc053aad79686fd Mon Sep 17 00:00:00 2001 From: Amjad Masad Date: Wed, 20 May 2015 15:28:59 -0700 Subject: [PATCH] [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 --- .../AssetServer/__tests__/AssetServer-test.js | 66 ++++++++++++++ react-packager/src/AssetServer/index.js | 4 +- .../__tests__/DependencyGraph-test.js | 90 +++++++++++++------ .../haste/DependencyGraph/index.js | 2 +- .../src/DependencyResolver/haste/index.js | 5 ++ react-packager/src/Packager/index.js | 1 + react-packager/src/Server/index.js | 2 +- 7 files changed, 137 insertions(+), 33 deletions(-) diff --git a/react-packager/src/AssetServer/__tests__/AssetServer-test.js b/react-packager/src/AssetServer/__tests__/AssetServer-test.js index 43f22345..c6acc6a8 100644 --- a/react-packager/src/AssetServer/__tests__/AssetServer-test.js +++ b/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', + }); + }); + }); }); }); diff --git a/react-packager/src/AssetServer/index.js b/react-packager/src/AssetServer/index.js index 6f07dd01..9bae2682 100644 --- a/react-packager/src/AssetServer/index.js +++ b/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) { diff --git a/react-packager/src/DependencyResolver/haste/DependencyGraph/__tests__/DependencyGraph-test.js b/react-packager/src/DependencyResolver/haste/DependencyGraph/__tests__/DependencyGraph-test.js index f75445d0..c247e59d 100644 --- a/react-packager/src/DependencyResolver/haste/DependencyGraph/__tests__/DependencyGraph-test.js +++ b/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', { diff --git a/react-packager/src/DependencyResolver/haste/DependencyGraph/index.js b/react-packager/src/DependencyResolver/haste/DependencyGraph/index.js index 08a4b513..0881e5dc 100644 --- a/react-packager/src/DependencyResolver/haste/DependencyGraph/index.js +++ b/react-packager/src/DependencyResolver/haste/DependencyGraph/index.js @@ -44,7 +44,7 @@ var validateOpts = declareOpts({ }, assetExts: { type: 'array', - default: ['png'], + required: true, } }); diff --git a/react-packager/src/DependencyResolver/haste/index.js b/react-packager/src/DependencyResolver/haste/index.js index 2583ac8f..da68785e 100644 --- a/react-packager/src/DependencyResolver/haste/index.js +++ b/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)); diff --git a/react-packager/src/Packager/index.js b/react-packager/src/Packager/index.js index e5afefe7..a85281d2 100644 --- a/react-packager/src/Packager/index.js +++ b/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({ diff --git a/react-packager/src/Server/index.js b/react-packager/src/Server/index.js index d2c15717..d4da5ae1 100644 --- a/react-packager/src/Server/index.js +++ b/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'], }, });