BC-7096 - Upgrade frontend libraries after Vue3 upgrade

.dockerignore

@@ -3,7 +3,6 @@
 .vscode
 deploy
 node_modules
-.travis.yml*
 Dockerfile.*
 
 **/*.unit.ts

.eslintrc.js

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

Dockerfile

@@ -9,21 +9,21 @@ WORKDIR /app
 COPY package.json package-lock.json ./
 RUN npm ci
 
-COPY babel.config.js .eslintrc.js LICENSE.md .prettierrc.js tsconfig.json tsconfig.build.json vue.config.js .eslintignore .prettierignore ./
+COPY babel.config.js .eslintrc.js LICENSE.md .prettierrc.js tsconfig.json tsconfig.build.json .eslintignore .prettierignore ./
 COPY public ./public
 COPY src ./src
-COPY webpack-config ./webpack-config
+COPY config/webpack ./config/webpack
 ARG SC_THEME=default
 ENV SC_THEME ${SC_THEME}
 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/nuxtversion
 
 # 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
 # second index.html needed for the location /h5p/ in csp rules
 COPY --from=build-stage /app/dist /usr/share/nginx/html/h5p

babel.config.js

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

webpack-config/dev-server-config.js → config/webpack/dev-server-config.js

@@ -1,10 +1,10 @@
 const { createProxyMiddleware } = require("http-proxy-middleware");
-const { isVueClient } = require("../src/router/vue-client-route");
+const { isVueClient } = require("../../src/router/vue-client-route");
 const {
 	isServer,
 	isFileStorage,
 	isH5pEditor,
-} = require("../src/router/server-route");
+} = require("../../src/router/server-route");
 const url = require("url");
 
 const createLegacyClientProxy = () => {
@@ -47,6 +47,8 @@ const createDevServerConfig = () => {
 
 	const devServerConfig = {
 		port: 4000,
+		historyApiFallback: true,
+
 		setupMiddlewares: (middlewares, devServer) => {
 			if (!devServer) {
 				throw new Error("webpack-dev-server is not defined");

webpack-config/theme-resolver-plugin.js → config/webpack/theme-resolver-plugin.js

@@ -19,7 +19,7 @@ class ThemeResolverPlugin {
 
 				if (foundReplace) {
 					console.log(
-						`replace "${foundReplace.find}" with "${foundReplace.replacement}"\n`
+						`\nreplace "${foundReplace.find}" with "${foundReplace.replacement}"`
 					);
 
 					const customRequest = {

webpack-config/vue-i18n-loader.js → config/webpack/vue-i18n-loader.js

@@ -1,4 +1,4 @@
-const { generateJavaScript } = require("@intlify/bundle-utils");
+const { generateJSON, generateJavaScript } = require("@intlify/bundle-utils");
 
 const loader = function (source, sourceMap) {
 	// eslint-disable-next-line @typescript-eslint/no-this-alias

config/webpack/webpack.common.js

@@ -0,0 +1,268 @@
+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 generateAliases = require("./theme-aliases");
+const ThemeResolverPlugin = require("./theme-resolver-plugin");
+
+const __base = path.resolve(__dirname, "../..");
+const __src = path.resolve(__base, "src");
+
+const replacements = generateAliases(__base);
+
+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: "_nuxt/js/[name].js",
+		path: path.resolve(__base, "dist"),
+		publicPath: "/",
+		chunkFilename: "_nuxt/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__: "true",
+			__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: "Deine digitale Lernumgebung",
+			scriptLoading: "defer",
+			favicon: path.resolve(
+				__base,
+				"public",
+				"themes",
+				process.env.SC_THEME || "default",
+				"favicon.png"
+			),
+
+			template: path.resolve(__base, "public", "index.html"),
+		}),
+
+		new CopyPlugin({
+			patterns: [
+				{
+					from: path.resolve(__base, "public"),
+					to: path.resolve(__base, "dist"),
+					toType: "dir",
+					noErrorOnMissing: true,
+					globOptions: {
+						ignore: [
+							"**/.DS_Store",
+							path.resolve(__base, "public/index.html"),
+							path.resolve(__base, "public/themes/**/*"),
+						],
+					},
+					info: {
+						minimized: true,
+					},
+				},
+			],
+		}),
+
+		new ESLintWebpackPlugin({
+			extensions: [".js", ".jsx", ".vue", ".ts", ".tsx"],
+			failOnWarning: false,
+			failOnError: true,
+		}),
+	],
+
+	resolve: {
+		alias: {
+			"@": path.resolve(__src),
+			"@data-board": path.resolve(__src, "modules/data/board"),
+			"@data-external-tool": getDir("src/modules/data/external-tool"),
+			"@data-group": getDir("src/modules/data/group"),
+			"@data-system": getDir("src/modules/data/system"),
+			"@data-provisioning-options": getDir(
+				"src/modules/data/provisioning-options"
+			),
+			"@data-room": getDir("src/modules/data/room"),
+			"@feature-board-file-element": getDir(
+				"src/modules/feature/board-file-element"
+			),
+			"@feature-board-submission-element": getDir(
+				"src/modules/feature/board-submission-element"
+			),
+			"@feature-board-text-element": getDir(
+				"src/modules/feature/board-text-element"
+			),
+			"@feature-board-link-element": getDir(
+				"src/modules/feature/board-link-element"
+			),
+			"@feature-board-external-tool-element": getDir(
+				"src/modules/feature/board-external-tool-element"
+			),
+			"@feature-board-drawing-element": getDir(
+				"src/modules/feature/board-drawing-element"
+			),
+			"@feature-board-collaborative-text-editor-element": getDir(
+				"src/modules/feature/board-collaborative-text-editor-element"
+			),
+			"@feature-course-sync": getDir("src/modules/feature/course-sync"),
+			"@feature-board": getDir("src/modules/feature/board"),
+			"@feature-editor": getDir("src/modules/feature/editor"),
+			"@feature-render-html": getDir("src/modules/feature/render-html"),
+			"@feature-news-form": getDir("src/modules/feature/news-form"),
+			"@feature-media-shelf": getDir("src/modules/feature/media-shelf"),
+			"@ui-alert": getDir("src/modules/ui/alert"),
+			"@ui-board": getDir("src/modules/ui/board"),
+			"@ui-chip": getDir("src/modules/ui/chip"),
+			"@ui-confirmation-dialog": getDir("src/modules/ui/confirmation-dialog"),
+			"@ui-date-time-picker": getDir("src/modules/ui/date-time-picker"),
+			"@ui-extended-icon-btn": getDir("src/modules/ui/extended-icon-btn"),
+			"@ui-layout": getDir("src/modules/ui/layout"),
+			"@ui-light-box": getDir("src/modules/ui/light-box"),
+			"@ui-preview-image": getDir("src/modules/ui/preview-image"),
+			"@ui-room-details": getDir("src/modules/ui/room-details"),
+			"@ui-skip-link": getDir("src/modules/ui/skip-link"),
+			"@ui-speed-dial-menu": getDir("src/modules/ui/speed-dial-menu"),
+			"@ui-qr-code": getDir("src/modules/ui/qr-code"),
+			"@util-board": getDir("src/modules/util/board"),
+			"@util-validators": getDir("src/modules/util/validators"),
+			"@util-vue": getDir("src/modules/util/vue"),
+			"@util-input-masks": getDir("src/modules/util/input-masks"),
+			"@util-device-detection": getDir("src/modules/util/device-detection"),
+			"@util-error-notification": getDir("src/modules/util/error-notification"),
+			"@page-board": getDir("src/modules/page/board"),
+			"@page-class-members": getDir("src/modules/page/class-members"),
+			"@page-media-shelf": getDir("src/modules/page/media-shelf"),
+		},
+		extensions: [".tsx", ".ts", ".mjs", ".js", ".jsx", ".vue", ".json"],
+		plugins: [new ThemeResolverPlugin(__base, replacements)],
+	},
+
+	//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",
+				options: {
+					compilerOptions: {
+						isCustomElement: (tag) => tag.startsWith("h5p-"),
+					},
+				},
+			},
+			// SVG
+			{
+				test: /\.(svg)(\?.*)?$/,
+				type: "asset/resource",
+				generator: {
+					filename: "_nuxt/img/[name].[hash:8][ext]",
+				},
+			},
+			// Images
+			{
+				test: /\.(png|jpe?g|gif|webp|avif)(\?.*)?$/,
+				type: "asset",
+				generator: {
+					filename: "_nuxt/img/[name].[hash:8][ext]",
+				},
+			},
+			// Media
+			{
+				test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
+				type: "asset",
+				generator: {
+					filename: "_nuxt/media/[name].[hash:8][ext]",
+				},
+			},
+			// Fonts
+			{
+				test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/i,
+				type: "asset",
+				generator: {
+					filename: "_nuxt/fonts/[name].[hash:8][ext]",
+				},
+			},
+			// CSS, SCSS
+			{
+				test: /\.css$/,
+				use: ["vue-style-loader", "css-loader"],
+			},
+			{
+				test: /\.(s(a|c)ss)$/,
+				use: ["vue-style-loader", "css-loader", "sass-loader"],
+			},
+		],
+	},
+};

config/webpack/webpack.dev.js

@@ -0,0 +1,19 @@
+const { merge } = require("webpack-merge");
+const common = require("./webpack.common");
+const { createDevServerConfig } = require("./dev-server-config");
+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" ? createDevServerConfig() : {},
+});

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
+});