use generated types in c3 (#8886)

* add option to use generated types

* update templates

* update tests

* changeset

* fix next test

* don't conflate installing workers-types and generating types

* next on pages

* pr feedback

* fixups

* f

* use workersTypes enum instead

* set env interface and types path in one place

* set defaults in test too

* pr feedback

* update tests

* tidy up

* Update packages/create-cloudflare/src/workers.ts

Co-authored-by: Victor Berchet <[email protected]>

---------

Co-authored-by: Victor Berchet <[email protected]>

Author: emily-shen

.changeset/slimy-eels-wink.md

@@ -0,0 +1,5 @@
+---
+"create-cloudflare": minor
+---
+
+use `wrangler types` to generate types instead of using the `@cloudflare/workers-types` package

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

@@ -12,6 +12,7 @@ import {
 import { detectPackageManager } from "helpers/packageManagers";
 import { retry } from "helpers/retry";
 import { sleep } from "helpers/sleep";
+import * as jsonc from "jsonc-parser";
 import { fetch } from "undici";
 import { beforeAll, describe, expect } from "vitest";
 import { deleteProject, deleteWorker } from "../scripts/common";
@@ -41,12 +42,9 @@ import type { Writable } from "stream";
 
 type FrameworkTestConfig = RunnerConfig & {
 	testCommitMessage: boolean;
+	nodeCompat: boolean;
 	unsupportedPms?: string[];
 	unsupportedOSs?: string[];
-	verifyBuildCfTypes?: {
-		outputFile: string;
-		envInterfaceName: string;
-	};
 	verifyBuild?: {
 		outputDir: string;
 		script: string;
@@ -80,8 +78,12 @@ describe.concurrent(
 		});
 
 		Object.entries(frameworkTests).forEach(([frameworkKey, testConfig]) => {
-			const frameworkConfig = getFrameworkConfig(frameworkKey);
-
+			const frameworkConfig = {
+				workersTypes: "generated" as const,
+				typesPath: "worker-configuration.d.ts",
+				envInterfaceName: "Env",
+				...getFrameworkConfig(frameworkKey),
+			};
 			test({ experimental }).runIf(
 				shouldRunTest(frameworkConfig.id, testConfig),
 			)(
@@ -176,7 +178,8 @@ describe.concurrent(
 							project.path,
 							logStream,
 						);
-						await verifyBuildCfTypesScript(testConfig, project.path, logStream);
+
+						await verifyTypes(testConfig, frameworkConfig, project.path);
 						await verifyBuildScript(testConfig, project.path, logStream);
 					} catch (e) {
 						console.error("ERROR", e);
@@ -352,57 +355,53 @@ const verifyPreviewScript = async (
 	}
 };
 
-const verifyBuildCfTypesScript = async (
-	{ verifyBuildCfTypes }: FrameworkTestConfig,
+const verifyTypes = async (
+	{ nodeCompat }: FrameworkTestConfig,
+	{
+		workersTypes,
+		typesPath = "./worker-configuration.d.ts",
+		envInterfaceName = "Env",
+	}: TemplateConfig,
 	projectPath: string,
-	logStream: Writable,
 ) => {
-	if (!verifyBuildCfTypes) {
+	if (workersTypes === "none") {
 		return;
 	}
 
-	const { outputFile, envInterfaceName } = verifyBuildCfTypes;
-
-	const outputFileContentPre = readFile(join(projectPath, outputFile));
-	const outputFileContentPreLines = outputFileContentPre.split("\n");
+	const outputFileContent = readFile(join(projectPath, typesPath)).split("\n");
 
-	// the file contains the "Generated by Wrangler" comment without a timestamp
-	expect(outputFileContentPreLines).toContain("// Generated by Wrangler");
-
-	// the file contains the env interface
-	// the file still contains the env interface
-	const hasEnvInterfacePre = outputFileContentPreLines.some(
+	const hasEnvInterface = outputFileContent.some(
 		(line) =>
 			// old type gen - some framework templates pin older versions of wrangler
 			line === `interface ${envInterfaceName} {` ||
 			// new after importable env change
 			line === `interface ${envInterfaceName} extends Cloudflare.Env {}`,
 	);
-	expect(hasEnvInterfacePre).toBe(true);
-
-	// Run the `cf-typegen` script to generate types for bindings in fixture
-	const buildTypesProc = spawnWithLogging(
-		[pm, "run", "cf-typegen"],
-		{ cwd: projectPath },
-		logStream,
-	);
-	await waitForExit(buildTypesProc);
-
-	const outputFileContentPost = readFile(join(projectPath, outputFile));
-	const outputFileContentPostLines = outputFileContentPost.split("\n");
+	expect(hasEnvInterface).toBe(true);
 
-	// the file doesn't contain the "Generated by Wrangler" comment anymore
-	expect(outputFileContentPostLines).not.toContain("// Generated by Wrangler");
+	// if the runtime types were installed, they wont be in this file
+	if (workersTypes === "generated") {
+		expect(outputFileContent[2]).match(
+			/\/\/ Runtime types generated with workerd@1\.\d{8}\.\d \d{4}-\d{2}-\d{2} ([a-z_]+,?)*/,
+		);
+	}
 
-	// the file still contains the env interface
-	const hasEnvInterfacePost = outputFileContentPostLines.some(
-		(line) =>
-			// old type gen - some framework templates pin older versions of wrangler
-			line === `interface ${envInterfaceName} {` ||
-			// new after importable env change
-			line === `interface ${envInterfaceName} extends Cloudflare.Env {}`,
-	);
-	expect(hasEnvInterfacePost).toBe(true);
+	const tsconfigPath = join(projectPath, "tsconfig.json");
+	const tsconfigTypes = jsonc.parse(readFile(tsconfigPath)).compilerOptions
+		?.types;
+	if (workersTypes === "generated") {
+		expect(tsconfigTypes).toContain(typesPath);
+	}
+	if (workersTypes === "installed") {
+		expect(
+			tsconfigTypes.some((x: string) =>
+				x.includes("@cloudflare/workers-types"),
+			),
+		).toBe(true);
+	}
+	if (nodeCompat) {
+		expect(tsconfigTypes).toContain(`node`);
+	}
 };
 
 const verifyBuildScript = async (

packages/create-cloudflare/e2e-tests/frameworks/framework-test-config-experimental.ts

@@ -25,6 +25,7 @@ export default function getFrameworkTestConfigExperimental() {
 				route: "/",
 				expectedText: "Hello world",
 			},
+			nodeCompat: true,
 		},
 	};
 }