c3: add new Queues and Cron Triggers templates (#3474)

* c3: add new Queues and Cron Triggers templates

* c3: fix formatting

* c3: rename scheduled; add tests; update common desc

* Update packages/create-cloudflare/e2e-tests/workers.test.ts

Co-authored-by: Adam Murray <admah@users.noreply.github.com>

* c3: Apply suggestions from code review

Co-authored-by: Adam Murray <admah@users.noreply.github.com>

* c3: add changeset

* c3: fix comments

---------

Co-authored-by: Adam Murray <admah@users.noreply.github.com>

.changeset/rare-mirrors-fly.md

@@ -0,0 +1,5 @@
+---
+"create-cloudflare": patch
+---
+
+Add new Queues and Scheduled (Cron Trigger) Worker templates.

packages/create-cloudflare/e2e-tests/workers.test.ts

@@ -74,4 +74,12 @@ describe("E2E: Workers templates", () => {
 	test("chatgptPlugin", async () => {
 		await runCli("chatgptPlugin");
 	});
+
+	test("queues", async () => {
+		await runCli("queues");
+	});
+
+	test("scheduled", async () => {
+		await runCli("scheduled");
+	});
 });

packages/create-cloudflare/src/cli.ts

@@ -122,7 +122,15 @@ const templateMap: Record<string, TemplateConfig> = {
 		handler: runWorkersGenerator,
 	},
 	common: {
-		label: "Common Worker functions",
+		label: "Example router & proxy Worker",
+		handler: runWorkersGenerator,
+	},
+	scheduled: {
+		label: "Scheduled Worker (Cron Trigger)",
+		handler: runWorkersGenerator,
+	},
+	queues: {
+		label: "Queue consumer & producer Worker",
 		handler: runWorkersGenerator,
 	},
 	chatgptPlugin: {

packages/create-cloudflare/templates/queues/js/.editorconfig

@@ -0,0 +1,13 @@
+# http://editorconfig.org
+root = true
+
+[*]
+indent_style = tab
+tab_width = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.yml]
+indent_style = space

packages/create-cloudflare/templates/queues/js/.gitignore

@@ -0,0 +1,172 @@
+# Logs
+
+logs
+_.log
+npm-debug.log_
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+.pnpm-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+
+report.[0-9]_.[0-9]_.[0-9]_.[0-9]_.json
+
+# Runtime data
+
+pids
+_.pid
+_.seed
+\*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+
+lib-cov
+
+# Coverage directory used by tools like istanbul
+
+coverage
+\*.lcov
+
+# nyc test coverage
+
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+
+bower_components
+
+# node-waf configuration
+
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+
+build/Release
+
+# Dependency directories
+
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+
+web_modules/
+
+# TypeScript cache
+
+\*.tsbuildinfo
+
+# Optional npm cache directory
+
+.npm
+
+# Optional eslint cache
+
+.eslintcache
+
+# Optional stylelint cache
+
+.stylelintcache
+
+# Microbundle cache
+
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+
+.node_repl_history
+
+# Output of 'npm pack'
+
+\*.tgz
+
+# Yarn Integrity file
+
+.yarn-integrity
+
+# dotenv environment variable files
+
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# parcel-bundler cache (https://parceljs.org/)
+
+.cache
+.parcel-cache
+
+# Next.js build output
+
+.next
+out
+
+# Nuxt.js build / generate output
+
+.nuxt
+dist
+
+# Gatsby files
+
+.cache/
+
+# Comment in the public line in if your project uses Gatsby and not Next.js
+
+# https://nextjs.org/blog/next-9-1#public-directory-support
+
+# public
+
+# vuepress build output
+
+.vuepress/dist
+
+# vuepress v2.x temp and cache directory
+
+.temp
+.cache
+
+# Docusaurus cache and generated files
+
+.docusaurus
+
+# Serverless directories
+
+.serverless/
+
+# FuseBox cache
+
+.fusebox/
+
+# DynamoDB Local files
+
+.dynamodb/
+
+# TernJS port file
+
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+
+.vscode-test
+
+# yarn v2
+
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.\*
+
+# wrangler project
+
+.dev.vars
+.wrangler/

packages/create-cloudflare/templates/queues/js/.prettierrc

@@ -0,0 +1,6 @@
+{
+	"printWidth": 140,
+	"singleQuote": true,
+	"semi": true,
+	"useTabs": true
+}

packages/create-cloudflare/templates/queues/js/package.json

@@ -0,0 +1,14 @@
+{
+	"name": "<TBD>",
+	"version": "0.0.0",
+	"private": true,
+	"scripts": {
+		"deploy": "wrangler publish",
+		"start": "wrangler dev"
+	},
+	"devDependencies": {
+		"@cloudflare/workers-types": "^4.20230419.0",
+		"typescript": "^5.0.4",
+		"wrangler": "^3.0.0"
+	}
+}

packages/create-cloudflare/templates/queues/js/src/worker.js

@@ -0,0 +1,38 @@
+/**
+ * Welcome to Cloudflare Workers!
+ *
+ * This is a template for a Queue consumer: a Worker that can consume from a
+ * Queue: https://developers.cloudflare.com/queues/get-started/
+ *
+ * - Run `npm run dev` in your terminal to start a development server
+ * - Open a browser tab at http://localhost:8787/ to see your worker in action
+ * - Run `npm run deploy` to publish your worker
+ *
+ * Learn more at https://developers.cloudflare.com/workers/
+ */
+
+export default {
+	// Our fetch handler is invoked on a HTTP request: we can send a message to a queue
+	// during (or after) a request.
+	// https://developers.cloudflare.com/queues/platform/javascript-apis/#producer
+	async fetch(req, env, ctx) {
+		// To send a message on a queue, we need to create the queue first
+		// https://developers.cloudflare.com/queues/get-started/#3-create-a-queue
+		await env.MY_QUEUE.send({
+			url: req.url,
+			method: req.method,
+			headers: Object.fromEntries(req.headers),
+		});
+		return new Response('Sent message to the queue');
+	},
+	// The queue handler is invoked when a batch of messages is ready to be delivered
+	// https://developers.cloudflare.com/queues/platform/javascript-apis/#messagebatch
+	async queue(batch, env) {
+		// A queue consumer can make requests to other endpoints on the Internet,
+		// write to R2 object storage, query a D1 Database, and much more.
+		for (let message of batch.messages) {
+			// Process each message (we'll just log these)
+			console.log(`message ${message.id} processed: ${JSON.stringify(message.body)}`);
+		}
+	},
+};

packages/create-cloudflare/templates/queues/js/wrangler.toml

@@ -0,0 +1,19 @@
+name = "<TBD>"
+main = "src/worker.js"
+compatibility_date = "2023-05-15"
+
+# Bind a Queue producer. Use this binding to schedule an arbitrary task that may be processed later by a Queue consumer.
+# Docs: https://developers.cloudflare.com/queues/get-started
+# [[queues.producers]]
+binding = "MY_QUEUE"
+queue = "my-queue"
+
+# Bind a Queue consumer. Queue Consumers can retrieve tasks scheduled by Producers to act on them.
+# Docs: https://developers.cloudflare.com/queues/get-started
+# [[queues.consumers]]
+queue = "my-queue"
+# Optional: Configure batching and retries: https://developers.cloudflare.com/queues/learning/batching-retries/
+# max_batch_size = 10
+# max_batch_timeout = 30
+# max_retries = 10
+# dead_letter_queue = "my-queue-dlq"

packages/create-cloudflare/templates/queues/ts/.editorconfig

@@ -0,0 +1,13 @@
+# http://editorconfig.org
+root = true
+
+[*]
+indent_style = tab
+tab_width = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.yml]
+indent_style = space