C3: add vite+react templates with tests

.changeset/nine-states-call.md

@@ -0,0 +1,5 @@
+---
+"create-cloudflare": patch
+---
+
+add experimental React templates using the Cloudflare Vite plugin

package.json

@@ -74,7 +74,8 @@
 			"@types/react-transition-group>@types/react": "^18",
 			"@cloudflare/elements>@types/react": "^18",
 			"capnpc-ts>typescript": "4.2.4",
-			"@types/node": "$@types/node"
+			"@types/node": "$@types/node",
+			"vitest>vite": "^5.0.0"
 		},
 		"patchedDependencies": {
 			"@cloudflare/[email protected]": "patches/@[email protected]",

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

@@ -100,6 +100,26 @@ function getFrameworkTests(opts: {
 				},
 				flags: ["--style", "sass"],
 			},
+			react: {
+				promptHandlers: [
+					{
+						matcher: /Select a variant:/,
+						input: [keys.enter],
+					},
+				],
+				unsupportedOSs: ["win32"],
+				unsupportedPms: ["yarn"],
+				testCommitMessage: true,
+				verifyDeploy: {
+					route: "/",
+					expectedText: "Vite + React",
+				},
+				verifyPreview: {
+					route: "/",
+					previewArgs: ["--host=127.0.0.1"],
+					expectedText: "Vite + React",
+				},
+			},
 			gatsby: {
 				unsupportedPms: ["bun", "pnpm"],
 				promptHandlers: [
@@ -641,6 +661,10 @@ describe.concurrent(
 
 			test({ experimental }).runIf(shouldRunTest(frameworkId, testConfig))(
 				frameworkId,
+				{
+					retry: TEST_RETRIES,
+					timeout: testConfig.timeout || TEST_TIMEOUT,
+				},
 				async ({ logStream, project }) => {
 					if (!testConfig.verifyDeploy) {
 						expect(
@@ -715,10 +739,6 @@ describe.concurrent(
 						}
 					}
 				},
-				{
-					retry: TEST_RETRIES,
-					timeout: testConfig.timeout || TEST_TIMEOUT,
-				},
 			);
 		});
 	},
@@ -742,6 +762,7 @@ const runCli = async (
 		NO_DEPLOY ? "--no-deploy" : "--deploy",
 		"--no-open",
 		"--no-git",
+		"--no-auto-update",
 	];
 
 	args.push(...argv);
@@ -765,28 +786,29 @@ const runCli = async (
 };
 
 /**
- * Either update or create a wrangler.toml to include a `TEST` var.
+ * Either update or create a wrangler configuration file to include a `TEST` var.
  *
- * This is rather than having a wrangler.toml in the e2e test's fixture folder,
+ * This is rather than having a wrangler configuration file in the e2e test's fixture folder,
  * which overwrites any that comes from the framework's template.
  */
 const addTestVarsToWranglerToml = async (projectPath: string) => {
 	const wranglerTomlPath = join(projectPath, "wrangler.toml");
 	const wranglerJsoncPath = join(projectPath, "wrangler.jsonc");
+
 	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(wranglerJsoncPath)) {
-		const wranglerJson = readJSON(wranglerJsoncPath);
-		// Add a TEST var to the wrangler.toml
-		wranglerJson.vars ??= {};
-		wranglerJson.vars.TEST = "C3_TEST";
+		const wranglerJsonc = readJSON(wranglerJsoncPath) as {
+			vars: Record<string, string>;
+		};
+		wranglerJsonc.vars ??= {};
+		wranglerJsonc.vars.TEST = "C3_TEST";
 
-		writeJSON(wranglerJsoncPath, wranglerJson);
+		writeJSON(wranglerJsoncPath, wranglerJsonc);
 	}
 };
 
@@ -838,6 +860,7 @@ const verifyPreviewScript = async (
 			...(pm === "npm" ? ["--"] : []),
 			"--port",
 			`${TEST_PORT}`,
+			...(verifyPreview.previewArgs ?? []),
 		],
 		{
 			cwd: projectPath,

packages/create-cloudflare/e2e-tests/helpers.ts

@@ -83,6 +83,7 @@ export type RunnerConfig = {
 	 * Specifies whether to run the preview script for the project and assert the response from the specified route.
 	 */
 	verifyPreview: null | {
+		previewArgs?: string[];
 		route: string;
 		expectedText: string;
 	};

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

@@ -1,3 +1,4 @@
+import { existsSync } from "fs";
 import { join } from "path";
 import { readJSON, readToml } from "helpers/files";
 import { detectPackageManager } from "helpers/packageManagers";
@@ -177,6 +178,7 @@ describe
 				const name = testConfig.name ?? testConfig.template;
 				test({ experimental })(
 					name,
+					{ retry: 1, timeout: testConfig.timeout || TEST_TIMEOUT },
 					async ({ project, logStream }) => {
 						try {
 							const deployedUrl = await runCli(
@@ -197,18 +199,20 @@ describe
 							const tomlPath = join(project.path, "wrangler.toml");
 							const jsoncPath = join(project.path, "wrangler.jsonc");
 
-							try {
-								expect(jsoncPath).toExist();
+							if (existsSync(jsoncPath)) {
 								const config = readJSON(jsoncPath) as { main?: string };
 								if (config.main) {
 									expect(join(project.path, config.main)).toExist();
 								}
-							} catch (e) {
-								expect(tomlPath).toExist();
+							} else if (existsSync(tomlPath)) {
 								const config = readToml(tomlPath) as { main?: string };
 								if (config.main) {
 									expect(join(project.path, config.main)).toExist();
 								}
+							} else {
+								expect.fail(
+									`Expected at least one of "${jsoncPath}" or "${tomlPath}" to exist.`,
+								);
 							}
 
 							const { verifyDeploy, verifyTest } = testConfig;
@@ -227,7 +231,6 @@ describe
 							await deleteWorker(project.name);
 						}
 					},
-					{ retry: 1, timeout: testConfig.timeout || TEST_TIMEOUT },
 				);
 			});
 	});

packages/create-cloudflare/package.json

@@ -66,6 +66,7 @@
 		"@typescript-eslint/parser": "^6.9.0",
 		"chalk": "^5.2.0",
 		"command-exists": "^1.2.9",
+		"comment-json": "^4.2.5",
 		"cross-spawn": "^7.0.3",
 		"deepmerge": "^4.3.1",
 		"degit": "^2.8.4",

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

@@ -1,9 +1,9 @@
 import fs, { existsSync, statSync } from "fs";
 import { join } from "path";
 import TOML from "@iarna/toml";
-import { parse } from "jsonc-parser";
+import { parse, stringify } from "comment-json";
 import type { JsonMap } from "@iarna/toml";
-import type { C3Context } from "types";
+import type { C3Context, PackageJson } from "types";
 
 export const copyFile = (path: string, dest: string) => {
 	try {
@@ -57,7 +57,7 @@ export const directoryExists = (path: string): boolean => {
 	}
 };
 
-export const readJSON = (path: string) => {
+export const readJSON = (path: string): unknown => {
 	const contents = readFile(path);
 	return contents ? parse(contents) : contents;
 };
@@ -69,10 +69,10 @@ export const readToml = (path: string) => {
 
 export const writeJSON = (
 	path: string,
-	object: object,
+	object: unknown,
 	stringifySpace = "\t",
 ) => {
-	writeFile(path, JSON.stringify(object, null, stringifySpace));
+	writeFile(path, stringify(object, null, stringifySpace));
 };
 
 export const writeToml = (path: string, object: JsonMap) => {
@@ -136,8 +136,8 @@ export const usesEslint = (ctx: C3Context): EslintUsageInfo => {
 	}
 
 	try {
-		const pkgJson = readJSON(`${ctx.project.path}/package.json`);
-		if (pkgJson.eslintConfig) {
+		const pkgJson = readJSON(`${ctx.project.path}/package.json`) as PackageJson;
+		if (pkgJson?.eslintConfig) {
 			return {
 				used: true,
 				configType: "package.json",

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

@@ -25,7 +25,7 @@ export const detectPackageManager = () => {
 	if (process.env.TEST_PM && process.env.TEST_PM_VERSION) {
 		name = process.env.TEST_PM as PmName;
 		version = process.env.TEST_PM_VERSION;
-		process.env.npm_config_user_agent = name;
+		process.env.npm_config_user_agent = `${name}/${version}`;
 	}
 
 	switch (name) {

packages/create-cloudflare/src/templates.ts

@@ -29,6 +29,7 @@ import honoTemplateExperimental from "templates-experimental/hono/c3";
 import nextTemplateExperimental from "templates-experimental/next/c3";
 import nuxtTemplateExperimental from "templates-experimental/nuxt/c3";
 import qwikTemplateExperimental from "templates-experimental/qwik/c3";
+import reactTemplateExperimental from "templates-experimental/react/c3";
 import remixTemplateExperimental from "templates-experimental/remix/c3";
 import solidTemplateExperimental from "templates-experimental/solid/c3";
 import svelteTemplateExperimental from "templates-experimental/svelte/c3";
@@ -177,6 +178,7 @@ export function getFrameworkMap({ experimental = false }): TemplateMap {
 			next: nextTemplateExperimental,
 			nuxt: nuxtTemplateExperimental,
 			qwik: qwikTemplateExperimental,
+			react: reactTemplateExperimental,
 			remix: remixTemplateExperimental,
 			solid: solidTemplateExperimental,
 			svelte: svelteTemplateExperimental,
@@ -717,7 +719,7 @@ export const updatePackageName = async (ctx: C3Context) => {
 	// Update package.json with project name
 	const placeholderNames = ["<TBD>", "TBD", ""];
 	const pkgJsonPath = resolve(ctx.project.path, "package.json");
-	const pkgJson = readJSON(pkgJsonPath);
+	const pkgJson = readJSON(pkgJsonPath) as PackageJson;
 
 	if (!placeholderNames.includes(pkgJson.name)) {
 		return;
@@ -741,11 +743,11 @@ export const updatePackageScripts = async (ctx: C3Context) => {
 	s.start("Updating `package.json` scripts");
 
 	const pkgJsonPath = resolve(ctx.project.path, "package.json");
-	let pkgJson = readJSON(pkgJsonPath);
+	let pkgJson = readJSON(pkgJsonPath) as PackageJson;
 
 	// Run any transformers defined by the template
 	const transformed = await ctx.template.transformPackageJson(pkgJson, ctx);
-	pkgJson = deepmerge(pkgJson, transformed);
+	pkgJson = deepmerge(pkgJson, transformed as PackageJson);
 
 	writeJSON(pkgJsonPath, pkgJson);
 	s.stop(`${brandColor("updated")} ${dim("`package.json`")}`);

packages/create-cloudflare/templates-experimental/angular/c3.ts

@@ -7,7 +7,7 @@ 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";
+import type { C3Context, PackageJson } from "types";
 
 const { npm } = detectPackageManager();
 
@@ -63,10 +63,10 @@ async function updateAppCode() {
 	// Remove unwanted dependencies
 	s.start(`Updating package.json`);
 	const packageJsonPath = resolve("package.json");
-	const packageManifest = readJSON(packageJsonPath);
+	const packageManifest = readJSON(packageJsonPath) as PackageJson;
 
-	delete packageManifest["dependencies"]["express"];
-	delete packageManifest["devDependencies"]["@types/express"];
+	delete packageManifest["dependencies"]?.["express"];
+	delete packageManifest["devDependencies"]?.["@types/express"];
 
 	writeFile(packageJsonPath, JSON.stringify(packageManifest, null, 2));
 	s.stop(`${brandColor(`updated`)} ${dim(`\`package.json\``)}`);
@@ -75,7 +75,7 @@ async function updateAppCode() {
 function updateAngularJson(ctx: C3Context) {
 	const s = spinner();
 	s.start(`Updating angular.json config`);
-	const angularJson = readJSON(resolve("angular.json"));
+	const angularJson = readJSON(resolve("angular.json")) as AngularJson;
 	// Update builder
 	const architectSection = angularJson.projects[ctx.project.name].architect;
 	architectSection.build.options.outputPath = "dist";
@@ -110,3 +110,21 @@ const config: TemplateConfig = {
 	}),
 };
 export default config;
+
+type AngularJson = {
+	projects: Record<
+		string,
+		{
+			architect: {
+				build: {
+					options: {
+						outputPath: string;
+						outputMode: string;
+						ssr: Record<string, unknown>;
+						assets: string[];
+					};
+				};
+			};
+		}
+	>;
+};