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'),
+        type: 'asset/resource',
-        options: {
-          name: 'static/media/[name].[hash:8].[ext]',
-        },
       },
       {
         include: [/\.svg$/],
         issuer: /\.s?css$/,
-        loader: require.resolve('file-loader'),
+        type: 'asset/resource',
-        options: {
-          name: 'static/media/[name].[hash:8].[ext]',
-        },
       },
       // "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'),
+        type: 'asset/resource',
-        options: {
-          limit: 10000,
-          name: 'static/media/[name].[hash:8].[ext]',
-        },
       },
       // 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'),
+        type: 'asset/resource',
-        options: {
-          name: 'static/media/[name].[hash:8].[ext]',
-        },
       },
       {
         include: [/\.svg$/],
         issuer: /\.s?css$/,
-        loader: require.resolve('file-loader'),
+        type: 'asset/resource',
-        options: {
-          name: 'static/media/[name].[hash:8].[ext]',
-        },
       },
       // "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'),
+        type: 'asset/resource',
-        options: {
-          limit: 10000,
-          name: 'static/media/[name].[hash:8].[ext]',
-        },
       },
       // 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/config/webpackDevServer.config.js

@@ -1,35 +0,0 @@
-const path = require('path');
-const paths = require('../../shared/config/paths');
-
-const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
-const host = process.env.HOST || '0.0.0.0';
-
-const generateConfig = (proxy, allowedHost) => {
-  return {
-    allowedHosts: allowedHost,
-    compress: false,
-    static: [
-      {
-        directory: path.resolve(paths.appPublic),
-        staticOptions: {},
-        publicPath: '/',
-        serveIndex: true,
-        watch: {
-          ignored: /node_modules/,
-        },
-      },
-    ],
-    https: protocol === 'https',
-    host,
-    historyApiFallback: true,
-    proxy: {
-      '/api/': {
-        target: proxy,
-        changeOrigin: true,
-        secure: false,
-      },
-    },
-  };
-};
-
-module.exports = generateConfig;

client/scripts/deprecated-warning.js

@@ -1,47 +0,0 @@
-const chalk = require('chalk');
-
-const messageDefs = [
-  {
-    chalkStyles: ['black'],
-    message: 'This npm script has been deprecated!',
-  },
-  {
-    chalkStyles: ['underline', 'black'],
-    message: `Use npm script \`${process.env.UPDATED_SCRIPT}\` instead.`,
-  },
-];
-const longestMessageLength = messageDefs.reduce((accumulator, messageDef) => {
-  if (messageDef.message.length > accumulator) {
-    accumulator = messageDef.message.length;
-  }
-
-  return accumulator;
-}, 0);
-const paddingLength = 5;
-const verticalPadding = paddingLength * 2 + longestMessageLength - 1;
-const getSpaces = (numSpaces) => Array(numSpaces).join(' ');
-
-console.log('\n');
-console.log(chalk.bgRed(getSpaces(verticalPadding)));
-messageDefs.forEach((messageDef) => {
-  let leftPadding = paddingLength;
-  let rightPadding = paddingLength;
-  const lengthDiff = longestMessageLength - messageDef.message.length;
-
-  if (lengthDiff > 0) {
-    const modifier = lengthDiff % 2 > 0 ? 1 : 0;
-    const padding = paddingLength + Math.floor(lengthDiff / 2);
-
-    leftPadding = padding;
-    rightPadding = padding + modifier;
-  }
-
-  const formattedMessage = messageDef.chalkStyles.reduce(
-    (accumulator, styleFn) => chalk[styleFn](accumulator),
-    messageDef.message,
-  );
-
-  console.log(chalk.bgRed(`${getSpaces(leftPadding)}${formattedMessage}${getSpaces(rightPadding)}`));
-});
-console.log(chalk.bgRed(getSpaces(verticalPadding)));
-console.log('\n');

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(
-    const devServer = new WebpackDevServer(compiler, serverConfig);
+      {
+        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(
+                    navigator.registerProtocolHandler('magnet', `${ConfigStore.baseURI}?action=add-urls&url=%s`);
-                      'magnet',
-                      `${ConfigStore.baseURI}?action=add-urls&url=%s`,
-                      'Magnet -> Flood',
-                    );
                   }
                 }}>
                 <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"

client/src/javascript/ui/constants/transitionTimeouts.tsx

@@ -1,11 +0,0 @@
-// Transition timeout parity with Sass variables.
-
-export default {
-  xxSlow: (7 / 8) * 1000,
-  xSlow: (3 / 4) * 1000,
-  slow: (5 / 8) * 1000,
-  medium: (1 / 2) * 1000,
-  fast: (3 / 8) * 1000,
-  xFast: (1 / 4) * 1000,
-  xxFast: (1 / 8) * 1000,
-};

package.json

