vite.config.ts

import { defineConfig, Plugin } from 'vite'
import dts from 'vite-plugin-dts'
import { resolve } from 'path'
import { fileURLToPath, URL } from 'node:url'
import { exec } from 'child_process'
import { promisify } from 'util'

const execAsync = promisify(exec)

// Custom Tailwind CSS builder plugin
const tailwindCssPlugin = (): Plugin => ({
  name: 'tailwind-css-builder',
  async generateBundle() {
    console.log('Building Tailwind CSS...')
    try {
      await execAsync('npx @tailwindcss/cli -i ./src/index.css -o ./dist/style.css --minify')
      console.log('✓ Tailwind CSS built successfully')
    } catch (error) {
      console.error('✗ Failed to build Tailwind CSS:', error)
      throw error
    }
  }
})

export default defineConfig({
  plugins: [
    dts({
      insertTypesEntry: true,
      include: ['src/**/*'],
      exclude: ['src/**/*.stories.tsx', 'src/**/*.test.tsx', 'src/test/**/*']
    }),
    tailwindCssPlugin()
  ],
  build: {
    emptyOutDir: true, // Enable directory cleaning
    lib: {
      entry: resolve(fileURLToPath(new URL('.', import.meta.url)), 'src/index.ts'),
      name: 'RsTree',
      formats: ['es', 'cjs'],
      fileName: (format) => `index.${format === 'es' ? 'js' : 'cjs'}`
    },
    rollupOptions: {
      external: ['react', 'react-dom', '@tanstack/react-virtual', 'lucide-react', 'clsx', 'tailwind-merge'],
      output: {
        globals: {
          react: 'React',
          'react-dom': 'ReactDOM',
          '@tanstack/react-virtual': 'ReactVirtual',
          'lucide-react': 'LucideReact',
          'clsx': 'clsx',
          'tailwind-merge': 'twMerge'
        }
      }
    },
    sourcemap: true,
    minify: 'esbuild'
  }
})