Bump RN CLI, add @react-native/metro-config to template (#36623)

Summary:
Pull Request resolved: #36623

Changelog:
[General][Changed] - The default `metro.config.js` in apps now extends `react-native/metro-config`, and should be updated in existing apps. `react-native/rn-get-polyfills.js` is removed and should be updated to `react-native/js-polyfills` in existing apps (this is part of the new default config).

## Context

### React Native Metro config → React Native repo (#36502)

We (the React Native team) are aiming to relocate the default Metro config for React Native out of `react-native-community/cli-plugin-metro` and **into the React Native repo + app template** as a new `react-native/metro-config` package.

This is the first (and minimum viable) phase we can ship to separate the release process of Metro from RN CLI in order to reduce coupling and iterate faster for our users.

**See full motivation, design, and test plan (which previewed the CLI bump) here: #36502

## Changes

NOTE: This PR is pending the inclusion of a bump to `react-native-community/cli`, and will be sequenced after react-native-community/cli#1875 is merged.

- Upgrade `react-native-community/cli` to `11.0.0`, upgrade all `metro` packages to `0.76.0` (version distributed in this CLI release).
- Update the `metro.config.js` file in `packages/react-native/template/`.
    - Now merges defaults from `react-native/metro-config`, and can be used with CLI >= 11.0.0.
- Update the `metro.config.js` files for `packages/react-native/` and `packages/rn-tester/` (these are integration test locations).
    - Now merges defaults from `react-native/metro-config`, and can be used with CLI >= 11.0.0.
- Remove `packages/react-native/rn-get-polyfills.js`

Reviewed By: cortinico, blakef

Differential Revision: D44099691

fbshipit-source-id: 1bb79027afe51879e3dfc639cdcb5a2b70ff8850

package.json

@@ -57,6 +57,7 @@
     "@definitelytyped/dtslint": "^0.0.127",
     "@jest/create-cache-key-function": "^29.2.1",
     "@reactions/component": "^2.0.2",
+    "@react-native/metro-config": "^0.72.0",
     "@types/react": "^18.0.18",
     "@typescript-eslint/parser": "^5.30.5",
     "async": "^3.2.2",

packages/metro-config/package.json

@@ -11,6 +11,8 @@
   "exports": "./index.js",
   "dependencies": {
     "@react-native/js-polyfills": "^0.72.1",
-    "metro-config": "0.75.1"
+    "metro-config": "0.76.0",
+    "metro-react-native-babel-transformer": "0.76.0",
+    "metro-runtime": "0.76.0"
   }
 }

packages/react-native/metro.config.js

@@ -9,14 +9,15 @@
 
 'use strict';
 
+const {getDefaultConfig} = require('@react-native/metro-config');
+const {mergeConfig} = require('metro-config');
 const path = require('path');
-const getPolyfills = require('./rn-get-polyfills');
 
 /**
  * This cli config is needed for development purposes, e.g. for running
  * integration tests during local development or on CI services.
  */
