Switch Babel parsing from legacy Flow plugin to hermes-parser (#46696)

Summary:
Pull Request resolved: #46696

Following D62161923, we began to lose sync with modern Flow syntax when Metro's `transformer.hermesParser` option is disabled. This config option loads Babel for transformation (instead of `hermes-parser`), which requires a Babel plugin to parse (not strip) Flow syntax.

This diff migrates us away from `babel/plugin-syntax-flow` (see also babel/babel#16264) and uses the modern [`babel-plugin-syntax-hermes-parser`](https://www.npmjs.com/package/babel-plugin-syntax-hermes-parser) instead (a component of the modern Hermes Parser stack).

Following this change, new projects that unset `transformer.hermesParser` will compile.

Resolves #46601.

Changelog:
[General][Fixed] - Fix parsing of modern Flow syntax when `transformer.hermesParser = false` is configured in Metro config

Reviewed By: cipolleschi

Differential Revision: D63535216

packages/react-native-babel-preset/package.json

@@ -15,32 +15,31 @@
   "license": "MIT",
   "dependencies": {
     "@babel/core": "^7.25.2",
-    "@babel/plugin-transform-async-generator-functions": "^7.25.4",
-    "@babel/plugin-transform-class-properties": "^7.25.4",
     "@babel/plugin-proposal-export-default-from": "^7.24.7",
-    "@babel/plugin-transform-logical-assignment-operators": "^7.24.7",
-    "@babel/plugin-transform-nullish-coalescing-operator": "^7.24.7",
-    "@babel/plugin-transform-numeric-separator": "^7.24.7",
-    "@babel/plugin-transform-object-rest-spread": "^7.24.7",
-    "@babel/plugin-transform-optional-catch-binding": "^7.24.7",
-    "@babel/plugin-transform-optional-chaining": "^7.24.8",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@babel/plugin-syntax-export-default-from": "^7.24.7",
-    "@babel/plugin-syntax-flow": "^7.24.7",
     "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.3",
     "@babel/plugin-syntax-optional-chaining": "^7.8.3",
     "@babel/plugin-transform-arrow-functions": "^7.24.7",
+    "@babel/plugin-transform-async-generator-functions": "^7.25.4",
     "@babel/plugin-transform-async-to-generator": "^7.24.7",
     "@babel/plugin-transform-block-scoping": "^7.25.0",
+    "@babel/plugin-transform-class-properties": "^7.25.4",
     "@babel/plugin-transform-classes": "^7.25.4",
     "@babel/plugin-transform-computed-properties": "^7.24.7",
     "@babel/plugin-transform-destructuring": "^7.24.8",
     "@babel/plugin-transform-flow-strip-types": "^7.25.2",
     "@babel/plugin-transform-for-of": "^7.24.7",
     "@babel/plugin-transform-function-name": "^7.25.1",
     "@babel/plugin-transform-literals": "^7.25.2",
+    "@babel/plugin-transform-logical-assignment-operators": "^7.24.7",
     "@babel/plugin-transform-modules-commonjs": "^7.24.8",
     "@babel/plugin-transform-named-capturing-groups-regex": "^7.24.7",
+    "@babel/plugin-transform-nullish-coalescing-operator": "^7.24.7",
+    "@babel/plugin-transform-numeric-separator": "^7.24.7",
+    "@babel/plugin-transform-object-rest-spread": "^7.24.7",
+    "@babel/plugin-transform-optional-catch-binding": "^7.24.7",
+    "@babel/plugin-transform-optional-chaining": "^7.24.8",
     "@babel/plugin-transform-parameters": "^7.24.7",
     "@babel/plugin-transform-private-methods": "^7.24.7",
     "@babel/plugin-transform-private-property-in-object": "^7.24.7",
@@ -57,6 +56,7 @@
     "@babel/plugin-transform-unicode-regex": "^7.24.7",
     "@babel/template": "^7.25.0",
     "@react-native/babel-plugin-codegen": "0.77.0-main",
+    "babel-plugin-syntax-hermes-parser": "^0.23.1",
     "babel-plugin-transform-flow-enums": "^0.0.2",
     "react-refresh": "^0.14.0"
   },

packages/react-native-babel-preset/src/configs/main.js

@@ -25,7 +25,7 @@ function isTSXSource(fileName) {
 const loose = true;
 
 const defaultPlugins = [
-  [require('@babel/plugin-syntax-flow')],
+  [require('babel-plugin-syntax-hermes-parser')],
   [require('babel-plugin-transform-flow-enums')],
   [require('@babel/plugin-transform-block-scoping')],
   [require('@babel/plugin-transform-class-properties'), {loose}],

packages/react-native/jest-preset.js

@@ -15,11 +15,7 @@ module.exports = {
     platforms: ['android', 'ios', 'native'],
   },
   transform: {
-    '^.+\\.(js)$': [
-      'babel-jest',
-      {plugins: ['babel-plugin-syntax-hermes-parser']},
-    ],
-    '^.+\\.(ts|tsx)$': 'babel-jest',
+    '^.+\\.(js|ts|tsx)$': 'babel-jest',
     '^.+\\.(bmp|gif|jpg|jpeg|mp4|png|psd|svg|webp)$': require.resolve(
       './jest/assetFileTransformer.js',
     ),