vite.config.ts

import { resolve, join } from 'node:path';
import { existsSync } from 'node:fs';
import { readFile, writeFile, cp, mkdir, rm } from 'node:fs/promises';
import { defineConfig } from 'vite';
import { transform } from 'esbuild';
import solid from 'vite-plugin-solid';
import mkcert from 'vite-plugin-mkcert';

import pkg from './package.json';
const PENGU_PATH = pkg.config.penguPath;
const PLUGIN_NAME = pkg.name;

const getIndexCode = (port: number) => (
    `await import('https://localhost:${port}/@vite/client');
  export * from 'https://localhost:${port}/src/index.tsx';`
);

let port: number;
const outDir = resolve(__dirname, 'dist');
const pluginsDir = resolve(__dirname, PENGU_PATH, 'plugins', PLUGIN_NAME);

async function emptyDir(path: string) {
    if (existsSync(path)) {
        await rm(path, { recursive: true });
    }
    await mkdir(path, { recursive: true });
}

export default defineConfig((config) => ({
    define: {
        'process.env.ENV': config.command == 'build' ? '"production"' : '"development"',
        'process.env.PROD': config.command == 'build' ? 'true' : 'false',
        'process.env.DEV': config.command == 'build' ? 'false' : 'true',
    },
    build: {
        minify: true,
        cssMinify: true,
        rollupOptions: {
            output: {
                format: 'esm',
                entryFileNames: 'index.js',
                manualChunks: undefined,
                assetFileNames(name) {
                    if (name.name === 'style.css')
                        return 'index.css';
                    return 'assets/[name]-[hash][extname]';
                }
            },
            preserveEntrySignatures: 'strict',
            treeshake: 'smallest',
        },
        lib: {
            entry: resolve(__dirname, 'src/index.tsx'),
            fileName: 'index',
            formats: ['es'],
        },
    },
    server: {
        https: true,
        // port: 3000
    },
    publicDir: false,
    plugins: [
        solid(),
        mkcert(),
        {
            // Because vite doesn't allow minifying of ESM, we have to do it manually
            name: 'minify',
            apply: 'build',
            enforce: 'post',
            renderChunk: {
                order: 'post',
                async handler(code, chunk, _) {
                    if (chunk.fileName.endsWith('.js')) {
                        return await transform(code, { minify: true, treeShaking: true });
                    }

                    return code;
                }
            }
        },
        {
            name: 'll-serve',
            apply: 'serve',
            enforce: 'post',
            configureServer(server) {
                server.httpServer!.once('listening', async () => {
                    // @ts-ignore
                    port = server.httpServer.address()['port'];
                    await emptyDir(pluginsDir);
                    await writeFile(join(pluginsDir, 'index.js'), getIndexCode(port));
                });
            },
            transform: (code, id) => {
                if (/\.(ts|tsx|js|jsx)$/i.test(id)) return;
                return code.replace(/\/src\//g, `https://localhost:${port}/src/`)
            },
        },
        {
            name: 'll-build',
            apply: 'build',
            enforce: 'post',
            async closeBundle() {
                const indexJs = join(outDir, 'index.js');

                let jsCode = (await readFile(indexJs, 'utf-8'))
                    // Patch asset URLs
                    .replace(/\"\/assets\//g, `"//plugins/${PLUGIN_NAME}/assets/`)

                if (existsSync(join(outDir, 'index.css'))) {
                    const indexCss = join(outDir, 'index.css');

                    const cssCode = (await readFile(indexCss, 'utf-8'))
                        // Patch asset URLs
                        .replace(/url\(\/assets\//g, `url(./assets/`);
                    await writeFile(indexCss, cssCode);

                    jsCode = jsCode
                        // Import CSS module
                        .replace(/^/, 'import "./index.css";');
                }

                await writeFile(indexJs, jsCode);

                // Uncomment code below if you want to copy dist/ to pengu plugins folder after building

                // Copy output to pengu dir
                //await emptyDir(pluginsDir);
                //await cp(outDir, pluginsDir, {
                //    recursive: true,
                //});
            }
        }
    ]
}));