malice

import { readdirSync, readFileSync } from 'node:fs';

import { join } from 'node:path';

import { fileURLToPath } from 'node:url';

import { defineConfig } from 'vite';

import { svelte, vitePreprocess } from '@sveltejs/vite-plugin-svelte';

/**

 * The page isn't SW-controlled on first launch, so the worker chunk and the

 * wasm can bypass fetch interception entirely and never get cached. Instead

 * of relying on runtime fetches, prepend the full list of emitted files

 * (chunks, assets, wasm) to sw.js as a global so install() can precache all

 * of it directly, no separate request needed.

 */

function precacheManifestPlugin(): import('vite').Plugin {

  return {

    name: 'malice-sw-precache-manifest',

    generateBundle(_options, bundle) {

      const urls = Object.keys(bundle)

        .filter(

          (fileName) => fileName !== 'sw.js' && fileName !== '.vite/manifest.json' && !fileName.startsWith('twemoji/')

        )

        .map((fileName) => `/${fileName}`);

      const swChunk = bundle['sw.js'];

      if (swChunk && swChunk.type === 'chunk') {

        swChunk.code = `self.__MALICE_PRECACHE__=${JSON.stringify(urls)};\n${swChunk.code}`;

      }

    }

  };

}

function twemojiPlugin(): import('vite').Plugin {

  const dir = fileURLToPath(new URL('./node_modules/@twemoji/svg', import.meta.url));

  const svgs = () => readdirSync(dir).filter((f) => f.endsWith('.svg'));

  return {

    name: 'malice-twemoji',

    configureServer(server) {

      server.middlewares.use('/twemoji', (req, res, next) => {

        const name = decodeURIComponent((req.url ?? '').split('?')[0]).replace(/^\//, '');

        if (!/^[0-9a-f-]+\.svg$/.test(name)) return next();

        try {

          res.setHeader('Content-Type', 'image/svg+xml');

          res.end(readFileSync(join(dir, name)));

        } catch {

          res.statusCode = 404;

          res.end();

        }

      });

    },

    generateBundle() {

      for (const file of svgs()) {

        this.emitFile({ type: 'asset', fileName: `twemoji/${file}`, source: readFileSync(join(dir, file)) });

      }

    }

  };

}

export default defineConfig(({ mode }) => {

  const device = mode === 'device';

  return {

    plugins: [svelte({ preprocess: vitePreprocess() }), twemojiPlugin(), ...(device ? [precacheManifestPlugin()] : [])],

    assetsInclude: ['**/*.wasm'],

    resolve: {

      alias: {

        'malice:device-transport': device ? '/src/lib/device-transport.ts' : '/src/lib/device-transport.stub.ts'

      }

    },

    server: {

      host: '127.0.0.1',

      port: 5173,

      proxy: {

        '/api': 'http://localhost:3000'

      }

    },

    preview: {

      host: '127.0.0.1',

      port: 4173,

      proxy: {

        '/api': 'http://localhost:3000'

      }

    },

    build: device

      ? {

          outDir: 'dist-device',

          emptyOutDir: true,

          manifest: true,

          rollupOptions: {

            input: {

              main: 'index.html',

              sw: 'src/sw.ts'

            },

            output: {

              entryFileNames: (chunk) => (chunk.name === 'sw' ? 'sw.js' : 'assets/[name]-[hash].js')

            }

          }

        }

      : {

          outDir: 'dist',

          emptyOutDir: true

        }

  };

});