Add Vite 6 support (#12469)

remix-run · Dec 17, 2024 · 5115991 · 5115991
1 parent 3be44ec
commit 5115991
Show file tree

Hide file tree

Showing 38 changed files with 1,423 additions and 2,315 deletions.
diff --git a/.changeset/lovely-lemons-bake.md b/.changeset/lovely-lemons-bake.md
@@ -0,0 +1,5 @@
+---
+"@react-router/dev": minor
+---
+
+Add support for Vite v6
diff --git a/integration/helpers/create-fixture.ts b/integration/helpers/create-fixture.ts
@@ -352,7 +352,7 @@ export async function createFixtureProject(
   init: FixtureInit = {},
   mode?: ServerMode
 ): Promise<string> {
-  let template = "vite-template";
+  let template = "vite-5-template";
   let integrationTemplateDir = path.resolve(__dirname, template);
   let projectName = `rr-${template}-${Math.random().toString(32).slice(2)}`;
   let projectDir = path.join(TMP_DIR, projectName);

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/...ation/helpers/vite-template/app/routes.ts → ...ion/helpers/vite-5-template/app/routes.ts b/...ation/helpers/vite-template/app/routes.ts → ...ion/helpers/vite-5-template/app/routes.ts
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/...ration/helpers/vite-template/package.json → ...tion/helpers/vite-5-template/package.json b/...ration/helpers/vite-template/package.json → ...tion/helpers/vite-5-template/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "integration-vite-template",
+  "name": "integration-vite-5-template",
   "version": "0.0.0",
   "private": true,
   "sideEffects": false,

diff --git a/integration/helpers/vite-5-template/public/favicon.ico b/integration/helpers/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/integration/helpers/vite-5-template/vite.config.ts b/integration/helpers/vite-5-template/vite.config.ts
@@ -0,0 +1,11 @@
+import { reactRouter } from "@react-router/dev/vite";
+import { defineConfig } from "vite";
+import tsconfigPaths from "vite-tsconfig-paths";
+
+export default defineConfig({
+  plugins: [
+    // @ts-expect-error `dev` depends on Vite 6, Plugin type is mismatched.
+    reactRouter(),
+    tsconfigPaths(),
+  ],
+});
diff --git a/integration/helpers/vite-6-template/.gitignore b/integration/helpers/vite-6-template/.gitignore
@@ -0,0 +1,6 @@
+node_modules
+
+/.cache
+/build
+.env
+.react-router
diff --git a/integration/helpers/vite-6-template/app/root.tsx b/integration/helpers/vite-6-template/app/root.tsx
@@ -0,0 +1,19 @@
+import { Links, Meta, Outlet, Scripts, ScrollRestoration } from "react-router";
+
+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.ts b/integration/helpers/vite-6-template/app/routes.ts
@@ -0,0 +1,4 @@
+import { type RouteConfig } from "@react-router/dev/routes";
+import { flatRoutes } from "@react-router/fs-routes";
+
+export default flatRoutes() satisfies RouteConfig;
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,16 @@
+import type { MetaFunction } from "react-router";
+
+export const meta: MetaFunction = () => {
+  return [
+    { title: "New React Router App" },
+    { name: "description", content: "Welcome to React Router!" },
+  ];
+};
+
+export default function Index() {
+  return (
+    <div style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.8" }}>
+      <h1>Welcome to React Router</h1>
+    </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="@react-router/node" />
+/// <reference types="vite/client" />
diff --git a/integration/helpers/vite-6-template/package.json b/integration/helpers/vite-6-template/package.json
@@ -0,0 +1,41 @@
+{
+  "name": "integration-vite-6-template",
+  "version": "0.0.0",
+  "private": true,
+  "sideEffects": false,
+  "type": "module",
+  "scripts": {
+    "dev": "react-router dev",
+    "build": "react-router build",
+    "start": "react-router-serve ./build/server/index.js",
+    "typecheck": "react-router typegen && tsc"
+  },
+  "dependencies": {
+    "@react-router/express": "workspace:*",
+    "@react-router/node": "workspace:*",
+    "@react-router/serve": "workspace:*",
+    "@vanilla-extract/css": "^1.10.0",
+    "@vanilla-extract/vite-plugin": "^3.9.2",
+    "express": "^4.19.2",
+    "isbot": "^5.1.11",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router": "workspace:*",
+    "serialize-javascript": "^6.0.1"
+  },
+  "devDependencies": {
+    "@react-router/dev": "workspace:*",
+    "@react-router/fs-routes": "workspace:*",
+    "@react-router/remix-routes-option-adapter": "workspace:*",
+    "@types/react": "^18.2.20",
+    "@types/react-dom": "^18.2.7",
+    "eslint": "^8.38.0",
+    "typescript": "^5.1.6",
+    "vite": "^6.0.0",
+    "vite-env-only": "^3.0.1",
+    "vite-tsconfig-paths": "^4.2.1"
+  },
+  "engines": {
+    "node": ">=20.0.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,27 @@
+{
+  "include": [
+    "env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".react-router/types/**/*.d.ts"
+  ],
+  "compilerOptions": {
+    "lib": ["DOM", "DOM.Iterable", "ES2022"],
+    "verbatimModuleSyntax": true,
+    "esModuleInterop": true,
+    "jsx": "react-jsx",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "resolveJsonModule": true,
+    "target": "ES2022",
+    "strict": true,
+    "allowJs": true,
+    "skipLibCheck": true,
+    "baseUrl": ".",
+    "paths": {
+      "~/*": ["./app/*"]
+    },
+    "noEmit": true,
+    "rootDirs": [".", ".react-router/types/"]
+  }
+}
diff --git a/...tion/helpers/vite-template/vite.config.ts → ...on/helpers/vite-6-template/vite.config.ts b/...tion/helpers/vite-template/vite.config.ts → ...on/helpers/vite-6-template/vite.config.ts
diff --git a/integration/helpers/vite-cloudflare-template/package.json b/integration/helpers/vite-cloudflare-template/package.json
@@ -26,7 +26,7 @@
     "@types/react": "^18.2.20",
     "@types/react-dom": "^18.2.7",
     "typescript": "^5.1.6",
-    "vite": "^5.1.0",
+    "vite": "^6.0.0",
     "wrangler": "^3.28.2"
   },
   "engines": {

diff --git a/integration/helpers/vite-template/public/favicon.ico b/integration/helpers/vite-template/public/favicon.ico
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";
@@ -123,19 +123,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 Array<{
+  templateName: TemplateName;
+  templateDisplayName: string;
+}>;
+
+function resolveDevPackageDir(root: string) {
+  return path.join(root, "node_modules", "@react-router", "dev");
+}
+
+function resolveDevPackageNodeModulesDir(root: string) {
+  return path.join(resolveDevPackageDir(root), "node_modules");
+}
+
+async function copyDirContents(
+  srcDir: string,
+  destDir: string,
+  filter?: (file: string) => boolean
+) {
+  for (const file of await fse.readdir(srcDir)) {
+    if (filter && !filter(path.normalize(file))) {
+      continue;
+    }
+    const srcFile = path.join(srcDir, file);
+    const 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 = `rr-${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 @react-router/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("/@react-router/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(
@@ -273,7 +327,10 @@ type Fixtures = {
     port: number;
     cwd: string;
   }>;
-  customDev: (files: Files) => Promise<{
+  customDev: (
+    files: Files,
+    templateName?: TemplateName
+  ) => Promise<{
     port: number;
     cwd: string;
   }>;
@@ -307,9 +364,9 @@ 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 }));
+      let cwd = await createProject(await files({ port }), template);
       stop = await customDev({ cwd, port });
       return { port, cwd };
     });

diff --git a/integration/package.json b/integration/package.json
@@ -27,6 +27,7 @@
     "glob": "8.0.3",
     "isbot": "^5.1.11",
     "npm-run-all": "^4.1.5",
+    "pathe": "^1.1.2",
     "postcss": "^8.4.19",
     "postcss-import": "^15.1.0",
     "prettier": "^2.7.1",
@@ -40,7 +41,7 @@
     "tailwindcss": "^3.3.0",
     "type-fest": "^4.0.0",
     "typescript": "^5.1.0",
-    "vite": "^5.1.0",
+    "vite": "^6.0.0",
     "vite-env-only": "^3.0.1",
     "vite-tsconfig-paths": "^4.2.2",
     "wait-on": "^7.0.1"
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		/// <reference types="@react-router/node" />
		/// <reference types="vite/client" />