Update dependencies and config (#99)

.gitignore

@@ -1,4 +1,3 @@
 node_modules
-yarn.lock
 distribution
 *.map

package.json

@@ -10,46 +10,50 @@
 		"update-version": "dot-json distribution/manifest.json version $TRAVIS_TAG"
 	},
 	"dependencies": {
-		"@types/chrome": "0.0.103",
-		"dom-chef": "^4.0.0",
+		"dom-chef": "^4.1.0",
 		"element-ready": "^4.1.1",
 		"fit-textarea": "^2.0.0",
-		"select-dom": "^6.0.1",
+		"select-dom": "^6.0.2",
 		"webext-base-css": "^1.1.0",
-		"webext-domain-permission-toggle": "^1.0.0",
-		"webext-dynamic-content-scripts": "^6.0.3"
+		"webext-domain-permission-toggle": "^1.0.1",
+		"webext-dynamic-content-scripts": "^6.0.4"
 	},
 	"devDependencies": {
 		"@sindresorhus/tsconfig": "^0.7.0",
-		"@types/react": "^16.9.32",
+		"@types/chrome": "0.0.122",
+		"@types/copy-webpack-plugin": "^6.0.0",
+		"@types/react": "^16.9.44",
+		"@types/terser-webpack-plugin": "^4.0.0",
 		"chrome-webstore-upload-cli": "^1.2.0",
-		"copy-webpack-plugin": "^5.1.1",
+		"copy-webpack-plugin": "^6.0.3",
 		"dot-json": "^1.2.0",
-		"eslint": "^6.8.0",
+		"eslint-config-xo-react": "^0.23.0",
+		"eslint-plugin-react": "^7.20.5",
+		"eslint-plugin-react-hooks": "^4.0.8",
 		"npm-run-all": "^4.1.5",
 		"size-plugin": "^2.0.1",
-		"terser-webpack-plugin": "^2.3.5",
-		"ts-loader": "^6.2.2",
-		"typescript": "^3.8.3",
-		"web-ext-submit": "^4.1.0",
-		"webpack": "^4.42.1",
-		"webpack-cli": "^3.3.11",
-		"xo": "^0.28.3"
+		"terser-webpack-plugin": "^4.0.0",
+		"ts-loader": "^8.0.2",
+		"ts-node": "^8.10.2",
+		"typescript": "^3.9.7",
+		"web-ext-submit": "^5.0.2",
+		"webpack": "^4.44.1",
+		"webpack-cli": "^3.3.12",
+		"xo": "^0.32.1"
 	},
 	"xo": {
+		"extends": "xo-react",
 		"envs": [
 			"browser",
 			"webextensions"
 		],
 		"rules": {
-			"@typescript-eslint/no-var-requires": "off",
-			"@typescript-eslint/no-unused-vars": [
-				"error",
-				{
-					"varsIgnorePattern": "^React$"
-				}
-			],
 			"import/no-unassigned-import": "off"
+		},
+		"settings": {
+			"react": {
+				"version": "16.13"
+			}
 		}
 	}
 }

source/globals.d.ts

