create-cloudflare 0.0.0-ce6d4bc4 → 0.0.0-ce8bfbdad

package/templates/next/c3.ts

@@ -1,21 +1,23 @@
 import { join } from "path";
-import { crash, updateStatus, warn } from "@cloudflare/cli";
-import { processArgument } from "@cloudflare/cli/args";
+import { updateStatus, warn } from "@cloudflare/cli";
 import { brandColor, dim } from "@cloudflare/cli/colors";
-import { installPackages, runFrameworkGenerator } from "helpers/command";
+import { inputPrompt, spinner } from "@cloudflare/cli/interactive";
+import { runFrameworkGenerator } from "frameworks/index";
 import {
-	compatDateFlag,
 	copyFile,
 	probePaths,
+	readFile,
 	readJSON,
 	usesEslint,
 	usesTypescript,
+	writeFile,
 	writeJSON,
 } from "helpers/files";
-import { detectPackageManager } from "helpers/packages";
+import { detectPackageManager } from "helpers/packageManagers";
+import { installPackages } from "helpers/packages";
 import { getTemplatePath } from "../../src/templates";
 import type { TemplateConfig } from "../../src/templates";
-import type { C3Args, C3Context } from "types";
+import type { C3Context } from "types";
 
 const { npm, npx } = detectPackageManager();
 
