create-cloudflare 0.0.0-e2234bbc → 0.0.0-e2472f152

package/templates-experimental/svelte/c3.ts

@@ -0,0 +1,129 @@
+import { platform } from "node:os";
+import { logRaw, updateStatus } from "@cloudflare/cli";
+import { blue, brandColor, dim } from "@cloudflare/cli/colors";
+import { runFrameworkGenerator } from "frameworks/index";
+import { transformFile } from "helpers/codemod";
+import { usesTypescript } 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, PackageJson } from "types";
+
+const { npm } = detectPackageManager();
+
+const generate = async (ctx: C3Context) => {
+	await runFrameworkGenerator(ctx, ["create", ctx.project.name]);
+
+	logRaw("");
+};
+
+const configure = async (ctx: C3Context) => {
+	// Install the adapter
+	const pkg = `@sveltejs/adapter-cloudflare`;
+	await installPackages([pkg], {
+		dev: true,
+		startText: "Adding the Cloudflare Pages adapter",
+		doneText: `${brandColor(`installed`)} ${dim(pkg)}`,
+	});
+
+	updateSvelteConfig();
+	updateTypeDefinitions(ctx);
+};
+
+const updateSvelteConfig = () => {
+	// All we need to do is change the import statement in svelte.config.js
+	updateStatus(`Changing adapter in ${blue("svelte.config.js")}`);
+
+	transformFile("svelte.config.js", {
+		visitImportDeclaration: function (n) {
+			// importSource is the `x` in `import y from "x"`
+			const importSource = n.value.source;
+			if (importSource.value === "@sveltejs/adapter-auto") {
+				importSource.value = "@sveltejs/adapter-cloudflare";
+			}
+
+			// stop traversing this node
+			return false;
+		},
+	});
+};
+
+const updateTypeDefinitions = (ctx: C3Context) => {
+	if (!usesTypescript(ctx)) {
+		return;
+	}
+
+	updateStatus(`Updating global type definitions in ${blue("app.d.ts")}`);
+
+	const b = recast.types.builders;
+
+	transformFile("src/app.d.ts", {
+		visitTSModuleDeclaration(n) {
+			if (n.value.id.name === "App" && n.node.body) {
+				const moduleBlock = n.node
+					.body as recast.types.namedTypes.TSModuleBlock;
+
+				const platformInterface = b.tsInterfaceDeclaration(
+					b.identifier("Platform"),
+					b.tsInterfaceBody([
+						b.tsPropertySignature(
+							b.identifier("env"),
+							b.tsTypeAnnotation(b.tsTypeReference(b.identifier("Env"))),
+						),
+						b.tsPropertySignature(
+							b.identifier("cf"),
+							b.tsTypeAnnotation(
+								b.tsTypeReference(b.identifier("CfProperties")),
+							),
+						),
+						b.tsPropertySignature(
+							b.identifier("ctx"),
+							b.tsTypeAnnotation(
+								b.tsTypeReference(b.identifier("ExecutionContext")),
+							),
+						),
+					]),
+				);
+
+				moduleBlock.body.unshift(platformInterface);
+			}
+
+			this.traverse(n);
+		},
+	});
+};
+
+const config: TemplateConfig = {
+	configVersion: 1,
+	id: "svelte",
+	frameworkCli: "sv",
+	displayName: "SvelteKit",
+	platform: "workers",
+	copyFiles: {
+		path: "./templates",
+	},
+	path: "templates-experimental/svelte",
+	generate,
+	configure,
+	transformPackageJson: async (original: PackageJson, ctx: C3Context) => {
+		let scripts: Record<string, string> = {
+			preview: `${npm} run build && wrangler dev`,
+			deploy: `${npm} run build && wrangler deploy`,
+		};
+
+		if (usesTypescript(ctx)) {
+			const mv = platform() === "win32" ? "move" : "mv";
+			scripts = {
+				...scripts,
+				"cf-typegen": `wrangler types && ${mv} worker-configuration.d.ts src/`,
+			};
+		}
+
+		return { scripts };
+	},
+	devScript: "dev",
+	deployScript: "deploy",
+	previewScript: "preview",
+};
+export default config;

package/templates-experimental/svelte/templates/static/.assetsignore

