create-cloudflare 0.0.0-4c85fe99 → 0.0.0-4ce7a5de

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-cloudflare",
-  "version": "0.0.0-4c85fe99",
+  "version": "0.0.0-4ce7a5de",
   "description": "A CLI for creating and deploying new applications to Cloudflare.",
   "keywords": [
     "cloudflare",
@@ -31,13 +31,15 @@
     "@clack/prompts": "^0.6.3",
     "@cloudflare/eslint-config-worker": "*",
     "@cloudflare/workers-types": "^4.20230419.0",
+    "@iarna/toml": "^3.0.0",
     "@types/command-exists": "^1.2.0",
     "@types/cross-spawn": "^6.0.2",
+    "@types/deepmerge": "^2.2.0",
+    "@types/degit": "^2.8.6",
     "@types/dns2": "^2.0.3",
     "@types/esprima": "^4.0.3",
     "@types/node": "^18.15.3",
     "@types/semver": "^7.5.1",
-    "@types/shell-quote": "^1.7.2",
     "@types/which-pm-runs": "^1.0.0",
     "@types/yargs": "^17.0.22",
     "@typescript-eslint/eslint-plugin": "^5.55.0",
@@ -45,31 +47,38 @@
     "chalk": "^5.2.0",
     "command-exists": "^1.2.9",
     "cross-spawn": "^7.0.3",
+    "deepmerge": "^4.3.1",
+    "degit": "^2.8.4",
     "dns2": "^2.1.0",
+    "dotenv": "^16.0.0",
     "esbuild": "^0.17.12",
     "execa": "^7.1.1",
     "glob": "^10.3.3",
     "haikunator": "^2.1.2",
+    "magic-string": "^0.30.5",
     "open": "^8.4.0",
     "pnpm": "^8.10.0",
     "recast": "^0.22.0",
     "semver": "^7.5.1",
-    "shell-quote": "^1.8.1",
     "typescript": "^5.0.2",
-    "undici": "5.20.0",
+    "undici": "5.28.3",
     "vite-tsconfig-paths": "^4.0.8",
     "which-pm-runs": "^1.1.0",
     "yargs": "^17.7.1",
     "yarn": "^1.22.19",
+    "@cloudflare/cli": "1.1.1",
     "@cloudflare/workers-tsconfig": "0.0.0",
-    "@cloudflare/cli": "1.0.0",
-    "wrangler": "3.19.0"
+    "wrangler": "3.34.2"
   },
   "engines": {
     "node": ">=18.14.1"
   },
