Implement resolveAsset handling

Summary:
Add support for resolving assets (determined by `resolver.isAssetFile`) from Package Exports.

- As with source files, assets in `"exports"` do not automatically append `sourceExts` or platform-specific exts. **However**, we allow expansion of *source resolutions* (i.e. `2x.png` etc) from an `"exports"` target. This is Metro/React Native-specific functionality which otherwise has no equivalent in the Package Exports spec.
- Falls back to legacy file resolution logic when the asset is missing or `unstable_enablePackageExports` is `false`.

Changelog: **[Experimental]** Add asset handling for package exports via `context.resolveAsset`

Reviewed By: motiz88

Differential Revision: D43193253

fbshipit-source-id: 41ced8d6a91fc2d32051348635852c5df1f5d213

Author: huntie

packages/metro-resolver/src/PackageExportsResolve.js

@@ -9,10 +9,11 @@
  * @oncall react_native
  */
 
-import type {ExportMap, ResolutionContext, SourceFileResolution} from './types';
+import type {ExportMap, FileResolution, ResolutionContext} from './types';
 
 import path from 'path';
 import InvalidPackageConfigurationError from './errors/InvalidPackageConfigurationError';
+import resolveAsset from './resolveAsset';
 import toPosixPath from './utils/toPosixPath';
 
 /**
@@ -40,7 +41,7 @@ export function resolvePackageTargetFromExports(
   modulePath: string,
   exportsField: ExportMap | string,
   platform: string | null,
-): SourceFileResolution | null {
+): FileResolution | null {
   const raiseConfigError = (reason: string) => {
     throw new InvalidPackageConfigurationError({
       reason,
@@ -64,6 +65,10 @@ export function resolvePackageTargetFromExports(
   if (match != null) {
     const filePath = path.join(packagePath, match);
 
+    if (context.isAssetFile(filePath)) {
+      return resolveAsset(context, filePath);
+    }
+
     if (context.doesFileExist(filePath)) {
       return {type: 'sourceFile', filePath};
     }

packages/metro-resolver/src/__tests__/package-exports-test.js

@@ -9,6 +9,7 @@
  * @oncall react_native
  */
 
+import path from 'path';
 import Resolver from '../index';
 import {createPackageAccessors, createResolutionContext} from './utils';
 
@@ -588,4 +589,63 @@ describe('with package exports resolution enabled', () => {
       });
     });
   });
+
+  describe('asset resolutions', () => {
+    const assetResolutions = ['1', '1.5', '2', '3', '4'];
+    const isAssetFile = (filePath: string) => filePath.endsWith('.png');
+
+    const baseContext = {
+      ...createResolutionContext({
+        '/root/src/main.js': '',
+        '/root/node_modules/test-pkg/package.json': JSON.stringify({
+          main: './index.js',
+          exports: {
+            './icons/metro.png': './assets/icons/metro.png',
+          },
+        }),
+        '/root/node_modules/test-pkg/assets/icons/metro.png': '',
+        '/root/node_modules/test-pkg/assets/icons/[email protected]': '',
+        '/root/node_modules/test-pkg/assets/icons/[email protected]': '',
+      }),
+      isAssetFile,
+      originModulePath: '/root/src/main.js',
+      unstable_enablePackageExports: true,
+    };
+
+    test('should resolve assets using "exports" field and calling `resolveAsset`', () => {
+      const resolveAsset = jest.fn(
+        (dirPath: string, basename: string, extension: string) => {
+          const basePath = dirPath + path.sep + basename;
+          const assets = [
+            basePath + extension,
+            ...assetResolutions.map(
+              resolution => basePath + '@' + resolution + 'x' + extension,
+            ),
+          ].filter(candidate => baseContext.doesFileExist(candidate));
+
+          return assets.length ? assets : null;
+        },
+      );
+      const context = {
+        ...baseContext,
+        resolveAsset,
+      };
+
+      expect(
+        Resolver.resolve(context, 'test-pkg/icons/metro.png', null),
+      ).toEqual({
+        type: 'assetFiles',
+        filePaths: [
+          '/root/node_modules/test-pkg/assets/icons/metro.png',
+          '/root/node_modules/test-pkg/assets/icons/[email protected]',
+          '/root/node_modules/test-pkg/assets/icons/[email protected]',
+        ],
+      });
+      expect(resolveAsset).toHaveBeenLastCalledWith(
+        '/root/node_modules/test-pkg/assets/icons',
+        'metro',
+        '.png',
+      );
+    });
+  });
 });

