Refactor code structure for improved readability and maintainability

Refactor webpack configuration files to remove unused variables and improve clarity

Update dependencies: upgrade express to 5.1.0, mime to 4.0.7, and node-html-parser to 7.0.1

Update electron-related dependencies to latest versions

Update dependencies: upgrade proxy-polyfill to ^0.3.2, react-beautiful-dnd to ^13.1.1, react-datetime-picker to ^7.0.1, and various other packages

electron/devServer.js

@@ -2,7 +2,7 @@
 const { WEBPACK_ELECTRON_PORT } = require('../config');
 const chalk = require('chalk');
 const webpack = require('webpack');
-const merge = require('webpack-merge');
+const { merge } = require('webpack-merge');
 const middleware = require('webpack-dev-middleware');
 const express = require('express');
 const app = express();
@@ -20,13 +20,11 @@ renderConfig = merge(renderConfig, {
     alias: { 'react-dom': '@hot-loader/react-dom' },
     symlinks: false,
   },
-
 });
 
 const mainCompiler = webpack(mainConfig);
 const mainInstance = middleware(mainCompiler, {
-  logLevel: 'warn',
+  writeToDisk: (filename) => {
-  writeToDisk: filename => {
     // console.log(`Writing '${filename}'.`);
     return true;
   },
@@ -34,7 +32,6 @@ const mainInstance = middleware(mainCompiler, {
 
 const renderCompiler = webpack(renderConfig);
 const renderInstance = middleware(renderCompiler, {
-  logLevel: 'warn',
   publicPath: '/',
 });
 app.use(require('webpack-hot-middleware')(renderCompiler));
@@ -56,7 +53,7 @@ mainInstance.waitUntilValid(() => {
 
   const child = proc.spawn(electron, ['./dist/electron/webpack/main.js']);
 
-  child.stdout.on('data', data => {
+  child.stdout.on('data', (data) => {
     console.log(data.toString());
   });
 

package.json

@@ -46,21 +46,21 @@
     "@mui/material": "^5.2.1",
     "@ungap/from-entries": "^0.2.1",
     "auto-launch": "^5.0.5",
-    "electron-dl": "^3.2.0",
+    "electron-dl": "^4.0.0",
-    "electron-log": "^4.4.8",
+    "electron-log": "^5.4.3",
-    "electron-notarize": "^1.0.0",
+    "electron-notarize": "^1.2.2",
-    "electron-updater": "^4.2.4",
+    "electron-updater": "^6.6.2",
-    "express": "^4.17.1",
+    "express": "^5.1.0",
     "ffmpeg-probe": "^1.0.6",
     "humanize-duration": "^3.27.0",
     "match-sorter": "^6.3.0",
-    "mime": "^3.0.0",
+    "mime": "^4.0.7",
-    "node-html-parser": "^5.1.0",
+    "node-html-parser": "^7.0.1",
     "parse-duration": "^1.0.0",
-    "proxy-polyfill": "0.1.6",
+    "proxy-polyfill": "^0.3.2",
     "re-reselect": "^4.0.0",
-    "react-beautiful-dnd": "^13.1.0",
+    "react-beautiful-dnd": "^13.1.1",
-    "react-datetime-picker": "^3.4.3",
+    "react-datetime-picker": "^7.0.1",
     "source-map-explorer": "^2.5.2",
     "sudo-prompt": "^9.2.1",
     "tempy": "^0.6.0"
@@ -71,6 +71,8 @@
     "@babel/plugin-proposal-decorators": "^7.3.0",
     "@babel/plugin-proposal-object-rest-spread": "^7.6.2",
     "@babel/plugin-proposal-optional-chaining": "^7.14.5",
+    "@babel/plugin-proposal-private-methods": "^7.18.6",
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@babel/plugin-syntax-dynamic-import": "^7.2.0",
     "@babel/plugin-transform-flow-strip-types": "^7.2.3",
     "@babel/plugin-transform-runtime": "^7.4.3",
@@ -93,7 +95,7 @@
     "@types/three": "^0.103.2",
     "adm-zip": "^0.4.13",
     "babel-eslint": "^10.0.1",
-    "babel-loader": "^8.0.5",
+    "babel-loader": "^9.1.3",
     "babel-plugin-add-module-exports": "^1.0.4",
     "babel-plugin-import-glob": "^2.0.0",
     "babel-plugin-transform-imports": "^1.5.1",
@@ -102,12 +104,12 @@
     "classnames": "^2.2.5",
     "codemirror": "^5.39.2",
     "connected-react-router": "^6.8.0",
-    "copy-webpack-plugin": "^6.4.1",
+    "copy-webpack-plugin": "^11.0.0",
     "country-data": "^0.0.31",
     "cross-env": "^7.0.3",
     "crypto-js": "^4.0.0",
     "css-doodle": "^0.7.1",
-    "css-loader": "^2.1.0",
+    "css-loader": "^6.8.1",
     "cssnano": "^4.1.10",
     "dat.gui": "^0.7.2",
     "decompress": "^4.2.1",
@@ -154,8 +156,9 @@
     "node-loader": "^0.6.0",
     "node-wget": "^0.4.3",
     "nodemon": "^1.19.1",
-    "postcss-import": "^12.0.1",
+    "postcss": "^8.5.6",
-    "postcss-loader": "^3.0.0",
+    "postcss-import": "^15.1.0",
+    "postcss-loader": "^7.3.3",
     "postcss-rtl": "^1.7.3",
     "preprocess-loader": "^0.3.0",
     "prettier": "^2.2.1",
@@ -189,11 +192,11 @@
     "remark-react": "^8.0.0",
     "reselect": "^4.0.0",
     "sass": "^1.29.0",
-    "sass-loader": "^7.1.0",
+    "sass-loader": "^13.3.2",
     "semver": "^5.3.0",
     "strip-markdown": "^3.0.3",
-    "style-loader": "^0.23.1",
+    "style-loader": "^3.3.3",
-    "terser-webpack-plugin": "^4.2.3",
+    "terser-webpack-plugin": "^5.3.9",
     "three-full": "^28.0.2",
     "unist-util-visit": "^2.0.3",
     "uuid": "^8.3.2",
@@ -201,19 +204,19 @@
     "videojs-contrib-quality-levels": "^2.0.9",
     "videojs-event-tracking": "^1.0.1",
     "villain-react": "^1.0.9",
-    "webpack": "^4.44.2",
+    "webpack": "^5.89.0",
-    "webpack-bundle-analyzer": "^3.1.0",
+    "webpack-bundle-analyzer": "^4.10.1",
-    "webpack-cli": "^3.3.10",
+    "webpack-cli": "^5.1.4",
     "webpack-config-utils": "^2.3.1",
-    "webpack-dev-middleware": "^3.6.0",
+    "webpack-dev-middleware": "^6.1.1",
-    "webpack-dev-server": "^3.9.0",
+    "webpack-dev-server": "^4.15.1",
-    "webpack-hot-middleware": "^2.24.3",
+    "webpack-hot-middleware": "^2.25.4",
-    "webpack-merge": "^4.2.1",
+    "webpack-merge": "^5.10.0",
-    "webpack-node-externals": "^1.7.2",
+    "webpack-node-externals": "^3.0.0",
     "yarnhook": "^0.2.0"
   },
   "engines": {
-    "node": ">=16.13",
+    "node": ">=20.0.0",
     "yarn": "^1.3"
   },
   "lbrySettings": {

postcss.config.js

@@ -1,16 +1,18 @@
-module.exports = ({ file, options, env }) => {
+module.exports = {
-  env = env || {};
-  file = file || {};
-  options = options || {};
-  options.cssnext = options.cssnext || null;
-  options.autoprefixer = options.autoprefixer || null;
-  options.cssnano = options.cssnano || null;
-
-  return {
-    parser: file.extname === '.sss' ? 'sugarss' : false,
   plugins: {
-      'postcss-import': { root: file.dirname },
+    'postcss-import': {
-      cssnano: env === 'production' ? options.cssnano : false,
+      resolve: function (id) {
+        // Handle ~ imports for node_modules
+        if (id.startsWith('~')) {
+          try {
+            return require.resolve(id.substring(1));
+          } catch (e) {
+            return id;
+          }
+        }
+        return id;
+      }
+    },
+    cssnano: process.env.NODE_ENV === 'production' ? {} : false,
   },
 };
-};

webpack.base.config.js

@@ -8,7 +8,6 @@ const TerserPlugin = require('terser-webpack-plugin');
 const NODE_ENV = process.env.NODE_ENV || 'development';
 const { ifProduction } = getIfUtils(NODE_ENV);
 const UI_ROOT = path.resolve(__dirname, 'ui/');
-const STATIC_ROOT = path.resolve(__dirname, 'static/');
 
 let baseConfig = {
   mode: ifProduction('production', 'development'),
@@ -17,7 +16,9 @@ let baseConfig = {
     minimizer: [
       new TerserPlugin({
         parallel: true,
+        terserOptions: {
           sourceMap: true,
+        },
       }),
     ],
   },
@@ -41,13 +42,16 @@ let baseConfig = {
         use: [
           { loader: 'style-loader' },
           { loader: 'css-loader' },
-          { loader: 'postcss-loader',
+          {
+            loader: 'postcss-loader',
             options: {
+              postcssOptions: {
                 plugins: function () {
                   return [require('postcss-rtl')()];
                 },
               },
             },
+          },
           { loader: 'sass-loader' },
         ],
       },
@@ -96,7 +100,9 @@ let baseConfig = {
 
   plugins: [
     new webpack.IgnorePlugin({ resourceRegExp: /^\.\/locale$/, contextRegExp: /moment$/ }),
-    new webpack.EnvironmentPlugin(['NODE_ENV']),
+    new webpack.EnvironmentPlugin({
+      NODE_ENV: 'development' // default value if NODE_ENV is not defined
+    }),
     new DefinePlugin({
       __static: `"${path.join(__dirname, 'static').replace(/\\/g, '\\\\')}"`,
       'process.env.NODE_ENV': JSON.stringify(NODE_ENV),

webpack.electron.config.js

@@ -1,18 +1,10 @@
-const config = require('./config');
 const path = require('path');
-const webpack = require('webpack');
+const { merge } = require('webpack-merge');
-const merge = require('webpack-merge');
 const baseConfig = require('./webpack.base.config.js');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const { DefinePlugin, ProvidePlugin } = require('webpack');
-const { getIfUtils, removeEmpty } = require('webpack-config-utils');
-const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
-
 const STATIC_ROOT = path.resolve(__dirname, 'static/');
 const DIST_ROOT = path.resolve(__dirname, 'dist/');
-const NODE_ENV = process.env.NODE_ENV || 'development';
-
-const { ifProduction } = getIfUtils(NODE_ENV);
 
 let mainConfig = {
   target: 'electron-main',
@@ -74,7 +66,6 @@ if (process.env.NODE_ENV === 'production') {
     },
   });
 } else {
-  const nodeExternals = require('webpack-node-externals');
   // Apply dev overrides
   mainConfig = merge(mainConfig, {
     externals: {
@@ -94,17 +85,6 @@ let plugins = [
   }),
 ];
 
-// if (hasSentryToken) {
-//   plugins.push(
-//     new SentryWebpackPlugin({
-//       include: './dist',
-//       ignoreFile: '.sentrycliignore',
-//       ignore: ['node_modules', 'webpack.config.js', 'webworkers'],
-//       configFile: 'sentry.properties',
-//     })
-//   );
-// }
-
 const renderConfig = {
   target: 'electron-renderer',
   entry: {