+  "workers-sdk": {
+    "prerelease": true
+  },
   "scripts": {
     "build": "node -r esbuild-register scripts/build.ts",
+    "dev:codemod": "node -r esbuild-register scripts/codemodDev.ts",
     "check:lint": "eslint .",
     "check:type": "tsc",
     "lint": "eslint",

package/templates/angular/c3.ts

@@ -0,0 +1,100 @@
+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 { compatDateFlag } from "helpers/compatDate";
+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", "@miniflare/tre@next", "wrangler@beta"],
+		{
+			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"];
+
+	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",
+	displayName: "Angular",
+	platform: "pages",
+	copyFiles: {
+		path: "./templates",
+	},
+	devScript: "start",
+	deployScript: "deploy",
+	generate,
+	configure,
+	transformPackageJson: async () => ({
+		scripts: {
+			start: `${npm} run build && wrangler pages dev dist/cloudflare ${await compatDateFlag()} --experimental-local`,
+			build: `ng build && ${npm} run process`,
+			process:
+				"node ./tools/copy-files.mjs && node ./tools/alter-polyfills.mjs",
+			deploy: `${npm} run build && wrangler pages deploy dist/cloudflare`,
+		},
+	}),
+};
+export default config;

package/{dist → templates}/angular/templates/tools/copy-files.mjs

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

package/templates/astro/c3.ts

@@ -0,0 +1,112 @@
+import { logRaw, updateStatus } from "@cloudflare/cli";
+import { blue, brandColor, dim } from "@cloudflare/cli/colors";
+import { runFrameworkGenerator } from "frameworks/index";
+import { loadTemplateSnippets, transformFile } from "helpers/codemod";
+import { runCommand } from "helpers/command";
+import { usesTypescript } from "helpers/files";
+import { detectPackageManager } from "helpers/packageManagers";
+import * as recast from "recast";
+import type { TemplateConfig } from "../../src/templates";
+import type { C3Context, PackageJson } from "types";
+
+const { npx } = detectPackageManager();
+
+const generate = async (ctx: C3Context) => {
+	await runFrameworkGenerator(ctx, [ctx.project.name, "--no-install"]);
+
+	logRaw(""); // newline
+};
+
+const configure = async (ctx: C3Context) => {
+	await runCommand([npx, "astro", "add", "cloudflare", "-y"], {
+		silent: true,
+		startText: "Installing adapter",
+		doneText: `${brandColor("installed")} ${dim(
+			`via \`${npx} astro add cloudflare\``
+		)}`,
+	});
+
+	updateAstroConfig();
+	updateEnvDeclaration(ctx);
+};
+
+const updateAstroConfig = () => {
+	const filePath = "astro.config.mjs";
+
+	updateStatus(`Updating configuration in ${blue(filePath)}`);
+
+	transformFile(filePath, {
+		visitCallExpression: function (n) {
+			const callee = n.node.callee as recast.types.namedTypes.Identifier;
+			if (callee.name !== "cloudflare") {
+				return this.traverse(n);
+			}
+
+			const b = recast.types.builders;
+			n.node.arguments = [
+				b.objectExpression([
+					b.objectProperty(
+						b.identifier("runtime"),
+						b.objectExpression([
+							b.objectProperty(b.identifier("mode"), b.stringLiteral("local")),
+						])
+					),
+				]),
+			];
+
+			return false;
+		},
+	});
+};
+
+const updateEnvDeclaration = (ctx: C3Context) => {
+	if (!usesTypescript(ctx)) {
+		return;
+	}
+
+	const filePath = "src/env.d.ts";
+
+	updateStatus(`Adding type declarations in ${blue(filePath)}`);
+
+	transformFile(filePath, {
+		visitProgram: function (n) {
+			const snippets = loadTemplateSnippets(ctx);
+			const patch = snippets.runtimeDeclarationTs;
+			const b = recast.types.builders;
+
+			// Preserve comments with the new body
+			const comments = n.get("comments").value;
+			n.node.comments = comments.map((c: recast.types.namedTypes.CommentLine) =>
+				b.commentLine(c.value)
+			);
+
+			// Add the patch
+			n.get("body").push(...patch);
+
+			return false;
+		},
+	});
+};
+
+const config: TemplateConfig = {
+	configVersion: 1,
+	id: "astro",
+	platform: "pages",
+	displayName: "Astro",
+	copyFiles: {
+		path: "./templates",
+	},
+	devScript: "dev",
+	deployScript: "deploy",
+	previewScript: "preview",
+	generate,
+	configure,
+	transformPackageJson: async (pkgJson: PackageJson, ctx: C3Context) => ({
+		scripts: {
+			deploy: `astro build && wrangler pages deploy ./dist`,
+			preview: `astro build && wrangler pages dev ./dist`,
+			...(usesTypescript(ctx) && { "build-cf-types": `wrangler types` }),
+		},
+	}),
+};
+export default config;

package/templates/astro/snippets/runtimeDeclaration.ts

@@ -0,0 +1,4 @@
+type Runtime = import("@astrojs/cloudflare").DirectoryRuntime<Env>;
+declare namespace App {
+	interface Locals extends Runtime {}
+}

package/templates/astro/templates/wrangler.toml

@@ -0,0 +1,50 @@
+name = "<TBD>"
+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 = "my-service"
+
+# 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/c3.ts

@@ -0,0 +1,16 @@
+export default {
+	configVersion: 1,
+	id: "common",
+	displayName: "Example router & proxy Worker",
+	platform: "workers",
+	copyFiles: {
+		variants: {
+			js: {
+				path: "./js",
+			},
+			ts: {
+				path: "./ts",
+			},
+		},
+	},
+};

package/templates/common/js/.editorconfig

@@ -3,7 +3,6 @@ root = true
 
 [*]
 indent_style = tab
-tab_width = 2
 end_of_line = lf
 charset = utf-8
 trim_trailing_whitespace = true

package/templates/common/ts/.editorconfig

@@ -3,7 +3,6 @@ root = true
 
 [*]
 indent_style = tab
-tab_width = 2
 end_of_line = lf
 charset = utf-8
 trim_trailing_whitespace = true

package/templates/docusaurus/c3.ts

@@ -0,0 +1,26 @@
+import { runFrameworkGenerator } from "frameworks/index";
+import { detectPackageManager } from "helpers/packageManagers";
+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, "classic"]);
+};
+
+const config: TemplateConfig = {
+	configVersion: 1,
+	id: "docusaurus",
+	platform: "pages",
+	displayName: "Docusaurus",
+	generate,
+	transformPackageJson: async () => ({
+		scripts: {
+			deploy: `${npm} run build && wrangler pages deploy ./build`,
+		},
+	}),
+	devScript: "start",
+	deployScript: "deploy",
+};
+export default config;

package/templates/gatsby/c3.ts

@@ -0,0 +1,48 @@
+import { inputPrompt } from "@cloudflare/cli/interactive";
+import { runFrameworkGenerator } from "frameworks/index";
+import { detectPackageManager } from "helpers/packageManagers";
+import type { TemplateConfig } from "../../src/templates";
+import type { C3Context } from "types";
+
+const { npm } = detectPackageManager();
+
+const generate = async (ctx: C3Context) => {
+	const defaultTemplate = "https://github.com/gatsbyjs/gatsby-starter-blog";
+
+	const useTemplate = await inputPrompt({
+		type: "confirm",
+		question: "Would you like to use a template?",
+		label: "template",
+		defaultValue: true,
+	});
+
+	let templateUrl = "";
+	if (useTemplate) {
+		templateUrl = await inputPrompt({
+			type: "text",
+			question: `Please specify the url of the template you'd like to use`,
+			label: "template",
+			defaultValue: defaultTemplate,
+		});
+	}
+
+	await runFrameworkGenerator(ctx, ["new", ctx.project.name, templateUrl]);
+};
+
+const config: TemplateConfig = {
+	configVersion: 1,
+	id: "gatsby",
+	platform: "pages",
+	displayName: "Gatsby",
+	generate,
+	transformPackageJson: async () => ({
+		scripts: {
+			deploy: `${npm} run build && wrangler pages deploy ./public`,
+			preview: `${npm} run build && wrangler pages dev ./public`,
+		},
+	}),
+	devScript: "develop",
+	deployScript: "deploy",
+	previewScript: "preview",
+};
+export default config;

