Port changes from main into Stable to make the CI green

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/index.js

@@ -0,0 +1,86 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ * @noformat
+ */
+
+/*:: import type {ConfigT} from 'metro-config'; */
+
+const {getDefaultConfig: getBaseConfig, mergeConfig} = require('metro-config');
+
+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('|'),
+);
+
+/**
+ * Get the base Metro configuration for a React Native project.
+ */
+function getDefaultConfig(
+  projectRoot /*: string */
+) /*: ConfigT */ {
+  const config = {
+    resolver: {
+      resolverMainFields: ['react-native', 'browser', 'main'],
+      platforms: ['android', 'ios'],
+      unstable_conditionNames: ['import', 'require', 'react-native'],
+    },
+    serializer: {
+      getPolyfills: () => require('@react-native/js-polyfills')(),
+    },
+    server: {
+      port: Number(process.env.RCT_METRO_PORT) || 8081,
+    },
+    symbolicator: {
+      customizeFrame: (frame /*: $ReadOnly<{file: ?string, ...}>*/) => {
+        const collapse = Boolean(
+          frame.file && INTERNAL_CALLSITES_REGEX.test(frame.file),
+        );
+        return {collapse};
+      },
+    },
+    transformer: {
+      allowOptionalDependencies: true,
+      assetRegistryPath: 'react-native/Libraries/Image/AssetRegistry',
+      asyncRequireModulePath: require.resolve(
+        'metro-runtime/src/modules/asyncRequire',
+      ),
+      babelTransformerPath: require.resolve(
+        'metro-react-native-babel-transformer',
+      ),
+      getTransformOptions: async () => ({
+        transform: {
+          experimentalImportSupport: false,
+          inlineRequires: true,
+        },
+      }),
+    },
+    watchFolders: [],
+  };
+
+  return mergeConfig(
+    getBaseConfig.getDefaultValues(projectRoot),
+    config,
+  );
+}
+
+module.exports = {getDefaultConfig};

packages/metro-config/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "@react-native/metro-config",
+  "version": "0.72.0",
+  "description": "Metro configuration for React Native.",
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:facebook/react-native.git",
+    "directory": "packages/metro-config"
+  },
+  "license": "MIT",
+  "exports": "./index.js",
+  "dependencies": {
+    "@react-native/js-polyfills": "^0.72.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.0",
-    "@react-native-community/cli-platform-android": "11.0.0-alpha.0",
-    "@react-native-community/cli-platform-ios": "11.0.0-alpha.0",
+    "@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.4",
     "@react-native/gradle-plugin": "^0.72.6",
-    "@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.3",
     "abort-controller": "^3.0.0",
@@ -98,8 +98,9 @@
     "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-react-native-babel-transformer": "0.76.0",
+    "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

@@ -5,13 +5,16 @@
  * @format
  */
 
-module.exports = {
-  transformer: {
-    getTransformOptions: async () => ({
-      transform: {
-        experimentalImportSupport: false,
-        inlineRequires: true,
-      },
-    }),
-  },
-};
+const {getDefaultConfig} = require('@react-native/metro-config');
+
+const {mergeConfig} = require('metro-config');
+
+/**
+ * Metro configuration
+ * https://facebook.github.io/metro/docs/configuration
+ *
+ * @type {import('metro-config').MetroConfig}
+ */
+const config = {};
+
+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/RNTester/RNTester.xctestplan

@@ -28,6 +28,7 @@
   },
   "testTargets" : [
     {
+      "enabled": false,
       "target" : {
         "containerPath" : "container:RNTesterPods.xcodeproj",
         "identifier" : "E7DB215222B2F332005AC45F",

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

@@ -11,7 +11,7 @@
     "directory": "packages/rn-tester"
   },
   "scripts": {
-    "start": "../react-native/scripts/packager.sh",
+    "start": "react-native start",
     "install-android-jsc": "../../gradlew :packages:rn-tester:android:app:installJscDebug",
     "install-android-hermes": "../../gradlew :packages:rn-tester:android:app:installHermesDebug",
     "clean-android": "rm -rf android/app/build",
@@ -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",

scripts/objc-test.sh

@@ -75,9 +75,9 @@ waitForWebSocketServer() {
 
 runTests() {
   # shellcheck disable=SC1091
-  source "./scripts/.tests.env"
+  source "$ROOT/scripts/.tests.env"
   xcodebuild build test \
-    -workspace packages/rn-tester/RNTesterPods.xcworkspace \
+    -workspace RNTesterPods.xcworkspace \
     -scheme RNTester \
     -sdk iphonesimulator \
     -destination "platform=iOS Simulator,name=$IOS_DEVICE,OS=$IOS_TARGET_OS" \
@@ -86,7 +86,7 @@ runTests() {
 
 buildProject() {
   xcodebuild build \
-    -workspace packages/rn-tester/RNTesterPods.xcworkspace \
+    -workspace RNTesterPods.xcworkspace \
     -scheme RNTester \
     -sdk iphonesimulator
 }
@@ -105,30 +105,37 @@ xcbeautifyFormat() {
   xcbeautify --report junit --report-path "$REPORTS_DIR/ios/results.xml"
 }
 
-preloadBundles() {
-  # Preload the RNTesterApp bundle for better performance in integration tests
-  curl -s 'http://localhost:8081/packages/rn-tester/js/RNTesterApp.ios.bundle?platform=ios&dev=true' -o /dev/null
-  curl -s 'http://localhost:8081/packages/rn-tester/js/RNTesterApp.ios.bundle?platform=ios&dev=true&minify=false' -o /dev/null
+preloadBundlesRNIntegrationTests() {
+  # Preload IntegrationTests bundles (/)
+  # TODO(T149119847): These need to be relocated into a dir with a Metro config
   curl -s 'http://localhost:8081/IntegrationTests/IntegrationTestsApp.bundle?platform=ios&dev=true' -o /dev/null
   curl -s 'http://localhost:8081/IntegrationTests/RCTRootViewIntegrationTestApp.bundle?platform=ios&dev=true' -o /dev/null
 }
 
+preloadBundlesRNTester() {
+  # Preload RNTesterApp bundles (packages/rn-tester/)
+  curl -s 'http://localhost:8081/js/RNTesterApp.ios.bundle?platform=ios&dev=true' -o /dev/null
+  curl -s 'http://localhost:8081/js/RNTesterApp.ios.bundle?platform=ios&dev=true&minify=false' -o /dev/null
+}
+
 main() {
-  cd "$ROOT" || exit
+  cd "$ROOT/packages/rn-tester" || exit
 
   # If first argument is "test", actually start the packager and run tests.
   # Otherwise, just build RNTester and exit
   if [ "$1" = "test" ]; then
 
     # Start the WebSocket test server
     echo "Launch WebSocket Server"
-    sh "./IntegrationTests/launchWebSocketServer.sh" &
+    sh "$ROOT/IntegrationTests/launchWebSocketServer.sh" &
     waitForWebSocketServer
 
     # Start the packager
     yarn start --max-workers=1 || echo "Can't start packager automatically" &
     waitForPackager
-    preloadBundles
+    preloadBundlesRNTester
+    # TODO(T149119847)
+    # preloadBundlesRNIntegrationTests
 
     # Build and run tests.
     if [ -x "$(command -v xcbeautify)" ]; then