remove legacy scss styles, change to full webpack build

.eslintrc.js

@@ -95,6 +95,7 @@ module.exports = {
 			globals: {
 				mount: false,
 				shallowMount: false,
+				fail: false,
 			},
 		},
 	],

Dockerfile

@@ -9,19 +9,19 @@ WORKDIR /app
 COPY package.json package-lock.json ./
 RUN npm ci
 
-COPY babel.config.js .eslintrc.js LICENSE.md .prettierrc.json tsconfig.json tsconfig.build.json vue.config.js .eslintignore .prettierignore index.html ./
+COPY babel.config.js .eslintrc.js LICENSE.md .prettierrc.json tsconfig.json tsconfig.build.json .eslintignore .prettierignore index.html ./
 COPY public ./public
 COPY src ./src
-COPY webpack-config ./webpack-config
+COPY config/webpack ./config/webpack
 RUN NODE_ENV=production npm run build
 
-COPY .git ./
+COPY .git ./git
 RUN echo "{\"sha\": \"$(git rev-parse HEAD)\", \"version\": \"$(git describe --tags --abbrev=0)\", \"commitDate\": \"$(git log -1 --format=%cd --date=format:'%Y-%m-%dT%H:%M:%SZ')\", \"birthdate\": \"$(date +%Y-%m-%dT%H:%M:%SZ)\"}" > ./dist/version
 
 # run stage
 FROM docker.io/nginx:1.27
 RUN mkdir /etc/nginx/templates
-COPY dockerconf/nginx.conf.template /etc/nginx/templates/default.conf.template
+COPY config/docker/nginx.conf.template /etc/nginx/templates/default.conf.template
 COPY --from=build-stage /app/dist /usr/share/nginx/html/frontend
 
 EXPOSE 4100

babel.config.js

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

config/webpack/webpack.common.js

