Add wrangler types customization and improvements (#5042)

* [wrangler] feat: add new `--env-interface` to `wrangler types`

* [wrangler] feat: add new `path` positional argument to `wrangler types`

* [wrangler] refactor: make types command definition more consistent

for consistency with (most of) the rest of the wrangler command
use a `typesOptions` and `typesHandler` arguments instead of
inlining such functions in the `wrangler.command()` call

* [wrangler] fix: make `wrangler types` honor top level config argument

* [wrangler] fix: make `wrangler types` pick up secrets from `.dev.vars`

* [wrangler] feat: include command run in the `wrangler types` comment


---------

Co-authored-by: Pete Bacon Darwin <[email protected]>

Author: dario-piotrowicz

.changeset/beige-pants-promise.md

@@ -0,0 +1,8 @@
+---
+"wrangler": patch
+---
+
+feat: include command run in the `wrangler types` comment
+
+In the comment added to the `.d.ts` file generated by `wrangler types`
+include the command run to generated the file

.changeset/clever-needles-love.md

@@ -0,0 +1,25 @@
+---
+"wrangler": minor
+---
+
+feat: add new `--env-interface` to `wrangler types`
+
+Allow users to specify the name of the interface that they want `wrangler types` to generate for the `env` parameter, via the new CLI flag `--env-interface`
+
+Example:
+
+```sh
+wrangler types --env-interface CloudflareEnv
+```
+
+generates
+
+```ts
+interface CloudflareEnv {}
+```
+
+instead of
+
+```ts
+interface Env {}
+```

.changeset/curly-masks-raise.md

@@ -0,0 +1,17 @@
+---
+"wrangler": minor
+---
+
+feat: add new `path` positional argument to `wrangler types`
+
+Allow users to specify the path to the typings (.d.ts) file they want
+`wrangler types` to generate
+
+Example:
+
+```sh
+wrangler types ./my-env.d.ts
+```
+
+generates a `my-env.d.ts` file in the current directory
+instead of creating a `worker-configuration.d.ts` file

.changeset/itchy-dragons-burn.md

@@ -0,0 +1,11 @@
+---
+"wrangler": patch
+---
+
+fix: make `wrangler types` honor top level config argument
+
+The `wrangler types` command currently ignores the `-c|--config` argument
+(although it is still getting shown in the command's help message). Make
+sure that the command honors the flag.
+Also, if no config file is detected
+present a warning to the user

.changeset/serious-socks-tan.md

@@ -0,0 +1,9 @@
+---
+"wrangler": patch
+---
+
+fix: make the `wrangler types` command pick up local secret keys from `.dev.vars`
+
+Make sure that the `wrangler types` command correctly picks up
+secret keys defined in `.dev.vars` and includes them in the generated
+file (marking them as generic `string` types of course)

fixtures/type-generation/package.json

@@ -0,0 +1,12 @@
+{
+	"name": "type-generation-fixture",
+	"private": true,
+	"description": "A test for the `wrangler types` utility",
+	"scripts": {
+		"test": "vitest run",
+		"test:watch": "vitest"
+	},
+	"devDependencies": {
+		"wrangler": "workspace:*"
+	}
+}

fixtures/type-generation/tests/type-generation.file-comment.test.ts

@@ -0,0 +1,61 @@
+import { execSync } from "child_process";
+import { mkdtempSync, readFileSync, realpathSync, writeFileSync } from "fs";
+import { tmpdir } from "os";
+import * as path from "path";
+import { join } from "path";
+import { beforeAll, describe, it } from "vitest";
+
+describe("`wrangler types` - file comment", () => {
+	let tempDir: string;
+
+	beforeAll(() => {
+		tempDir = realpathSync(mkdtempSync(join(tmpdir(), "wrangler-types-test")));
+		const tomlFile = join(tempDir, "wrangler.toml");
+		const tomlFileA = join(tempDir, "wranglerA.toml");
+		writeFileSync(tomlFile, '\n[vars]\nMY_VAR = "my-var-value"\n');
+		writeFileSync(tomlFileA, '\n[vars]\nMY_VAR = "my-var-value"\n');
+	});
+
+	function runWranglerTypesCommand(
+		args = "",
+		expectedOutputFile = "worker-configuration.d.ts"
+	): string {
+		const wranglerPath = path.resolve(
+			__dirname,
+			"..",
+			"..",
+			"..",
+			"packages",
+			"wrangler"
+		);
+		execSync(`npx ${wranglerPath} types ${args}`, {
+			cwd: tempDir,
+		});
+		const typesFile = join(tempDir, expectedOutputFile);
+		return readFileSync(typesFile, "utf-8");
+	}
+
+	describe("includes a comment specifying the command run", () => {
+		it("(base command)", async ({ expect }) => {
+			const typesCommandOutput = runWranglerTypesCommand();
+			expect(typesCommandOutput).toContain("by running `wrangler types`");
+		});
+
+		it("(with types customization)", async ({ expect }) => {
+			const typesCommandOutput = runWranglerTypesCommand(
+				"--env-interface MyCloudflareEnv ./cflare-env.d.ts",
+				"./cflare-env.d.ts"
+			);
+			expect(typesCommandOutput).toContain(
+				"by running `wrangler types --env-interface MyCloudflareEnv ./cflare-env.d.ts`"
+			);
+		});
+
+		it("(with wrangler top level options)", async ({ expect }) => {
+			const typesCommandOutput = runWranglerTypesCommand("-c wranglerA.toml");
+			expect(typesCommandOutput).toContain(
+				"by running `wrangler types -c wranglerA.toml`"
+			);
+		});
+	});
+});

fixtures/type-generation/vitest.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig } from "vitest/config";
+
+export default defineConfig({
+	test: {
+		testTimeout: 25_000,
+		hookTimeout: 25_000,
+		teardownTimeout: 25_000,
+		useAtomics: true,
+	},
+});

fixtures/type-generation/wrangler.toml

@@ -0,0 +1,4 @@
+name = "type-generation-fixture"
+
+[vars]
+MY_VAR = "my-var-value"

packages/wrangler/src/__tests__/index.test.ts

@@ -57,7 +57,7 @@ describe("wrangler", () => {
 			  wrangler login                       🔓 Login to Cloudflare
 			  wrangler logout                      🚪 Logout from Cloudflare
 			  wrangler whoami                      🕵️  Retrieve your user info and test your auth config
-			  wrangler types                       📝 Generate types from bindings & module rules in config
+			  wrangler types [path]                📝 Generate types from bindings & module rules in config
 			  wrangler deployments                 🚢 List and view details for deployments
 			  wrangler rollback [deployment-id]    🔙 Rollback a deployment
 
@@ -111,7 +111,7 @@ describe("wrangler", () => {
 			  wrangler login                       🔓 Login to Cloudflare
 			  wrangler logout                      🚪 Logout from Cloudflare
 			  wrangler whoami                      🕵️  Retrieve your user info and test your auth config
-			  wrangler types                       📝 Generate types from bindings & module rules in config
+			  wrangler types [path]                📝 Generate types from bindings & module rules in config
 			  wrangler deployments                 🚢 List and view details for deployments
 			  wrangler rollback [deployment-id]    🔙 Rollback a deployment