[Docs Site] Add WranglerCommands component

Author: KianNH

src/components/WranglerCommands.astro

@@ -0,0 +1,46 @@
+---
+import { z } from "astro:schema";
+import { experimental_getWranglerCommands } from "wrangler";
+import WranglerCommand from "./WranglerCommand.astro";
+
+const props = z.object({
+	namespace: z.string(),
+});
+
+const { namespace } = props.parse(Astro.props);
+
+const defs = experimental_getWranglerCommands();
+
+const node = defs.subtree.get(namespace);
+
+if (!node || node.subtree.size === 0) {
+	throw new Error(`[WranglerCommands] Namespace "${namespace}" not found`);
+}
+
+const definitions: NonNullable<(typeof node)["definition"]>[] = [];
+
+function flattenSubtree(node: (typeof defs)["subtree"]) {
+	for (const value of node.values()) {
+		if (value.definition?.type === "command") {
+			definitions.push(value.definition);
+		} else {
+			flattenSubtree(value.subtree);
+		}
+	}
+}
+
+flattenSubtree(node.subtree);
+---
+
+{
+	definitions.map((definition) => {
+		if (definition.type !== "command") {
+			throw new Error(
+				`[WranglerCommands] Expected "command" but got "${definition.type}" for "${definition.command}"`,
+			);
+		}
+		return (
+			<WranglerCommand command={definition.command.replace("wrangler ", "")} />
+		);
+	})
+}

src/components/index.ts

@@ -58,6 +58,7 @@ export { default as TunnelCalculator } from "./TunnelCalculator.astro";
 export { default as Type } from "./Type.astro";
 export { default as TypeScriptExample } from "./TypeScriptExample.astro";
 export { default as WranglerCommand } from "./WranglerCommand.astro";
+export { default as WranglerCommands } from "./WranglerCommands.astro";
 export { default as WranglerConfig } from "./WranglerConfig.astro";
 export { default as WARPReleases } from "./WARPReleases.astro";
 export { default as Width } from "./Width.astro";

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

@@ -0,0 +1,23 @@
+---
+title: WranglerCommands
+styleGuide:
+  component: WranglerCommands
+---
+
+The `WranglerCommands` component documents the available commands for a given namespace.
+
+This is generated using the Wrangler version in the [`cloudflare-docs` repository](https://github.com/cloudflare/cloudflare-docs/blob/production/package.json).
+
+## Import
+
+```mdx
+import { WranglerCommands } from "~/components";
+```
+
+## Usage
+
+```mdx live
+import { WranglerCommands } from "~/components";
+
+<WranglerCommands namespace="d1" />
+```