Recognize Hydrogen as a known unsupported framework in autoconfig (#13187)

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

Author: dario-piotrowicz

.changeset/lemon-hoops-stick.md

@@ -0,0 +1,7 @@
+---
+"wrangler": patch
+---
+
+Recognize Hydrogen as a known unsupported framework in autoconfig
+
+Previously, Hydrogen projects were incorrectly identified as React Router (since Hydrogen uses React Router under the hood), leading to a confusing autoconfig experience. Hydrogen is now recognized as a distinct unsupported framework, so users see a clear message that Hydrogen is not yet supported instead of being guided through React Router configuration.

packages/wrangler/package.json

@@ -88,7 +88,7 @@
 		"@cloudflare/workers-utils": "workspace:*",
 		"@cloudflare/workflows-shared": "workspace:*",
 		"@cspotcode/source-map-support": "0.8.1",
-		"@netlify/build-info": "^10.2.0",
+		"@netlify/build-info": "^10.5.1",
 		"@sentry/node": "^7.86.0",
 		"@sentry/types": "^7.86.0",
 		"@sentry/utils": "^7.86.0",

packages/wrangler/src/__tests__/autoconfig/details/framework-detection/multiple-frameworks-detected.test.ts

@@ -71,6 +71,25 @@ describe("detectFramework() / multiple frameworks detected", () => {
 			expect(result.detectedFramework?.framework.id).toBe("waku");
 		});
 
+		it("returns Hydrogen (not React Router) when both Hydrogen and React Router are detected", async ({
+			expect,
+		}) => {
+			await seed({
+				"package.json": JSON.stringify({
+					dependencies: {
+						"@shopify/hydrogen": "2024",
+						"@react-router/dev": "7",
+						"react-router": "7",
+					},
+				}),
+				"package-lock.json": JSON.stringify({ lockfileVersion: 3 }),
+			});
+
+			const result = await detectFramework(process.cwd());
+
+			expect(result.detectedFramework?.framework.id).toBe("hydrogen");
+		});
+
 		it("returns first framework without throwing when multiple unknown frameworks are detected", async ({
 			expect,
 		}) => {
@@ -133,6 +152,25 @@ describe("detectFramework() / multiple frameworks detected", () => {
 			);
 		});
 
+		it("does not throw when Hydrogen and React Router are detected (Hydrogen is selected)", async ({
+			expect,
+		}) => {
+			await seed({
+				"package.json": JSON.stringify({
+					dependencies: {
+						"@shopify/hydrogen": "2024",
+						"@react-router/dev": "7",
+						"react-router": "7",
+					},
+				}),
+				"package-lock.json": JSON.stringify({ lockfileVersion: 3 }),
+			});
+
+			const result = await detectFramework(process.cwd());
+
+			expect(result.detectedFramework?.framework.id).toBe("hydrogen");
+		});
+
 		it("does not throw when Vite and another known framework are detected (Vite is filtered out)", async ({
 			expect,
 		}) => {

packages/wrangler/src/__tests__/autoconfig/frameworks/get-framework-class.test.ts

@@ -1,26 +1,37 @@
 import { describe, it } from "vitest";
-import { getFrameworkClass } from "../../../autoconfig/frameworks";
+import { getFrameworkClassInstance } from "../../../autoconfig/frameworks";
 import { NextJs } from "../../../autoconfig/frameworks/next";
+import { NoOpFramework } from "../../../autoconfig/frameworks/no-op";
 import { Static } from "../../../autoconfig/frameworks/static";
 
-describe("getFrameworkClass()", () => {
+describe("getFrameworkClassInstance()", () => {
 	it("should return a Static framework when frameworkId is unknown", ({
 		expect,
 	}) => {
-		const framework = getFrameworkClass("unknown-framework");
+		const framework = getFrameworkClassInstance("unknown-framework");
 
 		expect(framework).toBeInstanceOf(Static);
 		expect(framework.id).toBe("static");
 		expect(framework.name).toBe("Static");
 	});
 
-	it("should return a target framework when frameworkId is known", ({
+	it("should return a target framework when frameworkId is known and supported", ({
 		expect,
 	}) => {
-		const framework = getFrameworkClass("next");
+		const framework = getFrameworkClassInstance("next");
 
 		expect(framework).toBeInstanceOf(NextJs);
 		expect(framework.id).toBe("next");
 		expect(framework.name).toBe("Next.js");
 	});
+
+	it("should return a NoOpFramework for an unsupported framework (hono)", ({
+		expect,
+	}) => {
+		const framework = getFrameworkClassInstance("hono");
+
+		expect(framework).toBeInstanceOf(NoOpFramework);
+		expect(framework.id).toBe("hono");
+		expect(framework.name).toBe("Hono");
+	});
 });

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

@@ -14,7 +14,7 @@ import { confirm, prompt, select } from "../../dialogs";
 import { logger } from "../../logger";
 import { sendMetricsEvent } from "../../metrics";
 import { NpmPackageManager } from "../../package-manager";
-import { getFrameworkClass } from "../frameworks";
+import { getFrameworkClassInstance } from "../frameworks";
 import {
 	allFrameworksInfos,
 	staticFramework,
@@ -158,7 +158,7 @@ export async function getDetailsForAutoConfig({
 	const { detectedFramework, packageManager, isWorkspaceRoot } =
 		await detectFramework(projectPath, wranglerConfig);
 
-	const framework = getFrameworkClass(detectedFramework.framework.id);
+	const framework = getFrameworkClassInstance(detectedFramework.framework.id);
 	const packageJsonPath = resolve(projectPath, "package.json");
 
 	let packageJson: PackageJSON | undefined;
@@ -445,7 +445,7 @@ export async function confirmAutoConfigDetails(
 		}
 	);
 
-	updatedAutoConfigDetails.framework = getFrameworkClass(frameworkId);
+	updatedAutoConfigDetails.framework = getFrameworkClassInstance(frameworkId);
 
 	const outputDir = await prompt(
 		"What directory contains your applications' output/asset files?",

packages/wrangler/src/autoconfig/frameworks/all-frameworks.ts

@@ -2,10 +2,8 @@ import assert from "node:assert";
 import { Analog } from "./analog";
 import { Angular } from "./angular";
 import { Astro } from "./astro";
-import { Hono } from "./hono";
 import { NextJs } from "./next";
 import { Nuxt } from "./nuxt";
-import { CloudflarePages } from "./pages";
 import { Qwik } from "./qwik";
 import { ReactRouter } from "./react-router";
 import { SolidStart } from "./solid-start";
@@ -67,7 +65,6 @@ export const allKnownFrameworks = [
 	{
 		id: "hono",
 		name: "Hono",
-		class: Hono,
 		supported: false,
 	},
 	{
@@ -211,20 +208,25 @@ export const allKnownFrameworks = [
 	{
 		id: "cloudflare-pages",
 		name: "Cloudflare Pages",
-		class: CloudflarePages,
 		// Autoconfiguring a Pages project into a Workers one is not yet supported
 		supported: false,
 	},
+	{
+		id: "hydrogen",
+		name: "Hydrogen",
+		supported: false,
+	},
 ] as const satisfies FrameworkInfo[];
 
 /**
  * Type specific for the "static" framework.
  *
  * It is supported by autoconfig but, unlike all other frameworks, it doesn't have a package associated to it
  */
-type StaticFrameworkInfo = Omit<FrameworkInfo, "frameworkPackageInfo"> & {
-	supported: true;
-};
+type StaticFrameworkInfo = Omit<
+	Extract<FrameworkInfo, { supported: true }>,
+	"frameworkPackageInfo"
+>;
 
 export const staticFramework = {
 	id: "static",

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

@@ -1,5 +1,6 @@
 import assert from "node:assert";
 import { allFrameworksInfos, staticFramework } from "./all-frameworks";
+import { NoOpFramework } from "./no-op";
 import type { Framework } from "./framework-class";
 
 export type { Framework, PackageJsonScriptsOverrides } from "./framework-class";
@@ -20,17 +21,22 @@ export function isKnownFramework(frameworkId: string): boolean {
 }
 
 /**
- * Gets the class for a framework based on its id
+ * Gets a class instance for a framework based on its id
  *
  * @param frameworkId The target framework's id
  * @returns The class for the framework, defaulting to the static framework is the id is not recognized
  */
-export function getFrameworkClass(frameworkId: FrameworkInfo["id"]): Framework {
+export function getFrameworkClassInstance(
+	frameworkId: FrameworkInfo["id"]
+): Framework {
 	const targetedFramework = allFrameworksInfos.find(
 		(framework) => framework.id === frameworkId
 	);
 	const framework = targetedFramework ?? staticFramework;
-	return new framework.class({ id: framework.id, name: framework.name });
+	const targetClass =
+		framework.supported === false ? NoOpFramework : framework.class;
+
+	return new targetClass({ id: framework.id, name: framework.name });
 }
 
 /**
@@ -55,11 +61,11 @@ export function isFrameworkSupported(
 export type FrameworkInfo = {
 	id: string;
 	name: string;
-	class: typeof Framework;
 } & (
 	| { supported: false }
 	| {
 			supported: true;
+			class: typeof Framework;
 			frameworkPackageInfo: AutoConfigFrameworkPackageInfo;
 	  }
 );

…angler/src/autoconfig/frameworks/hono.ts …ngler/src/autoconfig/frameworks/no-op.tspackages/wrangler/src/autoconfig/frameworks/hono.ts renamed to packages/wrangler/src/autoconfig/frameworks/no-op.ts packages/wrangler/src/autoconfig/frameworks/hono.ts renamed to packages/wrangler/src/autoconfig/frameworks/no-op.ts

@@ -1,7 +1,7 @@
 import { Framework } from "./framework-class";
 import type { ConfigurationResults } from "./framework-class";
 
-export class Hono extends Framework {
+export class NoOpFramework extends Framework {
 	async configure(): Promise<ConfigurationResults> {
 		return {
 			wranglerConfig: {},