create-cloudflare 0.0.0-fd0fb230 → 0.0.0-fd2f1530

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-cloudflare",
-  "version": "0.0.0-fd0fb230",
+  "version": "0.0.0-fd2f1530",
   "description": "A CLI for creating and deploying new applications to Cloudflare.",
   "keywords": [
     "cloudflare",
@@ -50,6 +50,7 @@
     "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",
@@ -60,14 +61,14 @@
     "recast": "^0.22.0",
     "semver": "^7.5.1",
     "typescript": "^5.0.2",
-    "undici": "5.28.2",
+    "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",
-    "wrangler": "3.28.3"
+    "wrangler": "3.30.1",
+    "@cloudflare/cli": "1.1.1"
   },
   "engines": {
     "node": ">=18.14.1"
@@ -77,6 +78,7 @@
   },
   "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/astro/c3.ts

@@ -1,10 +1,12 @@
-import { logRaw } from "@cloudflare/cli";
-import { brandColor, dim } from "@cloudflare/cli/colors";
+import { logRaw, updateStatus } from "@cloudflare/cli";
+import { blue, brandColor, dim } from "@cloudflare/cli/colors";
+import { loadTemplateSnippets, transformFile } from "helpers/codemod";
 import { runCommand, runFrameworkGenerator } from "helpers/command";
-import { compatDateFlag } from "helpers/files";
+import { usesTypescript } from "helpers/files";
 import { detectPackageManager } from "helpers/packages";
+import * as recast from "recast";
 import type { TemplateConfig } from "../../src/templates";
-import type { C3Context } from "types";
+import type { C3Context, PackageJson } from "types";
 
 const { npx } = detectPackageManager();
 
@@ -14,7 +16,7 @@ const generate = async (ctx: C3Context) => {
 	logRaw(""); // newline
 };
 
