Refactor imports from Metro to avoid deprecated styles and prefer main package (#57378)

Summary:

Refactor Metro imports to:
 - Remove use of deprecated default object export, prefer named/namespace exports.
 - Prefer imports from `metro`, remove public dependencies on `metro-core` and `metro-config` from `react-native/community-cli-plugin`.

Changelog: [Internal]

Differential Revision: D110177050

Author: robhogan

packages/community-cli-plugin/package.json

@@ -35,8 +35,6 @@
     "debug": "^4.4.0",
     "invariant": "^2.2.4",
     "metro": "^0.85.0",
-    "metro-config": "^0.85.0",
-    "metro-core": "^0.85.0",
     "semver": "^7.1.3"
   },
   "devDependencies": {

packages/community-cli-plugin/src/commands/bundle/buildBundle.js

@@ -10,7 +10,6 @@
 
 import type {Config} from '@react-native-community/cli-types';
 import type {RunBuildOptions} from 'metro';
-import type {ConfigT} from 'metro-config';
 
 import loadMetroConfig from '../../utils/loadMetroConfig';
 import parseKeyValueParamArray from '../../utils/parseKeyValueParamArray';
@@ -20,6 +19,8 @@ import {runBuild} from 'metro';
 import path from 'path';
 import {styleText} from 'util';
 
+type HydratedMetroConfig = Awaited<ReturnType<typeof loadMetroConfig>>;
+
 export type BundleCommandArgs = {
   assetsDest?: string,
   assetCatalogDest?: string,
@@ -60,7 +61,7 @@ async function buildBundle(
 
 async function buildBundleWithConfig(
   args: BundleCommandArgs,
-  config: ConfigT,
+  config: HydratedMetroConfig,
   bundleImpl?: RunBuildOptions['output'],
 ): Promise<void> {
   const customResolverOptions = parseKeyValueParamArray(

packages/community-cli-plugin/src/commands/start/runServer.js

@@ -18,8 +18,7 @@ import * as version from '../../utils/version';
 import attachKeyHandlers from './attachKeyHandlers';
 import {createDevServerMiddleware} from './middleware';
 import {createDevMiddleware} from '@react-native/dev-middleware';
-import Metro from 'metro';
-import {Terminal} from 'metro-core';
+import * as Metro from 'metro';
 import path from 'path';
 import url from 'url';
 import {styleText} from 'util';
@@ -104,7 +103,7 @@ async function runServer(
   }
 
   let reportEvent: (event: TerminalReportableEvent) => void;
-  const terminal = new Terminal(process.stdout);
+  const terminal = new Metro.Terminal(process.stdout);
   const ReporterImpl = getReporterImpl(args.customLogReporterPath);
   const terminalReporter = new ReporterImpl(terminal);
 

packages/community-cli-plugin/src/utils/loadMetroConfig.js

@@ -9,15 +9,18 @@
  */
 
 import type {Config} from '@react-native-community/cli-types';
-import type {ConfigT, InputConfigT, YargArguments} from 'metro-config';
+import type {MetroConfig} from 'metro';
 
 import {CLIError} from './errors';
 import {reactNativePlatformResolver} from './metroPlatformResolver';
-import {loadConfig, resolveConfig} from 'metro-config';
+import {loadConfig, resolveConfig} from 'metro';
 import path from 'path';
 
 const debug = require('debug')('ReactNative:CommunityCliPlugin');
 
+type HydratedMetroConfig = Awaited<ReturnType<typeof loadConfig>>;
+type ArgvInput = Parameters<typeof loadConfig>[0];
+
 export type {Config};
 
 export type ConfigLoadingContext = Readonly<{
@@ -32,12 +35,12 @@ export type ConfigLoadingContext = Readonly<{
  */
 function getCommunityCliDefaultConfig(
   ctx: ConfigLoadingContext,
-  config: ConfigT,
-): InputConfigT {
+  config: HydratedMetroConfig,
+): MetroConfig {
   const outOfTreePlatforms = Object.keys(ctx.platforms).filter(
     platform => ctx.platforms[platform].npmPackageName,
   );
-  const resolver: Partial<{...ConfigT['resolver']}> = {
+  const resolver: Partial<{...HydratedMetroConfig['resolver']}> = {
     platforms: [...Object.keys(ctx.platforms), 'native'],
   };
 
@@ -83,8 +86,8 @@ function getCommunityCliDefaultConfig(
  */
 export default async function loadMetroConfig(
   ctx: ConfigLoadingContext,
-  options: YargArguments = {},
-): Promise<ConfigT> {
+  options: NonNullable<ArgvInput> = {},
+): Promise<HydratedMetroConfig> {
   let RNMetroConfig = null;
   try {
     RNMetroConfig = require('@react-native/metro-config');
@@ -122,7 +125,7 @@ export default async function loadMetroConfig(
   if (!global.__REACT_NATIVE_METRO_CONFIG_LOADED) {
     const warning = `
 =================================================================================================
-From React Native 0.73, your project's Metro config should extend '@react-native/metro-config'
+From React Native 0.73, yarn fyour project's Metro config should extend '@react-native/metro-config'
 or it will fail to build. Please copy the template at:
 https://github.com/react-native-community/template/blob/main/template/metro.config.js
 This warning will be removed in future (https://github.com/facebook/metro/issues/1018).

private/react-native-fantom/runner/global-setup/globalSetup.js

@@ -16,7 +16,7 @@ import {getTestBuildOutputPath} from '../paths';
 import build from './build';
 import {createDevMiddleware} from '@react-native/dev-middleware';
 import connect from 'connect';
-import Metro from 'metro';
+import * as Metro from 'metro';
 import {Server} from 'net';
 import path from 'path';