vite.config.js

const defineViteConfig = require("vite").defineConfig;
const react = require("@vitejs/plugin-react").default;
const nodeResolve = require("@rollup/plugin-node-resolve").default;
const path = require("path");
const viteExternalsPlugin =
  require("vite-plugin-externals").viteExternalsPlugin;
const { FIFTYONE_DIR } = process.env;
const dir = __dirname;
const IS_DEV = process.env.IS_DEV === "true";

function fiftyonePlugin() {
  if (!FIFTYONE_DIR) {
    throw new Error(
      `FIFTYONE_DIR environment variable not set. This is required to resolve @fiftyone/* imports.`
    );
  }

  return {
    name: "fiftyone-rollup",
    resolveId: {
      order: "pre",
      async handler(source) {
        if (source.startsWith("@fiftyone")) {
          const pkg = source.split("/")[1];
          const modulePath = `${FIFTYONE_DIR}/app/packages/${pkg}`;
          return this.resolve(modulePath, source, { skipSelf: true });
        }
        return null;
      },
    },
  };
}

const package = require(`${dir}/package.json`);
module.exports = defineViteConfig({
  mode: "development",
  plugins: [
    fiftyonePlugin(),
    nodeResolve(),
    react(),
    viteExternalsPlugin({
      react: "React",
      "react-dom": "ReactDOM",
      recoil: "recoil",
      "@fiftyone/state": "__fos__",
      "@fiftyone/operators": "__foo__",
      "@fiftyone/components": "__foc__",
      "@fiftyone/utilities": "__fou__",
      "@mui/material": "__mui__", // use mui from fiftyone
    }),
  ],
  build: {
    minify: IS_DEV ? false : true,
    lib: {
      entry: path.join(dir, package.main),
      name: package.name,
      fileName: (format) => `index.${format}.js`,
      formats: ["umd"],
    },
  },
  define: {
    "process.env.NODE_ENV": '"development"',
  },
  optimizeDeps: {
    exclude: ["react", "react-dom"],
  },
});