-const configure = async () => {
+const configure = async (ctx: C3Context) => {
 	await runCommand([npx, "astro", "add", "cloudflare", "-y"], {
 		silent: true,
 		startText: "Installing adapter",
@@ -22,6 +24,67 @@ const configure = async () => {
 			`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 = {
@@ -29,12 +92,19 @@ const config: TemplateConfig = {
 	id: "astro",
 	platform: "pages",
 	displayName: "Astro",
+	copyFiles: {
+		path: "./templates",
+	},
+	devScript: "dev",
+	deployScript: "deploy",
+	previewScript: "preview",
 	generate,
 	configure,
-	transformPackageJson: async () => ({
+	transformPackageJson: async (pkgJson: PackageJson, ctx: C3Context) => ({
 		scripts: {
-			"pages:dev": `wrangler pages dev ${await compatDateFlag()} -- astro dev`,
-			"pages:deploy": `astro build && wrangler pages deploy ./dist`,
+			deploy: `astro build && wrangler pages deploy ./dist`,
+			preview: `astro build && wrangler pages dev ./dist`,
+			...(usesTypescript(ctx) && { "build-cf-types": `wrangler types` }),
 		},
 	}),
 	testFlags: [

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/nuxt/c3.ts

@@ -81,10 +81,10 @@ const config: TemplateConfig = {
 	configVersion: 1,
 	id: "nuxt",
 	platform: "pages",
+	displayName: "Nuxt",
 	copyFiles: {
 		path: "./templates",
 	},
-	displayName: "Nuxt",
 	devScript: "dev",
 	deployScript: "deploy",
 	generate,
@@ -93,6 +93,7 @@ const config: TemplateConfig = {
 		scripts: {
 			deploy: `${npm} run build && wrangler pages deploy ./dist`,
 			preview: `${npm} run build && wrangler pages dev ./dist`,
+			"build-cf-types": `wrangler types`,
 		},
 	}),
 };

package/templates/qwik/c3.ts

@@ -1,13 +1,13 @@
-import { endSection } from "@cloudflare/cli";
+import { crash, endSection } from "@cloudflare/cli";
 import { brandColor } from "@cloudflare/cli/colors";
 import { spinner } from "@cloudflare/cli/interactive";
-import { parseTs, transformFile } from "helpers/codemod";
+import { loadTemplateSnippets, transformFile } from "helpers/codemod";
 import { runCommand, runFrameworkGenerator } from "helpers/command";
 import { usesTypescript } from "helpers/files";
 import { detectPackageManager } from "helpers/packages";
+import * as recast from "recast";
 import { quoteShellArgs } from "../../src/common";
 import type { TemplateConfig } from "../../src/templates";
-import type * as recast from "recast";
 import type { C3Context } from "types";
 
 const { npm, npx } = detectPackageManager();
@@ -23,6 +23,7 @@ const configure = async (ctx: C3Context) => {
 	await runCommand(cmd);
 
 	addBindingsProxy(ctx);
+	populateCloudflareEnv();
 };
 
 const addBindingsProxy = (ctx: C3Context) => {
@@ -35,43 +36,90 @@ const addBindingsProxy = (ctx: C3Context) => {
 	const s = spinner();
 	s.start("Updating `vite.config.ts`");
 
-	// Insert the env declaration after the last import (but before the rest of the body)
-	const envDeclaration = `
-let env = {};
-
-if(process.env.NODE_ENV === 'development') {
-  const { getPlatformProxy } = await import('wrangler');
-  const platformProxy = await getPlatformProxy();
-  env = platformProxy.env;
-}
-`;
+	const snippets = loadTemplateSnippets(ctx);
+	const b = recast.types.builders;
 
 	transformFile("vite.config.ts", {
+		// Insert the env declaration after the last import (but before the rest of the body)
 		visitProgram: function (n) {
 			const lastImportIndex = n.node.body.findLastIndex(
 				(t) => t.type === "ImportDeclaration"
 			);
-			n.get("body").insertAt(lastImportIndex + 1, envDeclaration);
+			const lastImport = n.get("body", lastImportIndex);
+			lastImport.insertAfter(...snippets.getPlatformProxyTs);
+
+			return this.traverse(n);
+		},
+		// Pass the `platform` object from the declaration to the `qwikCity` plugin
+		visitCallExpression: function (n) {
+			const callee = n.node.callee as recast.types.namedTypes.Identifier;
+			if (callee.name !== "qwikCity") {
+				return this.traverse(n);
+			}
+
+			// The config object passed to `qwikCity`
+			const configArgument = n.node.arguments[0] as
+				| recast.types.namedTypes.ObjectExpression
+				| undefined;
+
+			const platformPropery = b.objectProperty.from({
+				key: b.identifier("platform"),
+				value: b.identifier("platform"),
+				shorthand: true,
+			});
+
+			if (!configArgument) {
+				n.node.arguments = [b.objectExpression([platformPropery])];
+
+				return false;
+			}
+
+			if (configArgument.type !== "ObjectExpression") {
+				crash("Failed to update `vite.config.ts`");
+			}
+
+			// Add the `platform` object to the object
+			configArgument.properties.push(platformPropery);
 
 			return false;
 		},
 	});
 
-	// Populate the `qwikCity` plugin with the platform object containing the `env` defined above.
-	const platformObject = parseTs(`{ platform: { env } }`);
+	s.stop(`${brandColor("updated")} \`vite.config.ts\``);
+};
 
-	transformFile("vite.config.ts", {
-		visitCallExpression: function (n) {
-			const callee = n.node.callee as recast.types.namedTypes.Identifier;
-			if (callee.name === "qwikCity") {
-				n.node.arguments = [platformObject];
+const populateCloudflareEnv = () => {
+	const entrypointPath = "src/entry.cloudflare-pages.tsx";
+
+	const s = spinner();
+	s.start(`Updating \`${entrypointPath}\``);
+
+	transformFile(entrypointPath, {
+		visitTSInterfaceDeclaration: function (n) {
+			const b = recast.types.builders;
+			const id = n.node.id as recast.types.namedTypes.Identifier;
+			if (id.name !== "QwikCityPlatform") {
+				this.traverse(n);
 			}
 
-			this.traverse(n);
+			const newBody = [
+				["env", "Env"],
+				// Qwik doesn't supply `cf` to the platform object. Should they do so, uncomment this
+				// ["cf", "CfProperties"],
+			].map(([varName, type]) =>
+				b.tsPropertySignature(
+					b.identifier(varName),
+					b.tsTypeAnnotation(b.tsTypeReference(b.identifier(type)))
+				)
+			);
+
+			n.node.body.body = newBody;
+
+			return false;
 		},
 	});
 
-	s.stop(`${brandColor("updated")} \`vite.config.ts\``);
+	s.stop(`${brandColor("updated")} \`${entrypointPath}\``);
 };
 
 const config: TemplateConfig = {
@@ -89,6 +137,8 @@ const config: TemplateConfig = {
 	transformPackageJson: async () => ({
 		scripts: {
 			deploy: `${npm} run build && wrangler pages deploy ./dist`,
+			preview: `${npm} run build && wrangler pages dev ./dist`,
+			"build-cf-types": `wrangler types`,
 		},
 	}),
 };

package/templates/qwik/snippets/getPlatformProxy.ts

@@ -0,0 +1,6 @@
+let platform = {};
+
+if(process.env.NODE_ENV === 'development') {
+  const { getPlatformProxy } = await import('wrangler');
+  platform = await getPlatformProxy();
+}

package/templates/qwik/templates/worker-configuration.d.ts

@@ -0,0 +1,3 @@
+// Generated by Wrangler on Fri Feb 16 2024 15:52:18 GMT-0600 (Central Standard Time)
+// After adding bindings to `wrangler.toml`, regenerate this interface via `npm build-cf-types`
+interface Env {}

package/templates/remix/c3.ts

@@ -1,4 +1,7 @@
 import { logRaw } from "@cloudflare/cli";
+import { brandColor, dim } from "@cloudflare/cli/colors";
+import { spinner } from "@cloudflare/cli/interactive";
+import { transformFile } from "helpers/codemod";
 import { runFrameworkGenerator } from "helpers/command.js";
 import { detectPackageManager } from "helpers/packages";
 import type { TemplateConfig } from "../../src/templates";
@@ -10,24 +13,55 @@ const generate = async (ctx: C3Context) => {
 	await runFrameworkGenerator(ctx, [
 		ctx.project.name,
 		"--template",
-		"https://github.com/remix-run/remix/tree/main/templates/cloudflare-pages",
+		"https://github.com/remix-run/remix/tree/main/templates/vite-cloudflare",
 	]);
 
 	logRaw(""); // newline
 };
 
+const configure = async () => {
+	const typeDefsPath = "load-context.ts";
+
+	const s = spinner();
+	s.start(`Updating \`${typeDefsPath}\``);
+
+	// Remove the empty Env declaration from the template to allow the type from
+	// worker-configuration.d.ts to take over
+	transformFile(typeDefsPath, {
+		visitTSInterfaceDeclaration(n) {
+			if (n.node.id.type === "Identifier" && n.node.id.name !== "Env") {
+				return this.traverse(n);
+			}
+
+			// Removes the node
+			n.replace();
+			return false;
+		},
+	});
+
+	s.stop(`${brandColor("updated")} \`${dim(typeDefsPath)}\``);
+};
+
 const config: TemplateConfig = {
 	configVersion: 1,
 	id: "remix",
-	displayName: "Remix",
 	platform: "pages",
+	displayName: "Remix",
+	copyFiles: {
+		path: "./templates",
+	},
 	generate,
+	configure,
 	transformPackageJson: async () => ({
 		scripts: {
-			"pages:deploy": `${npm} run build && wrangler pages deploy ./public`,
+			deploy: `${npm} run build && wrangler pages deploy ./build/client`,
+			preview: `${npm} run build && wrangler pages dev ./build/client`,
+			"build-cf-types": `wrangler types`,
 		},
 	}),
 	devScript: "dev",
+	deployScript: "deploy",
+	previewScript: "preview",
 	testFlags: ["--typescript", "--no-install", "--no-git-init"],
 };
 export default config;

package/templates/remix/templates/worker-configuration.d.ts

@@ -0,0 +1,3 @@
+// Generated by Wrangler on Fri Feb 16 2024 15:52:18 GMT-0600 (Central Standard Time)
+// After adding bindings to `wrangler.toml`, regenerate this interface via `npm build-cf-types`
+interface Env {}

package/templates/remix/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"]