Switch xplat prettier config to hermes plugin (#37915)

Summary:
Pull Request resolved: #37915

Enable the `prettier-plugin-hermes-parser` in xplat. This plugin enables the use of `hermes-parser` which is significantly faster than the current flow parser prettier bundles (improves formatting time by ~50%) and also brings support for the latest Prettier 3.0.0 printing logic for JS. This upgrade is required in order to enable upcoming Flow features that add new syntax.

Changelog: [Internal]

Reviewed By: SamChou19815

Differential Revision: D46748891

fbshipit-source-id: 3775ef9afa7c04e565fa4fcf8ca5b410f49d35a1

Author: pieterv

.prettierrc

@@ -5,5 +5,15 @@
   "requirePragma": true,
   "singleQuote": true,
   "trailingComma": "all",
-  "endOfLine": "lf"
+  "endOfLine": "lf",
+  "overrides": [
+    {
+      "files": [
+        "*.js"
+      ],
+      "options": {
+        "parser": "hermes"
+      }
+    }
+  ]
 }

jest/preprocessor.js

@@ -89,9 +89,10 @@ module.exports = {
     );
   },
 
-  getCacheKey: (createCacheKeyFunction([
+  // $FlowFixMe[signature-verification-failure]
+  getCacheKey: createCacheKeyFunction([
     __filename,
     require.resolve('metro-react-native-babel-transformer'),
     require.resolve('@babel/core/package.json'),
-  ]) /*: any */),
+  ]),
 };

package.json

@@ -90,6 +90,7 @@
     "mkdirp": "^0.5.1",
     "mock-fs": "^5.1.4",
     "prettier": "2.8.8",
+    "prettier-plugin-hermes-parser": "0.12.1",
     "react": "18.2.0",
     "react-test-renderer": "18.2.0",
     "shelljs": "^0.8.5",

packages/react-native/Libraries/Animated/nodes/AnimatedValueXY.js

@@ -19,11 +19,7 @@ import invariant from 'invariant';
 export type AnimatedValueXYConfig = $ReadOnly<{
   useNativeDriver: boolean,
 }>;
-type ValueXYListenerCallback = (value: {
-  x: number,
-  y: number,
-  ...
-}) => mixed;
+type ValueXYListenerCallback = (value: {x: number, y: number, ...}) => mixed;
 
 let _uniqueId = 1;
 
@@ -135,11 +131,7 @@ export default class AnimatedValueXY extends AnimatedWithChildren {
    * See https://reactnative.dev/docs/animatedvaluexy#resetanimation
    */
   resetAnimation(
-    callback?: (value: {
-      x: number,
-      y: number,
-      ...
-    }) => void,
+    callback?: (value: {x: number, y: number, ...}) => void,
   ): void {
     this.x.resetAnimation();
     this.y.resetAnimation();
@@ -153,13 +145,7 @@ export default class AnimatedValueXY extends AnimatedWithChildren {
    *
    * See https://reactnative.dev/docs/animatedvaluexy#stopanimation
    */
-  stopAnimation(
-    callback?: (value: {
-      x: number,
-      y: number,
-      ...
-    }) => void,
-  ): void {
+  stopAnimation(callback?: (value: {x: number, y: number, ...}) => void): void {
     this.x.stopAnimation();
     this.y.stopAnimation();
     callback && callback(this.__getValue());

packages/react-native/Libraries/Components/ScrollView/ScrollViewStickyHeader.js

@@ -246,7 +246,18 @@ const ScrollViewStickyHeaderWithForwardedRef: React.AbstractComponent<
         clearTimeout(_timer.current);
       }
     };
-  }, [nextHeaderLayoutY, measured, layoutHeight, layoutY, scrollViewHeight, scrollAnimatedValue, inverted, offset, animatedValueListener, isFabric]);
+  }, [
+    nextHeaderLayoutY,
+    measured,
+    layoutHeight,
+    layoutY,
+    scrollViewHeight,
+    scrollAnimatedValue,
+    inverted,
+    offset,
+    animatedValueListener,
+    isFabric,
+  ]);
 
   const _onLayout = (event: LayoutEvent) => {
     setLayoutY(event.nativeEvent.layout.y);

packages/react-native/Libraries/Core/setUpRegeneratorRuntime.js

@@ -22,8 +22,10 @@ let hasNativeGenerator;
 try {
   // If this function was lowered by regenerator-transform, it will try to
   // access `global.regeneratorRuntime` which doesn't exist yet and will throw.
-  hasNativeGenerator = hasNativeConstructor(function* () {},
-  'GeneratorFunction');
+  hasNativeGenerator = hasNativeConstructor(
+    function* () {},
+    'GeneratorFunction',
+  );
 } catch {
   // In this case, we know generators are not provided natively.
   hasNativeGenerator = false;

packages/react-native/Libraries/Interaction/JSEventLoopWatchdog.js

@@ -14,11 +14,7 @@ const infoLog = require('../Utilities/infoLog');
 
 type Handler = {
   onIterate?: () => void,
-  onStall: (params: {
-    lastInterval: number,
-    busyTime: number,
-    ...
-  }) => ?string,
+  onStall: (params: {lastInterval: number, busyTime: number, ...}) => ?string,
   ...
 };
 

packages/react-native/Libraries/LogBox/UI/LogBoxInspectorHeader.js

@@ -88,7 +88,7 @@ const backgroundForLevel = (level: LogLevel) =>
       default: 'transparent',
       pressed: LogBoxStyle.getFatalDarkColor(),
     },
-  }[level]);
+  })[level];
 
 function LogBoxInspectorHeaderButton(
   props: $ReadOnly<{|

packages/react-native/cli.js

@@ -56,10 +56,10 @@ async function main() {
       if (latest !== currentVersion) {
         const msg = `
   ${chalk.bold.yellow('WARNING:')} You should run ${chalk.white.bold(
-          'npx react-native@latest',
-        )} to ensure you're always using the most current version of the CLI. NPX has cached version (${chalk.bold.yellow(
-          currentVersion,
-        )}) != current release (${chalk.bold.green(latest)})
+    'npx react-native@latest',
+  )} to ensure you're always using the most current version of the CLI. NPX has cached version (${chalk.bold.yellow(
+    currentVersion,
+  )}) != current release (${chalk.bold.green(latest)})
   `;
         console.warn(msg);
       }

packages/rn-tester/js/examples/Experimental/W3CPointerEventPlatformTests/PointerEventAttributesHoverablePointers.js

@@ -67,13 +67,16 @@ function PointerEventAttributesHoverablePointersTestCase(
         testNamePrefix + ' ' + expectedPointerType + ' ' + expectedEventType;
 
       detected_pointertypes[event.nativeEvent.pointerType] = true;
-      harness.test(({assert_equals}) => {
-        assert_equals(
-          eventType,
-          expectedEventType,
-          'Event.type should be ' + expectedEventType,
-        );
-      }, pointerTestName + "'s type should be " + expectedEventType);
+      harness.test(
+        ({assert_equals}) => {
+          assert_equals(
+            eventType,
+            expectedEventType,
+            'Event.type should be ' + expectedEventType,
+          );
+        },
+        pointerTestName + "'s type should be " + expectedEventType,
+      );
 
       // Test button and buttons
       if (eventType === 'pointerdown') {