Bump RN CLI, add @react-native/metro-config to template

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",