@@ -23,6 +25,35 @@ const generate = async (ctx: C3Context) => {
 	const projectName = ctx.project.name;
 
 	await runFrameworkGenerator(ctx, [projectName]);
+
+	const wranglerConfig = readFile(join(getTemplatePath(ctx), "wrangler.json"));
+	writeFile(join(ctx.project.path, "wrangler.json"), wranglerConfig);
+	updateStatus("Created wrangler.json file");
+};
+
+const updateNextConfig = (usesTs: boolean) => {
+	const s = spinner();
+
+	const configFile = `next.config.${usesTs ? "ts" : "mjs"}`;
+	s.start(`Updating \`${configFile}\``);
+
+	const configContent = readFile(configFile);
+
+	const updatedConfigFile =
+		`import { setupDevPlatform } from '@cloudflare/next-on-pages/next-dev';
+
+		// Here we use the @cloudflare/next-on-pages next-dev module to allow us to use bindings during local development
+		// (when running the application with \`next dev\`), for more information see:
+		// https://github.com/cloudflare/next-on-pages/blob/main/internal-packages/next-dev/README.md
+		if (process.env.NODE_ENV === 'development') {
+		  await setupDevPlatform();
+		}
+
+		`.replace(/\n\t*/g, "\n") + configContent;
+
+	writeFile(configFile, updatedConfigFile);
+
+	s.stop(`${brandColor(`updated`)} ${dim(`\`${configFile}\``)}`);
 };
 
 const configure = async (ctx: C3Context) => {
@@ -39,7 +70,7 @@ const configure = async (ctx: C3Context) => {
 	]);
 
 	if (!path) {
-		crash("Could not find the `/api` or `/app` directory");
+		throw new Error("Could not find the `/api` or `/app` directory");
 	}
 
 	const usesTs = usesTypescript(ctx);
@@ -47,7 +78,7 @@ const configure = async (ctx: C3Context) => {
 	if (usesTs) {
 		copyFile(
 			join(getTemplatePath(ctx), "env.d.ts"),
-			join(projectPath, "env.d.ts")
+			join(projectPath, "env.d.ts"),
 		);
 		updateStatus("Created an env.d.ts file");
 	}
@@ -58,15 +89,11 @@ const configure = async (ctx: C3Context) => {
 		await writeEslintrc(ctx);
 	}
 
-	copyFile(
-		join(getTemplatePath(ctx), "next.config.mjs"),
-		join(projectPath, "next.config.mjs")
-	);
-	updateStatus("Updated the next.config.mjs file");
+	updateNextConfig(usesTs);
 
 	copyFile(
 		join(getTemplatePath(ctx), "README.md"),
-		join(projectPath, "README.md")
+		join(projectPath, "README.md"),
 	);
 	updateStatus("Updated the README file");
 
@@ -74,20 +101,22 @@ const configure = async (ctx: C3Context) => {
 };
 
 export const shouldInstallNextOnPagesEslintPlugin = async (
-	ctx: C3Context
+	ctx: C3Context,
 ): Promise<boolean> => {
 	const eslintUsage = usesEslint(ctx);
 
-	if (!eslintUsage.used) return false;
+	if (!eslintUsage.used) {
+		return false;
+	}
 
 	if (eslintUsage.configType !== ".eslintrc.json") {
 		warn(
-			`Expected .eslintrc.json from Next.js scaffolding but found ${eslintUsage.configType} instead`
+			`Expected .eslintrc.json from Next.js scaffolding but found ${eslintUsage.configType} instead`,
 		);
 		return false;
 	}
 
-	return await processArgument(ctx.args, "eslint-plugin" as keyof C3Args, {
+	return await inputPrompt({
 		type: "confirm",
 		question: "Do you want to use the next-on-pages eslint-plugin?",
 		label: "eslint-plugin",
@@ -127,10 +156,9 @@ const addDevDependencies = async (installEslintPlugin: boolean) => {
 export default {
 	configVersion: 1,
 	id: "next",
+	frameworkCli: "create-next-app",
 	platform: "pages",
-	displayName: "Next",
-	devScript: "dev",
-	previewScript: "pages:preview",
+	displayName: "Next.js",
 	generate,
 	configure,
 	copyFiles: {
@@ -164,7 +192,7 @@ export default {
 			},
 		},
 	},
-	transformPackageJson: async () => {
+	transformPackageJson: async (_, ctx) => {
 		const isNpm = npm === "npm";
 		const isBun = npm === "bun";
 		const isNpmOrBun = isNpm || isBun;
@@ -177,20 +205,16 @@ export default {
 		return {
 			scripts: {
 				"pages:build": `${pmCommand} ${nextOnPagesCommand}`,
-				"pages:preview": `${pagesBuildRunCommand} && wrangler pages dev .vercel/output/static ${await compatDateFlag()} --compatibility-flag=nodejs_compat`,
-				"pages:deploy": `${pagesBuildRunCommand} && wrangler pages deploy .vercel/output/static`,
+				preview: `${pagesBuildRunCommand} && wrangler pages dev`,
+				deploy: `${pagesBuildRunCommand} && wrangler pages deploy`,
+				...(usesTypescript(ctx) && {
+					"cf-typegen": `wrangler types --env-interface CloudflareEnv env.d.ts`,
+				}),
 			},
 		};
 	},
-	testFlags: [
-		"--typescript",
-		"--no-install",
-		"--eslint",
-		"--tailwind",
-		"--src-dir",
-		"--app",
-		"--import-alias",
-		"@/*",
-	],
+	devScript: "dev",
+	previewScript: "preview",
+	deployScript: "deploy",
 	compatibilityFlags: ["nodejs_compat"],
 } as TemplateConfig;

package/templates/next/env.d.ts

@@ -1,13 +1,5 @@
-declare global {
-  namespace NodeJS {
-    interface ProcessEnv {
-      // Add here the Cloudflare Bindings you want to have available in your application
-      // (for more details on Bindings see: https://developers.cloudflare.com/pages/functions/bindings/)
-      //
-      // KV Example:
-      // MY_KV: KVNamespace
-    }
-  }
-}
+// Generated by Wrangler
+// by running `wrangler types --env-interface CloudflareEnv env.d.ts`
 
-export {}
+interface CloudflareEnv {
+}

package/templates/next/pages/js/pages/api/hello.js

@@ -1,3 +1,5 @@
+import { getRequestContext } from '@cloudflare/next-on-pages'
+
 export const config = {
   runtime: 'edge',
 }
@@ -12,7 +14,7 @@ export default async function handler(req) {
   // )
   //
   // KV Example:
-  // const myKv = process.env.MY_KV
+  // const myKv = getRequestContext().env.MY_KV_NAMESPACE
   // await myKv.put('suffix', ' from a KV store!')
   // const suffix = await myKv.get('suffix')
   // responseText += suffix

package/templates/next/pages/ts/pages/api/hello.ts

@@ -1,4 +1,5 @@
 import type { NextRequest } from 'next/server'
+import { getRequestContext } from '@cloudflare/next-on-pages'
 
 export const config = {
   runtime: 'edge',
@@ -14,7 +15,7 @@ export default async function handler(req: NextRequest) {
   // )
   //
   // KV Example:
-  // const myKv = process.env.MY_KV
+  // const myKv = getRequestContext().env.MY_KV_NAMESPACE
   // await myKv.put('suffix', ' from a KV store!')
   // const suffix = await myKv.get('suffix')
   // responseText += suffix

package/templates/next/wrangler.json

@@ -0,0 +1,8 @@
+{
+  "name": "<TBD>",
+  "compatibility_date": "<TBD>",
+  "compatibility_flags": [
+    "nodejs_compat"
+  ],
+  "pages_build_output_dir": ".vercel/output/static"
+}

package/templates/nuxt/c3.ts

@@ -1,15 +1,17 @@
 import { logRaw } from "@cloudflare/cli";
 import { brandColor, dim } from "@cloudflare/cli/colors";
 import { spinner } from "@cloudflare/cli/interactive";
-import { transformFile } from "helpers/codemod";
-import { installPackages, runFrameworkGenerator } from "helpers/command";
-import { writeFile } from "helpers/files";
-import { detectPackageManager } from "helpers/packages";
+import { runFrameworkGenerator } from "frameworks/index";
+import { mergeObjectProperties, transformFile } from "helpers/codemod";
+import { getLatestTypesEntrypoint } from "helpers/compatDate";
+import { readFile, writeFile } from "helpers/files";
+import { detectPackageManager } from "helpers/packageManagers";
+import { installPackages } from "helpers/packages";
 import * as recast from "recast";
 import type { TemplateConfig } from "../../src/templates";
 import type { C3Context } from "types";
 
-const { npm } = detectPackageManager();
+const { npm, name: pm } = detectPackageManager();
 
 const generate = async (ctx: C3Context) => {
 	const gitFlag = ctx.args.git ? `--gitInit` : `--no-gitInit`;
@@ -22,18 +24,49 @@ const generate = async (ctx: C3Context) => {
 		gitFlag,
 	]);
 
-	writeFile("./.node-version", "17");
+	writeFile("./.node-version", "18");
 
 	logRaw(""); // newline
 };
 
-const configure = async () => {
-	await installPackages(["nitro-cloudflare-dev"], {
+const configure = async (ctx: C3Context) => {
+	const packages = ["nitro-cloudflare-dev"];
+
+	// When using pnpm, explicitly add h3 package so the H3Event type declaration can be updated.
+	// Package managers other than pnpm will hoist the dependency, as will pnpm with `--shamefully-hoist`
+	if (pm === "pnpm") {
+		packages.push("h3");
+	}
+
+	await installPackages(packages, {
 		dev: true,
 		startText: "Installing nitro module `nitro-cloudflare-dev`",
 		doneText: `${brandColor("installed")} ${dim(`via \`${npm} install\``)}`,
 	});
 	updateNuxtConfig();
+
+	updateEnvTypes(ctx);
+};
+
+const updateEnvTypes = (ctx: C3Context) => {
+	const filepath = "env.d.ts";
+
+	const s = spinner();
+	s.start(`Updating ${filepath}`);
+
+	let file = readFile(filepath);
+
+	let typesEntrypoint = `@cloudflare/workers-types`;
+	const latestEntrypoint = getLatestTypesEntrypoint(ctx);
+	if (latestEntrypoint) {
+		typesEntrypoint += `/${latestEntrypoint}`;
+	}
+
+	// Replace placeholder with actual types entrypoint
+	file = file.replace("WORKERS_TYPES_ENTRYPOINT", typesEntrypoint);
+	writeFile("env.d.ts", file);
+
+	s.stop(`${brandColor(`updated`)} ${dim(`\`${filepath}\``)}`);
 };
 
 const updateNuxtConfig = () => {
@@ -49,25 +82,24 @@ const updateNuxtConfig = () => {
 		b.objectExpression([
 			b.objectProperty(
 				b.identifier("preset"),
-				b.stringLiteral("cloudflare-pages")
+				b.stringLiteral("cloudflare-pages"),
 			),
-		])
+		]),
 	);
 
 	const moduleDef = b.objectProperty(
 		b.identifier("modules"),
-		b.arrayExpression([b.stringLiteral("nitro-cloudflare-dev")])
+		b.arrayExpression([b.stringLiteral("nitro-cloudflare-dev")]),
 	);
 
 	transformFile(configFile, {
 		visitCallExpression: function (n) {
 			const callee = n.node.callee as recast.types.namedTypes.Identifier;
 			if (callee.name === "defineNuxtConfig") {
-				const obj = n.node
-					.arguments[0] as recast.types.namedTypes.ObjectExpression;
-
-				obj.properties.push(presetDef);
-				obj.properties.push(moduleDef);
+				mergeObjectProperties(
+					n.node.arguments[0] as recast.types.namedTypes.ObjectExpression,
+					[presetDef, moduleDef],
+				);
 			}
 
 			return this.traverse(n);
@@ -80,20 +112,23 @@ const updateNuxtConfig = () => {
 const config: TemplateConfig = {
 	configVersion: 1,
 	id: "nuxt",
+	frameworkCli: "nuxi",
 	platform: "pages",
+	displayName: "Nuxt",
 	copyFiles: {
 		path: "./templates",
 	},
-	displayName: "Nuxt",
-	devScript: "dev",
-	deployScript: "deploy",
 	generate,
 	configure,
 	transformPackageJson: async () => ({
 		scripts: {
-			deploy: `${npm} run build && wrangler pages deploy ./dist`,
-			preview: `${npm} run build && wrangler pages dev ./dist`,
+			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;

package/templates/nuxt/templates/env.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="WORKERS_TYPES_ENTRYPOINT" />
+
+declare module "h3" {
+  interface H3EventContext {
+    cf: CfProperties;
+    cloudflare: {
+      request: Request;
+      env: Env;
+      context: ExecutionContext;
+    };
+  }
+}
+
+export {};

package/templates/nuxt/templates/worker-configuration.d.ts

@@ -0,0 +1,4 @@
+// Generated by Wrangler
+// After adding bindings to `wrangler.json`, regenerate this interface via `npm run cf-typegen`
+interface Env {
+}

package/templates/nuxt/templates/wrangler.json

@@ -0,0 +1,8 @@
+{
+  "name": "<TBD>",
+  "compatibility_date": "<TBD>",
+  "compatibility_flags": [
+    "nodejs_compat"
+  ],
+  "pages_build_output_dir": "./dist"
+}

package/templates/openapi/c3.ts

@@ -2,6 +2,7 @@ export default {
 	configVersion: 1,
 	id: "openapi",
 	displayName: "API starter (OpenAPI compliant)",
+	description: "Get started building a basic API on Workers",
 	platform: "workers",
 	copyFiles: {
 		path: "./ts",

package/templates/openapi/ts/README.md

@@ -1,6 +1,6 @@
 # Cloudflare Workers OpenAPI 3.1
 
-This is a Cloudflare Worker with OpenAPI 3.1 using [itty-router-openapi](https://github.com/cloudflare/itty-router-openapi).
+This is a Cloudflare Worker with OpenAPI 3.1 using [chanfana](https://github.com/cloudflare/chanfana) and [Hono](https://github.com/honojs/hono).
 
 This is an example project made to be used as a quick start into building OpenAPI compliant Workers that generates the
 `openapi.json` schema automatically from code and validates the incoming request to the defined parameters or request body.
@@ -16,10 +16,10 @@ This is an example project made to be used as a quick start into building OpenAP
 
 1. Your main router is defined in `src/index.ts`.
 2. Each endpoint has its own file in `src/endpoints/`.
-3. For more information read the [itty-router-openapi official documentation](https://cloudflare.github.io/itty-router-openapi/).
+3. For more information read the [chanfana documentation](https://chanfana.pages.dev/) and [Hono documentation](https://hono.dev/docs).
 
 ## Development
 
 1. Run `wrangler dev` to start a local instance of the API.
-2. Open `http://localhost:9000/` in your browser to see the Swagger interface where you can try the endpoints.
+2. Open `http://localhost:8787/` in your browser to see the Swagger interface where you can try the endpoints.
 3. Changes made in the `src/` folder will automatically trigger the server to reload, you only need to refresh the Swagger interface.

