import {defineConfig} from 'vite'
import react from '@vitejs/plugin-react';
import tailwindcss from '@tailwindcss/vite'


export default defineConfig({
    plugins: [
        tailwindcss(),
        react()
    ],
    // ビルド設定
    build: {
        // インライン化するアセットの最大サイズを0に設定
        // （デフォルトは4で4k以下の画像ファイルはbase64encodeされる）
        assetsInlineLimit: 0,
        // 出力先のディレクトリ
        outDir: 'dist',
        // ファイル名にハッシュを付けないようにする
        rollupOptions: {
            // ビルドの起点となるファイルを指定する
            input: {
                main: 'assets/js/main.jsx',
            },
            output: {
                format: 'iife',
                entryFileNames: `[name].js`,
                chunkFileNames: `[name].js`,
                assetFileNames: `[name].[ext]`,

                globals: {
                    react: 'React',
                    'react-dom': 'ReactDOM',
                    '@wordpress/blocks': 'wp.blocks',
                    '@wordpress/data': 'wp.data',
                    '@wordpress/i18n': 'wp.i18n',
                    '@wordpress/element': 'wp.element',
                    '@wordpress/components': 'wp.components',
                    '@wordpress/api-fetch': 'wp.apiFetch',
                    '@wordpress/editor': 'wp.editor',
                },
            },
            external: [
                'react',
                'react-dom',
                '@wordpress/blocks',
                '@wordpress/data',
                '@wordpress/i18n',
                '@wordpress/element',
                '@wordpress/components',
                '@wordpress/api-fetch',
                '@wordpress/editor',
            ],
        },
    },

    // 開発サーバー設定
    server: {
        // 開発サーバーのポート番号
        port: 3000,
        // ホットリロード（HMR）がDocker環境でも機能するように設定
        hmr: {
            host: 'localhost',
        },
    },
})