create-cloudflare 0.0.0-ca4d27bd

package/package.json

@@ -0,0 +1,73 @@
+{
+	"name": "create-cloudflare",
+	"version": "0.0.0-ca4d27bd",
+	"description": "A CLI for creating and deploying new applications to Cloudflare.",
+	"keywords": [
+		"cloudflare",
+		"workers",
+		"cloudflare workers",
+		"serverless",
+		"serverless application"
+	],
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/cloudflare/workers-sdk.git",
+		"directory": "packages/create-cloudflare"
+	},
+	"license": "MIT OR Apache-2.0",
+	"author": "wrangler@cloudflare.com",
+	"exports": {
+		".": "./dist/cli.js"
+	},
+	"main": "./dist/cli.js",
+	"bin": "./dist/cli.js",
+	"files": [
+		"dist",
+		"templates"
+	],
+	"scripts": {
+		"build": "node scripts/build.js",
+		"check:lint": "eslint .",
+		"check:type": "tsc",
+		"lint": "eslint",
+		"prepublishOnly": "npm run build",
+		"test:e2e": "npm run build && vitest run --config ./vitest-e2e.config.ts",
+		"test:unit": "vitest run --config ./vitest.config.ts",
+		"watch": "node scripts/build.js --watch"
+	},
+	"devDependencies": {
+		"@babel/parser": "^7.21.3",
+		"@babel/types": "^7.21.4",
+		"@clack/prompts": "^0.6.3",
+		"@cloudflare/eslint-config-worker": "*",
+		"@cloudflare/workers-tsconfig": "*",
+		"@cloudflare/workers-types": "^4.20230419.0",
+		"@types/command-exists": "^1.2.0",
+		"@types/cross-spawn": "^6.0.2",
+		"@types/esprima": "^4.0.3",
+		"@types/node": "^18.15.3",
+		"@types/which-pm-runs": "^1.0.0",
+		"@types/yargs": "^17.0.22",
+		"@typescript-eslint/eslint-plugin": "^5.55.0",
+		"@typescript-eslint/parser": "^5.55.0",
+		"chalk": "^5.2.0",
+		"command-exists": "^1.2.9",
+		"cross-spawn": "^7.0.3",
+		"esbuild": "^0.17.12",
+		"execa": "^7.1.1",
+		"haikunator": "^2.1.2",
+		"log-update": "^5.0.1",
+		"open": "^8.4.0",
+		"recast": "^0.22.0",
+		"typescript": "^5.0.2",
+		"undici": "^5.22.0",
+		"vite-tsconfig-paths": "^4.0.8",
+		"vitest": "^0.30.0",
+		"which-pm-runs": "^1.1.0",
+		"wrangler": "*",
+		"yargs": "^17.7.1"
+	},
+	"engines": {
+		"node": ">=16.13.0"
+	}
+}

package/templates/chatgptPlugin/ts/README.md

