dependencies: bump (major)

client/config/webpack.config.dev.js

@@ -1,5 +1,4 @@
 const path = require('path');
-const webpack = require('webpack');
 const ESLintPlugin = require('eslint-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
@@ -63,29 +62,19 @@ module.exports = {
       },
       {
         test: [/\.woff2$/],
-        loader: require.resolve('file-loader'),
-        options: {
-          name: 'static/media/[name].[hash:8].[ext]',
-        },
+        type: 'asset/resource',
       },
       {
         include: [/\.svg$/],
         issuer: /\.s?css$/,
-        loader: require.resolve('file-loader'),
-        options: {
-          name: 'static/media/[name].[hash:8].[ext]',
-        },
+        type: 'asset/resource',
       },
       // "url" loader works like "file" loader except that it embeds assets
       // smaller than specified limit in bytes as data URLs to avoid requests.
       // A missing `test` is equivalent to a match.
       {
         test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
-        loader: require.resolve('url-loader'),
-        options: {
-          limit: 10000,
-          name: 'static/media/[name].[hash:8].[ext]',
-        },
+        type: 'asset/resource',
       },
       // https://github.com/lingui/js-lingui/issues/1048
       {
@@ -111,6 +100,7 @@ module.exports = {
     filename: 'static/js/bundle.js',
     // There are also additional JS chunk files if you use code splitting.
     chunkFilename: 'static/js/[name].chunk.js',
+    assetModuleFilename: 'static/media/[name].[hash:8].[ext]',
   },
   plugins: [
     new ESLintPlugin({
@@ -123,8 +113,6 @@ module.exports = {
       inject: true,
       template: paths.appHtml,
     }),
-    // This is necessary to emit hot updates (currently CSS only):
-    new webpack.HotModuleReplacementPlugin(),
     new ReactRefreshWebpackPlugin(),
     // Watcher doesn't work well if you mistype casing in a path so we use
     // a plugin that prints an error when you attempt to do this.

client/config/webpack.config.prod.js

@@ -81,29 +81,19 @@ module.exports = {
       },
       {
         test: [/\.woff2$/],
-        loader: require.resolve('file-loader'),
-        options: {
-          name: 'static/media/[name].[hash:8].[ext]',
-        },
+        type: 'asset/resource',
       },
       {
         include: [/\.svg$/],
         issuer: /\.s?css$/,
-        loader: require.resolve('file-loader'),
-        options: {
-          name: 'static/media/[name].[hash:8].[ext]',
-        },
+        type: 'asset/resource',
       },
       // "url" loader works like "file" loader except that it embeds assets
       // smaller than specified limit in bytes as data URLs to avoid requests.
       // A missing `test` is equivalent to a match.
       {
         test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
-        loader: require.resolve('url-loader'),
-        options: {
-          limit: 10000,
-          name: 'static/media/[name].[hash:8].[ext]',
-        },
+        type: 'asset/resource',
       },
       // https://github.com/lingui/js-lingui/issues/1048
       {
@@ -128,6 +118,7 @@ module.exports = {
     // We don't currently advertise code splitting but Webpack supports it.
     filename: 'static/js/[name].[chunkhash:8].js',
     chunkFilename: 'static/js/[name].[chunkhash:8].chunk.js',
+    assetModuleFilename: 'static/media/[name].[hash:8].[ext]',
     // Point sourcemap entries to original disk location (format as URL on Windows)
     devtoolModuleFilenameTemplate: (info) => path.relative(paths.appSrc, info.absoluteResourcePath).replace(/\\/g, '/'),
   },

client/scripts/start.js → client/scripts/development.js

@@ -16,9 +16,9 @@ const clearConsole = require('react-dev-utils/clearConsole');
 const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
 const {choosePort, prepareUrls} = require('react-dev-utils/WebpackDevServerUtils');
 const openBrowser = require('react-dev-utils/openBrowser');
+const path = require('path');
 const paths = require('../../shared/config/paths');
 const config = require('../config/webpack.config.dev');
-const createDevServerConfig = require('../config/webpackDevServer.config');
 
 const {proxy: floodServerProxy} = require('yargs').env('FLOOD_OPTION_').option('proxy', {
   default: 'http://127.0.0.1:3000',
@@ -49,10 +49,39 @@ choosePort(HOST, DEFAULT_PORT)
     // Create a webpack compiler that is configured with custom messages.
     const compiler = webpack(config);
     // Serve webpack assets generated by the compiler over a web sever.
-    const serverConfig = createDevServerConfig(floodServerProxy, urls.lanUrlForConfig);
-    const devServer = new WebpackDevServer(compiler, serverConfig);
+    const devServer = new WebpackDevServer(
+      {
+        allowedHosts: urls.lanUrlForConfig,
+        compress: false,
+        static: [
+          {
+            directory: path.resolve(paths.appPublic),
+            staticOptions: {},
+            publicPath: '/',
+            serveIndex: true,
+            watch: {
+              ignored: /node_modules/,
+            },
+          },
+        ],
+        historyApiFallback: true,
+        proxy: {
+          '/api/': {
+            target: floodServerProxy,
+            changeOrigin: true,
+            secure: false,
+          },
+        },
+      },
+      compiler,
+    );
+
+    ['SIGINT', 'SIGTERM'].forEach((sig) => {
+      process.on(sig, () => devServer.stop().then(() => process.exit()));
+    });
+
     // Launch WebpackDevServer.
-    devServer.listen(port, HOST, (err) => {
+    return devServer.start(port, HOST, (err) => {
       if (err) {
         return console.log(err);
       }
@@ -62,13 +91,6 @@ choosePort(HOST, DEFAULT_PORT)
       console.log(chalk.cyan('Starting the development server...\n'));
       openBrowser(urls.localUrlForBrowser);
     });
-
-    ['SIGINT', 'SIGTERM'].forEach((sig) => {
-      process.on(sig, () => {
-        devServer.close();
-        process.exit();
-      });
-    });
   })
   .catch((err) => {
     if (err && err.message) {

client/src/javascript/components/modals/add-torrents-modal/AddTorrentsByURL.tsx

@@ -55,11 +55,7 @@ const AddTorrentsByURL: FC = () => {
                 type="button"
                 onClick={() => {
                   if (typeof navigator.registerProtocolHandler === 'function') {
-                    navigator.registerProtocolHandler(
-                      'magnet',
-                      `${ConfigStore.baseURI}?action=add-urls&url=%s`,
-                      'Magnet -> Flood',
-                    );
+                    navigator.registerProtocolHandler('magnet', `${ConfigStore.baseURI}?action=add-urls&url=%s`);
                   }
                 }}>
                 <em css={{fontSize: '0.8em'}}>{i18n._('torrents.add.tab.url.register.magnet.handler')}</em>

client/src/javascript/components/torrent-list/TorrentListContextMenu.tsx

@@ -32,7 +32,7 @@ const InlineTorrentPropertyCheckbox: FC<{property: keyof TorrentProperties}> = o
   ),
 );
 
-const getContextMenuItems = (torrent: TorrentProperties): Array<ContextMenuItem> => {
+export const getContextMenuItems = (torrent: TorrentProperties): Array<ContextMenuItem> => {
   const changePriorityFuncRef = createRef<() => number>();
 
   return [
@@ -228,7 +228,3 @@ const getContextMenuItems = (torrent: TorrentProperties): Array<ContextMenuItem>
     },
   ];
 };
-
-export default {
-  getContextMenuItems,
-};

client/src/javascript/components/torrent-list/TorrentListRow.tsx

@@ -6,8 +6,8 @@ import {useLongPress} from 'react-use';
 
 import defaultFloodSettings from '@shared/constants/defaultFloodSettings';
 
+import {getContextMenuItems} from './TorrentListContextMenu';
 import SettingStore from '../../stores/SettingStore';
-import TorrentListContextMenu from './TorrentListContextMenu';
 import TorrentListRowCondensed from './TorrentListRowCondensed';
 import TorrentListRowExpanded from './TorrentListRowExpanded';
 import {torrentStatusClasses} from '../../util/torrentStatus';
@@ -37,7 +37,7 @@ const displayContextMenu = (hash: string, event: KeyboardEvent | MouseEvent | To
       x: mouseClientX || touchClientX || 0,
       y: mouseClientY || touchClientY || 0,
     },
-    items: TorrentListContextMenu.getContextMenuItems(torrent).filter((item) => {
+    items: getContextMenuItems(torrent).filter((item) => {
       if (item.type === 'separator') {
         return true;
       }

client/src/javascript/ui/components/ContextMenu.tsx

@@ -3,7 +3,6 @@ import classnames from 'classnames';
 import {CSSProperties, forwardRef, MouseEvent, ReactNode, RefObject} from 'react';
 
 import Overlay from './Overlay';
-import transitionTimeouts from '../constants/transitionTimeouts';
 
 import type {OverlayProps} from './Overlay';
 
@@ -120,7 +119,7 @@ const ContextMenu = forwardRef<HTMLDivElement, ContextMenuProps>(
         in={isIn}
         mountOnEnter
         unmountOnExit
-        timeout={transitionTimeouts.xFast}>
+        timeout={250}>
         <div className="context-menu" onClick={onClick} role="none">
           <Overlay
             additionalClassNames="context-menu__overlay"