breaking: Update cli-plugin-metro to use defaults in app metro.config.js (RN 0.72)

Author: huntie

packages/cli-plugin-metro/package.json

@@ -14,9 +14,7 @@
     "metro": "0.76.0",
     "metro-config": "0.76.0",
     "metro-core": "0.76.0",
-    "metro-react-native-babel-transformer": "0.76.0",
     "metro-resolver": "0.76.0",
-    "metro-runtime": "0.76.0",
     "readline": "^1.3.0"
   },
   "devDependencies": {

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

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

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

@@ -1,31 +1,8 @@
-/**
- * Configuration file of Metro.
- */
 import path from 'path';
 import {ConfigT, InputConfigT, loadConfig} from 'metro-config';
 import type {Config} from '@react-native-community/cli-types';
 import {reactNativePlatformResolver} from './metroPlatformResolver';
 
-const INTERNAL_CALLSITES_REGEX = new RegExp(
-  [
-    '/Libraries/Renderer/implementations/.+\\.js$',
-    '/Libraries/BatchedBridge/MessageQueue\\.js$',
-    '/Libraries/YellowBox/.+\\.js$',
-    '/Libraries/LogBox/.+\\.js$',
-    '/Libraries/Core/Timers/.+\\.js$',
-    '/Libraries/WebSocket/.+\\.js$',
-    '/Libraries/vendor/.+\\.js$',
-    '/node_modules/react-devtools-core/.+\\.js$',
-    '/node_modules/react-refresh/.+\\.js$',
-    '/node_modules/scheduler/.+\\.js$',
-    '/node_modules/event-target-shim/.+\\.js$',
-    '/node_modules/invariant/.+\\.js$',
-    '/node_modules/react-native/index.js$',
-    '/metro-runtime/.+\\.js$',
-    '^\\[native code\\]$',
-  ].join('|'),
-);
-
 export type {Config};
 
 export type ConfigLoadingContext = Pick<
@@ -34,9 +11,9 @@ export type ConfigLoadingContext = Pick<
 >;
 
 /**
- * Default configuration
+ * Get the config options to override based on RN CLI inputs.
  */
-export const getDefaultConfig = (ctx: ConfigLoadingContext): InputConfigT => {
+function getOverrideConfig(ctx: ConfigLoadingContext): InputConfigT {
   const outOfTreePlatforms = Object.keys(ctx.platforms).filter(
     (platform) => ctx.platforms[platform].npmPackageName,
   );
@@ -55,9 +32,7 @@ export const getDefaultConfig = (ctx: ConfigLoadingContext): InputConfigT => {
                 {},
               ),
             ),
-      resolverMainFields: ['react-native', 'browser', 'main'],
       platforms: [...Object.keys(ctx.platforms), 'native'],
-      unstable_conditionNames: ['import', 'require', 'react-native'],
     },
     serializer: {
       // We can include multiple copies of InitializeCore here because metro will
@@ -73,33 +48,9 @@ export const getDefaultConfig = (ctx: ConfigLoadingContext): InputConfigT => {
           ),
         ),
       ],
-      getPolyfills: () =>
-        require(path.join(ctx.reactNativePath, 'rn-get-polyfills'))(),
-    },
-    server: {
-      port: Number(process.env.RCT_METRO_PORT) || 8081,
     },
-    symbolicator: {
-      customizeFrame: (frame) => {
-        const collapse = Boolean(
-          frame.file && INTERNAL_CALLSITES_REGEX.test(frame.file),
-        );
-        return {collapse};
-      },
-    },
-    transformer: {
-      allowOptionalDependencies: true,
-      babelTransformerPath: require.resolve(
-        'metro-react-native-babel-transformer',
-      ),
-      assetRegistryPath: 'react-native/Libraries/Image/AssetRegistry',
-      asyncRequireModulePath: require.resolve(
-        'metro-runtime/src/modules/asyncRequire',
-      ),
-    },
-    watchFolders: [],
   };
-};
+}
 
 export interface ConfigOptionsT {
   maxWorkers?: number;
@@ -113,17 +64,18 @@ export interface ConfigOptionsT {
 }
 
 /**
- * Loads Metro Config and applies `options` on top of the resolved config.
+ * Load Metro config.
  *
- * This allows the CLI to always overwrite the file settings.
+ * Allows the CLI to override certain defaults in the base `metro.config.js`
+ * based on dynamic user options in `ctx`.
  */
 export default function loadMetroConfig(
   ctx: ConfigLoadingContext,
   options?: ConfigOptionsT,
 ): Promise<ConfigT> {
-  const defaultConfig = {...getDefaultConfig(ctx)};
+  const overrideConfig = getOverrideConfig(ctx);
   if (options && options.reporter) {
-    defaultConfig.reporter = options.reporter;
+    overrideConfig.reporter = options.reporter;
   }
-  return loadConfig({cwd: ctx.root, ...options}, defaultConfig);
+  return loadConfig({cwd: ctx.root, ...options}, overrideConfig);
 }

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

@@ -8908,19 +8908,6 @@ metro-react-native-babel-preset@0.76.0:
     babel-plugin-transform-flow-enums "^0.0.2"
     react-refresh "^0.4.0"
 
-metro-react-native-babel-transformer@0.76.0:
-  version "0.76.0"
-  resolved "https://registry.yarnpkg.com/metro-react-native-babel-transformer/-/metro-react-native-babel-transformer-0.76.0.tgz#8c8872f0d3a0ec9dad2480df53c92c10eac92c79"
-  integrity sha512-mLyUiGq2qPoEwV3oncD82HOtM4wAl8YmXtGY17D4iqH6/5pE32lRnDDYt0WnJYACZDs3RB3MhTjGCM7rJNwn/A==
-  dependencies:
-    "@babel/core" "^7.20.0"
-    babel-preset-fbjs "^3.4.0"
-    hermes-parser "0.8.0"
-    metro-babel-transformer "0.76.0"
-    metro-react-native-babel-preset "0.76.0"
-    metro-source-map "0.76.0"
-    nullthrows "^1.1.1"
-
 metro-resolver@0.76.0:
   version "0.76.0"
   resolved "https://registry.yarnpkg.com/metro-resolver/-/metro-resolver-0.76.0.tgz#3fa778adbab30859023a89e7a1241f4eb68171f2"