remix-run · markdalgleish · Dec 19, 2024 · Dec 19, 2024 · Dec 19, 2024 · Dec 19, 2024
diff --git a/.changeset/lovely-files-move.md b/.changeset/lovely-files-move.md
@@ -0,0 +1,5 @@
+---
+"@remix-run/dev": minor
+---
+
+Add Vite v6 support
diff --git a/.gitignore b/.gitignore
@@ -14,7 +14,7 @@ tsconfig.tsbuildinfo
 /fixtures/my-remix-app
 /fixtures/deno-app
 /integration/playwright-report
-/test-results
+test-results
 /uploads
 
 .eslintcache

diff --git a/docs/guides/typescript.md b/docs/guides/typescript.md
@@ -35,7 +35,7 @@ The Remix CLI will not perform any type checking. Instead, you'll want to use Ty
     "@types/react-dom": "^18.2.7",
     "eslint": "^8.23.1",
     "typescript": "^5.1.6",
-    "vite": "^5.1.4"
+    "vite": "^6.0.0"
   },
   "engines": {
     "node": ">=18.0.0"

diff --git a/integration/helpers/vite-template/.gitignore → ...ration/helpers/vite-5-template/.gitignore b/integration/helpers/vite-template/.gitignore → ...ration/helpers/vite-5-template/.gitignore
diff --git a/...ration/helpers/vite-template/app/root.tsx → ...tion/helpers/vite-5-template/app/root.tsx b/...ration/helpers/vite-template/app/root.tsx → ...tion/helpers/vite-5-template/app/root.tsx
diff --git a/...lpers/vite-template/app/routes/_index.tsx → ...ers/vite-5-template/app/routes/_index.tsx b/...lpers/vite-template/app/routes/_index.tsx → ...ers/vite-5-template/app/routes/_index.tsx
diff --git a/integration/helpers/vite-template/env.d.ts → integration/helpers/vite-5-template/env.d.ts b/integration/helpers/vite-template/env.d.ts → integration/helpers/vite-5-template/env.d.ts
diff --git a/integration/helpers/vite-5-template/package.json b/integration/helpers/vite-5-template/package.json
@@ -0,0 +1,43 @@
+{
+  "name": "integration-vite-5-template",
+  "version": "0.0.0",
+  "private": true,
+  "sideEffects": false,
+  "type": "module",
+  "scripts": {
+    "dev": "remix vite:dev",
+    "build": "remix vite:build",
+    "start": "remix-serve ./build/server/index.js",
+    "typecheck": "tsc"
+  },
+  "dependencies": {
+    "@remix-run/express": "workspace:*",
+    "@remix-run/node": "workspace:*",
+    "@remix-run/react": "workspace:*",
+    "@remix-run/serve": "workspace:*",
+    "@remix-run/server-runtime": "workspace:*",
+    "@vanilla-extract/css": "^1.10.0",
+    "@vanilla-extract/vite-plugin": "^3.9.2",
+    "express": "^4.20.0",
+    "isbot": "^4.1.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "serialize-javascript": "^6.0.1"
+  },
+  "devDependencies": {
+    "@remix-run/dev": "workspace:*",
+    "@remix-run/eslint-config": "workspace:*",
+    "@remix-run/route-config": "workspace:*",
+    "@types/react": "^18.2.20",
+    "@types/react-dom": "^18.2.7",
+    "eslint": "^8.38.0",
+    "typescript": "^5.1.6",
+    "vite": "5.1.8",
+    "vite-env-only": "^2.0.0",
+    "vite-tsconfig-paths": "^4.2.1",
+    "wrangler": "^3.24.0"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  }
+}
diff --git a/.../helpers/vite-template/public/favicon.ico → ...elpers/vite-5-template/public/favicon.ico b/.../helpers/vite-template/public/favicon.ico → ...elpers/vite-5-template/public/favicon.ico
diff --git a/...ation/helpers/vite-template/tsconfig.json → ...ion/helpers/vite-5-template/tsconfig.json b/...ation/helpers/vite-template/tsconfig.json → ...ion/helpers/vite-5-template/tsconfig.json
diff --git a/...tion/helpers/vite-template/vite.config.ts → ...on/helpers/vite-5-template/vite.config.ts b/...tion/helpers/vite-template/vite.config.ts → ...on/helpers/vite-5-template/vite.config.ts
diff --git a/integration/helpers/vite-6-template/.gitignore b/integration/helpers/vite-6-template/.gitignore
@@ -0,0 +1,5 @@
+node_modules
+
+/.cache
+/build
+.env
diff --git a/integration/helpers/vite-6-template/app/root.tsx b/integration/helpers/vite-6-template/app/root.tsx
@@ -0,0 +1,25 @@
+import {
+  Links,
+  Meta,
+  Outlet,
+  Scripts,
+  ScrollRestoration,
+} from "@remix-run/react";
+
+export default function App() {
+  return (
+    <html lang="en">
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <Meta />
+        <Links />
+      </head>
+      <body>
+        <Outlet />
+        <ScrollRestoration />
+        <Scripts />
+      </body>
+    </html>
+  );
+}
diff --git a/integration/helpers/vite-6-template/app/routes/_index.tsx b/integration/helpers/vite-6-template/app/routes/_index.tsx
@@ -0,0 +1,41 @@
+import type { MetaFunction } from "@remix-run/node";
+
+export const meta: MetaFunction = () => {
+  return [
+    { title: "New Remix App" },
+    { name: "description", content: "Welcome to Remix!" },
+  ];
+};
+
+export default function Index() {
+  return (
+    <div style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.8" }}>
+      <h1>Welcome to Remix</h1>
+      <ul>
+        <li>
+          <a
+            target="_blank"
+            href="https://remix.run/tutorials/blog"
+            rel="noreferrer"
+          >
+            15m Quickstart Blog Tutorial
+          </a>
+        </li>
+        <li>
+          <a
+            target="_blank"
+            href="https://remix.run/tutorials/jokes"
+            rel="noreferrer"
+          >
+            Deep Dive Jokes App Tutorial
+          </a>
+        </li>
+        <li>
+          <a target="_blank" href="https://remix.run/docs" rel="noreferrer">
+            Remix Docs
+          </a>
+        </li>
+      </ul>
+    </div>
+  );
+}
diff --git a/integration/helpers/vite-6-template/env.d.ts b/integration/helpers/vite-6-template/env.d.ts
@@ -0,0 +1,2 @@
+/// <reference types="@remix-run/node" />
+/// <reference types="vite/client" />
diff --git a/...ration/helpers/vite-template/package.json → ...tion/helpers/vite-6-template/package.json b/...ration/helpers/vite-template/package.json → ...tion/helpers/vite-6-template/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "integration-vite-template",
+  "name": "integration-vite-6-template",
   "version": "0.0.0",
   "private": true,
   "sideEffects": false,
@@ -15,6 +15,7 @@
     "@remix-run/node": "workspace:*",
     "@remix-run/react": "workspace:*",
     "@remix-run/serve": "workspace:*",
+    "@remix-run/server-runtime": "workspace:*",
     "@vanilla-extract/css": "^1.10.0",
     "@vanilla-extract/vite-plugin": "^3.9.2",
     "express": "^4.20.0",
@@ -31,7 +32,7 @@
     "@types/react-dom": "^18.2.7",
     "eslint": "^8.38.0",
     "typescript": "^5.1.6",
-    "vite": "5.1.8",
+    "vite": "^6.0.0",
     "vite-env-only": "^2.0.0",
     "vite-tsconfig-paths": "^4.2.1",
     "wrangler": "^3.24.0"

diff --git a/integration/helpers/vite-6-template/public/favicon.ico b/integration/helpers/vite-6-template/public/favicon.ico
diff --git a/integration/helpers/vite-6-template/tsconfig.json b/integration/helpers/vite-6-template/tsconfig.json
@@ -0,0 +1,21 @@
+{
+  "include": ["env.d.ts", "**/*.ts", "**/*.tsx"],
+  "compilerOptions": {
+    "lib": ["DOM", "DOM.Iterable", "ES2022"],
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "jsx": "react-jsx",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "resolveJsonModule": true,
+    "target": "ES2022",
+    "strict": true,
+    "allowJs": true,
+    "forceConsistentCasingInFileNames": true,
+    "baseUrl": ".",
+    "paths": {
+      "~/*": ["./app/*"]
+    },
+    "noEmit": true
+  }
+}
diff --git a/integration/helpers/vite-6-template/vite.config.ts b/integration/helpers/vite-6-template/vite.config.ts
@@ -0,0 +1,7 @@
+import { vitePlugin as remix } from "@remix-run/dev";
+import { defineConfig } from "vite";
+import tsconfigPaths from "vite-tsconfig-paths";
+
+export default defineConfig({
+  plugins: [remix(), tsconfigPaths()],
+});
diff --git a/integration/helpers/vite-cloudflare-template/package.json b/integration/helpers/vite-cloudflare-template/package.json
@@ -11,9 +11,10 @@
     "typecheck": "tsc"
   },
   "dependencies": {
-    "@remix-run/cloudflare": "2.15.1",
-    "@remix-run/cloudflare-pages": "2.15.1",
-    "@remix-run/react": "2.15.1",
+    "@remix-run/cloudflare": "workspace:*",
+    "@remix-run/cloudflare-pages": "workspace:*",
+    "@remix-run/react": "workspace:*",
+    "@remix-run/server-runtime": "workspace:*",
     "isbot": "^4.1.0",
     "miniflare": "^3.20231030.4",
     "react": "^18.2.0",
@@ -26,7 +27,7 @@
     "@types/react": "^18.2.20",
     "@types/react-dom": "^18.2.7",
     "typescript": "^5.1.6",
-    "vite": "5.1.8",
+    "vite": "^6.0.0",
     "vite-tsconfig-paths": "^4.2.1",
     "wrangler": "^3.24.0"
   },

