fix: wrangler types decouple env-interface from namespace

Author: HW13

.changeset/fine-years-create.md

@@ -0,0 +1,7 @@
+---
+"wrangler": patch
+---
+
+Wrangler types decouple env-interface from namespace.
+
+The `wrangler types` command now adds a `BaseEnv` interface which is then extended by `Cloudflare.Env` and the `--env-interface`

packages/wrangler/e2e/types.test.ts

@@ -49,7 +49,7 @@ describe("types", () => {
 		await helper.seed(seed);
 		const output = await helper.run(`wrangler types`);
 		expect(output.stdout).toContain("Generating project types...");
-		expect(output.stdout).toContain("interface Env {");
+		expect(output.stdout).toContain("interface Env extends BaseEnv {");
 		expect(output.stdout).toContain("Generating runtime types...");
 		expect(output.stdout).toContain("Runtime types generated.");
 		expect(output.stdout).toContain(
@@ -74,16 +74,17 @@ describe("types", () => {
 		);
 		expect(file).toMatchInlineSnapshot(`
 			"/* eslint-disable */
-			// Generated by Wrangler by running \`wrangler types --include-runtime=false\` (hash: 5c82572f95137bbfb775d02fdf441070)
+			// Generated by Wrangler by running \`wrangler types --include-runtime=false\` (hash: fbdd9c78deb72b14fc06ea86f1940c82)
+			interface BaseEnv {
+				MY_VAR: "my-var-value";
+			}
 			declare namespace Cloudflare {
 				interface GlobalProps {
 					mainModule: typeof import("./src/index");
 				}
-				interface Env {
-					MY_VAR: "my-var-value";
-				}
+				interface Env extends BaseEnv {}
 			}
-			interface Env extends Cloudflare.Env {}
+			interface Env extends BaseEnv {}
 			"
 		`);
 	});
@@ -99,7 +100,7 @@ describe("types", () => {
 		).split("\n");
 
 		expect(lines[1]).toMatchInlineSnapshot(
-			`"// Generated by Wrangler by running \`wrangler types ./types.d.ts\` (hash: 5c82572f95137bbfb775d02fdf441070)"`
+			`"// Generated by Wrangler by running \`wrangler types ./types.d.ts\` (hash: fbdd9c78deb72b14fc06ea86f1940c82)"`
 		);
 		expect(lines[2]).match(
 			/\/\/ Runtime types generated with workerd@1\.\d{8}\.\d \d{4}-\d{2}-\d{2} ([a-z_]+,?)*/
@@ -126,7 +127,7 @@ describe("types", () => {
 		).split("\n");
 
 		expect(lines[1]).toMatchInlineSnapshot(
-			`"// Generated by Wrangler by running \`wrangler types -c wranglerA.toml --env-interface MyCloudflareEnv ./cflare-env.d.ts\` (hash: e981fccb455c04c58ced00f3442b83ac)"`
+			`"// Generated by Wrangler by running \`wrangler types -c wranglerA.toml --env-interface MyCloudflareEnv ./cflare-env.d.ts\` (hash: ae7e85ef5d4b4e21c6e897e59e7c34fc)"`
 		);
 		expect(lines[2]).match(
 			/\/\/ Runtime types generated with workerd@1\.\d{8}\.\d \d{4}-\d{2}-\d{2} ([a-z_]+,?)*/
@@ -158,7 +159,7 @@ describe("types", () => {
 		const file2 = readFileSync(typesPath, "utf8");
 
 		// regenerates env types
-		expect(file2).toContain("interface Env {");
+		expect(file2).toContain("interface Env extends BaseEnv {");
 		// uses cached runtime types
 		expect(file2).toContain("// Begin runtime types");
 		expect(file2).toContain("FAKE RUNTIME");
@@ -180,17 +181,18 @@ describe("types", () => {
 		);
 		expect(file).toMatchInlineSnapshot(`
 			"/* eslint-disable */
-			// Generated by Wrangler by running \`wrangler types --include-runtime=false\` (hash: 1457dc49fa39d3fb92583c9c66b2dbe5)
+			// Generated by Wrangler by running \`wrangler types --include-runtime=false\` (hash: 33f3189d3ee367953f0e81f02a1f1800)
+			interface BaseEnv {
+				MY_VAR: "my-var-value";
+				MY_SECRET_VAR: string;
+			}
 			declare namespace Cloudflare {
 				interface GlobalProps {
 					mainModule: typeof import("./src/index");
 				}
-				interface Env {
-					MY_VAR: "my-var-value";
-					MY_SECRET_VAR: string;
-				}
+				interface Env extends BaseEnv {}
 			}
-			interface Env extends Cloudflare.Env {}
+			interface Env extends BaseEnv {}
 			"
 		`);
 	});

packages/wrangler/src/type-generation/index.ts

@@ -781,7 +781,7 @@ function generateTypeStrings(
 			// StringifyValues ensures that json vars are correctly types as strings, not objects on process.env
 			processEnv = `\ntype StringifyValues<EnvType extends Record<string, unknown>> = {\n\t[Binding in keyof EnvType]: EnvType[Binding] extends string ? EnvType[Binding] : string;\n};\ndeclare namespace NodeJS {\n\tinterface ProcessEnv extends StringifyValues<Pick<Cloudflare.Env, ${stringKeys.map((k) => `"${k}"`).join(" | ")}>> {}\n}`;
 		}
-		baseContent = `declare namespace Cloudflare {${entrypointModule ? `\n\tinterface GlobalProps {\n\t\tmainModule: typeof import("${entrypointModule}");${configuredDurableObjects.length > 0 ? `\n\t\tdurableNamespaces: ${configuredDurableObjects.map((d) => `"${d}"`).join(" | ")};` : ""}\n\t}` : ""}\n\tinterface Env {${envTypeStructure.map((value) => `\n\t\t${value}`).join("")}\n\t}\n}\ninterface ${envInterface} extends Cloudflare.Env {}${processEnv}`;
+		baseContent = `interface BaseEnv {${envTypeStructure.map((value) => `\n\t${value}`).join("")}\n}\ndeclare namespace Cloudflare {${entrypointModule ? `\n\tinterface GlobalProps {\n\t\tmainModule: typeof import("${entrypointModule}");${configuredDurableObjects.length > 0 ? `\n\t\tdurableNamespaces: ${configuredDurableObjects.map((d) => `"${d}"`).join(" | ")};` : ""}\n\t}` : ""}\n\tinterface Env extends BaseEnv {}\n}\ninterface ${envInterface} extends BaseEnv {}${processEnv}`;
 	} else {
 		baseContent = `export {};\ndeclare global {\n${envTypeStructure.map((value) => `\tconst ${value}`).join("\n")}\n}`;
 	}