@@ -0,0 +1,195 @@
+const path = require("path");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const { VueLoaderPlugin } = require("vue-loader");
+const { VuetifyPlugin } = require("webpack-plugin-vuetify");
+const NoncePlaceholderPlugin = require("./nonce-placeholder-plugin");
+const { DefinePlugin, ProgressPlugin } = require("webpack");
+const CopyPlugin = require("copy-webpack-plugin");
+const ESLintWebpackPlugin = require("eslint-webpack-plugin");
+
+const __base = path.resolve(__dirname, "../..");
+const __src = path.resolve(__base, "src");
+
+const getDir = (subPath) => path.resolve(__base, subPath);
+
+module.exports = {
+	devtool: false, // "source-map", see https://webpack.js.org/configuration/devtool/
+
+	// Entry: main file
+	entry: {
+		app: [path.resolve(__src, "main.ts")],
+	},
+
+	// Output
+	output: {
+		filename: "_vue/js/[name].js",
+		path: path.resolve(__base, "dist"),
+		publicPath: "/",
+		chunkFilename: "_vue/js/[name].js",
+		clean: true,
+	},
+
+	// Optimizations
+	optimization: {
+		realContentHash: false,
+		splitChunks: {
+			cacheGroups: {
+				defaultVendors: {
+					name: "chunk-vendors",
+					test: /[\\/]node_modules[\\/]/,
+					priority: -10,
+					chunks: "initial",
+				},
+				common: {
+					name: "chunk-common",
+					minChunks: 2,
+					priority: -20,
+					chunks: "initial",
+					reuseExistingChunk: true,
+				},
+			},
+		},
+	},
+
+	// Plugins
+	plugins: [
+		new DefinePlugin({
+			__VUE_OPTIONS_API__: "false",
+			__VUE_PROD_DEVTOOLS__: "false",
+			__VUE_PROD_HYDRATION_MISMATCH_DETAILS__: "false",
+		}),
+
+		new ProgressPlugin(),
+
+		new VueLoaderPlugin(),
+		new VuetifyPlugin({ styles: { configFile: "src/styles/settings.scss" } }),
+
+		new NoncePlaceholderPlugin(),
+
+		new HtmlWebpackPlugin({
+			title: "Superhero-Dashboard",
+			scriptLoading: "defer",
+			favicon: path.resolve(__base, "public", "favicon.png"),
+			template: path.resolve(__base, "index.html"),
+		}),
+
+		new CopyPlugin({
+			patterns: [
+				{
+					from: path.resolve(__base, "public"),
+					to: path.resolve(__base, "dist"),
+					toType: "dir",
+					noErrorOnMissing: true,
+					globOptions: {
+						ignore: ["**/.DS_Store"],
+					},
+					info: {
+						minimized: true,
+					},
+				},
+			],
+		}),
+
+		new ESLintWebpackPlugin({
+			extensions: [".js", ".jsx", ".vue", ".ts", ".tsx"],
+			failOnWarning: false,
+			failOnError: true,
+		}),
+	],
+
+	resolve: {
+		alias: {
+			"@": path.resolve(__src),
+			"@data": getDir("src/modules/data"),
+			"@feature": getDir("src/modules/feature"),
+			"@ui": getDir("src/modules/ui"),
+			"@util": getDir("src/modules/util"),
+			"@page": getDir("src/modules/page"),
+		},
+		extensions: [".tsx", ".ts", ".mjs", ".js", ".jsx", ".vue", ".json"],
+	},
+
+	//Webpack dosent know how to handler all type of files and what to do with them, so this section
+	//we can capture and configure a specific type of file and determine a loader plugin to process it
+	module: {
+		rules: [
+			// Javascript
+			{
+				test: /\.m?jsx?$/,
+				exclude: /node_modules/,
+				use: ["babel-loader"],
+			},
+			// Typescript
+			{
+				test: /\.tsx?$/,
+				use: [
+					{
+						loader: "babel-loader",
+					},
+					{
+						loader: "ts-loader",
+						options: {
+							transpileOnly: true,
+							appendTsSuffixTo: [/\.vue$/],
+							happyPackMode: false,
+							configFile: path.resolve(__base, "tsconfig.build.json"),
+						},
+					},
+				],
+			},
+			// I18n - TS
+			{
+				test: /\.ts$/,
+				type: "javascript/auto",
+				loader: path.resolve(__dirname, "vue-i18n-loader.js"),
+				include: [path.resolve(__src, "locales")],
+			},
+			// Vue
+			{
+				test: /\.vue$/,
+				loader: "vue-loader",
+			},
+			// SVG
+			{
+				test: /\.(svg)(\?.*)?$/,
+				type: "asset/resource",
+				generator: {
+					filename: "_vue/img/[name].[hash:8][ext]",
+				},
+			},
+			// Images
+			{
+				test: /\.(png|jpe?g|gif|webp|avif)(\?.*)?$/,
+				type: "asset",
+				generator: {
+					filename: "_vue/img/[name].[hash:8][ext]",
+				},
+			},
+			// Media
+			{
+				test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
+				type: "asset",
+				generator: {
+					filename: "_vue/media/[name].[hash:8][ext]",
+				},
+			},
+			// Fonts
+			{
+				test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/i,
+				type: "asset",
+				generator: {
+					filename: "_vue/fonts/[name].[hash:8][ext]",
+				},
+			},
+			// CSS, SCSS
+			{
+				test: /\.css$/,
+				use: ["vue-style-loader", "css-loader"],
+			},
+			{
+				test: /\.(s([ac])ss)$/,
+				use: ["vue-style-loader", "css-loader", "sass-loader"],
+			},
+		],
+	},
+};

config/webpack/webpack.dev.js

@@ -0,0 +1,26 @@
+const { merge } = require("webpack-merge");
+const common = require("./webpack.common");
+const { DefinePlugin } = require("webpack");
+
+//Configure dev enviroment by combining common configuration and adding some more options
+module.exports = merge(common, {
+	mode: "development",
+	devtool: "inline-source-map",
+	plugins: [
+		new DefinePlugin({
+			"process.env": {
+				NODE_ENV: '"development"',
+			},
+		}),
+	],
+	devServer:
+		process.env.NODE_ENV === "development"
+			? {
+					port: 4100,
+					allowedHosts: "all",
+					client: {
+						overlay: false,
+					},
+				}
+			: {},
+});

