From d17768f4961cad6d3681a495539d481f8ab44991 Mon Sep 17 00:00:00 2001 From: Tim Golen Date: Fri, 12 May 2023 14:38:39 -0600 Subject: [PATCH 1/5] Add information about Prettier into our style guide --- contributingGuides/STYLE.md | 93 +++---------------------------------- 1 file changed, 6 insertions(+), 87 deletions(-) diff --git a/contributingGuides/STYLE.md b/contributingGuides/STYLE.md index 9d94623f0e33..f6694cfd3c19 100644 --- a/contributingGuides/STYLE.md +++ b/contributingGuides/STYLE.md @@ -4,94 +4,13 @@ For almost all of our code style rules, refer to the [Airbnb JavaScript Style Gu When writing ES6 or React code, please also refer to the [Airbnb React/JSX Style Guide](https://github.com/airbnb/javascript/tree/master/react). -There are a few things that we have customized for our tastes which will take precedence over Airbnb's guide. - -## Functions - - Always wrap the function expression for immediately-invoked function expressions (IIFE) in parens: - - ```javascript - // Bad - (function () { - console.log('Welcome to the Internet. Please follow me.'); - }()); - - // Good - (function () { - console.log('Welcome to the Internet. Please follow me.'); - })(); - ``` - -## Whitespace - - Use soft tabs set to 4 spaces. - - ```javascript - // Bad - function () { - ∙∙const name; - } - - // Bad - function () { - ∙const name; - } - - // Good - function () { - ∙∙∙∙const name; - } - ``` - - - Place 1 space before the function keyword and the opening parent for anonymous functions. This does not count for named functions. - - ```javascript - // Bad - function() { - ... - } +We use Prettier to automatically style our code. +- Prettier runs as part of each build process (eg. `npm run web`) +- It will automatically fix the styles on files when they are saved +- You can manually run Prettier with `npm run prettier` +- You can manually run Prettier in watch mode with `npm run prettier-watch` - // Bad - function getValue (element) { - ... - } - - // Good - function∙() { - ... - } - - // Good - function getValue(element) { - ... - } - ``` - - - Do not add spaces inside curly braces. - - ```javascript - // Bad - const foo = { clark: 'kent' }; - - // Good - const foo = {clark: 'kent'}; - ``` - - Aligning tokens should be avoided as it rarely aids in readability and often - produces inconsistencies and larger diffs when updating the code. - - ```javascript - // Good - const foo = { - foo: 'bar', - foobar: 'foobar', - foobarbaz: 'foobarbaz', - }; - - // Bad - const foo = { - foo : 'bar', - foobar : 'foobar', - foobarbaz: 'foobarbaz', - }; - ``` +There are a few things that we have customized for our tastes which will take precedence over Airbnb's guide. ## Naming Conventions From 0c4a75f845463e8b920374a248e85ab9d7400c24 Mon Sep 17 00:00:00 2001 From: Tim Golen Date: Tue, 16 May 2023 07:46:51 -0600 Subject: [PATCH 2/5] Remove prettier watch from build scripts --- package.json | 12 +-- .../GenericPressable/BaseGenericPressable.js | 83 ++++++++++--------- 2 files changed, 52 insertions(+), 43 deletions(-) diff --git a/package.json b/package.json index 940963e1ad19..5ab2f0c34c83 100644 --- a/package.json +++ b/package.json @@ -9,18 +9,18 @@ "scripts": { "postinstall": "npx patch-package && cd desktop && npm install", "clean": "npx react-native clean-project-auto", - "android": "scripts/set-pusher-suffix.sh && concurrently \"npx react-native run-android --port=8083\" npm:prettier-watch", - "ios": "scripts/set-pusher-suffix.sh && concurrently \"npx react-native run-ios --port=8082\" npm:prettier-watch", - "ipad": " concurrently \"npx react-native run-ios --port=8082 --simulator=\"iPad Pro (12.9-inch) (4th generation)\"\" npm:prettier-watch", - "ipad-sm": " concurrently \"npx react-native run-ios --port=8082 --simulator=\"iPad Pro (9.7-inch)\"\" npm:prettier-watch", + "android": "scripts/set-pusher-suffix.sh && npx react-native run-android --port=8083", + "ios": "scripts/set-pusher-suffix.sh && npx react-native run-ios --port=8082", + "ipad": "concurrently \"npx react-native run-ios --port=8082 --simulator=\"iPad Pro (12.9-inch) (4th generation)\"\"", + "ipad-sm": "concurrently \"npx react-native run-ios --port=8082 --simulator=\"iPad Pro (9.7-inch)\"\"", "start": "npx react-native start", - "web": "scripts/set-pusher-suffix.sh && concurrently npm:web-proxy npm:web-server npm:prettier-watch", + "web": "scripts/set-pusher-suffix.sh && concurrently npm:web-proxy npm:web-server", "web-proxy": "node web/proxy.js", "web-server": "webpack-dev-server --open --config config/webpack/webpack.dev.js", "build": "webpack --config config/webpack/webpack.common.js --env envFile=.env.production", "build-staging": "webpack --config config/webpack/webpack.common.js --env envFile=.env.staging", "build-adhoc": "webpack --config config/webpack/webpack.common.js --env envFile=.env.adhoc", - "desktop": "scripts/set-pusher-suffix.sh && concurrently \"node desktop/start.js\" npm:prettier-watch", + "desktop": "scripts/set-pusher-suffix.sh && node desktop/start.js", "desktop-build": "scripts/build-desktop.sh production", "desktop-build-staging": "scripts/build-desktop.sh staging", "createDocsRoutes": "node .github/scripts/createDocsRoutes.js", diff --git a/src/components/Pressable/GenericPressable/BaseGenericPressable.js b/src/components/Pressable/GenericPressable/BaseGenericPressable.js index 80664f2d3521..50c933823e63 100644 --- a/src/components/Pressable/GenericPressable/BaseGenericPressable.js +++ b/src/components/Pressable/GenericPressable/BaseGenericPressable.js @@ -63,45 +63,54 @@ const GenericPressable = forwardRef((props, ref) => { return props.disabled || shouldBeDisabledByScreenReader; }, [isScreenReaderActive, enableInScreenReaderStates, props.disabled]); - const onLongPressHandler = useCallback((event) => { - if (isDisabled) { - return; - } - if (!onLongPress) { - return; - } - if (shouldUseHapticsOnLongPress) { - HapticFeedback.longPress(); - } - if (ref && ref.current) { - ref.current.blur(); - } - onLongPress(event); - - Accessibility.moveAccessibilityFocus(nextFocusRef); - }, [shouldUseHapticsOnLongPress, onLongPress, nextFocusRef, ref, isDisabled]); - - const onPressHandler = useCallback((event) => { - if (isDisabled) { - return; - } - if (shouldUseHapticsOnPress) { - HapticFeedback.press(); - } - if (ref && ref.current) { - ref.current.blur(); - } - onPress(event); + const onLongPressHandler = useCallback( + (event) => { + if (isDisabled) { + return; + } + if (!onLongPress) { + return; + } + if (shouldUseHapticsOnLongPress) { + HapticFeedback.longPress(); + } + if (ref && ref.current) { + ref.current.blur(); + } + onLongPress(event); + + Accessibility.moveAccessibilityFocus(nextFocusRef); + }, + [shouldUseHapticsOnLongPress, onLongPress, nextFocusRef, ref, isDisabled], + ); - Accessibility.moveAccessibilityFocus(nextFocusRef); - }, [shouldUseHapticsOnPress, onPress, nextFocusRef, ref, isDisabled]); + const onPressHandler = useCallback( + (event) => { + if (isDisabled) { + return; + } + if (shouldUseHapticsOnPress) { + HapticFeedback.press(); + } + if (ref && ref.current) { + ref.current.blur(); + } + onPress(event); + + Accessibility.moveAccessibilityFocus(nextFocusRef); + }, + [shouldUseHapticsOnPress, onPress, nextFocusRef, ref, isDisabled], + ); - const onKeyPressHandler = useCallback((event) => { - if (event.key !== 'Enter') { - return; - } - onPressHandler(event); - }, [onPressHandler]); + const onKeyPressHandler = useCallback( + (event) => { + if (event.key !== 'Enter') { + return; + } + onPressHandler(event); + }, + [onPressHandler], + ); useEffect(() => { if (!keyboardShortcut) { From a09256c1bedee0d59b033248699ee912c171b8da Mon Sep 17 00:00:00 2001 From: Tim Golen Date: Tue, 16 May 2023 07:50:37 -0600 Subject: [PATCH 3/5] Commit bad style --- src/libs/actions/Link.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/libs/actions/Link.js b/src/libs/actions/Link.js index 09c040ab47bc..e686894afc5b 100644 --- a/src/libs/actions/Link.js +++ b/src/libs/actions/Link.js @@ -61,7 +61,7 @@ function buildOldDotURL(url, shortLivedAuthToken) { */ function openOldDotLink(url) { if (isNetworkOffline) { - buildOldDotURL(url).then((oldDotURL) => Linking.openURL(oldDotURL)); + buildOldDotURL(url).then(oldDotURL => Linking.openURL(oldDotURL)); return; } From 0fba43ba454283463fc9a69f144d7940bcda1a00 Mon Sep 17 00:00:00 2001 From: Tim Golen Date: Tue, 16 May 2023 07:55:01 -0600 Subject: [PATCH 4/5] Updating prettier docs --- contributingGuides/STYLE.md | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/contributingGuides/STYLE.md b/contributingGuides/STYLE.md index f6694cfd3c19..8cc9ff7dc4e4 100644 --- a/contributingGuides/STYLE.md +++ b/contributingGuides/STYLE.md @@ -4,11 +4,9 @@ For almost all of our code style rules, refer to the [Airbnb JavaScript Style Gu When writing ES6 or React code, please also refer to the [Airbnb React/JSX Style Guide](https://github.com/airbnb/javascript/tree/master/react). -We use Prettier to automatically style our code. -- Prettier runs as part of each build process (eg. `npm run web`) -- It will automatically fix the styles on files when they are saved -- You can manually run Prettier with `npm run prettier` -- You can manually run Prettier in watch mode with `npm run prettier-watch` +We use Prettier to automatically style our code. +- You can run Prettier to fix the style on all files with `npm run prettier` +- You can run Prettier in watch mode to fix the styles when they are saved with `npm run prettier-watch` There are a few things that we have customized for our tastes which will take precedence over Airbnb's guide. From 21f69f641c718bbc42dc95cfb88cddc8f811aece Mon Sep 17 00:00:00 2001 From: Tim Golen Date: Tue, 16 May 2023 07:59:09 -0600 Subject: [PATCH 5/5] Fix style --- src/libs/actions/Link.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/libs/actions/Link.js b/src/libs/actions/Link.js index e686894afc5b..09c040ab47bc 100644 --- a/src/libs/actions/Link.js +++ b/src/libs/actions/Link.js @@ -61,7 +61,7 @@ function buildOldDotURL(url, shortLivedAuthToken) { */ function openOldDotLink(url) { if (isNetworkOffline) { - buildOldDotURL(url).then(oldDotURL => Linking.openURL(oldDotURL)); + buildOldDotURL(url).then((oldDotURL) => Linking.openURL(oldDotURL)); return; }