Allow out of tree platforms to provide customized saveAssets experiences

packages/cli-config/src/schema.ts

@@ -96,6 +96,7 @@ export const dependencyConfig = t
       t.string(),
       t.object({
         npmPackageName: t.string().optional(),
+        saveAssetsPlugin: t.string().optional(),
         dependencyConfig: t.func(),
         projectConfig: t.func(),
         linkConfig: t.func(),
@@ -180,6 +181,7 @@ export const projectConfig = t
       t.string(),
       t.object({
         npmPackageName: t.string().optional(),
+        saveAssetsPlugin: t.string().optional(),
         dependencyConfig: t.func(),
         projectConfig: t.func(),
         linkConfig: t.func(),

packages/cli-plugin-metro/src/commands/bundle/__tests__/filterPlatformAssetScales-test.ts

@@ -14,23 +14,23 @@ jest.dontMock('../filterPlatformAssetScales').dontMock('../assetPathUtils');
 
 describe('filterPlatformAssetScales', () => {
   it('removes everything but 2x and 3x for iOS', () => {
-    expect(filterPlatformAssetScales('ios', [1, 1.5, 2, 3, 4])).toEqual([
+    expect(filterPlatformAssetScales([1, 2, 3], [1, 1.5, 2, 3, 4])).toEqual([
       1,
       2,
       3,
     ]);
-    expect(filterPlatformAssetScales('ios', [3, 4])).toEqual([3]);
+    expect(filterPlatformAssetScales([1, 2, 3], [3, 4])).toEqual([3]);
   });
 
   it('keeps closest largest one if nothing matches', () => {
-    expect(filterPlatformAssetScales('ios', [0.5, 4, 100])).toEqual([4]);
-    expect(filterPlatformAssetScales('ios', [0.5, 100])).toEqual([100]);
-    expect(filterPlatformAssetScales('ios', [0.5])).toEqual([0.5]);
-    expect(filterPlatformAssetScales('ios', [])).toEqual([]);
+    expect(filterPlatformAssetScales([1, 2, 3], [0.5, 4, 100])).toEqual([4]);
+    expect(filterPlatformAssetScales([1, 2, 3], [0.5, 100])).toEqual([100]);
+    expect(filterPlatformAssetScales([1, 2, 3], [0.5])).toEqual([0.5]);
+    expect(filterPlatformAssetScales([1, 2, 3], [])).toEqual([]);
   });
 
   it('keeps all scales for unknown platform', () => {
-    expect(filterPlatformAssetScales('freebsd', [1, 1.5, 2, 3.7])).toEqual([
+    expect(filterPlatformAssetScales(undefined, [1, 1.5, 2, 3.7])).toEqual([
       1,
       1.5,
       2,

packages/cli-plugin-metro/src/commands/bundle/__tests__/getAssetDestPathIOS-test.ts

@@ -8,9 +8,9 @@
  * @emails oncall+javascript_foundation
  */
 
-import getAssetDestPathIOS from '../getAssetDestPathIOS';
+import getAssetDestPath from '../getAssetDestPath';
 
-jest.dontMock('../getAssetDestPathIOS');
+jest.dontMock('../getAssetDestPath');
 
 const path = require('path');
 
@@ -22,7 +22,7 @@ describe('getAssetDestPathIOS', () => {
       httpServerLocation: '/assets/test',
     };
 
-    expect(getAssetDestPathIOS(asset, 1)).toBe(
+    expect(getAssetDestPath(asset, 1)).toBe(
       path.normalize('assets/test/icon.png'),
     );
   });
@@ -34,10 +34,10 @@ describe('getAssetDestPathIOS', () => {
       httpServerLocation: '/assets/test',
     };
 
-    expect(getAssetDestPathIOS(asset, 2)).toBe(
+    expect(getAssetDestPath(asset, 2)).toBe(
       path.normalize('assets/test/icon@2x.png'),
     );
-    expect(getAssetDestPathIOS(asset, 3)).toBe(
+    expect(getAssetDestPath(asset, 3)).toBe(
       path.normalize('assets/test/icon@3x.png'),
     );
   });
@@ -49,7 +49,7 @@ describe('getAssetDestPathIOS', () => {
       httpServerLocation: '/assets/../../test',
     };
 
-    expect(getAssetDestPathIOS(asset, 1)).toBe(
+    expect(getAssetDestPath(asset, 1)).toBe(
       path.normalize('assets/__test/icon.png'),
     );
   });

packages/cli-plugin-metro/src/commands/bundle/buildBundle.ts

@@ -17,6 +17,10 @@ import type {Config} from '@react-native-community/cli-types';
 import saveAssets from './saveAssets';
 import {default as loadMetroConfig} from '../../tools/loadMetroConfig';
 import {logger} from '@react-native-community/cli-tools';
+import type {AssetData} from 'metro';
+import saveAssetsAndroid from './saveAssetsAndroid';
+import saveAssetsDefault from './saveAssetsDefault';
+import saveAssetsIOS from './saveAssetsIOS';
 
 interface RequestOptions {
   entryFile: string;
@@ -38,7 +42,18 @@ async function buildBundle(
     config: args.config,
   });
 
-  return buildBundleWithConfig(args, config, output);
+  let saveAssetsPlugin =
+    ctx.platforms[args.platform] &&
+    ctx.platforms[args.platform].saveAssetsPlugin
+      ? require(require.resolve(
+          ctx.platforms[args.platform].saveAssetsPlugin!,
+          {
+            paths: [ctx.root],
+          },
+        ))
+      : undefined;
+
+  return buildBundleWithConfig(args, config, output, saveAssetsPlugin);
 }
 
 /**
@@ -50,6 +65,17 @@ export async function buildBundleWithConfig(
   args: CommandLineArgs,
   config: ConfigT,
   output: typeof outputBundle = outputBundle,
+  saveAssetsPlugin: (
+    assets: ReadonlyArray<AssetData>,
+    platform: string,
+    assetsDest: string | undefined,
+    assetCatalogDest: string | undefined,
+    addAssetToCopy: (
+      asset: AssetData,
+      allowedScales: number[] | undefined,
+      getAssetDestPath: (asset: AssetData, scale: number) => string,
+    ) => void,
+  ) => void,
 ) {
   if (config.resolver.platforms.indexOf(args.platform) === -1) {
     logger.error(
@@ -100,12 +126,22 @@ export async function buildBundleWithConfig(
       bundleType: 'todo',
     });
 
+    if (!saveAssetsPlugin) {
+      saveAssetsPlugin =
+        args.platform === 'ios'
+          ? saveAssetsIOS
+          : args.platform === 'android'
+          ? saveAssetsAndroid
+          : saveAssetsDefault;
+    }
+
     // When we're done saving bundle output and the assets, we're done.
     return await saveAssets(
       outputAssets,
       args.platform,
       args.assetsDest,
       args.assetCatalogDest,
+      saveAssetsPlugin,
     );
   } finally {
     server.end();

packages/cli-plugin-metro/src/commands/bundle/filterPlatformAssetScales.ts

@@ -6,15 +6,10 @@
  *
  */
 
-const ALLOWED_SCALES: {[key: string]: number[]} = {
-  ios: [1, 2, 3],
-};
-
 function filterPlatformAssetScales(
-  platform: string,
+  whitelist: ReadonlyArray<number> | undefined,
   scales: ReadonlyArray<number>,
 ): ReadonlyArray<number> {
-  const whitelist: number[] = ALLOWED_SCALES[platform];
   if (!whitelist) {
     return scales;
   }

packages/cli-plugin-metro/src/commands/bundle/getAssetDestPathIOS.ts → packages/cli-plugin-metro/src/commands/bundle/getAssetDestPath.ts

@@ -9,7 +9,7 @@
 import path from 'path';
 import {PackagerAsset} from './assetPathUtils';
 
-function getAssetDestPathIOS(asset: PackagerAsset, scale: number): string {
+function getAssetDestPath(asset: PackagerAsset, scale: number): string {
   const suffix = scale === 1 ? '' : `@${scale}x`;
   const fileName = `${asset.name + suffix}.${asset.type}`;
   return path.join(
@@ -21,4 +21,4 @@ function getAssetDestPathIOS(asset: PackagerAsset, scale: number): string {
   );
 }
 
-export default getAssetDestPathIOS;
+export default getAssetDestPath;

packages/cli-plugin-metro/src/commands/bundle/saveAssets.ts

@@ -10,15 +10,7 @@ import {logger} from '@react-native-community/cli-tools';
 import fs from 'fs';
 import type {AssetData} from 'metro';
 import path from 'path';
-import {
-  cleanAssetCatalog,
-  getImageSet,
-  isCatalogAsset,
-  writeImageSet,
-} from './assetCatalogIOS';
 import filterPlatformAssetScales from './filterPlatformAssetScales';
-import getAssetDestPathAndroid from './getAssetDestPathAndroid';
-import getAssetDestPathIOS from './getAssetDestPathIOS';
 
 interface CopiedFiles {
   [src: string]: string;
@@ -29,6 +21,17 @@ function saveAssets(
   platform: string,
   assetsDest: string | undefined,
   assetCatalogDest: string | undefined,
+  saveAssetsPlugin: (
+    assets: ReadonlyArray<AssetData>,
+    platform: string,
+    assetsDest: string | undefined,
+    assetCatalogDest: string | undefined,
+    addAssetToCopy: (
+      asset: AssetData,
+      allowedScales: number[] | undefined,
+      getAssetDestPath: (asset: AssetData, scale: number) => string,
+    ) => void,
+  ) => void,
 ) {
   if (!assetsDest) {
     logger.warn('Assets destination folder is not set, skipping...');
@@ -37,15 +40,16 @@ function saveAssets(
 
   const filesToCopy: CopiedFiles = Object.create(null); // Map src -> dest
 
-  const getAssetDestPath =
-    platform === 'android' ? getAssetDestPathAndroid : getAssetDestPathIOS;
-
-  const addAssetToCopy = (asset: AssetData) => {
+  const addAssetToCopy = (
+    asset: AssetData,
+    allowedScales: number[] | undefined,
+    getAssetDestPath: (asset: AssetData, scale: number) => string,
+  ) => {
     const validScales = new Set(
-      filterPlatformAssetScales(platform, asset.scales),
+      filterPlatformAssetScales(allowedScales, asset.scales),
     );
 
-    asset.scales.forEach((scale, idx) => {
+    asset.scales.forEach((scale: number, idx: number) => {
       if (!validScales.has(scale)) {
         return;
       }
@@ -55,36 +59,13 @@ function saveAssets(
     });
   };
 
-  if (platform === 'ios' && assetCatalogDest != null) {
-    // Use iOS Asset Catalog for images. This will allow Apple app thinning to
-    // remove unused scales from the optimized bundle.
-    const catalogDir = path.join(assetCatalogDest, 'RNAssets.xcassets');
-    if (!fs.existsSync(catalogDir)) {
-      logger.error(
-        `Could not find asset catalog 'RNAssets.xcassets' in ${assetCatalogDest}. Make sure to create it if it does not exist.`,
-      );
-      return;
-    }
-
-    logger.info('Adding images to asset catalog', catalogDir);
-    cleanAssetCatalog(catalogDir);
-    for (const asset of assets) {
-      if (isCatalogAsset(asset)) {
-        const imageSet = getImageSet(
-          catalogDir,
-          asset,
-          filterPlatformAssetScales(platform, asset.scales),
-        );
-        writeImageSet(imageSet);
-      } else {
-        addAssetToCopy(asset);
-      }
-    }
-    logger.info('Done adding images to asset catalog');
-  } else {
-    assets.forEach(addAssetToCopy);
-  }
-
+  saveAssetsPlugin(
+    assets,
+    platform,
+    assetsDest,
+    assetCatalogDest,
+    addAssetToCopy,
+  );
   return copyAll(filesToCopy);
 }
 

packages/cli-plugin-metro/src/commands/bundle/saveAssetsAndroid.ts

@@ -0,0 +1,28 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import type {AssetData} from 'metro';
+import getAssetDestPathAndroid from './getAssetDestPathAndroid';
+
+function saveAssetsAndroid(
+  assets: ReadonlyArray<AssetData>,
+  _platform: string,
+  _assetsDest: string | undefined,
+  _assetCatalogDest: string | undefined,
+  addAssetToCopy: (
+    asset: AssetData,
+    allowedScales: number[] | undefined,
+    getAssetDestPath: (asset: AssetData, scale: number) => string,
+  ) => void,
+) {
+  assets.forEach((asset) =>
+    addAssetToCopy(asset, undefined, getAssetDestPathAndroid),
+  );
+}
+
+export default saveAssetsAndroid;

packages/cli-plugin-metro/src/commands/bundle/saveAssetsDefault.ts

@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import type {AssetData} from 'metro';
+import getAssetDestPath from './getAssetDestPath';
+
+function saveAssetsDefault(
+  assets: ReadonlyArray<AssetData>,
+  _platform: string,
+  _assetsDest: string | undefined,
+  _assetCatalogDest: string | undefined,
+  addAssetToCopy: (
+    asset: AssetData,
+    allowedScales: number[] | undefined,
+    getAssetDestPath: (asset: AssetData, scale: number) => string,
+  ) => void,
+) {
+  assets.forEach((asset) => addAssetToCopy(asset, undefined, getAssetDestPath));
+}
+
+export default saveAssetsDefault;