feat(wrangler/cli): add @bomb.sh/tab completions

.changeset/rude-cows-cheat.md

@@ -0,0 +1,5 @@
+---
+"wrangler": minor
+---
+
+Add tab completion for commands

packages/wrangler/package.json

@@ -77,6 +77,7 @@
 	},
 	"devDependencies": {
 		"@aws-sdk/client-s3": "^3.721.0",
+		"@bomb.sh/tab": "^0.0.11",
 		"@cloudflare/cli": "workspace:*",
 		"@cloudflare/containers-shared": "workspace:*",
 		"@cloudflare/eslint-config-shared": "workspace:*",

packages/wrangler/src/complete.ts

@@ -0,0 +1,118 @@
+// shell completions for wrangler - this dynamically extracts commands from the actual command registry
+import t from "@bomb.sh/tab";
+import { experimental_getWranglerCommands } from "./experimental-commands-api";
+import type { DefinitionTreeNode } from "./core/types";
+
+export function setupCompletions() {
+	const { registry, globalFlags } = experimental_getWranglerCommands();
+
+	// global flags that work on every command
+	for (const [flagName, flagDef] of Object.entries(globalFlags)) {
+		// skip hidden flags
+		if ("hidden" in flagDef && flagDef.hidden) continue;
+
+		const description = flagDef.describe || "";
+		t.option(flagName, description);
+
+		if ("alias" in flagDef && flagDef.alias) {
+			const aliases = Array.isArray(flagDef.alias)
+				? flagDef.alias
+				: [flagDef.alias];
+			for (const alias of aliases) {
+				t.option(alias, `Alias for --${flagName}`);
+			}
+		}
+	}
+
+	// recursively add commands from the registry tree
+	function addCommandsFromTree(
+		node: DefinitionTreeNode,
+		parentPath: string[] = []
+	) {
+		for (const [name, childNode] of node.subtree.entries()) {
+			const commandPath = [...parentPath, name];
+			const commandName = commandPath.join(" ");
+
+			if (childNode.definition) {
+				const def = childNode.definition;
+				let description = "";
+
+				if (def.metadata?.description) {
+					description = def.metadata.description;
+				}
+
+				if (
+					def.metadata?.status &&
+					def.metadata.status !== "stable" &&
+					!def.metadata.hidden
+				) {
+					const statusLabels = {
+						experimental: "[experimental]",
+						alpha: "[alpha]",
+						"private-beta": "[private-beta]",
+						"open-beta": "[open-beta]",
+					};
+					const statusLabel =
+						statusLabels[def.metadata.status as keyof typeof statusLabels];
+					if (statusLabel) {
+						description = `${description} ${statusLabel}`;
+					}
+				}
+
+				if (!def.metadata?.hidden) {
+					const cmd = t.command(commandName, description);
+
+					if (def.type === "command" && "args" in def) {
+						const args = def.args || {};
+						for (const [argName, argDef] of Object.entries(args)) {
+							if (argDef.hidden) continue;
+
+							const argDescription = argDef.describe || "";
+
+							if (argDef.choices && Array.isArray(argDef.choices)) {
+								cmd.option(argName, argDescription, (complete) => {
+									for (const choice of argDef.choices as string[]) {
+										complete(choice, choice);
+									}
+								});
+							} else {
+								cmd.option(argName, argDescription);
+							}
+
+							if (argDef.alias) {
+								const aliases = Array.isArray(argDef.alias)
+									? argDef.alias
+									: [argDef.alias];
+								for (const alias of aliases) {
+									cmd.option(alias, `Alias for --${argName}`);
+								}
+							}
+						}
+					}
+				}
+			}
+
+			if (childNode.subtree.size > 0) {
+				addCommandsFromTree(childNode, commandPath);
+			}
+		}
+	}
+
+	addCommandsFromTree(registry);
+
+	return t;
+}
+// Handle completion requests from the shell
+export function handleCompletion(args: string[]) {
+	const shell = args[0];
+
+	if (shell === "--") {
+		// Parse completion request from shell
+		setupCompletions();
+		t.parse(args.slice(1));
+	} else {
+		// Generate shell completion script
+		setupCompletions();
+		t.setup("wrangler", "wrangler", shell);
+	}
+}

packages/wrangler/src/index.ts

@@ -26,6 +26,7 @@ import {
 } from "./cert/cert";
 import { checkNamespace, checkStartupCommand } from "./check/commands";
 import { cloudchamber } from "./cloudchamber";
+import { handleCompletion } from "./complete";
 import { getDefaultEnvFiles, loadDotEnv } from "./config/dot-env";
 import { containers } from "./containers";
 import { demandSingleValue } from "./core";
@@ -1630,6 +1631,12 @@ export function createCLIParser(argv: string[]) {
 export async function main(argv: string[]): Promise<void> {
 	setupSentry();
 
+	// Handle shell completion requests
+	if (argv[0] === "complete") {
+		handleCompletion(argv.slice(1));
+		return;
+	}
+
 	checkMacOSVersion({ shouldThrow: false });
 
 	const startTime = Date.now();