/// 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'] } }, }, } })