vite.config.ts

import { defineConfig, IndexHtmlTransformContext, Plugin } from 'vite';
import path from 'path';
import fs from 'fs/promises';
import typescriptPlugin from '@rollup/plugin-typescript';
import { OutputAsset, OutputChunk } from 'rollup';
import { Input, InputAction, InputType, Packer } from 'roadroller';
import CleanCSS from 'clean-css';
import { statSync } from 'fs';
import ect from 'ect-bin';
import { defaultTerserOptions } from "./terser.config";
import { execFileSync } from "child_process";
import htmlMinify from "html-minifier";
import { minify } from 'terser';
import { ModuleKind, ScriptTarget, transpile } from 'typescript';

export default defineConfig(({ command, mode }) => {
  const config = {
    server: {
      port: 3000,
    },
    resolve: {
      alias: {
        '@': path.resolve(__dirname, './src'),
      }
    },
    plugins: [
      typescriptPlugin(),
      workletPlugin(),
    ],
  };

  if (command === 'build') {
    // @ts-ignore
    config.esbuild = false;
    // @ts-ignore
    config.base = '';
    // @ts-ignore
    config.build = {
      minify: 'terser',
      target: 'es2022',
      modulePreload: { polyfill: false },
      assetsInlineLimit: 800,
      assetsDir: '',
      sourcemap: true,
      rollupOptions: {
        output: {
          inlineDynamicImports: true,
          manualChunks: undefined,
          assetFileNames: `[name].[ext]`
        },
      },
      terserOptions: defaultTerserOptions,
    };
    config.plugins = [
      typescriptPlugin(),
      // roadrollerPlugin(),
      workletPlugin(),
      ectPlugin(),
      // visualizer({
      //   filename: 'dist/stats.html',
      //   open: false,
      //   gzipSize: true,
      //   brotliSize: true,
      //   sourcemap: true,
      // }),
    ];
  }

  return config;
});

function roadrollerPlugin(): Plugin {
  return {
    name: 'vite:roadroller',
    transformIndexHtml: {
      order: 'post',
      handler: async (html: string, ctx?: IndexHtmlTransformContext): Promise<string> => {
        // Only use this plugin during build
        if (!ctx || !ctx.bundle) {
          return html;
        }

        const options = {
          includeAutoGeneratedTags: true,
          removeAttributeQuotes: true,
          removeComments: true,
          removeRedundantAttributes: true,
          removeScriptTypeAttributes: true,
          removeStyleLinkTypeAttributes: true,
          sortClassName: true,
          useShortDoctype: true,
          collapseWhitespace: true,
          collapseInlineTagWhitespace: true,
          removeEmptyAttributes: true,
          removeOptionalTags: true,
          sortAttributes: true,
          minifyCSS: true,
        };

        const bundleOutputs = Object.values(ctx.bundle);
        const javascript = bundleOutputs.find((output) => output.fileName.endsWith('.js')) as OutputChunk;
        const css = bundleOutputs.find((output) => output.fileName.endsWith('.css')) as OutputAsset;
        const otherBundleOutputs = bundleOutputs.filter((output) => output !== javascript);
        if (otherBundleOutputs.length > 0) {
          otherBundleOutputs.forEach((output) => console.warn(`WARN Asset not inlined: ${output.fileName}`));
        }

        const cssInHtml = css ? embedCss(html, css) : html;
        const minifiedHtml = await htmlMinify.minify(cssInHtml, options);
        return embedJs(minifiedHtml, javascript);
      },
    },
  };
}

/**
 * Transforms the given JavaScript code into a packed version.
 * @param html The original HTML.
 * @param chunk The JavaScript output chunk from Rollup/Vite.
 * @returns The transformed HTML with the JavaScript embedded.
 */
async function embedJs(html: string, chunk: OutputChunk): Promise<string> {
  const scriptTagRemoved = html.replace(new RegExp(`<script[^>]*?src=[\./]*${chunk.fileName}[^>]*?></script>`), '');
  const htmlInJs = `document.write('${scriptTagRemoved}');` + chunk.code.trim();

  const inputs: Input[] = [
    {
      data: htmlInJs,
      type: 'js' as InputType,
      action: 'eval' as InputAction,
    },
  ];

  let options;
  if (process.env.USE_RR_CONFIG) {
    try {
      options = JSON.parse(await fs.readFile(`${__dirname}/roadroller-config.json`, 'utf-8'));
    } catch(error) {
      throw new Error('Roadroller config not found. Generate one or use the regular build option');
    }
  } else {
    options = { allowFreeVars: true };
  }

  const packer = new Packer(inputs, options);
  await Promise.all([
    fs.writeFile(`${path.join(__dirname, 'dist')}/output.js`, htmlInJs),
    packer.optimize(process.env.LEVEL_2_BUILD ? 2 : 0) // Regular builds use level 2, but rr config builds use the supplied params
  ]);
  const { firstLine, secondLine } = packer.makeDecoder();
  return `<script>\n${firstLine}\n${secondLine}\n</script>`;
}

/**
 * Embeds CSS into the HTML.
 * @param html The original HTML.
 * @param asset The CSS asset.
 * @returns The transformed HTML with the CSS embedded.
 */
