Update dependecies

.eslintrc.js

@@ -1,17 +1,17 @@
 module.exports = {
   root: true,
   parserOptions: {
-    parser: 'babel-eslint',
+    parser: '@babel/eslint-parser',
     sourceType: 'module'
   },
   // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
   extends: [
-    'standard',
     'plugin:vue/recommended'
   ],
   // required to lint *.vue files
   plugins: [
-    'vue'
+    'vue',
+    'import'
   ],
   // add your custom rules here
   rules: {
@@ -23,6 +23,8 @@ module.exports = {
     'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
     'vue/require-prop-types': 0,
     'vue/no-unused-vars': 0,
-    'no-tabs': 0
+    'no-tabs': 0,
+    'vue/multi-word-component-names': 0,
+    'vue/no-reserved-component-names': 0
   }
 }

build/dev-server.js

@@ -29,18 +29,6 @@ var devMiddleware = require('webpack-dev-middleware')(compiler, {
 })
 
 var hotMiddleware = require('webpack-hot-middleware')(compiler)
-// 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
-
-    // hotMiddleware.publish({ action: 'reload' })
-    // cb()
-  })
-})
 
 // proxy api requests
 Object.keys(proxyTable).forEach(function (context) {

build/webpack.base.conf.js

@@ -2,8 +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')
+const WorkboxPlugin = require('workbox-webpack-plugin');
-var CopyPlugin = require('copy-webpack-plugin');
 var { VueLoaderPlugin } = require('vue-loader')
 
 var env = process.env.NODE_ENV
@@ -35,6 +34,9 @@ module.exports = {
     modules: [
       path.join(__dirname, '../node_modules')
     ],
+    fallback: {
+      "url": require.resolve("url/"),
+    },
     alias: {
       'static': path.resolve(__dirname, '../static'),
       'src': path.resolve(__dirname, '../src'),
@@ -117,23 +119,11 @@ module.exports = {
     ]
   },
   plugins: [
-    new ServiceWorkerWebpackPlugin({
+    new WorkboxPlugin.InjectManifest({
-      entry: path.join(__dirname, '..', 'src/sw.js'),
+      swSrc: path.join(__dirname, '..', 'src/sw.js'),
-      filename: 'sw-pleroma.js'
+      swDest: 'sw-pleroma.js',
+      maximumFileSizeToCacheInBytes: 15 * 1024 * 1024,
     }),
-    new VueLoaderPlugin(),
+    new VueLoaderPlugin()
-    // This copies Ruffle's WASM to a directory so that JS side can access it
-    new CopyPlugin({
-      patterns: [
-        {
-          from: "node_modules/ruffle-mirror/*",
-          to: "static/ruffle",
-          flatten: true
-        },
-      ],
-      options: {
-        concurrency: 100,
-      },
-    })
   ]
 }

build/webpack.dev.conf.js

@@ -1,6 +1,6 @@
 var config = require('../config')
 var webpack = require('webpack')
-var merge = require('webpack-merge')
+var { merge } = require('webpack-merge')
 var utils = require('./utils')
 var baseWebpackConfig = require('./webpack.base.conf')
 var HtmlWebpackPlugin = require('html-webpack-plugin')
@@ -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

@@ -2,7 +2,7 @@ var path = require('path')
 var config = require('../config')
 var utils = require('./utils')
 var webpack = require('webpack')
-var merge = require('webpack-merge')
+var { merge } = require('webpack-merge')
 var baseWebpackConfig = require('./webpack.base.conf')
 var MiniCssExtractPlugin = require('mini-css-extract-plugin')
 var HtmlWebpackPlugin = require('html-webpack-plugin')
@@ -19,7 +19,7 @@ var webpackConfig = merge(baseWebpackConfig, {
   module: {
     rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, extract: true })
   },
-  devtool: config.build.productionSourceMap ? '#source-map' : false,
+  devtool: 'source-map',
   optimization: {
     minimize: true,
     splitChunks: {
@@ -62,7 +62,7 @@ var webpackConfig = merge(baseWebpackConfig, {
         // https://github.com/kangax/html-minifier#options-quick-reference
       },
       // necessary to consistently work with multiple chunks via CommonsChunkPlugin
-      chunksSortMode: 'dependency'
+      chunksSortMode: 'auto'
     }),
     // split vendor js into its own file
     // extract webpack runtime and module manifest to its own file in order to

config/dev.env.js

@@ -1,4 +1,4 @@
-var merge = require('webpack-merge')
+var { merge } = require('webpack-merge')
 var prodEnv = require('./prod.env')
 
 module.exports = merge(prodEnv, {

package.json

@@ -33,13 +33,13 @@
     "escape-html": "1.0.3",
     "js-cookie": "^3.0.1",
     "localforage": "1.10.0",
-    "marked": "^4.0.17",
+    "marked": "^4.2.2",
     "marked-mfm": "^0.5.0",
-    "parse-link-header": "1.0.1",
+    "parse-link-header": "^2.0.0",
     "phoenix": "1.6.2",
     "punycode.js": "2.1.0",
     "qrcode": "1",
-    "ruffle-mirror": "2021.12.31",
+    "url": "^0.11.0",
     "vue": "^3.2.31",
     "vue-i18n": "^9.2.2",
     "vue-router": "4.0.14",
@@ -48,6 +48,7 @@
   },
   "devDependencies": {
     "@babel/core": "7.17.8",
+    "@babel/eslint-parser": "^7.19.1",
     "@babel/plugin-transform-runtime": "7.17.0",
     "@babel/preset-env": "7.16.11",
     "@babel/register": "7.17.7",
@@ -58,31 +59,29 @@
     "@vue/compiler-sfc": "^3.1.0",
     "@vue/test-utils": "^2.0.2",
     "autoprefixer": "6.7.7",
-    "babel-eslint": "7.2.3",
+    "babel-loader": "^9.1.0",
-    "babel-loader": "8.2.4",
     "babel-plugin-lodash": "3.3.4",
-    "chai": "3.5.0",
+    "chai": "^4.3.7",
     "chalk": "1.1.3",
-    "chromedriver": "87.0.7",
+    "chromedriver": "^107.0.3",
-    "connect-history-api-fallback": "1.6.0",
+    "connect-history-api-fallback": "^2.0.0",
-    "copy-webpack-plugin": "6.4.1",
+    "cross-spawn": "^7.0.3",
-    "cross-spawn": "4.0.2",
+    "css-loader": "^6.7.2",
-    "css-loader": "0.28.11",
+    "custom-event-polyfill": "^1.0.7",
-    "custom-event-polyfill": "1.0.7",
+    "eslint": "^7.32.0",
-    "eslint": "5.16.0",
+    "eslint-config-standard": "^17.0.0",
-    "eslint-config-standard": "12.0.0",
+    "eslint-friendly-formatter": "^4.0.1",
-    "eslint-friendly-formatter": "2.0.7",
+    "eslint-loader": "^4.0.2",
-    "eslint-loader": "2.2.1",
+    "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-import": "2.25.4",
+    "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-node": "7.0.1",
+    "eslint-plugin-promise": "^6.1.1",
-    "eslint-plugin-promise": "4.3.1",
+    "eslint-plugin-standard": "^5.0.0",
-    "eslint-plugin-standard": "4.1.0",
+    "eslint-plugin-vue": "^9.7.0",
-    "eslint-plugin-vue": "5.2.3",
     "eventsource-polyfill": "0.9.6",
     "express": "4.17.3",
-    "file-loader": "3.0.1",
+    "file-loader": "^6.2.0",
     "function-bind": "1.1.1",
-    "html-webpack-plugin": "3.2.0",
+    "html-webpack-plugin": "^5.5.0",
     "http-proxy-middleware": "0.21.0",
     "inject-loader": "2.0.1",
     "iso-639-1": "2.1.15",
@@ -96,7 +95,7 @@
     "karma-sinon-chai": "2.0.2",
     "karma-sourcemap-loader": "0.3.8",
     "karma-spec-reporter": "0.0.33",
-    "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",
@@ -106,27 +105,27 @@
     "ora": "0.4.1",
     "postcss-loader": "3.0.0",
     "raw-loader": "0.5.1",
-    "sass": "1.53.0",
+    "sass": "^1.56.0",
-    "sass-loader": "7.3.1",
+    "sass-loader": "^13.2.0",
     "selenium-server": "2.53.1",
     "semver": "5.7.1",
-    "serviceworker-webpack-plugin": "1.0.1",
     "shelljs": "0.8.5",
     "sinon": "2.4.1",
     "sinon-chai": "2.14.0",
     "stylelint": "13.6.1",
     "stylelint-config-standard": "20.0.0",
     "stylelint-rscss": "0.4.0",
-    "url-loader": "1.1.2",
+    "url-loader": "^4.1.1",
-    "vue-loader": "^16.0.0",
+    "vue-loader": "^17.0.0",
-    "vue-style-loader": "4.1.2",
+    "vue-style-loader": "^4.1.2",
-    "webpack": "4.46.0",
+    "webpack": "^5.75.0",
-    "webpack-dev-middleware": "3.7.3",
+    "webpack-dev-middleware": "^5.3.3",
-    "webpack-hot-middleware": "2.25.1",
+    "webpack-hot-middleware": "^2.25.1",
-    "webpack-merge": "0.20.0"
+    "webpack-merge": "^5.8.0",
+    "workbox-webpack-plugin": "^6.5.4"
   },
   "engines": {
-    "node": ">= 4.0.0",
+    "node": ">= 18.0.0",
     "npm": ">= 3.0.0"
   }
 }

src/components/rich_content/rich_content.jsx

@@ -138,12 +138,6 @@ export default {
           )
         })
       }
-
-      marked.use(markedMfm, {
-        mangle: false,
-        gfm: false,
-        breaks: true
-      })
       const mfmHtml = document.createElement('template')
       mfmHtml.innerHTML = marked.parse(content)
 

src/components/timeline/timeline.js

@@ -126,7 +126,7 @@ const Timeline = {
     this.$store.commit('setLoading', { timeline: this.timelineName, value: false })
   },
   methods: {
-    stopBlockingClicks: debounce(function () {
+    stopBlockingClicks: debounce( function()  {
       this.blockingClicks = false
     }, 1000),
     blockClicksTemporarily () {
@@ -154,7 +154,7 @@ const Timeline = {
         window.scrollTo({ top: 0 })
       }
     },
-    fetchOlderStatuses: throttle(function () {
+    fetchOlderStatuses: throttle( function () {
       const store = this.$store
       const credentials = store.state.users.currentUser.credentials
       store.commit('setLoading', { timeline: this.timelineName, value: true })
@@ -188,7 +188,7 @@ const Timeline = {
 
       const centerOfScreen = window.pageYOffset + (window.innerHeight * 0.5)
 
-      // Start from approximating the index of some visible status by using the
+      // Start from approximating the index of some visible status by using
       // the center of the screen on the timeline.
       let approxIndex = Math.floor(statuses.length * (centerOfScreen / height))
       let err = statuses[approxIndex].getBoundingClientRect().y
@@ -226,7 +226,7 @@ const Timeline = {
         this.fetchOlderStatuses()
       }
     },
-    handleScroll: throttle(function (e) {
+    handleScroll: throttle( function (e)  {
       this.determineVisibleStatuses()
       this.scrollLoad(e)
     }, 200),

src/services/push/push.js

@@ -1,5 +1,3 @@
-import runtime from 'serviceworker-webpack-plugin/lib/runtime'
-
 function urlBase64ToUint8Array (base64String) {
   const padding = '='.repeat((4 - base64String.length % 4) % 4)
   const base64 = (base64String + padding)
@@ -15,7 +13,7 @@ function isPushSupported () {
 }
 
 function getOrCreateServiceWorker () {
-  return runtime.register()
+  return navigator.serviceWorker.register('/sw-pleroma.js')
     .catch((err) => console.error('Unable to get or create a service worker.', err))
 }
 

src/sw.js

@@ -5,7 +5,9 @@ import { parseNotification } from './services/entity_normalizer/entity_normalize
 import { prepareNotificationObject } from './services/notification_utils/notification_utils.js'
 import { createI18n } from 'vue-i18n'
 import messages from './i18n/service_worker_messages.js'
+import { precacheAndRoute } from 'workbox-precaching/precacheAndRoute';
 
+precacheAndRoute(self.__WB_MANIFEST);
 const i18n = createI18n({
   // By default, use the browser locale, we will update it if neccessary
   locale: 'en',