[ReactNative] Register assets with AssetRegistry

Author: frantic

Libraries/Image/AssetRegistry.js

@@ -0,0 +1,20 @@
+/**
+ * Copyright 2004-present Facebook. All Rights Reserved.
+ *
+ * @providesModule AssetRegistry
+ */
+'use strict';
+
+var assets = [];
+
+function registerAsset(asset) {
+  // `push` returns new array length, so the first asset will
+  // get id 1 (not 0) to make the value truthy
+  return assets.push(asset);
+}
+
+function getAssetByID(assetId) {
+  return assets[assetId - 1];
+}
+
+module.exports = { registerAsset, getAssetByID };

Libraries/Image/__tests__/resolveAssetSource-test.js

@@ -8,19 +8,24 @@
  */
 'use strict';
 
-jest.dontMock('../resolveAssetSource');
+jest
+  .dontMock('AssetRegistry')
+  .dontMock('../resolveAssetSource');
 
 var resolveAssetSource;
 var SourceCode;
+var AssetRegistry;
 
 function expectResolvesAsset(input, expectedSource) {
-  expect(resolveAssetSource(input)).toEqual(expectedSource);
+  var assetId = AssetRegistry.registerAsset(input);
+  expect(resolveAssetSource(assetId)).toEqual(expectedSource);
 }
 
 describe('resolveAssetSource', () => {
   beforeEach(() => {
     jest.resetModuleRegistry();
     SourceCode = require('NativeModules').SourceCode;
+    AssetRegistry = require('AssetRegistry');
     resolveAssetSource = require('../resolveAssetSource');
   });
 
@@ -32,6 +37,22 @@ describe('resolveAssetSource', () => {
     expect(resolveAssetSource(source2)).toBe(source2);
   });
 
+  it('does not change deprecated assets', () => {
+    expect(resolveAssetSource({
+      isStatic: true,
+      deprecated: true,
+      width: 100,
+      height: 200,
+      uri: 'logo',
+    })).toEqual({
+      isStatic: true,
+      deprecated: true,
+      width: 100,
+      height: 200,
+      uri: 'logo',
+    });
+  });
+
   it('ignores any weird data', () => {
     expect(resolveAssetSource(null)).toBe(null);
     expect(resolveAssetSource(42)).toBe(null);
@@ -81,25 +102,6 @@ describe('resolveAssetSource', () => {
       });
     });
 
-    it('does not change deprecated assets', () => {
-      expectResolvesAsset({
-        __packager_asset: true,
-        deprecated: true,
-        fileSystemLocation: '/root/app/module/a',
-        httpServerLocation: '/assets/module/a',
-        width: 100,
-        height: 200,
-        scales: [1],
-        hash: '5b6f00f',
-        name: 'logo',
-        type: 'png',
-      }, {
-        isStatic: true,
-        width: 100,
-        height: 200,
-        uri: 'logo',
-      });
-    });
   });
 
   describe('bundle was loaded from file', () => {

Libraries/Image/resolveAssetSource.js

@@ -10,6 +10,7 @@
  */
 'use strict';
 
+var AssetRegistry = require('AssetRegistry');
 var PixelRatio = require('PixelRatio');
 var SourceCode = require('NativeModules').SourceCode;
 
@@ -44,58 +45,47 @@ function pickScale(scales, deviceScale) {
 }
 
 function resolveAssetSource(source) {
-  if (!source || typeof source !== 'object') {
-    return null;
-  }
-
-  if (!source.__packager_asset) {
+  if (typeof source === 'object') {
     return source;
   }
 
-  // Deprecated assets are managed by Xcode for now,
-  // just returning image name as `uri`
-  // Examples:
-  //   require('image!deprecatd_logo_example')
-  //   require('./new-hotness-logo-example.png')
-  if (source.deprecated) {
-    return {
-      width: source.width,
-      height: source.height,
-      isStatic: true,
-      uri: source.name || source.uri, // TODO(frantic): remove uri
-    };
+  var asset = AssetRegistry.getAssetByID(source);
+  if (asset) {
+    return assetToImageSource(asset);
   }
 
+  return null;
+}
+
+function assetToImageSource(asset) {
   // TODO(frantic): currently httpServerLocation is used both as
   // path in http URL and path within IPA. Should we have zipArchiveLocation?
-  var path = source.httpServerLocation;
+  var path = asset.httpServerLocation;
   if (path[0] === '/') {
     path = path.substr(1);
   }
 
-  var scale = pickScale(source.scales, PixelRatio.get());
+  var scale = pickScale(asset.scales, PixelRatio.get());
   var scaleSuffix = scale === 1 ? '' : '@' + scale + 'x';
 
-  var fileName = source.name + scaleSuffix + '.' + source.type;
+  var fileName = asset.name + scaleSuffix + '.' + asset.type;
   var serverURL = getServerURL();
   if (serverURL) {
     return {
-      width: source.width,
-      height: source.height,
+      width: asset.width,
+      height: asset.height,
       uri: serverURL + path + '/' + fileName +
-        '?hash=' + source.hash,
+        '?hash=' + asset.hash,
       isStatic: false,
     };
   } else {
     return {
-      width: source.width,
-      height: source.height,
+      width: asset.width,
+      height: asset.height,
       uri: path + '/' + fileName,
       isStatic: true,
     };
   }
-
-  return source;
 }
 
 module.exports = resolveAssetSource;

packager/react-packager/src/Packager/__tests__/Packager-test.js

@@ -166,12 +166,12 @@ describe('Packager', function() {
         };
 
         expect(p.addModule.mock.calls[3][0]).toEqual({
-          code: 'lol module.exports = ' +
+          code: 'lol module.exports = require("AssetRegistry").registerAsset(' +
             JSON.stringify(imgModule) +
-            '; lol',
-          sourceCode: 'module.exports = ' +
+            '); lol',
+          sourceCode: 'module.exports = require("AssetRegistry").registerAsset(' +
             JSON.stringify(imgModule) +
-            ';',
+            ');',
           sourcePath: '/root/img/new_image.png'
         });
 

packager/react-packager/src/Packager/index.js

@@ -219,7 +219,8 @@ Packager.prototype.generateAssetModule = function(ppackage, module) {
 
     ppackage.addAsset(img);
 
-    var code = 'module.exports = ' + JSON.stringify(img) + ';';
+    var ASSET_TEMPLATE = 'module.exports = require("AssetRegistry").registerAsset(%json);';
+    var code = ASSET_TEMPLATE.replace('%json', JSON.stringify(img));
 
     return new ModuleTransport({
       code: code,