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

.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') {

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

@@ -66,13 +66,16 @@ function PointerEventAttributesNoHoverPointersTestCase(
         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
       harness.test(({assert_equals}) => {

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

@@ -62,23 +62,28 @@ function PointerEventPrimaryTouchPointerTestCase(
         expectedOrder[Object.keys(detected_events).length];
       detected_events[pointerEventIdentifier] = true;
 
-      harness.test(({assert_equals}) => {
-        assert_equals(
-          boxLabel,
-          expectedBoxLabel,
-          'event should be coming from the correct box',
-        );
-        assert_equals(
-          eventType,
-          expectedEventType.toLowerCase(),
-          'event should have the right type',
-        );
-        assert_equals(
-          isPrimary,
-          expectedIsPrimary,
-          'event should be correctly primary',
-        );
-      }, `${expectedBoxLabel} box's ${expectedEventType} should${!expectedIsPrimary ? ' not' : ''} be marked as the primary pointer`);
+      harness.test(
+        ({assert_equals}) => {
+          assert_equals(
+            boxLabel,
+            expectedBoxLabel,
+            'event should be coming from the correct box',
+          );
+          assert_equals(
+            eventType,
+            expectedEventType.toLowerCase(),
+            'event should have the right type',
+          );
+          assert_equals(
+            isPrimary,
+            expectedIsPrimary,
+            'event should be correctly primary',
+          );
+        },
+        `${expectedBoxLabel} box's ${expectedEventType} should${
+          !expectedIsPrimary ? ' not' : ''
+        } be marked as the primary pointer`,
+      );
     },
     [harness],
   );

packages/virtualized-lists/Lists/VirtualizedListContext.js

@@ -31,9 +31,7 @@ type Context = $ReadOnly<{
     cellKey: string,
     ref: React.ElementRef<VirtualizedList>,
   }) => void,
-  unregisterAsNestedChild: ({
-    ref: React.ElementRef<VirtualizedList>,
-  }) => void,
+  unregisterAsNestedChild: ({ref: React.ElementRef<VirtualizedList>}) => void,
 }>;
 
 export const VirtualizedListContext: React.Context<?Context> =

yarn.lock

@@ -5311,6 +5311,11 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/hermes-estree/-/hermes-estree-0.12.0.tgz#8a289f9aee854854422345e6995a48613bac2ca8"
   integrity sha512-+e8xR6SCen0wyAKrMT3UD0ZCCLymKhRgjEB5sS28rKiFir/fXgLoeRilRUssFCILmGHb+OvHDUlhxs0+IEyvQw==
 
+[email protected]:
+  version "0.12.1"
+  resolved "https://registry.yarnpkg.com/hermes-estree/-/hermes-estree-0.12.1.tgz#74901ee351387fecbf3c683c90b1fa7d22f1c6f0"
+  integrity sha512-IWnP3rEZnuEq64IGM/sNsp+QCQcCAAu5TMallJ7bpUw0YUfk5q6cA7tvBGo/D0kGyo5jASc4Yp/CQCsLSSMfGQ==
+
 [email protected]:
   version "0.8.0"
   resolved "https://registry.yarnpkg.com/hermes-estree/-/hermes-estree-0.8.0.tgz#530be27243ca49f008381c1f3e8b18fb26bf9ec0"
@@ -5323,6 +5328,13 @@ [email protected]:
   dependencies:
     hermes-estree "0.12.0"
 
+[email protected]:
+  version "0.12.1"
+  resolved "https://registry.yarnpkg.com/hermes-parser/-/hermes-parser-0.12.1.tgz#e60595f05ecd13026c614ca5d9db2eaefe971301"
+  integrity sha512-53aep6osCq1GiSIlbe7ltPD9v0GeAUtGlaMhgKexGjePoI66GnalLR5aPeuIZbExBQAb+af/kiXT3yxBweuXUA==
+  dependencies:
+    hermes-estree "0.12.1"
+
 [email protected]:
   version "0.8.0"
   resolved "https://registry.yarnpkg.com/hermes-parser/-/hermes-parser-0.8.0.tgz#116dceaba32e45b16d6aefb5c4c830eaeba2d257"
@@ -7589,6 +7601,14 @@ prettier-linter-helpers@^1.0.0:
   dependencies:
     fast-diff "^1.1.2"
 
+[email protected]:
+  version "0.12.1"
+  resolved "https://registry.yarnpkg.com/prettier-plugin-hermes-parser/-/prettier-plugin-hermes-parser-0.12.1.tgz#5c1ec4c18cea9c4b88478fa27f172e3f849b40b6"
+  integrity sha512-Letp5jjP/lpw/zpqKmtuDytQ2fP5M5dExcdUqIZknOwf+cXLirHaDddxz3gqzUJrpU4WzuaC0x3nfcH1Hi0Tng==
+  dependencies:
+    hermes-estree "0.12.1"
+    hermes-parser "0.12.1"
+
 [email protected]:
   version "2.8.8"
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.8.8.tgz#e8c5d7e98a4305ffe3de2e1fc4aca1a71c28b1da"