[Docs Site] Implement WranglerCommand feedback (#24563)

* [Docs Site] Implement WranglerCommand feedback

* logging

* ignore _ var names in eslint

* ignore _ var names in eslint

Author: KianNH

eslint.config.js

@@ -34,7 +34,13 @@ export default [
 			"@typescript-eslint/no-explicit-any": "off",
 			"@typescript-eslint/no-unused-vars": [
 				"error",
-				{ ignoreRestSiblings: true },
+				{
+					ignoreRestSiblings: true,
+					argsIgnorePattern: "^_",
+					varsIgnorePattern: "^_",
+					caughtErrorsIgnorePattern: "^_",
+					destructuredArrayIgnorePattern: "^_",
+				},
 			],
 		},
 	},

src/components/WranglerCommand.astro

@@ -39,43 +39,58 @@ if (!definition.args) {
 	throw new Error(`[WranglerCommand] "${command}" has no arguments`);
 }
 
-const positionals = definition.positionalArgs;
-
-if (positionals && positionals.length > 0) {
-	const display = positionals.map((p) => `[${p.toUpperCase()}]`).join(" ");
-
-	command = command.concat(" ".concat(display));
-}
+const positionals = definition.positionalArgs
+	?.map((p) => `[${p.toUpperCase()}]`)
+	.join(" ");
 ---
 
-<AnchorHeading depth={2} title={definition.command} />
+<AnchorHeading depth={2} title={command} />
 
-<p>{definition.metadata?.description}</p>
-
-<PackageManagers pkg="wrangler" type="exec" args={command} />
+<PackageManagers
+	pkg="wrangler"
+	type="exec"
+	args={positionals ? command.concat(` ${positionals}`) : command}
+/>
 
 <AnchorHeading
 	depth={3}
 	title="Arguments"
-	slug={`${definition.command.replaceAll(" ", "-")}-arguments`}
+	slug={`${command.replaceAll(" ", "-")}-arguments`}
 />
 
 <ul>
 	{
-		Object.entries(definition.args).map(([key, value]) => {
-			const required = value.demandOption;
-			const defaultValue = value.default;
-
-			return (
-				<li>
-					<code>{key}</code> <Type text={value.type} />{" "}
-					{required && <MetaInfo text="required" />}
-					{defaultValue !== undefined && (
-						<MetaInfo text={`default: ${defaultValue}`} />
-					)}
-					<p>{value.description}</p>
-				</li>
-			);
-		})
+		Object.entries(definition.args)
+			.filter(([_, value]) => !value.hidden)
+			.map(([key, value]) => {
+				const description = value.description ?? value.describe;
+				const required = value.demandOption;
+				const defaultValue = value.default;
+				const alias = value.alias;
+				const positional = definition.positionalArgs?.includes(key);
+
+				const name = positional ? `[${key.toUpperCase()}]` : `--${key}`;
+
+				let aliasText;
+				if (alias) {
+					if (Array.isArray(alias)) {
+						aliasText = `aliases: --${alias.join(", --")}`;
+					} else {
+						aliasText = `alias: --${alias}`;
+					}
+				}
+
+				return (
+					<li>
+						<code>{name}</code> <Type text={value.type} />{" "}
+						{aliasText && <MetaInfo text={aliasText} />}
+						{required && <MetaInfo text="required" />}
+						{defaultValue !== undefined && (
+							<MetaInfo text={`default: ${defaultValue}`} />
+						)}
+						<p>{description}</p>
+					</li>
+				);
+			})
 	}
 </ul>

src/content/docs/style-guide/components/wrangler-command.mdx

@@ -6,6 +6,8 @@ styleGuide:
 
 The `WranglerCommand` component documents the available options for a given command.
 
+This is generated using the Wrangler version in the [`cloudflare-docs` repository](https://github.com/cloudflare/cloudflare-docs/blob/production/package.json).
+
 ## Import
 
 ```mdx
@@ -17,5 +19,7 @@ import { WranglerCommand } from "~/components";
 ```mdx live
 import { WranglerCommand } from "~/components";
 
+<WranglerCommand command="deploy" />
+
 <WranglerCommand command="d1 execute" />
 ```