astrolabe/vite.config.ts

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: {
        // Workbox's default globPatterns omit woff2; add it so the self-hosted
        // Plex fonts are precached too (offline is a core requirement — without
        // this the first offline load silently falls back to system fonts).
        globPatterns: ['**/*.{js,css,html,ico,png,svg,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,
      },
    }),
  ],
  // Vitest config (shares this file)
  test: {
    globals: true,
    environment: 'happy-dom',
    include: ['src/**/*.test.{ts,tsx}'],
  },
} as Parameters<typeof defineConfig>[0]);