rebase on improved configs

.eslintrc.yml

@@ -1,81 +0,0 @@
----
-root: true
-
-parserOptions:
-  ecmaVersion: 2022
-  parser: "@babel/eslint-parser",
-
-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

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

client/js/vue.ts

@@ -1,6 +1,6 @@
 "use strict";
 
-const constants = require("./constants");
+import constants from "./constants";
 
 import "../css/style.css";
 import Vue from "vue";
@@ -15,7 +15,7 @@ import "./socket-events";
 import "./webpush";
 import "./keybinds";
 
-import type {Channel} from "@/backend/models/channel";
+import type {Channel} from "@src/models/channel";
 
 const favicon = document.getElementById("favicon");
 const faviconNormal = favicon?.getAttribute("href") || "";

client/tsconfig.json

@@ -16,12 +16,7 @@
     "allowSyntheticDefaultImports": true,
     "esModuleInterop": true,
     "baseUrl": "./",
-    // "paths": {
-    //   "@/js/*": ["./js/*"],
-    //   "@/css/*": ["./css/*"],
-    //   "@/img/*": ["./img/*"],
-    //   "@/components/*": ["./components/*"],
-    // },
+
     "jsx": "preserve"
   }
 }

src/tsconfig.json

@@ -13,6 +13,9 @@
   },
   "include": ["./**/*.ts", "./**/*.js", "./**/*.d.ts"],
   "compilerOptions": {
+    "paths": {
+      "@src/*": ["src/*"]
+    },
     "allowJs": true,
     "checkJs": true,
     "types": ["node"],

tsconfig.base.json

@@ -1,9 +1,5 @@
 {
   "compilerOptions": {
-    "paths": {
-      "@src/*": ["src/*"],
-      "@client/*": ["client/*"]
-    },
     "target": "esnext",
     "module": "commonjs",
     "outDir": "dist",

tsconfig.json

@@ -1,5 +1,11 @@
 {
   "extends": "./tsconfig.base.json",
-  "files": ["./webpack.config.ts"],
-  "references": [{"path": "./src/"}, {"path": "./client/"}]
+  "files": ["./webpack.config.ts", "./babel.config.cjs"],
+  "references": [{"path": "./src/"}, {"path": "./client/"}],
+  "compilerOptions": {
+    "paths": {
+      "@src/*": ["src/*"],
+      "@client/*": ["client/*"]
+    }
+  }
 }

webpack.config.ts

@@ -7,7 +7,7 @@ import MiniCssExtractPlugin from "mini-css-extract-plugin";
 // TODO; we should add a declaration file
 //@ts-ignore
 import VueLoaderPlugin from "vue-loader/lib/plugin";
-import TsconfigPathsPlugin from "tsconfig-paths-webpack-plugin";
+import babelConfig from "./babel.config.cjs";
 import Helper from "./src/helper";
 
 const isProduction = process.env.NODE_ENV === "production";
@@ -18,6 +18,7 @@ const config: webpack.Configuration = {
 	},
 	devtool: "source-map",
 	output: {
+		clean: true, // Clean the output directory before emit.
 		path: path.resolve(__dirname, "public"),
 		filename: "[name]",
 		publicPath: "/",
@@ -29,30 +30,22 @@ const config: webpack.Configuration = {
 		rules: [
 			{
 				test: /\.vue$/,
-				loader: "vue-loader",
+				use: {
+					loader: "vue-loader",
+					options: {
+						compilerOptions: {
+							preserveWhitespace: false,
+						},
+					},
+				},
 			},
-			// {
-			// 	test: /\.ts$/,
-			// 	use: {
-			// 		loader: "ts-loader",
-			// 		options: {
-			// 			compilerOptions: {
-			// 				preserveWhitespace: false,
-			// 			},
-			// 			appendTsSuffixTo: [/\.vue$/],
-			// 		},
-			// 	},
-			// 	exclude: path.resolve(__dirname, "node_modules"),
-			// },
 			{
 				test: /\.{js,ts}$/,
 				include: [path.resolve(__dirname, "client/")],
 				exclude: path.resolve(__dirname, "node_modules"),
 				use: {
 					loader: "babel-loader",
-					options: {
-						presets: ["@babel/preset-env", "babel-preset-typescript-vue"],
-					},
+					options: babelConfig,
 				},
 			},
 			{
@@ -93,27 +86,11 @@ const config: webpack.Configuration = {
 			},
 		},
 	},
-	resolve: {
-		// alias: {
-		// 	vue$: "vue/dist/vue.esm.js",
-		// },
-		extensions: [".js", ".vue", ".json", ".ts"],
-		// modules: ["node_modules", path.resolve(__dirname, "client")],
-		plugins: [
-			// new TsconfigPathsPlugin({
-			// 	configFile: path.resolve(__dirname, "client/tsconfig.json"),
-			// 	extensions: [".js", ".vue", ".json", ".ts"],
-			// 	baseUrl: path.resolve(__dirname, "client"),
-			// }),
-		],
-	},
 	externals: {
 		json3: "JSON", // socket.io uses json3.js, but we do not target any browsers that need it
 	},
 	plugins: [
-		new VueLoaderPlugin({
-			esModule: true,
-		}),
+		new VueLoaderPlugin(),
 		new MiniCssExtractPlugin({
 			filename: "css/style.css",
 		}),
@@ -168,4 +145,51 @@ const config: webpack.Configuration = {
 	],
 };
 
-export default config;
+export default (env: any, argv: any) => {
+	if (argv.mode === "development") {
+		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!) {
+			//@ts-ignore
+			if (rule.use.loader === "babel-loader") {
+				//@ts-ignore
+				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(),
+			new MiniCssExtractPlugin({
+				filename: "css/style.css",
+			}),
+
+			// 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;
+};