@@ -0,0 +1,4 @@
+_worker.js
+_routes.json
+_headers
+_redirects

package/templates-experimental/svelte/templates/wrangler.jsonc

@@ -0,0 +1,12 @@
+{
+  "name": "<TBD>",
+  "main": ".svelte-kit/cloudflare/_worker.js",
+  "compatibility_date": "<TBD>",
+  "assets": {
+    "binding": "ASSETS",
+    "directory": ".svelte-kit/cloudflare"
+  },
+  "observability": {
+    "enabled": true
+  }
+}

package/dist/angular/templates/src/main.server.ts

@@ -1,35 +0,0 @@
-import "zone.js/dist/zone-node";
-import "@angular/platform-server/init";
-
-import { bootstrapApplication } from "@angular/platform-browser";
-import { renderApplication } from "@angular/platform-server";
-
-import { AppComponent } from "./app/app.component";
-import { config } from "./app/app.config.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
-(globalThis as any).__workerFetchHandler = async function fetch(
-	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("/", url);
-	const indexResponse = await env.ASSETS.fetch(new Request(indexUrl));
-	const document = await indexResponse.text();
-
-	const content = await renderApplication(
-		() => bootstrapApplication(AppComponent, config),
-		{ document, url: url.pathname }
-	);
-	// console.log("rendered SSR", content);
-	return new Response(content, indexResponse);
-};

package/dist/angular/templates/tools/bundle.mjs

@@ -1,77 +0,0 @@
-import fs from "node:fs/promises";
-import path from "node:path";
-import { worker as workerPath } from "./paths.mjs";
-import * as esbuild from "esbuild";
-import { NodeGlobalsPolyfillPlugin } from "@esbuild-plugins/node-globals-polyfill";
-import { NodeModulesPolyfillPlugin } from "@esbuild-plugins/node-modules-polyfill";
-import fg from "fast-glob";
-
-// Process each of the JS files in the `_worker.js` directory
-for (const entry of await fg("**/*.js", { cwd: workerPath, onlyFiles: true })) {
-	if (entry === "index.js") {
-		// This is the main bundle and gets special treatment
-		await bundleMain();
-	} else {
-		await bundleLazyModule(entry);
-	}
-}
-
-// Use esbuild to process the main entry-point.
-// - shim Node.js APIs
-// - convert `global` to `globalThis`
-// - convert dynamic `require()` calls to `await import()` calls
-// - ensure that the Cloudflare `fetch()` handler is exported
-async function bundleMain() {
-	const result = await esbuild.build({
-		entryPoints: ["index.js"],
-		bundle: true,
-		format: "iife",
-		write: false,
-		absWorkingDir: workerPath,
-		define: {
-			global: "globalThis",
-		},
-		plugins: [
-			NodeGlobalsPolyfillPlugin({ buffer: true }),
-			NodeModulesPolyfillPlugin(),
-		],
-	});
-
-	// Store the original promise (before Angular/Zone.js replaces it) on the global scope.
-	let main = "globalThis.OGPromise = Promise;\n" + result.outputFiles[0].text;
-
-	// Patch any dynamic imports (converting `require()` calls to `import()` calls).
-	main = main.replace(
-		'installChunk(__require("./" + __webpack_require__.u(chunkId))',
-		'promises.push(import("./" + __webpack_require__.u(chunkId)).then((mod) => installChunk(mod.default))'
-	);
-	// Export the fetch handler (grabbing it from the global).
-	// Also Cloudflare expects `fetch()` to return an original Promise (not a ZoneAwarePromise).
-	main +=
-		"\nexport default { fetch: (request, env) => globalThis.OGPromise.resolve(globalThis.__workerFetchHandler(request, env)) };";
-
-	await fs.writeFile(path.resolve(workerPath, "index.js"), main);
-}
-
-// Use esbuild to process the lazy load modules
-// In particular we need to convert the CommonJS export syntax to ESM.
-async function bundleLazyModule(filePath) {
-	const result = await esbuild.build({
-		entryPoints: [filePath],
-		bundle: true,
-		format: "cjs",
-		write: false,
-		absWorkingDir: workerPath,
-		define: {
-			global: "globalThis",
-		},
-		plugins: [NodeModulesPolyfillPlugin()],
-	});
-
-	let content = result.outputFiles[0].text;
-
-	// Export the fetch handler (grabbing it from the global).
-	content = "const exports = {};\n" + content + "\nexport default exports";
-
-	await fs.writeFile(path.resolve(workerPath, filePath), content);
-}

