create-cloudflare 0.0.0-e739b7fe → 0.0.0-e75c5812f

package/templates/next/README.md

@@ -23,7 +23,7 @@ Besides the `dev` script mentioned above `c3` has added a few extra scripts that
   - `preview` to locally preview your Pages application using the [Wrangler](https://developers.cloudflare.com/workers/wrangler/) CLI
   - `deploy` to deploy your Pages application using the [Wrangler](https://developers.cloudflare.com/workers/wrangler/) CLI
 
-> __Note:__ while the `dev` script is optimal for local development you should preview your Pages application as well (periodically or before deployments) in order to make sure that it can properly work in the Pages environment (for more details see the [`@cloudflare/next-on-pages` recommended workflow](https://github.com/cloudflare/next-on-pages/blob/05b6256/internal-packages/next-dev/README.md#recommended-workflow))
+> __Note:__ while the `dev` script is optimal for local development you should preview your Pages application as well (periodically or before deployments) in order to make sure that it can properly work in the Pages environment (for more details see the [`@cloudflare/next-on-pages` recommended workflow](https://github.com/cloudflare/next-on-pages/blob/main/internal-packages/next-dev/README.md#recommended-development-workflow))
 
 ### Bindings
 
@@ -52,17 +52,17 @@ In order to enable the example:
   ```
   # KV Example:
   ```
-- If you're using TypeScript run the `build-cf-types` script to update the `env.d.ts` file:
+- If you're using TypeScript run the `cf-typegen` script to update the `env.d.ts` file:
   ```bash
-  npm run build-cf-types
+  npm run cf-typegen
   # or
-  yarn build-cf-types
+  yarn cf-typegen
   # or
-  pnpm build-cf-types
+  pnpm cf-typegen
   # or
-  bun build-cf-types
+  bun cf-typegen
   ```
 
 After doing this you can run the `dev` or `preview` script and visit the `/api/hello` route to see the example in action.
 
-Finally, if you also want to see the example work in the deployed application make sure to add a `MY_KV` binding to your Pages application in its [dashboard kv bindings settings section](https://dash.cloudflare.com/?to=/:account/pages/view/:pages-project/settings/functions#kv_namespace_bindings_section). After having configured it make sure to re-deploy your application.
+Finally, if you also want to see the example work in the deployed application make sure to add a `MY_KV_NAMESPACE` binding to your Pages application in its [dashboard kv bindings settings section](https://dash.cloudflare.com/?to=/:account/pages/view/:pages-project/settings/functions#kv_namespace_bindings_section). After having configured it make sure to re-deploy your application.

package/templates/next/app/js/app/api/hello/route.js

@@ -12,7 +12,7 @@ export async function GET(request) {
   // )
   //
   // KV Example:
-  // const myKv = getRequestContext().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/app/ts/app/api/hello/route.ts

@@ -13,7 +13,7 @@ export async function GET(request: NextRequest) {
   // )
   //
   // KV Example:
-  // const myKv = getRequestContext().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/c3.ts

@@ -27,10 +27,26 @@ const generate = async (ctx: C3Context) => {
 
 	await runFrameworkGenerator(ctx, [projectName]);
 
-	copyFile(
-		join(getTemplatePath(ctx), "wrangler.toml"),
-		join(ctx.project.path, "wrangler.toml")
+	const wranglerToml = readFile(join(getTemplatePath(ctx), "wrangler.toml"));
+
+	// Note: here we add `# KV Example:` to the toml file for the KV example, we don't actually
+	//       include the comment in the template wrangler.toml file just so to keep it identical
+	//       and consistent with that of all the other frameworks
+	//       (instead of making it a special case which needs extra care)
+	const newTomlContent = wranglerToml.replace(
+		/#\s+\[\[kv_namespaces\]\]\n#\s+binding\s+=\s+"MY_KV_NAMESPACE"\n#\s+id\s+=\s+"[a-zA-Z0-9]+?"/,
+		($1) => `# KV Example:\n${$1}`,
 	);
+
+	if (!/# KV Example/.test(newTomlContent)) {
+		// This should never happen to users, it is a check mostly so that
+		// if the toml file is changed in a way that breaks the "KV Example" addition
+		// the C3 Next.js e2e runs will fail with this
+		crash("Failed to properly generate the wrangler.toml file");
+	}
+
+	writeFile(join(ctx.project.path, "wrangler.toml"), newTomlContent);
+
 	updateStatus("Created wrangler.toml file");
 };
 
@@ -47,7 +63,7 @@ const updateNextConfig = () => {
 
 		// 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/5712c57ea7/internal-packages/next-dev/README.md
+		// https://github.com/cloudflare/next-on-pages/blob/main/internal-packages/next-dev/README.md
 		if (process.env.NODE_ENV === 'development') {
 		  await setupDevPlatform();
 		}
@@ -81,7 +97,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");
 	}
@@ -96,7 +112,7 @@ const configure = async (ctx: C3Context) => {
 
 	copyFile(
 		join(getTemplatePath(ctx), "README.md"),
-		join(projectPath, "README.md")
+		join(projectPath, "README.md"),
 	);
 	updateStatus("Updated the README file");
 
@@ -104,15 +120,17 @@ 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;
 	}
@@ -205,10 +223,10 @@ export default {
 		return {
 			scripts: {
 				"pages:build": `${pmCommand} ${nextOnPagesCommand}`,
-				preview: `${pagesBuildRunCommand} && wrangler pages dev .vercel/output/static`,
-				deploy: `${pagesBuildRunCommand} && wrangler pages deploy .vercel/output/static`,
+				preview: `${pagesBuildRunCommand} && wrangler pages dev`,
+				deploy: `${pagesBuildRunCommand} && wrangler pages deploy`,
 				...(usesTypescript(ctx) && {
-					"build-cf-types": `wrangler types --env-interface CloudflareEnv env.d.ts`,
+					"cf-typegen": `wrangler types --env-interface CloudflareEnv env.d.ts`,
 				}),
 			},
 		};

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

@@ -14,7 +14,7 @@ export default async function handler(req) {
   // )
   //
   // KV Example:
-  // const myKv = getRequestContext().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

@@ -15,7 +15,7 @@ export default async function handler(req: NextRequest) {
   // )
   //
   // KV Example:
-  // const myKv = getRequestContext().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.toml

@@ -1,10 +1,21 @@
+#:schema node_modules/wrangler/config-schema.json
 name = "<TBD>"
 compatibility_date = "<TBD>"
 compatibility_flags = ["nodejs_compat"]
+pages_build_output_dir = ".vercel/output/static"
+
+# Automatically place your workloads in an optimal location to minimize latency.
+# If you are running back-end logic in a Pages Function, running it closer to your back-end infrastructure
+# rather than the end user may result in better performance.
+# Docs: https://developers.cloudflare.com/pages/functions/smart-placement/#smart-placement
+# [placement]
+# mode = "smart"
 
 # Variable bindings. These are arbitrary, plaintext strings (similar to environment variables)
+# Docs:
+# - https://developers.cloudflare.com/pages/functions/bindings/#environment-variables
 # Note: Use secrets to store sensitive data.
-# Docs: https://developers.cloudflare.com/pages/functions/bindings/#environment-variables
+# - https://developers.cloudflare.com/pages/functions/bindings/#secrets
 # [vars]
 # MY_VARIABLE = "production_value"
 
@@ -52,7 +63,24 @@ compatibility_flags = ["nodejs_compat"]
 # binding = "MY_SERVICE"
 # service = "my-service"
 
-# KV Example:
-# [[kv_namespaces]]
-# binding = "MY_KV"
-# id = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
+# To use different bindings for preview and production environments, follow the examples below.
+# When using environment-specific overrides for bindings, ALL bindings must be specified on a per-environment basis.
+# Docs: https://developers.cloudflare.com/pages/functions/wrangler-configuration#environment-specific-overrides
+
+######## PREVIEW environment config ########
+
+# [env.preview.vars]
+# API_KEY = "xyz789"
+
+# [[env.preview.kv_namespaces]]
+# binding = "MY_KV_NAMESPACE"
+# id = "<PREVIEW_NAMESPACE_ID>"
+
+######## PRODUCTION environment config ########
+
+# [env.production.vars]
+# API_KEY = "abc123"
+
+# [[env.production.kv_namespaces]]
+# binding = "MY_KV_NAMESPACE"
+# id = "<PRODUCTION_NAMESPACE_ID>"

package/templates/nuxt/c3.ts

@@ -2,7 +2,7 @@ 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 { mergeObjectProperties, transformFile } from "helpers/codemod";
 import { getLatestTypesEntrypoint } from "helpers/compatDate";
 import { readFile, writeFile } from "helpers/files";
 import { detectPackageManager } from "helpers/packageManagers";
@@ -56,7 +56,7 @@ const updateEnvTypes = (ctx: C3Context) => {
 
 	let file = readFile(filepath);
 
-	let typesEntrypoint = `@cloudflare/workers-types/`;
+	let typesEntrypoint = `@cloudflare/workers-types`;
 	const latestEntrypoint = getLatestTypesEntrypoint(ctx);
 	if (latestEntrypoint) {
 		typesEntrypoint += `/${latestEntrypoint}`;
@@ -82,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);
@@ -122,9 +121,9 @@ const config: TemplateConfig = {
 	configure,
 	transformPackageJson: async () => ({
 		scripts: {
-			deploy: `${npm} run build && wrangler pages deploy ./dist`,
-			preview: `${npm} run build && wrangler pages dev ./dist`,
-			"build-cf-types": `wrangler types`,
+			deploy: `${npm} run build && wrangler pages deploy`,
+			preview: `${npm} run build && wrangler pages dev`,
+			"cf-typegen": `wrangler types`,
 		},
 	}),
 	devScript: "dev",

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

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

package/templates/nuxt/templates/wrangler.toml

@@ -1,9 +1,20 @@
+#:schema node_modules/wrangler/config-schema.json
 name = "<TBD>"
 compatibility_date = "<TBD>"
+pages_build_output_dir = "./dist"
+
+# Automatically place your workloads in an optimal location to minimize latency.
+# If you are running back-end logic in a Pages Function, running it closer to your back-end infrastructure
+# rather than the end user may result in better performance.
+# Docs: https://developers.cloudflare.com/pages/functions/smart-placement/#smart-placement
+# [placement]
+# mode = "smart"
 
 # Variable bindings. These are arbitrary, plaintext strings (similar to environment variables)
+# Docs:
+# - https://developers.cloudflare.com/pages/functions/bindings/#environment-variables
 # Note: Use secrets to store sensitive data.
-# Docs: https://developers.cloudflare.com/pages/functions/bindings/#environment-variables
+# - https://developers.cloudflare.com/pages/functions/bindings/#secrets
 # [vars]
 # MY_VARIABLE = "production_value"
 
@@ -49,4 +60,26 @@ compatibility_date = "<TBD>"
 # Docs: https://developers.cloudflare.com/pages/functions/bindings/#service-bindings
 # [[services]]
 # binding = "MY_SERVICE"
-# service = "my-service"
+# service = "my-service"
+
+# To use different bindings for preview and production environments, follow the examples below.
+# When using environment-specific overrides for bindings, ALL bindings must be specified on a per-environment basis.
+# Docs: https://developers.cloudflare.com/pages/functions/wrangler-configuration#environment-specific-overrides
+
+######## PREVIEW environment config ########
+
+# [env.preview.vars]
+# API_KEY = "xyz789"
+
+# [[env.preview.kv_namespaces]]
+# binding = "MY_KV_NAMESPACE"
+# id = "<PREVIEW_NAMESPACE_ID>"
+
+######## PRODUCTION environment config ########
+
+# [env.production.vars]
+# API_KEY = "abc123"
+
+# [[env.production.kv_namespaces]]
+# binding = "MY_KV_NAMESPACE"
+# id = "<PRODUCTION_NAMESPACE_ID>"

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.60.3"
 	}
 }

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,
-				}
+				},
 			);
 		}
 

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

@@ -1,43 +1,46 @@
-import {
-	OpenAPIRoute,
-	OpenAPIRouteSchema,
-	Query,
-} from "@cloudflare/itty-router-openapi";
+import { Bool, Num, OpenAPIRoute } from "chanfana";
+import { z } from "zod";
 import { Task } from "../types";
 
 export class TaskList extends OpenAPIRoute {
-	static schema: OpenAPIRouteSchema = {
+	schema = {
 		tags: ["Tasks"],
 		summary: "List Tasks",
-		parameters: {
-			page: Query(Number, {
-				description: "Page number",
-				default: 0,
-			}),
-			isCompleted: Query(Boolean, {
-				description: "Filter by completed flag",
-				required: false,
+		request: {
+			query: z.object({
+				page: Num({
+					description: "Page number",
+					default: 0,
+				}),
+				isCompleted: Bool({
+					description: "Filter by completed flag",
+					required: false,
+				}),
 			}),
 		},
 		responses: {
 			"200": {
 				description: "Returns a list of tasks",
-				schema: {
-					success: Boolean,
-					result: {
-						tasks: [Task],
+				content: {
+					"application/json": {
+						schema: z.object({
+							series: z.object({
+								success: Bool(),
+								result: z.object({
+									tasks: Task.array(),
+								}),
+							}),
+						}),
 					},
 				},
 			},
 		},
 	};
 
-	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 parameters
 		const { page, isCompleted } = data.query;