chore(site): upgrade to Vite 8 (#23485)

site/vite.config.mts

@@ -1,6 +1,7 @@
 import * as path from "node:path";
+import babel from "@rolldown/plugin-babel";
 import { storybookTest } from "@storybook/addon-vitest/vitest-plugin";
-import react from "@vitejs/plugin-react";
+import react, { reactCompilerPreset } from "@vitejs/plugin-react";
 import { playwright } from "@vitest/browser-playwright";
 import { visualizer } from "rollup-plugin-visualizer";
 import type { PluginOption } from "vite";
@@ -12,18 +13,15 @@ import { defineConfig } from "vitest/config";
 // preserves performance instrumentation.
 const isProfilingBuild = process.env.CODER_REACT_PROFILING === "true";
 
+const compilerPreset = reactCompilerPreset();
+compilerPreset.rolldown.filter = {
+	...compilerPreset.rolldown.filter,
+	id: { include: [/src\/pages\/AgentsPage\//] },
+};
+
 const plugins: PluginOption[] = [
-	react({
-		babel: {
-			plugins: [],
-			overrides: [
-				{
-					test: /src\/pages\/AgentsPage\//,
-					plugins: ["babel-plugin-react-compiler"],
-				},
-			],
-		},
-	}),
+	react(),
+	babel({ presets: [compilerPreset] }),
 	checker({
 		typescript: true,
 	}),
@@ -48,7 +46,7 @@ export default defineConfig({
 		outDir: path.resolve(__dirname, "./out"),
 		emptyOutDir: false, // We need to keep the /bin folder and GITKEEP files
 		sourcemap: isProfilingBuild ? true : "hidden",
-		rollupOptions: {
+		rolldownOptions: {
 			input: {
 				index: path.resolve(__dirname, "./index.html"),
 				serviceWorker: path.resolve(__dirname, "./src/serviceWorker.ts"),
@@ -59,17 +57,15 @@ export default defineConfig({
 						? "[name].js"
 						: "assets/[name]-[hash].js";
 				},
-				manualChunks(id) {
-					if (!id.includes("node_modules")) {
-						return;
-					}
-
-					if (id.includes("@mui")) return "mui";
-					if (id.includes("@emotion")) return "emotion";
-					if (id.includes("monaco-editor")) return "monaco";
-					if (id.includes("@xterm")) return "xterm";
-					if (id.includes("emoji-mart")) return "emoji-mart";
-					if (id.includes("radix-ui")) return "radix-ui";
+				codeSplitting: {
+					groups: [
+						{ name: "mui", test: /@mui/ },
+						{ name: "emotion", test: /@emotion/ },
+						{ name: "monaco", test: /monaco-editor/ },
+						{ name: "xterm", test: /@xterm/ },
+						{ name: "emoji-mart", test: /emoji-mart/ },
+						{ name: "radix-ui", test: /radix-ui/ },
+					],
 				},
 			},
 		},