import { resolve } from 'node:path'
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'
import tsconfigPaths from 'vite-tsconfig-paths'
import tailwindcss from '@tailwindcss/vite'
import { visualizer } from 'rollup-plugin-visualizer'

export default defineConfig(({ command }) => {
  const plugins = [
    react(),
    tsconfigPaths(),
    tailwindcss(),
  ];

  if (process.env.ANALYZE) {
    plugins.push(visualizer({
      template: 'sunburst',
      open: true,
      gzipSize: true,
      brotliSize: true,
      filename: 'bundle-analysis.html', 
    }));
  }
  return {
    plugins,
    server: {
      port: 3456,
      host: '127.0.0.1',
      open: true,
    },
    build: {
      outDir: 'dist',
      sourcemap: command === 'serve',
      commonjsOptions: {
        include: [/node_modules/]
      },
      rollupOptions: {
        output: {
          manualChunks: {
            'vendor': [
              'react',
              'react-dom',
            ],
          },
        },
      },
    },
    optimizeDeps: {
      include: []
    },
    resolve: {
      alias: {
        '@/': resolve(__dirname, './src/'),
      },
    },
    css: {
      modules: {
        localsConvention: 'camelCase',
      },
    },
    root: '.',
  };
});