config/webpack/webpack.prod.js

@@ -0,0 +1,18 @@
+const { merge } = require("webpack-merge");
+const common = require("./webpack.common");
+const { DefinePlugin } = require("webpack");
+
+// Configure prod enviroment by using common configuration and adding some more options
+module.exports = merge(common, {
+	mode: "production",
+	devtool: false,
+	plugins: [
+		new DefinePlugin({
+			"process.env": {
+				NODE_ENV: '"production"',
+			},
+		}),
+	],
+	// we can add many of optimizations configurations as minification, compression and so on,
+	// but to be a minumal project example so its needs to have only minimal configuration
+});

jest.config.js

@@ -1,16 +1,17 @@
-const deepmerge = require("deepmerge");
-const defaultPreset = require("@vue/cli-plugin-unit-jest/presets/typescript-and-babel/jest-preset.js");
+const config = {
+	verbose: true,
+	coverageProvider: "v8",
 
-const config = deepmerge(defaultPreset, {
-	testMatch: ["**/*.unit.{j,t}s?(x)"],
-
-	moduleFileExtensions: ["mjs"],
-	transform: {
-		"^.+\\.mjs$": "babel-jest",
+	testEnvironment: "jsdom",
+	testEnvironmentOptions: {
+		customExportConditions: ["node", "node-addons"],
 	},
 
+	injectGlobals: true,
+	moduleDirectories: ["node_modules"],
+	moduleFileExtensions: ["js", "jsx", "json", "vue", "ts", "tsx", "mjs"],
+
 	moduleNameMapper: {
-		"^axios$": require.resolve("axios"),
 		"\\.(jpg|ico|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":
 			"<rootDir>/tests/test-utils/mediaFileMock.js",
 		"^@data/(.*)$": "<rootDir>/src/modules/data/$1",
@@ -22,24 +23,39 @@ const config = deepmerge(defaultPreset, {
 		"^@@/(.*)$": "<rootDir>/$1",
 	},
 
+	testPathIgnorePatterns: ["/node_modules/"],
+	testMatch: ["**/*.unit.{j,t}s?(x)"],
+	preset: "ts-jest",
 	setupFiles: ["./tests/setup.js"],
 
+	transform: {
+		"^.+\\.vue$": "@vue/vue3-jest",
+
+		".+\\.(css|styl|less|sass|scss|jpg|jpeg|png|svg|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga|avif)$":
+			"jest-transform-stub",
+
+		"^.+\\.mjs$": "babel-jest",
+		"^.+\\.jsx?$": "babel-jest",
+		"^.+\\.tsx?$": [
+			"ts-jest",
+			{
+				babelConfig: true,
+			},
+		],
+	},
+	transformIgnorePatterns: ["/node_modules/(?!vuetify)/"],
 	collectCoverageFrom: [
 		// Include
-		// TODO Vue files are excluded for now, since they don't report the correct coverage
-		"<rootDir>/src/layouts/**/*.{js,ts}", // add vue files
-		"<rootDir>/src/modules/**/*.{js,ts}", // add vue files
+		"<rootDir>/src/layouts/**/*.{js,ts,vue}",
+		"<rootDir>/src/modules/**/*.{js,ts,vue}",
 		"<rootDir>/src/plugins/**/*.(js|ts)",
 		"<rootDir>/src/router/guards/**/*.(js|ts)",
 		"<rootDir>/src/utils/**/*.(js|ts)",
 
 		// Exclude
 		"!<rootDir>/src/**/index.(js|ts)",
+		"!<rootDir>/src/**/*.d.(js|ts)",
 	],
-});
-
-// we have to overwrite(!) config.transformIgnorePatterns here
-// otherwise the rule would be added and have no effect
-config.transformIgnorePatterns = ["/node_modules/(?!vuetify)/"];
+};
 
 module.exports = config;