Musare/frontend/vite.config.js

import path from "path";
import vue from "@vitejs/plugin-vue";
import dynamicImport from "vite-plugin-dynamic-import";
import VueI18nPlugin from "@intlify/unplugin-vue-i18n/vite";
import { VitePWA } from "vite-plugin-pwa";
import fs from "fs";

const fetchVersionAndGitInfo = () => {
	const debug = {
		git: {
			remote: "",
			remoteUrl: "",
			branch: "",
			latestCommit: "",
			latestCommitShort: ""
		},
		version: ""
	};

	try {
		const packageJson = JSON.parse(
			fs.readFileSync("./package.json").toString()
		);

		console.log(`Musare version: ${packageJson.version}.`);
		if (process.env.MUSARE_DEBUG_VERSION === "true")
			debug.version = packageJson.version;
	} catch (e) {
		console.log(`Could not get package info: ${e.message}.`);
	}

	try {
		let gitFolder = null;
		if (fs.existsSync("../.git/HEAD")) gitFolder = "../.git";
		else if (fs.existsSync(".git/HEAD")) gitFolder = ".git";

		if (gitFolder) {
			const headContents = fs
				.readFileSync(`${gitFolder}/HEAD`)
				.toString()
				.replace(/\n/g, "");
			const branch = /ref: refs\/heads\/([.A-Za-z0-9_-]+)/.exec(
				headContents
			)[1];

			const configContents = fs
				.readFileSync(`${gitFolder}/config`)
				.toString()
				.replace(/\t/g, "")
				.split("\n");

			let remote;
			let remoteUrl;
			let latestCommit;
			let latestCommitShort;

			if (configContents.indexOf(`[branch "${branch}"]`) >= 0) {
				[, remote] = /remote = (.+)/.exec(
					configContents[
						configContents.indexOf(`[branch "${branch}"]`) + 1
					]
				);

				[, remoteUrl] = /url = (.+)/.exec(
					configContents[
						configContents.indexOf(`[remote "${remote}"]`) + 1
					]
				);

				latestCommit = fs
					.readFileSync(`${gitFolder}/refs/heads/${branch}`)
					.toString()
					.replace(/\n/g, "");

				latestCommitShort = latestCommit.substr(0, 7);
			}

			console.log(
				`Git branch: ${remote}/${branch}. Remote url: ${remoteUrl}. Latest commit: ${latestCommit} (${latestCommitShort}).`
			);
			if (process.env.MUSARE_DEBUG_GIT_REMOTE === "true")
				debug.git.remote = remote;
			if (process.env.MUSARE_DEBUG_GIT_REMOTE_URL === "true")
				debug.git.remoteUrl = remoteUrl;
			if (process.env.MUSARE_DEBUG_GIT_BRANCH === "true")
				debug.git.branch = branch;
			if (process.env.MUSARE_DEBUG_GIT_LATEST_COMMIT === "true")
				debug.git.latestCommit = latestCommit;
			if (process.env.MUSARE_DEBUG_GIT_LATEST_COMMIT_SHORT === "true")
				debug.git.latestCommitShort = latestCommitShort;
		} else console.log("Could not find .git folder.");
	} catch (e) {
		console.log(`Could not get Git info: ${e.message}.`, e);
	}

	return debug;
};

const debug = fetchVersionAndGitInfo();

const sitename = process.env.MUSARE_SITENAME ?? "Musare";

const htmlPlugin = () => ({
	name: "html-transform",
	transformIndexHtml(originalHtml) {
		let html = originalHtml;

		html = html.replace(/{{ title }}/g, sitename);
		html = html.replace(/{{ version }}/g, debug.version);
		html = html.replace(/{{ gitRemote }}/g, debug.git.remote);
		html = html.replace(/{{ gitRemoteUrl }}/g, debug.git.remoteUrl);
		html = html.replace(/{{ gitBranch }}/g, debug.git.branch);
		html = html.replace(/{{ gitLatestCommit }}/g, debug.git.latestCommit);
		html = html.replace(
			/{{ gitLatestCommitShort }}/g,
			debug.git.latestCommitShort
		);

		return html;
	}
});

