mirror of https://github.com/status-im/metro.git
[react-packager] Modernize AssetServer to ES6
This commit is contained in:
Martín Bigio
parent
801dd2d133
commit
f77f48c61c
|
|
@ -8,22 +8,22 @@ jest
|
||||||
.mock('crypto')
|
.mock('crypto')
|
||||||
.mock('fs');
|
.mock('fs');
|
||||||
|
|
||||||
var Promise = require('promise');
|
const Promise = require('promise');
|
||||||
|
|
||||||
describe('AssetServer', function() {
|
describe('AssetServer', () => {
|
||||||
var AssetServer;
|
let AssetServer;
|
||||||
var crypto;
|
let crypto;
|
||||||
var fs;
|
let fs;
|
||||||
|
|
||||||
beforeEach(function() {
|
beforeEach(() => {
|
||||||
AssetServer = require('../');
|
AssetServer = require('../');
|
||||||
crypto = require('crypto');
|
crypto = require('crypto');
|
||||||
fs = require('fs');
|
fs = require('fs');
|
||||||
});
|
});
|
||||||
|
|
||||||
describe('assetServer.get', function() {
|
describe('assetServer.get', () => {
|
||||||
pit('should work for the simple case', function() {
|
pit('should work for the simple case', () => {
|
||||||
var server = new AssetServer({
|
const server = new AssetServer({
|
||||||
projectRoots: ['/root'],
|
projectRoots: ['/root'],
|
||||||
assetExts: ['png'],
|
assetExts: ['png'],
|
||||||
});
|
});
|
||||||
|
|
@ -40,15 +40,15 @@ describe('AssetServer', function() {
|
||||||
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(resp =>
|
||||||
resp.forEach(function(data) {
|
resp.forEach(data =>
|
||||||
expect(data).toBe('b image');
|
expect(data).toBe('b image')
|
||||||
});
|
)
|
||||||
});
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
pit('should work for the simple case with jpg', function() {
|
pit('should work for the simple case with jpg', () => {
|
||||||
var server = new AssetServer({
|
const server = new AssetServer({
|
||||||
projectRoots: ['/root'],
|
projectRoots: ['/root'],
|
||||||
assetExts: ['png', 'jpg'],
|
assetExts: ['png', 'jpg'],
|
||||||
});
|
});
|
||||||
|
|
@ -65,16 +65,16 @@ describe('AssetServer', function() {
|
||||||
return Promise.all([
|
return Promise.all([
|
||||||
server.get('imgs/b.jpg'),
|
server.get('imgs/b.jpg'),
|
||||||
server.get('imgs/b.png'),
|
server.get('imgs/b.png'),
|
||||||
]).then(function(data) {
|
]).then(data =>
|
||||||
expect(data).toEqual([
|
expect(data).toEqual([
|
||||||
'jpeg image',
|
'jpeg image',
|
||||||
'png image',
|
'png image',
|
||||||
]);
|
])
|
||||||
});
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
pit('should pick the bigger one', function() {
|
pit('should pick the bigger one', () => {
|
||||||
var server = new AssetServer({
|
const server = new AssetServer({
|
||||||
projectRoots: ['/root'],
|
projectRoots: ['/root'],
|
||||||
assetExts: ['png'],
|
assetExts: ['png'],
|
||||||
});
|
});
|
||||||
|
|
@ -90,13 +90,13 @@ describe('AssetServer', function() {
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
return server.get('imgs/b@3x.png').then(function(data) {
|
return server.get('imgs/b@3x.png').then(data =>
|
||||||
expect(data).toBe('b4 image');
|
expect(data).toBe('b4 image')
|
||||||
});
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
pit('should support multiple project roots', function() {
|
pit('should support multiple project roots', () => {
|
||||||
var server = new AssetServer({
|
const server = new AssetServer({
|
||||||
projectRoots: ['/root', '/root2'],
|
projectRoots: ['/root', '/root2'],
|
||||||
assetExts: ['png'],
|
assetExts: ['png'],
|
||||||
});
|
});
|
||||||
|
|
@ -116,27 +116,23 @@ describe('AssetServer', function() {
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
return server.get('newImages/imgs/b.png').then(function(data) {
|
return server.get('newImages/imgs/b.png').then(data =>
|
||||||
expect(data).toBe('b1 image');
|
expect(data).toBe('b1 image')
|
||||||
});
|
);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
describe('assetSerer.getAssetData', function() {
|
describe('assetSerer.getAssetData', () => {
|
||||||
pit('should get assetData', function() {
|
pit('should get assetData', () => {
|
||||||
var hash = {
|
const hash = {
|
||||||
update: jest.genMockFn(),
|
update: jest.genMockFn(),
|
||||||
digest: jest.genMockFn(),
|
digest: jest.genMockFn(),
|
||||||
};
|
};
|
||||||
|
|
||||||
hash.digest.mockImpl(function() {
|
hash.digest.mockImpl(() => 'wow such hash');
|
||||||
return 'wow such hash';
|
crypto.createHash.mockImpl(() => hash);
|
||||||
});
|
|
||||||
crypto.createHash.mockImpl(function() {
|
|
||||||
return hash;
|
|
||||||
});
|
|
||||||
|
|
||||||
var server = new AssetServer({
|
const server = new AssetServer({
|
||||||
projectRoots: ['/root'],
|
projectRoots: ['/root'],
|
||||||
assetExts: ['png'],
|
assetExts: ['png'],
|
||||||
});
|
});
|
||||||
|
|
@ -152,7 +148,7 @@ describe('AssetServer', function() {
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
return server.getAssetData('imgs/b.png').then(function(data) {
|
return server.getAssetData('imgs/b.png').then(data => {
|
||||||
expect(hash.update.mock.calls.length).toBe(4);
|
expect(hash.update.mock.calls.length).toBe(4);
|
||||||
expect(data).toEqual({
|
expect(data).toEqual({
|
||||||
type: 'png',
|
type: 'png',
|
||||||
|
|
@ -163,20 +159,16 @@ describe('AssetServer', function() {
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
pit('should get assetData for non-png images', function() {
|
pit('should get assetData for non-png images', () => {
|
||||||
var hash = {
|
const hash = {
|
||||||
update: jest.genMockFn(),
|
update: jest.genMockFn(),
|
||||||
digest: jest.genMockFn(),
|
digest: jest.genMockFn(),
|
||||||
};
|
};
|
||||||
|
|
||||||
hash.digest.mockImpl(function() {
|
hash.digest.mockImpl(() => 'wow such hash');
|
||||||
return 'wow such hash';
|
crypto.createHash.mockImpl(() => hash);
|
||||||
});
|
|
||||||
crypto.createHash.mockImpl(function() {
|
|
||||||
return hash;
|
|
||||||
});
|
|
||||||
|
|
||||||
var server = new AssetServer({
|
const server = new AssetServer({
|
||||||
projectRoots: ['/root'],
|
projectRoots: ['/root'],
|
||||||
assetExts: ['png', 'jpeg'],
|
assetExts: ['png', 'jpeg'],
|
||||||
});
|
});
|
||||||
|
|
@ -192,7 +184,7 @@ describe('AssetServer', function() {
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
return server.getAssetData('imgs/b.jpg').then(function(data) {
|
return server.getAssetData('imgs/b.jpg').then(data => {
|
||||||
expect(hash.update.mock.calls.length).toBe(4);
|
expect(hash.update.mock.calls.length).toBe(4);
|
||||||
expect(data).toEqual({
|
expect(data).toEqual({
|
||||||
type: 'jpg',
|
type: 'jpg',
|
||||||
|
|
|
||||||
|
|
@ -8,20 +8,20 @@
|
||||||
*/
|
*/
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
var declareOpts = require('../lib/declareOpts');
|
const Promise = require('promise');
|
||||||
var getAssetDataFromName = require('../lib/getAssetDataFromName');
|
|
||||||
var path = require('path');
|
|
||||||
var Promise = require('promise');
|
|
||||||
var fs = require('fs');
|
|
||||||
var crypto = require('crypto');
|
|
||||||
|
|
||||||
var stat = Promise.denodeify(fs.stat);
|
const crypto = require('crypto');
|
||||||
var readDir = Promise.denodeify(fs.readdir);
|
const declareOpts = require('../lib/declareOpts');
|
||||||
var readFile = Promise.denodeify(fs.readFile);
|
const fs = require('fs');
|
||||||
|
const getAssetDataFromName = require('../lib/getAssetDataFromName');
|
||||||
|
const path = require('path');
|
||||||
|
|
||||||
module.exports = AssetServer;
|
const stat = Promise.denodeify(fs.stat);
|
||||||
|
const readDir = Promise.denodeify(fs.readdir);
|
||||||
|
const readFile = Promise.denodeify(fs.readFile);
|
||||||
|
|
||||||
var validateOpts = declareOpts({
|
|
||||||
|
const validateOpts = declareOpts({
|
||||||
projectRoots: {
|
projectRoots: {
|
||||||
type: 'array',
|
type: 'array',
|
||||||
required: true,
|
required: true,
|
||||||
|
|
@ -32,135 +32,136 @@ var validateOpts = declareOpts({
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
function AssetServer(options) {
|
class AssetServer {
|
||||||
var opts = validateOpts(options);
|
constructor(options) {
|
||||||
this._roots = opts.projectRoots;
|
const opts = validateOpts(options);
|
||||||
this._assetExts = opts.assetExts;
|
this._roots = opts.projectRoots;
|
||||||
}
|
this._assetExts = opts.assetExts;
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
get(assetPath) {
|
||||||
* Given a request for an image by path. That could contain a resolution
|
const assetData = getAssetDataFromName(assetPath);
|
||||||
* postfix, we need to find that image (or the closest one to it's resolution)
|
return this._getAssetRecord(assetPath).then(record => {
|
||||||
* in one of the project roots:
|
for (let i = 0; i < record.scales.length; i++) {
|
||||||
*
|
if (record.scales[i] >= assetData.resolution) {
|
||||||
* 1. We first parse the directory of the asset
|
return readFile(record.files[i]);
|
||||||
* 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 scales in this directory
|
|
||||||
* 4. Then pick the closest resolution (rounding up) to the requested one
|
|
||||||
*/
|
|
||||||
|
|
||||||
AssetServer.prototype._getAssetRecord = function(assetPath) {
|
|
||||||
var filename = path.basename(assetPath);
|
|
||||||
|
|
||||||
return findRoot(
|
|
||||||
this._roots,
|
|
||||||
path.dirname(assetPath)
|
|
||||||
).then(function(dir) {
|
|
||||||
return Promise.all([
|
|
||||||
dir,
|
|
||||||
readDir(dir),
|
|
||||||
]);
|
|
||||||
}).then(function(res) {
|
|
||||||
var dir = res[0];
|
|
||||||
var files = res[1];
|
|
||||||
var assetData = getAssetDataFromName(filename);
|
|
||||||
|
|
||||||
var map = buildAssetMap(dir, files);
|
|
||||||
var record = map[assetData.assetName];
|
|
||||||
|
|
||||||
if (!record) {
|
|
||||||
throw new Error('Asset not found');
|
|
||||||
}
|
|
||||||
|
|
||||||
return record;
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
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]);
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
return readFile(record.files[record.files.length - 1]);
|
return readFile(record.files[record.files.length - 1]);
|
||||||
});
|
});
|
||||||
};
|
}
|
||||||
|
|
||||||
AssetServer.prototype.getAssetData = function(assetPath) {
|
getAssetData(assetPath) {
|
||||||
var nameData = getAssetDataFromName(assetPath);
|
const nameData = getAssetDataFromName(assetPath);
|
||||||
var data = {
|
const data = {
|
||||||
name: nameData.name,
|
name: nameData.name,
|
||||||
type: nameData.type,
|
type: nameData.type,
|
||||||
};
|
};
|
||||||
|
|
||||||
return this._getAssetRecord(assetPath).then(function(record) {
|
return this._getAssetRecord(assetPath).then(record => {
|
||||||
data.scales = record.scales;
|
data.scales = record.scales;
|
||||||
|
|
||||||
return Promise.all(
|
return Promise.all(
|
||||||
record.files.map(function(file) {
|
record.files.map(file => stat(file))
|
||||||
return stat(file);
|
);
|
||||||
|
}).then(stats => {
|
||||||
|
const hash = crypto.createHash('md5');
|
||||||
|
|
||||||
|
stats.forEach(fstat =>
|
||||||
|
hash.update(fstat.mtime.getTime().toString())
|
||||||
|
);
|
||||||
|
|
||||||
|
data.hash = hash.digest('hex');
|
||||||
|
return data;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Given a request for an image by path. That could contain a resolution
|
||||||
|
* postfix, we need to find that image (or the closest one to it's resolution)
|
||||||
|
* in one of the project roots:
|
||||||
|
*
|
||||||
|
* 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 scales in this directory
|
||||||
|
* 4. Then pick the closest resolution (rounding up) to the requested one
|
||||||
|
*/
|
||||||
|
_getAssetRecord(assetPath) {
|
||||||
|
const filename = path.basename(assetPath);
|
||||||
|
|
||||||
|
return (
|
||||||
|
this._findRoot(
|
||||||
|
this._roots,
|
||||||
|
path.dirname(assetPath)
|
||||||
|
)
|
||||||
|
.then(dir => Promise.all([
|
||||||
|
dir,
|
||||||
|
readDir(dir),
|
||||||
|
]))
|
||||||
|
.then(res => {
|
||||||
|
const dir = res[0];
|
||||||
|
const files = res[1];
|
||||||
|
const assetData = getAssetDataFromName(filename);
|
||||||
|
|
||||||
|
const map = this._buildAssetMap(dir, files);
|
||||||
|
const record = map[assetData.assetName];
|
||||||
|
|
||||||
|
if (!record) {
|
||||||
|
throw new Error('Asset not found');
|
||||||
|
}
|
||||||
|
|
||||||
|
return record;
|
||||||
})
|
})
|
||||||
);
|
);
|
||||||
}).then(function(stats) {
|
}
|
||||||
var hash = crypto.createHash('md5');
|
|
||||||
|
|
||||||
stats.forEach(function(fstat) {
|
_findRoot(roots, dir) {
|
||||||
hash.update(fstat.mtime.getTime().toString());
|
return Promise.all(
|
||||||
});
|
roots.map(root => {
|
||||||
|
const absPath = path.join(root, dir);
|
||||||
data.hash = hash.digest('hex');
|
return stat(absPath).then(fstat => {
|
||||||
return data;
|
return {path: absPath, isDirectory: fstat.isDirectory()};
|
||||||
});
|
}, err => {
|
||||||
};
|
return {path: absPath, isDirectory: false};
|
||||||
|
});
|
||||||
function findRoot(roots, dir) {
|
})
|
||||||
return Promise.all(
|
).then(stats => {
|
||||||
roots.map(function(root) {
|
for (let i = 0; i < stats.length; i++) {
|
||||||
var absPath = path.join(root, dir);
|
|
||||||
return stat(absPath).then(function(fstat) {
|
|
||||||
return {path: absPath, isDirectory: fstat.isDirectory()};
|
|
||||||
}, function (err) {
|
|
||||||
return {path: absPath, isDirectory: false};
|
|
||||||
});
|
|
||||||
})
|
|
||||||
).then(
|
|
||||||
function(stats) {
|
|
||||||
for (var i = 0; i < stats.length; i++) {
|
|
||||||
if (stats[i].isDirectory) {
|
if (stats[i].isDirectory) {
|
||||||
return stats[i].path;
|
return stats[i].path;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
throw new Error('Could not find any directories');
|
throw new Error('Could not find any directories');
|
||||||
}
|
});
|
||||||
);
|
}
|
||||||
}
|
|
||||||
|
|
||||||
function buildAssetMap(dir, files) {
|
_buildAssetMap(dir, files) {
|
||||||
var assets = files.map(getAssetDataFromName);
|
const assets = files.map(getAssetDataFromName);
|
||||||
var map = Object.create(null);
|
const map = Object.create(null);
|
||||||
assets.forEach(function(asset, i) {
|
assets.forEach(function(asset, i) {
|
||||||
var file = files[i];
|
const file = files[i];
|
||||||
var record = map[asset.assetName];
|
let record = map[asset.assetName];
|
||||||
if (!record) {
|
if (!record) {
|
||||||
record = map[asset.assetName] = {
|
record = map[asset.assetName] = {
|
||||||
scales: [],
|
scales: [],
|
||||||
files: [],
|
files: [],
|
||||||
};
|
};
|
||||||
}
|
|
||||||
|
|
||||||
var insertIndex;
|
|
||||||
var length = record.scales.length;
|
|
||||||
for (insertIndex = 0; insertIndex < length; insertIndex++) {
|
|
||||||
if (asset.resolution < record.scales[insertIndex]) {
|
|
||||||
break;
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
record.scales.splice(insertIndex, 0, asset.resolution);
|
|
||||||
record.files.splice(insertIndex, 0, path.join(dir, file));
|
|
||||||
});
|
|
||||||
|
|
||||||
return map;
|
let insertIndex;
|
||||||
|
const length = record.scales.length;
|
||||||
|
for (insertIndex = 0; insertIndex < length; insertIndex++) {
|
||||||
|
if (asset.resolution < record.scales[insertIndex]) {
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
record.scales.splice(insertIndex, 0, asset.resolution);
|
||||||
|
record.files.splice(insertIndex, 0, path.join(dir, file));
|
||||||
|
});
|
||||||
|
|
||||||
|
return map;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
module.exports = AssetServer;
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue