create-cloudflare 0.0.0-820d6d21 → 0.0.0-82180a7a7

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;
 

package/templates/openapi/ts/src/index.ts

@@ -1,29 +1,23 @@
-import { OpenAPIRouter } from "@cloudflare/itty-router-openapi";
+import { fromHono } from "chanfana";
+import { Hono } from "hono";
 import { TaskCreate } from "./endpoints/taskCreate";
 import { TaskDelete } from "./endpoints/taskDelete";
 import { TaskFetch } from "./endpoints/taskFetch";
 import { TaskList } from "./endpoints/taskList";
 
-export const router = OpenAPIRouter({
+// Start a Hono app
+const app = new Hono();
+
+// Setup OpenAPI registry
+const openapi = fromHono(app, {
 	docs_url: "/",
 });
 
-router.get("/api/tasks/", TaskList);
-router.post("/api/tasks/", TaskCreate);
-router.get("/api/tasks/:taskSlug/", TaskFetch);
-router.delete("/api/tasks/:taskSlug/", TaskDelete);
-
-// 404 for everything else
-router.all("*", () =>
-	Response.json(
-		{
-			success: false,
-			error: "Route not found",
-		},
-		{ status: 404 }
-	)
-);
+// Register OpenAPI endpoints
+openapi.get("/api/tasks", TaskList);
+openapi.post("/api/tasks", TaskCreate);
+openapi.get("/api/tasks/:taskSlug", TaskFetch);
+openapi.delete("/api/tasks/:taskSlug", TaskDelete);
 
-export default {
-	fetch: router.handle,
-} satisfies ExportedHandler;
+// Export the Hono app
+export default app;

package/templates/openapi/ts/src/types.ts

@@ -1,9 +1,10 @@
-import { DateTime, Str } from "@cloudflare/itty-router-openapi";
+import { DateTime, Str } from "chanfana";
+import { z } from "zod";
 
-export const Task = {
-	name: new Str({ example: "lorem" }),
-	slug: String,
-	description: new Str({ required: false }),
-	completed: Boolean,
-	due_date: new DateTime(),
-};
+export const Task = z.object({
+	name: Str({ example: "lorem" }),
+	slug: Str(),
+	description: Str({ required: false }),
+	completed: z.boolean().default(false),
+	due_date: DateTime(),
+});

package/templates/openapi/ts/wrangler.toml

@@ -3,6 +3,12 @@ name = "<TBD>"
 main = "src/index.ts"
 compatibility_date = "<TBD>"
 
+# Workers Logs
+# Docs: https://developers.cloudflare.com/workers/observability/logs/workers-logs/
+# Configuration: https://developers.cloudflare.com/workers/observability/logs/workers-logs/#enable-workers-logs
+[observability]
+enabled = true
+
 # Automatically place your workloads in an optimal location to minimize latency.
 # If you are running back-end logic in a Worker, running it closer to your back-end infrastructure
 # rather than the end user may result in better performance.

package/templates/pre-existing/c3.ts

@@ -1,8 +1,8 @@
 import { cp, mkdtemp } from "fs/promises";
 import { tmpdir } from "os";
 import { join } from "path";
-import { processArgument } from "@cloudflare/cli/args";
 import { brandColor, dim } from "@cloudflare/cli/colors";
+import { processArgument } from "helpers/args";
 import { runCommand } from "helpers/command";
 import { detectPackageManager } from "helpers/packageManagers";
 import { chooseAccount } from "../../src/wrangler/accounts";
@@ -14,7 +14,7 @@ export async function copyExistingWorkerFiles(ctx: C3Context) {
 	await chooseAccount(ctx);
 
 	if (ctx.args.existingScript === undefined) {
-		ctx.args.existingScript = await processArgument<string>(
+		ctx.args.existingScript = await processArgument(
 			ctx.args,
 			"existingScript",
 			{

package/templates/queues/c3.ts

@@ -2,6 +2,8 @@ export default {
 	configVersion: 1,
 	id: "queues",
 	displayName: "Queue consumer & producer Worker",
+	description:
+		"Get started with a Worker that processes background tasks and message batches with Cloudflare Queues",
 	platform: "workers",
 	copyFiles: {
 		variants: {

package/templates/queues/js/wrangler.toml

@@ -3,6 +3,12 @@ name = "<TBD>"
 main = "src/index.js"
 compatibility_date = "<TBD>"
 
+# Workers Logs
+# Docs: https://developers.cloudflare.com/workers/observability/logs/workers-logs/
+# Configuration: https://developers.cloudflare.com/workers/observability/logs/workers-logs/#enable-workers-logs
+[observability]
+enabled = true
+
 # Automatically place your workloads in an optimal location to minimize latency.
 # If you are running back-end logic in a Worker, running it closer to your back-end infrastructure
 # rather than the end user may result in better performance.

package/templates/queues/ts/package.json

@@ -9,7 +9,7 @@
 		"cf-typegen": "wrangler types"
 	},
 	"devDependencies": {
-		"typescript": "^5.4.5",
+		"typescript": "^5.5.2",
 		"wrangler": "^3.60.3"
 	}
 }

package/templates/queues/ts/wrangler.toml

@@ -3,6 +3,12 @@ name = "<TBD>"
 main = "src/index.ts"
 compatibility_date = "<TBD>"
 
+# Workers Logs
+# Docs: https://developers.cloudflare.com/workers/observability/logs/workers-logs/
+# Configuration: https://developers.cloudflare.com/workers/observability/logs/workers-logs/#enable-workers-logs
+[observability]
+enabled = true
+
 # Automatically place your workloads in an optimal location to minimize latency.
 # If you are running back-end logic in a Worker, running it closer to your back-end infrastructure
 # rather than the end user may result in better performance.

package/templates/qwik/c3.ts

@@ -1,4 +1,4 @@
-import { crash, endSection } from "@cloudflare/cli";
+import { endSection } from "@cloudflare/cli";
 import { brandColor } from "@cloudflare/cli/colors";
 import { spinner } from "@cloudflare/cli/interactive";
 import { runFrameworkGenerator } from "frameworks/index";
@@ -13,7 +13,7 @@ import type { C3Context } from "types";
 const { npm, npx } = detectPackageManager();
 
 const generate = async (ctx: C3Context) => {
-	await runFrameworkGenerator(ctx, ["basic", ctx.project.name]);
+	await runFrameworkGenerator(ctx, ["playground", ctx.project.name]);
 };
 
 const configure = async (ctx: C3Context) => {
@@ -75,7 +75,7 @@ const addBindingsProxy = (ctx: C3Context) => {
 			}
 
 			if (configArgument.type !== "ObjectExpression") {
-				crash("Failed to update `vite.config.ts`");
+				throw new Error("Failed to update `vite.config.ts`");
 			}
 
 			// Add the `platform` object to the object
@@ -125,6 +125,7 @@ const populateCloudflareEnv = () => {
 const config: TemplateConfig = {
 	configVersion: 1,
 	id: "qwik",
+	frameworkCli: "create-qwik",
 	displayName: "Qwik",
 	platform: "pages",
 	copyFiles: {

package/templates/qwik/templates/wrangler.toml

@@ -2,6 +2,7 @@
 name = "<TBD>"
 compatibility_date = "<TBD>"
 pages_build_output_dir = "./dist"
+compatibility_flags = ["nodejs_compat"]
 
 # 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

package/templates/react/c3.ts

@@ -1,4 +1,5 @@
 import { logRaw } from "@cloudflare/cli";
+import { inputPrompt } from "@cloudflare/cli/interactive";
 import { runFrameworkGenerator } from "frameworks/index";
 import { detectPackageManager } from "helpers/packageManagers";
 import type { TemplateConfig } from "../../src/templates";
@@ -7,21 +8,50 @@ import type { C3Context } from "types";
 const { npm } = detectPackageManager();
 
 const generate = async (ctx: C3Context) => {
-	await runFrameworkGenerator(ctx, [ctx.project.name]);
+	const variant = await inputPrompt({
+		type: "select",
+		question: "Select a variant:",
+		label: "variant",
+		options: variantsOptions,
+		defaultValue: variantsOptions[0].value,
+	});
+
+	await runFrameworkGenerator(ctx, [ctx.project.name, "--template", variant]);
 
 	logRaw("");
 };
 
+const variantsOptions = [
+	{
+		value: "react-ts",
+		label: "TypeScript",
+	},
+	{
+		value: "react-swc-ts",
+		label: "TypeScript + SWC",
+	},
+	{
+		value: "react",
+		label: "JavaScript",
+	},
+	{
+		value: "react-swc",
+		label: "JavaScript + SWC",
+	},
+];
+
 const config: TemplateConfig = {
 	configVersion: 1,
 	id: "react",
+	// React's documentation now recommends using create-vite.
+	frameworkCli: "create-vite",
 	displayName: "React",
 	platform: "pages",
 	generate,
 	transformPackageJson: async () => ({
 		scripts: {
-			deploy: `${npm} run build && wrangler pages deploy ./build`,
-			preview: `${npm} run build && wrangler pages dev ./build`,
+			deploy: `${npm} run build && wrangler pages deploy ./dist`,
+			preview: `${npm} run build && wrangler pages dev ./dist`,
 		},
 	}),
 	devScript: "dev",

package/templates/remix/c3.ts

@@ -45,6 +45,7 @@ const configure = async () => {
 const config: TemplateConfig = {
 	configVersion: 1,
 	id: "remix",
+	frameworkCli: "create-remix",
 	platform: "pages",
 	displayName: "Remix",
 	copyFiles: {

package/templates/scheduled/c3.ts

@@ -2,6 +2,8 @@ export default {
 	configVersion: 1,
 	id: "scheduled",
 	displayName: "Scheduled Worker (Cron Trigger)",
+	description:
+		"Create a Worker to be executed on a schedule for periodic (cron) jobs",
 	platform: "workers",
 	copyFiles: {
 		variants: {

package/templates/scheduled/js/wrangler.toml

@@ -9,6 +9,12 @@ compatibility_date = "<TBD>"
 [triggers]
 crons = ["* * * * *"] # * * * * * = run every minute
 
+# Workers Logs
+# Docs: https://developers.cloudflare.com/workers/observability/logs/workers-logs/
+# Configuration: https://developers.cloudflare.com/workers/observability/logs/workers-logs/#enable-workers-logs
+[observability]
+enabled = true
+
 # Automatically place your workloads in an optimal location to minimize latency.
 # If you are running back-end logic in a Worker, running it closer to your back-end infrastructure
 # rather than the end user may result in better performance.

package/templates/scheduled/ts/package.json

@@ -9,7 +9,7 @@
 		"cf-typegen": "wrangler types"
 	},
 	"devDependencies": {
-		"typescript": "^5.4.5",
+		"typescript": "^5.5.2",
 		"wrangler": "^3.60.3"
 	}
 }

package/templates/scheduled/ts/wrangler.toml

@@ -9,6 +9,12 @@ compatibility_date = "<TBD>"
 [triggers]
 crons = ["* * * * *"] # * * * * * = run every minute
 
+# Workers Logs
+# Docs: https://developers.cloudflare.com/workers/observability/logs/workers-logs/
+# Configuration: https://developers.cloudflare.com/workers/observability/logs/workers-logs/#enable-workers-logs
+[observability]
+enabled = true
+
 # Automatically place your workloads in an optimal location to minimize latency.
 # If you are running back-end logic in a Worker, running it closer to your back-end infrastructure
 # rather than the end user may result in better performance.

package/templates/solid/c3.ts

@@ -65,6 +65,7 @@ const configure = async (ctx: C3Context) => {
 const config: TemplateConfig = {
 	configVersion: 1,
 	id: "solid",
+	frameworkCli: "create-solid",
 	displayName: "Solid",
 	platform: "pages",
 	copyFiles: {

package/templates/svelte/c3.ts

@@ -97,6 +97,7 @@ const updateTypeDefinitions = (ctx: C3Context) => {
 const config: TemplateConfig = {
 	configVersion: 1,
 	id: "svelte",
+	frameworkCli: "create-svelte",
 	displayName: "Svelte",
 	platform: "pages",
 	copyFiles: {

package/templates/vue/c3.ts

@@ -12,6 +12,7 @@ const generate = async (ctx: C3Context) => {
 const config: TemplateConfig = {
 	configVersion: 1,
 	id: "vue",
+	frameworkCli: "create-vue",
 	displayName: "Vue",
 	platform: "pages",
 	generate,

package/templates-experimental/angular/c3.ts

@@ -0,0 +1,98 @@
+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 { 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 } from "types";
+
+const { npm } = detectPackageManager();
+
+const generate = async (ctx: C3Context) => {
+	await runFrameworkGenerator(ctx, [ctx.project.name, "--ssr"]);
+	logRaw("");
+};
+
+const configure = async (ctx: C3Context) => {
+	updateAngularJson(ctx);
+	await updateAppCode();
+	await installCFWorker();
+};
+
+async function installCFWorker() {
+	await installPackages(["@cloudflare/workers-types", "wrangler"], {
+		dev: true,
+		startText: "Installing adapter 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)}`);
+
+	// Remove unwanted dependencies
+	s.start(`Updating package.json`);
+	const packageJsonPath = resolve("package.json");
+	const packageManifest = readJSON(packageJsonPath);
+
+	delete packageManifest["dependencies"]["@angular/ssr"];
+	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(resolve("angular.json"));
+	// Update builder
+	const architectSection = angularJson.projects[ctx.project.name].architect;
+	architectSection.build.options.outputPath = "dist";
+	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",
+	displayName: "Angular",
+	platform: "workers",
+	copyFiles: {
+		path: "./templates",
+	},
+	path: "templates-experimental/angular",
+	devScript: "start",
+	deployScript: "deploy",
+	generate,
+	configure,
+	transformPackageJson: async () => ({
+		scripts: {
+			start: `${npm} run build && wrangler dev`,
+			build: `ng build && ${npm} run process`,
+			process: "node ./tools/alter-polyfills.mjs",
+			deploy: `${npm} run build && wrangler deploy`,
+		},
+	}),
+};
+export default config;

package/templates-experimental/angular/templates/server.ts

@@ -0,0 +1,34 @@
+import { renderApplication } from "@angular/platform-server";
+import bootstrap from "./src/main.server";
+
+interface Env {
+	ASSETS: { fetch: typeof fetch };
+}
+
+// We attach the Cloudflare `fetch()` handler to the global scope
+// so that we can export it when we process the Angular output.
+// See tools/bundle.mjs
+async function workerFetchHandler(request: Request, env: Env) {
+	const url = new URL(request.url);
+	console.log("render SSR", url.href);
+
+	// Get the root `index.html` content.
+	const indexUrl = new URL("/index.html", url);
+	const indexResponse = await env.ASSETS.fetch(new Request(indexUrl));
+	const document = await indexResponse.text();
+
+	const content = await renderApplication(bootstrap, {
+		document,
+		url: url.pathname,
+	});
+
+	// console.log("rendered SSR", content);
+	return new Response(content, indexResponse);
+}
+
+export default {
+	fetch: (request: Request, env: Env) =>
+		(globalThis as any)["__zone_symbol__Promise"].resolve(
+			workerFetchHandler(request, env),
+		),
+};

package/templates-experimental/angular/templates/tools/alter-polyfills.mjs

@@ -0,0 +1,32 @@
+import fs from "node:fs";
+import { EOL } from "node:os";
+import { join } from "node:path";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+const dirname = path.dirname(fileURLToPath(import.meta.url));
+
+/**
+ * Split by lines and comment the banner
+ * ```
+ * import { createRequire } from 'node:module';
+ * globalThis['require'] ??= createRequire(import.meta.url);
+ * ```
+ */
+const serverPolyfillsFile = join(
+  dirname,
+  "../dist/server/polyfills.server.mjs"
+);
+const serverPolyfillsData = fs
+  .readFileSync(serverPolyfillsFile, "utf8")
+  .split(/\r?\n/);
+
+for (let index = 0; index < 2; index++) {
+  if (serverPolyfillsData[index].includes("createRequire")) {
+    serverPolyfillsData[index] = "// " + serverPolyfillsData[index];
+  }
+}
+
+// Add needed polyfills
+serverPolyfillsData.unshift(`globalThis['process'] = {};`);
+
+fs.writeFileSync(serverPolyfillsFile, serverPolyfillsData.join(EOL));

package/templates-experimental/angular/templates/wrangler.toml

@@ -0,0 +1,11 @@
+#:schema node_modules/wrangler/config-schema.json
+name = "<TBD>"
+compatibility_date = "<TBD>"
+main = "./dist/server/server.mjs"
+assets = { directory = "./dist/browser", binding = "ASSETS" }
+
+# Workers Logs
+# Docs: https://developers.cloudflare.com/workers/observability/logs/workers-logs/
+# Configuration: https://developers.cloudflare.com/workers/observability/logs/workers-logs/#enable-workers-logs
+[observability]
+enabled = true