Merge pull request #1660 from FreeFeed/update-all

Update most dependencies to their latest versions

package.json

@@ -7,45 +7,46 @@
     "@fortawesome/free-brands-svg-icons": "~5.15.4",
     "@fortawesome/free-regular-svg-icons": "~5.15.4",
     "@fortawesome/free-solid-svg-icons": "~5.15.4",
-    "@sentry/react": "~7.90.0",
+    "@sentry/react": "~7.91.0",
     "autotrack": "~2.4.1",
-    "classnames": "~2.3.2",
+    "classnames": "~2.4.0",
     "custom-event": "~1.0.1",
-    "date-fns": "~2.30.0",
+    "date-fns": "~3.0.6",
     "debug": "~4.3.4",
     "events": "~3.3.0",
-    "filesize": "~8.0.7",
+    "filesize": "~10.1.0",
     "final-form": "~4.20.10",
-    "focus-trap-react": "~8.9.2",
+    "focus-trap-react": "~10.2.3",
     "focus-visible": "~5.2.0",
-    "iso-639-1": "~2.1.15",
+    "iso-639-1": "~3.1.0",
     "keycode-js": "~3.1.0",
     "local-storage-fallback": "~4.1.2",
     "lodash-es": "~4.17.21",
-    "lru-cache": "~7.14.1",
+    "lru-cache": "~10.1.0",
     "memoize-one": "~6.0.0",
     "mousetrap": "~1.6.5",
     "porter-stemmer": "~0.9.1",
     "prop-types": "~15.8.1",
     "react": "~17.0.2",
     "react-dom": "~17.0.2",
     "react-final-form-hooks": "~2.0.2",
-    "react-google-recaptcha": "~2.1.0",
+    "react-google-recaptcha": "~3.1.0",
     "react-helmet": "~6.1.0",
     "react-photoswipe": "~1.3.0",
     "react-portal": "~4.2.2",
-    "react-redux": "~7.2.9",
+    "react-redux": "~8.1.3",
     "react-router": "~3.2.6",
     "react-router-redux": "~4.0.8",
     "react-select": "~5.8.0",
-    "react-sortablejs": "~2.0.11",
+    "react-sortablejs": "~6.1.4",
     "react-textarea-autosize": "~8.5.3",
     "recharts": "~2.10.3",
-    "redux": "~4.2.1",
+    "redux": "~5.0.1",
     "snarkdown": "~2.0.0",
     "social-text-tokenizer": "~3.0.0",
     "socket.io-client": "~2.3.1",
-    "tabbable": "~5.2.1",
+    "sortablejs": "~1.15.1",
+    "tabbable": "~6.2.0",
     "ua-parser-js": "~1.0.37",
     "use-subscription": "~1.8.0",
     "validator": "~13.11.0",
@@ -57,9 +58,9 @@
     "@babel/eslint-parser": "~7.23.3",
     "@babel/preset-react": "~7.23.3",
     "@gfx/zopfli": "~1.0.15",
-    "@testing-library/jest-dom": "~5.16.5",
+    "@testing-library/jest-dom": "~6.1.5",
     "@testing-library/react": "~12.1.5",
-    "@testing-library/react-hooks": "~7.0.2",
+    "@testing-library/react-hooks": "~8.0.1",
     "@testing-library/user-event": "~14.5.1",
     "@vitejs/plugin-legacy": "~5.2.0",
     "@vitejs/plugin-react-swc": "^3.5.0",
@@ -70,42 +71,37 @@
     "eslint-plugin-babel": "~5.3.1",
     "eslint-plugin-import": "~2.29.1",
     "eslint-plugin-lodash": "~7.4.0",
-    "eslint-plugin-prettier": "~5.1.1",
+    "eslint-plugin-prettier": "~5.1.2",
     "eslint-plugin-promise": "~6.1.1",
     "eslint-plugin-react": "~7.33.2",
     "eslint-plugin-react-hooks": "~4.6.0",
-    "eslint-plugin-unicorn": "~48.0.1",
+    "eslint-plugin-unicorn": "~50.0.1",
     "eslint-plugin-you-dont-need-lodash-underscore": "~6.13.0",
     "husky": "~8.0.3",