let server = null;

if (process.env.FRONTEND_MODE === "development")
	server = {
		host: "0.0.0.0",
		port: process.env.FRONTEND_DEV_PORT ?? 81,
		strictPort: true,
		hmr: {
			clientPort: process.env.FRONTEND_CLIENT_PORT ?? 80
		}
	};

export default {
	mode: process.env.FRONTEND_MODE,
	root: "src",
	publicDir: "../dist",
	base: "/",
	resolve: {
		alias: [
			{
				find: "@musare_types",
				replacement: path.resolve(__dirname, "../types")
			},
			{
				find: "@",
				replacement: path.resolve(__dirname, "src")
			}
		],
		extensions: [
			".mjs",
			".js",
			".mts",
			".ts",
			".jsx",
			".tsx",
			".json",
			".vue"
		]
	},
	define: {
		__VUE_PROD_DEVTOOLS__: process.env.FRONTEND_PROD_DEVTOOLS === "true",
		MUSARE_SITENAME: JSON.stringify(sitename),
		MUSARE_VERSION: JSON.stringify(debug.version),
		MUSARE_GIT_REMOTE: JSON.stringify(debug.git.remote),
		MUSARE_GIT_REMOTE_URL: JSON.stringify(debug.git.remoteUrl),
		MUSARE_GIT_BRANCH: JSON.stringify(debug.git.branch),
		MUSARE_GIT_LATEST_COMMIT: JSON.stringify(debug.git.latestCommit),
		MUSARE_GIT_LATEST_COMMIT_SHORT: JSON.stringify(
			debug.git.latestCommitShort
		),
		__VUE_I18N_LEGACY_API__: false
	},
	plugins: [
		vue(),
		htmlPlugin(),
		dynamicImport(),
		VueI18nPlugin({ include: path.resolve(__dirname, "src/locales/**") }),
		VitePWA({
			useCredentials: true,
			devOptions: {
				enabled: true,
				type: "module",
				navigateFallback: "index.html",
				resolveTempFolder: () => path.resolve(__dirname, "dev-dist")
			},
			manifest: {
				name: sitename,
				short_name: sitename,
				theme_color: "#03a9f4",
				display: "standalone",
				start_url: "/",
				id: "/",
				icons: [
					{
						src: "/assets/favicon/android-chrome-36x36.png?v=06042016",
						sizes: "36x36",
						type: "image/png",
						density: 0.75
					},
					{
						src: "/assets/favicon/android-chrome-48x48.png?v=06042016",
						sizes: "48x48",
						type: "image/png",
						density: 1
					},
					{
						src: "/assets/favicon/android-chrome-72x72.png?v=06042016",
						sizes: "72x72",
						type: "image/png",
						density: 1.5
					},
					{
						src: "/assets/favicon/android-chrome-96x96.png?v=06042016",
						sizes: "96x96",
						type: "image/png",
						density: 2
					},
					{
						src: "/assets/favicon/android-chrome-144x144.png?v=06042016",
						sizes: "144x144",
						type: "image/png",
						density: 3
					},
					{
						src: "/assets/favicon/android-chrome-192x192.png?v=06042016",
						sizes: "192x192",
						type: "image/png",
						density: 4
					}
				]
			}
		})
	],
	css: {
		preprocessorOptions: {
			less: {
				additionalData: `@import "@/styles/variables.less";`
			}
		}
	},
	server,
	build: {
		outDir: "../build"
	},
	test: {
		globals: true,
		environment: "jsdom",
		coverage: {
			all: true,
			extension: [".ts", ".vue"]
		},
		setupFiles: "tests/utils/setup.ts"
	}
};