feat: support platform extensions like in metro (#816)

* feat: support platform extensions like in metro

* test: add case for resolving platform specific assets

* fix: missing scale in candidate path

* chore: add changeset

.changeset/shaggy-planets-mate.md

@@ -0,0 +1,5 @@
+---
+"@callstack/repack": minor
+---
+
+Support platform specific assets

packages/repack/src/loaders/assetsLoader/__tests__/assetsLoader.test.ts

@@ -152,6 +152,20 @@ describe('assetLoader', () => {
       expect(context.Export?.default).toMatchSnapshot();
       expect(volume.toTree()).toMatchSnapshot();
     });
+
+    it('should prefer platform specific asset', async () => {
+      const platformFixtures = loadFixtures('logo.png', `logo.${platform}.png`);
+      const { code, volume } = await compileBundle(platform, {
+        ...platformFixtures,
+        './index.js': "export { default } from './__fixtures__/logo.png';",
+      });
+
+      const context: { Export?: { default: Record<string, any> } } = {};
+      vm.runInNewContext(code, context);
+
+      expect(context.Export?.default).toMatchSnapshot();
+      expect(volume.toTree()).toMatchSnapshot();
+    });
   });
 
   describe('should inline asset', () => {

packages/repack/src/loaders/assetsLoader/assetsLoader.ts

@@ -81,6 +81,7 @@ export default async function repackAssetsLoader(
       resourceExtensionType,
       scalableAssetExtensions,
       scalableAssetResolutions,
+      options.platform,
       readDirAsync
     );
 

packages/repack/src/loaders/assetsLoader/utils.ts

@@ -39,28 +39,35 @@ export async function collectScales(
   resourceExtension: string,
   scalableAssetExtensions: string[],
   scalableAssetResolutions: string[],
+  platform: string,
   readDirAsync: (path: string) => Promise<string[]>
 ): Promise<CollectedScales> {
-  if (!scalableAssetExtensions.includes(resourceExtension)) {
-    return {
-      '@1x': path.join(
-        resourceAbsoluteDirname,
-        resourceFilename + '.' + resourceExtension
-      ),
-    };
-  }
+  // implicit 1x scale
+  let candidates = [
+    ['@1x', resourceFilename + '.' + resourceExtension],
+    ['@1x', resourceFilename + '.' + platform + '.' + resourceExtension],
+  ];
 
   // explicit scales
-  const candidates = scalableAssetResolutions.map((scaleKey) => {
-    const scale = '@' + scaleKey + 'x';
-    return [scale, resourceFilename + scale + '.' + resourceExtension];
-  });
-  // implicit 1x scale
-  candidates.push(['@1x', resourceFilename + '.' + resourceExtension]);
+  if (scalableAssetExtensions.includes(resourceExtension)) {
+    candidates = candidates.concat(
+      scalableAssetResolutions.flatMap((scaleKey) => {
+        const scale = '@' + scaleKey + 'x';
+        return [
+          [scale, resourceFilename + scale + '.' + resourceExtension],
+          [
+            scale,
+            resourceFilename + scale + '.' + platform + '.' + resourceExtension,
+          ],
+        ];
+      })
+    );
+  }
 
   const contents = await readDirAsync(resourceAbsoluteDirname);
   const entries = new Set(contents);
 
+  // assets with platform extensions are more specific and take precedence
   const collectedScales: Record<string, string> = {};
   for (const candidate of candidates) {
     const [scaleKey, candidateFilename] = candidate;