package/templates/openapi/ts/package.json

@@ -5,14 +5,17 @@
 	"scripts": {
 		"deploy": "wrangler deploy",
 		"dev": "wrangler dev",
-		"start": "wrangler dev"
+		"start": "wrangler dev",
+		"cf-typegen": "wrangler types"
 	},
 	"dependencies": {
-		"@cloudflare/itty-router-openapi": "^1.0.1"
+		"chanfana": "^2.0.2",
+		"zod": "^3.23.8",
+		"hono": "^4.4.7"
 	},
 	"devDependencies": {
-		"@types/node": "^20.5.7",
+		"@types/node": "20.8.3",
 		"@types/service-worker-mock": "^2.0.1",
-		"wrangler": "^3.0.0"
+		"wrangler": "^3.101.0"
 	}
 }

package/templates/openapi/ts/src/endpoints/taskCreate.ts

@@ -1,33 +1,43 @@
-import {
-	OpenAPIRoute,
-	OpenAPIRouteSchema,
-} from "@cloudflare/itty-router-openapi";
+import { Bool, OpenAPIRoute } from "chanfana";
+import { z } from "zod";
 import { Task } from "../types";
 
 export class TaskCreate extends OpenAPIRoute {
-	static schema: OpenAPIRouteSchema = {
+	schema = {
 		tags: ["Tasks"],
 		summary: "Create a new Task",
-		requestBody: Task,
+		request: {
+			body: {
+				content: {
+					"application/json": {
+						schema: Task,
+					},
+				},
+			},
+		},
 		responses: {
 			"200": {
 				description: "Returns the created task",
-				schema: {
-					success: Boolean,
-					result: {
-						task: Task,
+				content: {
+					"application/json": {
+						schema: z.object({
+							series: z.object({
+								success: Bool(),
+								result: z.object({
+									task: Task,
+								}),
+							}),
+						}),
 					},
 				},
 			},
 		},
 	};
 
-	async handle(
-		request: Request,
-		env: any,
-		context: any,
-		data: Record<string, any>
-	) {
+	async handle(c) {
+		// Get validated data
+		const data = await this.getValidatedData<typeof this.schema>();
+
 		// Retrieve the validated request body
 		const taskToCreate = data.body;
 

package/templates/openapi/ts/src/endpoints/taskDelete.ts

@@ -1,38 +1,39 @@
-import {
-	OpenAPIRoute,
-	OpenAPIRouteSchema,
-	Path,
-} from "@cloudflare/itty-router-openapi";
+import { Bool, OpenAPIRoute, Str } from "chanfana";
+import { z } from "zod";
 import { Task } from "../types";
 
 export class TaskDelete extends OpenAPIRoute {
-	static schema: OpenAPIRouteSchema = {
+	schema = {
 		tags: ["Tasks"],
 		summary: "Delete a Task",
-		parameters: {
-			taskSlug: Path(String, {
-				description: "Task slug",
+		request: {
+			params: z.object({
+				taskSlug: Str({ description: "Task slug" }),
 			}),
 		},
 		responses: {
 			"200": {
 				description: "Returns if the task was deleted successfully",
-				schema: {
-					success: Boolean,
-					result: {
-						task: Task,
+				content: {
+					"application/json": {
+						schema: z.object({
+							series: z.object({
+								success: Bool(),
+								result: z.object({
+									task: Task,
+								}),
+							}),
+						}),
 					},
 				},
 			},
 		},
 	};
 
-	async handle(
-		request: Request,
-		env: any,
-		context: any,
-		data: Record<string, any>
-	) {
+	async handle(c) {
+		// Get validated data
+		const data = await this.getValidatedData<typeof this.schema>();
+
 		// Retrieve the validated slug
 		const { taskSlug } = data.params;
 

package/templates/openapi/ts/src/endpoints/taskFetch.ts

@@ -1,45 +1,52 @@
-import {
-	OpenAPIRoute,
-	OpenAPIRouteSchema,
-	Path,
-} from "@cloudflare/itty-router-openapi";
+import { Bool, OpenAPIRoute, Str } from "chanfana";
+import { z } from "zod";
 import { Task } from "../types";
 
 export class TaskFetch extends OpenAPIRoute {
-	static schema: OpenAPIRouteSchema = {
+	schema = {
 		tags: ["Tasks"],
 		summary: "Get a single Task by slug",
-		parameters: {
-			taskSlug: Path(String, {
-				description: "Task slug",
+		request: {
+			params: z.object({
+				taskSlug: Str({ description: "Task slug" }),
 			}),
 		},
 		responses: {
 			"200": {
 				description: "Returns a single task if found",
-				schema: {
-					success: Boolean,
-					result: {
-						task: Task,
+				content: {
+					"application/json": {
+						schema: z.object({
+							series: z.object({
+								success: Bool(),
+								result: z.object({
+									task: Task,
+								}),
+							}),
+						}),
 					},
 				},
 			},
 			"404": {
 				description: "Task not found",
-				schema: {
-					success: Boolean,
-					error: String,
+				content: {
+					"application/json": {
+						schema: z.object({
+							series: z.object({
+								success: Bool(),
+								error: Str(),
+							}),
+						}),
+					},
 				},
 			},
 		},
 	};
 
-	async handle(
-		request: Request,
-		env: any,
-		context: any,
-		data: Record<string, any>
-	) {
+	async handle(c) {
+		// Get validated data
+		const data = await this.getValidatedData<typeof this.schema>();
+
 		// Retrieve the validated slug
 		const { taskSlug } = data.params;
 
@@ -56,7 +63,7 @@ export class TaskFetch extends OpenAPIRoute {
 				},
 				{
 					status: 404,
-				}
+				},
 			);
 		}