create-cloudflare 0.0.0-fa09f4a2 → 0.0.0-fa42550d

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-cloudflare",
-  "version": "0.0.0-fa09f4a2",
+  "version": "0.0.0-fa42550d",
   "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,28 @@
     "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",
+    "dotenv": "^16.0.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.3",
     "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"
+    "@cloudflare/cli": "1.1.1",
+    "@cloudflare/workers-tsconfig": "0.0.0",
+    "wrangler": "3.33.0"
   },
   "engines": {
     "node": ">=18.14.1"
@@ -74,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/angular/c3.ts

@@ -0,0 +1,98 @@
+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();
+};
+
+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"];
+
+	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",
+	},
+	devScript: "start",
+	deployScript: "deploy",
+	generate,
+	configure,
+	transformPackageJson: async () => ({
+		scripts: {
+			start: `${npm} run build && wrangler pages dev dist/cloudflare ${await compatDateFlag()} --experimental-local`,
+			build: `ng build && ${npm} run process`,
+			process:
+				"node ./tools/copy-files.mjs && node ./tools/alter-polyfills.mjs",
+			deploy: `${npm} run build && wrangler pages deploy dist/cloudflare`,
+		},
+	}),
+};
+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,111 @@
+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 { usesTypescript } from "helpers/files";
+import { detectPackageManager } from "helpers/packages";
+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("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 = {
+	configVersion: 1,
+	id: "astro",
+	platform: "pages",
+	displayName: "Astro",
+	copyFiles: {
+		path: "./templates",
+	},
+	devScript: "dev",
+	deployScript: "deploy",
+	previewScript: "preview",
+	generate,
+	configure,
+	transformPackageJson: async (pkgJson: PackageJson, ctx: C3Context) => ({
+		scripts: {
+			deploy: `astro build && wrangler pages deploy ./dist`,
+			preview: `astro build && wrangler pages dev ./dist`,
+			...(usesTypescript(ctx) && { "build-cf-types": `wrangler types` }),
+		},
+	}),
+};
+export default config;

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

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

package/templates/docusaurus/c3.ts

@@ -0,0 +1,26 @@
+import { runFrameworkGenerator } from "helpers/command";
+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: {
+			deploy: `${npm} run build && wrangler pages deploy ./build`,
+		},
+	}),
+	devScript: "start",
+	deployScript: "deploy",
+};
+export default config;

package/templates/gatsby/c3.ts

@@ -0,0 +1,48 @@
+import { inputPrompt } from "@cloudflare/cli/interactive";
+import { runFrameworkGenerator } from "helpers/command";
+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: {
+			deploy: `${npm} run build && wrangler pages deploy ./public`,
+			preview: `${npm} run build && wrangler pages dev ./public`,
+		},
+	}),
+	devScript: "develop",
+	deployScript: "deploy",
+	previewScript: "preview",
+};
+export default config;

package/templates/hello-world/c3.ts

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

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

