import {
	defineConfig,
	transformWithEsbuild
} from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import {
	vitePluginForArco
} from '@arco-plugins/vite-vue'
import {
	resolve
} from 'path'
import svgLoader from 'vite-svg-loader'

export default defineConfig({
	publicDir: 'static',
	resolve: {
		extensions: ['.mjs', '.js', '.jsx', '.json'],
		alias: [{
			find: '@',
			replacement: resolve(__dirname, 'src')
		}]
	},
	css: {
		preprocessorOptions: {
			less: {
				modifyVars: {
					'@size-9': '40px',
					'arcoblue-6': '#e6217a'
				}
			}
		}
	},
	plugins: [
		vue({
			template: {
				transformAssetUrls: {
					includeAbsolute: false
				}
			}
		}),
		svgLoader(),
		vueJsx({
			include: /\.[jt]sx?$/
		}),
		vitePluginForArco(),
		{
			name: 'treat-js-files-as-jsx',
			async transform(code, id) {
				if (!id.match(/src\/.*\.js$/)) return null
				return transformWithEsbuild(code, id, {
					loader: 'jsx',
					jsx: 'automatic'
				})
			}
		}
	],
	optimizeDeps: {
		esbuildOptions: {
			loader: {
				'.js': 'jsx'
			}
		},
		exclude: ['__INDEX__']
	}
})