create-cloudflare 2.26.0 → 2.27.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-cloudflare",
-  "version": "2.26.0",
+  "version": "2.27.2",
   "description": "A CLI for creating and deploying new applications to Cloudflare.",
   "keywords": [
     "cloudflare",
@@ -23,13 +23,14 @@
   "bin": "./dist/cli.js",
   "files": [
     "dist",
-    "templates"
+    "templates",
+    "templates-experimental"
   ],
   "devDependencies": {
     "@babel/parser": "^7.21.3",
     "@babel/types": "^7.21.4",
     "@clack/prompts": "^0.6.3",
-    "@cloudflare/workers-types": "^4.20240821.1",
+    "@cloudflare/workers-types": "^4.20240909.0",
     "@iarna/toml": "^3.0.0",
     "@types/command-exists": "^1.2.0",
     "@types/cross-spawn": "^6.0.2",
@@ -64,10 +65,10 @@
     "which-pm-runs": "^1.1.0",
     "wrap-ansi": "^9.0.0",
     "yargs": "^17.7.2",
-    "@cloudflare/cli": "1.1.1",
-    "wrangler": "3.73.0",
     "@cloudflare/eslint-config-worker": "1.1.0",
-    "@cloudflare/workers-tsconfig": "0.0.0"
+    "@cloudflare/workers-tsconfig": "0.0.0",
+    "wrangler": "3.78.4",
+    "@cloudflare/cli": "1.1.1"
   },
   "engines": {
     "node": ">=18.14.1"

package/templates/analog/c3.ts

@@ -113,6 +113,7 @@ const updateViteConfig = (ctx: C3Context) => {
 const config: TemplateConfig = {
 	configVersion: 1,
 	id: "analog",
+	frameworkCli: "create-analog",
 	platform: "pages",
 	displayName: "Analog",
 	copyFiles: {

package/templates/angular/c3.ts

@@ -79,6 +79,7 @@ function updateAngularJson(ctx: C3Context) {
 const config: TemplateConfig = {
 	configVersion: 1,
 	id: "angular",
+	frameworkCli: "@angular/create",
 	displayName: "Angular",
 	platform: "pages",
 	copyFiles: {

package/templates/astro/c3.ts

@@ -91,6 +91,7 @@ const updateEnvDeclaration = (ctx: C3Context) => {
 const config: TemplateConfig = {
 	configVersion: 1,
 	id: "astro",
+	frameworkCli: "create-astro",
 	platform: "pages",
 	displayName: "Astro",
 	copyFiles: {

package/templates/docusaurus/c3.ts

@@ -12,6 +12,7 @@ const generate = async (ctx: C3Context) => {
 const config: TemplateConfig = {
 	configVersion: 1,
 	id: "docusaurus",
+	frameworkCli: "create-docusaurus",
 	platform: "pages",
 	displayName: "Docusaurus",
 	generate,

package/templates/gatsby/c3.ts

@@ -32,6 +32,7 @@ const generate = async (ctx: C3Context) => {
 const config: TemplateConfig = {
 	configVersion: 1,
 	id: "gatsby",
+	frameworkCli: "gatsby",
 	platform: "pages",
 	displayName: "Gatsby",
 	generate,

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

@@ -9,8 +9,8 @@
 		"test": "vitest"
 	},
 	"devDependencies": {
-		"@cloudflare/vitest-pool-workers": "^0.4.5",
+		"@cloudflare/vitest-pool-workers": "^0.5.2",
 		"wrangler": "^3.60.3",
-		"vitest": "1.5.0"
+		"vitest": "2.0.5"
 	}
 }

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

@@ -10,9 +10,9 @@
 		"cf-typegen": "wrangler types"
 	},
 	"devDependencies": {
-		"@cloudflare/vitest-pool-workers": "^0.4.5",
+		"@cloudflare/vitest-pool-workers": "^0.5.2",
 		"typescript": "^5.5.2",
-		"vitest": "1.5.0",
+		"vitest": "2.0.5",
 		"wrangler": "^3.60.3"
 	}
 }

package/templates/hono/c3.ts

@@ -48,6 +48,7 @@ const configure = async (ctx: C3Context) => {
 const config: TemplateConfig = {
 	configVersion: 1,
 	id: "hono",
+	frameworkCli: "create-hono",
 	displayName: "Hono",
 	copyFiles: {
 		path: "./templates",

package/templates/next/c3.ts

@@ -175,6 +175,7 @@ const addDevDependencies = async (installEslintPlugin: boolean) => {
 export default {
 	configVersion: 1,
 	id: "next",
+	frameworkCli: "create-next-app",
 	platform: "pages",
 	displayName: "Next",
 	generate,

package/templates/nuxt/c3.ts

@@ -112,6 +112,7 @@ const updateNuxtConfig = () => {
 const config: TemplateConfig = {
 	configVersion: 1,
 	id: "nuxt",
+	frameworkCli: "nuxi",
 	platform: "pages",
 	displayName: "Nuxt",
 	copyFiles: {

package/templates/qwik/c3.ts

@@ -125,6 +125,7 @@ const populateCloudflareEnv = () => {
 const config: TemplateConfig = {
 	configVersion: 1,
 	id: "qwik",
+	frameworkCli: "create-qwik",
 	displayName: "Qwik",
 	platform: "pages",
 	copyFiles: {

package/templates/react/c3.ts

@@ -43,6 +43,8 @@ const variantsOptions = [
 const config: TemplateConfig = {
 	configVersion: 1,
 	id: "react",
+	// React's documentation now recommends using create-vite.
+	frameworkCli: "create-vite",
 	displayName: "React",
 	platform: "pages",
 	generate,

package/templates/remix/c3.ts

@@ -45,6 +45,7 @@ const configure = async () => {
 const config: TemplateConfig = {
 	configVersion: 1,
 	id: "remix",
+	frameworkCli: "create-remix",
 	platform: "pages",
 	displayName: "Remix",
 	copyFiles: {

package/templates/solid/c3.ts

@@ -65,6 +65,7 @@ const configure = async (ctx: C3Context) => {
 const config: TemplateConfig = {
 	configVersion: 1,
 	id: "solid",
+	frameworkCli: "create-solid",
 	displayName: "Solid",
 	platform: "pages",
 	copyFiles: {

package/templates/svelte/c3.ts

@@ -97,6 +97,7 @@ const updateTypeDefinitions = (ctx: C3Context) => {
 const config: TemplateConfig = {
 	configVersion: 1,
 	id: "svelte",
+	frameworkCli: "create-svelte",
 	displayName: "Svelte",
 	platform: "pages",
 	copyFiles: {

package/templates/vue/c3.ts

@@ -12,6 +12,7 @@ const generate = async (ctx: C3Context) => {
 const config: TemplateConfig = {
 	configVersion: 1,
 	id: "vue",
+	frameworkCli: "create-vue",
 	displayName: "Vue",
 	platform: "pages",
 	generate,

package/templates-experimental/angular/c3.ts

@@ -0,0 +1,102 @@
+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 { 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"];
+	delete packageManifest["devDependencies"]["@types/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",
+	frameworkCli: "@angular/create",
+	displayName: "Angular",
+	platform: "workers",
+	copyFiles: {
+		path: "./templates",
+	},
+	path: "templates-experimental/angular",
+	devScript: "start",
+	deployScript: "deploy",
+	generate,
+	configure,
+	transformPackageJson: async () => ({
+		scripts: {
+			start: `${npm} run build && wrangler dev`,
+			build: `ng build && ${npm} run process`,
+			process:
+				"node ./tools/copy-files.mjs && node ./tools/alter-polyfills.mjs",
+			deploy: `${npm} run build && wrangler deploy`,
+		},
+	}),
+};
+export default config;

package/templates-experimental/angular/templates/server.ts

@@ -0,0 +1,34 @@
+import { renderApplication } from "@angular/platform-server";
+import bootstrap from "./src/main.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
+async function workerFetchHandler(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("/index.html", url);
+	const indexResponse = await env.ASSETS.fetch(new Request(indexUrl));
+	const document = await indexResponse.text();
+
+	const content = await renderApplication(bootstrap, {
+		document,
+		url: url.pathname,
+	});
+
+	// console.log("rendered SSR", content);
+	return new Response(content, indexResponse);
+}
+
+export default {
+	fetch: (request: Request, env: Env) =>
+		(globalThis as any)["__zone_symbol__Promise"].resolve(
+			workerFetchHandler(request, env),
+		),
+};

package/templates-experimental/angular/templates/src/.assetsignore

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

package/templates-experimental/angular/templates/tools/alter-polyfills.mjs

@@ -0,0 +1,27 @@
+import fs from "node:fs";
+import { EOL } from "node:os";
+import { join } from "node:path";
+import { worker } from "./paths.mjs";
+
+/**
+ * Split by lines and comment the banner
+ * ```
+ * import { createRequire } from 'node:module';
+ * globalThis['require'] ??= createRequire(import.meta.url);
+ * ```
+ */
+const serverPolyfillsFile = join(worker, "polyfills.server.mjs");
+const serverPolyfillsData = fs
+	.readFileSync(serverPolyfillsFile, "utf8")
+	.split(/\r?\n/);
+
+for (let index = 0; index < 2; index++) {
+	if (serverPolyfillsData[index].includes("createRequire")) {
+		serverPolyfillsData[index] = "// " + serverPolyfillsData[index];
+	}
+}
+
+// Add needed polyfills
+serverPolyfillsData.unshift(`globalThis['process'] = {};`);
+
+fs.writeFileSync(serverPolyfillsFile, serverPolyfillsData.join(EOL));

package/templates-experimental/angular/templates/tools/copy-files.mjs

@@ -0,0 +1,9 @@
+// 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, ssr, worker } from "./paths.mjs";
+
+fs.cpSync(client, cloudflare, { recursive: true });
+fs.cpSync(ssr, worker, { recursive: true });
+
+fs.renameSync(join(worker, "server.mjs"), join(worker, "index.js"));

package/templates-experimental/angular/templates/tools/paths.mjs

@@ -0,0 +1,9 @@
+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/templates-experimental/angular/templates/wrangler.toml

@@ -0,0 +1,5 @@
+#:schema node_modules/wrangler/config-schema.json
+name = "<TBD>"
+compatibility_date = "<TBD>"
+main = "./dist/cloudflare/_worker.js"
+experimental_assets = { directory = "./dist/cloudflare", binding = "ASSETS" }

package/templates-experimental/astro/c3.ts

@@ -0,0 +1,114 @@
+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("platformProxy"),
+						b.objectExpression([
+							b.objectProperty(b.identifier("enabled"), b.booleanLiteral(true)),
+						]),
+					),
+				]),
+			];
+
+			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",
+	frameworkCli: "create-astro",
+	platform: "workers",
+	displayName: "Astro",
+	copyFiles: {
+		path: "./templates",
+	},
+	devScript: "dev",
+	deployScript: "deploy",
+	previewScript: "preview",
+	path: "templates-experimental/astro",
+	generate,
+	configure,
+	transformPackageJson: async (pkgJson: PackageJson, ctx: C3Context) => ({
+		scripts: {
+			deploy: `astro build && wrangler deploy`,
+			preview: `astro build && wrangler dev`,
+			...(usesTypescript(ctx) && { "cf-typegen": `wrangler types` }),
+		},
+	}),
+};
+export default config;

package/templates-experimental/astro/snippets/runtimeDeclaration.ts

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

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

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

package/templates-experimental/astro/templates/wrangler.toml

@@ -0,0 +1,6 @@
+#:schema node_modules/wrangler/config-schema.json
+name = "<TBD>"
+compatibility_date = "<TBD>"
+compatibility_flags = ["nodejs_compat_v2"]
+main = "./dist/_worker.js"
+experimental_assets = { directory = "./dist", binding = "ASSETS" }

package/templates-experimental/docusaurus/c3.ts

@@ -0,0 +1,32 @@
+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",
+	frameworkCli: "create-docusaurus",
+	platform: "workers",
+	displayName: "Docusaurus",
+	copyFiles: {
+		path: "./templates",
+	},
+	path: "templates-experimental/docusaurus",
+	generate,
+	transformPackageJson: async () => ({
+		scripts: {
+			deploy: `${npm} run build && wrangler deploy`,
+			preview: `${npm} run build && wrangler dev`,
+		},
+	}),
+	devScript: "start",
+	deployScript: "deploy",
+};
+export default config;

package/templates-experimental/docusaurus/templates/wrangler.toml

@@ -0,0 +1,4 @@
+#:schema node_modules/wrangler/config-schema.json
+name = "<TBD>"
+compatibility_date = "<TBD>"
+experimental_assets = { directory = "./build" }

package/templates-experimental/gatsby/c3.ts

@@ -0,0 +1,53 @@
+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",
+	frameworkCli: "gatsby",
+	platform: "workers",
+	displayName: "Gatsby",
+	copyFiles: {
+		path: "./templates",
+	},
+	path: "templates-experimental/gatsby",
+	generate,
+	transformPackageJson: async () => ({
+		scripts: {
+			deploy: `${npm} run build && wrangler deploy`,
+			preview: `${npm} run build && wrangler dev`,
+		},
+	}),
+	devScript: "develop",
+	deployScript: "deploy",
+	previewScript: "preview",
+};
+export default config;

package/templates-experimental/gatsby/templates/wrangler.toml

@@ -0,0 +1,4 @@
+#:schema node_modules/wrangler/config-schema.json
+name = "<TBD>"
+compatibility_date = "<TBD>"
+experimental_assets = { directory = "./public" }

package/templates-experimental/hello-world-with-assets/c3.ts

@@ -0,0 +1,22 @@
+export default {
+	configVersion: 1,
+	id: "hello-world-with-assets",
+	path: "templates-experimental/hello-world-with-assets",
+	displayName: "Hello World Worker with Assets",
+	description:
+		"Get started with a basic Worker that serves static assets, in the language of your choice",
+	platform: "workers",
+	copyFiles: {
+		variants: {
+			js: {
+				path: "./js",
+			},
+			ts: {
+				path: "./ts",
+			},
+			python: {
+				path: "./py",
+			},
+		},
+	},
+};

package/templates-experimental/hello-world-with-assets/js/.editorconfig

@@ -0,0 +1,12 @@
+# http://editorconfig.org
+root = true
+
+[*]
+indent_style = tab
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.yml]
+indent_style = space