create-cloudflare 2.41.2 → 2.42.1

package/templates/qwik/pages/c3.ts

@@ -0,0 +1,149 @@
+import { endSection } from "@cloudflare/cli";
+import { brandColor } from "@cloudflare/cli/colors";
+import { spinner } from "@cloudflare/cli/interactive";
+import { runFrameworkGenerator } from "frameworks/index";
+import { loadTemplateSnippets, transformFile } from "helpers/codemod";
+import { quoteShellArgs, 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 } from "types";
+
+const { npm, npx, name } = detectPackageManager();
+
+const generate = async (ctx: C3Context) => {
+	await runFrameworkGenerator(ctx, ["playground", ctx.project.name]);
+};
+
+const configure = async (ctx: C3Context) => {
+	// Add the pages integration
+	// For some reason `pnpx qwik add` fails for qwik so we use `pnpm qwik add` instead.
+	const cmd = [name === "pnpm" ? npm : npx, "qwik", "add", "cloudflare-pages"];
+	endSection(`Running ${quoteShellArgs(cmd)}`);
+	await runCommand(cmd);
+
+	addBindingsProxy(ctx);
+	populateCloudflareEnv();
+};
+
+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`");
+
+	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",
+			);
+			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") {
+				throw new Error("Failed to update `vite.config.ts`");
+			}
+
+			// Add the `platform` object to the object
+			configArgument.properties.push(platformPropery);
+
+			return false;
+		},
+	});
+
+	s.stop(`${brandColor("updated")} \`vite.config.ts\``);
+};
+
+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);
+			}
+
+			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")} \`${entrypointPath}\``);
+};
+
+const config: TemplateConfig = {
+	configVersion: 1,
+	id: "qwik",
+	frameworkCli: "create-qwik",
+	displayName: "Qwik",
+	platform: "pages",
+	copyFiles: {
+		path: "./templates",
+	},
+	path: "templates/qwik/pages",
+	generate,
+	configure,
+	transformPackageJson: async () => ({
+		scripts: {
+			deploy: `${npm} run build && wrangler pages deploy`,
+			preview: `${npm} run build && wrangler pages dev`,
+			"cf-typegen": `wrangler types`,
+		},
+	}),
+	devScript: "dev",
+	deployScript: "deploy",
+	previewScript: "preview",
+};
+export default config;

package/{templates-experimental/qwik → templates/qwik/workers}/c3.ts

@@ -7,7 +7,7 @@ import { quoteShellArgs, runCommand } from "helpers/command";
 import { removeFile, usesTypescript } from "helpers/files";
 import { detectPackageManager } from "helpers/packageManagers";
 import * as recast from "recast";
-import type { TemplateConfig } from "../../src/templates";
+import type { TemplateConfig } from "../../../src/templates";
 import type { C3Context } from "types";
 
 const { npm, npx, name } = detectPackageManager();
