Merge remote-tracking branch 'upstream/develop' into neckbeard

build/dev-server.js

@@ -29,18 +29,20 @@ var devMiddleware = require('webpack-dev-middleware')(compiler, {
 })
 
 var hotMiddleware = require('webpack-hot-middleware')(compiler)
+
+// FIXME: The statement below gives error about hooks being required in webpack 5.
 // force page reload when html-webpack-plugin template changes
-compiler.plugin('compilation', function (compilation) {
-  compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
-    // FIXME: This supposed to reload whole page when index.html is changed,
-    // however now it reloads entire page on every breath, i suppose the order
-    // of plugins changed or something. It's a minor thing and douesn't hurt
-    // disabling it, constant reloads hurt much more
+// compiler.plugin('compilation', function (compilation) {
+//   compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
+//     // FIXME: This supposed to reload whole page when index.html is changed,
+//     // however now it reloads entire page on every breath, i suppose the order
+//     // of plugins changed or something. It's a minor thing and douesn't hurt
+//     // disabling it, constant reloads hurt much more
 
-    // hotMiddleware.publish({ action: 'reload' })
-    // cb()
-  })
-})
+//     // hotMiddleware.publish({ action: 'reload' })
+//     // cb()
+//   })
+// })
 
 // proxy api requests
 Object.keys(proxyTable).forEach(function (context) {
@@ -48,7 +50,7 @@ Object.keys(proxyTable).forEach(function (context) {
   if (typeof options === 'string') {
     options = { target: options }
   }
-  app.use(proxyMiddleware(context, options))
+  app.use(proxyMiddleware.createProxyMiddleware(context, options))
 })
 
 // handle fallback for HTML5 history API

build/webpack.base.conf.js

@@ -2,7 +2,7 @@ var path = require('path')
 var config = require('../config')
 var utils = require('./utils')
 var projectRoot = path.resolve(__dirname, '../')
-var ServiceWorkerWebpackPlugin = require('serviceworker-webpack-plugin')
+var ServiceWorkerWebpackPlugin = require('serviceworker-webpack5-plugin')
 var CopyPlugin = require('copy-webpack-plugin');
 var { VueLoaderPlugin } = require('vue-loader')
 var ESLintPlugin = require('eslint-webpack-plugin');
@@ -42,6 +42,10 @@ module.exports = {
       'assets': path.resolve(__dirname, '../src/assets'),
       'components': path.resolve(__dirname, '../src/components'),
       'vue-i18n': 'vue-i18n/dist/vue-i18n.runtime.esm-bundler.js'
+    },
+    fallback: {
+      'querystring': require.resolve('querystring-es3'),
+      'url': require.resolve('url/')
     }
   },
   module: {
@@ -78,22 +82,16 @@ module.exports = {
       },
       {
         test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
-        use: {
-          loader: 'url-loader',
-          options: {
-            limit: 10000,
-            name: utils.assetsPath('img/[name].[hash:7].[ext]')
-          }
+        type: 'asset',
+        generator: {
+          filename: utils.assetsPath('img/[name].[hash:7][ext]')
         }
       },
       {
         test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
-        use: {
-          loader: 'url-loader',
-          options: {
-            limit: 10000,
-            name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
-          }
+        type: 'asset',
+        generator: {
+          filename: utils.assetsPath('fonts/[name].[hash:7][ext]')
         }
       },
       {
@@ -117,9 +115,8 @@ module.exports = {
     new CopyPlugin({
       patterns: [
         {
-          from: "node_modules/@ruffle-rs/ruffle/*",
-          to: "static/ruffle",
-          flatten: true
+          from: "node_modules/@ruffle-rs/ruffle/**/*",
+          to: "static/ruffle/[name][ext]"
         },
       ],
       options: {

build/webpack.dev.conf.js

@@ -16,7 +16,7 @@ module.exports = merge(baseWebpackConfig, {
   },
   mode: 'development',
   // eval-source-map is faster for development
-  devtool: '#eval-source-map',
+  devtool: 'eval-source-map',
   plugins: [
     new webpack.DefinePlugin({
       'process.env': config.dev.env,

build/webpack.prod.conf.js

@@ -5,6 +5,7 @@ var webpack = require('webpack')
 var merge = require('webpack-merge')
 var baseWebpackConfig = require('./webpack.base.conf')
 var MiniCssExtractPlugin = require('mini-css-extract-plugin')
+const CssMinimizerPlugin = require("css-minimizer-webpack-plugin")
 var HtmlWebpackPlugin = require('html-webpack-plugin')
 var env = process.env.NODE_ENV === 'testing'
     ? require('../config/test.env')
@@ -19,12 +20,16 @@ var webpackConfig = merge(baseWebpackConfig, {
   module: {
     rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, extract: true })
   },
-  devtool: config.build.productionSourceMap ? '#source-map' : false,
+  devtool: config.build.productionSourceMap ? 'source-map' : false,
   optimization: {
     minimize: true,
     splitChunks: {
       chunks: 'all'
-    }
+    },
+    minimizer: [
+      `...`,
+      new CssMinimizerPlugin()
+    ]
   },
   output: {
     path: config.build.assetsRoot,
@@ -60,9 +65,7 @@ var webpackConfig = merge(baseWebpackConfig, {
         ignoreCustomComments: [/server-generated-meta/]
         // more options:
         // https://github.com/kangax/html-minifier#options-quick-reference
-      },
-      // necessary to consistently work with multiple chunks via CommonsChunkPlugin
-      chunksSortMode: 'dependency'
+      }
     }),
     // split vendor js into its own file
     // extract webpack runtime and module manifest to its own file in order to

package.json

@@ -23,8 +23,8 @@
     "@fortawesome/free-solid-svg-icons": "6.1.2",
     "@fortawesome/vue-fontawesome": "3.0.1",
     "@kazvmoe-infra/pinch-zoom-element": "1.2.0",
-    "@ruffle-rs/ruffle": "^0.1.0-nightly.2022.7.12",
-    "@vuelidate/core": "2.0.0-alpha.43",
+    "@ruffle-rs/ruffle": "0.1.0-nightly.2022.7.12",
+    "@vuelidate/core": "2.0.0-alpha.44",
     "@vuelidate/validators": "2.0.0-alpha.31",
     "body-scroll-lock": "3.1.5",
     "chromatism": "3.0.0",
@@ -32,95 +32,95 @@
     "cropperjs": "1.5.12",
     "diff": "3.5.0",
     "escape-html": "1.0.3",
-    "js-cookie": "^3.0.1",
+    "js-cookie": "3.0.1",
     "localforage": "1.10.0",
-    "parse-link-header": "1.0.1",
+    "parse-link-header": "2.0.0",
     "phoenix": "1.6.2",
     "punycode.js": "2.1.0",
-    "qrcode": "1",
-    "utf8": "^3.0.0",
+    "qrcode": "1.5.0",
+    "querystring-es3": "0.2.1",
+    "url": "0.11.0",
+    "utf8": "3.0.0",
     "vue": "3.2.37",
-    "vue-i18n": "9.2.0",
+    "vue-i18n": "9.2.2",
     "vue-router": "4.1.3",
-    "vue-template-compiler": "2.7.8",
+    "vue-template-compiler": "2.7.9",
     "vuex": "4.0.2"
   },
   "devDependencies": {
     "@babel/core": "7.18.10",
+    "@babel/eslint-parser": "7.18.9",
     "@babel/plugin-transform-runtime": "7.18.10",
     "@babel/preset-env": "7.18.10",
     "@babel/register": "7.18.9",
-    "@babel/eslint-parser": "7.18.9",
-    "@intlify/vue-i18n-loader": "^5.0.0",
+    "@intlify/vue-i18n-loader": "5.0.0",
     "@ungap/event-target": "0.2.3",
     "@vue/babel-helper-vue-jsx-merge-props": "1.2.1",
     "@vue/babel-plugin-jsx": "1.1.1",
     "@vue/compiler-sfc": "3.2.37",
     "@vue/test-utils": "2.0.2",
-    "autoprefixer": "6.7.7",
+    "autoprefixer": "10.4.8",
     "babel-loader": "8.2.5",
     "babel-plugin-lodash": "3.3.4",
     "chai": "4.3.6",
     "chalk": "1.1.3",
-    "chromedriver": "103.0.0",
-    "connect-history-api-fallback": "1.6.0",
-    "copy-webpack-plugin": "6.4.1",
-    "cross-spawn": "4.0.2",
-    "css-loader": "0.28.11",
+    "chromedriver": "104.0.0",
+    "connect-history-api-fallback": "2.0.0",
+    "copy-webpack-plugin": "11.0.0",
+    "cross-spawn": "7.0.3",
+    "css-loader": "6.7.1",
+    "css-minimizer-webpack-plugin": "4.0.0",
     "custom-event-polyfill": "1.0.7",
-    "eslint": "8.20.0",
+    "eslint": "8.22.0",
     "eslint-config-standard": "17.0.0",
     "eslint-formatter-friendly": "7.0.0",
-    "eslint-webpack-plugin": "2.7.0",
     "eslint-plugin-import": "2.26.0",
     "eslint-plugin-n": "15.2.4",
     "eslint-plugin-promise": "6.0.0",
     "eslint-plugin-vue": "9.3.0",
+    "eslint-webpack-plugin": "3.2.0",
     "eventsource-polyfill": "0.9.6",
     "express": "4.18.1",
-    "file-loader": "3.0.1",
     "function-bind": "1.1.1",
-    "html-webpack-plugin": "3.2.0",
-    "http-proxy-middleware": "0.21.0",
-    "inject-loader": "2.0.1",
+    "html-webpack-plugin": "5.5.0",
+    "http-proxy-middleware": "2.0.6",
     "iso-639-1": "2.1.15",
     "isparta-loader": "2.0.0",
     "json-loader": "0.5.7",
     "karma": "6.4.0",
     "karma-coverage": "1.1.2",
-    "karma-firefox-launcher": "1.3.0",
+    "karma-firefox-launcher": "2.1.2",
     "karma-mocha": "2.0.1",
     "karma-mocha-reporter": "2.2.5",
     "karma-sinon-chai": "2.0.2",
     "karma-sourcemap-loader": "0.3.8",
     "karma-spec-reporter": "0.0.34",
-    "karma-webpack": "4.0.2",
+    "karma-webpack": "5.0.0",
     "lodash": "4.17.21",
     "lolex": "1.6.0",
-    "mini-css-extract-plugin": "0.12.0",
+    "mini-css-extract-plugin": "2.6.1",
     "mocha": "3.5.3",
     "nightwatch": "0.9.21",
     "opn": "4.0.2",
     "ora": "0.4.1",
-    "postcss-loader": "3.0.0",
-    "raw-loader": "0.5.1",
+    "postcss": "8.4.16",
+    "postcss-loader": "7.0.1",
     "sass": "1.54.4",
-    "sass-loader": "7.3.1",
+    "sass-loader": "13.0.2",
     "selenium-server": "2.53.1",
     "semver": "5.7.1",
-    "serviceworker-webpack-plugin": "1.0.1",
+    "serviceworker-webpack5-plugin": "2.0.0",
     "shelljs": "0.8.5",
     "sinon": "2.4.1",
     "sinon-chai": "2.14.0",
     "stylelint": "13.13.1",
     "stylelint-config-standard": "20.0.0",
     "stylelint-rscss": "0.4.0",
-    "url-loader": "1.1.2",
-    "vue-loader": "^16.0.0",
+    "vue-loader": "17.0.0",
     "vue-style-loader": "4.1.3",
-    "webpack": "4.46.0",
+    "webpack": "5.74.0",
     "webpack-dev-middleware": "3.7.3",
-    "webpack-hot-middleware": "2.25.1",
+    "webpack-hot-middleware": "2.25.2",
     "webpack-merge": "0.20.0"
   },
   "engines": {

src/services/push/push.js

@@ -1,4 +1,4 @@
-import runtime from 'serviceworker-webpack-plugin/lib/runtime'
+import runtime from 'serviceworker-webpack5-plugin/lib/runtime'
 
 function urlBase64ToUint8Array (base64String) {
   const padding = '='.repeat((4 - base64String.length % 4) % 4)

test/unit/karma.conf.js

@@ -16,7 +16,7 @@ const webpackConfig = merge(baseConfig, {
   module: {
     rules: utils.styleLoaders()
   },
-  devtool: '#inline-source-map',
+  devtool: 'inline-source-map',
   // vue: {
   //   loaders: {
   //     js: 'isparta'