Convert configs to cjs, move babel to own file, combine webpack confi…

…gs (#4561)

* Convert configs to cjs
* Fix lint script in package.json
* Move babel config to separate file
* Combine webpack configs and include babelConfig

.eslintrc.cjs

@@ -0,0 +1,79 @@
+module.exports = {
+	root: true,
+	parserOptions: {
+		ecmaVersion: 2022,
+	},
+	env: {
+		es6: true,
+		browser: true,
+		mocha: true,
+		node: true,
+	},
+	rules: {
+		"block-scoped-var": "error",
+		curly: ["error", "all"],
+		"dot-notation": "error",
+		eqeqeq: "error",
+		"handle-callback-err": "error",
+		"no-alert": "error",
+		"no-catch-shadow": "error",
+		"no-control-regex": "off",
+		"no-console": "error",
+		"no-duplicate-imports": "error",
+		"no-else-return": "error",
+		"no-implicit-globals": "error",
+		"no-restricted-globals": ["error", "event", "fdescribe"],
+		"no-shadow": "error",
+		"no-template-curly-in-string": "error",
+		"no-unsafe-negation": "error",
+		"no-useless-computed-key": "error",
+		"no-useless-constructor": "error",
+		"no-useless-return": "error",
+		"no-use-before-define": [
+			"error",
+			{
+				functions: false,
+			},
+		],
+		"no-var": "error",
+		"object-shorthand": [
+			"error",
+			"methods",
+			{
+				avoidExplicitReturnArrows: true,
+			},
+		],
+		"padding-line-between-statements": [
+			"error",
+			{
+				blankLine: "always",
+				prev: ["block", "block-like"],
+				next: "*",
+			},
+			{
+				blankLine: "always",
+				prev: "*",
+				next: ["block", "block-like"],
+			},
+		],
+		"prefer-const": "error",
+		"prefer-rest-params": "error",
+		"prefer-spread": "error",
+		"spaced-comment": ["error", "always"],
+		strict: "off",
+		yoda: "error",
+		"vue/component-tags-order": [
+			"error",
+			{
+				order: ["template", "style", "script"],
+			},
+		],
+		"vue/no-mutating-props": "off",
+		"vue/no-v-html": "off",
+		"vue/require-default-prop": "off",
+		"vue/v-slot-style": ["error", "longform"],
+		"vue/multi-word-component-names": "off",
+	},
+	plugins: ["vue"],
+	extends: ["eslint:recommended", "plugin:vue/recommended", "prettier"],
+};

babel.config.cjs

@@ -0,0 +1,3 @@
+module.exports = {
+	presets: [["@babel/env"]],
+};

package.json

@@ -16,13 +16,13 @@
     "coverage": "run-s test:* && nyc --nycrc-path=test/.nycrc-report.json report",
     "dev": "node index start --dev",
     "format:prettier": "prettier --write \"**/*.*\"",
-    "lint:check-eslint": "eslint-config-prettier .eslintrc.yml",
+    "lint:check-eslint": "eslint-config-prettier .eslintrc.cjs",
     "lint:eslint": "eslint . --ext .js,.vue --report-unused-disable-directives --color",
     "lint:prettier": "prettier --list-different \"**/*.*\"",
     "lint:stylelint": "stylelint --color \"client/**/*.css\"",
     "start": "node index start",
     "test": "run-p --aggregate-output --continue-on-error lint:* test:*",
-    "test:mocha": "webpack --config webpack.config-test.js && nyc --nycrc-path=test/.nycrc-mocha.json mocha --colors --config=test/.mocharc.yml",
+    "test:mocha": "webpack --mode=development && nyc --nycrc-path=test/.nycrc-mocha.json mocha --colors --config=test/.mocharc.yml",
     "watch": "webpack --watch"
   },
   "keywords": [

prettier.config.cjs

@@ -0,0 +1,14 @@
+module.exports = {
+	arrowParens: "always",
+	bracketSpacing: false,
+	printWidth: 100,
+	trailingComma: "es5",
+	overrides: [
+		{
+			files: "*.webmanifest",
+			options: {
+				parser: "json",
+			},
+		},
+	],
+};

stylelint.config.cjs

@@ -0,0 +1,15 @@
+module.exports = {
+	extends: "stylelint-config-standard",
+	rules: {
+		indentation: "tab",
+		"font-family-no-missing-generic-family-keyword": null,
+		"no-descending-specificity": null,
+		"at-rule-no-vendor-prefix": true,
+		"media-feature-name-no-vendor-prefix": true,
+		"property-no-vendor-prefix": true,
+		"selector-no-vendor-prefix": true,
+		"value-no-vendor-prefix": true,
+		"selector-class-pattern": null,
+		"selector-id-pattern": null,
+	},
+};

webpack.config.js

@@ -1,11 +1,13 @@
 "use strict";
 
 const webpack = require("webpack");
+const fs = require("fs");
 const path = require("path");
 const CopyPlugin = require("copy-webpack-plugin");
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 const VueLoaderPlugin = require("vue-loader/lib/plugin");
 const Helper = require("./src/helper.js");
+const babelConfig = require("./babel.config.cjs");
 
 const isProduction = process.env.NODE_ENV === "production";
 const config = {
@@ -65,9 +67,7 @@ const config = {
 				include: [path.resolve(__dirname, "client")],
 				use: {
 					loader: "babel-loader",
-					options: {
-						presets: [["@babel/env"]],
-					},
+					options: babelConfig,
 				},
 			},
 		],
@@ -142,4 +142,52 @@ const config = {
 	],
 };
 
-module.exports = config;
+module.exports = (env, argv) => {
+	if (argv.mode === "development") {
+		const testFile = path.resolve(__dirname, "test/public/testclient.js");
+
+		if (fs.existsSync(testFile)) {
+			fs.unlinkSync(testFile);
+		}
+
+		config.target = "node";
+		config.devtool = "eval";
+		config.stats = "errors-only";
+		config.output.path = path.resolve(__dirname, "test/public");
+		config.entry = {
+			"testclient.js": [path.resolve(__dirname, "test/client/index.js")],
+		};
+
+		// Add the istanbul plugin to babel-loader options
+		for (const rule of config.module.rules) {
+			if (rule.use.loader === "babel-loader") {
+				rule.use.options.plugins = ["istanbul"];
+			}
+		}
+
+		// `optimization.splitChunks` is incompatible with a `target` of `node`. See:
+		// - https://github.com/zinserjan/mocha-webpack/issues/84
+		// - https://github.com/webpack/webpack/issues/6727#issuecomment-372589122
+		config.optimization.splitChunks = false;
+
+		// Disable plugins like copy files, it is not required
+		config.plugins = [
+			new VueLoaderPlugin(),
+
+			// Client tests that require Vue may end up requireing socket.io
+			new webpack.NormalModuleReplacementPlugin(
+				/js(\/|\\)socket\.js/,
+				path.resolve(__dirname, "scripts/noop.js")
+			),
+
+			// "Fixes" Critical dependency: the request of a dependency is an expression
+			new webpack.ContextReplacementPlugin(/vue-server-renderer$/),
+		];
+	}
+
+	if (argv.mode === "production") {
+		// ...
+	}
+
+	return config;
+};