From b0231a994569be5dd98a31d10ed5bb681b37cee9 Mon Sep 17 00:00:00 2001
From: Kian Newman-Hazel <kian@cloudflare.com>
Date: Tue, 26 Aug 2025 11:18:06 +0100
Subject: [PATCH 1/2] [Docs Site] Add WranglerCommands component

---
 src/components/WranglerCommands.astro         | 46 +++++++++++++++++++
 src/components/index.ts                       |  1 +
 .../components/wrangler-commands.mdx          | 23 ++++++++++
 3 files changed, 70 insertions(+)
 create mode 100644 src/components/WranglerCommands.astro
 create mode 100644 src/content/docs/style-guide/components/wrangler-commands.mdx

diff --git a/src/components/WranglerCommands.astro b/src/components/WranglerCommands.astro
new file mode 100644
index 000000000000000..967c1236dcbf3fd
--- /dev/null
+++ b/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 ", "")} />
+		);
+	})
+}
diff --git a/src/components/index.ts b/src/components/index.ts
index c340a2147fbca9d..ebd01a44065c6c2 100644
--- a/src/components/index.ts
+++ b/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";
diff --git a/src/content/docs/style-guide/components/wrangler-commands.mdx b/src/content/docs/style-guide/components/wrangler-commands.mdx
new file mode 100644
index 000000000000000..d3809ea5f00e7f0
--- /dev/null
+++ b/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" />
+```

From 5deac4bab9d8ac46b357770eb3b7436f08ade77c Mon Sep 17 00:00:00 2001
From: Kian Newman-Hazel <kian@cloudflare.com>
Date: Tue, 26 Aug 2025 13:18:58 +0100
Subject: [PATCH 2/2] rename

---
 ...Commands.astro => WranglerNamespace.astro} |  4 ++--
 src/components/index.ts                       |  2 +-
 .../components/wrangler-commands.mdx          | 23 -------------------
 .../components/wrangler-namespace.mdx         | 23 +++++++++++++++++++
 4 files changed, 26 insertions(+), 26 deletions(-)
 rename src/components/{WranglerCommands.astro => WranglerNamespace.astro} (83%)
 delete mode 100644 src/content/docs/style-guide/components/wrangler-commands.mdx
 create mode 100644 src/content/docs/style-guide/components/wrangler-namespace.mdx

diff --git a/src/components/WranglerCommands.astro b/src/components/WranglerNamespace.astro
similarity index 83%
rename from src/components/WranglerCommands.astro
rename to src/components/WranglerNamespace.astro
index 967c1236dcbf3fd..7f58d1143a5914a 100644
--- a/src/components/WranglerCommands.astro
+++ b/src/components/WranglerNamespace.astro
@@ -14,7 +14,7 @@ const defs = experimental_getWranglerCommands();
 const node = defs.subtree.get(namespace);
 
 if (!node || node.subtree.size === 0) {
-	throw new Error(`[WranglerCommands] Namespace "${namespace}" not found`);
+	throw new Error(`[WranglerNamespace] Namespace "${namespace}" not found`);
 }
 
 const definitions: NonNullable<(typeof node)["definition"]>[] = [];
@@ -36,7 +36,7 @@ flattenSubtree(node.subtree);
 	definitions.map((definition) => {
 		if (definition.type !== "command") {
 			throw new Error(
-				`[WranglerCommands] Expected "command" but got "${definition.type}" for "${definition.command}"`,
+				`[WranglerNamespace] Expected "command" but got "${definition.type}" for "${definition.command}"`,
 			);
 		}
 		return (
diff --git a/src/components/index.ts b/src/components/index.ts
index ebd01a44065c6c2..901724378c654e5 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -58,7 +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 WranglerNamespace } from "./WranglerNamespace.astro";
 export { default as WranglerConfig } from "./WranglerConfig.astro";
 export { default as WARPReleases } from "./WARPReleases.astro";
 export { default as Width } from "./Width.astro";
diff --git a/src/content/docs/style-guide/components/wrangler-commands.mdx b/src/content/docs/style-guide/components/wrangler-commands.mdx
deleted file mode 100644
index d3809ea5f00e7f0..000000000000000
--- a/src/content/docs/style-guide/components/wrangler-commands.mdx
+++ /dev/null
@@ -1,23 +0,0 @@
----
-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" />
-```
diff --git a/src/content/docs/style-guide/components/wrangler-namespace.mdx b/src/content/docs/style-guide/components/wrangler-namespace.mdx
new file mode 100644
index 000000000000000..f1cefa1125f11f7
--- /dev/null
+++ b/src/content/docs/style-guide/components/wrangler-namespace.mdx
@@ -0,0 +1,23 @@
+---
+title: WranglerNamespace
+styleGuide:
+  component: WranglerNamespace
+---
+
+The `WranglerNamespace` 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 { WranglerNamespace } from "~/components";
+```
+
+## Usage
+
+```mdx live
+import { WranglerNamespace } from "~/components";
+
+<WranglerNamespace namespace="d1" />
+```