-module.exports = {
+const config = {
   // Make Metro able to resolve required packages that might be imported from /packages/react-native
   watchFolders: [
     path.resolve(__dirname, '../../node_modules'),
@@ -31,7 +32,6 @@ module.exports = {
       'react-native': __dirname,
     },
   },
-  serializer: {
-    getPolyfills,
-  },
 };
+
+module.exports = mergeConfig(getDefaultConfig(__dirname), config);

packages/react-native/package.json

@@ -79,13 +79,13 @@
   },
   "dependencies": {
     "@jest/create-cache-key-function": "^29.2.1",
-    "@react-native-community/cli": "11.0.0-alpha.2",
-    "@react-native-community/cli-platform-android": "11.0.0-alpha.2",
-    "@react-native-community/cli-platform-ios": "11.0.0-alpha.2",
+    "@react-native-community/cli": "11.0.0",
+    "@react-native-community/cli-platform-android": "11.0.0",
+    "@react-native-community/cli-platform-ios": "11.0.0",
     "@react-native/assets-registry": "^0.72.0",
     "@react-native/codegen": "^0.72.3",
     "@react-native/gradle-plugin": "^0.72.5",
-    "@react-native/js-polyfills": "^0.72.1",
+    "@react-native/js-polyfills": "^0.72.0",
     "@react-native/normalize-colors": "^0.72.0",
     "@react-native/virtualized-lists": "^0.72.2",
     "abort-controller": "^3.0.0",
@@ -98,8 +98,8 @@
     "jest-environment-node": "^29.2.1",
     "jsc-android": "^250231.0.0",
     "memoize-one": "^5.0.0",
-    "metro-runtime": "0.75.1",
-    "metro-source-map": "0.75.1",
+    "metro-runtime": "0.76.0",
+    "metro-source-map": "0.76.0",
     "mkdirp": "^0.5.1",
     "nullthrows": "^1.1.1",
     "pretty-format": "^26.5.2",

packages/react-native/template/metro.config.js

@@ -1,17 +1,12 @@
+const {getDefaultConfig} = require('@react-native/metro-config');
+const {mergeConfig} = require('metro-config');
+
 /**
- * Metro configuration for React Native
- * https://github.com/facebook/react-native
+ * Metro configuration
+ * https://facebook.github.io/metro/docs/configuration
  *
- * @format
+ * @type {import('metro-config').MetroConfig}
  */
+const config = {};
 
-module.exports = {
-  transformer: {
-    getTransformOptions: async () => ({
-      transform: {
-        experimentalImportSupport: false,
-        inlineRequires: true,
-      },
-    }),
-  },
-};
+module.exports = mergeConfig(getDefaultConfig(__dirname), config);

packages/react-native/template/package.json

@@ -18,13 +18,16 @@
     "@babel/preset-env": "^7.20.0",
     "@babel/runtime": "^7.12.5",
     "@react-native/eslint-config": "^0.72.1",
+    "@react-native/metro-config": "^0.72.0",
     "@tsconfig/react-native": "^2.0.2",
+    "@types/metro-config": "^0.76.1",
     "@types/react": "^18.0.24",
     "@types/react-test-renderer": "^18.0.0",
     "babel-jest": "^29.2.1",
     "eslint": "^8.19.0",
     "jest": "^29.2.1",
-    "metro-react-native-babel-preset": "0.75.1",
+    "metro-config": "0.76.0",
+    "metro-react-native-babel-preset": "0.76.0",
     "prettier": "^2.4.1",
     "react-test-renderer": "18.2.0",
     "typescript": "4.8.4"

packages/rn-tester/metro.config.js

@@ -9,14 +9,17 @@
 
 'use strict';
 
+const {getDefaultConfig} = require('@react-native/metro-config');
+const {mergeConfig} = require('metro-config');
 const path = require('path');
-const getPolyfills = require('../react-native/rn-get-polyfills');
 
 /**
  * This cli config is needed for development purposes, e.g. for running
  * integration tests during local development or on CI services.
+ *
+ * @type {import('metro-config').MetroConfig}
  */
-module.exports = {
+const config = {
   // Make Metro able to resolve required external dependencies
   watchFolders: [
     path.resolve(__dirname, '../../node_modules'),
@@ -32,7 +35,6 @@ module.exports = {
       'react-native': path.resolve(__dirname, '../react-native'),
     },
   },
-  serializer: {
-    getPolyfills,
-  },
 };
+
+module.exports = mergeConfig(getDefaultConfig(__dirname), config);

packages/rn-tester/package.json

@@ -20,9 +20,9 @@
     "clean-ios": "rm -rf build/generated/ios Pods Podfile.lock"
   },
   "dependencies": {
+    "flow-enums-runtime": "^0.0.5",
     "invariant": "^2.2.4",
-    "nullthrows": "^1.1.1",
-    "flow-enums-runtime": "^0.0.5"
+    "nullthrows": "^1.1.1"
   },
   "peerDependencies": {
     "react": "18.2.0",