Add template susbsitution

Author: vicb

.changeset/brave-lights-run.md

@@ -0,0 +1,5 @@
+---
+"create-cloudflare": minor
+---
+
+Add template substitution

packages/create-cloudflare/src/helpers/__tests__/json.test.ts

@@ -50,6 +50,44 @@ describe("json helpers", () => {
 				// post-comment"
 			`);
 		});
+
+		test("using a function replacer", () => {
+			mockReadFile.mockReturnValue(
+				JSON.stringify({
+					name: "test",
+					rootValue: "_REPLACE_ME_",
+					keep: "DO_NOT_REPLACE_ME_",
+					nested: {
+						value: "_REPLACE_ME_",
+						list: [["_REPLACE_ME_"], "DO_NOT_REPLACE_ME_"],
+					},
+				}),
+			);
+
+			const result = readJSONWithComments("/path/to/file.json");
+			writeJSONWithComments("/path/to/file.json", result, (_key, value) =>
+				value === "_REPLACE_ME_" ? "REPLACED" : value,
+			);
+			expect(mockWriteFile.mock.calls[0][0]).toMatchInlineSnapshot(
+				`"/path/to/file.json"`,
+			);
+			expect(mockWriteFile.mock.calls[0][1]).toMatchInlineSnapshot(`
+				"{
+					"name": "test",
+					"rootValue": "REPLACED",
+					"keep": "DO_NOT_REPLACE_ME_",
+					"nested": {
+						"value": "REPLACED",
+						"list": [
+							[
+								"REPLACED"
+							],
+							"DO_NOT_REPLACE_ME_"
+						]
+					}
+				}"
+			`);
+		});
 	});
 
 	describe("addJSONComment", () => {

packages/create-cloudflare/src/helpers/json.ts

@@ -22,12 +22,19 @@ export function readJSONWithComments(jsonFilePath: string): CommentObject {
  * Writes a JSON object to a file, preserving comments.
  * @param jsonObject - The JSON object (with comment properties) to write.
  * @param jsonFilePath - The path to the JSON file.
+ * @param replacer A function that transforms the results or
+ *                 an array of strings and numbers that acts as an approved list for selecting
+ *                 the object properties that will be stringified.
  */
 export function writeJSONWithComments(
 	jsonFilePath: string,
 	jsonObject: CommentObject,
+	replacer?:
+		| ((key: string, value: unknown) => unknown)
+		| Array<number | string>
+		| null,
 ): void {
-	const jsonStr = stringify(jsonObject, null, "\t");
+	const jsonStr = stringify(jsonObject, replacer, "\t");
 	writeFile(jsonFilePath, jsonStr);
 }
 

packages/create-cloudflare/src/wrangler/__tests__/config.test.ts

@@ -35,6 +35,9 @@ describe("update wrangler config", () => {
 			`name = "<TBD>"`,
 			`main = "src/index.ts"`,
 			`compatibility_date = "<TBD>"`,
+			`[[services]]`,
+			`binding = "SELF_SERVICE"`,
+			`service = "__WORKER_NAME__"`,
 		].join("\n");
 		vi.mocked(readFile).mockReturnValue(toml);
 
@@ -49,6 +52,10 @@ describe("update wrangler config", () => {
 			main = "src/index.ts"
 			compatibility_date = "2024-01-17"
 
+			[[services]]
+			binding = "SELF_SERVICE"
+			service = "test"
+
 			[observability]
 			enabled = true
 
@@ -95,6 +102,12 @@ describe("update wrangler config", () => {
 			name: "<TBD>",
 			main: "src/index.ts",
 			compatibility_date: "<TBD>",
+			services: [
+				{
+					binding: "SELF_SERVICE",
+					service: "__WORKER_NAME__",
+				},
+			],
 		});
 		vi.mocked(readFile).mockReturnValueOnce(json);
 
@@ -111,6 +124,12 @@ describe("update wrangler config", () => {
 				"name": "test",
 				"main": "src/index.ts",
 				"compatibility_date": "2024-01-17",
+				"services": [
+					{
+						"binding": "SELF_SERVICE",
+						"service": "test"
+					}
+				],
 				"observability": {
 					"enabled": true
 				}

packages/create-cloudflare/src/wrangler/config.ts

@@ -14,10 +14,24 @@ import type { CommentObject } from "comment-json";
 import type { C3Context } from "types";
 
 /**
- * Update the `wrangler.(toml|json|jsonc)` file for this project by setting the name
- * to the selected project name and adding the latest compatibility date.
+ * Update the `wrangler.(toml|json|jsonc)` file for this project by:
+ *
+ * - setting the `name` to the passed project name
+ * - adding the latest compatibility date when no valid one is present
+ * - enabling observability
+ * - adding comments with links to documentation for common configuration options
+ * - substituting placeholders with actual values
+ *   - `__WORKER_NAME__` with the project name
+ *
+ * If both `wrangler.toml` and `wrangler.json`/`wrangler.jsonc` are present, only
+ * the `wrangler.json`/`wrangler.jsonc` file will be updated.
  */
 export const updateWranglerConfig = async (ctx: C3Context) => {
+	// Placeholders to replace in the wrangler config files
+	const substitutions: Record<string, string> = {
+		__WORKER_NAME__: ctx.project.name,
+	};
+
 	if (wranglerJsonExists(ctx)) {
 		let wranglerJson = readWranglerJson(ctx);
 
@@ -70,7 +84,11 @@ export const updateWranglerConfig = async (ctx: C3Context) => {
 			},
 		]);
 
-		writeWranglerJson(ctx, wranglerJson);
+		writeWranglerJson(ctx, wranglerJson, (_key, value) =>
+			typeof value === "string" && value in substitutions
+				? substitutions[value]
+				: value,
+		);
 		addVscodeConfig(ctx);
 	} else if (wranglerTomlExists(ctx)) {
 		const wranglerTomlStr = readWranglerToml(ctx);
@@ -79,14 +97,17 @@ export const updateWranglerConfig = async (ctx: C3Context) => {
 		parsed["compatibility_date"] = await getCompatibilityDate(parsed);
 		parsed["observability"] ??= { enabled: true };
 
-		const comment = `#:schema node_modules/wrangler/config-schema.json\n# For more details on how to configure Wrangler, refer to:\n# https://developers.cloudflare.com/workers/wrangler/configuration/\n`;
+		let strToml = TOML.stringify(parsed);
 
-		const stringified = comment + TOML.stringify(parsed);
+		for (const [key, value] of Object.entries(substitutions)) {
+			strToml = strToml.replaceAll(key, value);
+		}
 
 		writeWranglerToml(
 			ctx,
-			stringified +
-				`
+			`#:schema node_modules/wrangler/config-schema.json
+# For more details on how to configure Wrangler, refer to:\n# https://developers.cloudflare.com/workers/wrangler/configuration/
+${strToml}
 # Smart Placement
 # Docs: https://developers.cloudflare.com/workers/configuration/smart-placement/#smart-placement
 # [placement]
@@ -166,13 +187,32 @@ export const writeWranglerToml = (ctx: C3Context, contents: string) => {
 	return writeFile(wranglerTomlPath, contents);
 };
 
-export const writeWranglerJson = (ctx: C3Context, config: CommentObject) => {
+/**
+ * Writes the passed JSON object as the configuration file for this project.
+ *
+ * If there is an existing `wrangler.json` file, it will be overwritten.
+ * If not, `wrangler.jsonc` will be created/overwritten.
+ *
+ * @param ctx The C3 context.
+ * @param config The JSON object (with comment properties) to write.
+ * @param replacer A function that transforms the results or
+ *                 an array of strings and numbers that acts as an approved list for selecting
+ *                 the object properties that will be stringified.
+ */
+export const writeWranglerJson = (
+	ctx: C3Context,
+	config: CommentObject,
+	replacer?:
+		| ((key: string, value: unknown) => unknown)
+		| Array<number | string>
+		| null,
+) => {
 	const wranglerJsonPath = getWranglerJsonPath(ctx);
 	if (existsSync(wranglerJsonPath)) {
-		return writeJSONWithComments(wranglerJsonPath, config);
+		return writeJSONWithComments(wranglerJsonPath, config, replacer);
 	}
 	const wranglerJsoncPath = getWranglerJsoncPath(ctx);
-	return writeJSONWithComments(wranglerJsoncPath, config);
+	return writeJSONWithComments(wranglerJsoncPath, config, replacer);
 };
 
 export const addVscodeConfig = (ctx: C3Context) => {
@@ -193,16 +233,26 @@ export const addVscodeConfig = (ctx: C3Context) => {
 	});
 };
 
+/**
+ * Gets the compatibility date to use from the wrangler config.
+ *
+ * If the compatibility date is missing or invalid, it sets it to the latest workerd date.
+ *
+ * @param config Wrangler config
+ * @returns The compatibility date to use in the form "YYYY-MM-DD"
+ */
 async function getCompatibilityDate<T extends Record<string, unknown>>(
 	config: T,
-) {
+): Promise<string> {
 	const validCompatDateRe = /^\d{4}-\d{2}-\d{2}$/m;
+	const dateFromConfig = config["compatibility_date"];
 	if (
-		typeof config["compatibility_date"] === "string" &&
-		config["compatibility_date"].match(validCompatDateRe)
+		typeof dateFromConfig === "string" &&
+		dateFromConfig.match(validCompatDateRe)
 	) {
 		// If the compat date is already a valid one, leave it since it may be there for a specific compat reason
-		return config["compatibility_date"];
+		return dateFromConfig;
 	}
+	// If the compat date is missing or invalid, set it to the latest workerd date
 	return await getWorkerdCompatibilityDate();
 }