chore: Update cli-plugin-metro to use external Metro types

packages/cli-plugin-metro/package.json

@@ -20,7 +20,11 @@
     "readline": "^1.3.0"
   },
   "devDependencies": {
-    "@react-native-community/cli-types": "^11.0.0-alpha.2"
+    "@react-native-community/cli-types": "^11.0.0-alpha.2",
+    "@types/metro": "^0.76.0",
+    "@types/metro-config": "^0.76.1",
+    "@types/metro-core": "^0.76.0",
+    "@types/metro-resolver": "^0.76.1"
   },
   "files": [
     "build",

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

@@ -8,8 +8,8 @@
 
 import path from 'path';
 import fs from 'fs-extra';
+import type {AssetData} from 'metro';
 import assetPathUtils from './assetPathUtils';
-import {AssetData} from './buildBundle';
 
 export function cleanAssetCatalog(catalogDir: string): void {
   const files = fs

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

@@ -6,19 +6,17 @@
  *
  */
 
-// @ts-ignore - no typed definition for the package
 import Server from 'metro/src/Server';
 // @ts-ignore - no typed definition for the package
 const outputBundle = require('metro/src/shared/output/bundle');
+import type {BundleOptions} from 'metro/shared/types';
+import type {ConfigT} from 'metro-config';
 import path from 'path';
 import chalk from 'chalk';
 import {CommandLineArgs} from './bundleCommandLineArgs';
 import type {Config} from '@react-native-community/cli-types';
 import saveAssets from './saveAssets';
-import {
-  default as loadMetroConfig,
-  MetroConfig,
-} from '../../tools/loadMetroConfig';
+import {default as loadMetroConfig} from '../../tools/loadMetroConfig';
 import {logger} from '@react-native-community/cli-tools';
 
 interface RequestOptions {
@@ -27,23 +25,10 @@ interface RequestOptions {
   dev: boolean;
   minify: boolean;
   platform: string | undefined;
-  unstable_transformProfile: string | undefined;
+  unstable_transformProfile: BundleOptions['unstable_transformProfile'];
   generateStaticViewConfigs: boolean;
 }
 
-export interface AssetData {
-  __packager_asset: boolean;
-  fileSystemLocation: string;
-  hash: string;
-  height: number | null;
-  httpServerLocation: string;
-  name: string;
-  scales: number[];
-  type: string;
-  width: number | null;
-  files: string[];
-}
-
 async function buildBundle(
   args: CommandLineArgs,
   ctx: Config,
@@ -65,7 +50,7 @@ async function buildBundle(
  */
 export async function buildBundleWithConfig(
   args: CommandLineArgs,
-  config: MetroConfig,
+  config: ConfigT,
   output: typeof outputBundle = outputBundle,
 ) {
   if (config.resolver.platforms.indexOf(args.platform) === -1) {
@@ -101,7 +86,7 @@ export async function buildBundleWithConfig(
     dev: args.dev,
     minify: args.minify !== undefined ? args.minify : !args.dev,
     platform: args.platform,
-    unstable_transformProfile: args.unstableTransformProfile,
+    unstable_transformProfile: args.unstableTransformProfile as BundleOptions['unstable_transformProfile'],
     generateStaticViewConfigs: args.generateStaticViewConfigs,
   };
   const server = new Server(config);
@@ -112,7 +97,7 @@ export async function buildBundleWithConfig(
     await output.save(bundle, args, logger.info);
 
     // Save the assets of the bundle
-    const outputAssets: AssetData[] = await server.getAssets({
+    const outputAssets = await server.getAssets({
       ...Server.DEFAULT_BUNDLE_OPTIONS,
       ...requestOpts,
       bundleType: 'todo',

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

@@ -26,7 +26,7 @@ export interface CommandLineArgs {
   sourcemapSourcesRoot?: string;
   sourcemapUseAbsolutePath: boolean;
   verbose: boolean;
-  unstableTransformProfile?: string;
+  unstableTransformProfile: string;
   generateStaticViewConfigs: boolean;
 }
 
@@ -102,6 +102,7 @@ export default [
     name: '--unstable-transform-profile <string>',
     description:
       'Experimental, transform JS for a specific JS engine. Currently supported: hermes, hermes-canary, default',
+    default: 'default',
   },
   {
     name: '--asset-catalog-dest [string]',

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

@@ -8,14 +8,14 @@
 
 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 {AssetData} from './buildBundle';
 import filterPlatformAssetScales from './filterPlatformAssetScales';
 import getAssetDestPathAndroid from './getAssetDestPathAndroid';
 import getAssetDestPathIOS from './getAssetDestPathIOS';
@@ -25,7 +25,7 @@ interface CopiedFiles {
 }
 
 function saveAssets(
-  assets: AssetData[],
+  assets: ReadonlyArray<AssetData>,
   platform: string,
   assetsDest: string | undefined,
   assetCatalogDest: string | undefined,

packages/cli-plugin-metro/src/commands/start/runServer.ts

@@ -7,7 +7,8 @@
 
 // @ts-ignore untyped metro
 import Metro from 'metro';
-// @ts-ignore untyped metro
+import type {Server} from 'metro';
+import type {Middleware} from 'metro-config';
 import {Terminal} from 'metro-core';
 import path from 'path';
 import {
@@ -65,6 +66,7 @@ async function runServer(_argv: Array<string>, ctx: Config, args: Args) {
   });
 
   if (args.assetPlugins) {
+    // @ts-ignore - assigning to readonly property
     metroConfig.transformer.assetPlugins = args.assetPlugins.map((plugin) =>
       require.resolve(plugin),
     );
@@ -83,9 +85,10 @@ async function runServer(_argv: Array<string>, ctx: Config, args: Args) {
   middleware.use(indexPageMiddleware);
 
   const customEnhanceMiddleware = metroConfig.server.enhanceMiddleware;
+  // @ts-ignore - assigning to readonly property
   metroConfig.server.enhanceMiddleware = (
-    metroMiddleware: any,
-    server: unknown,
+    metroMiddleware: Middleware,
+    server: Server,
   ) => {
     if (customEnhanceMiddleware) {
       metroMiddleware = customEnhanceMiddleware(metroMiddleware, server);
@@ -99,6 +102,7 @@ async function runServer(_argv: Array<string>, ctx: Config, args: Args) {
     secureCert: args.cert,
     secureKey: args.key,
     hmrEnabled: true,
+    // @ts-ignore - ws.Server types are incompatible
     websocketEndpoints,
   });
 

packages/cli-plugin-metro/src/index.ts

@@ -1,7 +1,7 @@
+export type {MetroConfig} from 'metro-config';
 export {
   Config,
   ConfigLoadingContext,
-  MetroConfig,
   getDefaultConfig,
   default as loadMetroConfig,
 } from './tools/loadMetroConfig';

packages/cli-plugin-metro/src/tools/__tests__/loadMetroConfig-test.ts

@@ -12,6 +12,6 @@ describe('getDefaultConfig', () => {
       platforms: {},
     });
 
-    expect(config.transformer.allowOptionalDependencies).toBe(true);
+    expect(config.transformer?.allowOptionalDependencies).toBe(true);
   });
 });

packages/cli-plugin-metro/src/tools/loadMetroConfig.ts

@@ -2,8 +2,7 @@
  * Configuration file of Metro.
  */
 import path from 'path';
-// @ts-ignore - no typed definition for the package
-import {loadConfig} from 'metro-config';
+import {ConfigT, InputConfigT, loadConfig} from 'metro-config';
 import type {Config} from '@react-native-community/cli-types';
 import {reactNativePlatformResolver} from './metroPlatformResolver';
 
@@ -34,44 +33,10 @@ export type ConfigLoadingContext = Pick<
   'root' | 'reactNativePath' | 'platforms'
 >;
 
-export interface MetroConfig {
-  resolver: {
-    resolveRequest?: (
-      context: any,
-      realModuleName: string,
-      platform: string,
-      moduleName: string,
-    ) => any;
-    resolverMainFields: string[];
-    platforms: string[];
-    unstable_conditionNames: string[];
-  };
-  serializer: {
-    getModulesRunBeforeMainModule: () => string[];
-    getPolyfills: () => any;
-  };
-  server: {
-    port: number;
-    enhanceMiddleware?: Function;
-  };
-  symbolicator: {
-    customizeFrame: (frame: {file: string | null}) => {collapse: boolean};
-  };
-  transformer: {
-    allowOptionalDependencies?: boolean;
-    babelTransformerPath: string;
-    assetRegistryPath: string;
-    assetPlugins?: Array<string>;
-    asyncRequireModulePath?: string;
-  };
-  watchFolders: ReadonlyArray<string>;
-  reporter?: any;
-}
-
 /**
  * Default configuration
  */
-export const getDefaultConfig = (ctx: ConfigLoadingContext): MetroConfig => {
+export const getDefaultConfig = (ctx: ConfigLoadingContext): InputConfigT => {
   const outOfTreePlatforms = Object.keys(ctx.platforms).filter(
     (platform) => ctx.platforms[platform].npmPackageName,
   );
@@ -115,7 +80,7 @@ export const getDefaultConfig = (ctx: ConfigLoadingContext): MetroConfig => {
       port: Number(process.env.RCT_METRO_PORT) || 8081,
     },
     symbolicator: {
-      customizeFrame: (frame: {file: string | null}) => {
+      customizeFrame: (frame) => {
         const collapse = Boolean(
           frame.file && INTERNAL_CALLSITES_REGEX.test(frame.file),
         );
@@ -155,8 +120,8 @@ export interface ConfigOptionsT {
 export default function loadMetroConfig(
   ctx: ConfigLoadingContext,
   options?: ConfigOptionsT,
-): Promise<MetroConfig> {
-  const defaultConfig = getDefaultConfig(ctx);
+): Promise<ConfigT> {
+  const defaultConfig = {...getDefaultConfig(ctx)};
   if (options && options.reporter) {
     defaultConfig.reporter = options.reporter;
   }

packages/cli-plugin-metro/src/tools/metroPlatformResolver.ts

@@ -13,12 +13,14 @@
  * }
  */
 
+import type {CustomResolver} from 'metro-resolver';
+
 export function reactNativePlatformResolver(platformImplementations: {
   [platform: string]: string;
-}) {
-  return (context: any, moduleName: string, platform: string) => {
+}): CustomResolver {
+  return (context, moduleName, platform) => {
     let modifiedModuleName = moduleName;
-    if (platformImplementations[platform]) {
+    if (platform != null && platformImplementations[platform]) {
       if (moduleName === 'react-native') {
         modifiedModuleName = platformImplementations[platform];
       } else if (moduleName.startsWith('react-native/')) {