chore: graduate hono template (#8593)

* graduate hono

* changeset

Author: emily-shen

.changeset/four-shirts-know.md

@@ -0,0 +1,8 @@
+---
+"create-cloudflare": patch
+---
+
+Graduate Hono + Workers assets template from experimental.
+
+You will no longer need to include the --experimental flag to access this template.
+Also creates a hono template that uses the cloudflare-pages adapter.

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

@@ -2,24 +2,6 @@ import { keys, LONG_TIMEOUT } from "../helpers";
 
 export default function getFrameworkTestConfigExperimental() {
 	return {
-		hono: {
-			testCommitMessage: true,
-			unsupportedOSs: ["win32"],
-			verifyDeploy: {
-				route: "/message",
-				expectedText: "Hello Hono!",
-			},
-			verifyPreview: {
-				route: "/message",
-				expectedText: "Hello Hono!",
-			},
-			promptHandlers: [
-				{
-					matcher: /Do you want to install project dependencies\?/,
-					input: [keys.enter],
-				},
-			],
-		},
 		qwik: {
 			promptHandlers: [
 				{

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

@@ -207,15 +207,36 @@ export default function getFrameworkTestConfig(pm: string) {
 				expectedText: "Gatsby!",
 			},
 		},
-		hono: {
+		"hono:pages": {
+			argv: ["--platform", "pages"],
 			testCommitMessage: true,
 			unsupportedOSs: ["win32"],
 			verifyDeploy: {
 				route: "/",
-				expectedText: "Hello Hono!",
+				expectedText: "Hello!",
 			},
 			verifyPreview: {
 				route: "/",
+				expectedText: "Hello!",
+				previewArgs: ["--host=127.0.0.1"],
+			},
+			promptHandlers: [
+				{
+					matcher: /Do you want to install project dependencies\?/,
+					input: [keys.enter],
+				},
+			],
+		},
+		"hono:workers": {
+			argv: ["--platform", "workers"],
+			testCommitMessage: true,
+			unsupportedOSs: ["win32"],
+			verifyDeploy: {
+				route: "/message",
+				expectedText: "Hello Hono!",
+			},
+			verifyPreview: {
+				route: "/message",
 				expectedText: "Hello Hono!",
 			},
 			promptHandlers: [

packages/create-cloudflare/src/templates.ts

@@ -18,7 +18,6 @@ import {
 	writeFile,
 	writeJSON,
 } from "helpers/files";
-import honoTemplateExperimental from "templates-experimental/hono/c3";
 import nextTemplateExperimental from "templates-experimental/next/c3";
 import qwikTemplateExperimental from "templates-experimental/qwik/c3";
 import solidTemplateExperimental from "templates-experimental/solid/c3";
@@ -173,7 +172,6 @@ export type TemplateMap = Record<
 export function getFrameworkMap({ experimental = false }): TemplateMap {
 	if (experimental) {
 		return {
-			hono: honoTemplateExperimental,
 			next: nextTemplateExperimental,
 			qwik: qwikTemplateExperimental,
 			solid: solidTemplateExperimental,

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

@@ -1,70 +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 { loadTemplateSnippets, transformFile } from "helpers/codemod";
-import { detectPackageManager } from "helpers/packageManagers";
-import type { TemplateConfig } from "../../src/templates";
-import type * as recast from "recast";
-import type { C3Context } from "types";
+import pages from "./pages/c3";
+import workers from "./workers/c3";
+import type { MultiPlatformTemplateConfig } from "../../src/templates";
 
-const generate = async (ctx: C3Context) => {
-	const { name: pm } = detectPackageManager();
-
-	await runFrameworkGenerator(ctx, [
-		ctx.project.name,
-		"--template",
-		"cloudflare-workers",
-		"--install",
-		"--pm",
-		pm,
-	]);
-
-	logRaw(""); // newline
-};
-
-const configure = async (ctx: C3Context) => {
-	const indexFile = "src/index.ts";
-
-	const s = spinner();
-	s.start(`Updating \`${indexFile}\``);
-
-	const snippets = loadTemplateSnippets(ctx);
-
-	transformFile(indexFile, {
-		visitVariableDeclarator(n) {
-			if (n.node.id.type === "Identifier" && n.node.id.name === "app") {
-				n.node.init = snippets
-					.appDeclarationTs[0] as recast.types.namedTypes.NewExpression;
-
-				return false;
-			}
-		},
-	});
-
-	s.stop(`${brandColor("updated")} \`${dim(indexFile)}\``);
-};
-
-const config: TemplateConfig = {
-	configVersion: 1,
-	id: "hono",
-	frameworkCli: "create-hono",
+const config: MultiPlatformTemplateConfig = {
 	displayName: "Hono",
-	copyFiles: {
-		path: "./templates",
-	},
-	platform: "workers",
-	generate,
-	configure,
-	transformPackageJson: async () => ({
-		scripts: {
-			dev: "wrangler dev",
-			deploy: "wrangler deploy --minify",
-			"cf-typegen": "wrangler types --env-interface CloudflareBindings",
-		},
-	}),
-	devScript: "dev",
-	deployScript: "deploy",
-	previewScript: "dev",
+	platformVariants: { pages, workers },
 };
 export default config;

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

@@ -0,0 +1,42 @@
+import { logRaw } from "@cloudflare/cli";
+import { runFrameworkGenerator } from "frameworks/index";
+import { detectPackageManager } from "helpers/packageManagers";
+import type { TemplateConfig } from "../../../src/templates";
+import type { C3Context } from "types";
+
+const generate = async (ctx: C3Context) => {
+	const { name: pm } = detectPackageManager();
+
+	await runFrameworkGenerator(ctx, [
+		ctx.project.name,
+		"--template",
+		"cloudflare-pages",
+		"--install",
+		"--pm",
+		pm,
+	]);
+
+	logRaw(""); // newline
+};
+
+const config: TemplateConfig = {
+	configVersion: 1,
+	id: "hono",
+	frameworkCli: "create-hono",
+	displayName: "Hono",
+	copyFiles: {
+		path: "./templates",
+	},
+	path: "templates/hono/pages",
+	platform: "pages",
+	generate,
+	transformPackageJson: async () => ({
+		scripts: {
+			"cf-typegen": "wrangler types --env-interface CloudflareBindings",
+		},
+	}),
+	devScript: "dev",
+	deployScript: "deploy",
+	previewScript: "dev",
+};
+export default config;

packages/create-cloudflare/templates/hono/pages/templates/src/index.tsx

@@ -0,0 +1,12 @@
+import { Hono } from 'hono'
+import { renderer } from './renderer'
+
+const app = new Hono<{ Bindings: CloudflareBindings }>();
+
+app.use(renderer)
+
+app.get('/', (c) => {
+  return c.render(<h1>Hello!</h1>)
+})
+
+export default app

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

@@ -2,7 +2,8 @@
   "name": "<TBD>",
   "main": "src/index.ts",
   "compatibility_date": "<TBD>",
+	"pages_build_output_dir": "./dist",
   "observability": {
     "enabled": true
   }
-}
+}