Pbd/add vite c3 templates

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

@@ -100,6 +100,23 @@ function getFrameworkTests(opts: {
 				},
 				flags: ["--style", "sass"],
 			},
+			react: {
+				promptHandlers: [
+					{
+						matcher: /Select a variant:/,
+						input: [keys.enter],
+					},
+				],
+				testCommitMessage: true,
+				verifyDeploy: {
+					route: "/",
+					expectedText: "Vite + React",
+				},
+				verifyPreview: {
+					route: "/",
+					expectedText: "Vite + React",
+				},
+			},
 			gatsby: {
 				unsupportedPms: ["bun", "pnpm"],
 				promptHandlers: [
@@ -534,7 +551,6 @@ function getFrameworkTests(opts: {
 				],
 				testCommitMessage: true,
 				unsupportedOSs: ["win32"],
-				unsupportedPms: ["yarn"],
 				timeout: LONG_TIMEOUT,
 				verifyDeploy: {
 					route: "/",
@@ -781,7 +797,9 @@ const addTestVarsToWranglerToml = async (projectPath: string) => {
 
 		writeToml(wranglerTomlPath, wranglerToml);
 	} else if (existsSync(wranglerJsonPath)) {
-		const wranglerJson = readJSON(wranglerJsonPath);
+		const wranglerJson = readJSON(wranglerJsonPath) as {
+			vars: Record<string, string>;
+		};
 		// Add a TEST var to the wrangler.toml
 		wranglerJson.vars ??= {};
 		wranglerJson.vars.TEST = "C3_TEST";

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";
@@ -197,18 +198,20 @@ describe
 							const tomlPath = join(project.path, "wrangler.toml");
 							const jsonPath = join(project.path, "wrangler.json");
 
-							try {
-								expect(jsonPath).toExist();
+							if (existsSync(jsonPath)) {
 								const config = readJSON(jsonPath) 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 "${jsonPath}" and "${tomlPath}" to exist.`,
+								);
 							}
 
 							const { verifyDeploy, verifyTest } = testConfig;

packages/create-cloudflare/package.json

@@ -65,6 +65,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/codemod.ts

@@ -155,7 +155,9 @@ export const mergeObjectProperties = (
 	});
 };
 
-const getPropertyName = (newProp: recast.types.namedTypes.ObjectProperty) => {
+export const getPropertyName = (
+	newProp: recast.types.namedTypes.ObjectProperty,
+) => {
 	return newProp.key.type === "Identifier"
 		? newProp.key.name
 		: newProp.key.type === "StringLiteral"

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;
 };
@@ -67,8 +67,12 @@ export const readToml = (path: string) => {
 	return contents ? TOML.parse(contents) : {};
 };
 
-export const writeJSON = (path: string, object: object, stringifySpace = 2) => {
-	writeFile(path, JSON.stringify(object, null, stringifySpace));
+export const writeJSON = (
+	path: string,
+	object: unknown,
+	stringifySpace = 2,
+) => {
+	writeFile(path, stringify(object, null, stringifySpace));
 };
 
 export const writeToml = (path: string, object: JsonMap) => {
@@ -132,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/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[];
+					};
+				};
+			};
+		}
+	>;
+};