vite.config.ts

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { createRequire } from "node:module";
import { fileURLToPath } from "node:url";
import { dirname, resolve } from "node:path";
import { pythonHmr } from "./build-plugins/vite-plugin-python-hmr";
import { openAiKeyDevEndpoint } from "./build-plugins/vite-plugin-openai-key-dev";

const __dirname = dirname(fileURLToPath(import.meta.url));

// Single source of truth for the application version: ``package.json``.
// Injected at compile time so ``import.meta.env.VITE_APP_VERSION`` is
// always defined (no runtime ``.env`` file to maintain). Bump with
// ``npm version <patch|minor|major>``.
const pkg = createRequire(import.meta.url)("./package.json") as {
  version: string;
};

// Absolute path to the slim Plotly dist file. ``react-plotly.js``
// hardcodes ``require("plotly.js/dist/plotly")`` (the *full* package),
// but we ship the much smaller ``plotly.js-dist-min``. The two expose
// the same default export shape, so redirecting the bare specifier is
// safe — both the main resolver and esbuild's dep optimizer need the
// alias (see ``resolve.alias`` and ``optimizeDeps.esbuildOptions``).
const PLOTLY_DIST_MIN = resolve(
  __dirname,
  "node_modules/plotly.js-dist-min/plotly.min.js",
);

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), pythonHmr(), openAiKeyDevEndpoint()],
  // Static deployment friendly: relative paths so it works from any sub-path
  // (e.g. GitHub Pages project sites).
  base: "./",
  define: {
    // Replace ``import.meta.env.VITE_APP_VERSION`` literally at build time
    // with the version declared in ``package.json``. Used by the About
    // dialog (see ``src/components/HelpDialog.tsx``).
    "import.meta.env.VITE_APP_VERSION": JSON.stringify(pkg.version),
  },
  resolve: {
    alias: {
      // See ``PLOTLY_DIST_MIN`` above.
      "plotly.js/dist/plotly": PLOTLY_DIST_MIN,
    },
  },
  optimizeDeps: {
    // Vite pre-bundles ``react-plotly.js`` with esbuild on the first
    // request; that pass uses its *own* resolver, independent of
    // ``resolve.alias`` above. Replicate the alias here so the dep
    // optimizer also redirects ``plotly.js/dist/plotly`` to the slim
    // dist package.
    esbuildOptions: {
      plugins: [
        {
          name: "alias-plotly-dist",
          setup(build) {
            build.onResolve({ filter: /^plotly\.js\/dist\/plotly$/ }, () => ({
              path: PLOTLY_DIST_MIN,
            }));
          },
        },
      ],
    },
  },
  server: {
    port: 5173,
    // NOTE: do NOT enable Cross-Origin-Embedder-Policy=require-corp here.
    // It would block the Pyodide CDN <script> tag (loaded without
    // `crossorigin`) and silently break the whole runtime.  Basic Pyodide
    // does not need cross-origin isolation; only SharedArrayBuffer-based
    // threading does.  Re-enable later together with a `crossorigin`
    // attribute on the <script> tag if we ever opt into Pyodide threading.
  },
  build: {
    target: "es2022",
    sourcemap: true,
    rollupOptions: {
      output: {
        // Split the heaviest third-party libraries into their own
        // vendor chunks. They change far less often than application
        // code, so isolating them maximises long-term browser caching:
        // shipping a new app build no longer re-invalidates the ~3.5 MB
        // Plotly bundle or the CodeMirror editor stack. The CodeMirror
        // chunk is additionally loaded on demand (the Macro / Notebook
        // panels are ``React.lazy``-imported), so it stays out of the
        // initial download for users who never open an editor.
        manualChunks(id) {
          if (
            id.includes("/node_modules/plotly.js") ||
            id.includes("/node_modules/react-plotly.js/")
          ) {
            return "plotly";
          }
          if (
            id.includes("/node_modules/@codemirror/") ||
            id.includes("/node_modules/@lezer/")
          ) {
            return "codemirror";
          }
          if (
            id.includes("/node_modules/react/") ||
            id.includes("/node_modules/react-dom/") ||
            id.includes("/node_modules/scheduler/")
          ) {
            return "react-vendor";
          }
          return undefined;
        },
      },
    },
  },
  // Build Web Workers as ES modules. The kernel worker
  // (``src/runtime/kernelWorker.ts``) imports the full ``DataLabRuntime``,
  // whose dynamic ``import()`` calls force code-splitting — incompatible
  // with Vite's default ``iife`` worker format. We already instantiate
  // every worker with ``{ type: "module" }``, so an ES worker bundle is
  // the matching (and only valid) output format.
  worker: {
    format: "es",
  },
  // Make Python source files importable as raw strings.
  assetsInclude: ["**/*.py"],
});