import { defineConfig, ConfigEnv, UserConfig } from 'vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import { FileSystemIconLoader } from 'unplugin-icons/loaders'
import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import Vue from '@vitejs/plugin-vue'
import VueJsx from '@vitejs/plugin-vue-jsx'
import terser from '@rollup/plugin-terser'
import path from 'path'

export default defineConfig(({ command, mode }: ConfigEnv): UserConfig => {
    return {
        build: {
            lib: {
                entry: path.resolve(__dirname, 'packages/index.ts'),
                name: 'skyline-ui',
                fileName: 'index'
            },
            rollupOptions: {
                treeshake: true,
                external: ['vue', 'element-plus'],
                output: {
                    globals: {
                        vue: 'Vue',
                        'element-plus': 'ElementPlus'
                    },
                    exports: 'named'
                },
                plugins: [terser({ compress: { drop_console: true } })]
            }
        },
        resolve: {
            alias: {
                '@': path.resolve(__dirname, 'src')
            }
        },
        css: {
            preprocessorOptions: {
                scss: {
                    additionalData: `@use "./packages/styles/element/index.scss" as *;`
                }
            }
        },
        plugins: [
            Vue(),
            VueJsx(),
            AutoImport({ dts: 'auto-imports.d.ts', resolvers: [IconsResolver()] }),
            Components({
                deep: true,
                extensions: ['vue', 'tsx'],
                dts: 'components.d.ts',
                include: [/\.vue$/, /\.vue\?vue/, /\.tsx$/, /\.tsx\?tsx/],
                resolvers: [
                    ElementPlusResolver({ importStyle: 'sass', directives: true }),
                    IconsResolver({
                        prefix: false,
                        enabledCollections: ['local']
                    })
                ]
            }),
            Icons({
                scale: 1,
                autoInstall: true,
                compiler: 'vue3',
                customCollections: {
                    local: FileSystemIconLoader(path.resolve(__dirname, 'packages/assets/icons'))
                }
            })
        ],
        server: {
            hmr: true,
            port: 9453,
            host: '0.0.0.0'
        }
    }
})