create-cloudflare 0.0.0-fd084bc0 → 0.0.0-fd0fb230

package/templates/nuxt/c3.ts

@@ -1,11 +1,11 @@
-import { readFileSync } from "node:fs";
-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 "helpers/command";
-import { compatDateFlag, writeFile } from "helpers/files";
+import { transformFile } from "helpers/codemod";
+import { installPackages, runFrameworkGenerator } from "helpers/command";
+import { writeFile } from "helpers/files";
 import { detectPackageManager } from "helpers/packages";
+import * as recast from "recast";
 import type { TemplateConfig } from "../../src/templates";
 import type { C3Context } from "types";
 
@@ -28,31 +28,71 @@ const generate = async (ctx: C3Context) => {
 };
 
 const configure = async () => {
-	const configFileName = "nuxt.config.ts";
-	const configFilePath = resolve(configFileName);
+	await installPackages(["nitro-cloudflare-dev"], {
+		dev: true,
+		startText: "Installing nitro module `nitro-cloudflare-dev`",
+		doneText: `${brandColor("installed")} ${dim(`via \`${npm} install\``)}`,
+	});
+	updateNuxtConfig();
+};
+
+const updateNuxtConfig = () => {
 	const s = spinner();
-	s.start(`Updating \`${configFileName}\``);
-	// Add the cloudflare preset into the configuration file.
-	const originalConfigFile = readFileSync(configFilePath, "utf8");
-	const updatedConfigFile = originalConfigFile.replace(
-		"defineNuxtConfig({",
-		"defineNuxtConfig({\n  nitro: {\n    preset: 'cloudflare-pages'\n  },"
+
+	const configFile = "nuxt.config.ts";
+	s.start(`Updating \`${configFile}\``);
+
+	const b = recast.types.builders;
+
+	const presetDef = b.objectProperty(
+		b.identifier("nitro"),
+		b.objectExpression([
+			b.objectProperty(
+				b.identifier("preset"),
+				b.stringLiteral("cloudflare-pages")
+			),
+		])
+	);
+
+	const moduleDef = b.objectProperty(
+		b.identifier("modules"),
+		b.arrayExpression([b.stringLiteral("nitro-cloudflare-dev")])
 	);
-	writeFile(configFilePath, updatedConfigFile);
-	s.stop(`${brandColor(`updated`)} ${dim(`\`${configFileName}\``)}`);
+
+	transformFile(configFile, {
+		visitCallExpression: function (n) {
+			const callee = n.node.callee as recast.types.namedTypes.Identifier;
+			if (callee.name === "defineNuxtConfig") {
+				const obj = n.node
+					.arguments[0] as recast.types.namedTypes.ObjectExpression;
+
+				obj.properties.push(presetDef);
+				obj.properties.push(moduleDef);
+			}
+
+			return this.traverse(n);
+		},
+	});
+
+	s.stop(`${brandColor(`updated`)} ${dim(`\`${configFile}\``)}`);
 };
 
 const config: TemplateConfig = {
 	configVersion: 1,
 	id: "nuxt",
 	platform: "pages",
+	copyFiles: {
+		path: "./templates",
+	},
 	displayName: "Nuxt",
+	devScript: "dev",
+	deployScript: "deploy",
 	generate,
 	configure,
 	transformPackageJson: async () => ({
 		scripts: {
-			"pages:dev": `wrangler pages dev ${await compatDateFlag()} --proxy 3000 -- ${npm} run dev`,
-			"pages:deploy": `${npm} run build && wrangler pages deploy ./dist`,
+			deploy: `${npm} run build && wrangler pages deploy ./dist`,
+			preview: `${npm} run build && wrangler pages dev ./dist`,
 		},
 	}),
 };

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

@@ -4,11 +4,13 @@ export default {
 	displayName: "Queue consumer & producer Worker",
 	platform: "workers",
 	copyFiles: {
-		js: {
-			path: "./js",
-		},
-		ts: {
-			path: "./ts",
+		variants: {
+			js: {
+				path: "./js",
+			},
+			ts: {
+				path: "./ts",
+			},
 		},
 	},
 	bindings: {

package/templates/qwik/c3.ts

@@ -1,9 +1,13 @@
 import { endSection } from "@cloudflare/cli";
+import { brandColor } from "@cloudflare/cli/colors";
+import { spinner } from "@cloudflare/cli/interactive";
+import { parseTs, 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 { 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();
@@ -12,11 +16,62 @@ const generate = async (ctx: C3Context) => {
 	await runFrameworkGenerator(ctx, ["basic", ctx.project.name]);
 };
 
-const configure = async () => {
+const configure = async (ctx: C3Context) => {
 	// Add the pages integration
 	const cmd = [npx, "qwik", "add", "cloudflare-pages"];
 	endSection(`Running ${quoteShellArgs(cmd)}`);
 	await runCommand(cmd);
+
+	addBindingsProxy(ctx);
+};
+
+const addBindingsProxy = (ctx: C3Context) => {
+	// Qwik only has a typescript template atm.
+	// This check is an extra precaution
+	if (!usesTypescript(ctx)) {
+		return;
+	}
+
+	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;
+}
+`;
+
+	transformFile("vite.config.ts", {
+		visitProgram: function (n) {
+			const lastImportIndex = n.node.body.findLastIndex(
+				(t) => t.type === "ImportDeclaration"
+			);
+			n.get("body").insertAt(lastImportIndex + 1, envDeclaration);
+
+			return false;
+		},
+	});
+
+	// Populate the `qwikCity` plugin with the platform object containing the `env` defined above.
+	const platformObject = parseTs(`{ platform: { env } }`);
+
+	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];
+			}
+
+			this.traverse(n);
+		},
+	});
+
+	s.stop(`${brandColor("updated")} \`vite.config.ts\``);
 };
 
 const config: TemplateConfig = {
@@ -24,12 +79,16 @@ const config: TemplateConfig = {
 	id: "qwik",
 	displayName: "Qwik",
 	platform: "pages",
+	copyFiles: {
+		path: "./templates",
+	},
+	devScript: "dev",
+	deployScript: "deploy",
 	generate,
 	configure,
 	transformPackageJson: async () => ({
 		scripts: {
-			"pages:dev": `wrangler pages dev ${await compatDateFlag()} -- ${npm} run dev`,
-			"pages:deploy": `${npm} run build && wrangler pages deploy ./dist`,
+			deploy: `${npm} run build && wrangler pages deploy ./dist`,
 		},
 	}),
 };

package/templates/qwik/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/scheduled/c3.ts

@@ -4,11 +4,13 @@ export default {
 	displayName: "Scheduled Worker (Cron Trigger)",
 	platform: "workers",
 	copyFiles: {
-		js: {
-			path: "./js",
-		},
-		ts: {
-			path: "./ts",
+		variants: {
+			js: {
+				path: "./js",
+			},
+			ts: {
+				path: "./ts",
+			},
 		},
 	},
 };

package/templates/solid/c3.ts

@@ -20,8 +20,10 @@ const config: TemplateConfig = {
 	displayName: "Solid",
 	platform: "pages",
 	copyFiles: {
-		js: { path: "./js" },
-		ts: { path: "./ts" },
+		variants: {
+			js: { path: "./js" },
+			ts: { path: "./ts" },
+		},
 	},
 	generate,
 	transformPackageJson: async () => ({

package/templates/svelte/c3.ts

@@ -1,13 +1,13 @@
+import { platform } from "node:os";
 import { logRaw, updateStatus } from "@cloudflare/cli";
 import { blue, brandColor, dim } from "@cloudflare/cli/colors";
-import { parseTs, transformFile } from "helpers/codemod";
+import { transformFile } from "helpers/codemod";
 import { installPackages, runFrameworkGenerator } from "helpers/command";
-import { compatDateFlag, usesTypescript } from "helpers/files";
+import { usesTypescript } from "helpers/files";
 import { detectPackageManager } from "helpers/packages";
-import { platformInterface } from "./templates";
+import * as recast from "recast";
 import type { TemplateConfig } from "../../src/templates";
-import type * as recast from "recast";
-import type { C3Context } from "types";
+import type { C3Context, PackageJson } from "types";
 
 const { npm } = detectPackageManager();
 
@@ -26,7 +26,14 @@ const configure = async (ctx: C3Context) => {
 		doneText: `${brandColor(`installed`)} ${dim(pkg)}`,
 	});
 
-	// Change the import statement in svelte.config.js
+	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"`
@@ -39,23 +46,51 @@ const configure = async (ctx: C3Context) => {
 			return false;
 		},
 	});
-	updateStatus(`Changing adapter in ${blue("svelte.config.js")}`);
+};
 
-	// If using typescript, add the platform interface to the `App` interface
-	if (usesTypescript(ctx)) {
-		transformFile("src/app.d.ts", {
-			visitTSModuleDeclaration(n) {
-				if (n.value.id.name === "App") {
-					const patchAst = parseTs(platformInterface);
-					const body = n.node.body as recast.types.namedTypes.TSModuleBlock;
-					body.body.push(patchAst.program.body[0]);
-				}
-
-				this.traverse(n);
-			},
-		});
-		updateStatus(`Updating global type definitions in ${blue("app.d.ts")}`);
+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 = {
@@ -63,15 +98,32 @@ const config: TemplateConfig = {
 	id: "svelte",
 	displayName: "Svelte",
 	platform: "pages",
+	copyFiles: {
+		variants: {
+			js: { path: "./js" },
+			ts: { path: "./ts" },
+		},
+	},
 	generate,
 	configure,
-	transformPackageJson: async () => ({
-		scripts: {
-			"pages:preview": `${npm} run build && wrangler pages dev ${await compatDateFlag()} .svelte-kit/cloudflare`,
-			"pages:deploy": `${npm} run build && wrangler pages deploy .svelte-kit/cloudflare`,
-		},
-	}),
+	transformPackageJson: async (original: PackageJson, ctx: C3Context) => {
+		let scripts: Record<string, string> = {
+			preview: `${npm} run build && wrangler pages dev .svelte-kit/cloudflare`,
+			deploy: `${npm} run build && wrangler pages deploy .svelte-kit/cloudflare`,
+		};
+
+		if (usesTypescript(ctx)) {
+			const mv = platform() === "win32" ? "move" : "mv";
+			scripts = {
+				...scripts,
+				"build-cf-types": `wrangler types && ${mv} worker-configuration.d.ts src/`,
+			};
+		}
+
+		return { scripts };
+	},
 	devScript: "dev",
-	previewScript: "pages:preview",
+	deployScript: "deploy",
+	previewScript: "preview",
 };
 export default config;

package/templates/svelte/js/src/hooks.server.js

@@ -0,0 +1,25 @@
+import { dev } from '$app/environment';
+
+/*
+  When developing, this hook will add proxy objects to the `platform` object which
+  will emulate any bindings defined in `wrangler.toml`.
+*/
+
+let platform;
+
+if (dev) {
+	const { getPlatformProxy } = await import('wrangler');
+	platform = await getPlatformProxy();
+}
+
+export const handle = async ({ event, resolve }) => {
+	if (platform) {
+		event.platform = {
+			...event.platform,
+			...platform
+		};
+	}
+
+	return resolve(event);
+};
+

package/templates/svelte/js/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/svelte/ts/src/hooks.server.ts

@@ -0,0 +1,24 @@
+import { dev } from '$app/environment';
+
+/*
+  When developing, this hook will add proxy objects to the `platform` object which
+  will emulate any bindings defined in `wrangler.toml`.
+*/
+
+let platform: App.Platform;
+
+if (dev) {
+	const { getPlatformProxy } = await import('wrangler');
+	platform = await getPlatformProxy();
+}
+
+export const handle = async ({ event, resolve }) => {
+	if (platform) {
+		event.platform = {
+			...event.platform,
+			...platform
+		};
+	}
+
+	return resolve(event);
+};

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