From dc2037c0f1c06fe2a176ea48c6f255d10fa9e4b7 Mon Sep 17 00:00:00 2001 From: Pieter Vanderwerff Date: Thu, 15 Jun 2023 08:23:06 -0700 Subject: [PATCH] Switch xplat prettier config to hermes plugin (#37915) Summary: Pull Request resolved: https://github.com/facebook/react-native/pull/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 | 12 +++++- jest/preprocessor.js | 5 ++- package.json | 1 + .../Animated/nodes/AnimatedValueXY.js | 20 ++-------- .../ScrollView/ScrollViewStickyHeader.js | 13 ++++++- .../Libraries/Core/setUpRegeneratorRuntime.js | 6 ++- .../Interaction/JSEventLoopWatchdog.js | 6 +-- .../LogBox/UI/LogBoxInspectorHeader.js | 2 +- packages/react-native/cli.js | 8 ++-- ...PointerEventAttributesHoverablePointers.js | 17 ++++---- .../PointerEventAttributesNoHoverPointers.js | 17 ++++---- .../PointerEventPrimaryTouchPointer.js | 39 +++++++++++-------- .../Lists/VirtualizedListContext.js | 4 +- yarn.lock | 20 ++++++++++ 14 files changed, 103 insertions(+), 67 deletions(-) diff --git a/.prettierrc b/.prettierrc index fd47e617ecc8ea..8a48dc429e1577 100644 --- a/.prettierrc +++ b/.prettierrc @@ -5,5 +5,15 @@ "requirePragma": true, "singleQuote": true, "trailingComma": "all", - "endOfLine": "lf" + "endOfLine": "lf", + "overrides": [ + { + "files": [ + "*.js" + ], + "options": { + "parser": "hermes" + } + } + ] } diff --git a/jest/preprocessor.js b/jest/preprocessor.js index cc0a5af4618e59..b971b4260c769f 100644 --- a/jest/preprocessor.js +++ b/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 */), + ]), }; diff --git a/package.json b/package.json index 5f6c53b84442e5..53497018976d39 100644 --- a/package.json +++ b/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", diff --git a/packages/react-native/Libraries/Animated/nodes/AnimatedValueXY.js b/packages/react-native/Libraries/Animated/nodes/AnimatedValueXY.js index dc24a674bba4a7..fa4a82320e3069 100644 --- a/packages/react-native/Libraries/Animated/nodes/AnimatedValueXY.js +++ b/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()); diff --git a/packages/react-native/Libraries/Components/ScrollView/ScrollViewStickyHeader.js b/packages/react-native/Libraries/Components/ScrollView/ScrollViewStickyHeader.js index abcf74e4ce7544..acb737fdfa593d 100644 --- a/packages/react-native/Libraries/Components/ScrollView/ScrollViewStickyHeader.js +++ b/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); diff --git a/packages/react-native/Libraries/Core/setUpRegeneratorRuntime.js b/packages/react-native/Libraries/Core/setUpRegeneratorRuntime.js index 425e715a1e3f5e..c334acca7cdd3f 100644 --- a/packages/react-native/Libraries/Core/setUpRegeneratorRuntime.js +++ b/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; diff --git a/packages/react-native/Libraries/Interaction/JSEventLoopWatchdog.js b/packages/react-native/Libraries/Interaction/JSEventLoopWatchdog.js index 113d073ee7000c..1db16e53ed7abe 100644 --- a/packages/react-native/Libraries/Interaction/JSEventLoopWatchdog.js +++ b/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, ... }; diff --git a/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorHeader.js b/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorHeader.js index 097f152ed9f2d7..1f578db82f0f26 100644 --- a/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorHeader.js +++ b/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<{| diff --git a/packages/react-native/cli.js b/packages/react-native/cli.js index 301a51241fbeae..451c0860fc0bf0 100755 --- a/packages/react-native/cli.js +++ b/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); } diff --git a/packages/rn-tester/js/examples/Experimental/W3CPointerEventPlatformTests/PointerEventAttributesHoverablePointers.js b/packages/rn-tester/js/examples/Experimental/W3CPointerEventPlatformTests/PointerEventAttributesHoverablePointers.js index 384430805e12b9..79a5556b87821e 100644 --- a/packages/rn-tester/js/examples/Experimental/W3CPointerEventPlatformTests/PointerEventAttributesHoverablePointers.js +++ b/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') { diff --git a/packages/rn-tester/js/examples/Experimental/W3CPointerEventPlatformTests/PointerEventAttributesNoHoverPointers.js b/packages/rn-tester/js/examples/Experimental/W3CPointerEventPlatformTests/PointerEventAttributesNoHoverPointers.js index bedfc48181a8a9..c9894ae6cf3763 100644 --- a/packages/rn-tester/js/examples/Experimental/W3CPointerEventPlatformTests/PointerEventAttributesNoHoverPointers.js +++ b/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}) => { diff --git a/packages/rn-tester/js/examples/Experimental/W3CPointerEventPlatformTests/PointerEventPrimaryTouchPointer.js b/packages/rn-tester/js/examples/Experimental/W3CPointerEventPlatformTests/PointerEventPrimaryTouchPointer.js index 140f1da72861fb..cd643c420353e7 100644 --- a/packages/rn-tester/js/examples/Experimental/W3CPointerEventPlatformTests/PointerEventPrimaryTouchPointer.js +++ b/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], ); diff --git a/packages/virtualized-lists/Lists/VirtualizedListContext.js b/packages/virtualized-lists/Lists/VirtualizedListContext.js index bca5724498a356..b40128f2dd2b26 100644 --- a/packages/virtualized-lists/Lists/VirtualizedListContext.js +++ b/packages/virtualized-lists/Lists/VirtualizedListContext.js @@ -31,9 +31,7 @@ type Context = $ReadOnly<{ cellKey: string, ref: React.ElementRef, }) => void, - unregisterAsNestedChild: ({ - ref: React.ElementRef, - }) => void, + unregisterAsNestedChild: ({ref: React.ElementRef}) => void, }>; export const VirtualizedListContext: React.Context = diff --git a/yarn.lock b/yarn.lock index 91d2aeb3bf9964..91bec52806c02b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5311,6 +5311,11 @@ hermes-estree@0.12.0: resolved "https://registry.yarnpkg.com/hermes-estree/-/hermes-estree-0.12.0.tgz#8a289f9aee854854422345e6995a48613bac2ca8" integrity sha512-+e8xR6SCen0wyAKrMT3UD0ZCCLymKhRgjEB5sS28rKiFir/fXgLoeRilRUssFCILmGHb+OvHDUlhxs0+IEyvQw== +hermes-estree@0.12.1: + 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== + hermes-estree@0.8.0: version "0.8.0" resolved "https://registry.yarnpkg.com/hermes-estree/-/hermes-estree-0.8.0.tgz#530be27243ca49f008381c1f3e8b18fb26bf9ec0" @@ -5323,6 +5328,13 @@ hermes-parser@0.12.0: dependencies: hermes-estree "0.12.0" +hermes-parser@0.12.1: + 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" + hermes-parser@0.8.0: 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" +prettier-plugin-hermes-parser@0.12.1: + 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" + prettier@2.8.8: version "2.8.8" resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.8.8.tgz#e8c5d7e98a4305ffe3de2e1fc4aca1a71c28b1da"