import path from "node:path";

import tailwindcss from "@tailwindcss/vite";
import react from "@vitejs/plugin-react";
import rehypeHighlight from "rehype-highlight";
import remarkGfm from "remark-gfm";
import { defineConfig, type PluginOption, type UserConfig } from "vite";

import { envInterpolationPlugin } from "./src/config/env-interpolation-remark-plugin";

// For React 18 + MDX v2, use async defineConfig and dynamically import MDX
// See: https://github.com/brillout/vite-plugin-mdx/issues/44#issuecomment-1106448872
export default defineConfig(async (): Promise<UserConfig> => {
  const mdx = await import("@mdx-js/rollup");

  return {
    optimizeDeps: {
      include: ["react/jsx-runtime"],
    },
    plugins: [
      react(),
      mdx.default({
        include: ["**/*.mdx", "**/*.md"],
        remarkPlugins: [envInterpolationPlugin, remarkGfm],
        rehypePlugins: [rehypeHighlight],
      }),
      tailwindcss(),
    ] as PluginOption[],
    resolve: {
      alias: {
        "@": path.resolve(__dirname, "./src"),
        "@cv/routing": path.resolve(__dirname, "../../packages/routing/src"),
        "@cv/utils": path.resolve(__dirname, "../../packages/utils/index.ts"),
      },
    },
    server: {
      host: true,
      port: 3001,
    },
  };
});