chore: upgrade to Vite 8 with rolldown

Author: dan-lee

docs/pages/docs/quickstart.md

@@ -10,7 +10,7 @@ have you up and running with a modern, customizable site that your developers wi
 
 ## Prerequisites
 
-- **Node.js** `22.7.0+` (or `20.19+`) - [Download here](https://nodejs.org/)
+- **Node.js** `22.12.0+` (or `20.19+`) - [Download here](https://nodejs.org/)
 - A terminal or command prompt
 - Your favorite code editor
 

examples/with-vite-config/vite.config.ts

@@ -3,7 +3,7 @@ import { visualizer } from "rollup-plugin-visualizer";
 /** @type {import('vite').UserConfig} */
 export default {
   build: {
-    rollupOptions: {
+    rolldownOptions: {
       plugins: [visualizer()],
     },
   },

packages/zudoku/cli.js

@@ -2,10 +2,10 @@
 
 import semver from "semver";
 
-if (!semver.satisfies(process.version, ">=20.19.0 <21.0.0 || >=22.7.0")) {
+if (!semver.satisfies(process.version, ">=20.19.0 <21.0.0 || >=22.12.0")) {
   // biome-ignore lint/suspicious/noConsole: Logging allowed here
   console.error(
-    `⚠️ Zudoku requires Node.js version >=20.19.0 or >=22.7.0. Your version: ${process.version}`,
+    `⚠️ Zudoku requires Node.js version >=20.19.0 or >=22.12.0. Your version: ${process.version}`,
   );
   process.exit(1);
 }

packages/zudoku/package.json

@@ -176,7 +176,6 @@
     "remark-frontmatter": "5.0.0",
     "remark-gfm": "4.0.1",
     "remark-mdx-frontmatter": "5.2.0",
-    "rollup": "4.59.0",
     "semver": "7.7.4",
     "shiki": "3.23.0",
     "sitemap": "9.0.1",
@@ -188,7 +187,7 @@
     "unist-util-visit": "5.1.0",
     "vaul": "1.1.2",
     "vfile": "6.0.3",
-    "vite": "7.3.1",
+    "vite": "8.0.0-beta.16",
     "yaml": "2.8.2",
     "yargs": "18.0.0",
     "zod": "4.3.6",

packages/zudoku/src/config/loader.ts

@@ -1,8 +1,8 @@
 import { stat } from "node:fs/promises";
 import path from "node:path";
 import colors from "picocolors";
-import type { RollupOutput, RollupWatcher } from "rollup";
 import {
+  type build,
   type ConfigEnv,
   runnerImport,
   loadEnv as viteLoadEnv,
@@ -106,9 +106,9 @@ async function loadZudokuConfigWithMeta(
   return configWithMetadata;
 }
 
-export function findOutputPathOfServerConfig(
-  output: RollupOutput | RollupOutput[] | RollupWatcher,
-) {
+type BuildResult = Awaited<ReturnType<typeof build>>;
+
+export function findOutputPathOfServerConfig(output: BuildResult) {
   if (Array.isArray(output)) {
     throw new Error("Expected a single output, but got an array");
   }

packages/zudoku/src/config/validators/icon-types.ts

@@ -3,12 +3,11 @@ import { ZudokuError, type ZudokuErrorOptions } from "../util/invariant.js";
 export class AuthorizationError extends Error {}
 
 export class OAuthAuthorizationError extends ZudokuError {
-  constructor(
-    message: string,
-    public error?: unknown,
-    options?: ZudokuErrorOptions,
-  ) {
+  error: unknown;
+
+  constructor(message: string, error?: unknown, options?: ZudokuErrorOptions) {
     super(message, options);
+    this.error = error;
   }
 }
 

packages/zudoku/src/lib/authentication/errors.ts

@@ -1,8 +1,7 @@
 import { mkdir, readFile, rename, rm, writeFile } from "node:fs/promises";
 import path from "node:path";
 import { build as esbuild } from "esbuild";
-import type { Rollup } from "vite";
-import { build as viteBuild } from "vite";
+import { createBuilder } from "vite";
 import { ZuploEnv } from "../app/env.js";
 import { getZudokuRootDir } from "../cli/common/package-json.js";
 import {
@@ -19,21 +18,6 @@ import { prerender } from "./prerender/prerender.js";
 
 const DIST_DIR = "dist";
 
-const extractAssets = (result: Rollup.RollupOutput) => {
-  const jsEntry = result.output.find(
-    (o) => "isEntry" in o && o.isEntry,
-  )?.fileName;
-  const cssEntries = result.output
-    .filter((o) => o.fileName.endsWith(".css"))
-    .map((o) => o.fileName);
-
-  if (!jsEntry || cssEntries.length === 0) {
-    throw new Error("Build failed. No js or css assets found");
-  }
-
-  return { jsEntry, cssEntries };
-};
-
 export type BuildOptions = {
   dir: string;
   ssr?: boolean;
@@ -43,49 +27,56 @@ export type BuildOptions = {
 export async function runBuild(options: BuildOptions) {
   const { dir, ssr, adapter = "node" } = options;
 
-  // Build client and server bundles
-  const viteClientConfig = await getViteConfig(dir, {
-    mode: "production",
-    command: "build",
-  });
-  const viteServerConfig = await getViteConfig(dir, {
+  const viteConfig = await getViteConfig(dir, {
     mode: "production",
     command: "build",
-    isSsrBuild: true,
   });
 
-  const clientResult = await viteBuild(viteClientConfig);
-  const serverResult = await viteBuild({
-    ...viteServerConfig,
-    logLevel: "silent",
-  });
+  const builder = await createBuilder(viteConfig);
 
-  if (Array.isArray(clientResult) || !("output" in clientResult)) {
-    throw new Error("Client build failed");
-  }
-  if (Array.isArray(serverResult) || !("output" in serverResult)) {
-    throw new Error("Server build failed");
-  }
+  invariant(builder.environments.client, "Client environment is missing");
+  invariant(builder.environments.ssr, "SSR environment is missing");
+
+  const [clientResult, serverResult] = await Promise.all([
+    builder.build(builder.environments.client),
+    builder.build(builder.environments.ssr),
+  ]);
+
+  invariant(
+    clientResult && !Array.isArray(clientResult) && "output" in clientResult,
+    "Client build failed to produce valid output",
+  );
+  invariant(serverResult, "SSR build failed to produce valid output");
 
   const { config } = await loadZudokuConfig(
     { mode: "production", command: "build" },
     dir,
   );
 
-  const { jsEntry, cssEntries } = extractAssets(clientResult);
+  const base = viteConfig.base ?? "/";
+  const clientOutDir = viteConfig.environments?.client?.build?.outDir;
+  const serverOutDir = viteConfig.environments?.ssr?.build?.outDir;
+
+  invariant(clientOutDir, "Client build outDir is missing");
+  invariant(serverOutDir, "Server build outDir is missing");
+
+  const jsEntry = clientResult.output.find(
+    (o) => "isEntry" in o && o.isEntry,
+  )?.fileName;
+  const cssEntries = clientResult.output
+    .filter((o) => o.fileName.endsWith(".css"))
+    .map((o) => o.fileName);
+
+  if (!jsEntry || cssEntries.length === 0) {
+    throw new Error("Build failed. No js or css assets found");
+  }
 
   const html = getBuildHtml({
-    jsEntry: joinUrl(viteClientConfig.base, jsEntry),
-    cssEntries: cssEntries.map((css) => joinUrl(viteClientConfig.base, css)),
+    jsEntry: joinUrl(base, jsEntry),
+    cssEntries: cssEntries.map((css) => joinUrl(base, css)),
     dir: config.site?.dir,
   });
 
-  invariant(viteClientConfig.build?.outDir, "Client build outDir is missing");
-  invariant(viteServerConfig.build?.outDir, "Server build outDir is missing");
-
-  const clientOutDir = viteClientConfig.build.outDir;
-  const serverOutDir = viteServerConfig.build.outDir;
-
   if (ssr) {
     // SSR: bundle entry.js and remove index.html
     await bundleSSREntry({
@@ -115,7 +106,7 @@ type PrerenderOptions = {
   html: string;
   clientOutDir: string;
   serverOutDir: string;
-  serverResult: Rollup.RollupOutput;
+  serverResult: Awaited<ReturnType<typeof import("vite").build>>;
 };
 
 const runPrerender = async (options: PrerenderOptions) => {

packages/zudoku/src/vite/build.ts

@@ -134,29 +134,44 @@ export async function getViteConfig(
       },
     },
     build: {
-      ssr: configEnv.isSsrBuild,
       sourcemap: true,
       target: "es2022",
-      outDir: path.resolve(
-        path.join(
-          dir,
-          "dist",
-          config.basePath ?? "",
-          configEnv.isSsrBuild ? "server" : "",
-        ),
-      ),
-      emptyOutDir: true,
-      rollupOptions: {
-        input:
-          configEnv.command === "build"
-            ? configEnv.isSsrBuild
-              ? ["zudoku/app/entry.server.tsx", config.__meta.configPath]
-              : "zudoku/app/entry.client.tsx"
-            : undefined,
-        external: [joinUrl(config.basePath, "/pagefind/pagefind.js")],
-      },
       chunkSizeWarningLimit: 1500,
     },
+    environments: {
+      client: {
+        build: {
+          outDir: path.resolve(path.join(dir, "dist", config.basePath ?? "")),
+          emptyOutDir: true,
+          rolldownOptions: {
+            input:
+              configEnv.command === "build"
+                ? "zudoku/app/entry.client.tsx"
+                : undefined,
+            external: [joinUrl(config.basePath, "/pagefind/pagefind.js")],
+          },
+        },
+      },
+      ssr: {
+        build: {
+          outDir: path.resolve(
+            path.join(dir, "dist", config.basePath ?? "", "server"),
+          ),
+          emptyOutDir: true,
+          rolldownOptions: {
+            logLevel: "warn",
+            checks: {
+              pluginTimings: process.env.ZUDOKU_ENV === "internal",
+            },
+            input:
+              configEnv.command === "build"
+                ? ["zudoku/app/entry.server.tsx", config.__meta.configPath]
+                : undefined,
+            external: [joinUrl(config.basePath, "/pagefind/pagefind.js")],
+          },
+        },
+      },
+    },
     experimental: {
       renderBuiltUrl(filename) {
         if (cdnUrl?.base && [".js", ".css"].includes(path.extname(filename))) {
@@ -171,12 +186,9 @@ export async function getViteConfig(
       },
     },
     optimizeDeps: {
-      esbuildOptions: {
-        target: "es2022",
-      },
       entries: [path.posix.join(getZudokuRootDir(), "src/{app,lib}/**")],
-      exclude: ["zudoku"],
       include: [
+        "@mdx-js/react",
         "react-dom/client",
         "zudoku/icons",
         ...(process.env.SENTRY_DSN ? ["@sentry/react"] : []),
@@ -195,6 +207,8 @@ export async function getViteConfig(
       removePluginHookHandleHotUpdate: "warn",
       removePluginHookSsrArgument: "warn",
       removeServerHot: "warn",
+      removeServerPluginContainer: "warn",
+      removeServerReloadModule: "warn",
     },
   };
 

packages/zudoku/src/vite/config.ts

@@ -64,7 +64,6 @@ export class DevServer {
     const configEnv: ZudokuConfigEnv = {
       mode: "development",
       command: "serve",
-      isSsrBuild: this.options.ssr,
     };
     const viteConfig = await getViteConfig(this.options.dir, configEnv);
     const { config } = await loadZudokuConfig(configEnv, this.options.dir);