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

site/package.json

@@ -145,12 +145,13 @@
 		"@chromatic-com/storybook": "5.0.1",
 		"@octokit/types": "12.6.0",
 		"@playwright/test": "1.50.1",
-		"@storybook/addon-a11y": "10.2.10",
-		"@storybook/addon-docs": "10.2.10",
-		"@storybook/addon-links": "10.2.10",
-		"@storybook/addon-themes": "10.2.10",
-		"@storybook/addon-vitest": "10.2.10",
-		"@storybook/react-vite": "10.2.10",
+		"@rolldown/plugin-babel": "0.2.2",
+		"@storybook/addon-a11y": "10.3.3",
+		"@storybook/addon-docs": "10.3.3",
+		"@storybook/addon-links": "10.3.3",
+		"@storybook/addon-themes": "10.3.3",
+		"@storybook/addon-vitest": "10.3.3",
+		"@storybook/react-vite": "10.3.3",
 		"@swc/core": "1.3.38",
 		"@swc/jest": "0.2.37",
 		"@tailwindcss/typography": "0.5.19",
@@ -176,8 +177,8 @@
 		"@types/ssh2": "1.15.5",
 		"@types/ua-parser-js": "0.7.36",
 		"@types/uuid": "9.0.2",
-		"@vitejs/plugin-react": "5.1.1",
-		"@vitest/browser-playwright": "4.0.14",
+		"@vitejs/plugin-react": "6.0.1",
+		"@vitest/browser-playwright": "4.1.1",
 		"autoprefixer": "10.4.22",
 		"babel-plugin-react-compiler": "1.0.0",
 		"chromatic": "11.29.0",
@@ -195,17 +196,17 @@
 		"msw": "2.4.8",
 		"postcss": "8.5.6",
 		"protobufjs": "7.5.4",
-		"rollup-plugin-visualizer": "5.14.0",
+		"rollup-plugin-visualizer": "7.0.1",
 		"rxjs": "7.8.2",
 		"ssh2": "1.17.0",
-		"storybook": "10.2.10",
+		"storybook": "10.3.3",
 		"storybook-addon-remix-react-router": "6.0.0",
 		"tailwindcss": "3.4.18",
 		"ts-proto": "1.181.2",
 		"typescript": "6.0.2",
-		"vite": "7.2.6",
-		"vite-plugin-checker": "0.11.0",
-		"vitest": "4.0.14"
+		"vite": "8.0.2",
+		"vite-plugin-checker": "0.12.0",
+		"vitest": "4.1.1"
 	},
 	"browserslist": [
 		"chrome 110",

site/src/modules/workspaces/WorkspaceTiming/WorkspaceTimings.stories.tsx

@@ -67,12 +67,12 @@ export const ClickToClose: Story = {
 	},
 };
 
-const [first, ...others] = WorkspaceTimingsResponse.agent_script_timings;
+const failedScriptTimings = WorkspaceTimingsResponse.agent_script_timings;
 export const FailedScript: Story = {
 	args: {
 		agentScriptTimings: [
-			{ ...first, status: "exit_failure", exit_code: 1 },
-			...others,
+			{ ...failedScriptTimings[0], status: "exit_failure", exit_code: 1 },
+			...failedScriptTimings.slice(1),
 		],
 	},
 };

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/ },
+					],
 				},
 			},
 		},