import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; import { VitePWA } from 'vite-plugin-pwa'; import { readFileSync } from 'node:fs'; import { fileURLToPath } from 'node:url'; const pkg = JSON.parse(readFileSync(new URL('./package.json', import.meta.url), 'utf-8')) as { version: string; }; export default defineConfig({ resolve: { alias: { '@': fileURLToPath(new URL('./src', import.meta.url)), '@core': fileURLToPath(new URL('./src/core', import.meta.url)), }, }, define: { __APP_VERSION__: JSON.stringify(pkg.version), }, build: { rollupOptions: { output: { // Split the heavy vendors so the chunk graph stays legible and the PWA // can precache/update them independently of app code. Monaco and the // Vega stack are each multi-MB; isolating them keeps app rebuilds small. manualChunks: { monaco: ['monaco-editor'], vega: ['vega', 'vega-lite', 'vega-embed'], }, }, }, }, plugins: [ react(), VitePWA({ registerType: 'prompt', includeAssets: ['favicon.svg', 'icon-maskable.svg', 'icon-mono.svg'], manifest: { name: 'Astrolabe', short_name: 'Astrolabe', description: 'A browser-based snippet manager for Vega-Lite visualizations.', // theme_color tints the OS/browser chrome; background_color is the splash // behind the icon. theme_color is the app accent (`--accent`, light theme); // background_color matches the light `--bg` the app boots into. theme_color: '#0e7490', background_color: '#ffffff', display: 'standalone', // SVG marks scale to any size — Chrome/Edge/desktop install accept SVG // icons. (iOS home-screen still prefers a PNG apple-touch-icon; tracked as // a known residual.) maskable = Android adaptive; monochrome = tinted mark. icons: [ { src: 'favicon.svg', sizes: 'any', type: 'image/svg+xml', purpose: 'any' }, { src: 'icon-maskable.svg', sizes: 'any', type: 'image/svg+xml', purpose: 'maskable' }, { src: 'icon-mono.svg', sizes: 'any', type: 'image/svg+xml', purpose: 'monochrome' }, ], }, workbox: { // Precache the app, plus the font woff2 the offline-first UI and the // common chart path need: // - the bare `latin` subset of every family (`*-latin-[0-9]*` — the // weight digit excludes `latin-ext`), the common chart case; // - every subset of the UI fonts (IBM Plex Sans + Mono) — these are // capability: the chrome must render any script (incl. latin-ext, // Cyrillic, Greek) offline. The Sans brace-list names the subsets so // it matches the UI Sans but not `ibm-plex-sans-condensed-*`, a roster // chart font that stays latin-only like the rest. // Every other subset (the roster's latin-ext and non-latin scripts) is // decoration with per-glyph fallback: left out of the precache and // runtime-cached on first use below, so the install stays small while the // roster still works offline once a script has been seen. (Default // globPatterns omit woff2 entirely — without this the first offline load // silently falls back to system fonts.) globPatterns: [ '**/*.{js,css,html,ico,png,svg}', '**/*-latin-[0-9]*.woff2', '**/ibm-plex-sans-{latin,latin-ext,cyrillic,cyrillic-ext,greek,greek-ext,vietnamese}-*.woff2', '**/ibm-plex-mono-*.woff2', ], // Monaco and Vega vendor chunks exceed Workbox's 2 MiB default; raise the // ceiling so the whole app (offline is a core requirement) is precached. maximumFileSizeToCacheInBytes: 6 * 1024 * 1024, runtimeCaching: [ { // Chart-roster non-latin font subsets: not precached, so fetch on // demand and keep them offline-after-first-use. Precached woff2 // (latin + Plex) are served from the precache and never reach here. urlPattern: /\.woff2$/, handler: 'CacheFirst', options: { cacheName: 'chart-font-subsets', expiration: { maxEntries: 120, maxAgeSeconds: 60 * 60 * 24 * 365 }, cacheableResponse: { statuses: [0, 200] }, }, }, ], }, }), ], // Vitest config (shares this file) test: { globals: true, environment: 'happy-dom', include: ['src/**/*.test.{ts,tsx}'], }, } as Parameters[0]);