@@ -137,7 +137,7 @@ const config: TemplateConfig = {
 	copyFiles: {
 		path: "./templates",
 	},
-	path: "templates-experimental/qwik",
+	path: "templates/qwik/workers",
 	generate,
 	configure,
 	transformPackageJson: async () => ({

package/templates/remix/c3.ts

@@ -1,67 +1,9 @@
-import { logRaw } from "@cloudflare/cli";
-import { brandColor, dim } from "@cloudflare/cli/colors";
-import { spinner } from "@cloudflare/cli/interactive";
-import { runFrameworkGenerator } from "frameworks/index";
-import { transformFile } from "helpers/codemod";
-import { detectPackageManager } from "helpers/packageManagers";
-import type { TemplateConfig } from "../../src/templates";
-import type { C3Context } from "types";
+import pages from "./pages/c3";
+import workers from "./workers/c3";
+import type { MultiPlatformTemplateConfig } from "../../src/templates";
 
-const { npm } = detectPackageManager();
-
-const generate = async (ctx: C3Context) => {
-	await runFrameworkGenerator(ctx, [
-		ctx.project.name,
-		"--template",
-		"https://github.com/remix-run/remix/tree/main/templates/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",
-	frameworkCli: "create-remix",
-	platform: "pages",
+const config: MultiPlatformTemplateConfig = {
 	displayName: "Remix",
-	copyFiles: {
-		path: "./templates",
-	},
-	generate,
-	configure,
-	transformPackageJson: async () => ({
-		scripts: {
-			deploy: `${npm} run build && wrangler pages deploy`,
-			preview: `${npm} run build && wrangler pages dev`,
-			"cf-typegen": `wrangler types`,
-		},
-	}),
-	devScript: "dev",
-	deployScript: "deploy",
-	previewScript: "preview",
+	platformVariants: { pages, workers },
 };
 export default config;

package/templates/remix/pages/c3.ts

@@ -0,0 +1,68 @@
+import { logRaw } from "@cloudflare/cli";
+import { brandColor, dim } from "@cloudflare/cli/colors";
+import { spinner } from "@cloudflare/cli/interactive";
+import { runFrameworkGenerator } from "frameworks/index";
+import { transformFile } from "helpers/codemod";
+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,
+		"--template",
+		"https://github.com/remix-run/remix/tree/main/templates/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",
+	frameworkCli: "create-remix",
+	platform: "pages",
+	displayName: "Remix",
+	copyFiles: {
+		path: "./templates",
+	},
+	path: "templates/remix/pages",
+	generate,
+	configure,
+	transformPackageJson: async () => ({
+		scripts: {
+			deploy: `${npm} run build && wrangler pages deploy`,
+			preview: `${npm} run build && wrangler pages dev`,
+			"cf-typegen": `wrangler types`,
+		},
+	}),
+	devScript: "dev",
+	deployScript: "deploy",
+	previewScript: "preview",
+};
+export default config;

package/{templates-experimental/remix → templates/remix/workers}/c3.ts

@@ -3,7 +3,7 @@ import { brandColor, dim } from "@cloudflare/cli/colors";
 import { runFrameworkGenerator } from "frameworks/index";
 import { detectPackageManager } from "helpers/packageManagers";
 import { installPackages } from "helpers/packages";
-import type { TemplateConfig } from "../../src/templates";
+import type { TemplateConfig } from "../../../src/templates";
 import type { C3Context } from "types";
 
 const { npm } = detectPackageManager();
@@ -35,7 +35,7 @@ const config: TemplateConfig = {
 	copyFiles: {
 		path: "./templates",
 	},
-	path: "templates-experimental/remix",
+	path: "templates/remix/workers",
 	generate,
 	configure,
 	transformPackageJson: async () => ({

package/templates/svelte/c3.ts

@@ -1,158 +1,9 @@
-import { existsSync } from "node:fs";
-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";
+import pages from "./pages/c3";
+import workers from "./workers/c3";
+import type { MultiPlatformTemplateConfig } from "../../src/templates";
 
-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();
-	updatePlaywrightConfig(usesTypescript(ctx));
-	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 updatePlaywrightConfig = (shouldUseTypescript: boolean) => {
-	const filePath = `playwright.config.${shouldUseTypescript ? "ts" : "js"}`;
-	if (!existsSync(filePath)) {
-		return;
-	}
-
-	updateStatus(`Changing webServer port in ${blue(filePath)}`);
-
-	transformFile(filePath, {
-		visitObjectExpression: function (n) {
-			const portProp = n.node.properties.find((prop) => {
-				if (!("key" in prop) || !("name" in prop.key)) {
-					return false;
-				}
-
-				return prop.key.name === "port";
-			});
-
-			if (!portProp || !("value" in portProp) || !("value" in portProp.value)) {
-				return this.traverse(n);
-			}
-
-			portProp.value.value = 8788;
-			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",
+const config: MultiPlatformTemplateConfig = {
 	displayName: "SvelteKit",
-	platform: "pages",
-	copyFiles: {
-		path: "./templates",
-	},
-	generate,
-	configure,
-	transformPackageJson: async (original: PackageJson, ctx: C3Context) => {
-		let scripts: Record<string, string> = {
-			preview: `${npm} run build && wrangler pages dev`,
-			deploy: `${npm} run build && wrangler pages 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",
+	platformVariants: { pages, workers },
 };
 export default config;

package/templates/svelte/pages/c3.ts

@@ -0,0 +1,159 @@
+import { existsSync } from "node:fs";
+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();
+	updatePlaywrightConfig(usesTypescript(ctx));
+	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 updatePlaywrightConfig = (shouldUseTypescript: boolean) => {
+	const filePath = `playwright.config.${shouldUseTypescript ? "ts" : "js"}`;
+	if (!existsSync(filePath)) {
+		return;
+	}
+
+	updateStatus(`Changing webServer port in ${blue(filePath)}`);
+
+	transformFile(filePath, {
+		visitObjectExpression: function (n) {
+			const portProp = n.node.properties.find((prop) => {
+				if (!("key" in prop) || !("name" in prop.key)) {
+					return false;
+				}
+
+				return prop.key.name === "port";
+			});
+
+			if (!portProp || !("value" in portProp) || !("value" in portProp.value)) {
+				return this.traverse(n);
+			}
+
+			portProp.value.value = 8788;
+			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: "pages",
+	copyFiles: {
+		path: "./templates",
+	},
+	path: "templates/svelte/pages",
+	generate,
+	configure,
+	transformPackageJson: async (original: PackageJson, ctx: C3Context) => {
+		let scripts: Record<string, string> = {
+			preview: `${npm} run build && wrangler pages dev`,
+			deploy: `${npm} run build && wrangler pages 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/svelte/workers}/c3.ts

@@ -7,7 +7,7 @@ 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 { TemplateConfig } from "../../../src/templates";
 import type { C3Context, PackageJson } from "types";
 
 const { npm } = detectPackageManager();
@@ -23,7 +23,7 @@ const configure = async (ctx: C3Context) => {
 	const pkg = `@sveltejs/adapter-cloudflare`;
 	await installPackages([pkg], {
 		dev: true,
-		startText: "Adding the Cloudflare Pages adapter",
+		startText: "Adding the Cloudflare adapter",
 		doneText: `${brandColor(`installed`)} ${dim(pkg)}`,
 	});
 
@@ -103,7 +103,7 @@ const config: TemplateConfig = {
 	copyFiles: {
 		path: "./templates",
 	},
-	path: "templates-experimental/svelte",
+	path: "templates/svelte/workers",
 	generate,
 	configure,
 	transformPackageJson: async (original: PackageJson, ctx: C3Context) => {

package/templates/svelte/workers/templates/static/.assetsignore

@@ -0,0 +1,2 @@
+_worker.js
+_routes.json

package/templates/hono/snippets/appDeclaration.ts

@@ -1 +0,0 @@
-new Hono<{ Bindings: CloudflareBindings }>()

package/templates-experimental/astro/templates/ts/public/.assetsignore

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

package/templates-experimental/qwik/templates/public/.assetsignore

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