@@ -1,3 +1,5 @@
+declare module 'size-plugin';
+
 // TODO: Drop when this bug is fixed
 // https://github.com/vadimdemedes/dom-chef/issues/36
 declare namespace JSX {

source/hide-files-on-github.tsx

@@ -64,17 +64,17 @@ function addToggleBtn(previewList?: HTMLElement[]): void {
 	}
 
 	select('[aria-labelledby="files"]')!.before(
-		<input type="checkbox" id="HFT" className="hide-files-toggle" checked/>
+		<input checked type="checkbox" id="HFT" className="hide-files-toggle"/>
 	);
 
 	table.prepend(
 		<div role="row" className="hide-files-row Box-row py-2 d-flex position-relative dimmed">
 			<div role="gridcell" className="flex-shrink-0 mr-3">
-				<label for="HFT" className="hide-files-btn">
-					{previewList ? <svg aria-hidden="true" height="16" width="16" viewBox="-3 0 16 16"><path d="M5 11L0 6l1.5-1.5L5 8.25 8.5 4.5 10 6z" /></svg> : ''}
+				<label htmlFor="HFT" className="hide-files-btn">
+					{previewList ? <svg aria-hidden="true" height="16" width="16" viewBox="-3 0 16 16"><path d="M5 11L0 6l1.5-1.5L5 8.25 8.5 4.5 10 6z"/></svg> : ''}
 				</label>
 			</div>
-			<div role="gridcell" className="hide-files-preview-list flex-auto min-width-0 "></div>
+			<div role="gridcell" className="hide-files-preview-list flex-auto min-width-0 "/>
 		</div>
 	);
 
@@ -107,7 +107,7 @@ function addEllipsis(container: HTMLElement, previewList: HTMLElement[]): void {
 			file.remove();
 		} else if (file.offsetLeft + file.offsetWidth > availableWidth - ellipsisWidth) {
 			// We found the first element in the unsafe/overflowing area
-			container.append(<label for="HFT"><a>etc...</a></label>);
+			container.append(<label htmlFor="HFT"><a>etc...</a></label>);
 			ellipsis = true;
 			file.remove();
 		}
@@ -138,4 +138,4 @@ async function init(): Promise<void> {
 	document.addEventListener('pjax:end', observeFragment);
 }
 
-init();
+void init();

source/options.tsx

@@ -6,7 +6,7 @@ const regexField = document.querySelector<HTMLTextAreaElement>('#hideRegExp')!;
 const errorMessage = document.querySelector('#errorMessage')!;
 const delimiters = /^\/|\/$/;
 
-restoreOptions();
+void restoreOptions();
 document.addEventListener('input', updateOptions);
 
 /* Native validation tooltips don't seem to work */

tsconfig.json

@@ -1,11 +1,12 @@
 {
 	"extends": "@sindresorhus/tsconfig",
 	"compilerOptions": {
-		"target": "esnext",
+		"target": "es2019", // TODO: Set this to `es2020` after https://github.com/webpack/webpack/issues/10227
 		"declaration": false,
 		"esModuleInterop": true
 	},
 	"include": [
-		"source"
+		"source",
+		"webpack.config.ts"
 	]
 }

webpack.config.ts

@@ -1,24 +1,30 @@
-'use strict';
-const path = require('path');
-const SizePlugin = require('size-plugin');
-const CopyWebpackPlugin = require('copy-webpack-plugin');
-const TerserPlugin = require('terser-webpack-plugin');
+/// <reference types="./source/globals" />
 
-module.exports = (env, argv) => ({
-	devtool: 'sourcemap',
-	stats: 'errors-only',
-	entry: {
-		'hide-files-on-github': './source/hide-files-on-github',
-		background: './source/background',
-		options: './source/options'
+import path from 'path';
+import {Configuration} from 'webpack';
+import SizePlugin from 'size-plugin';
+import TerserPlugin from 'terser-webpack-plugin';
+import CopyWebpackPlugin from 'copy-webpack-plugin';
+
+module.exports = (_environment: string, argv: Record<string, boolean | number | string>): Configuration => ({
+	devtool: 'source-map',
+	stats: {
+		all: false,
+		errors: true,
+		builtAt: true
 	},
+	entry: Object.fromEntries([
+		'hide-files-on-github',
+		'background',
+		'options'
+	].map(name => [name, `./source/${name}`])),
 	output: {
 		path: path.join(__dirname, 'distribution'),
 		filename: '[name].js'
 	},
 	module: {
 		rules: [{
-			test: /\.(js|ts|tsx)$/,
+			test: /\.tsx?$/,
 			use: [{
 				loader: 'ts-loader',
 				query: {
@@ -35,22 +41,25 @@ module.exports = (env, argv) => ({
 		}]
 	},
 	plugins: [
+		new CopyWebpackPlugin({
+			patterns: [
+				{
+					from: 'source',
+					globOptions: {
+						ignore: [
+							'**/*.ts',
+							'**/*.tsx'
+						]
+					}
+				},
+				{
+					from: 'node_modules/webext-base-css/webext-base.css'
+				}
+			]
+		}),
 		new SizePlugin({
 			writeFile: false
-		}),
-		new CopyWebpackPlugin([
-			{
-				from: '**',
-				context: 'source',
-				ignore: [
-					'*.ts',
-					'*.tsx'
-				]
-			},
-			{
-				from: 'node_modules/webext-base-css/webext-base.css'
-			}
-		])
+		})
 	],
 	resolve: {
 		extensions: [
@@ -60,15 +69,23 @@ module.exports = (env, argv) => ({
 		]
 	},
 	optimization: {
-		concatenateModules: true,
-
-		// Automatically enabled on production; keeps it somewhat readable for AMO reviewers
+		// Automatically enabled on production;
+		// Keeps it somewhat readable for AMO reviewers
 		minimizer: [
 			new TerserPlugin({
 				parallel: true,
 				terserOptions: {
 					mangle: false,
-					compress: false,
+					compress: {
+						defaults: false,
+						dead_code: true,
+						unused: true,
+						arguments: true,
+						join_vars: false,
+						booleans: false,
+						expression: false,
+						sequences: false
+					},
 					output: {
 						beautify: true,
 						indent_level: 2