vojo/vite.config.js

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { wasm } from '@rollup/plugin-wasm';
import { viteStaticCopy } from 'vite-plugin-static-copy';
import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin';
import { NodeGlobalsPolyfillPlugin } from '@esbuild-plugins/node-globals-polyfill';
import inject from '@rollup/plugin-inject';
import topLevelAwait from 'vite-plugin-top-level-await';
import { VitePWA } from 'vite-plugin-pwa';
import fs from 'fs';
import path from 'path';
import { execSync } from 'child_process';
import buildConfig from './build.config';

function resolveAppVersion() {
  if (process.env.VITE_APP_VERSION) return process.env.VITE_APP_VERSION;
  try {
    // --match 'v*' filters out non-semver tags (e.g. `redesign-p0-done`,
    // `pre-redesign`) so they never shadow the version-derivation chain.
    // Without it, `git describe` would pick the nearest tag of any shape and
    // the regex below would fall through to `return raw`, leaking the human
    // tag name into __APP_VERSION__ on the Welcome screen.
    const raw = execSync("git describe --tags --match 'v*' --always --dirty", {
      stdio: ['ignore', 'pipe', 'ignore'],
    })
      .toString()
      .trim();
    const m = raw.match(/^(v?\d+\.\d+)\.\d+-(\d+)-g([0-9a-f]+)(-dirty)?$/);
    if (m) {
      const base = m[1];
      const patch = m[2];
      const hash = m[3];
      const dirty = m[4] ?? '';
      return `${base}.${patch}+g${hash}${dirty}`;
    }
    return raw;
  } catch {
    const pkg = JSON.parse(fs.readFileSync(path.resolve('package.json'), 'utf8'));
    return `v${pkg.version}`;
  }
}

const copyFiles = {
  targets: [
    {
      src: 'node_modules/@element-hq/element-call-embedded/dist/*',
      dest: 'public/element-call',
    },
    {
      src: 'node_modules/pdfjs-dist/build/pdf.worker.min.mjs',
      dest: '',
      rename: 'pdf.worker.min.js',
    },
    {
      src: 'netlify.toml',
      dest: '',
    },
    {
      src: 'config.json',
      dest: '',
    },
    {
      src: 'public/manifest.json',
      dest: '',
    },
    {
      src: 'public/res/android',
      dest: 'public/',
    },
    {
      src: 'public/res/svg/vojo.svg',
      dest: 'public/android/',
    },
    {
      src: 'public/locales',
      dest: 'public/',
    },
  ],
};

// Dev-only overlay for runtime config. The SPA fetches `/config.json` at boot
// to read homeserver list, bot presets, push gateway config, etc. — production
// ships this file unmodified from `~/vojo/cinny/config.json` on the server.
// Locally we want per-developer overrides (e.g. `bots[id=telegram].experience.url`
// → `http://localhost:8081/` for a widget dev server) WITHOUT touching the
// committed `config.json`. This middleware reads optional `config.local.json`
// at the project root and overlays it on top, then serves the merged JSON.
//
// Merge contract:
//   - top-level fields: shallow override (local wins).
//   - `bots[]`: merged by `id` — the local entry shallow-merges over the base
//     entry with the same id, so `{ id: "telegram", experience: {...} }` is
//     enough to override one field of an existing bot. Bots that exist only
//     in local are appended as-is.
//
// Production builds ignore this plugin (`apply: 'serve'`) so prod
// `config.json` is served untouched by Caddy. `config.local.json` is in
// `.gitignore` and never deployed.
function mergeBotsById(base, local) {
  if (!Array.isArray(local)) return base;
  if (!Array.isArray(base)) return local;
  const byId = new Map();
  base.forEach((bot) => {
    if (bot && typeof bot.id === 'string') byId.set(bot.id, bot);
  });
  local.forEach((overlay) => {
    if (!overlay || typeof overlay.id !== 'string') return;
    const baseBot = byId.get(overlay.id);
    byId.set(overlay.id, baseBot ? { ...baseBot, ...overlay } : overlay);
  });
  return [...byId.values()];
}