@@ -0,0 +1,16 @@
+export default {
+	configVersion: 1,
+	id: "hello-world-durable-object",
+	displayName: '"Hello World" Durable Object',
+	platform: "workers",
+	copyFiles: {
+		variants: {
+			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/README.md

@@ -0,0 +1,58 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`c3`](https://developers.cloudflare.com/pages/get-started/c3).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+## Cloudflare integration
+
+Besides the `dev` script mentioned above `c3` has added a few extra scripts that allow you to integrate the application with the [Cloudflare Pages](https://pages.cloudflare.com/) environment, these are:
+  - `pages:build` to build the application for Pages using the [`@cloudflare/next-on-pages`](https://github.com/cloudflare/next-on-pages) CLI
+  - `preview` to locally preview your Pages application using the [Wrangler](https://developers.cloudflare.com/workers/wrangler/) CLI
+  - `deploy` to deploy your Pages application using the [Wrangler](https://developers.cloudflare.com/workers/wrangler/) CLI
+
+> __Note:__ while the `dev` script is optimal for local development you should preview your Pages application as well (periodically or before deployments) in order to make sure that it can properly work in the Pages environment (for more details see the [`@cloudflare/next-on-pages` recommended workflow](https://github.com/cloudflare/next-on-pages/blob/05b6256/internal-packages/next-dev/README.md#recommended-workflow))
+
+### Bindings
+
+Cloudflare [Bindings](https://developers.cloudflare.com/pages/functions/bindings/) are what allows you to interact with resources available in the Cloudflare Platform.
+
+You can use bindings during development, when previewing locally your application and of course in the deployed application:
+
+- To use bindings in dev mode you need to define them in the `next.config.js` file under `setupDevBindings`, this mode uses the `next-dev` `@cloudflare/next-on-pages` submodule. For more details see its [documentation](https://github.com/cloudflare/next-on-pages/blob/05b6256/internal-packages/next-dev/README.md).
+
+- To use bindings in the preview mode you need to add them to the `pages:preview` script accordingly to the `wrangler pages dev` command. For more details see its [documentation](https://developers.cloudflare.com/workers/wrangler/commands/#dev-1) or the [Pages Bindings documentation](https://developers.cloudflare.com/pages/functions/bindings/).
+
+- To use bindings in the deployed application you will need to configure them in the Cloudflare [dashboard](https://dash.cloudflare.com/). For more details see the  [Pages Bindings documentation](https://developers.cloudflare.com/pages/functions/bindings/).
+
+#### KV Example
+
+`c3` has added for you an example showing how you can use a KV binding.
+
+In order to enable the example:
+- Search for javascript/typescript lines containing the following comment:
+  ```ts
+  // KV Example:
+  ```
+  and uncomment the commented lines below it.
+- Do the same in the `wrangler.toml` file, where
+  the comment is:
+  ```
+  # KV Example:
+  ```
+
+After doing this you can run the `dev` or `preview` script and visit the `/api/hello` route to see the example in action.
+
+Finally, if you also want to see the example work in the deployed application make sure to add a `MY_KV` binding to your Pages application in its [dashboard kv bindings settings section](https://dash.cloudflare.com/?to=/:account/pages/view/:pages-project/settings/functions#kv_namespace_bindings_section). After having configured it make sure to re-deploy your application.

package/templates/next/app/js/app/api/hello/route.js

@@ -0,0 +1,21 @@
+import { getRequestContext } from '@cloudflare/next-on-pages'
+
+export const runtime = 'edge'
+
+export async function GET(request) {
+  let responseText = 'Hello World'
+
+  // In the edge runtime you can use Bindings that are available in your application
+  // (for more details see:
+  //    - https://developers.cloudflare.com/pages/framework-guides/deploy-a-nextjs-site/#use-bindings-in-your-nextjs-application
+  //    - https://developers.cloudflare.com/pages/functions/bindings/
+  // )
+  //
+  // KV Example:
+  // const myKv = getRequestContext().env.MY_KV
+  // await myKv.put('suffix', ' from a KV store!')
+  // const suffix = await myKv.get('suffix')
+  // responseText += suffix
+
+  return new Response(responseText)
+}

package/templates/next/app/js/app/not-found.js

@@ -0,0 +1,58 @@
+export const runtime = "edge";
+
+export default function NotFound() {
+  return (
+    <>
+      <title>404: This page could not be found.</title>
+      <div style={styles.error}>
+        <div>
+          <style
+            dangerouslySetInnerHTML={{
+              __html: `body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}`,
+            }}
+          />
+          <h1 className="next-error-h1" style={styles.h1}>
+            404
+          </h1>
+          <div style={styles.desc}>
+            <h2 style={styles.h2}>This page could not be found.</h2>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
+
+const styles = {
+  error: {
+    fontFamily:
+      'system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji"',
+    height: "100vh",
+    textAlign: "center",
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+
+  desc: {
+    display: "inline-block",
+  },
+
+  h1: {
+    display: "inline-block",
+    margin: "0 20px 0 0",
+    padding: "0 23px 0 0",
+    fontSize: 24,
+    fontWeight: 500,
+    verticalAlign: "top",
+    lineHeight: "49px",
+  },
+
+  h2: {
+    fontSize: 14,
+    fontWeight: 400,
+    lineHeight: "49px",
+    margin: 0,
+  },
+};

package/templates/next/app/ts/app/api/hello/route.ts

@@ -0,0 +1,22 @@
+import type { NextRequest } from 'next/server'
+import { getRequestContext } from '@cloudflare/next-on-pages'
+
+export const runtime = 'edge'
+
+export async function GET(request: NextRequest) {
+  let responseText = 'Hello World'
+
+  // In the edge runtime you can use Bindings that are available in your application
+  // (for more details see:
+  //    - https://developers.cloudflare.com/pages/framework-guides/deploy-a-nextjs-site/#use-bindings-in-your-nextjs-application
+  //    - https://developers.cloudflare.com/pages/functions/bindings/
+  // )
+  //
+  // KV Example:
+  // const myKv = getRequestContext().env.MY_KV
+  // await myKv.put('suffix', ' from a KV store!')
+  // const suffix = await myKv.get('suffix')
+  // responseText += suffix
+
+  return new Response(responseText)
+}