[No QA] Fix prettier import sorting broken by @prettier/plugin-oxc

jest.config.js

@@ -37,5 +37,6 @@ module.exports = {
         '^group-ib-fp$': '<rootDir>/__mocks__/group-ib-fp.ts',
         '@noble/ed25519': '<rootDir>/node_modules/@noble/ed25519/index.ts',
         '@noble/hashes/(.*)': '<rootDir>/node_modules/@noble/hashes/src/$1.ts',
+        '^parse-imports-exports$': '<rootDir>/node_modules/parse-imports-exports/index.cjs',
     },
 };

jest/setup.ts

@@ -1,6 +1,5 @@
 /* eslint-disable max-classes-per-file */
 // Polyfill necessary for Onyx.init in jest/setupAfterEnv.ts
-import '@src/polyfills/PromiseWithResolvers';
 import * as core from '@actions/core';
 import '@shopify/flash-list/jestSetup';
 import type {ReactNode} from 'react';
@@ -13,6 +12,7 @@ import mockStorage from 'react-native-onyx/dist/storage/__mocks__';
 import type Animated from 'react-native-reanimated';
 import 'setimmediate';
 import * as MockedSecureStore from '@src/libs/MultifactorAuthentication/Biometrics/SecureStore/index.web';
+import '@src/polyfills/PromiseWithResolvers';
 import mockFSLibrary from './setupMockFullstoryLib';
 import setupMockImages from './setupMockImages';
 

package.json

@@ -263,7 +263,7 @@
     "@storybook/react-webpack5": "10.1.10",
     "@svgr/webpack": "^6.0.0",
     "@testing-library/react-native": "13.2.0",
-    "@trivago/prettier-plugin-sort-imports": "5.2.2",
+    "@trivago/prettier-plugin-sort-imports": "^6.0.2",
     "@types/base-64": "^1.0.2",
     "@types/canvas-size": "^1.2.2",
     "@types/concurrently": "^7.0.0",

patches/@trivago/prettier-plugin-sort-imports/@trivago+prettier-plugin-sort-imports+6.0.2+001+add-oxc-parser-support.patch

@@ -0,0 +1,34 @@
+diff --git a/node_modules/@trivago/prettier-plugin-sort-imports/lib/src/index.js b/node_modules/@trivago/prettier-plugin-sort-imports/lib/src/index.js
+index d2d7e8d..397aa3b 100644
+--- a/node_modules/@trivago/prettier-plugin-sort-imports/lib/src/index.js
++++ b/node_modules/@trivago/prettier-plugin-sort-imports/lib/src/index.js
+@@ -10,6 +10,10 @@ import { createEmberParsers } from './utils/create-ember-parsers.js';
+ import { createSvelteParsers } from './utils/create-svelte-parsers.js';
+ const emberParsers = await createEmberParsers();
+ const svelteParsers = await createSvelteParsers();
++
++let oxcParsers = {};
++try { oxcParsers = (await import('@prettier/plugin-oxc')).parsers; } catch {}
++
+ const options = {
+     importOrderExclude: {
+         type: 'path',
+@@ -122,6 +126,18 @@ export default {
+                 },
+             }
+             : {}),
++        ...(oxcParsers.oxc
++            ? {
++                oxc: {
++                    ...oxcParsers.oxc,
++                    preprocess: defaultPreprocessor,
++                },
++                'oxc-ts': {
++                    ...oxcParsers['oxc-ts'],
++                    preprocess: defaultPreprocessor,
++                },
++            }
++            : {}),
+     },
+     options,
+ };

patches/@trivago/prettier-plugin-sort-imports/details.md

@@ -0,0 +1,17 @@
+# `@trivago/prettier-plugin-sort-imports` patches
+
+### [@trivago+prettier-plugin-sort-imports+6.0.2+001+add-oxc-parser-support.patch](@trivago+prettier-plugin-sort-imports+6.0.2+001+add-oxc-parser-support.patch)
+
+- Reason:
+
+    ```
+    @prettier/plugin-oxc registers oxc and oxc-ts parsers that override the built-in
+    babel and typescript parsers for JS/TS files. Since the sort-imports plugin only
+    attaches its import-sorting preprocess hook to babel/typescript/flow/vue parsers,
+    import sorting is silently skipped when OXC is active. This patch adds oxc and
+    oxc-ts parser entries that compose OXC's parser with the sort-imports preprocess hook.
+    ```
+
+- Upstream PR/issue: https://github.com/trivago/prettier-plugin-sort-imports/pull/398
+- E/App issue: https://github.com/Expensify/App/issues/82687
+- PR introducing patch: https://github.com/Expensify/App/pull/83008

src/components/BookTravelButton.tsx

