chore: graduate workers + assets remix template (#8552)

* graduate remix

* remix fixup

* changeset

* fix test

* actually fix

Author: emily-shen

.changeset/silent-trees-shout.md

@@ -0,0 +1,7 @@
+---
+"create-cloudflare": patch
+---
+
+Graduate remix Workers + Assets template from experimental
+
+You will no longer need to pass in the `--experimental` flag to access this template.

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

@@ -44,25 +44,6 @@ export default function getFrameworkTestConfigExperimental() {
 				envInterfaceName: "Env",
 			},
 		},
-		remix: {
-			testCommitMessage: true,
-			timeout: LONG_TIMEOUT,
-			unsupportedPms: ["yarn"],
-			unsupportedOSs: ["win32"],
-			verifyDeploy: {
-				route: "/",
-				expectedText: "Welcome to Remix",
-			},
-			verifyPreview: {
-				route: "/test",
-				expectedText: "C3_TEST",
-			},
-			verifyBuildCfTypes: {
-				outputFile: "worker-configuration.d.ts",
-				envInterfaceName: "Env",
-			},
-			flags: ["--typescript", "--no-install", "--no-git-init"],
-		},
 		next: {
 			testCommitMessage: true,
 			flags: [

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

@@ -248,7 +248,8 @@ export default function getFrameworkTestConfig(pm: string) {
 				envInterfaceName: "Env",
 			},
 		},
-		remix: {
+		"remix:pages": {
+			argv: ["--platform", "pages"],
 			testCommitMessage: true,
 			timeout: LONG_TIMEOUT,
 			unsupportedPms: ["yarn"],
@@ -273,6 +274,26 @@ export default function getFrameworkTestConfig(pm: string) {
 			},
 			flags: ["--typescript", "--no-install", "--no-git-init"],
 		},
+		"remix:workers": {
+			argv: ["--platform", "workers"],
+			testCommitMessage: true,
+			timeout: LONG_TIMEOUT,
+			unsupportedPms: ["yarn"],
+			unsupportedOSs: ["win32"],
+			verifyDeploy: {
+				route: "/",
+				expectedText: "Welcome to Remix",
+			},
+			verifyPreview: {
+				route: "/test",
+				expectedText: "C3_TEST",
+			},
+			verifyBuildCfTypes: {
+				outputFile: "worker-configuration.d.ts",
+				envInterfaceName: "Env",
+			},
+			flags: ["--typescript", "--no-install", "--no-git-init"],
+		},
 		next: {
 			promptHandlers: [
 				{

packages/create-cloudflare/src/templates.ts

@@ -21,7 +21,6 @@ import {
 import honoTemplateExperimental from "templates-experimental/hono/c3";
 import nextTemplateExperimental from "templates-experimental/next/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 analogTemplate from "templates/analog/c3";
@@ -178,7 +177,6 @@ export function getFrameworkMap({ experimental = false }): TemplateMap {
 			hono: honoTemplateExperimental,
 			next: nextTemplateExperimental,
 			qwik: qwikTemplateExperimental,
-			remix: remixTemplateExperimental,
 			solid: solidTemplateExperimental,
 			svelte: svelteTemplateExperimental,
 		};

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

@@ -1,67 +1,9 @@
-import { logRaw } from "@cloudflare/cli";
-import { brandColor, dim } from "@cloudflare/cli/colors";
-import { spinner } from "@cloudflare/cli/interactive";
-import { runFrameworkGenerator } from "frameworks/index";
-import { transformFile } from "helpers/codemod";
-import { detectPackageManager } from "helpers/packageManagers";
-import type { TemplateConfig } from "../../src/templates";
-import type { C3Context } 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,
-		"--template",
-		"https://github.com/remix-run/remix/tree/main/templates/cloudflare",
-	]);
-
-	logRaw(""); // newline
-};
-
-const configure = async () => {
-	const typeDefsPath = "load-context.ts";
-
-	const s = spinner();
-	s.start(`Updating \`${typeDefsPath}\``);
-
-	// Remove the empty Env declaration from the template to allow the type from
-	// worker-configuration.d.ts to take over
-	transformFile(typeDefsPath, {
-		visitTSInterfaceDeclaration(n) {
-			if (n.node.id.type === "Identifier" && n.node.id.name !== "Env") {
-				return this.traverse(n);
-			}
-
-			// Removes the node
-			n.replace();
-			return false;
-		},
-	});
-
-	s.stop(`${brandColor("updated")} \`${dim(typeDefsPath)}\``);
-};
-
-const config: TemplateConfig = {
-	configVersion: 1,
-	id: "remix",
-	frameworkCli: "create-remix",
-	platform: "pages",
+const config: MultiPlatformTemplateConfig = {
 	displayName: "Remix",
-	copyFiles: {
-		path: "./templates",
-	},
-	generate,
-	configure,
-	transformPackageJson: async () => ({
-		scripts: {
-			deploy: `${npm} run build && wrangler pages deploy`,
-			preview: `${npm} run build && wrangler pages dev`,
-			"cf-typegen": `wrangler types`,
-		},
-	}),
-	devScript: "dev",
-	deployScript: "deploy",
-	previewScript: "preview",
+	platformVariants: { pages, workers },
 };
 export default config;

packages/create-cloudflare/templates/remix/pages/c3.ts

@@ -0,0 +1,68 @@
+import { logRaw } from "@cloudflare/cli";
+import { brandColor, dim } from "@cloudflare/cli/colors";
+import { spinner } from "@cloudflare/cli/interactive";
+import { runFrameworkGenerator } from "frameworks/index";
+import { transformFile } from "helpers/codemod";
+import { detectPackageManager } from "helpers/packageManagers";
+import type { TemplateConfig } from "../../../src/templates";
+import type { C3Context } from "types";
+
+const { npm } = detectPackageManager();
+
+const generate = async (ctx: C3Context) => {
+	await runFrameworkGenerator(ctx, [
+		ctx.project.name,
+		"--template",
+		"https://github.com/remix-run/remix/tree/main/templates/cloudflare",
+	]);
+
+	logRaw(""); // newline
+};
+
+const configure = async () => {
+	const typeDefsPath = "load-context.ts";
+
+	const s = spinner();
+	s.start(`Updating \`${typeDefsPath}\``);
+
+	// Remove the empty Env declaration from the template to allow the type from
+	// worker-configuration.d.ts to take over
+	transformFile(typeDefsPath, {
+		visitTSInterfaceDeclaration(n) {
+			if (n.node.id.type === "Identifier" && n.node.id.name !== "Env") {
+				return this.traverse(n);
+			}
+
+			// Removes the node
+			n.replace();
+			return false;
+		},
+	});
+
+	s.stop(`${brandColor("updated")} \`${dim(typeDefsPath)}\``);
+};
+
+const config: TemplateConfig = {
+	configVersion: 1,
+	id: "remix",
+	frameworkCli: "create-remix",
+	platform: "pages",
+	displayName: "Remix",
+	copyFiles: {
+		path: "./templates",
+	},
+	path: "templates/remix/pages",
+	generate,
+	configure,
+	transformPackageJson: async () => ({
+		scripts: {
+			deploy: `${npm} run build && wrangler pages deploy`,
+			preview: `${npm} run build && wrangler pages dev`,
+			"cf-typegen": `wrangler types`,
+		},
+	}),
+	devScript: "dev",
+	deployScript: "deploy",
+	previewScript: "preview",
+};
+export default config;

packages/create-cloudflare/templates/remix/templates/worker-configuration.d.ts renamed to packages/create-cloudflare/templates/remix/pages/templates/worker-configuration.d.ts

@@ -3,7 +3,7 @@ import { brandColor, dim } from "@cloudflare/cli/colors";
 import { runFrameworkGenerator } from "frameworks/index";
 import { detectPackageManager } from "helpers/packageManagers";
 import { installPackages } from "helpers/packages";
-import type { TemplateConfig } from "../../src/templates";
+import type { TemplateConfig } from "../../../src/templates";
 import type { C3Context } from "types";
 
 const { npm } = detectPackageManager();
@@ -35,7 +35,7 @@ const config: TemplateConfig = {
 	copyFiles: {
 		path: "./templates",
 	},
-	path: "templates-experimental/remix",
+	path: "templates/remix/workers",
 	generate,
 	configure,
 	transformPackageJson: async () => ({