@@ -0,0 +1,25 @@
+# Example ChatGPT Plugin for Cloudflare Workers
+
+This is an example plugin showing how to build [ChatGPT plugins](https://platform.openai.com/docs/plugins/introduction) using [Cloudflare Workers](https://workers.dev). Using this example, you can deploy a plugin to Cloudflare Workers in just a few minutes.
+
+The sample plugin allows ChatGPT users to search for repositories using GitHub's search API. The plugin is implemented in TypeScript and uses the [OpenAPI](https://www.openapis.org/) specification to define the plugin's API.
+
+![Example conversation in ChatGPT showing the plugin in use](./.assets/example.png)
+
+## Get started
+
+0. Sign up for [Cloudflare Workers](https://workers.dev). The free tier is more than enough for most use cases.
+1. Install [wrangler](https://developers.cloudflare.com/workers/cli-wrangler/install-update), the Cloudflare Workers CLI
+2. Clone this project and install dependencies with `npm install`
+3. Run `wrangler login` to login to your Cloudflare account in wrangler
+4. Run `wrangler publish` to publish the plugin to Cloudflare Workers
+
+## Usage
+
+1. You can configure the `.well-known/ai-plugin.json` route in `index.ts`.
+2. Update the OpenAPI schema in `openapi.ts`.
+3. You can set up any new routes and the associated OpenAPI schema by defining new routes. See `search.ts` for an example.
+
+## Deploying to OpenAI's API
+
+Follow the instructions [in the ChatGPT documentation](https://platform.openai.com/docs/plugins/introduction/plugin-flow) to deploy your plugin and begin using it in ChatGPT.

package/templates/chatgptPlugin/ts/package.json

@@ -0,0 +1,16 @@
+{
+	"name": "cloudflare-workers-chatgpt-plugin-example",
+	"version": "0.0.1",
+	"private": true,
+	"scripts": {
+		"deploy": "wrangler publish",
+		"start": "wrangler dev"
+	},
+	"dependencies": {
+		"@cloudflare/itty-router-openapi": "^0.1.2"
+	},
+	"devDependencies": {
+		"@cloudflare/workers-types": "^4.20230404.0",
+		"wrangler": "^3.0.0"
+	}
+}

package/templates/chatgptPlugin/ts/src/index.ts

@@ -0,0 +1,33 @@
+import { OpenAPIRouter } from "@cloudflare/itty-router-openapi";
+import { GetSearch } from "./search";
+
+export const router = OpenAPIRouter({
+	schema: {
+		info: {
+			title: "GitHub Repositories Search API",
+			description:
+				"A plugin that allows the user to search for GitHub repositories using ChatGPT",
+			version: "v0.0.1",
+		},
+	},
+	docs_url: "/",
+	aiPlugin: {
+		name_for_human: "GitHub Repositories Search",
+		name_for_model: "github_repositories_search",
+		description_for_human: "GitHub Repositories Search plugin for ChatGPT.",
+		description_for_model:
+			"GitHub Repositories Search plugin for ChatGPT. You can search for GitHub repositories using this plugin.",
+		contact_email: "support@example.com",
+		legal_info_url: "http://www.example.com/legal",
+		logo_url: "https://workers.cloudflare.com/resources/logo/logo.svg",
+	},
+});
+
+router.get("/search", GetSearch);
+
+// 404 for everything else
+router.all("*", () => new Response("Not Found.", { status: 404 }));
+
+export default {
+	fetch: router.handle,
+};

package/templates/chatgptPlugin/ts/src/search.ts

@@ -0,0 +1,63 @@
+import {
+	ApiException,
+	OpenAPIRoute,
+	Query,
+	ValidationError,
+} from "@cloudflare/itty-router-openapi";
+
+export class GetSearch extends OpenAPIRoute {
+	static schema = {
+		tags: ["Search"],
+		summary: "Search repositories by a query parameter",
+		parameters: {
+			q: Query(String, {
+				description: "The query to search for",
+				default: "cloudflare workers",
+			}),
+		},
+		responses: {
+			"200": {
+				schema: {
+					repos: [
+						{
+							name: "itty-router-openapi",
+							description:
+								"OpenAPI 3 schema generator and validator for Cloudflare Workers",
+							stars: "80",
+							url: "https://github.com/cloudflare/itty-router-openapi",
+						},
+					],
+				},
+			},
+		},
+	};
+
+	async handle(request: Request, env, ctx, data: Record<string, any>) {
+		const url = `https://api.github.com/search/repositories?q=${data.q}`;
+
+		const resp = await fetch(url, {
+			headers: {
+				Accept: "application/vnd.github.v3+json",
+				"User-Agent": "RepoAI - Cloudflare Workers ChatGPT Plugin Example",
+			},
+		});
+
+		if (!resp.ok) {
+			return new Response(await resp.text(), { status: 400 });
+		}
+
+		const json = await resp.json();
+
+		// @ts-ignore
+		const repos = json.items.map((item: any) => ({
+			name: item.name,
+			description: item.description,
+			stars: item.stargazers_count,
+			url: item.html_url,
+		}));
+
+		return {
+			repos: repos,
+		};
+	}
+}

package/templates/chatgptPlugin/ts/wrangler.toml

@@ -0,0 +1,3 @@
+name = "cloudflare-workers-chatgpt-plugin-example"
+main = "src/index.ts"
+compatibility_date = "2023-04-07"

package/templates/common/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

package/templates/common/js/.prettierrc

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

package/templates/common/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",
+		"itty-router": "^3.0.12",
+		"wrangler": "^3.0.0"
+	}
+}

package/templates/common/js/src/ab-test.js

@@ -0,0 +1,41 @@
+const ORIGIN_URL = 'https://example.com';
+const EXPERIMENTS = [
+	{ name: 'big-button', threshold: 0.5 }, // enable the Big Button experiment for 50% of users
+	{ name: 'new-brand', threshold: 0.1 }, // enable the New Brand experiment for 10% of users
+	{ name: 'new-layout', threshold: 0.02 }, // enable the New Layout experiment for 2% of users
+];
+
+export default {
+	async fetch(request, env, ctx) {
+		const fingerprint = [request.headers.get('cf-connecting-ip'), request.cf?.postalCode]; // add any values you want considered as a fingerprint
+		const activeExperiments = await getActiveExperiments(fingerprint, EXPERIMENTS);
+
+		// add a data-experiments attribute to the <body> tag
+		// which can be styled in CSS with a wildcard selector like [data-experiments*="big-button"]
+		const rewriter = new HTMLRewriter().on('body', {
+			element(element) {
+				element.setAttribute('data-experiments', activeExperiments.join(' '));
+			},
+		});
+
+		const res = await fetch(ORIGIN_URL, request);
+
+		return rewriter.transform(res);
+	},
+};
+
+// Get active experiments by hashing a fingerprint
+async function getActiveExperiments(fingerprint, experiments) {
+	const fingerprintHash = await hash('SHA-1', JSON.stringify(fingerprint));
+	const MAX_UINT8 = 255;
+	const activeExperiments = experiments.filter((exp, i) => fingerprintHash[i] <= exp.threshold * MAX_UINT8);
+	return activeExperiments.map((exp) => exp.name);
+}
+
+// Hash a string using the Web Crypto API
+async function hash(algorithm, message) {
+	const msgUint8 = new TextEncoder().encode(message); // encode as (utf-8) Uint8Array
+	const hashBuffer = await crypto.subtle.digest(algorithm, msgUint8); // hash the message
+	const hashArray = new Uint8Array(hashBuffer); // convert buffer to byte array
+	return hashArray;
+}

package/templates/common/js/src/proxy.js

@@ -0,0 +1,23 @@
+export default {
+	async fetch(request, env, ctx) {
+		const url = new URL(request.url);
+
+		const proxyUrl = url.searchParams.get('proxyUrl'); // get a query param value (?proxyUrl=...)
+		const modify = url.searchParams.has('modify'); // check if a query param is set (?proxyUrl=...&modify)
+
+		if (!proxyUrl) {
+			return new Response('Bad request: Missing `proxyUrl` query param', { status: 400 });
+		}
+
+		// make subrequests with the global `fetch()` function
+		let res = await fetch(proxyUrl, request);
+
+		// optionally, modify the respone
+		if (modify) {
+			res = new Response(res.body, res);
+			res.headers.set('X-My-Header', 'My Header Value');
+		}
+
+		return res;
+	},
+};

package/templates/common/js/src/redirect.js

@@ -0,0 +1,13 @@
+export default {
+	async fetch(request, env, ctx) {
+		const url = new URL(request.url);
+		const redirectUrl = url.searchParams.get('redirectUrl'); // get a query param value (?redirectUrl=...)
+
+		if (!redirectUrl) {
+			return new Response('Bad request: Missing `redirectUrl` query param', { status: 400 });
+		}
+
+		// The Response class has static methods to create common Response objects as a convenience
+		return Response.redirect(redirectUrl);
+	},
+};

package/templates/common/js/src/router.js

@@ -0,0 +1,22 @@
+import { Router } from 'itty-router';
+
+// now let's create a router (note the lack of "new")
+const router = Router();
+
+// GET collection index
+router.get('/api/todos', () => new Response('Todos Index!'));
+
+// GET item
+router.get('/api/todos/:id', ({ params }) => new Response(`Todo #${params.id}`));
+
+// POST to the collection (we'll use async here)
+router.post('/api/todos', async (request) => {
+	const content = await request.json();
+
+	return new Response('Creating Todo: ' + JSON.stringify(content));
+});
+
+// 404 for everything else
+router.all('*', () => new Response('Not Found.', { status: 404 }));
+
+export default router;

package/templates/common/js/src/worker.js

@@ -0,0 +1,46 @@
+/**
+ * Welcome to Cloudflare Workers! This is your first worker.
+ *
+ * - 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/
+ */
+
+import handleProxy from './proxy';
+import handleRedirect from './redirect';
+import apiRouter from './router';
+
+// Export a default object containing event handlers
+export default {
+	// The fetch handler is invoked when this worker receives a HTTP(S) request
+	// and should return a Response (optionally wrapped in a Promise)
+	async fetch(request, env, ctx) {
+		// You'll find it helpful to parse the request.url string into a URL object. Learn more at https://developer.mozilla.org/en-US/docs/Web/API/URL
+		const url = new URL(request.url);
+
+		// You can get pretty far with simple logic like if/switch-statements
+		switch (url.pathname) {
+			case '/redirect':
+				return handleRedirect.fetch(request, env, ctx);
+
+			case '/proxy':
+				return handleProxy.fetch(request, env, ctx);
+		}
+
+		if (url.pathname.startsWith('/api/')) {
+			// You can also use more robust routing
+			return apiRouter.handle(request);
+		}
+
+		return new Response(
+			`Try making requests to:
+      <ul>
+      <li><code><a href="/redirect?redirectUrl=https://example.com/">/redirect?redirectUrl=https://example.com/</a></code>,</li>
+      <li><code><a href="/proxy?modify&proxyUrl=https://example.com/">/proxy?modify&proxyUrl=https://example.com/</a></code>, or</li>
+      <li><code><a href="/api/todos">/api/todos</a></code></li>`,
+			{ headers: { 'Content-Type': 'text/html' } }
+		);
+	},
+};

package/templates/common/js/wrangler.toml

@@ -0,0 +1,51 @@
+name = "<TBD>"
+main = "src/worker.js"
+compatibility_date = "2023-04-21"
+
+# Variable bindings. These are arbitrary, plaintext strings (similar to environment variables)
+# Note: Use secrets to store sensitive data.
+# Docs: https://developers.cloudflare.com/workers/platform/environment-variables
+# [vars]
+# MY_VARIABLE = "production_value"
+
+# Bind a KV Namespace. Use KV as persistent storage for small key-value pairs.
+# Docs: https://developers.cloudflare.com/workers/runtime-apis/kv
+# [[kv_namespaces]]
+# binding = "MY_KV_NAMESPACE"
+# id = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
+
+# Bind an R2 Bucket. Use R2 to store arbitrarily large blobs of data, such as files.
+# Docs: https://developers.cloudflare.com/r2/api/workers/workers-api-usage/
+# [[r2_buckets]]
+# binding = "MY_BUCKET"
+# bucket_name = "my-bucket"
+
+# 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"
+
+# Bind another Worker service. Use this binding to call another Worker without network overhead.
+# Docs: https://developers.cloudflare.com/workers/platform/services
+# [[services]]
+# binding = "MY_SERVICE"
+# service = "/api/*"
+
+# Bind a Durable Object. Durable objects are a scale-to-zero compute primitive based on the actor model.
+# Durable Objects can live for as long as needed. Use these when you need a long-running "server", such as in realtime apps.
+# Docs: https://developers.cloudflare.com/workers/runtime-apis/durable-objects
+# [[durable_objects.bindings]]
+# name = "MY_DURABLE_OBJECT"
+# class_name = "MyDurableObject"
+
+# Durable Object migrations.
+# Docs: https://developers.cloudflare.com/workers/learning/using-durable-objects#configure-durable-object-classes-with-migrations
+# [[migrations]]
+# tag = "v1"
+# new_classes = ["MyDurableObject"]

package/templates/common/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

package/templates/common/ts/.prettierrc

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

package/templates/common/ts/package.json

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

package/templates/common/ts/src/ab-test.ts

@@ -0,0 +1,41 @@
+const ORIGIN_URL = 'https://example.com';
+const EXPERIMENTS = [
+	{ name: 'big-button', threshold: 0.5 }, // enable the Big Button experiment for 50% of users
+	{ name: 'new-brand', threshold: 0.1 }, // enable the New Brand experiment for 10% of users
+	{ name: 'new-layout', threshold: 0.02 }, // enable the New Layout experiment for 2% of users
+];
+
+export default {
+	async fetch(request: Request, env: Env, ctx: ExecutionContext): Promise<Response> {
+		const fingerprint = [request.headers.get('cf-connecting-ip'), request.cf?.postalCode]; // add any values you want considered as a fingerprint
+		const activeExperiments = await getActiveExperiments(fingerprint, EXPERIMENTS);
+
+		// add a data-experiments attribute to the <body> tag
+		// which can be styled in CSS with a wildcard selector like [data-experiments*="big-button"]
+		const rewriter = new HTMLRewriter().on('body', {
+			element(element: Element) {
+				element.setAttribute('data-experiments', activeExperiments.join(' '));
+			},
+		});
+
+		const res = await fetch(ORIGIN_URL, request);
+
+		return rewriter.transform(res);
+	},
+};
+
+// Get active experiments by hashing a fingerprint
+async function getActiveExperiments(fingerprint: unknown, experiments: Array<{ name: string; threshold: number }>) {
+	const fingerprintHash: Uint8Array = await hash('SHA-1', JSON.stringify(fingerprint));
+	const MAX_UINT8 = 255;
+	const activeExperiments = experiments.filter((exp, i) => fingerprintHash[i] <= exp.threshold * MAX_UINT8);
+	return activeExperiments.map((exp) => exp.name);
+}
+
+// Hash a string using the Web Crypto API
+async function hash(algorithm: 'SHA-1' | 'SHA-256' | 'SHA-512', message: string): Promise<Uint8Array> {
+	const msgUint8 = new TextEncoder().encode(message); // encode as (utf-8) Uint8Array
+	const hashBuffer = await crypto.subtle.digest(algorithm, msgUint8); // hash the message
+	const hashArray = new Uint8Array(hashBuffer); // convert buffer to byte array
+	return hashArray;
+}

package/templates/common/ts/src/proxy.ts

@@ -0,0 +1,23 @@
+export default {
+	async fetch(request: Request, env: Env, ctx: ExecutionContext): Promise<Response> {
+		const url = new URL(request.url);
+
+		const proxyUrl = url.searchParams.get('proxyUrl'); // get a query param value (?proxyUrl=...)
+		const modify = url.searchParams.has('modify'); // check if a query param is set (?proxyUrl=...&modify)
+
+		if (!proxyUrl) {
+			return new Response('Bad request: Missing `proxyUrl` query param', { status: 400 });
+		}
+
+		// make subrequests with the global `fetch()` function
+		let res = await fetch(proxyUrl, request);
+
+		// optionally, modify the respone
+		if (modify) {
+			res = new Response(res.body, res);
+			res.headers.set('X-My-Header', 'My Header Value');
+		}
+
+		return res;
+	},
+};

package/templates/common/ts/src/redirect.ts

@@ -0,0 +1,13 @@
+export default {
+	async fetch(request: Request, env: Env, ctx: ExecutionContext): Promise<Response> {
+		const url = new URL(request.url);
+		const redirectUrl = url.searchParams.get('redirectUrl'); // get a query param value (?redirectUrl=...)
+
+		if (!redirectUrl) {
+			return new Response('Bad request: Missing `redirectUrl` query param', { status: 400 });
+		}
+
+		// The Response class has static methods to create common Response objects as a convenience
+		return Response.redirect(redirectUrl);
+	},
+};

package/templates/common/ts/src/router.ts

@@ -0,0 +1,22 @@
+import { Router } from 'itty-router';
+
+// now let's create a router (note the lack of "new")
+const router = Router();
+
+// GET collection index
+router.get('/api/todos', () => new Response('Todos Index!'));
+
+// GET item
+router.get('/api/todos/:id', ({ params }) => new Response(`Todo #${params.id}`));
+
+// POST to the collection (we'll use async here)
+router.post('/api/todos', async (request) => {
+	const content = await request.json();
+
+	return new Response('Creating Todo: ' + JSON.stringify(content));
+});
+
+// 404 for everything else
+router.all('*', () => new Response('Not Found.', { status: 404 }));
+
+export default router;

package/templates/common/ts/src/worker.ts

@@ -0,0 +1,46 @@
+/**
+ * Welcome to Cloudflare Workers! This is your first worker.
+ *
+ * - 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/
+ */
+
+import handleProxy from './proxy';
+import handleRedirect from './redirect';
+import apiRouter from './router';
+
+// Export a default object containing event handlers
+export default {
+	// The fetch handler is invoked when this worker receives a HTTP(S) request
+	// and should return a Response (optionally wrapped in a Promise)
+	async fetch(request: Request, env: Env, ctx: ExecutionContext): Promise<Response> {
+		// You'll find it helpful to parse the request.url string into a URL object. Learn more at https://developer.mozilla.org/en-US/docs/Web/API/URL
+		const url = new URL(request.url);
+
+		// You can get pretty far with simple logic like if/switch-statements
+		switch (url.pathname) {
+			case '/redirect':
+				return handleRedirect.fetch(request, env, ctx);
+
+			case '/proxy':
+				return handleProxy.fetch(request, env, ctx);
+		}
+
+		if (url.pathname.startsWith('/api/')) {
+			// You can also use more robust routing
+			return apiRouter.handle(request);
+		}
+
+		return new Response(
+			`Try making requests to:
+      <ul>
+      <li><code><a href="/redirect?redirectUrl=https://example.com/">/redirect?redirectUrl=https://example.com/</a></code>,</li>
+      <li><code><a href="/proxy?modify&proxyUrl=https://example.com/">/proxy?modify&proxyUrl=https://example.com/</a></code>, or</li>
+      <li><code><a href="/api/todos">/api/todos</a></code></li>`,
+			{ headers: { 'Content-Type': 'text/html' } }
+		);
+	},
+};