@@ -58,7 +58,7 @@
     "lint": "NODE_ENV=development eslint --max-warnings 0 . --ext .js --ext .jsx --ext .ts --ext .tsx",
     "prepack": "rm -rf dist && npm run build",
     "start": "node --use_strict dist/index.js",
-    "start:development:client": "node client/scripts/start.js",
+    "start:development:client": "node client/scripts/development.js",
     "start:development:server": "NODE_ENV=development TS_NODE_PROJECT=server/tsconfig.json ts-node-dev --transpile-only -r tsconfig-paths/register server/bin/start.ts",
     "start:test:rtorrent": "node scripts/testsetup.js",
     "test": "jest --forceExit",
@@ -66,29 +66,29 @@
     "test:client": "FLOOD_OPTION_port=4200 start-server-and-test start 4200 'cypress run'"
   },
   "dependencies": {
-    "geoip-country": "^4.0.80"
+    "geoip-country": "^4.0.84"
   },
   "devDependencies": {
-    "@babel/core": "^7.14.8",
+    "@babel/core": "^7.15.5",
     "@babel/plugin-proposal-class-properties": "^7.14.5",
-    "@babel/plugin-proposal-decorators": "^7.14.5",
+    "@babel/plugin-proposal-decorators": "^7.15.4",
     "@babel/plugin-proposal-optional-chaining": "^7.14.5",
-    "@babel/preset-env": "^7.14.9",
+    "@babel/preset-env": "^7.15.4",
     "@babel/preset-react": "^7.14.5",
-    "@babel/preset-typescript": "^7.14.5",
+    "@babel/preset-typescript": "^7.15.0",
     "@emotion/babel-plugin": "^11.3.0",
     "@emotion/css": "^11.1.3",
-    "@emotion/react": "^11.4.0",
+    "@emotion/react": "^11.4.1",
     "@lingui/loader": "^3.10.2",
     "@lingui/react": "^3.10.2",
-    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.0-rc.2",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.0-rc.6",
     "@types/bencode": "^2.0.0",
     "@types/body-parser": "^1.19.1",
     "@types/classnames": "^2.3.0",
     "@types/compression": "^1.7.1",
     "@types/content-disposition": "^0.5.4",
     "@types/cookie-parser": "^1.4.2",
-    "@types/create-torrent": "^4.4.1",
+    "@types/create-torrent": "^5.0.0",
     "@types/d3": "^7.0.0",
     "@types/debug": "^4.1.7",
     "@types/express": "^4.17.13",
@@ -96,16 +96,16 @@
     "@types/fs-extra": "^9.0.12",
     "@types/geoip-country": "^4.0.0",
     "@types/http-errors": "^1.8.1",
-    "@types/jest": "^26.0.24",
+    "@types/jest": "^27.0.1",
-    "@types/jsonwebtoken": "^8.5.4",
+    "@types/jsonwebtoken": "^8.5.5",
     "@types/lodash": "^4.14.172",
     "@types/morgan": "^1.9.3",
-    "@types/node": "^12.20.18",
+    "@types/node": "^12.20.23",
     "@types/overlayscrollbars": "^1.12.1",
     "@types/parse-torrent": "^5.8.4",
     "@types/passport": "^1.0.7",
     "@types/passport-jwt": "^3.0.6",
-    "@types/react": "^17.0.15",
+    "@types/react": "^17.0.20",
     "@types/react-dom": "^17.0.9",
     "@types/react-measure": "^2.0.7",
     "@types/react-router-dom": "^5.1.8",
@@ -115,11 +115,11 @@
     "@types/supertest": "^2.0.11",
     "@types/tar-fs": "^2.0.1",
     "@types/tar-stream": "^2.2.1",
-    "@typescript-eslint/eslint-plugin": "^4.29.0",
+    "@typescript-eslint/eslint-plugin": "^4.30.0",
-    "@typescript-eslint/parser": "^4.29.0",
+    "@typescript-eslint/parser": "^4.30.0",
-    "@vercel/ncc": "^0.29.0",
+    "@vercel/ncc": "^0.30.0",
-    "autoprefixer": "^10.3.1",
+    "autoprefixer": "^10.3.4",
-    "axios": "^0.21.1",
+    "axios": "^0.21.3",
     "babel-eslint": "^10.1.0",
     "babel-loader": "^8.2.2",
     "bencode": "^2.0.2",
@@ -130,30 +130,30 @@
     "compression": "^1.7.4",
     "content-disposition": "^0.5.3",
     "cookie-parser": "^1.4.5",
-    "create-torrent": "^4.7.1",
+    "create-torrent": "^5.0.1",
     "css-loader": "^6.2.0",
     "css-minimizer-webpack-plugin": "^3.0.2",
-    "d3-array": "^3.0.1",
+    "d3-array": "^3.0.2",
     "d3-scale": "^4.0.0",
     "d3-selection": "^3.0.0",
     "d3-shape": "^3.0.1",
     "debug": "^4.3.2",
     "eslint": "^7.32.0",
     "eslint-config-airbnb": "^18.2.1",
-    "eslint-config-airbnb-typescript": "^12.3.1",
+    "eslint-config-airbnb-typescript": "^14.0.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-config-react-app": "^6.0.0",
     "eslint-import-resolver-webpack": "^0.13.1",
-    "eslint-plugin-flowtype": "5.9.0",
+    "eslint-plugin-flowtype": "5.9.2",
-    "eslint-plugin-import": "^2.23.4",
+    "eslint-plugin-import": "^2.24.2",
     "eslint-plugin-jest": "^24.4.0",
     "eslint-plugin-jsx-a11y": "^6.4.1",
-    "eslint-plugin-react": "^7.24.0",
+    "eslint-plugin-react": "^7.25.1",
     "eslint-plugin-react-hooks": "^4.2.0",
     "eslint-webpack-plugin": "^3.0.1",
     "express": "^4.17.1",
     "express-rate-limit": "^5.3.0",
-    "fast-json-patch": "^3.0.0-1",
+    "fast-json-patch": "^3.1.0",
     "fast-sort": "^3.0.2",
     "feedsub": "^0.7.7",
     "file-loader": "^6.2.0",
@@ -164,18 +164,18 @@
     "hash-wasm": "^4.9.0",
     "html-webpack-plugin": "^5.3.2",
     "http-errors": "^1.8.0",
-    "jest": "^27.0.6",
+    "jest": "^27.1.0",
     "js-file-download": "^0.4.12",
     "jsonwebtoken": "^8.5.1",
     "lodash": "^4.17.21",
-    "mini-css-extract-plugin": "^2.1.0",
+    "mini-css-extract-plugin": "^2.2.2",
-    "mobx": "^6.3.2",
+    "mobx": "^6.3.3",
     "mobx-react": "^7.2.0",
     "morgan": "^1.10.0",
     "nedb-promises": "^5.0.0",
     "overlayscrollbars": "^1.13.1",
     "overlayscrollbars-react": "^0.2.3",
-    "parse-torrent": "^9.1.3",
+    "parse-torrent": "^9.1.4",
     "passport": "^0.4.1",
     "passport-jwt": "^4.0.0",
     "polished": "^4.1.3",
@@ -195,36 +195,36 @@
     "react-dropzone": "^11.3.4",
     "react-measure": "^2.5.2",
     "react-refresh": "^0.10.0",
-    "react-router": "^5.2.0",
+    "react-router": "^5.2.1",
-    "react-router-dom": "^5.2.0",
+    "react-router-dom": "^5.3.0",
     "react-transition-group": "^4.4.2",
-    "react-use": "^17.2.4",
+    "react-use": "^17.3.1",
     "react-window": "^1.8.6",
     "ress": "^4.0.0",
     "sanitize-filename": "^1.6.3",
-    "sass": "^1.37.5",
+    "sass": "^1.39.0",
     "sass-loader": "^12.1.0",
     "saxen": "^8.1.2",
     "source-map-loader": "^3.0.0",
     "spdy": "^4.0.2",
     "style-loader": "^3.2.1",
-    "supertest": "^6.1.4",
+    "supertest": "^6.1.6",
     "tar-fs": "^2.1.1",
     "tar-stream": "^2.2.0",
-    "terser-webpack-plugin": "^5.1.4",
+    "terser-webpack-plugin": "^5.2.3",
-    "tldts": "^5.7.38",
+    "tldts": "^5.7.43",
-    "ts-jest": "^27.0.4",
+    "ts-jest": "^27.0.5",
     "ts-node-dev": "^1.1.8",
-    "tsconfig-paths": "^3.10.1",
+    "tsconfig-paths": "^3.11.0",
     "typed-emitter": "^1.3.1",
-    "typescript": "~4.3.5",
+    "typescript": "~4.4.2",
     "url-loader": "^4.1.1",
     "use-query-params": "^1.2.3",
-    "webpack": "^5.48.0",
+    "webpack": "^5.52.0",
-    "webpack-dev-server": "^4.0.0-rc.0",
+    "webpack-dev-server": "^4.1.0",
     "webpackbar": "^5.0.0-3",
-    "yargs": "^17.0.1",
+    "yargs": "^17.1.1",
-    "zod": "^3.7.1"
+    "zod": "^3.8.2"
   },
   "engines": {
     "node": ">=12.0.0",

server/util/fileUtil.ts

@@ -27,7 +27,7 @@ export const isAllowedPath = (resolvedPath: string) => {
     try {
       realPath = fs.realpathSync(parentPath);
     } catch (e) {
-      if (e.code === 'ENOENT') {
+      if ((e as NodeJS.ErrnoException).code === 'ENOENT') {
         parentPath = path.resolve(parentPath, '..');
       } else {
         return false;