create-cloudflare 0.0.0-fa09f4a2 → 0.0.0-fa91ff54

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-cloudflare",
-  "version": "0.0.0-fa09f4a2",
+  "version": "0.0.0-fa91ff54",
   "description": "A CLI for creating and deploying new applications to Cloudflare.",
   "keywords": [
     "cloudflare",
@@ -34,11 +34,12 @@
     "@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",
@@ -46,25 +47,27 @@
     "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",
     "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.2",
     "vite-tsconfig-paths": "^4.0.8",
     "which-pm-runs": "^1.1.0",
     "yargs": "^17.7.1",
     "yarn": "^1.22.19",
-    "wrangler": "3.23.0",
-    "@cloudflare/cli": "1.1.0",
-    "@cloudflare/workers-tsconfig": "0.0.0"
+    "wrangler": "3.24.0",
+    "@cloudflare/workers-tsconfig": "0.0.0",
+    "@cloudflare/cli": "1.1.1"
   },
   "engines": {
     "node": ">=18.14.1"

package/templates/angular/c3.ts

@@ -0,0 +1,100 @@
+import { cp } from "node:fs/promises";
+import { resolve } from "node:path";
+import { logRaw } from "@cloudflare/cli";
+import { brandColor, dim } from "@cloudflare/cli/colors";
+import { spinner } from "@cloudflare/cli/interactive";
+import { installPackages, runFrameworkGenerator } from "helpers/command";
+import { compatDateFlag, readFile, readJSON, writeFile } from "helpers/files";
+import { detectPackageManager } 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(ctx);
+};
+
+async function installCFWorker(ctx: C3Context) {
+	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",
+	},
+	generate,
+	configure,
+	transformPackageJson: async () => ({
+		scripts: {
+			start: `${npm} run pages:build && wrangler pages dev dist/cloudflare ${await compatDateFlag()} --experimental-local`,
+			process:
+				"node ./tools/copy-files.mjs && node ./tools/alter-polyfills.mjs",
+			"pages:build": `ng build && ${npm} run process`,
+			deploy: `${npm} run pages:build && wrangler pages deploy dist/cloudflare`,
+		},
+	}),
+	deployScript: "deploy",
+	devScript: "start",
+	testFlags: ["--style", "sass"],
+};
+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,50 @@
+import { logRaw } from "@cloudflare/cli";
+import { brandColor, dim } from "@cloudflare/cli/colors";
+import { runCommand, runFrameworkGenerator } from "helpers/command";
+import { compatDateFlag } from "helpers/files";
+import { detectPackageManager } from "helpers/packages";
+import type { TemplateConfig } from "../../src/templates";
+import type { C3Context } 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\``
+		)}`,
+	});
+};
+
+const config: TemplateConfig = {
+	configVersion: 1,
+	id: "astro",
+	platform: "pages",
+	displayName: "Astro",
+	generate,
+	configure,
+	transformPackageJson: async () => ({
+		scripts: {
+			"pages:dev": `wrangler pages dev ${await compatDateFlag()} -- astro dev`,
+			"pages:deploy": `astro build && wrangler pages deploy ./dist`,
+		},
+	}),
+	testFlags: [
+		"--skip-houston",
+		"--no-install",
+		"--no-git",
+		"--template",
+		"blog",
+		"--typescript",
+		"strict",
+	],
+};
+export default config;

package/templates/chatgptPlugin/c3.ts

@@ -0,0 +1,9 @@
+export default {
+	configVersion: 1,
+	id: "chatgptPlugin",
+	displayName: "ChatGPT plugin",
+	platform: "workers",
+	copyFiles: {
+		path: "./ts",
+	},
+};

package/templates/common/c3.ts

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

package/templates/docusaurus/c3.ts

@@ -0,0 +1,27 @@
+import { runFrameworkGenerator } from "helpers/command";
+import { compatDateFlag } from "helpers/files";
+import { detectPackageManager } 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, "classic"]);
+};
+
+const config: TemplateConfig = {
+	configVersion: 1,
+	id: "docusaurus",
+	platform: "pages",
+	displayName: "Docusaurus",
+	generate,
+	transformPackageJson: async () => ({
+		scripts: {
+			"pages:dev": `wrangler pages dev ${await compatDateFlag()} --proxy 3000 -- ${npm} run start`,
+			"pages:deploy": `${npm} run build && wrangler pages deploy ./build`,
+		},
+	}),
+	testFlags: [`--package-manager`, npm],
+};
+export default config;

package/templates/gatsby/c3.ts

@@ -0,0 +1,46 @@
+import { inputPrompt } from "@cloudflare/cli/interactive";
+import { runFrameworkGenerator } from "helpers/command";
+import { compatDateFlag } from "helpers/files";
+import { detectPackageManager } from "helpers/packages";
+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: {
+			"pages:dev": `wrangler pages dev ${await compatDateFlag()} --proxy 8000 -- ${npm} run develop`,
+			"pages:deploy": `${npm} run build && wrangler pages deploy ./public`,
+		},
+	}),
+};
+export default config;

package/templates/hello-world/c3.ts

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

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

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

package/templates/hono/c3.ts

@@ -0,0 +1,25 @@
+import { logRaw } from "@cloudflare/cli";
+import { runFrameworkGenerator } from "helpers/command";
+import type { TemplateConfig } from "../../src/templates";
+import type { C3Context } from "types";
+
+const generate = async (ctx: C3Context) => {
+	await runFrameworkGenerator(ctx, [
+		ctx.project.name,
+		"--template",
+		"cloudflare-workers",
+	]);
+
+	logRaw(""); // newline
+};
+
+const config: TemplateConfig = {
+	configVersion: 1,
+	id: "hono",
+	displayName: "Hono",
+	platform: "workers",
+	generate,
+	devScript: "dev",
+	deployScript: "deploy",
+};
+export default config;

package/templates/next/c3.ts

@@ -0,0 +1,212 @@
+import { existsSync, mkdirSync } from "fs";
+import { crash, updateStatus, warn } from "@cloudflare/cli";
+import { processArgument } from "@cloudflare/cli/args";
+import { brandColor, dim } from "@cloudflare/cli/colors";
+import { installPackages, runFrameworkGenerator } from "helpers/command";
+import {
+	compatDateFlag,
+	probePaths,
+	readJSON,
+	usesEslint,
+	usesTypescript,
+	writeFile,
+	writeJSON,
+} from "helpers/files";
+import { detectPackageManager } from "helpers/packages";
+import {
+	apiAppDirHelloJs,
+	apiAppDirHelloTs,
+	apiPagesDirHelloJs,
+	apiPagesDirHelloTs,
+	appDirNotFoundJs,
+	appDirNotFoundTs,
+	envDts,
+	nextConfig,
+	readme,
+} from "./templates";
+import type { TemplateConfig } from "../../src/templates";
+import type { C3Args, C3Context } from "types";
+
+const { npm, npx } = detectPackageManager();
+
+const generate = async (ctx: C3Context) => {
+	const projectName = ctx.project.name;
+
+	await runFrameworkGenerator(ctx, [projectName]);
+};
+
+const getApiTemplate = (
+	apiPath: string,
+	isTypescript: boolean
+): [string, string] => {
+	const isAppDir = /\/app\/api$/.test(apiPath);
+
+	if (isAppDir) {
+		// App directory uses route handlers that are defined in a subdirectory (`/api/hello/route.ts`).
+		const routeHandlerPath = `${apiPath}/hello`;
+		mkdirSync(routeHandlerPath, { recursive: true });
+
+		return isTypescript
+			? [`${routeHandlerPath}/route.ts`, apiAppDirHelloTs]
+			: [`${routeHandlerPath}/route.js`, apiAppDirHelloJs];
+	}
+
+	return isTypescript
+		? [`${apiPath}/hello.ts`, apiPagesDirHelloTs]
+		: [`${apiPath}/hello.js`, apiPagesDirHelloJs];
+};
+
+const configure = async (ctx: C3Context) => {
+	const projectPath = ctx.project.path;
+
+	// Add a compatible function handler example
+	const path = probePaths([
+		`${projectPath}/pages/api`,
+		`${projectPath}/src/pages/api`,
+		`${projectPath}/src/app/api`,
+		`${projectPath}/app/api`,
+		`${projectPath}/src/app`,
+		`${projectPath}/app`,
+	]);
+
+	if (!path) {
+		crash("Could not find the `/api` or `/app` directory");
+	}
+
+	// App directory template may not generate an API route handler, so we update the path to add an `api` directory.
+	const apiPath = path.replace(/\/app$/, "/app/api");
+
+	const usesTs = usesTypescript(ctx);
+
+	const appDirPath = probePaths([
+		`${projectPath}/src/app`,
+		`${projectPath}/app`,
+	]);
+
+	if (appDirPath) {
+		// Add a custom app not-found edge route as recommended in next-on-pages
+		// (see: https://github.com/cloudflare/next-on-pages/blob/2b5c8f25/packages/next-on-pages/docs/gotchas.md#not-found)
+		const notFoundPath = `${appDirPath}/not-found.${usesTs ? "tsx" : "js"}`;
+		if (!existsSync(notFoundPath)) {
+			const notFoundContent = usesTs ? appDirNotFoundTs : appDirNotFoundJs;
+			writeFile(notFoundPath, notFoundContent);
+			updateStatus("Created a custom edge not-found route");
+		}
+	}
+
+	const [handlerPath, handlerFile] = getApiTemplate(
+		apiPath,
+		usesTypescript(ctx)
+	);
+	writeFile(handlerPath, handlerFile);
+	updateStatus("Created an example API route handler");
+
+	if (usesTs) {
+		writeFile(`${projectPath}/env.d.ts`, envDts);
+		updateStatus("Created an env.d.ts file");
+	}
+
+	const installEslintPlugin = await shouldInstallNextOnPagesEslintPlugin(ctx);
+
+	if (installEslintPlugin) {
+		await writeEslintrc(ctx);
+	}
+
+	writeFile(`${projectPath}/next.config.js`, nextConfig);
+	updateStatus("Updated the next.config.js file");
+
+	writeFile(`${projectPath}/README.md`, readme);
+	updateStatus("Updated the README file");
+
+	await addDevDependencies(installEslintPlugin);
+};
+
+export const shouldInstallNextOnPagesEslintPlugin = async (
+	ctx: C3Context
+): Promise<boolean> => {
+	const eslintUsage = usesEslint(ctx);
+
+	if (!eslintUsage.used) return false;
+
+	if (eslintUsage.configType !== ".eslintrc.json") {
+		warn(
+			`Expected .eslintrc.json from Next.js scaffolding but found ${eslintUsage.configType} instead`
+		);
+		return false;
+	}
+
+	return await processArgument(ctx.args, "eslint-plugin" as keyof C3Args, {
+		type: "confirm",
+		question: "Do you want to use the next-on-pages eslint-plugin?",
+		label: "eslint-plugin",
+		defaultValue: true,
+	});
+};
+
+export const writeEslintrc = async (ctx: C3Context): Promise<void> => {
+	const eslintConfig = readJSON(`${ctx.project.path}/.eslintrc.json`);
+
+	eslintConfig.plugins ??= [];
+	eslintConfig.plugins.push("eslint-plugin-next-on-pages");
+
+	if (typeof eslintConfig.extends === "string") {
+		eslintConfig.extends = [eslintConfig.extends];
+	}
+	eslintConfig.extends ??= [];
+	eslintConfig.extends.push("plugin:eslint-plugin-next-on-pages/recommended");
+
+	writeJSON(`${ctx.project.path}/.eslintrc.json`, eslintConfig);
+};
+
+const addDevDependencies = async (installEslintPlugin: boolean) => {
+	const packages = [
+		"@cloudflare/next-on-pages@1",
+		"@cloudflare/workers-types",
+		"vercel",
+		...(installEslintPlugin ? ["eslint-plugin-next-on-pages"] : []),
+	];
+	await installPackages(packages, {
+		dev: true,
+		startText: "Adding the Cloudflare Pages adapter",
+		doneText: `${brandColor(`installed`)} ${dim(packages.join(", "))}`,
+	});
+};
+
+export default {
+	configVersion: 1,
+	id: "next",
+	platform: "pages",
+	displayName: "Next",
+	devScript: "dev",
+	generate,
+	configure,
+	transformPackageJson: async () => {
+		const isNpm = npm === "npm";
+		const isBun = npm === "bun";
+		const isNpmOrBun = isNpm || isBun;
+		const nextOnPagesScope = isNpmOrBun ? "@cloudflare/" : "";
+		const nextOnPagesCommand = `${nextOnPagesScope}next-on-pages`;
+		const pmCommand = isNpmOrBun ? npx : npm;
+		const pagesBuildRunCommand = `${
+			isNpm ? "npm run" : isBun ? "bun" : pmCommand
+		} pages:build`;
+		return {
+			scripts: {
+				"pages:build": `${pmCommand} ${nextOnPagesCommand}`,
+				"pages:preview": `${pagesBuildRunCommand} && wrangler pages dev .vercel/output/static ${await compatDateFlag()} --compatibility-flag=nodejs_compat`,
+				"pages:deploy": `${pagesBuildRunCommand} && wrangler pages deploy .vercel/output/static`,
+			},
+		};
+	},
+	testFlags: [
+		"--typescript",
+		"--no-install",
+		"--eslint",
+		"--tailwind",
+		"--src-dir",
+		"--app",
+		"--import-alias",
+		"@/*",
+	],
+	compatibilityFlags: ["nodejs_compat"],
+} as TemplateConfig;