Autoconfig Vite improvements

.changeset/old-boxes-find.md

@@ -0,0 +1,5 @@
+---
+"wrangler": minor
+---
+
+Wrangler will no longer try to add additional configuration to projects using `@cloudflare/vite-plugin` when deploying or running `wrangler setup`

.changeset/petite-swans-train.md

@@ -0,0 +1,5 @@
+---
+"wrangler": minor
+---
+
+When a Vite project is detected, install `@cloudflare/vite-plugin`

packages/create-cloudflare/e2e/helpers/framework-helpers.ts

@@ -355,6 +355,43 @@ export async function verifyTypes(
 	}
 }
 
+export async function verifyCloudflareVitePluginConfigured(
+	{ verifyCloudflareVitePluginConfigured: verify }: FrameworkTestConfig,
+	projectPath: string,
+) {
+	if (!verify) {
+		return;
+	}
+
+	const viteConfigTsPAth = join(projectPath, `vite.config.ts`);
+	const viteConfigJsPath = join(projectPath, `vite.config.js`);
+
+	let viteConfigPath: string;
+
+	if (existsSync(viteConfigTsPAth)) {
+		viteConfigPath = viteConfigTsPAth;
+	} else if (existsSync(viteConfigJsPath)) {
+		viteConfigPath = viteConfigJsPath;
+	} else {
+		throw new Error("Could not find Vite config file to modify");
+	}
+
+	const prePackageJson = JSON.parse(
+		readFile(join(projectPath, "package.json")),
+	) as { devDependencies: Record<string, string> };
+
+	expect(
+		prePackageJson.devDependencies?.["@cloudflare/vite-plugin"],
+	).not.toBeUndefined();
+
+	const viteConfig = readFile(viteConfigPath);
+
+	expect(viteConfig).toContain(
+		'import { cloudflare } from "@cloudflare/vite-plugin"',
+	);
+	expect(viteConfig).toMatch(/plugins:\s*?\[.*?cloudflare.*?]/);
+}
+
 export function shouldRunTest(testConfig: FrameworkTestConfig) {
 	return (
 		// Skip if the test is quarantined

packages/create-cloudflare/e2e/helpers/run-c3.ts

@@ -60,9 +60,13 @@ export type RunnerConfig = {
 		};
 	};
 	/**
-	 * Specifies whether to verify generated types for the project
+	 * Specifies whether to verify generated types for the project.
 	 */
 	verifyTypes?: boolean;
+	/**
+	 * Verifies whether the Cloudflare Vite plugin has been installed and configured.
+	 */
+	verifyCloudflareVitePluginConfigured?: boolean;
 };
 
 export const runC3 = async (

packages/create-cloudflare/e2e/tests/frameworks/frameworks.test.ts

@@ -16,6 +16,7 @@ import {
 	runC3ForFrameworkTest,
 	shouldRunTest,
 	testGitCommitMessage,
+	verifyCloudflareVitePluginConfigured,
 	verifyDeployment,
 	verifyDevScript,
 	verifyPreviewScript,
@@ -150,6 +151,11 @@ describe
 						);
 
 						await verifyTypes(testConfig, frameworkConfig, project.path);
+
+						await verifyCloudflareVitePluginConfigured(
+							testConfig,
+							project.path,
+						);
 					} catch (e) {
 						expect.fail(
 							"Failed due to an exception while running C3. See logs for more details. Error: " +

packages/create-cloudflare/e2e/tests/frameworks/test-config.ts

@@ -865,6 +865,7 @@ function getExperimentalFrameworkTestConfig(
 			},
 			nodeCompat: false,
 			verifyTypes: false,
+			verifyCloudflareVitePluginConfigured: true,
 		},
 		{
 			name: "react-router",

packages/wrangler/src/__tests__/autoconfig/details/confirm-auto-config-details.test.ts

@@ -102,7 +102,7 @@ describe("autoconfig details - confirmAutoConfigDetails()", () => {
 				workerName: "my-astro-site",
 				buildCommand: "astro build",
 				framework: {
-					configured: false,
+					isConfigured: () => false,
 					configure: () => ({ wranglerConfig: {} }),
 					name: "astro",
 				},
@@ -116,7 +116,7 @@ describe("autoconfig details - confirmAutoConfigDetails()", () => {
 				  "configured": false,
 				  "framework": Object {
 				    "configure": [Function],
-				    "configured": false,
+				    "isConfigured": [Function],
 				    "name": "astro",
 				  },
 				  "outputDir": "",

packages/wrangler/src/__tests__/autoconfig/details/display-auto-config-details.test.ts

@@ -37,7 +37,7 @@ describe("autoconfig details - displayAutoConfigDetails()", () => {
 			workerName: "my-astro-app",
 			framework: {
 				name: "Astro",
-				configured: false,
+				isConfigured: () => false,
 				configure: () => ({ wranglerConfig: {} }),
 			},
 			buildCommand: "astro build",

packages/wrangler/src/__tests__/autoconfig/run.test.ts

@@ -162,6 +162,7 @@ describe("autoconfig (deploy)", () => {
 				framework: {
 					name: "Fake",
 					configure: configureSpy,
+					isConfigured: () => false,
 				} as unknown as Framework,
 				outputDir: "dist",
 				packageJson: {

packages/wrangler/src/autoconfig/details.ts

@@ -162,7 +162,7 @@ export async function getDetailsForAutoConfig({
 
 	return {
 		projectPath: projectPath,
-		configured: framework?.configured ?? false,
+		configured: framework?.isConfigured(projectPath) ?? false,
 		framework,
 		packageJson,
 		buildCommand: detectedFramework?.buildCommand ?? packageJsonBuild,

packages/wrangler/src/autoconfig/frameworks/get-framework.ts

@@ -6,6 +6,7 @@ import { SolidStart } from "./solid-start";
 import { Static } from "./static";
 import { SvelteKit } from "./sveltekit";
 import { TanstackStart } from "./tanstack";
+import { Vite } from "./vite";
 import type { Framework } from ".";
 
 export function getFramework(detectedFramework?: {
@@ -27,6 +28,8 @@ export function getFramework(detectedFramework?: {
 			return new SolidStart(detectedFramework.name);
 		case "qwik":
 			return new Qwik(detectedFramework.name);
+		case "vite":
+			return new Vite(detectedFramework.name);
 		default:
 			return new Static(detectedFramework?.name);
 	}

packages/wrangler/src/autoconfig/frameworks/index.ts

@@ -24,8 +24,7 @@ export type ConfigurationResults = {
 export abstract class Framework {
 	constructor(public name: string = "Static") {}
 
-	/** Some frameworks (i.e. Nuxt) don't need additional configuration */
-	get configured() {
+	isConfigured(_projectPath: string): boolean {
 		return false;
 	}
 

packages/wrangler/src/autoconfig/frameworks/react-router.ts

@@ -8,123 +8,11 @@ import dedent from "ts-dedent";
 import { logger } from "../../logger";
 import { transformFile } from "../c3-vendor/codemod";
 import { installPackages } from "../c3-vendor/packages";
+import { transformViteConfig } from "./utils/vite-config";
 import { Framework, getInstalledPackageVersion } from ".";
 import type { ConfigurationOptions, ConfigurationResults } from ".";
-import type { types } from "recast";
 
 const b = recast.types.builders;
-const t = recast.types.namedTypes;
-
-function isPluginsProp(
-	prop: unknown
-): prop is types.namedTypes.ObjectProperty | types.namedTypes.Property {
-	return (
-		(t.Property.check(prop) || t.ObjectProperty.check(prop)) &&
-		t.Identifier.check(prop.key) &&
-		prop.key.name === "plugins"
-	);
-}
-
-function transformViteConfig(projectPath: string) {
-	const filePathTS = path.join(projectPath, `vite.config.ts`);
-	const filePathJS = path.join(projectPath, `vite.config.js`);
-
-	let filePath: string;
-
-	if (existsSync(filePathTS)) {
-		filePath = filePathTS;
-	} else if (existsSync(filePathJS)) {
-		filePath = filePathJS;
-	} else {
-		throw new Error("Could not find Vite config file to modify");
-	}
-
-	transformFile(filePath, {
-		visitProgram(n) {
-			// Add an import of the @cloudflare/vite-plugin
-			// ```
-			// import {cloudflare} from "@cloudflare/vite-plugin";
-			// ```
-			const lastImportIndex = n.node.body.findLastIndex(
-				(statement) => statement.type === "ImportDeclaration"
-			);
-			const lastImport = n.get("body", lastImportIndex);
-			const importAst = b.importDeclaration(
-				[b.importSpecifier(b.identifier("cloudflare"))],
-				b.stringLiteral("@cloudflare/vite-plugin")
-			);
-
-			// Only import if not already imported
-			if (
-				!n.node.body.some(
-					(s) =>
-						s.type === "ImportDeclaration" &&
-						s.source.value === "@cloudflare/vite-plugin"
-				)
-			) {
-				lastImport.insertAfter(importAst);
-			}
-
-			return this.traverse(n);
-		},
-		visitCallExpression: function (n) {
-			// Add the imported plugin to the config
-			// ```
-			// defineConfig({
-			//   plugins: [cloudflare({ viteEnvironment: { name: 'ssr' } })],
-			// });
-			const callee = n.node.callee as types.namedTypes.Identifier;
-			if (callee.name !== "defineConfig") {
-				return this.traverse(n);
-			}
-
-			const config = n.node.arguments[0];
-			assert(t.ObjectExpression.check(config));
-			const pluginsProp = config.properties.find((prop) => isPluginsProp(prop));
-			assert(pluginsProp && t.ArrayExpression.check(pluginsProp.value));
-
-			// Only add the Cloudflare plugin if it's not already present
-			if (
-				!pluginsProp.value.elements.some(
-					(el) =>
-						el?.type === "CallExpression" &&
-						el.callee.type === "Identifier" &&
-						el.callee.name === "cloudflare"
-				)
-			) {
-				pluginsProp.value.elements.unshift(
-					b.callExpression(b.identifier("cloudflare"), [
-						b.objectExpression([
-							b.objectProperty(
-								b.identifier("viteEnvironment"),
-								b.objectExpression([
-									b.objectProperty(
-										b.identifier("name"),
-										b.stringLiteral("ssr")
-									),
-								])
-							),
-						]),
-					])
-				);
-			}
-
-			// Remove netlify plugins, as they conflict
-			//  netlifyReactRouter(), netlify()
-			pluginsProp.value.elements = pluginsProp.value.elements.filter((el) => {
-				if (
-					el?.type === "CallExpression" &&
-					el.callee.type === "Identifier" &&
-					["netlifyReactRouter", "netlify"].includes(el.callee.name)
-				) {
-					return false;
-				}
-				return true;
-			});
-			return false;
-		},
-	});
-}
 
 function transformReactRouterConfig(
 	projectPath: string,
@@ -358,7 +246,11 @@ export class ReactRouter extends Framework {
 				);
 			}
 
-			transformViteConfig(projectPath);
+			transformViteConfig(projectPath, {
+				viteEnvironmentName: "ssr",
+				incompatibleVitePlugins: ["netlifyReactRouter"],
+			});
+
 			transformReactRouterConfig(projectPath, viteEnvironmentKey);
 		}