Dependency Maintenance

* Start using the [pnpm](https://pnpm.io/) package manager rather than npm.
* Replace `node-sass` with `sass`.
* Update versions of many dependencies
* Didn't yet update webpack to v5, since that'll be a mess.
* Clean some old build scripts out of package.json

.eslintrc.js

@@ -13,7 +13,7 @@ module.exports = {
 		'react'
 	],
 	'parserOptions': {
-		'parser': 'babel-eslint',
+		'parser': '@babel/eslint-parser',
 		'ecmaVersion': 8,
 		'sourceType': 'module',
 		'ecmaFeatures': {

README.md

@@ -10,15 +10,16 @@ Developing
 ==========
 
 FrankerFaceZ uses node.js to manage development dependencies and to run an HTTP
-server for development. To get everything you need:
+server for development. This project uses the [pnpm](https://pnpm.io/) package
+manager. To get everything you need:
 
-1. Install node.js and npm
+1. Install node.js and [pnpm](https://pnpm.io/)
-2. Run `npm install` within the FrankerFaceZ directory.
+2. Run `pnpm install` within the FrankerFaceZ directory.
 
 
 From there, you can use npm to build FrankerFaceZ from source simply by
-running `npm run build`. For development, you can instruct webpack to watch
+running `pnpm build`. For development, you can instruct webpack to watch
-the source files for changes and re-build automatically with `npm start`
+the source files for changes and re-build automatically with `pnpm start`
 
 FrankerFaceZ comes with a local development server that listens on port 8000
 and it serves up local development copies of files, falling back to the CDN
@@ -36,13 +37,13 @@ It should be noted that this project is not a browser extension that you
 would load in your browser's extensions system. You still need the FrankerFaceZ
 extension or user-script for your browser.
 
-You can edit the project's icon font using the `npm run font` command. This will
+You can edit the project's icon font using the `pnpm font` command. This will
 create a new Fontello session, if one doesn't already exist, and open your
 default web browser to Fontello so you can edit the font.
 
-If you're running the development server with `npm start`, you'll be able to
+If you're running the development server with `pnpm start`, you'll be able to
 automatically save changes to the Fontello font by clicking Fontello's Export
-button. Otherwise, you can use `npm run font:save` to download the changes
+button. Otherwise, you can use `pnpm font:save` to download the changes
 from your session.
 
 

package.json

@@ -10,56 +10,50 @@
     "eslint": "eslint \"src/**/*.{js,jsx,vue}\"",
     "clean": "rimraf dist",
     "dev": "webpack-dev-server --config webpack.web.dev.js",
-    "dev:clips": "webpack-dev-server --config webpack.clips.dev.js",
     "dev:prod": "webpack-dev-server --config webpack.web.dev.prod.js",
-    "build:all": "npm run build && npm run build:clips",
+    "build": "pnpm build:prod",
-    "build": "npm run build:prod",
-    "build:clips": "cross-env NODE_ENV=production webpack --config webpack.clips.prod.js",
-    "build:clips:dev": "npm run clean && webpack --config webpack.clips.dev.js",
     "build:stats": "cross-env NODE_ENV=production webpack --config webpack.web.prod.js --json > stats.json",
     "build:prod": "cross-env NODE_ENV=production webpack --config webpack.web.prod.js",
-    "build:dev": "npm run clean && webpack --config webpack.web.dev.js",
+    "build:dev": "pnpm clean && webpack --config webpack.web.dev.js",
-    "font": "npm run font:edit",
+    "font": "pnpm font:edit",
     "font:edit": "fontello-cli --cli-config fontello.client.json edit",
-    "font:save": "fontello-cli --cli-config fontello.client.json save && npm run font:update",
+    "font:save": "fontello-cli --cli-config fontello.client.json save && pnpm font:update",
     "font:update": "node bin/update_fonts"
   },
   "devDependencies": {
-    "@babel/core": "^7.14.6",
+    "@babel/core": "^7.16.0",
-    "@babel/plugin-proposal-class-properties": "^7.14.5",
+    "@babel/eslint-parser": "^7.16.0",
-    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.14.5",
+    "@babel/plugin-proposal-class-properties": "^7.16.0",
-    "@babel/plugin-proposal-object-rest-spread": "^7.14.5",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.16.0",
-    "@babel/plugin-proposal-optional-chaining": "^7.14.5",
+    "@babel/plugin-proposal-object-rest-spread": "^7.16.0",
+    "@babel/plugin-proposal-optional-chaining": "^7.16.0",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@babel/plugin-transform-react-jsx": "^7.14.5",
+    "@babel/plugin-transform-react-jsx": "^7.16.0",
     "@ffz/fontello-cli": "^1.0.4",
-    "babel-eslint": "^10.1.0",
+    "@webpack-cli/serve": "^1.6.0",
-    "babel-loader": "^8.2.2",
+    "babel-loader": "^8.2.3",
     "clean-webpack-plugin": "^3.0.0",
     "copy-webpack-plugin": "^5.1.2",
     "cross-env": "^7.0.3",
     "css-loader": "^3.6.0",
-    "eslint": "^7.28.0",
+    "eslint": "^7.32.0",
-    "eslint-plugin-react": "^7.24.0",
+    "eslint-plugin-react": "^7.26.1",
     "eslint-plugin-vue": "^6.2.2",
     "extract-loader": "^2.0.1",
     "file-loader": "^4.3.0",
     "json-loader": "^0.5.7",
-    "jszip": "^3.6.0",
+    "jszip": "^3.7.1",
-    "node-sass": "^4.14.1",
     "raw-loader": "^3.1.0",
     "rimraf": "^3.0.2",
-    "sass-loader": "^7.1.0",
+    "sass-loader": "^7.3.1",
     "semver": "^7.3.5",
-    "terser-webpack-plugin": "^3.1.0",
+    "terser-webpack-plugin": "4",
-    "vue": "^2.6.14",
+    "vue-loader": "^15.9.8",
-    "vue-loader": "^15.9.7",
-    "vue-observe-visibility": "^0.4.6",
     "vue-template-compiler": "^2.6.14",
     "webpack": "^4.46.0",
-    "webpack-cli": "^3.3.12",
+    "webpack-cli": "^4.9.1",
-    "webpack-dev-server": "^3.11.2",
+    "webpack-dev-server": "^4.4.0",
-    "webpack-manifest-plugin": "^2.2.0",
+    "webpack-manifest-plugin": "^4.0.2",
     "webpack-merge": "^4.2.2"
   },
   "repository": {
@@ -68,30 +62,37 @@
   },
   "dependencies": {
     "@ffz/icu-msgparser": "^2.0.0",
-    "chartjs": "^0.3.24",
-    "chartjs-plugin-waterfall": "^1.0.3",
-    "chartjs-plugin-zoom": "^0.7.7",
     "crypto-js": "^3.3.0",
-    "dayjs": "^1.10.5",
+    "dayjs": "^1.10.7",
     "displacejs": "^1.4.1",
     "emoji-regex": "^9.2.2",
     "file-saver": "^2.0.5",
-    "graphql": "^15.5.0",
+    "graphql": "^16.0.1",
-    "graphql-tag": "^2.12.4",
+    "graphql-tag": "^2.12.6",
     "js-cookie": "^2.2.1",
-    "markdown-it": "^11.0.1",
+    "markdown-it": "^12.2.0",
     "markdown-it-link-attributes": "^3.0.0",
-    "mnemonist": "^0.38.3",
+    "mnemonist": "^0.38.5",
     "path-to-regexp": "^3.2.0",
     "popper.js": "^1.16.1",
-    "raven-js": "^3.24.2",
+    "raven-js": "^3.27.2",
-    "react": "^16.14.0",
+    "react": "^17.0.2",
     "safe-regex": "^2.1.1",
-    "sortablejs": "^1.13.0",
+    "sass": "^1.43.4",
+    "sortablejs": "^1.14.0",
     "sourcemapped-stacktrace": "^1.1.11",
     "text-diff": "^1.0.1",
+    "vue": "^2.6.14",
     "vue-clickaway": "^2.2.2",
     "vue-color": "^2.8.1",
+    "vue-observe-visibility": "^1.0.0",
     "vuedraggable": "^2.24.3"
+  },
+  "pnpm": {
+    "overrides": {
+      "ansi-regex@>2.1.1 <5.0.1": ">=5.0.1",
+      "set-value@<4.0.1": ">=4.0.1",
+      "glob-parent@<5.1.2": ">=5.1.2"
+    }
   }
 }

webpack.web.dev.js

@@ -27,18 +27,23 @@ module.exports = merge(common, {
 	],
 
 	devServer: {
+		hot: false,
 		https: true,
 		port: 8000,
 		compress: true,
-		inline: false,
 
 		allowedHosts: [
 			'.twitch.tv',
 			'.frankerfacez.com'
 		],
 
-		contentBase: path.join(__dirname, 'dev_cdn'),
+		static: {
-		publicPath: '/script/',
+			directory: path.join(__dirname, 'dev_cdn'),
+		},
+
+		devMiddleware: {
+			publicPath: '/script/',
+		},
 
 		proxy: {
 			'**': {
@@ -47,7 +52,9 @@ module.exports = merge(common, {
 			}
 		},
 
-		before(app) {
+		onBeforeSetupMiddleware(devServer) {
+			const app = devServer.app;
+
 			// Because the headers config option is broken.
 			app.get('/*', (req, res, next) => {
 				res.setHeader('Access-Control-Allow-Origin', '*');

webpack.web.dev.prod.js

@@ -22,18 +22,23 @@ module.exports = merge(prod, {
 	],
 
 	devServer: {
+		hot: false,
 		https: true,
 		port: 8000,
 		compress: true,
-		inline: false,
 
 		allowedHosts: [
 			'.twitch.tv',
 			'.frankerfacez.com'
 		],
 
-		contentBase: path.join(__dirname, 'dev_cdn'),
+		static: {
-		publicPath: '/script/',
+			directory: path.join(__dirname, 'dev_cdn'),
+		},
+
+		devMiddleware: {
+			publicPath: '/script/',
+		},
 
 		proxy: {
 			'**': {
@@ -42,7 +47,9 @@ module.exports = merge(prod, {
 			}
 		},
 
-		before(app) {
+		onBeforeSetupMiddleware(devServer) {
+			const app = devServer.app;
+
 			// Because the headers config option is broken.
 			app.get('/*', (req, res, next) => {
 				res.setHeader('Access-Control-Allow-Origin', '*');

webpack.web.prod.js

@@ -4,7 +4,7 @@ const common = require('./webpack.web.common.js');
 
 const CopyPlugin = require('copy-webpack-plugin');
 const TerserPlugin = require('terser-webpack-plugin');
-const ManifestPlugin = require('webpack-manifest-plugin');
+const { WebpackManifestPlugin } = require('webpack-manifest-plugin');
 const {CleanWebpackPlugin} = require('clean-webpack-plugin');
 
 const Terser = require('terser');
@@ -15,6 +15,12 @@ const commit_hash = require('child_process').execSync('git rev-parse HEAD').toSt
 
 /* global module Buffer */
 
+const minifier = content => {
+	const text = content.toString('utf8');
+	const minified = Terser.minify(text);
+	return (minified && minified.code) ? Buffer.from(minified.code) : content;
+};
+
 module.exports = merge(common, {
 	mode: 'production',
 	devtool: 'source-map',
@@ -41,14 +47,10 @@ module.exports = merge(common, {
 			{
 				from: './src/entry.js',
 				to: 'script.min.js',
-				transform: content => {
+				transform: minifier
-					const text = content.toString('utf8');
-					const minified = Terser.minify(text);
-					return (minified && minified.code) ? Buffer.from(minified.code) : content;
-				}
 			}
 		]),
-		new ManifestPlugin({
+		new WebpackManifestPlugin({
 			publicPath: '',
 			map: data => {
 				if ( data.name.endsWith('.scss') )