chore: graduate nuxt, gatsby, angular, vue templates

.changeset/slow-numbers-spend.md

@@ -0,0 +1,5 @@
+---
+"create-cloudflare": patch
+---
+
+graduate Angular, Gatsby and Nuxt (Workers) templates from experimental

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

@@ -2,40 +2,6 @@ import { keys, LONG_TIMEOUT } from "../helpers";
 
 export default function getFrameworkTestConfigExperimental() {
 	return {
-		angular: {
-			testCommitMessage: true,
-			timeout: LONG_TIMEOUT,
-			unsupportedOSs: ["win32"],
-			unsupportedPms: ["bun"],
-			verifyDeploy: {
-				route: "/",
-				expectedText: "Congratulations! Your app is running.",
-			},
-			verifyPreview: {
-				route: "/",
-				expectedText: "Congratulations! Your app is running.",
-			},
-			flags: ["--style", "sass"],
-		},
-		gatsby: {
-			unsupportedPms: ["bun", "pnpm"],
-			promptHandlers: [
-				{
-					matcher: /Would you like to use a template\?/,
-					input: ["n"],
-				},
-			],
-			testCommitMessage: true,
-			timeout: LONG_TIMEOUT,
-			verifyDeploy: {
-				route: "/",
-				expectedText: "Gatsby!",
-			},
-			verifyPreview: {
-				route: "/",
-				expectedText: "Gatsby!",
-			},
-		},
 		hono: {
 			testCommitMessage: true,
 			unsupportedOSs: ["win32"],
@@ -128,24 +94,6 @@ export default function getFrameworkTestConfigExperimental() {
 				"yarn",
 			],
 		},
-		nuxt: {
-			testCommitMessage: true,
-			timeout: LONG_TIMEOUT,
-			unsupportedPms: ["yarn"], // Currently nitro requires youch which expects Node 20+, and yarn will fail hard since we run on Node 18
-			unsupportedOSs: ["win32"],
-			verifyDeploy: {
-				route: "/",
-				expectedText: "Welcome to Nuxt!",
-			},
-			verifyPreview: {
-				route: "/test",
-				expectedText: "C3_TEST",
-			},
-			verifyBuildCfTypes: {
-				outputFile: "worker-configuration.d.ts",
-				envInterfaceName: "Env",
-			},
-		},
 		solid: {
 			promptHandlers: [
 				{
@@ -202,19 +150,5 @@ export default function getFrameworkTestConfigExperimental() {
 				expectedText: "C3_TEST",
 			},
 		},
-		vue: {
-			argv: ["--ts"],
-			testCommitMessage: true,
-			unsupportedOSs: ["win32"],
-			verifyDeploy: {
-				route: "/",
-				expectedText: "Vite App",
-			},
-			verifyPreview: {
-				previewArgs: ["--host=127.0.0.1"],
-				route: "/",
-				expectedText: "Vite App",
-			},
-		},
 	};
 }

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

@@ -107,7 +107,8 @@ export default function getFrameworkTestConfig(pm: string) {
 			},
 			flags: ["--skipTailwind"],
 		},
-		angular: {
+		"angular:pages": {
+			argv: ["--platform", "pages"],
 			testCommitMessage: true,
 			timeout: LONG_TIMEOUT,
 			unsupportedOSs: ["win32"],
@@ -122,7 +123,44 @@ export default function getFrameworkTestConfig(pm: string) {
 			},
 			flags: ["--style", "sass"],
 		},
-		gatsby: {
+		"angular:workers": {
+			argv: ["--platform", "workers"],
+			testCommitMessage: true,
+			timeout: LONG_TIMEOUT,
+			unsupportedOSs: ["win32"],
+			unsupportedPms: ["bun"],
+			verifyDeploy: {
+				route: "/",
+				expectedText: "Congratulations! Your app is running.",
+			},
+			verifyPreview: {
+				route: "/",
+				expectedText: "Congratulations! Your app is running.",
+			},
+			flags: ["--style", "sass"],
+		},
+		"gatsby:pages": {
+			argv: ["--platform", "pages"],
+			unsupportedPms: ["bun", "pnpm"],
+			promptHandlers: [
+				{
+					matcher: /Would you like to use a template\?/,
+					input: ["n"],
+				},
+			],
+			testCommitMessage: true,
+			timeout: LONG_TIMEOUT,
+			verifyDeploy: {
+				route: "/",
+				expectedText: "Gatsby!",
+			},
+			verifyPreview: {
+				route: "/",
+				expectedText: "Gatsby!",
+			},
+		},
+		"gatsby:workers": {
+			argv: ["--platform", "workers"],
 			unsupportedPms: ["bun", "pnpm"],
 			promptHandlers: [
 				{
@@ -241,7 +279,8 @@ export default function getFrameworkTestConfig(pm: string) {
 				"@/*",
 			],
 		},
-		nuxt: {
+		"nuxt:pages": {
+			argv: ["--platform", "pages"],
 			testCommitMessage: true,
 			timeout: LONG_TIMEOUT,
 			unsupportedPms: ["yarn"], // Currently nitro requires youch which expects Node 20+, and yarn will fail hard since we run on Node 18
@@ -265,6 +304,25 @@ export default function getFrameworkTestConfig(pm: string) {
 				expectedText: "C3_TEST",
 			},
 		},
+		"nuxt:workers": {
+			argv: ["--platform", "workers"],
+			testCommitMessage: true,
+			timeout: LONG_TIMEOUT,
+			unsupportedPms: ["yarn"], // Currently nitro requires youch which expects Node 20+, and yarn will fail hard since we run on Node 18
+			unsupportedOSs: ["win32"],
+			verifyDeploy: {
+				route: "/",
+				expectedText: "Welcome to Nuxt!",
+			},
+			verifyPreview: {
+				route: "/test",
+				expectedText: "C3_TEST",
+			},
+			verifyBuildCfTypes: {
+				outputFile: "worker-configuration.d.ts",
+				envInterfaceName: "Env",
+			},
+		},
 		"react:pages": {
 			argv: ["--platform", "pages"],
 			promptHandlers: [
@@ -375,7 +433,8 @@ export default function getFrameworkTestConfig(pm: string) {
 				expectedText: "C3_TEST",
 			},
 		},
-		vue: {
+		"vue:pages": {
+			argv: ["--platform", "pages"],
 			testCommitMessage: true,
 			unsupportedOSs: ["win32"],
 			verifyDeploy: {
@@ -388,5 +447,19 @@ export default function getFrameworkTestConfig(pm: string) {
 			},
 			flags: ["--ts"],
 		},
+		"vue:workers": {
+			argv: ["--platform", "workers", "--ts"],
+			testCommitMessage: true,
+			unsupportedOSs: ["win32"],
+			verifyDeploy: {
+				route: "/",
+				expectedText: "Vite App",
+			},
+			verifyPreview: {
+				previewArgs: ["--host=127.0.0.1"],
+				route: "/",
+				expectedText: "Vite App",
+			},
+		},
 	};
 }

packages/create-cloudflare/src/templates.ts

@@ -18,20 +18,16 @@ import {
 	writeFile,
 	writeJSON,
 } from "helpers/files";
-import angularTemplateExperimental from "templates-experimental/angular/c3";
 import astroTemplateExperimental from "templates-experimental/astro/c3";
-import gatsbyTemplateExperimental from "templates-experimental/gatsby/c3";
 import assetsOnlyTemplateExperimental from "templates-experimental/hello-world-assets-only/c3";
 import helloWorldWithDurableObjectAssetsTemplateExperimental from "templates-experimental/hello-world-durable-object-with-assets/c3";
 import helloWorldWithAssetsTemplateExperimental from "templates-experimental/hello-world-with-assets/c3";
 import honoTemplateExperimental from "templates-experimental/hono/c3";
 import nextTemplateExperimental from "templates-experimental/next/c3";
-import nuxtTemplateExperimental from "templates-experimental/nuxt/c3";
 import qwikTemplateExperimental from "templates-experimental/qwik/c3";
 import remixTemplateExperimental from "templates-experimental/remix/c3";
 import solidTemplateExperimental from "templates-experimental/solid/c3";
 import svelteTemplateExperimental from "templates-experimental/svelte/c3";
-import vueTemplateExperimental from "templates-experimental/vue/c3";
 import analogTemplate from "templates/analog/c3";
 import angularTemplate from "templates/angular/c3";
 import astroTemplate from "templates/astro/c3";
@@ -180,17 +176,13 @@ export type TemplateMap = Record<
 export function getFrameworkMap({ experimental = false }): TemplateMap {
 	if (experimental) {
 		return {
-			angular: angularTemplateExperimental,
 			astro: astroTemplateExperimental,
-			gatsby: gatsbyTemplateExperimental,
 			hono: honoTemplateExperimental,
 			next: nextTemplateExperimental,
-			nuxt: nuxtTemplateExperimental,
 			qwik: qwikTemplateExperimental,
 			remix: remixTemplateExperimental,
 			solid: solidTemplateExperimental,
 			svelte: svelteTemplateExperimental,
-			vue: vueTemplateExperimental,
 		};
 	} else {
 		return {

packages/create-cloudflare/templates/angular/c3.ts

@@ -1,133 +1,9 @@
-import { resolve } from "node:path";
-import { logRaw } from "@cloudflare/cli";
-import { brandColor, dim } from "@cloudflare/cli/colors";
-import { spinner } from "@cloudflare/cli/interactive";
-import { runFrameworkGenerator } from "frameworks/index";
-import { compatDateFlag } from "helpers/compatDate";
-import { readFile, readJSON, writeFile } from "helpers/files";
-import { detectPackageManager } from "helpers/packageManagers";
-import { installPackages } from "helpers/packages";
-import type { TemplateConfig } from "../../src/templates";
-import type { C3Context, PackageJson } from "types";
+import pages from "./pages/c3";
+import workers from "./workers/c3";
+import type { MultiPlatformTemplateConfig } from "../../src/templates";
 
-const { npm } = detectPackageManager();
-
-const generate = async (ctx: C3Context) => {
-	await runFrameworkGenerator(ctx, [
-		ctx.project.name,
-		"--ssr",
-		"--server-routing" /** Dev Preview API */,
-	]);
-	logRaw("");
-};
-
-const configure = async (ctx: C3Context) => {
-	updateAngularJson(ctx);
-	await updateAppCode();
-	await installCFWorker();
-};
-
-async function installCFWorker() {
-	await installPackages(["xhr2"], {
-		dev: true,
-		startText: "Installing additional dependencies",
-		doneText: `${brandColor("installed")} ${dim(`via \`${npm} install\``)}`,
-	});
-}
-async function updateAppCode() {
-	const s = spinner();
-	s.start(`Updating application code`);
-
-	// Update an app config file to:
-	// - add the `provideHttpClient(withFetch())` call to enable `fetch` usage in `HttpClient`
-	const appConfigPath = "src/app/app.config.ts";
-	const appConfig = readFile(resolve(appConfigPath));
-	const newAppConfig =
-		"import { provideHttpClient, withFetch } from '@angular/common/http';\n" +
-		appConfig.replace(
-			"providers: [",
-			"providers: [provideHttpClient(withFetch()), ",
-		);
-	writeFile(resolve(appConfigPath), newAppConfig);
-	s.stop(`${brandColor(`updated`)} ${dim(appConfigPath)}`);
-
-	// Update an app server routes file to:
-	const appServerRoutesPath = "src/app/app.routes.server.ts";
-	const appRoutes = readFile(resolve(appServerRoutesPath));
-	const newAppRoutes = appRoutes.replace(
-		"RenderMode.Prerender",
-		"RenderMode.Server",
-	);
-	writeFile(resolve(appServerRoutesPath), newAppRoutes);
-	s.stop(`${brandColor(`updated`)} ${dim(appServerRoutesPath)}`);
-
-	// Remove unwanted dependencies
-	s.start(`Updating package.json`);
-	const packageJsonPath = resolve("package.json");
-	const packageManifest = readJSON(packageJsonPath) as PackageJson;
-
-	delete packageManifest["dependencies"]?.["express"];
-	delete packageManifest["devDependencies"]?.["@types/express"];
-
-	writeFile(packageJsonPath, JSON.stringify(packageManifest, null, 2));
-	s.stop(`${brandColor(`updated`)} ${dim(`\`package.json\``)}`);
-}
-
-function updateAngularJson(ctx: C3Context) {
-	const s = spinner();
-	s.start(`Updating angular.json config`);
-	const angularJson = readJSON("angular.json") as AngularJson;
-
-	// Update builder
-	const architectSection = angularJson.projects[ctx.project.name].architect;
-	architectSection.build.options.outputPath = "dist";
-	architectSection.build.options.outputMode = "server";
-	architectSection.build.options.ssr.experimentalPlatform = "neutral";
-	architectSection.build.options.assets.push("src/_routes.json");
-
-	writeFile(resolve("angular.json"), JSON.stringify(angularJson, null, 2));
-	s.stop(`${brandColor(`updated`)} ${dim(`\`angular.json\``)}`);
-}
-
-const config: TemplateConfig = {
-	configVersion: 1,
-	id: "angular",
-	frameworkCli: "@angular/create",
+const config: MultiPlatformTemplateConfig = {
 	displayName: "Angular",
-	platform: "pages",
-	copyFiles: {
-		path: "./templates",
-	},
-	devScript: "start",
-	deployScript: "deploy",
-	previewScript: "start",
-	generate,
-	configure,
-	transformPackageJson: async () => ({
-		scripts: {
-			start: `${npm} run build && wrangler pages dev dist/cloudflare ${await compatDateFlag()}`,
-			build: `ng build && ${npm} run process`,
-			process: "node ./tools/copy-files.mjs",
-			deploy: `${npm} run build && wrangler pages deploy dist/cloudflare`,
-		},
-	}),
+	platformVariants: { pages, workers },
 };
 export default config;
-
-type AngularJson = {
-	projects: Record<
-		string,
-		{
-			architect: {
-				build: {
-					options: {
-						outputPath: string;
-						outputMode: string;
-						ssr: Record<string, unknown>;
-						assets: string[];
-					};
-				};
-			};
-		}
-	>;
-};