package/dist/angular/templates/tools/copy-client-files.mjs

@@ -1,4 +0,0 @@
-// Copy the client-side files over so that they can be uploaded by the pages publish command.
-import fs from "node:fs";
-import { client, cloudflare } from "./paths.mjs";
-fs.cpSync(client, cloudflare, { recursive: true });

package/dist/angular/templates/tools/copy-worker-files.mjs

@@ -1,10 +0,0 @@
-// Copy the lazy loaded modules into the dist folder so that they can be
-// uploaded along with the main Worker module.
-import fs from "node:fs";
-import path from "node:path";
-import { ssr, worker } from "./paths.mjs";
-fs.cpSync(ssr, worker, { recursive: true });
-fs.renameSync(
-	path.resolve(worker, "main.js"),
-	path.resolve(worker, "index.js")
-);

package/dist/angular/templates/tools/paths.mjs

@@ -1,9 +0,0 @@
-import path from "node:path";
-import { fileURLToPath } from "node:url";
-
-const dirname = path.dirname(fileURLToPath(import.meta.url));
-export const root = path.resolve(dirname, "..");
-export const client = path.resolve(root, "dist/browser");
-export const ssr = path.resolve(root, "dist/server");
-export const cloudflare = path.resolve(root, "dist/cloudflare");
-export const worker = path.resolve(cloudflare, "_worker.js");

package/dist/angular/templates/tsconfig.server.json

@@ -1,5 +0,0 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
-{
-	"extends": "./tsconfig.app.json",
-	"files": ["./src/main.server.ts"]
-}

package/templates/chatgptPlugin/ts/README.md

@@ -1,25 +0,0 @@
-# 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 deploy` 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

@@ -1,16 +0,0 @@
-{
-	"name": "cloudflare-workers-chatgpt-plugin-example",
-	"version": "0.0.1",
-	"private": true,
-	"scripts": {
-		"deploy": "wrangler deploy",
-		"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

@@ -1,33 +0,0 @@
-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

@@ -1,63 +0,0 @@
-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

@@ -1,3 +0,0 @@
-name = "<TBD>"
-main = "src/index.ts"
-compatibility_date = "<TBD>"

package/templates/common/js/wrangler.toml

@@ -1,51 +0,0 @@
-name = "<TBD>"
-main = "src/worker.js"
-compatibility_date = "<TBD>"
-
-# 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/wrangler.toml

@@ -1,51 +0,0 @@
-name = "<TBD>"
-main = "src/worker.ts"
-compatibility_date = "<TBD>"
-
-# 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/hello-world/js/wrangler.toml

@@ -1,51 +0,0 @@
-name = "<TBD>"
-main = "src/worker.js"
-compatibility_date = "<TBD>"
-
-# 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/hello-world/ts/src/worker.ts

@@ -1,32 +0,0 @@
-/**
- * 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/
- */
-
-export interface Env {
-	// Example binding to KV. Learn more at https://developers.cloudflare.com/workers/runtime-apis/kv/
-	// MY_KV_NAMESPACE: KVNamespace;
-	//
-	// Example binding to Durable Object. Learn more at https://developers.cloudflare.com/workers/runtime-apis/durable-objects/
-	// MY_DURABLE_OBJECT: DurableObjectNamespace;
-	//
-	// Example binding to R2. Learn more at https://developers.cloudflare.com/workers/runtime-apis/r2/
-	// MY_BUCKET: R2Bucket;
-	//
-	// Example binding to a Service. Learn more at https://developers.cloudflare.com/workers/runtime-apis/service-bindings/
-	// MY_SERVICE: Fetcher;
-	//
-	// Example binding to a Queue. Learn more at https://developers.cloudflare.com/queues/javascript-apis/
-	// MY_QUEUE: Queue;
-}
-
-export default {
-	async fetch(request: Request, env: Env, ctx: ExecutionContext): Promise<Response> {
-		return new Response('Hello World!');
-	},
-};