Merge branch 'main' into mkzie2-issue/66714

Author: mkzie2

config/webpack/ForceGarbageCollectionPlugin.ts

@@ -0,0 +1,41 @@
+/* eslint-disable no-console */
+import type {Compiler} from 'webpack';
+
+/**
+ * Custom webpack plugin that forces garbage collection every 5 compilations
+ * and logs memory usage to help monitor memory consumption during development.
+ *
+ * Note: Requires Node.js to be started with --expose-gc flag to enable garbage collection.
+ */
+class ForceGarbageCollectionPlugin {
+    private compilationCount = 0;
+
+    apply(compiler: Compiler) {
+        if (gc && typeof gc === 'function') {
+            compiler.hooks.done.tap(this.constructor.name, () => {
+                this.compilationCount++;
+
+                // Log memory usage every compilation
+                const memUsage = process.memoryUsage();
+                const heapUsedMB = Math.round(memUsage.heapUsed / 1024 / 1024);
+                const heapTotalMB = Math.round(memUsage.heapTotal / 1024 / 1024);
+
+                console.log(`📊 Compilation #${this.compilationCount} - Heap: ${heapUsedMB}MB/${heapTotalMB}MB`);
+                if (this.compilationCount % 5 === 0) {
+                    console.log(`🗑️ Forcing garbage collection after ${this.compilationCount} compilations`);
+                    // @ts-expect-error - gc is a global function provided when Node.js is started with --expose-gc flag
+                    gc();
+
+                    // Log memory after garbage collection
+                    const memAfterGC = process.memoryUsage();
+                    const heapAfterMB = Math.round(memAfterGC.heapUsed / 1024 / 1024);
+                    console.log(`✅ Post-GC heap size: ${heapAfterMB}MB (freed ${heapUsedMB - heapAfterMB}MB)`);
+                }
+            });
+        } else {
+            console.warn('⚠️ ForceGarbageCollectionPlugin: gc() function not available. Start Node.js with --expose-gc flag to enable garbage collection.');
+        }
+    }
+}
+
+export default ForceGarbageCollectionPlugin;

config/webpack/webpack.common.ts

@@ -7,6 +7,7 @@ import type {Configuration} from 'webpack';
 import {DefinePlugin} from 'webpack';
 import type {Configuration as DevServerConfiguration} from 'webpack-dev-server';
 import {merge} from 'webpack-merge';
+import ForceGarbageCollectionPlugin from './ForceGarbageCollectionPlugin';
 import type Environment from './types';
 import getCommonConfiguration from './webpack.common';
 
@@ -65,6 +66,7 @@ const getConfiguration = (environment: Environment): Promise<Configuration> =>
                     'process.env.NODE_ENV': JSON.stringify('development'),
                 }),
                 new ReactRefreshWebpackPlugin({overlay: {sockProtocol: 'wss'}}),
+                new ForceGarbageCollectionPlugin(),
             ],
             // This prevents import error coming from react-native-tab-view/lib/module/TabView.js
             // where Pager is imported without extension due to having platform-specific implementations

config/webpack/webpack.dev.ts