function embedCss(html: string, asset: OutputAsset): string {
  const reCSS = new RegExp(`<link rel="stylesheet"[^>]*?href="[\./]*${asset.fileName}"[^>]*?>`);
  const code = `<style>${new CleanCSS({ level: 2 }).minify(asset.source as string).styles}</style>`;
  return html.replace(reCSS, code);
}

/**
 * Creates the worklet plugin that minifies and copies the audio worklet file.
 * @returns The worklet plugin.
 */
function workletPlugin(): Plugin {
  return {
    name: 'vite:worklet',
    configureServer(server) {
      return () => {
        server.middlewares.use(async (req, res, next) => {
          if (req.originalUrl !== '/music-worklet.js') {
            next();
          } else {
            try {
              const workletPath = path.resolve(__dirname, 'worklet/music-worklet.ts');
              const workletContent = await fs.readFile(workletPath, 'utf-8');
              const jsCode = transpile(workletContent, {
                target: ScriptTarget.ES2022,
                module: ModuleKind.ES2022,
                removeComments: false,
                strict: true,
              });
              
              res.setHeader('Content-Type', 'application/javascript');
              res.setHeader('Cache-Control', 'no-cache');
              res.end(jsCode);
            } catch (err) {
              res.statusCode = 500;
              res.end(`console.error('Worklet compilation failed: ${err.message}');`);
            }
          }
        });
        // server.middlewares.use('/music-worklet.js', async (req, res, next) => {
        //   try {
        //     const workletPath = path.resolve(__dirname, 'worklet/music-worklet.ts');
        //     const workletContent = await fs.readFile(workletPath, 'utf-8');
        //     const jsCode = transpile(workletContent, {
        //       target: ScriptTarget.ES2022,
        //       module: ModuleKind.ES2022,
        //       removeComments: false,
        //       strict: true,
        //     });
            
        //     res.setHeader('Content-Type', 'application/javascript');
        //     res.setHeader('Cache-Control', 'no-cache');
        //     res.end(jsCode);
        //   } catch (err) {
        //     res.statusCode = 500;
        //     res.end(`console.error('Worklet compilation failed: ${err.message}');`);
        //   }
        // });
      };
    },
    generateBundle: async (): Promise<void> => {
      try {
        // Read the TypeScript worklet file
        const workletPath = 'worklet/music-worklet.ts';
        const workletContent = await fs.readFile(workletPath, 'utf-8');
        
        // Transpile TypeScript to JavaScript
        const jsCode = transpile(workletContent, {
          target: ScriptTarget.ES2022,
          module: ModuleKind.ES2022,
          removeComments: true,
          strict: true,
        });
        
        // Minify the transpiled JavaScript
        const minified = await minify(jsCode, defaultTerserOptions);
        
        if (minified.code) {
          await fs.writeFile('dist/music-worklet.js', minified.code);
          console.log('✓ Audio worklet transpiled, minified and copied to dist/');
        } else {
          throw new Error('Terser minification failed');
        }
      } catch (err) {
        console.error('Worklet processing error:', err);
      }
    },
  };
}

/**
 * Creates the ECT plugin that uses Efficient-Compression-Tool to build a zip file.
 * @returns The ECT plugin.
 */
function ectPlugin(): Plugin {
  return {
    name: 'vite:ect',
    writeBundle: async (): Promise<void> => {
      try {
        const files = await fs.readdir('dist/');
        const assetFiles = files.filter(file => {
          // Include the worklet file specifically
          if (file === 'music-worklet.js') return true;
          // Exclude source maps, temporary files, CSS, HTML, and zip files
          return !file.includes('.js.map') && 
                 !file.includes('.css') && 
                 !file.includes('.html') && 
                 !file.includes('.zip') && 
                 !file.endsWith('.js') &&  // Exclude other JS files (but worklet is already included above)
                 !file.startsWith('output.') && // Exclude temporary output files
                 file !== 'assets';
        }).map(file => 'dist/' + file);
        
        const args = ['-strip', '-zip', '-10009', 'dist/index.html', ...assetFiles];
        const result = execFileSync(ect, args);
        const stats = statSync('dist/index.zip');
        const sizeInKB = stats.size;
        const progress = stats.size / 13312;
        const percentage = (100 * progress).toFixed(1);

        let colorCode = '';
        if (stats.size < 10000) {
          colorCode = '\x1b[32m'; // green
        } else if (stats.size > 13312) {
          colorCode = '\x1b[31m'; // red
        } else if (stats.size > 12900) {
            colorCode = '\x1b[38;5;214m'; // orange
        } else {
          colorCode = '\x1b[33m'; // yellow
        }

        const colorBar = '█'.repeat(Math.round(progress * 20));
        const grayBar = progress >= 0.95 ? '' : '█'.repeat(Math.round((1 - progress) * 20));
        const progressBar = `${colorCode}${colorBar}\x1b\x1b[37m${grayBar}\x1b`;
        console.log(`\n\nSize: ${colorCode}${sizeInKB}B / 13312B (${percentage}%)\x1b[0m  ${progressBar}\n`);

      } catch (err) {
        console.log('ECT error', err);
      }
    },
  };
}