package/templates/hello-world/c3.ts

@@ -0,0 +1,16 @@
+export default {
+	configVersion: 1,
+	id: "hello-world",
+	displayName: '"Hello World" Worker',
+	platform: "workers",
+	copyFiles: {
+		variants: {
+			js: {
+				path: "./js",
+			},
+			ts: {
+				path: "./ts",
+			},
+		},
+	},
+};

package/templates/hello-world/js/.editorconfig

@@ -3,7 +3,6 @@ root = true
 
 [*]
 indent_style = tab
-tab_width = 2
 end_of_line = lf
 charset = utf-8
 trim_trailing_whitespace = true

package/templates/hello-world/js/package.json

@@ -8,6 +8,8 @@
 		"start": "wrangler dev"
 	},
 	"devDependencies": {
-		"wrangler": "^3.0.0"
+		"wrangler": "^3.0.0",
+		"vitest": "1.3.0",
+		"@cloudflare/vitest-pool-workers": "^0.1.0"
 	}
 }

package/templates/hello-world/js/test/index.spec.js

@@ -0,0 +1,20 @@
+import { env, createExecutionContext, waitOnExecutionContext, SELF } from "cloudflare:test";
+import { describe, it, expect } from "vitest";
+import worker from "../src";
+
+describe("Hello World worker", () => {
+  it("responds with Hello World! (unit style)", async () => {
+    const request = new Request("http://example.com");
+    // Create an empty context to pass to `worker.fetch()`.
+    const ctx = createExecutionContext();
+    const response = await worker.fetch(request, env, ctx);
+    // Wait for all `Promise`s passed to `ctx.waitUntil()` to settle before running test assertions
+    await waitOnExecutionContext(ctx);
+    expect(await response.text()).toMatchInlineSnapshot(`"Hello World!"`);
+  });
+
+  it("responds with Hello World! (integration style)", async () => {
+   const response = await SELF.fetch(request, env, ctx);
+   expect(await response.text()).toMatchInlineSnapshot(`"Hello World!"`);
+ });
+});

package/templates/hello-world/js/vitest.config.js

@@ -0,0 +1,11 @@
+import { defineWorkersConfig } from "@cloudflare/vitest-pool-workers/config";
+
+export default defineWorkersConfig({
+  test: {
+    poolOptions: {
+      workers: {
+        wrangler: { configPath: "./wrangler.toml" },
+      },
+    },
+  },
+});

package/templates/hello-world/js/wrangler.toml

@@ -1,6 +1,7 @@
 name = "<TBD>"
 main = "src/index.js"
 compatibility_date = "<TBD>"
+compatibility_flags = ["nodejs_compat"]
 
 # Variable bindings. These are arbitrary, plaintext strings (similar to environment variables)
 # Note: Use secrets to store sensitive data.

package/templates/hello-world/ts/.editorconfig

