frontend/vite.config.ts

/// <reference types="vitest" />
import {defineConfig, loadEnv, type PluginOption} from 'vite'
import vue from '@vitejs/plugin-vue'
import legacyFn from '@vitejs/plugin-legacy'

import {VitePWA}  from 'vite-plugin-pwa'
import {visualizer}  from 'rollup-plugin-visualizer'

import viteSentry, {type ViteSentryPluginOptions} from 'vite-plugin-sentry'
import svgLoader from 'vite-svg-loader'
import postcssPresetEnv from "postcss-preset-env";

import {fileURLToPath, URL} from 'url'

const pathSrc = fileURLToPath(new URL('./src', import.meta.url))

import {VERSION} from './src/version.json'

// the @use rules have to be the first in the compiled stylesheets
const PREFIXED_SCSS_STYLES = `@use "sass:math";
@import "${pathSrc}/styles/common-imports";`

const isModernBuild = Boolean(process.env.BUILD_MODERN_ONLY)
const legacy = isModernBuild
	? undefined
	: legacyFn()

console.log(isModernBuild
	? 'Building "modern-only" build'
	: 'Building "legacy" build with "@vitejs/plugin-legacy"',
)

/*
** Configure sentry plugin
*/
function getSentryConfig(env: ImportMetaEnv): ViteSentryPluginOptions {
	return {
		// dryRun: true, // FIXME: remove when ready with configuring
		debug: true, // FIXME: remove when ready with configuring
		skipEnvironmentCheck: true,

		url: 'https://sentry.io',
		authToken: env.SENTRY_AUTH_TOKEN,
		org: env.SENTRY_ORG,
		project: env.SENTRY_PROJECT,
		release: env.SENTRY_VERSION || VERSION,
		deploy: {
			env: env.mode === 'production'
				? 'production'
				: 'development',
		},
		setCommits: {
			auto: true,
		},
		sourceMaps: {
			include: ['./dist/assets'],
			ignore: ['node_modules'],
			urlPrefix: '~/assets',
		},
	}
}

// https://vitejs.dev/config/
export default defineConfig(({ command, mode }) => {
	// https://vitejs.dev/config/#environment-variables
	// Load env file based on `mode` in the current working directory.
	// Set the third parameter to '' to load all env regardless of the `VITE_` prefix.
	const env: ImportMetaEnv = loadEnv(mode, process.cwd(), '') as ImportMetaEnv

	return {
		// https://vitest.dev/config/
		test: {
			environment: 'happy-dom',
		},
		css: {
			preprocessorOptions: {
				scss: {
					additionalData: PREFIXED_SCSS_STYLES,
					charset: false, // fixes  "@charset" must be the first rule in the file" warnings
				},
			},
			postcss: {
				plugins: [
					postcssPresetEnv(),
				],
			},
		},
		plugins: [
			vue({
				reactivityTransform: true,
			}),
			legacy,
			svgLoader({
				// Since the svgs are already manually optimized via https://jakearchibald.github.io/svgomg/
				// we don't need to optimize them again.
				svgo: false,
			}),
			VitePWA({
				srcDir: 'src',
				filename: 'sw.ts',
				base: '/',
				strategies: 'injectManifest',
				injectRegister: false,
				manifest: {
					name: 'Vikunja',
					short_name: 'Vikunja',
					theme_color: '#1973ff',
					icons: [
						{
							src: './images/icons/android-chrome-192x192.png',
							sizes: '192x192',
							type: 'image/png',
						},
						{
							src: './images/icons/android-chrome-512x512.png',
							sizes: '512x512',
							type: 'image/png',
						},
						{
							src: './images/icons/icon-maskable.png',
							sizes: '1024x1024',
							type: 'image/png',
							purpose: 'maskable',
						},
					],
					start_url: '.',
					display: 'standalone',
					background_color: '#000000',
					shortcuts: [
						{
							name: 'Overview',
							url: '/',
						},
						{
							name: 'Namespaces And Lists Overview',
							short_name: 'Namespaces & Lists',
							url: '/namespaces',
						},
						{
							name: 'Tasks Next Week',
							short_name: 'Next Week',
							url: '/tasks/by/week',
						},
						{
							name: 'Tasks Next Month',
							short_name: 'Next Month',
							url: '/tasks/by/month',
						},
						{
							name: 'Teams Overview',
							short_name: 'Teams',
							url: '/teams',
						},
					],
				},
			}),
			viteSentry(getSentryConfig(env)),
			visualizer({
				filename: 'stats.html',
			}) as PluginOption,
		],
		resolve: {
			alias: [
				{
					find: '@',
					replacement: pathSrc,
				},
			],
			extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue'],
		},
		server: {
			port: 4173,
			strictPort: true,
		},
		build: {
			// required for sentry debugging: tells vite to create source maps
			sourcemap: true,
			rollupOptions: {
				manualChunks: {
					// by putting tracking related stuff in a separated file we try to prevent unwanted blocking from ad-blockers
					sentry: ['./src/sentry.ts', '@sentry/vue', '@sentry/tracing']
				}
			},
		},
	}
})