-    "jsdom": "~22.1.0",
-    "lint-staged": "~12.4.3",
-    "node-html-parser": "~6.1.11",
+    "jsdom": "~23.0.1",
+    "lint-staged": "~15.2.0",
+    "node-html-parser": "~6.1.12",
     "npm-run-all": "~4.1.5",
     "prettier": "~3.1.1",
     "querystring": "~0.2.1",
     "react-test-renderer": "~17.0.2",
     "rimraf": "~5.0.5",
     "sass": "^1.69.5",
-    "sinon": "~13.0.2",
-    "stylelint": "~15.11.0",
+    "sinon": "~17.0.1",
+    "stylelint": "~16.1.0",
     "stylelint-config-prettier": "~9.0.5",
-    "stylelint-config-standard-scss": "~11.1.0",
-    "stylelint-prettier": "~4.0.2",
-    "stylelint-scss": "~5.3.2",
+    "stylelint-config-standard-scss": "~12.0.0",
+    "stylelint-prettier": "~5.0.0",
+    "stylelint-scss": "~6.0.0",
     "terser": "~5.26.0",
-    "unexpected": "~13.1.0",
+    "unexpected": "~13.2.1",
     "unexpected-react": "~6.0.2",
     "unexpected-sinon": "~11.1.0",
     "url": "~0.11.3",
     "vite": "~5.0.10",
     "vite-plugin-compression": "~0.5.1",
     "vite-plugin-generate-file": "~0.1.1",