@@ -3,7 +3,6 @@ root = true
 
 [*]
 indent_style = tab
-tab_width = 2
 end_of_line = lf
 charset = utf-8
 trim_trailing_whitespace = true

package/templates/hello-world/ts/package.json

@@ -5,10 +5,13 @@
 	"scripts": {
 		"deploy": "wrangler deploy",
 		"dev": "wrangler dev",
-		"start": "wrangler dev"
+		"start": "wrangler dev",
+		"test": "vitest"
 	},
 	"devDependencies": {
 		"typescript": "^5.0.4",
-		"wrangler": "^3.0.0"
+		"wrangler": "^3.0.0",
+		"vitest": "1.3.0",
+		"@cloudflare/vitest-pool-workers": "^0.1.0"
 	}
 }

package/templates/hello-world/ts/test/index.spec.ts

@@ -0,0 +1,25 @@
+// test/index.spec.ts
+import { env, createExecutionContext, waitOnExecutionContext, SELF } from "cloudflare:test";
+import { describe, it, expect } from "vitest";
+import worker from "../src/index";
+
+// For now, you'll need to do something like this to get a correctly-typed
+// `Request` to pass to `worker.fetch()`.
+const IncomingRequest = Request<unknown, IncomingRequestCfProperties>;
+
+describe("Hello World worker", () => {
+  it("responds with Hello World! (unit style)", async () => {
+    const request = new IncomingRequest("http://example.com");
+    // Create an empty context to pass to `worker.fetch()`.
+    const ctx = createExecutionContext();
+    const response = await worker.fetch(request, env, ctx);
+    // Wait for all `Promise`s passed to `ctx.waitUntil()` to settle before running test assertions
+    await waitOnExecutionContext(ctx);
+    expect(await response.text()).toMatchInlineSnapshot(`"Hello World!"`);
+  });
+
+  it("responds with Hello World! (integration style)", async () => {
+   const response = await SELF.fetch("https://example.com");
+   expect(await response.text()).toMatchInlineSnapshot(`"Hello World!"`);
+ });
+});

package/templates/hello-world/ts/test/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "types": [
+      "@cloudflare/workers-types/experimental",
+      "@cloudflare/vitest-pool-workers"
+    ]
+  },
+  "include": ["./**/*.ts", "../src/env.d.ts"],
+  "exclude": []
+}

package/templates/hello-world/ts/tsconfig.json

@@ -26,7 +26,7 @@
 		/* Modules */
 		"module": "es2022" /* Specify what module code is generated. */,
 		// "rootDir": "./",                                  /* Specify the root folder within your source files. */
-		"moduleResolution": "node" /* Specify how TypeScript looks up a file from a given module specifier. */,
+		"moduleResolution": "Bundler" /* Specify how TypeScript looks up a file from a given module specifier. */,
 		// "baseUrl": "./",                                  /* Specify the base directory to resolve non-relative module names. */
 		// "paths": {},                                      /* Specify a set of entries that re-map imports to additional lookup locations. */
 		// "rootDirs": [],                                   /* Allow multiple folders to be treated as one when resolving modules. */
@@ -97,5 +97,6 @@
 		/* Completeness */
 		// "skipDefaultLibCheck": true,                      /* Skip type checking .d.ts files that are included with TypeScript. */
 		"skipLibCheck": true /* Skip type checking all .d.ts files. */
-	}
+	},
+	"exclude": ["test"]
 }

package/templates/hello-world/ts/vitest.config.ts

@@ -0,0 +1,11 @@
+import { defineWorkersConfig } from "@cloudflare/vitest-pool-workers/config";
+
+export default defineWorkersConfig({
+  test: {
+    poolOptions: {
+      workers: {
+        wrangler: { configPath: "./wrangler.toml" },
+      },
+    },
+  },
+});

package/templates/hello-world/ts/wrangler.toml

@@ -1,6 +1,7 @@
 name = "<TBD>"
 main = "src/index.ts"
 compatibility_date = "<TBD>"
+compatibility_flags = ["nodejs_compat"]
 
 # Variable bindings. These are arbitrary, plaintext strings (similar to environment variables)
 # Note: Use secrets to store sensitive data.

package/templates/hello-world-durable-object/c3.ts

@@ -0,0 +1,16 @@
+export default {
+	configVersion: 1,
+	id: "hello-world-durable-object",
+	displayName: '"Hello World" Durable Object',
+	platform: "workers",
+	copyFiles: {
+		variants: {
+			js: {
+				path: "./js",
+			},
+			ts: {
+				path: "./ts",
+			},
+		},
+	},
+};