@@ -12,7 +12,7 @@ portfinder
         port: basePort,
     })
     .then((port) => {
-        const devServer = `webpack-dev-server --config config/webpack/webpack.dev.ts --port ${port} --env platform=desktop`;
+        const devServer = `./scripts/start-dev-with-auto-restart.sh --port ${port} --env platform=desktop`;
         const buildMain = 'webpack watch --config config/webpack/webpack.desktop.ts --config-name desktop-main --mode=development';
 
         const env = {

desktop/start.ts

@@ -28,7 +28,7 @@
     "start": "npx rnef start",
     "web": "./scripts/set-pusher-suffix.sh && concurrently npm:web-proxy npm:web-server",
     "web-proxy": "ts-node web/proxy.ts",
-    "web-server": "webpack-dev-server --open --config config/webpack/webpack.dev.ts",
+    "web-server": "./scripts/start-dev-with-auto-restart.sh",
     "build": "webpack --config config/webpack/webpack.common.ts --env file=.env.production && ts-node ./scripts/combine-web-sourcemaps.ts",
     "build-staging": "webpack --config config/webpack/webpack.common.ts --env file=.env.staging && ts-node ./scripts/combine-web-sourcemaps.ts",
     "build-adhoc": "webpack --config config/webpack/webpack.common.ts --env file=.env.adhoc && ts-node ./scripts/combine-web-sourcemaps.ts",
@@ -46,7 +46,7 @@
     "test:debug": "TZ=utc NODE_OPTIONS='--inspect-brk --experimental-vm-modules' jest --runInBand",
     "perf-test": "NODE_OPTIONS=--experimental-vm-modules npx reassure",
     "typecheck": "NODE_OPTIONS=--max_old_space_size=8192 tsc",
-    "lint": "NODE_OPTIONS=--max_old_space_size=8192 eslint . --max-warnings=324 --cache --cache-location=node_modules/.cache/eslint",
+    "lint": "NODE_OPTIONS=--max_old_space_size=8192 eslint . --max-warnings=332 --cache --cache-location=node_modules/.cache/eslint",
     "lint-changed": "NODE_OPTIONS=--max_old_space_size=8192 ./scripts/lintChanged.sh",
     "lint-watch": "npx eslint-watch --watch --changed",
     "shellcheck": "./scripts/shellCheck.sh",

package.json

@@ -0,0 +1,58 @@
+#!/bin/bash
+
+# Auto-restart webpack-dev-server on memory crashes
+# This script monitors for heap out of memory errors and automatically restarts
+# Usage: ./start-dev-with-auto-restart.sh [webpack-dev-server arguments]
+
+WDS_ARGS=("$@")
+MAX_RESTARTS=10
+RESTART_COUNT=0
+RESTART_DELAY=1
+
+echo "🚀 Starting webpack-dev-server with auto-restart (max restarts: $MAX_RESTARTS)"
+
+run_wds () {
+    # Check if platform is Desktop to determine open behavior
+    if [[ "${WDS_ARGS[*]}" == *"--env platform=desktop"* ]]; then
+        # For Desktop, always use --no-open since app is handled by Electron
+        node --expose-gc --max-old-space-size=1100 ./node_modules/.bin/webpack-dev-server --no-open "${WDS_ARGS[@]}" --config config/webpack/webpack.dev.ts
+    else
+        # For Web, use the provided open flag
+        node --expose-gc ./node_modules/.bin/webpack-dev-server "$1" "${WDS_ARGS[@]}" --config config/webpack/webpack.dev.ts
+    fi
+}
+
+while [ $RESTART_COUNT -lt $MAX_RESTARTS ]; do
+    echo "📊 Attempt #$((RESTART_COUNT + 1)) - Starting webpack-dev-server..."
+    
+    if [ $RESTART_COUNT -eq 0 ]; then
+        run_wds --open
+    else
+        run_wds --no-open
+    fi
+    
+    # Capture exit code
+    EXIT_CODE=$?
+    # Check if it was a memory-related crash
+    if [ $EXIT_CODE -eq 134 ] || [ $EXIT_CODE -eq 137 ] || [ $EXIT_CODE -eq 139 ]; then
+        echo "💥 Memory crash detected (exit code: $EXIT_CODE)"
+        RESTART_COUNT=$((RESTART_COUNT + 1))
+        
+        if [ $RESTART_COUNT -lt $MAX_RESTARTS ]; then
+            echo "🔄 Auto-restarting... (restart #$RESTART_COUNT)"
+            sleep $RESTART_DELAY
+        else
+            echo "❌ Max restarts reached ($MAX_RESTARTS). Exiting."
+            exit 1
+        fi
+    elif [ $EXIT_CODE -eq 0 ]; then
+        echo "✅ Webpack-dev-server exited cleanly"
+        exit 0
+    else
+        echo "❌ Webpack-dev-server exited with error code: $EXIT_CODE"
+        exit $EXIT_CODE
+    fi
+done
+
+echo "❌ Maximum restart attempts reached. Please check for underlying issues."
+exit 1

scripts/start-dev-with-auto-restart.sh

@@ -3186,6 +3186,7 @@ const CONST = {
         },
         LIMIT_VALUE: 21474836,
         STEP_NAMES: ['1', '2', '3', '4', '5', '6'],
+        ASSIGNEE_EXCLUDED_STEP_NAMES: ['1', '2', '3', '4', '5'],
         STEP: {
             ASSIGNEE: 'Assignee',
             CARD_TYPE: 'CardType',

src/CONST/index.ts

@@ -15,6 +15,7 @@ function CurrencySelectionList({
     searchInputLabel,
     initiallySelectedCurrencyCode,
     onSelect,
+    didScreenTransitionEnd = true,
     selectedCurrencies = [],
     canSelectMultiple = false,
     recentlyUsedCurrencies,
@@ -109,6 +110,7 @@ function CurrencySelectionList({
             initiallyFocusedOptionKey={initiallySelectedCurrencyCode}
             showScrollIndicator
             canSelectMultiple={canSelectMultiple}
+            showLoadingPlaceholder={!didScreenTransitionEnd}
         />
     );
 }

src/components/CurrencySelectionList/index.tsx

@@ -26,6 +26,9 @@ type CurrencySelectionListProps = Partial<SelectionListProps<CurrencyListItem>>
 
     /** List of excluded currency codes */
     excludedCurrencies?: string[];
+
+    /** Whether the screen transition has ended */
+    didScreenTransitionEnd?: boolean;
 };
 
 export type {CurrencyListItem, CurrencySelectionListProps};

src/components/CurrencySelectionList/types.ts

@@ -103,7 +103,7 @@ function MoneyRequestReportTransactionList({
     useCopySelectionHelper();
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
-    const {translate} = useLocalize();
+    const {translate, localeCompare} = useLocalize();
     // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth
     const {shouldUseNarrowLayout, isSmallScreenWidth, isMediumScreenWidth} = useResponsiveLayout();
     const [isModalVisible, setIsModalVisible] = useState(false);
@@ -157,12 +157,12 @@ function MoneyRequestReportTransactionList({
 
     const sortedTransactions: TransactionWithOptionalHighlight[] = useMemo(() => {
         return [...transactions]
-            .sort((a, b) => compareValues(a[getTransactionKey(a, sortBy)], b[getTransactionKey(b, sortBy)], sortOrder, sortBy))
+            .sort((a, b) => compareValues(a[getTransactionKey(a, sortBy)], b[getTransactionKey(b, sortBy)], sortOrder, sortBy, localeCompare))
             .map((transaction) => ({
                 ...transaction,
                 shouldBeHighlighted: newTransactions?.includes(transaction),
             }));
-    }, [newTransactions, sortBy, sortOrder, transactions]);
+    }, [newTransactions, sortBy, sortOrder, transactions, localeCompare]);
 
     const navigateToTransaction = useCallback(
         (activeTransactionID: string) => {