packages/metro-resolver/src/resolve.js

@@ -28,6 +28,7 @@ import InvalidPackageError from './errors/InvalidPackageError';
 import formatFileCandidates from './errors/formatFileCandidates';
 import {getPackageEntryPoint} from './PackageResolve';
 import {resolvePackageTargetFromExports} from './PackageExportsResolve';
+import resolveAsset from './resolveAsset';
 import invariant from 'invariant';
 
 function resolve(
@@ -355,27 +356,19 @@ function resolveFile(
   fileName: string,
   platform: string | null,
 ): Result<Resolution, FileCandidates> {
-  const {isAssetFile, resolveAsset} = context;
-  if (isAssetFile(fileName)) {
-    const extension = path.extname(fileName);
-    const basename = path.basename(fileName, extension);
-    if (!/@\d+(?:\.\d+)?x$/.test(basename)) {
-      try {
-        const assets = resolveAsset(dirPath, basename, extension);
-        if (assets != null) {
-          return mapResult(resolvedAs(assets), filePaths => ({
-            type: 'assetFiles',
-            filePaths,
-          }));
-        }
-      } catch (err) {
-        if (err.code === 'ENOENT') {
-          return failedFor({type: 'asset', name: fileName});
-        }
-      }
+  if (context.isAssetFile(fileName)) {
+    const assetResolutions = resolveAsset(
+      context,
+      path.join(dirPath, fileName),
+    );
+
+    if (assetResolutions == null) {
+      return failedFor({type: 'asset', name: fileName});
     }
-    return failedFor({type: 'asset', name: fileName});
+
+    return resolvedAs(assetResolutions);
   }
+
   const candidateExts: Array<string> = [];
   const filePathPrefix = path.join(dirPath, fileName);
   const sfContext = {...context, candidateExts, filePathPrefix};
@@ -513,14 +506,4 @@ function failedFor<TResolution, TCandidates>(
   return {type: 'failed', candidates};
 }
 
-function mapResult<TResolution, TNewResolution, TCandidates>(
-  result: Result<TResolution, TCandidates>,
-  mapper: TResolution => TNewResolution,
-): Result<TNewResolution, TCandidates> {
-  if (result.type === 'failed') {
-    return result;
-  }
-  return {type: 'resolved', resolution: mapper(result.resolution)};
-}
-
 module.exports = resolve;

packages/metro-resolver/src/resolveAsset.js

@@ -0,0 +1,42 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict
+ * @format
+ * @oncall react_native
+ */
+
+import type {AssetResolution, ResolutionContext} from './types';
+
+import path from 'path';
+
+/**
+ * Resolve a file path as an asset. Returns the set of files found after
+ * expanding asset resolutions (e.g. `[email protected]`). Users may override this
+ * behaviour via `context.resolveAsset`.
+ */
+export default function resolveAsset(
+  context: ResolutionContext,
+  filePath: string,
+): AssetResolution | null {
+  const dirPath = path.dirname(filePath);
+  const extension = path.extname(filePath);
+  const basename = path.basename(filePath, extension);
+
+  try {
+    if (!/@\d+(?:\.\d+)?x$/.test(basename)) {
+      const assets = context.resolveAsset(dirPath, basename, extension);
+      if (assets != null) {
+        return {
+          type: 'assetFiles',
+          filePaths: assets,
+        };
+      }
+    }
+  } catch (e) {}
+
+  return null;
+}

packages/metro-resolver/src/types.js

@@ -22,9 +22,11 @@ export type SourceFileResolution = $ReadOnly<{
   filePath: string,
 }>;
 export type AssetFileResolution = $ReadOnlyArray<string>;
-export type FileResolution =
-  | SourceFileResolution
-  | {+type: 'assetFiles', +filePaths: AssetFileResolution};
+export type AssetResolution = $ReadOnly<{
+  type: 'assetFiles',
+  filePaths: AssetFileResolution,
+}>;
+export type FileResolution = AssetResolution | SourceFileResolution;
 
 export type FileAndDirCandidates = {
   +dir: FileCandidates,