vite.config.ts

import { dirname, relative } from 'node:path'
import type { UserConfig } from 'vite'
import { defineConfig } from 'vite'
import Vue from '@vitejs/plugin-vue'
import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'
import Components from 'unplugin-vue-components/vite'
import AutoImport from 'unplugin-auto-import/vite'
// import windiConfig from './windi.config'
import { isDev, port, r } from './scripts/utils'

export const sharedConfig: UserConfig = {
    root: r('src'),
    resolve: {
        alias: {
            '~/': `${r('src')}/`,
        },
    },
    define: {
        __DEV__: isDev,
        'process.platform': null,
        'process.version': null,
        'process.env.NODE_ENV': JSON.stringify(
            process.env.NODE_ENV || 'production',
        ),
    },
    plugins: [
        Vue(),

        AutoImport({
            imports: [
                'vue',
                {
                    'webextension-polyfill': [['*', 'browser']],
                },
            ],
            dts: r('src/auto-imports.d.ts'),
        }),

        // https://github.com/antfu/unplugin-vue-components
        Components({
            dirs: [r('src/components')],
            // generate `components.d.ts` for ts support with Volar
            dts: true,
            resolvers: [
                // auto import icons
                IconsResolver({
                    componentPrefix: '',
                }),
            ],
        }),

        // https://github.com/antfu/unplugin-icons
        Icons(),

        // rewrite assets to use relative path
        {
            name: 'assets-rewrite',
            enforce: 'post',
            apply: 'build',
            transformIndexHtml(html, { path }) {
                return html.replace(
                    /"\/assets\//g,
                    `"${relative(dirname(path), '/assets')}/`,
                )
            },
        },
    ],
    optimizeDeps: {
        include: ['vue', '@vueuse/core', 'webextension-polyfill'],
        exclude: ['vue-demi'],
    },
}

export default defineConfig(({ command }) => ({
    ...sharedConfig,
    base: command === 'serve' ? `http://localhost:${port}/` : '/dist/',
    server: {
        port,
        hmr: {
            host: 'localhost',
        },
    },
    build: {
        outDir: r('extension/dist'),
        emptyOutDir: false,
        sourcemap: isDev ? 'inline' : false,
        // https://developer.chrome.com/docs/webstore/program_policies/#:~:text=Code%20Readability%20Requirements
        terserOptions: {
            mangle: false,
        },
        rollupOptions: {
            input: {
                background: r('src/background/index.html'),
                options: r('src/options/index.html'),
            },
        },
    },
    plugins: [...sharedConfig.plugins!],
}))