Output .json by default in C3 (#7676)

* Output .json by default

* Create young-apes-battle.md

* Address comments

* Add more comments

* Add more comments

* sort json config files

* Enable trailing commas

* fix e2e

* fix e2e again

* formatting

* Always install latest Wrangler

* Don't overwrite the wrangler config that remix already provides

* fix unit tests

* Add back remix .toml file

Author: penalosa

.changeset/young-apes-battle.md

@@ -0,0 +1,5 @@
+---
+"create-cloudflare": patch
+---
+
+Output the `wrangler.json` config format when running `create-cloudflare`

packages/create-cloudflare/e2e-tests/frameworks.test.ts

@@ -1,7 +1,13 @@
 import { existsSync } from "fs";
 import { cp } from "fs/promises";
 import { join } from "path";
-import { readFile, readToml, writeToml } from "helpers/files";
+import {
+	readFile,
+	readJSON,
+	readToml,
+	writeJSON,
+	writeToml,
+} from "helpers/files";
 import { detectPackageManager } from "helpers/packageManagers";
 import { retry } from "helpers/retry";
 import { sleep } from "helpers/sleep";
@@ -764,17 +770,22 @@ const runCli = async (
  */
 const addTestVarsToWranglerToml = async (projectPath: string) => {
 	const wranglerTomlPath = join(projectPath, "wrangler.toml");
-	let wranglerToml: JsonMap = {};
-	const wranglerTomlExists = existsSync(wranglerTomlPath);
-	if (wranglerTomlExists) {
-		wranglerToml = readToml(wranglerTomlPath);
+	const wranglerJsonPath = join(projectPath, "wrangler.json");
+	if (existsSync(wranglerTomlPath)) {
+		const wranglerToml = readToml(wranglerTomlPath);
+		// Add a TEST var to the wrangler.toml
+		wranglerToml.vars ??= {};
+		(wranglerToml.vars as JsonMap).TEST = "C3_TEST";
+
+		writeToml(wranglerTomlPath, wranglerToml);
+	} else if (existsSync(wranglerJsonPath)) {
+		const wranglerJson = readJSON(wranglerJsonPath);
+		// Add a TEST var to the wrangler.toml
+		wranglerJson.vars ??= {};
+		wranglerJson.vars.TEST = "C3_TEST";
+
+		writeJSON(wranglerJsonPath, wranglerJson);
 	}
-
-	// Add a TEST var to the wrangler.toml
-	wranglerToml.vars ??= {};
-	(wranglerToml.vars as JsonMap).TEST = "C3_TEST";
-
-	writeToml(wranglerTomlPath, wranglerToml);
 };
 
 const verifyDeployment = async (

packages/create-cloudflare/e2e-tests/workers.test.ts

@@ -1,5 +1,5 @@
 import { join } from "path";
-import { readToml } from "helpers/files";
+import { readJSON, readToml } from "helpers/files";
 import { detectPackageManager } from "helpers/packageManagers";
 import { retry } from "helpers/retry";
 import { sleep } from "helpers/sleep";
@@ -147,10 +147,17 @@ describe
 							expect(wranglerPath).toExist();
 
 							const tomlPath = join(project.path, "wrangler.toml");
-							expect(tomlPath).toExist();
+							const jsonPath = join(project.path, "wrangler.json");
 
-							const config = readToml(tomlPath) as { main: string };
-							expect(join(project.path, config.main)).toExist();
+							try {
+								expect(jsonPath).toExist();
+								const config = readJSON(jsonPath) as { main: string };
+								expect(join(project.path, config.main)).toExist();
+							} catch {
+								expect(tomlPath).toExist();
+								const config = readToml(tomlPath) as { main: string };
+								expect(join(project.path, config.main)).toExist();
+							}
 
 							const { verifyDeploy } = testConfig;
 							if (verifyDeploy) {

packages/create-cloudflare/src/cli.ts

@@ -35,7 +35,7 @@ import {
 } from "./templates";
 import { validateProjectDirectory } from "./validators";
 import { installWorkersTypes } from "./workers";
-import { updateWranglerToml } from "./wrangler/config";
+import { updateWranglerConfig } from "./wrangler/config";
 import type { C3Args, C3Context } from "types";
 
 const { npm } = detectPackageManager();
@@ -156,9 +156,9 @@ const configure = async (ctx: C3Context) => {
 	await installWrangler();
 	await installWorkersTypes(ctx);
 
-	// Note: updateWranglerToml _must_ be called before the configure phase since
+	// Note: This _must_ be called before the configure phase since
 	//       pre-existing workers assume its presence in their configure phase
-	await updateWranglerToml(ctx);
+	await updateWranglerConfig(ctx);
 
 	const { template } = ctx;
 	if (template.configure) {

packages/create-cloudflare/src/deploy.ts

@@ -84,7 +84,7 @@ const isDeployable = async (ctx: C3Context) => {
 const readWranglerConfig = (ctx: C3Context) => {
 	if (wranglerJsonExists(ctx)) {
 		const wranglerJsonStr = readWranglerJson(ctx);
-		return jsoncParse(wranglerJsonStr);
+		return jsoncParse(wranglerJsonStr, undefined, { allowTrailingComma: true });
 	}
 	const wranglerTomlStr = readWranglerToml(ctx);
 	return TOML.parse(wranglerTomlStr.replace(/\r\n/g, "\n"));

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

@@ -91,7 +91,7 @@ describe("Package Helpers", () => {
 		await installWrangler();
 
 		expect(vi.mocked(runCommand)).toHaveBeenCalledWith(
-			["npm", "install", "--save-dev", "wrangler"],
+			["npm", "install", "--save-dev", "wrangler@latest"],
 			expect.anything(),
 		);
 	});

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

@@ -7,7 +7,7 @@ import type { C3Context } from "types";
 
 /**
  * Look up the latest release of workerd and use its date as the compatibility_date
- * configuration value for wrangler.toml.
+ * configuration value for a wrangler config file.
  *
  * If the look up fails then we fall back to a well known date.
  *

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

@@ -1,6 +1,7 @@
 import fs, { existsSync, statSync } from "fs";
 import { join } from "path";
 import TOML from "@iarna/toml";
+import { parse } from "jsonc-parser";
 import type { JsonMap } from "@iarna/toml";
 import type { C3Context } from "types";
 
@@ -58,7 +59,7 @@ export const directoryExists = (path: string): boolean => {
 
 export const readJSON = (path: string) => {
 	const contents = readFile(path);
-	return contents ? JSON.parse(contents) : contents;
+	return contents ? parse(contents) : contents;
 };
 
 export const readToml = (path: string) => {

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

@@ -89,12 +89,8 @@ export async function getLatestPackageVersion(packageSpecifier: string) {
 export const installWrangler = async () => {
 	const { npm } = detectPackageManager();
 
-	// Exit early if already installed
-	if (existsSync(path.resolve("node_modules", "wrangler"))) {
-		return;
-	}
-
-	await installPackages([`wrangler`], {
+	// Even if Wrangler is already installed, make sure we install the latest version, as some framework CLIs are pinned to an older version
+	await installPackages([`wrangler@latest`], {
 		dev: true,
 		startText: `Installing wrangler ${dim(
 			"A command line tool for building Cloudflare Workers",