status-im
/
react-native
mirror of https://github.com/status-im/react-native.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

[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
This commit is contained in:
Amjad Masad 2015-05-20 15:28:59 -07:00
parent 8bb65215b1
commit 9a76f224af
7 changed files with 137 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
packager/react-packager/src/AssetServer/__tests__/AssetServer-test.js vendored
View File

@ -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',
});
});
});
});
});

4
packager/react-packager/src/AssetServer/index.js vendored
View File

@ -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) {

90
packager/react-packager/src/DependencyResolver/haste/DependencyGraph/__tests__/DependencyGraph-test.js vendored
View File

@ -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', {

2
packager/react-packager/src/DependencyResolver/haste/DependencyGraph/index.js vendored
View File

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

5
packager/react-packager/src/DependencyResolver/haste/index.js vendored
View File

@ -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));

1
packager/react-packager/src/Packager/index.js vendored
View File

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

2
packager/react-packager/src/Server/index.js vendored
View File

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