malice

public

Star0

Watch0

105 commits 2 branches 0 tags 0 releases4.4 MiB

import { readdirSync, readFileSync } from 'node:fs';
import { join } from 'node:path';
import { fileURLToPath } from 'node:url';
import { defineConfig } from 'vite';
import { svelte } from '@sveltejs/vite-plugin-svelte';

const EMOJI_DATA_CHUNK = /^assets\/(compact|emojibase)-[^/]*\.js$/;

/**
 * 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.startsWith('twemoji/') && !EMOJI_DATA_CHUNK.test(fileName))
        .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(), twemojiPlugin(), precacheManifestPlugin()],
    define: { __MALICE_DEVICE__: JSON.stringify(device) },
    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: {
      outDir: device ? 'dist-device' : 'dist',
      emptyOutDir: true,
      rollupOptions: {
        input: {
          main: 'index.html',
          sw: 'src/sw.ts'
        },
        output: {
          entryFileNames: (chunk) => (chunk.name === 'sw' ? 'sw.js' : 'assets/[name]-[hash].js')
        }
      }
    }
  };
});

1	import { readdirSync, readFileSync } from 'node:fs';
2	import { join } from 'node:path';
3	import { fileURLToPath } from 'node:url';
4	import { defineConfig } from 'vite';
5	import { svelte } from '@sveltejs/vite-plugin-svelte';
6
7	const EMOJI_DATA_CHUNK = /^assets\/(compact\|emojibase)-[^/]*\.js$/;
8
9	/**
10	* The page isn't SW-controlled on first launch, so the worker chunk and the
11	* wasm can bypass fetch interception entirely and never get cached. Instead
12	* of relying on runtime fetches, prepend the full list of emitted files
13	* (chunks, assets, wasm) to sw.js as a global so install() can precache all
14	* of it directly, no separate request needed.
15	*/
16	function precacheManifestPlugin(): import('vite').Plugin {
17	return {
18	name: 'malice-sw-precache-manifest',
19	generateBundle(_options, bundle) {
20	const urls = Object.keys(bundle)
21	.filter((fileName) => fileName !== 'sw.js' && !fileName.startsWith('twemoji/') && !EMOJI_DATA_CHUNK.test(fileName))
22	.map((fileName) => `/${fileName}`);
23	const swChunk = bundle['sw.js'];
24	if (swChunk && swChunk.type === 'chunk') {
25	swChunk.code = `self.__MALICE_PRECACHE__=${JSON.stringify(urls)};\n${swChunk.code}`;
26	}
27	}
28	};
29	}
30
31	function twemojiPlugin(): import('vite').Plugin {
32	const dir = fileURLToPath(new URL('./node_modules/@twemoji/svg', import.meta.url));
33	const svgs = () => readdirSync(dir).filter((f) => f.endsWith('.svg'));
34	return {
35	name: 'malice-twemoji',
36	configureServer(server) {
37	server.middlewares.use('/twemoji', (req, res, next) => {
38	const name = decodeURIComponent((req.url ?? '').split('?')[0]).replace(/^\//, '');
39	if (!/^[0-9a-f-]+\.svg$/.test(name)) return next();
40	try {
41	res.setHeader('Content-Type', 'image/svg+xml');
42	res.end(readFileSync(join(dir, name)));
43	} catch {
44	res.statusCode = 404;
45	res.end();
46	}
47	});
48	},
49	generateBundle() {
50	for (const file of svgs()) {
51	this.emitFile({ type: 'asset', fileName: `twemoji/${file}`, source: readFileSync(join(dir, file)) });
52	}
53	}
54	};
55	}
56
57	export default defineConfig(({ mode }) => {
58	const device = mode === 'device';
59	return {
60	plugins: [svelte(), twemojiPlugin(), precacheManifestPlugin()],
61	define: { __MALICE_DEVICE__: JSON.stringify(device) },
62	assetsInclude: ['*/.wasm'],
63	resolve: {
64	alias: {
65	'malice:device-transport': device ? '/src/lib/device-transport.ts' : '/src/lib/device-transport.stub.ts'
66	}
67	},
68	server: {
69	host: '127.0.0.1',
70	port: 5173,
71	proxy: {
72	'/api': 'http://localhost:3000'
73	}
74	},
75	preview: {
76	host: '127.0.0.1',
77	port: 4173,
78	proxy: {
79	'/api': 'http://localhost:3000'
80	}
81	},
82	build: {
83	outDir: device ? 'dist-device' : 'dist',
84	emptyOutDir: true,
85	rollupOptions: {
86	input: {
87	main: 'index.html',
88	sw: 'src/sw.ts'
89	},
90	output: {
91	entryFileNames: (chunk) => (chunk.name === 'sw' ? 'sw.js' : 'assets/[name]-[hash].js')
92	}
93	}
94	}
95	};
96	});