diff --git a/integration/helpers/vite.ts b/integration/helpers/vite.ts
@@ -1,5 +1,5 @@
 import { spawn, spawnSync, type ChildProcess } from "node:child_process";
-import path from "node:path";
+import path from "pathe";
 import fs from "node:fs/promises";
 import type { Readable } from "node:stream";
 import url from "node:url";
@@ -96,19 +96,73 @@ export const EXPRESS_SERVER = (args: {
     app.listen(port, () => console.log('http://localhost:' + port));
   `;
 
-type TemplateName = "vite-template" | "vite-cloudflare-template";
+type TemplateName =
+  | "vite-5-template"
+  | "vite-6-template"
+  | "vite-cloudflare-template";
+
+export const viteMajorTemplates = [
+  { templateName: "vite-5-template", templateDisplayName: "Vite 5" },
+  { templateName: "vite-6-template", templateDisplayName: "Vite 6" },
+] as const satisfies ReadonlyArray<{
+  templateName: TemplateName;
+  templateDisplayName: string;
+}>;
+
+function resolveDevPackageDir(root: string) {
+  return path.join(root, "node_modules", "@remix-run", "dev");
+}
+
+function resolveDevPackageNodeModulesDir(root: string) {
+  return path.join(resolveDevPackageDir(root), "node_modules");
+}
+
+async function copyDirContents(
+  srcDir: string,
+  destDir: string,
+  filter?: (file: string) => boolean
+) {
+  for (let file of await fse.readdir(srcDir)) {
+    if (filter && !filter(path.normalize(file))) {
+      continue;
+    }
+    let srcFile = path.join(srcDir, file);
+    let destFile = path.join(destDir, file);
+    await fse.copy(srcFile, destFile, { errorOnExist: true });
+  }
+}
 
 export async function createProject(
   files: Record<string, string> = {},
-  templateName: TemplateName = "vite-template"
+  templateName: TemplateName = "vite-5-template"
 ) {
   let projectName = `remix-${Math.random().toString(32).slice(2)}`;
   let projectDir = path.join(TMP_DIR, projectName);
   await fse.ensureDir(projectDir);
 
   // base template
   let templateDir = path.resolve(__dirname, templateName);
-  await fse.copy(templateDir, projectDir, { errorOnExist: true });
+
+  // When we copy the template, we need to filter out the version of Vite
+  // installed locally within @remix-run/dev. If we don't do this, the dev
+  // package doesn't use the version of Vite defined within the test template
+  // which means we can't run integration tests across different versions of
+  // Vite. Since pnpm uses symlinks for dependencies, we need to perform the
+  // copy in multiple steps so that we can filter at each level.
+  await fse.copy(templateDir, projectDir, {
+    errorOnExist: true,
+    filter: (src) => !path.normalize(src).endsWith("/@remix-run/dev"),
+  });
+  await copyDirContents(
+    resolveDevPackageDir(templateDir),
+    resolveDevPackageDir(projectDir),
+    (file) => file !== "node_modules"
+  );
+  await copyDirContents(
+    resolveDevPackageNodeModulesDir(templateDir),
+    resolveDevPackageNodeModulesDir(projectDir),
+    (file) => file !== "vite"
+  );
 
   // user-defined files
   await Promise.all(
@@ -246,7 +300,10 @@ type Fixtures = {
     port: number;
     cwd: string;
   }>;
-  customDev: (files: Files) => Promise<{
+  customDev: (
+    files: Files,
+    templateName?: TemplateName
+  ) => Promise<{
     port: number;
     cwd: string;
   }>;
@@ -280,7 +337,7 @@ export const test = base.extend<Fixtures>({
   // eslint-disable-next-line no-empty-pattern
   customDev: async ({}, use) => {
     let stop: (() => unknown) | undefined;
-    await use(async (files) => {
+    await use(async (files, template) => {
       let port = await getPort();
       let cwd = await createProject(await files({ port }));
       stop = await customDev({ cwd, port });

diff --git a/integration/package.json b/integration/package.json
@@ -10,7 +10,7 @@
   "dependencies": {
     "@cloudflare/kv-asset-handler": "^0.3.0",
     "@cloudflare/workers-types": "^4.20230518.0",
-    "@playwright/test": "^1.33.0",
+    "@playwright/test": "^1.49.1",
     "@remix-run/dev": "workspace:*",
     "@remix-run/express": "workspace:*",
     "@remix-run/node": "workspace:*",
@@ -30,6 +30,7 @@
     "globby": "^11.1.0",
     "isbot": "^4.1.0",
     "npm-run-all": "^4.1.5",
+    "pathe": "^1.1.2",
     "pidtree": "^0.6.0",
     "postcss": "^8.4.19",
     "postcss-import": "^15.1.0",
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		/// <reference types="@remix-run/node" />
		/// <reference types="vite/client" />