C3: add vite+react templates with tests (#8013)

* chore: C3 - use comment-json to parse and stringify JSON files

This makes it possible to preserve comments in JSON(C) files that contain them.

* test: C3 - tiny refactoring of workers tests for wrangler config existence

* feat: C3 - add experimental Vite+workerd on Workers+Assets template

* test

* add changeset

* fixup! test

* avoiding the grammar police

* fix vitest warnings

* tighten up c3 turbo inputs

* improve user agent spoofing

* skip react on yarn

The create-vite app wants to process the npm_config_user_agent to get the version of yarn,
but for some reason this gets stripped by the fact we are faking it and actually running pnpx.

* further fixups

* update template files to match target formatting

* fix broken lock file

* extend the 'waitForReady' timeout to avoid flakes on Windows

* re-enable yarn tests for react+vite C3 template

* add Cloudflare to the React+Vite framework starter

* fix indentation

* only override npm_config_user_agent for yarn if it is not already a yarn user agent

* fix test expectations

* fix e2e tests

* fix e2e tests

* fix up hono e2e test

* fix up docusaurus e2e tests

* maybe fix qwik

* fixup! maybe fix qwik

Author: petebacondarwin

.changeset/nine-states-call.md

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

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

@@ -1,3 +1,4 @@
+import assert from "assert";
 import { existsSync } from "fs";
 import { cp } from "fs/promises";
 import { join } from "path";
@@ -101,6 +102,31 @@ function getFrameworkTests(opts: {
 				},
 				flags: ["--style", "sass"],
 			},
+			react: {
+				promptHandlers: [
+					{
+						matcher: /Select a variant:/,
+						input: [keys.enter],
+					},
+				],
+				unsupportedOSs: ["win32"],
+				testCommitMessage: true,
+				verifyDeploy: {
+					route: "/",
+					// Note that this is the text in the static HTML that is returned
+					// This React SPA will change this at runtime but we are only making a fetch request
+					// not actually running the client side JS.
+					expectedText: "Vite + React + TS",
+				},
+				verifyPreview: {
+					route: "/",
+					previewArgs: ["--host=127.0.0.1"],
+					// Note that this is the text in the static HTML that is returned
+					// This React SPA will change this at runtime but we are only making a fetch request
+					// not actually running the client side JS.
+					expectedText: "Vite + React + TS",
+				},
+			},
 			gatsby: {
 				unsupportedPms: ["bun", "pnpm"],
 				promptHandlers: [
@@ -124,11 +150,11 @@ function getFrameworkTests(opts: {
 				testCommitMessage: true,
 				unsupportedOSs: ["win32"],
 				verifyDeploy: {
-					route: "/",
+					route: "/message",
 					expectedText: "Hello Hono!",
 				},
 				verifyPreview: {
-					route: "/",
+					route: "/message",
 					expectedText: "Hello Hono!",
 				},
 				promptHandlers: [
@@ -145,6 +171,7 @@ function getFrameworkTests(opts: {
 						input: [keys.enter],
 					},
 				],
+				flags: [],
 				testCommitMessage: true,
 				unsupportedOSs: ["win32"],
 				unsupportedPms: ["yarn"],
@@ -544,7 +571,6 @@ function getFrameworkTests(opts: {
 				],
 				testCommitMessage: true,
 				unsupportedOSs: ["win32"],
-				unsupportedPms: ["yarn"],
 				timeout: LONG_TIMEOUT,
 				verifyDeploy: {
 					route: "/",
@@ -651,6 +677,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(
@@ -734,10 +764,6 @@ describe.concurrent(
 						}
 					}
 				},
-				{
-					retry: TEST_RETRIES,
-					timeout: testConfig.timeout || TEST_TIMEOUT,
-				},
 			);
 		});
 	},
@@ -760,6 +786,7 @@ const runCli = async (
 		framework,
 		NO_DEPLOY ? "--no-deploy" : "--deploy",
 		"--no-open",
+		"--no-auto-update",
 	];
 
 	args.push(...argv);
@@ -783,28 +810,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);
 	}
 };
 
@@ -841,10 +869,16 @@ const verifyPreviewScript = async (
 	projectPath: string,
 	logStream: Writable,
 ) => {
-	if (!verifyPreview || !previewScript) {
+	if (!verifyPreview) {
 		return;
 	}
 
+	assert(
+		previewScript,
+		"Expected a preview script is we are verifying the preview in " +
+			projectPath,
+	);
+
 	// Run the dev-server on a random port to avoid colliding with other tests
 	const TEST_PORT = Math.ceil(Math.random() * 1000) + 20000;
 
@@ -856,6 +890,7 @@ const verifyPreviewScript = async (
 			...(pm === "npm" ? ["--"] : []),
 			"--port",
 			`${TEST_PORT}`,
+			...(verifyPreview.previewArgs ?? []),
 		],
 		{
 			cwd: projectPath,

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

@@ -84,6 +84,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/frameworks/__tests__/index.test.ts

@@ -31,7 +31,7 @@ describe("frameworks", () => {
 				pm: "yarn",
 				pmCmd: "npx",
 				env: {
-					npm_config_user_agent: "yarn",
+					npm_config_user_agent: "yarn/1.22.22",
 				},
 			},
 			{

packages/create-cloudflare/src/frameworks/index.ts

@@ -32,7 +32,10 @@ export const runFrameworkGenerator = async (ctx: C3Context, args: string[]) => {
 	// So to retain the ability to lock versions we run it with `npx` and spoof
 	// the user agent so scaffolding tools treat the invocation like yarn
 	const cmd = [...(npm === "yarn" ? ["npx"] : dlx), cli, ...args];
-	const env = npm === "yarn" ? { npm_config_user_agent: "yarn" } : {};
+	const env =
+		npm === "yarn" && !process.env.npm_config_user_agent?.startsWith("yarn")
+			? { npm_config_user_agent: "yarn/1.22.22" }
+			: {};
 
 	if (ctx.args.additionalArgs?.length) {
 		cmd.push(...ctx.args.additionalArgs);

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`")}`);