add cloudflare workers support for all frontends (#366)

apps/cli/src/prompts/addons.ts

@@ -136,7 +136,7 @@ export async function getAddonsToAdd(
 	const response = await multiselect<Addons>({
 		message: "Select addons",
 		options: options,
-		required: true,
+		required: false,
 	});
 
 	if (isCancel(response)) {

apps/cli/src/prompts/config-prompts.ts

@@ -12,6 +12,7 @@ import type {
 	PackageManager,
 	ProjectConfig,
 	Runtime,
+	WebDeploy,
 } from "../types";
 import { getAddonsChoice } from "./addons";
 import { getApiChoice } from "./api";
@@ -26,6 +27,7 @@ import { getinstallChoice } from "./install";
 import { getORMChoice } from "./orm";
 import { getPackageManagerChoice } from "./package-manager";
 import { getRuntimeChoice } from "./runtime";
+import { getDeploymentChoice } from "./web-deploy";
 
 type PromptGroupResults = {
 	frontend: Frontend[];
@@ -41,6 +43,7 @@ type PromptGroupResults = {
 	git: boolean;
 	packageManager: PackageManager;
 	install: boolean;
+	webDeploy: WebDeploy;
 };
 
 export async function gatherConfig(
@@ -87,6 +90,13 @@ export async function gatherConfig(
 					results.backend,
 					results.runtime,
 				),
+			webDeploy: ({ results }) =>
+				getDeploymentChoice(
+					flags.webDeploy,
+					results.runtime,
+					results.backend,
+					results.frontend,
+				),
 			git: () => getGitChoice(flags.git),
 			packageManager: () => getPackageManagerChoice(flags.packageManager),
 			install: () => getinstallChoice(flags.install),
@@ -107,6 +117,7 @@ export async function gatherConfig(
 		result.auth = false;
 		result.dbSetup = "none";
 		result.examples = ["todo"];
+		result.webDeploy = "none";
 	}
 
 	if (result.backend === "none") {
@@ -117,6 +128,7 @@ export async function gatherConfig(
 		result.auth = false;
 		result.dbSetup = "none";
 		result.examples = [];
+		result.webDeploy = "none";
 	}
 
 	return {
@@ -136,5 +148,6 @@ export async function gatherConfig(
 		install: result.install,
 		dbSetup: result.dbSetup,
 		api: result.api,
+		webDeploy: result.webDeploy,
 	};
 }

apps/cli/src/prompts/runtime.ts

@@ -37,7 +37,7 @@ export async function getRuntimeChoice(
 	if (backend === "hono") {
 		runtimeOptions.push({
 			value: "workers",
-			label: "Cloudflare Workers (beta)",
+			label: "Cloudflare Workers",
 			hint: "Edge runtime on Cloudflare's global network",
 		});
 	}

apps/cli/src/prompts/web-deploy.ts

@@ -0,0 +1,122 @@
+import { cancel, isCancel, select } from "@clack/prompts";
+import pc from "picocolors";
+import { DEFAULT_CONFIG } from "../constants";
+import type { Backend, Frontend, Runtime, WebDeploy } from "../types";
+
+const WORKERS_COMPATIBLE_FRONTENDS: Frontend[] = [
+	"tanstack-router",
+	"react-router",
+	"solid",
+	"next",
+	"nuxt",
+	"svelte",
+];
+
+type DeploymentOption = {
+	value: WebDeploy;
+	label: string;
+	hint: string;
+};
+
+function getDeploymentDisplay(deployment: WebDeploy): {
+	label: string;
+	hint: string;
+} {
+	if (deployment === "workers") {
+		return {
+			label: "Cloudflare Workers",
+			hint: "Deploy to Cloudflare Workers using Wrangler",
+		};
+	}
+	return {
+		label: deployment,
+		hint: `Add ${deployment} deployment`,
+	};
+}
+
+export async function getDeploymentChoice(
+	deployment?: WebDeploy,
+	_runtime?: Runtime,
+	_backend?: Backend,
+	frontend: Frontend[] = [],
+): Promise<WebDeploy> {
+	if (deployment !== undefined) return deployment;
+
+	const hasCompatibleFrontend = frontend.some((f) =>
+		WORKERS_COMPATIBLE_FRONTENDS.includes(f),
+	);
+
+	if (!hasCompatibleFrontend) {
+		return "none";
+	}
+
+	const options: DeploymentOption[] = [
+		{
+			value: "workers",
+			label: "Cloudflare Workers",
+			hint: "Deploy to Cloudflare Workers using Wrangler",
+		},
+		{ value: "none", label: "None", hint: "Manual setup" },
+	];
+
+	const response = await select<WebDeploy>({
+		message: "Select web deployment",
+		options,
+		initialValue: DEFAULT_CONFIG.webDeploy,
+	});
+
+	if (isCancel(response)) {
+		cancel(pc.red("Operation cancelled"));
+		process.exit(0);
+	}
+
+	return response;
+}
+
+export async function getDeploymentToAdd(
+	frontend: Frontend[],
+	existingDeployment?: WebDeploy,
+): Promise<WebDeploy> {
+	const options: DeploymentOption[] = [];
+
+	if (
+		frontend.some((f) => WORKERS_COMPATIBLE_FRONTENDS.includes(f)) &&
+		existingDeployment !== "workers"
+	) {
+		const { label, hint } = getDeploymentDisplay("workers");
+		options.push({
+			value: "workers",
+			label,
+			hint,
+		});
+	}
+
+	if (existingDeployment && existingDeployment !== "none") {
+		return "none";
+	}
+
+	if (options.length > 0) {
+		options.push({
+			value: "none",
+			label: "None",
+			hint: "Skip deployment setup",
+		});
+	}
+
+	if (options.length === 0) {
+		return "none";
+	}
+
+	const response = await select<WebDeploy>({
+		message: "Select web deployment",
+		options,
+		initialValue: DEFAULT_CONFIG.webDeploy,
+	});
+
+	if (isCancel(response)) {
+		cancel(pc.red("Operation cancelled"));
+		process.exit(0);
+	}
+
+	return response;
+}