function mergeRuntimeConfig(base, local) {
  if (!local || typeof local !== 'object') return base;
  const merged = { ...base, ...local };
  if (Array.isArray(local.bots) || Array.isArray(base?.bots)) {
    merged.bots = mergeBotsById(base?.bots, local.bots);
  }
  return merged;
}

function serveLocalConfigOverlay() {
  return {
    name: 'vite-plugin-serve-local-config-overlay',
    apply: 'serve',
    configureServer(server) {
      server.middlewares.use('/config.json', (req, res, next) => {
        const localPath = path.resolve('config.local.json');
        if (!fs.existsSync(localPath)) {
          next();
          return;
        }
        try {
          const baseRaw = fs.readFileSync(path.resolve('config.json'), 'utf8');
          const localRaw = fs.readFileSync(localPath, 'utf8');
          const merged = mergeRuntimeConfig(JSON.parse(baseRaw), JSON.parse(localRaw));
          res.setHeader('Content-Type', 'application/json');
          res.setHeader('Cache-Control', 'no-cache');
          res.end(JSON.stringify(merged));
        } catch (err) {
          next(err);
        }
      });
    },
  };
}

function serverMatrixSdkCryptoWasm(wasmFilePath) {
  return {
    name: 'vite-plugin-serve-matrix-sdk-crypto-wasm',
    configureServer(server) {
      server.middlewares.use((req, res, next) => {
        if (req.url === wasmFilePath) {
          const resolvedPath = path.join(
            path.resolve(),
            '/node_modules/@matrix-org/matrix-sdk-crypto-wasm/pkg/matrix_sdk_crypto_wasm_bg.wasm'
          );

          if (fs.existsSync(resolvedPath)) {
            res.setHeader('Content-Type', 'application/wasm');
            res.setHeader('Cache-Control', 'no-cache');

            const fileStream = fs.createReadStream(resolvedPath);
            fileStream.pipe(res);
          } else {
            res.writeHead(404);
            res.end('File not found');
          }
        } else {
          next();
        }
      });
    },
  };
}

export default defineConfig({
  appType: 'spa',
  publicDir: false,
  base: buildConfig.base,
  define: {
    __APP_VERSION__: JSON.stringify(resolveAppVersion()),
  },
  server: {
    port: 8080,
    host: true,
    fs: {
      // Allow serving files from one level up to the project root
      allow: ['..'],
    },
  },
  plugins: [
    serveLocalConfigOverlay(),
    serverMatrixSdkCryptoWasm('/node_modules/.vite/deps/pkg/matrix_sdk_crypto_wasm_bg.wasm'),
    topLevelAwait({
      // The export name of top-level await promise for each chunk module
      promiseExportName: '__tla',
      // The function to generate import names of top-level await promise in each chunk module
      promiseImportName: (i) => `__tla_${i}`,
    }),
    viteStaticCopy(copyFiles),
    vanillaExtractPlugin(),
    wasm(),
    react(),
    VitePWA({
      srcDir: 'src',
      filename: 'sw.ts',
      strategies: 'injectManifest',
      injectRegister: false,
      manifest: false,
      injectManifest: {
        injectionPoint: undefined,
      },
      devOptions: {
        enabled: true,
        type: 'module',
      },
    }),
  ],
  optimizeDeps: {
    esbuildOptions: {
      define: {
        global: 'globalThis',
      },
      plugins: [
        // Enable esbuild polyfill plugins
        NodeGlobalsPolyfillPlugin({
          process: false,
          buffer: true,
        }),
      ],
    },
  },
  build: {
    outDir: 'dist',
    sourcemap: true,
    copyPublicDir: false,
    rollupOptions: {
      plugins: [inject({ Buffer: ['buffer', 'Buffer'] })],
    },
  },
});