In autoconfig consider vite projects using the vite plugin as already configured

Author: dario-piotrowicz

.changeset/old-boxes-find.md

@@ -0,0 +1,5 @@
+---
+"wrangler": minor
+---
+
+In autoconfig consider vite projects using the vite plugin as already configured

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",
 				},

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/autoconfig/details.ts

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

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

@@ -19,8 +19,7 @@ export abstract class Framework {
 	deploy?: string; // default is `npm run build && wrangler deploy`
 	typegen?: string; // default is `wrangler types`
 
-	/** Some frameworks (i.e. Nuxt) don't need additional configuration */
-	get configured() {
+	isConfigured(_projectPath: string): boolean | Promise<boolean> {
 		return false;
 	}
 

packages/wrangler/src/autoconfig/frameworks/utils/vite-config.ts

@@ -8,10 +8,62 @@ import type { types } from "recast";
 const b = recast.types.builders;
 const t = recast.types.namedTypes;
 
-export function transformViteConfig(
-	projectPath: string,
-	options: { viteEnvironmentName?: string } = {}
-) {
+export function checkIfViteConfigUsesCloudflarePlugin(
+	projectPath: string
+): boolean {
+	const filePath = getViteConfigPath(projectPath);
+
+	let importsCloudflarePlugin = false;
+	let usesCloudflarePlugin = false;
+
+	transformFile(filePath, {
+		visitProgram(n) {
+			// Only import if not already imported
+			if (
+				n.node.body.some(
+					(s) =>
+						s.type === "ImportDeclaration" &&
+						s.source.value === "@cloudflare/vite-plugin"
+				)
+			) {
+				importsCloudflarePlugin = true;
+				return this.traverse(n);
+			}
+
+			this.traverse(n);
+		},
+		visitCallExpression: function (n) {
+			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"
+				)
+			) {
+				usesCloudflarePlugin = true;
+				return this.traverse(n);
+			}
+
+			this.traverse(n);
+		},
+	});
+
+	return importsCloudflarePlugin && usesCloudflarePlugin;
+}
+
+function getViteConfigPath(projectPath: string): string {
 	const filePathTS = path.join(projectPath, `vite.config.ts`);
 	const filePathJS = path.join(projectPath, `vite.config.ts`);
 
@@ -25,6 +77,15 @@ export function transformViteConfig(
 		throw new Error("Could not find Vite config file to modify");
 	}
 
+	return filePath;
+}
+
+export function transformViteConfig(
+	projectPath: string,
+	options: { viteEnvironmentName?: string } = {}
+) {
+	const filePath = getViteConfigPath(projectPath);
+
 	transformFile(filePath, {
 		visitProgram(n) {
 			// Add an import of the @cloudflare/vite-plugin

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

@@ -1,10 +1,17 @@
 import { brandColor, dim } from "@cloudflare/cli/colors";
 import { installPackages } from "../c3-vendor/packages";
-import { transformViteConfig } from "./utils";
+import {
+	checkIfViteConfigUsesCloudflarePlugin,
+	transformViteConfig,
+} from "./utils";
 import { Framework } from ".";
 import type { ConfigurationOptions, ConfigurationResults } from ".";
 
 export class Vite extends Framework {
+	isConfigured(projectPath: string): boolean {
+		return checkIfViteConfigUsesCloudflarePlugin(projectPath);
+	}
+
 	async configure({
 		dryRun,
 		outputDir,