Permalink
Browse files

BREAKING kill deprecated asset support

Summary:
This removes support for `require('image!…')`, which has been deprecated for a long time.

It is still possible to use images that are already bundled by the native app using the `nativeImageSource` module.
Check http://facebook.github.io/react-native/docs/images.html for detailed documentation.

Reviewed By: matryoshcow

Differential Revision: D4231208

fbshipit-source-id: 05ec4c1ca0fabdc3fbb652f8ad1acdf240a67955
  • Loading branch information...
davidaurelio authored and Facebook Github Bot committed Nov 24, 2016
1 parent 0c50a5b commit ca58e0af82797042fabad3873478bc4a9feb7281
View
@@ -33,7 +33,6 @@ experimental.strict_type_args=true
munge_underscores=true
module.name_mapper='^image![a-zA-Z0-9$_-]+$' -> 'GlobalImageStub'
module.name_mapper='^[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)$' -> 'RelativeImageStub'
suppress_type=$FlowIssue

This file was deleted.

Oops, something went wrong.
View
@@ -7,7 +7,6 @@
]
},
"moduleNameMapper": {
"^image![a-zA-Z0-9$_-]+$": "GlobalImageStub",
"^[./a-zA-Z0-9$_-]+\\.(bmp|gif|jpg|jpeg|png|psd|svg|webp)$": "RelativeImageStub",
"^React$": "<rootDir>node_modules/react"
},
@@ -51,7 +51,6 @@ function buildBundle(args, config, output = outputBundle, packagerInstance) {
const options = {
projectRoots: config.getProjectRoots(),
assetExts: defaultAssetExts.concat(assetExts),
assetRoots: config.getAssetRoots(),
blacklistRE: config.getBlacklistRE(),
getTransformOptionsModulePath: config.getTransformOptionsModulePath,
transformModulePath: transformModulePath,
@@ -31,7 +31,6 @@ function saveAssets(
const filesToCopy = Object.create(null); // Map src -> dest
assets
.filter(asset => !asset.deprecated)
.forEach(asset =>
asset.scales.forEach((scale, idx) => {
const src = asset.files[idx];
@@ -20,22 +20,11 @@ var rnpmConfig = require('./core/config');
* to tweak.
*/
var config = {
getProjectRoots() {
return getRoots();
},
getProjectRoots,
getProjectConfig: rnpmConfig.getProjectConfig,
getDependencyConfig: rnpmConfig.getDependencyConfig,
/**
* Specify where to look for assets that are referenced using
* `image!<image_name>`. Asset directories for images referenced using
* `./<image.extension>` don't require any entry in here.
*/
getAssetRoots() {
return getRoots();
},
/**
* Specify any additional asset extentions to be used by the packager.
* For example, if you want to include a .ttf file, you would return ['ttf']
@@ -62,7 +51,7 @@ var config = {
},
};
function getRoots() {
function getProjectRoots() {
var root = process.env.REACT_NATIVE_APP_ROOT;
if (root) {
return [path.resolve(root)];
@@ -27,7 +27,6 @@ function dependencies(argv, config, args, packagerInstance) {
const packageOpts = {
projectRoots: config.getProjectRoots(),
assetRoots: config.getAssetRoots(),
blacklistRE: config.getBlacklistRE(),
getTransformOptionsModulePath: config.getTransformOptionsModulePath,
transformModulePath: transformModulePath,
@@ -87,7 +87,6 @@ function getPackagerServer(args, config) {
return ReactPackager.createServer({
assetExts: defaultAssetExts.concat(args.assetExts),
assetRoots: args.assetRoots,
blacklistRE: config.getBlacklistRE(),
cacheVersion: '3',
extraNodeModules: config.extraNodeModules,
@@ -91,11 +91,6 @@ module.exports = {
description: 'override the root(s) to be used by the packager',
parse: (val) => val.split(','),
default: (config) => config.getProjectRoots(),
}, {
command: '--assetRoots [list]',
description: 'specify the root directories of app assets',
parse: (val) => val.split(',').map(dir => path.resolve(process.cwd(), dir)),
default: (config) => config.getAssetRoots(),
}, {
command: '--assetExts [list]',
description: 'Specify any additional asset extentions to be used by the packager',
@@ -47,7 +47,7 @@ function attachHMRServer({httpServer, path, packagerServer}) {
// `{path: '/a/b/c.js', deps: ['modA', 'modB', ...]}`
return Promise.all(Object.values(response.dependencies).map(dep => {
return dep.getName().then(depName => {
if (dep.isAsset() || dep.isAsset_DEPRECATED() || dep.isJSON()) {
if (dep.isAsset() || dep.isJSON()) {
return Promise.resolve({path: dep.path, deps: []});
}
return packagerServer.getShallowDependencies({
@@ -28,7 +28,6 @@ experimental.strict_type_args=true
munge_underscores=true
module.name_mapper='^image![a-zA-Z0-9$_-]+$' -> 'GlobalImageStub'
module.name_mapper='^[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)$' -> 'RelativeImageStub'
suppress_type=$FlowIssue
View
@@ -23,7 +23,6 @@ export type ConfigT = {
getTransformOptionsModulePath?: () => string,
transformVariants?: () => {[name: string]: Object},
getAssetRoots(): Array<string>,
getBlacklistRE(): RegExp,
getProjectRoots(): Array<string>,
};
View
@@ -21,7 +21,6 @@
"timers": "fake",
"moduleNameMapper": {
"^React$": "<rootDir>/Libraries/react-native/React.js",
"^image![a-zA-Z0-9$_-]+$": "GlobalImageStub",
"^[./a-zA-Z0-9$_-]+\\.png$": "RelativeImageStub"
},
"testPathIgnorePatterns": [
View
@@ -117,7 +117,7 @@ Builds a bundle according to the provided options.
#### `bundleOptions`
* `entryFile` string (required): the entry file of the bundle, relative to one
of the asset roots.
of the roots.
* `dev` boolean (defaults to `true`): sets a global `__DEV__` variable
which will effect how the React Native core libraries behave.
* `minify` boolean: Whether to minify code and apply production optimizations.
@@ -38,7 +38,6 @@ describe('Bundler', function() {
id,
dependencies,
isAsset,
isAsset_DEPRECATED,
isJSON,
isPolyfill,
resolution,
@@ -50,7 +49,6 @@ describe('Bundler', function() {
getName: () => Promise.resolve(id),
isJSON: () => isJSON,
isAsset: () => isAsset,
isAsset_DEPRECATED: () => isAsset_DEPRECATED,
isPolyfill: () => isPolyfill,
read: () => ({
code: 'arbitrary',
@@ -100,13 +98,6 @@ describe('Bundler', function() {
modules = [
createModule({id: 'foo', path: '/root/foo.js', dependencies: []}),
createModule({id: 'bar', path: '/root/bar.js', dependencies: []}),
createModule({
path: '/root/img/img.png',
id: 'image!img',
isAsset_DEPRECATED: true,
dependencies: [],
resolution: 2,
}),
createModule({
id: 'new_image.png',
path: '/root/img/new_image.png',
@@ -166,9 +157,8 @@ describe('Bundler', function() {
expect(ithAddedModule(0)).toEqual('/root/foo.js');
expect(ithAddedModule(1)).toEqual('/root/bar.js');
expect(ithAddedModule(2)).toEqual('/root/img/img.png');
expect(ithAddedModule(3)).toEqual('/root/img/new_image.png');
expect(ithAddedModule(4)).toEqual('/root/file.json');
expect(ithAddedModule(2)).toEqual('/root/img/new_image.png');
expect(ithAddedModule(3)).toEqual('/root/file.json');
expect(bundle.finalize.mock.calls[0]).toEqual([{
runMainModule: true,
@@ -177,15 +167,6 @@ describe('Bundler', function() {
}]);
expect(bundle.addAsset.mock.calls[0]).toEqual([{
__packager_asset: true,
path: '/root/img/img.png',
uri: 'img',
width: 25,
height: 50,
deprecated: true,
}]);
expect(bundle.addAsset.mock.calls[1]).toEqual([{
__packager_asset: true,
fileSystemLocation: '/root/img',
httpServerLocation: '/assets/img',
@@ -245,7 +226,7 @@ describe('Bundler', function() {
sourceMapUrl: 'source_map_url',
assetPlugins: ['mockPlugin1', 'asyncMockPlugin2'],
}).then(bundle => {
expect(bundle.addAsset.mock.calls[1]).toEqual([{
expect(bundle.addAsset.mock.calls[0]).toEqual([{
__packager_asset: true,
fileSystemLocation: '/root/img',
httpServerLocation: '/assets/img',
@@ -334,7 +315,6 @@ describe('Bundler', function() {
.then((paths) => expect(paths).toEqual([
'/root/foo.js',
'/root/bar.js',
'/root/img/img.png',
'/root/img/new_image.png',
'/root/img/new_image@2x.png',
'/root/img/new_image@3x.png',
@@ -79,10 +79,6 @@ const validateOpts = declareOpts({
type: 'object',
required: false,
},
assetRoots: {
type: 'array',
required: false,
},
assetExts: {
type: 'array',
default: ['png'],
@@ -120,7 +116,6 @@ type Options = {
resetCache: boolean,
transformModulePath: string,
extraNodeModules: {},
assetRoots: Array<string>,
assetExts: Array<string>,
watch: boolean,
assetServer: AssetServer,
@@ -182,7 +177,6 @@ class Bundler {
this._resolver = new Resolver({
assetExts: opts.assetExts,
assetRoots: opts.assetRoots,
blacklistRE: opts.blacklistRE,
cache: this._cache,
extraNodeModules: opts.extraNodeModules,
@@ -603,10 +597,7 @@ class Bundler {
let moduleTransport;
const moduleId = getModuleId(module);
if (module.isAsset_DEPRECATED()) {
moduleTransport =
this._generateAssetModule_DEPRECATED(bundle, module, moduleId);
} else if (module.isAsset()) {
if (module.isAsset()) {
moduleTransport = this._generateAssetModule(
bundle, module, moduleId, assetPlugins, transformOptions.platform);
}
@@ -639,38 +630,6 @@ class Bundler {
});
}
_generateAssetModule_DEPRECATED(bundle, module, moduleId) {
return Promise.all([
sizeOf(module.path),
module.getName(),
]).then(([dimensions, id]) => {
const img = {
__packager_asset: true,
path: module.path,
uri: id.replace(/^[^!]+!/, ''),
width: dimensions.width / module.resolution,
height: dimensions.height / module.resolution,
deprecated: true,
};
bundle.addAsset(img);
const code =
'module.exports=' +
JSON.stringify(filterObject(img, assetPropertyBlacklist))
+ ';';
return new ModuleTransport({
name: id,
id: moduleId,
code: code,
sourceCode: code,
sourcePath: module.path,
virtual: true,
});
});
}
_generateAssetObjAndCode(module, assetPlugins, platform: mixed = null) {
const relPath = getPathRelativeToRoot(this._projectRoots, module.path);
var assetUrlPath = joinPath('/assets', pathDirname(relPath));
@@ -54,19 +54,6 @@ export type FastFS = {
matches(directory: Path, pattern: RegExp): Array<Path>,
};
type DeprecatedAssetMapOptions = {|
assetExts: Extensions,
files: Array<Path>,
helpers: DependencyGraphHelpers,
platforms: Platforms,
|};
declare class DeprecatedAssetMap {
// node-haste/DependencyGraph/DeprecatedAssetMap.js
constructor(options: DeprecatedAssetMapOptions): void,
}
export type DeprecatedAssetMapT = DeprecatedAssetMap;
type HasteMapOptions = {|
allowRelativePaths: boolean,
extensions: Extensions,
@@ -89,7 +76,6 @@ type ResolutionRequestOptions = {|
platforms: Platforms,
preferNativePlatform: true,
hasteMap: HasteMap,
deprecatedAssetMap: DeprecatedAssetMap,
helpers: DependencyGraphHelpers,
moduleCache: ModuleCache,
fastfs: FastFS,
@@ -12,7 +12,6 @@
'use strict';
import type { // eslint-disable-line sort-requires
DeprecatedAssetMapT,
Extensions,
HasteMapT,
Path,
@@ -25,7 +24,6 @@ import type {
} from '../types.flow';
const DependencyGraphHelpers = require('../../node-haste/DependencyGraph/DependencyGraphHelpers');
const DeprecatedAssetMap: Class<DeprecatedAssetMapT> = require('../../node-haste/DependencyGraph/DeprecatedAssetMap');
const FastFS = require('./FastFS');
const HasteMap: Class<HasteMapT> = require('../../node-haste/DependencyGraph/HasteMap');
const Module = require('./Module');
@@ -58,12 +56,6 @@ exports.createResolveFn = function(options: ResolveOptions): ResolveFn {
assetExts,
providesModuleNodeModules: defaults.providesModuleNodeModules,
});
const deprecatedAssetMap = new DeprecatedAssetMap({
assetExts,
files,
helpers,
platforms,
});
const fastfs = new FastFS(files);
const moduleCache = new ModuleCache(fastfs, getTransformedFile);
@@ -83,7 +75,6 @@ exports.createResolveFn = function(options: ResolveOptions): ResolveFn {
let resolutionRequest = resolutionRequests[platform];
if (!resolutionRequest) {
resolutionRequest = resolutionRequests[platform] = new ResolutionRequest({
deprecatedAssetMap,
extraNodeModules,
fastfs,
hasteMap,
@@ -31,10 +31,6 @@ const validateOpts = declareOpts({
type: 'string',
default: 'haste',
},
assetRoots: {
type: 'array',
default: [],
},
watch: {
type: 'boolean',
default: false,
@@ -92,7 +88,6 @@ class Resolver {
this._depGraph = new DependencyGraph({
roots: opts.projectRoots,
assetRoots_DEPRECATED: opts.assetRoots,
assetExts: opts.assetExts,
ignoreFilePath: function(filepath) {
return filepath.indexOf('__tests__') !== -1 ||
Oops, something went wrong.

0 comments on commit ca58e0a

Please sign in to comment.