@@ -20,8 +20,8 @@ import colors from '@styles/theme/colors';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
-import type WithSentryLabel from '@src/types/utils/SentryLabel';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
+import type WithSentryLabel from '@src/types/utils/SentryLabel';
 import Button from './Button';
 import ConfirmModal from './ConfirmModal';
 import DotIndicatorMessage from './DotIndicatorMessage';

src/components/CardPreview.tsx

@@ -1,5 +1,5 @@
-import type {StyleProp, ViewStyle} from 'react-native';
 import React from 'react';
+import type {StyleProp, ViewStyle} from 'react-native';
 import {View} from 'react-native';
 import {useMemoizedLazyIllustrations} from '@hooks/useLazyAsset';
 import useOnyx from '@hooks/useOnyx';

src/components/DelegateNoAccessModalProvider/index.tsx

@@ -3,14 +3,14 @@
 import React, {createContext, useContext, useState} from 'react';
 import type {PropsWithChildren} from 'react';
 import {View} from 'react-native';
+import ConfirmModal from '@components/ConfirmModal';
+import RenderHTML from '@components/RenderHTML';
 import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails';
 import useLocalize from '@hooks/useLocalize';
 import useOnyx from '@hooks/useOnyx';
 import useThemeStyles from '@hooks/useThemeStyles';
 import AccountUtils from '@libs/AccountUtils';
 import ONYXKEYS from '@src/ONYXKEYS';
-import ConfirmModal from '@components/ConfirmModal';
-import RenderHTML from '@components/RenderHTML';
 import {defaultDelegateNoAccessActionsContextValue, defaultDelegateNoAccessStateContextValue} from './default';
 import type {DelegateNoAccessActionsContextType, DelegateNoAccessStateContextType} from './types';
 

src/components/FeatureList.tsx

@@ -5,9 +5,9 @@ import type {StyleProp, TextStyle, ViewStyle} from 'react-native';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import variables from '@styles/variables';
+import CONST from '@src/CONST';
 import type {TranslationPaths} from '@src/languages/types';
 import type IconAsset from '@src/types/utils/IconAsset';
-import CONST from '@src/CONST';
 import Button from './Button';
 import type DotLottieAnimation from './LottieAnimations/types';
 import MenuItem from './MenuItem';

src/components/LHNOptionsList/LHNOptionsList.tsx

@@ -18,8 +18,8 @@ import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
 import useOnyx from '@hooks/useOnyx';
 import usePolicyForMovingExpenses from '@hooks/usePolicyForMovingExpenses';
-import useReportAttributes from '@hooks/useReportAttributes';
 import usePrevious from '@hooks/usePrevious';
+import useReportAttributes from '@hooks/useReportAttributes';
 import useRootNavigationState from '@hooks/useRootNavigationState';
 import useScrollEventEmitter from '@hooks/useScrollEventEmitter';
 import useTheme from '@hooks/useTheme';

src/components/MoneyRequestConfirmationListFooter.tsx

@@ -12,9 +12,9 @@ import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
 import useOnyx from '@hooks/useOnyx';
 import useOutstandingReports from '@hooks/useOutstandingReports';
-import useReportAttributes from '@hooks/useReportAttributes';
 import usePolicyForMovingExpenses from '@hooks/usePolicyForMovingExpenses';
 import usePrevious from '@hooks/usePrevious';
+import useReportAttributes from '@hooks/useReportAttributes';
 import useThemeStyles from '@hooks/useThemeStyles';
 import {getDecodedCategoryName} from '@libs/CategoryUtils';
 import {convertToDisplayString} from '@libs/CurrencyUtils';

src/components/MoneyRequestReportView/MoneyRequestReportActionsList.tsx

@@ -60,12 +60,12 @@
 import {isTransactionPendingDelete} from '@libs/TransactionUtils';
 import Visibility from '@libs/Visibility';
 import isSearchTopmostFullScreenRoute from '@navigation/helpers/isSearchTopmostFullScreenRoute';
-import {ActionListContext} from '@pages/inbox/ReportScreenContext';
 import FloatingMessageCounter from '@pages/inbox/report/FloatingMessageCounter';
 import getInitialNumToRender from '@pages/inbox/report/getInitialNumReportActionsToRender';
 import ReportActionsListItemRenderer from '@pages/inbox/report/ReportActionsListItemRenderer';
 import shouldDisplayNewMarkerOnReportAction from '@pages/inbox/report/shouldDisplayNewMarkerOnReportAction';
 import useReportUnreadMessageScrollTracking from '@pages/inbox/report/useReportUnreadMessageScrollTracking';
+import {ActionListContext} from '@pages/inbox/ReportScreenContext';
 import variables from '@styles/variables';
 import {openReport, readNewestAction, subscribeToNewActionEvent} from '@userActions/Report';
 import CONST from '@src/CONST';
