Source

import { defineConfig, type Plugin } from "vite";
import react from "@vitejs/plugin-react";
import { templatePages } from "./template-pages";

// Leaves out two parts of Excalidraw that Canvas does not use: its translations (Canvas is in English)
// and its Mermaid importer (several MB of diagram libraries). That keeps the site small enough to
// publish in one piece. Pasted Mermaid text lands on the board as plain text instead.
function leaveOutUnused(): Plugin {
  return {
    name: "canvas-leave-out-unused",
    enforce: "pre",
    resolveId(source, importer) {
      if (source === "@excalidraw/mermaid-to-excalidraw") return "\0canvas-no-mermaid";
      if (importer?.includes("@excalidraw/excalidraw") && /\/locales\/(?!en-|percentages)[a-z]{2,3}(-[A-Z]{2,3})?-[A-Z0-9]+\.js$/.test(source)) return "\0canvas-no-locale";
      return null;
    },
    load(id) {
      if (id === "\0canvas-no-mermaid") return 'export async function parseMermaidToExcalidraw() { throw new Error("Mermaid is not included in Canvas."); }';
      if (id === "\0canvas-no-locale") return "export default {};";
      return null;
    },
  };
}

export default defineConfig({
  plugins: [leaveOutUnused(), react(), templatePages()],
  server: { port: 4342, strictPort: true },
  preview: { port: 4342, strictPort: true },
  build: {
    target: "es2020",
    chunkSizeWarningLimit: 2000,
    rollupOptions: {
      output: {
        // Excalidraw's font-subsetting worker (used when exporting) imports these two small modules;
        // in their own chunk the worker loads without pulling in the page's code, which needs a window.
        manualChunks: (id) => (/@excalidraw\/excalidraw\/dist\/prod\/chunk-(ZUYEQ4TG|SRAX5OIU)\.js$/.test(id) ? "excalidraw-env" : undefined),
      },
    },
  },
  define: { "process.env.IS_PREACT": JSON.stringify("false") },
});