Use detected framework names in autoconfig (#11366)

* Use detected framework names in autoconfig

* Fix type

* Snap

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

Co-authored-by: Somhairle MacLeòid <smacleod@cloudflare.com>

* Format

* Change signature for getFramework

---------

Co-authored-by: Somhairle MacLeòid <smacleod@cloudflare.com>

Author: ascorbic

.changeset/swift-pants-create.md

@@ -0,0 +1,5 @@
+---
+"wrangler": patch
+---
+
+Use correctly-formatted names when displayed detected framework details

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

@@ -158,7 +158,7 @@ describe("autoconfig (deploy)", () => {
 				configured: false,
 				workerName: "my-worker",
 				framework: {
-					name: "fake",
+					name: "Fake",
 					configure: configureSpy,
 				} as unknown as Framework,
 				outputDir: "dist",
@@ -173,7 +173,7 @@ describe("autoconfig (deploy)", () => {
 				"
 				Detected Project Settings:
 				 - Worker Name: my-worker
-				 - Framework: fake
+				 - Framework: Fake
 				 - Build Command: echo 'built' > build.txt
 				 - Output Directory: dist
 

packages/wrangler/src/__tests__/setup.test.ts

@@ -119,7 +119,7 @@ describe("wrangler setup", () => {
 
 				Detected Project Settings:
 				 - Worker Name: <WORKER_NAME>
-				 - Framework: static
+				 - Framework: Static
 				 - Output Directory: <cwd>/public
 
 

packages/wrangler/src/autoconfig/details.ts

@@ -131,9 +131,7 @@ export async function getDetailsForAutoConfig({
 
 	const detectedFramework: Settings | undefined = buildSettings?.[0];
 
-	const framework: AutoConfigDetails["framework"] = getFramework(
-		detectedFramework?.framework.id
-	);
+	const framework = getFramework(detectedFramework?.framework);
 	const packageJsonPath = resolve(projectPath, "package.json");
 
 	let packageJson: PackageJSON | undefined;

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

@@ -7,8 +7,6 @@ import type { ConfigurationOptions } from ".";
 import type { RawConfig } from "@cloudflare/workers-utils";
 
 export class Astro extends Framework {
-	name = "astro";
-
 	async configure({
 		outputDir,
 		dryRun,

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

@@ -1,14 +1,18 @@
 import { Astro } from "./astro";
 import { Static } from "./static";
 import { SvelteKit } from "./sveltekit";
+import type { Framework } from ".";
 
-export function getFramework(id: string) {
-	if (id === "astro") {
-		return new Astro();
+export function getFramework(detectedFramework?: {
+	id: string;
+	name: string;
+}): Framework {
+	switch (detectedFramework?.id) {
+		case "astro":
+			return new Astro(detectedFramework.name);
+		case "svelte-kit":
+			return new SvelteKit(detectedFramework.name);
+		default:
+			return new Static(detectedFramework?.name);
 	}
-	if (id === "svelte-kit") {
-		return new SvelteKit();
-	}
-
-	return new Static(id);
 }

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

@@ -7,7 +7,7 @@ export type ConfigurationOptions = {
 	dryRun: boolean;
 };
 export abstract class Framework {
-	abstract name: string;
+	constructor(public name: string = "Static") {}
 
 	// Override commands used to configure the project. Most frameworks should not need to do this, as their default detected build command will be sufficient
 	preview?: string; // default is `npm run build && wrangler dev`

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

@@ -3,12 +3,6 @@ import type { ConfigurationOptions } from ".";
 import type { RawConfig } from "@cloudflare/workers-utils";
 
 export class Static extends Framework {
-	name: string;
-	constructor(name: string) {
-		super();
-		this.name = name ?? "static";
-	}
-
 	configure({
 		outputDir,
 	}: ConfigurationOptions): Promise<RawConfig> | RawConfig {

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

@@ -8,8 +8,6 @@ import type { ConfigurationOptions } from ".";
 import type { RawConfig } from "@cloudflare/workers-utils";
 
 export class SvelteKit extends Framework {
-	name = "svelte-kit";
-
 	async configure({ dryRun }: ConfigurationOptions): Promise<RawConfig> {
 		const { dlx } = await getPackageManager();
 		if (!dryRun) {

packages/wrangler/src/autoconfig/run.ts

@@ -6,7 +6,6 @@ import { confirm } from "../dialogs";
 import { logger } from "../logger";
 import { sendMetricsEvent } from "../metrics";
 import { getDevCompatibilityDate } from "../utils/compatibility-date";
-import { capitalize } from "../utils/strings";
 import { addWranglerToAssetsIgnore } from "./add-wrangler-assetsignore";
 import { addWranglerToGitIgnore } from "./c3-vendor/add-wrangler-gitignore";
 import { installWrangler } from "./c3-vendor/packages";
@@ -233,7 +232,7 @@ export async function buildOperationsSummary(
 		logger.log(
 			`🛠️  ${
 				autoConfigDetails.framework.configurationDescription ??
-				`Configuring project for ${capitalize(autoConfigDetails.framework.name)}`
+				`Configuring project for ${autoConfigDetails.framework.name}`
 			}`
 		);
 		logger.log("");