@@ -674,7 +674,7 @@
         reportScrollManager.scrollToEnd();
         readActionSkipped.current = false;
         readNewestAction(report.reportID);
     }, [setIsFloatingMessageCounterVisible, hasNewestReportAction, reportScrollManager, report.reportID]);
 
     const scrollToNewTransaction = useCallback(
         (pageY: number) => {

src/components/MoneyRequestReportView/MoneyRequestReportNavigation.tsx

@@ -2,11 +2,11 @@ import React, {useEffect} from 'react';
 import {View} from 'react-native';
 import PrevNextButtons from '@components/PrevNextButtons';
 import Text from '@components/Text';
+import useActionLoadingReportIDs from '@hooks/useActionLoadingReportIDs';
 import useArchivedReportsIdSet from '@hooks/useArchivedReportsIdSet';
 import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails';
 import useLocalize from '@hooks/useLocalize';
 import useOnyx from '@hooks/useOnyx';
-import useActionLoadingReportIDs from '@hooks/useActionLoadingReportIDs';
 import useThemeStyles from '@hooks/useThemeStyles';
 import {selectFilteredReportActions} from '@libs/ReportUtils';
 import {getSections, getSortedSections} from '@libs/SearchUIUtils';

src/components/MultifactorAuthentication/Context/stateReducer.ts

@@ -1,5 +1,5 @@
-import CONST from '@src/CONST';
 import {MULTIFACTOR_AUTHENTICATION_SCENARIO_CONFIG} from '@components/MultifactorAuthentication/config';
+import CONST from '@src/CONST';
 import type {Action, MultifactorAuthenticationState} from './types';
 
 const DEFAULT_STATE: MultifactorAuthenticationState = {

src/components/MultifactorAuthentication/components/AuthenticationMethodDescription.tsx

@@ -3,9 +3,9 @@ import {useMultifactorAuthenticationState} from '@components/MultifactorAuthenti
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
+import {SECURE_STORE_VALUES} from '@libs/MultifactorAuthentication/Biometrics/SecureStore';
 import type {AuthTypeName} from '@libs/MultifactorAuthentication/Biometrics/types';
 import type {TranslationPaths} from '@src/languages/types';
-import {SECURE_STORE_VALUES} from '@libs/MultifactorAuthentication/Biometrics/SecureStore';
 
 /* eslint-disable @typescript-eslint/naming-convention */
 const AUTH_TYPE_TRANSLATION_KEY = {

src/components/Navigation/NavigationTabBar/SearchTabButton.tsx

@@ -4,9 +4,9 @@ import type {ValueOf} from 'type-fest';
 import Icon from '@components/Icon';
 import {PressableWithFeedback} from '@components/Pressable';
 import Text from '@components/Text';
+import useDefaultSearchQuery from '@hooks/useDefaultSearchQuery';
 import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
-import useDefaultSearchQuery from '@hooks/useDefaultSearchQuery';
 import useOnyx from '@hooks/useOnyx';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';

src/components/Navigation/NavigationTabBar/WorkspacesTabButton.tsx

@@ -15,11 +15,11 @@ import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWorkspacesTabIndicatorStatus from '@hooks/useWorkspacesTabIndicatorStatus';
 import navigateToWorkspacesPage, {getWorkspaceNavigationRouteState} from '@libs/Navigation/helpers/navigateToWorkspacesPage';
+import type {DomainSplitNavigatorParamList, WorkspaceSplitNavigatorParamList} from '@navigation/types';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import NAVIGATORS from '@src/NAVIGATORS';
 import ONYXKEYS from '@src/ONYXKEYS';
-import type {DomainSplitNavigatorParamList, WorkspaceSplitNavigatorParamList} from '@navigation/types';
 import type SCREENS from '@src/SCREENS';
 import type {Domain, Policy} from '@src/types/onyx';
 import getTabIconFill from './getTabIconFill';

src/components/ReportActionItem/MoneyRequestReceiptView.tsx

@@ -3,22 +3,25 @@ import React, {useMemo, useState} from 'react';
 import {View} from 'react-native';
 import type {StyleProp, ViewStyle} from 'react-native';
 import type {OnyxCollection, OnyxEntry} from 'react-native-onyx';
-import {ModalActions} from '@components/Modal/Global/ModalContext';
 import type {ValueOf} from 'type-fest';
+import {ModalActions} from '@components/Modal/Global/ModalContext';
 import OfflineWithFeedback from '@components/OfflineWithFeedback';
 import ReceiptAudit, {ReceiptAuditMessages} from '@components/ReceiptAudit';
 import ReceiptEmptyState from '@components/ReceiptEmptyState';
 import useActiveRoute from '@hooks/useActiveRoute';
+import useCardFeedErrors from '@hooks/useCardFeedErrors';
 import useConfirmModal from '@hooks/useConfirmModal';
 import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails';
 import useEnvironment from '@hooks/useEnvironment';
 import useGetIOUReportFromReportAction from '@hooks/useGetIOUReportFromReportAction';
 import useLocalize from '@hooks/useLocalize';
 import useOnyx from '@hooks/useOnyx';
+import useOriginalReportID from '@hooks/useOriginalReportID';
 import useReportIsArchived from '@hooks/useReportIsArchived';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useTransactionViolations from '@hooks/useTransactionViolations';
+import {getBrokenConnectionUrlToFixPersonalCard} from '@libs/CardUtils';
 import {getMicroSecondOnyxErrorWithTranslationKey, isReceiptError} from '@libs/ErrorUtils';
 import getNonEmptyStringOnyxID from '@libs/getNonEmptyStringOnyxID';
 import {getThumbnailAndImageURIs} from '@libs/ReceiptUtils';
@@ -53,9 +56,6 @@ import ROUTES from '@src/ROUTES';
 import type * as OnyxTypes from '@src/types/onyx';
 import type {TransactionPendingFieldsKey} from '@src/types/onyx/Transaction';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
-import useOriginalReportID from '@hooks/useOriginalReportID';
-import useCardFeedErrors from '@hooks/useCardFeedErrors';
-import {getBrokenConnectionUrlToFixPersonalCard} from '@libs/CardUtils';
 import ReportActionItemImage from './ReportActionItemImage';
 
 type MoneyRequestReceiptViewProps = {

src/components/ReportActionItem/MoneyRequestView.tsx

@@ -15,6 +15,7 @@ import Text from '@components/Text';
 import ViolationMessages from '@components/ViolationMessages';
 import {useWideRHPState} from '@components/WideRHPContextProvider';
 import useActiveRoute from '@hooks/useActiveRoute';
+import useCardFeedErrors from '@hooks/useCardFeedErrors';
 import {useCurrencyListActions} from '@hooks/useCurrencyList';
 import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails';
 import useEnvironment from '@hooks/useEnvironment';
@@ -23,9 +24,9 @@ import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
 import useOnyx from '@hooks/useOnyx';
 import usePermissions from '@hooks/usePermissions';
-import useReportAttributes from '@hooks/useReportAttributes';
 import usePolicyForMovingExpenses from '@hooks/usePolicyForMovingExpenses';
 import usePrevious from '@hooks/usePrevious';
+import useReportAttributes from '@hooks/useReportAttributes';
 import useReportIsArchived from '@hooks/useReportIsArchived';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useStyleUtils from '@hooks/useStyleUtils';
@@ -44,7 +45,6 @@ import DistanceRequestUtils from '@libs/DistanceRequestUtils';
 import getNonEmptyStringOnyxID from '@libs/getNonEmptyStringOnyxID';
 import {getRateFromMerchant} from '@libs/MergeTransactionUtils';
 import {hasEnabledOptions} from '@libs/OptionsListUtils';
-import useCardFeedErrors from '@hooks/useCardFeedErrors';
 import Parser from '@libs/Parser';
 import {
     canSubmitPerDiemExpenseFromWorkspace,

src/components/ReportActionItem/TransactionPreview/TransactionPreviewContent.tsx

@@ -11,6 +11,7 @@ import ReportActionItemImages from '@components/ReportActionItem/ReportActionIte
 import UserInfoCellsWithArrow from '@components/SelectionListWithSections/Search/UserInfoCellsWithArrow';
 import Text from '@components/Text';
 import TransactionPreviewSkeletonView from '@components/TransactionPreviewSkeletonView';
+import useCardFeedErrors from '@hooks/useCardFeedErrors';
 import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails';
 import useEnvironment from '@hooks/useEnvironment';
 import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
@@ -19,6 +20,7 @@ import useOnyx from '@hooks/useOnyx';
 import useReportIsArchived from '@hooks/useReportIsArchived';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
+import {getBrokenConnectionUrlToFixPersonalCard} from '@libs/CardUtils';
 import {getDecodedCategoryName} from '@libs/CategoryUtils';
 import {convertToDisplayString} from '@libs/CurrencyUtils';
 import getNonEmptyStringOnyxID from '@libs/getNonEmptyStringOnyxID';
@@ -39,8 +41,6 @@ import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
-import useCardFeedErrors from '@hooks/useCardFeedErrors';
-import {getBrokenConnectionUrlToFixPersonalCard} from '@libs/CardUtils';
 import type {TransactionPreviewContentProps} from './types';
 
 function TransactionPreviewContent({