From 5ac77062be92e32d13c4136a1b242e16ddaa5917 Mon Sep 17 00:00:00 2001 From: James Ide Date: Tue, 20 Sep 2016 13:43:13 -0700 Subject: [PATCH] Add "assetPlugin" option to allow arbitrary asset processing Summary: Adds a new URL option to the packager server called "assetPlugin". This can be a name of a Node module or multiple Node modules (`assetPlugin=module1&assetPlugin=module2`). Each plugin is loaded using `require()` and is expected to export a function. Each plugin function is invoked with an asset as the argument. The plugins may be async functions; the packager will properly wait for them to settle and will chain them. A plugin may be used to add extra metadata to an asset. For example it may add an array of hashes for all of the files belonging to an asset, or it may add the duration of a sound clip asset. Closes https://github.com/facebook/react-native/pull/9993 Differential Revision: D3895384 Pulled By: davidaurelio fbshipit-source-id: 0afe24012fc54b6d18d9b2df5f5675d27ea58320 --- .../src/Bundler/__tests__/Bundler-test.js | 59 +++++++++++++++++++ packager/react-packager/src/Bundler/index.js | 38 ++++++++++-- .../src/Server/__tests__/Server-test.js | 28 +++++++++ packager/react-packager/src/Server/index.js | 15 +++-- 4 files changed, 131 insertions(+), 9 deletions(-) diff --git a/packager/react-packager/src/Bundler/__tests__/Bundler-test.js b/packager/react-packager/src/Bundler/__tests__/Bundler-test.js index dbc00f759..a74d9e5d4 100644 --- a/packager/react-packager/src/Bundler/__tests__/Bundler-test.js +++ b/packager/react-packager/src/Bundler/__tests__/Bundler-test.js @@ -208,6 +208,65 @@ describe('Bundler', function() { }); }); + it('loads and runs asset plugins', function() { + jest.mock('mockPlugin1', () => { + return asset => { + asset.extraReverseHash = asset.hash.split('').reverse().join(''); + return asset; + }; + }, {virtual: true}); + + jest.mock('asyncMockPlugin2', () => { + return asset => { + expect(asset.extraReverseHash).toBeDefined(); + return new Promise((resolve) => { + asset.extraPixelCount = asset.width * asset.height; + resolve(asset); + }); + }; + }, {virtual: true}); + + const mockAsset = { + scales: [1,2,3], + files: [ + '/root/img/img.png', + '/root/img/img@2x.png', + '/root/img/img@3x.png', + ], + hash: 'i am a hash', + name: 'img', + type: 'png', + }; + assetServer.getAssetData.mockImpl(() => mockAsset); + + return bundler.bundle({ + entryFile: '/root/foo.js', + runBeforeMainModule: [], + runModule: true, + sourceMapUrl: 'source_map_url', + assetPlugins: ['mockPlugin1', 'asyncMockPlugin2'], + }).then(bundle => { + expect(bundle.addAsset.mock.calls[1]).toEqual([{ + __packager_asset: true, + fileSystemLocation: '/root/img', + httpServerLocation: '/assets/img', + width: 25, + height: 50, + scales: [1, 2, 3], + files: [ + '/root/img/img.png', + '/root/img/img@2x.png', + '/root/img/img@3x.png', + ], + hash: 'i am a hash', + name: 'img', + type: 'png', + extraReverseHash: 'hsah a ma i', + extraPixelCount: 1250, + }]); + }); + }); + pit('gets the list of dependencies from the resolver', function() { const entryFile = '/root/foo.js'; return bundler.getDependencies({entryFile, recursive: true}).then(() => diff --git a/packager/react-packager/src/Bundler/index.js b/packager/react-packager/src/Bundler/index.js index dfa7680f0..2e3116a07 100644 --- a/packager/react-packager/src/Bundler/index.js +++ b/packager/react-packager/src/Bundler/index.js @@ -258,6 +258,7 @@ class Bundler { resolutionResponse, isolateModuleIDs, generateSourceMaps, + assetPlugins, }) { const onResolutionResponse = response => { bundle.setMainModuleId(response.getModuleId(getMainModule(response))); @@ -303,6 +304,7 @@ class Bundler { finalizeBundle, isolateModuleIDs, generateSourceMaps, + assetPlugins, }); } @@ -313,6 +315,7 @@ class Bundler { sourceMapUrl, dev, platform, + assetPlugins, }) { const onModuleTransformed = ({module, transformed, response, bundle}) => { const deps = Object.create(null); @@ -341,6 +344,7 @@ class Bundler { finalizeBundle, minify: false, bundle: new PrepackBundle(sourceMapUrl), + assetPlugins, }); } @@ -355,6 +359,7 @@ class Bundler { resolutionResponse, isolateModuleIDs, generateSourceMaps, + assetPlugins, onResolutionResponse = noop, onModuleTransformed = noop, finalizeBundle = noop, @@ -416,6 +421,7 @@ class Bundler { module, bundle, entryFilePath, + assetPlugins, transformOptions: response.transformOptions, getModuleId: response.getModuleId, dependencyPairs: response.getResolvedDependencyPairs(module), @@ -557,6 +563,7 @@ class Bundler { transformOptions, getModuleId, dependencyPairs, + assetPlugins, }) { let moduleTransport; const moduleId = getModuleId(module); @@ -566,7 +573,7 @@ class Bundler { this._generateAssetModule_DEPRECATED(bundle, module, moduleId); } else if (module.isAsset()) { moduleTransport = this._generateAssetModule( - bundle, module, moduleId, transformOptions.platform); + bundle, module, moduleId, assetPlugins, transformOptions.platform); } if (moduleTransport) { @@ -629,7 +636,7 @@ class Bundler { }); } - _generateAssetObjAndCode(module, platform = null) { + _generateAssetObjAndCode(module, assetPlugins, platform = null) { const relPath = getPathRelativeToRoot(this._projectRoots, module.path); var assetUrlPath = path.join('/assets', path.dirname(relPath)); @@ -647,7 +654,7 @@ class Bundler { return Promise.all([ isImage ? sizeOf(module.path) : null, this._assetServer.getAssetData(relPath, platform), - ]).then(function(res) { + ]).then((res) => { const dimensions = res[0]; const assetData = res[1]; const asset = { @@ -663,6 +670,8 @@ class Bundler { type: assetData.type, }; + return this._applyAssetPlugins(assetPlugins, asset); + }).then((asset) => { const json = JSON.stringify(filterObject(asset, assetPropertyBlacklist)); const assetRegistryPath = 'react-native/Libraries/Image/AssetRegistry'; const code = @@ -678,11 +687,30 @@ class Bundler { }); } + _applyAssetPlugins(assetPlugins, asset) { + if (!assetPlugins.length) { + return asset; + } - _generateAssetModule(bundle, module, moduleId, platform = null) { + let [currentAssetPlugin, ...remainingAssetPlugins] = assetPlugins; + let assetPluginFunction = require(currentAssetPlugin); + let result = assetPluginFunction(asset); + + // If the plugin was an async function, wait for it to fulfill before + // applying the remaining plugins + if (typeof result.then === 'function') { + return result.then(resultAsset => + this._applyAssetPlugins(remainingAssetPlugins, resultAsset) + ); + } else { + return this._applyAssetPlugins(remainingAssetPlugins, result); + } + } + + _generateAssetModule(bundle, module, moduleId, assetPlugins = [], platform = null) { return Promise.all([ module.getName(), - this._generateAssetObjAndCode(module, platform), + this._generateAssetObjAndCode(module, assetPlugins, platform), ]).then(([name, {asset, code, meta}]) => { bundle.addAsset(asset); return new ModuleTransport({ diff --git a/packager/react-packager/src/Server/__tests__/Server-test.js b/packager/react-packager/src/Server/__tests__/Server-test.js index c2546ffdc..b781b5dd5 100644 --- a/packager/react-packager/src/Server/__tests__/Server-test.js +++ b/packager/react-packager/src/Server/__tests__/Server-test.js @@ -160,6 +160,7 @@ describe('processRequest', () => { unbundle: false, entryModuleOnly: false, isolateModuleIDs: false, + assetPlugins: [], }); }); }); @@ -183,6 +184,31 @@ describe('processRequest', () => { unbundle: false, entryModuleOnly: false, isolateModuleIDs: false, + assetPlugins: [], + }); + }); + }); + + pit('passes in the assetPlugin param', function() { + return makeRequest( + requestHandler, + 'index.bundle?assetPlugin=assetPlugin1&assetPlugin=assetPlugin2' + ).then(function(response) { + expect(response.body).toEqual('this is the source'); + expect(Bundler.prototype.bundle).toBeCalledWith({ + entryFile: 'index.js', + inlineSourceMap: false, + minify: false, + hot: false, + runModule: true, + sourceMapUrl: 'index.map?assetPlugin=assetPlugin1&assetPlugin=assetPlugin2', + dev: true, + platform: undefined, + runBeforeMainModule: ['InitializeJavaScriptAppEngine'], + unbundle: false, + entryModuleOnly: false, + isolateModuleIDs: false, + assetPlugins: ['assetPlugin1', 'assetPlugin2'], }); }); }); @@ -412,6 +438,7 @@ describe('processRequest', () => { unbundle: false, entryModuleOnly: false, isolateModuleIDs: false, + assetPlugins: [], }) ); }); @@ -434,6 +461,7 @@ describe('processRequest', () => { unbundle: false, entryModuleOnly: false, isolateModuleIDs: false, + assetPlugins: [], }) ); }); diff --git a/packager/react-packager/src/Server/index.js b/packager/react-packager/src/Server/index.js index 29efa7960..6159452fe 100644 --- a/packager/react-packager/src/Server/index.js +++ b/packager/react-packager/src/Server/index.js @@ -153,7 +153,11 @@ const bundleOpts = declareOpts({ generateSourceMaps: { type: 'boolean', required: false, - } + }, + assetPlugins: { + type: 'array', + default: [], + }, }); const dependencyOpts = declareOpts({ @@ -797,9 +801,6 @@ class Server { _getOptionsFromUrl(reqUrl) { // `true` to parse the query param as an object. const urlObj = url.parse(reqUrl, true); - // node v0.11.14 bug see https://github.com/facebook/react-native/issues/218 - urlObj.query = urlObj.query || {}; - const pathname = decodeURIComponent(urlObj.pathname); // Backwards compatibility. Options used to be as added as '.' to the @@ -819,6 +820,11 @@ class Server { const platform = urlObj.query.platform || getPlatformExtension(pathname); + const assetPlugin = urlObj.query.assetPlugin; + const assetPlugins = Array.isArray(assetPlugin) ? + assetPlugin : + (typeof assetPlugin === 'string') ? [assetPlugin] : []; + return { sourceMapUrl: url.format(sourceMapUrlObj), entryFile: entryFile, @@ -838,6 +844,7 @@ class Server { false, ), generateSourceMaps: this._getBoolOptionFromQuery(urlObj.query, 'babelSourcemap'), + assetPlugins, }; }