-    "vitest": "~0.34.6"
-  },
-  "resolutions": {
-    "debug": "~4.3.4",
-    "focus-trap": "~6.7.3",
-    "tabbable": "~5.2.1"
+    "vitest": "~1.1.0"
   },
   "scripts": {
     "start": "vite",

src/components/color-theme-setter.jsx

@@ -7,7 +7,10 @@ import { darkTheme as selectDarkTheme } from './select-utils';
 export function ColorSchemeSetter() {
   const darkTheme = useSelector(selectDarkTheme);
 
-  useEffect(() => document.documentElement.classList.toggle('dark-theme', darkTheme), [darkTheme]);
+  useEffect(
+    () => void document.documentElement.classList.toggle('dark-theme', darkTheme),
+    [darkTheme],
+  );
 
   return (
     <Helmet defer={false}>

src/components/link-preview/helpers/size-cache.js

@@ -1,11 +1,11 @@
 import { debounce } from 'lodash-es';
-import LRU from 'lru-cache';
+import { LRUCache } from 'lru-cache';
 
 const lsKey = 'previewSize';
 const lruSize = 500;
 const lruSaveTimeout = 10000;
 
-const lru = new LRU({ max: lruSize });
+const lru = new LRUCache({ max: lruSize });
 
 try {
   const stored = localStorage.getItem(lsKey);

src/components/overlay-popup.jsx

@@ -52,9 +52,10 @@ export function OverlayPopup({
     };
   }, []);
 
+  // Turn FocusTrap off in 'test' mode
   return (
     <Portal>
-      <FocusTrap>
+      <FocusTrap active={process.env.NODE_ENV !== 'test'}>
         <div className={styles.popup} ref={panel}>
           <div className={styles.content} ref={content}>
             {close && (

src/components/post/post-attachment-image-container.jsx

@@ -12,13 +12,10 @@ const bordersSize = 4;
 const spaceSize = 8;
 const arrowSize = 24;
 
-const Sortable = lazyComponent(
-  () => import('react-sortablejs').then((m) => ({ default: m.ReactSortable })),
-  {
-    fallback: <div>Loading component...</div>,
-    errorMessage: "Couldn't load Sortable component",
-  },
-);
+const Sortable = lazyComponent(() => import('../react-sortable'), {
+  fallback: <div>Loading component...</div>,
+  errorMessage: "Couldn't load Sortable component",
+});
 
 export default class ImageAttachmentsContainer extends Component {
   static propTypes = {

src/components/post/post-comments/comment-spacer.jsx

@@ -1,6 +1,6 @@
 import classnames from 'classnames';
 import { faClock } from '@fortawesome/free-regular-svg-icons';
-import formatDistance from 'date-fns/formatDistance';
+import { formatDistance } from 'date-fns/formatDistance';
 
 import { Icon } from '../../fontawesome-icons';
 

src/components/react-sortable.jsx

@@ -0,0 +1,4 @@
+import { ReactSortable } from 'react-sortablejs';
+
+// Re-exporting ReactSortable because of weird error in Vite's development mode
+export default ReactSortable;

src/components/settings/forms/ext-auth-accounts.jsx

@@ -1,6 +1,6 @@
 /* global CONFIG */
 import { memo, useEffect, useCallback, useMemo } from 'react';
-import { useSelector, useDispatch } from 'react-redux';
+import { useSelector, useDispatch, shallowEqual } from 'react-redux';
 
 import { faTimes, faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
 import {
@@ -20,10 +20,12 @@ export default function ExtAuthForm() {
   const [providers] = useExtAuthProviders();
   const serverInfoStatus = useSelector((state) => state.serverInfoStatus);
   const existingProfilesStatus = useSelector((state) => state.extAuth.profilesStatus);
-  const existingProfiles = useSelector(({ extAuth: { profiles, providers } }) =>
-    profiles
-      .filter((p) => providers.some((xp) => xp.id === p.provider))
-      .map((p) => ({ ...p, provider: providers.find((xp) => xp.id === p.provider) })),
+  const existingProfiles = useSelector(
+    ({ extAuth: { profiles, providers } }) =>
+      profiles
+        .filter((p) => providers.some((xp) => xp.id === p.provider))
+        .map((p) => ({ ...p, provider: providers.find((xp) => xp.id === p.provider) })),
+    shallowEqual,
   );
 
   const loadStatus = useMemo(

src/components/sidebar-homefeeds.jsx

@@ -22,8 +22,8 @@ export const SidebarHomeFeeds = memo(function SidebarHomeFeeds({ homeFeedsCount
   );
   useEffect(
     () =>
-      void import(/* webpackPrefetch: true */ 'react-sortablejs').then(
-        (m) => setSortable(() => m.ReactSortable),
+      void import('./react-sortable').then(
+        (m) => setSortable(() => m.default),
         // eslint-disable-next-line no-console
         (err) => console.warn(`Cannot load 'react-sortablejs'`, err),
       ),

src/components/stats.jsx

@@ -10,8 +10,8 @@ import {
   Tooltip,
 } from 'recharts';
 
-import startOfYesterday from 'date-fns/startOfYesterday';
-import subYears from 'date-fns/subYears';
+import { startOfYesterday } from 'date-fns/startOfYesterday';
+import { subYears } from 'date-fns/subYears';
 import { format } from '../utils/date-format';
 
 function StatsChart({ type, title }) {

src/components/time-display.jsx

@@ -3,10 +3,10 @@ import { useEffect, memo } from 'react';
 import { useSelector } from 'react-redux';
 import pt from 'prop-types';
 
-import toDate from 'date-fns/toDate';
-import addMilliseconds from 'date-fns/addMilliseconds';
-import startOfDay from 'date-fns/startOfDay';
-import addMinutes from 'date-fns/addMinutes';
+import { toDate } from 'date-fns/toDate';
+import { addMilliseconds } from 'date-fns/addMilliseconds';
+import { startOfDay } from 'date-fns/startOfDay';
+import { addMinutes } from 'date-fns/addMinutes';
 
 import { format } from '../utils/date-format';
 import { useBool } from './hooks/bool';

src/components/user-profile-head.jsx

@@ -56,6 +56,8 @@ const UserSubscriptionEditPopup = lazyComponent(
   },
 );
 
+const emptyArray = [];
+
 export const UserProfileHead = withRouter(
   withKey(({ router }) => router.params.userName)(function UserProfileHead({ router }) {
     const username = router.params.userName.toLowerCase();
@@ -74,7 +76,7 @@ export const UserProfileHead = withRouter(
 
     const allHomeFeeds = useSelector((state) => state.homeFeeds);
     const allHomeFeedsStatus = useSelector((state) => state.homeFeedsStatus);
-    const inHomeFeeds = useSelector((state) => state.usersInHomeFeeds[user?.id] || []);
+    const inHomeFeeds = useSelector((state) => state.usersInHomeFeeds[user?.id] || emptyArray);
     const activeHomeFeeds = allHomeFeeds.filter((h) => inHomeFeeds.includes(h.id));
 
     const inHomeFeedsStatus = useSelector(