fix(metro): vendor image dimension parsing

packages/metro/package.json

@@ -34,7 +34,6 @@
     "flow-enums-runtime": "^0.0.6",
     "graceful-fs": "^4.2.4",
     "flow-parser": "0.327.0",
-    "image-size": "^1.0.2",
     "invariant": "^2.2.4",
     "jest-worker": "^29.7.0",
     "jsc-safe-url": "^0.2.2",

packages/metro/src/Assets.js

@@ -11,10 +11,9 @@
 
 import type {AssetPath} from './node-haste/lib/AssetPaths';
 
+import {getImageDimensions} from './lib/imageSize';
 import {normalizePathSeparatorsToPosix} from './lib/pathUtils';
 import * as AssetPaths from './node-haste/lib/AssetPaths';
-// $FlowFixMe[untyped-import] image-size
-import getImageSize from 'image-size';
 import crypto from 'node:crypto';
 import fs from 'node:fs';
 import path from 'node:path';
@@ -51,8 +50,8 @@ export type AssetDataFiltered = {
   ...
 };
 
-// Test extension against all types supported by image-size module.
-// If it's not one of these, we won't treat it as an image.
+// If an extension isn't explicitly supported here, we won't treat it as an
+// image.
 export function isAssetTypeAnImage(type: string): boolean {
   return (
     [
@@ -81,8 +80,7 @@ export function getAssetSize(
   if (content.length === 0) {
     throw new Error(`Image asset \`${filePath}\` cannot be an empty file.`);
   }
-  const {width, height} = getImageSize(content);
-  return {width, height};
+  return getImageDimensions(type, content, filePath);
 }
 
 export type AssetData = AssetDataWithoutFiles & {
@@ -180,7 +178,7 @@ async function getAbsoluteAssetRecord(
 async function getAbsoluteAssetInfo(
   assetPath: string,
   platform: ?string = null,
-): Promise<AssetInfo> {
+): Promise<{assetInfo: AssetInfo, firstFileContent: Buffer}> {
   const nameData = AssetPaths.parse(
     assetPath,
     new Set(platform != null ? [platform] : []),
@@ -198,7 +196,10 @@ async function getAbsoluteAssetInfo(
     hasher.update(data);
   }
 
-  return {files, hash: hasher.digest('hex'), name, scales, type};
+  return {
+    assetInfo: {files, hash: hasher.digest('hex'), name, scales, type},
+    firstFileContent: fileData[0],
+  };
 }
 
 export async function getAssetData(
@@ -218,13 +219,13 @@ export async function getAssetData(
   // On Windows, change backslashes to slashes to get proper URL path from file path.
   assetUrlPath = normalizePathSeparatorsToPosix(assetUrlPath);
 
-  const isImage = isAssetTypeAnImage(path.extname(assetPath).slice(1));
-  const assetInfo = await getAbsoluteAssetInfo(assetPath, platform ?? null);
-
-  const isImageInput = assetInfo.files[0].includes('.zip/')
-    ? fs.readFileSync(assetInfo.files[0])
-    : assetInfo.files[0];
-  const dimensions = isImage ? getImageSize(isImageInput) : null;
+  const {assetInfo, firstFileContent} = await getAbsoluteAssetInfo(
+    assetPath,
+    platform ?? null,
+  );
+  const dimensions = isAssetTypeAnImage(assetInfo.type)
+    ? getAssetSize(assetInfo.type, firstFileContent, assetInfo.files[0])
+    : null;
   const scale = assetInfo.scales[0];
 
   const assetData = {

packages/metro/src/__tests__/Assets-test.js

@@ -11,11 +11,17 @@
 'use strict';
 
 jest.mock('node:fs', () => new (require('metro-memory-fs'))());
-jest.mock('image-size');
+jest.mock('../lib/imageSize', () => ({
+  getImageDimensions: jest.fn(() => ({
+    width: mockImageWidth,
+    height: mockImageHeight,
+  })),
+}));
 
 jest.useRealTimers();
 
-const {getAsset, getAssetData} = require('../Assets');
+const {getAsset, getAssetData, getAssetSize} = require('../Assets');
+const getImageDimensions = require('../lib/imageSize').getImageDimensions;
 const crypto = require('node:crypto');
 const path = require('node:path');
 
@@ -24,9 +30,18 @@ const fs = jest.requireMock('node:fs');
 const mockImageWidth = 300;
 const mockImageHeight = 200;
 
-require('image-size').mockReturnValue({
-  width: mockImageWidth,
-  height: mockImageHeight,
+describe('getAssetSize', () => {
+  test('returns null for non-image assets', () => {
+    expect(getAssetSize('mp4', Buffer.from('video'), '/root/video.mp4')).toBe(
+      null,
+    );
+  });
+
+  test('rejects empty image assets', () => {
+    expect(() =>
+      getAssetSize('png', Buffer.alloc(0), '/root/empty.png'),
+    ).toThrow('Image asset `/root/empty.png` cannot be an empty file.');
+  });
 });
 
 describe('getAsset', () => {
@@ -284,6 +299,18 @@ describe('getAssetData', () => {
     });
   });
 
+  test('parses dimensions from the first asset file buffer', async () => {
+    writeImages({'b@1x.png': 'b1 image', 'b@2x.png': 'b2 image'});
+
+    await getAssetData('/root/imgs/b.png', 'imgs/b.png', [], null, '/assets');
+
+    expect(getImageDimensions).toHaveBeenCalledWith(
+      'png',
+      Buffer.from('b1 image'),
+      '/root/imgs/b@1x.png',
+    );
+  });
+
   test('should get assetData for non-png images', async () => {
     writeImages({
       'b@1x.jpg': 'b1 image',