fix(SlashCommandBuilder): missing methods in subcommand builder (#8583)

packages/api-extractor-utils/src/ApiNodeJSONEncoder.ts

@@ -82,6 +82,7 @@ export interface ApiMethodSignatureJSON
 		ApiTypeParameterListJSON,
 		ApiParameterListJSON,
 		ApiInheritableJSON {
+	mergedSiblings: ApiFunctionJSON[];
 	optional: boolean;
 	overloadIndex: number;
 	returnTypeTokens: TokenDocumentation[];
@@ -133,6 +134,7 @@ export interface ApiVariableJSON extends ApiItemJSON {
 }
 
 export interface ApiFunctionJSON extends ApiItemJSON, ApiTypeParameterListJSON, ApiParameterListJSON {
+	mergedSiblings: ApiFunctionJSON[];
 	overloadIndex: number;
 	returnTypeTokens: TokenDocumentation[];
 }
@@ -255,12 +257,15 @@ export class ApiNodeJSONEncoder {
 		};
 	}
 
-	public static encodeFunction(model: ApiModel, item: FunctionLike, version: string): ApiFunctionJSON {
+	public static encodeFunction(model: ApiModel, item: FunctionLike, version: string, nested = false): ApiFunctionJSON {
 		return {
 			...this.encodeItem(model, item, version),
 			...this.encodeParameterList(model, item, version),
 			...this.encodeTypeParameterList(model, item, version),
 			returnTypeTokens: item.returnTypeExcerpt.spannedTokens.map((token) => genToken(model, token, version)),
+			mergedSiblings: nested
+				? []
+				: item.getMergedSiblings().map((item) => this.encodeFunction(model, item as ApiFunction, version, true)),
 			overloadIndex: item.overloadIndex,
 		};
 	}

packages/builders/__tests__/interactions/SlashCommands/SlashCommands.test.ts

@@ -371,6 +371,18 @@ describe('Slash Commands', () => {
 				).not.toThrowError();
 			});
 
+			test('GIVEN builder with subcommand THEN has regular slash command fields', () => {
+				expect(() =>
+					getBuilder()
+						.setName('name')
+						.setDescription('description')
+						.addSubcommand((option) => option.setName('ye').setDescription('ye'))
+						.addSubcommand((option) => option.setName('no').setDescription('no'))
+						.setDMPermission(false)
+						.setDefaultMemberPermissions(1n),
+				).not.toThrowError();
+			});
+
 			test('GIVEN builder with already built subcommand group THEN does not throw error', () => {
 				expect(() => getNamedBuilder().addSubcommandGroup(getSubcommandGroup())).not.toThrowError();
 			});

packages/builders/src/interactions/slashCommands/SlashCommandBuilder.ts

@@ -190,8 +190,7 @@ export class SlashCommandBuilder {
 export interface SlashCommandBuilder extends SharedNameAndDescription, SharedSlashCommandOptions {}
 
 export interface SlashCommandSubcommandsOnlyBuilder
-	extends SharedNameAndDescription,
-		Pick<SlashCommandBuilder, 'addSubcommand' | 'addSubcommandGroup' | 'toJSON'> {}
+	extends Omit<SlashCommandBuilder, Exclude<keyof SharedSlashCommandOptions, 'options'>> {}
 
 export interface SlashCommandOptionsOnlyBuilder
 	extends SharedNameAndDescription,

packages/website/src/components/DocContainer.tsx

@@ -5,6 +5,7 @@ import type {
 	ApiClassJSON,
 	ApiInterfaceJSON,
 } from '@discordjs/api-extractor-utils';
+import type { ReactNode } from 'react';
 import { Fragment, type PropsWithChildren } from 'react';
 import { Scrollbars } from 'react-custom-scrollbars-2';
 import {
@@ -32,6 +33,7 @@ type DocContainerProps = PropsWithChildren<{
 	methods?: ApiClassJSON['methods'] | ApiInterfaceJSON['methods'] | null;
 	name: string;
 	properties?: ApiClassJSON['properties'] | ApiInterfaceJSON['properties'] | null;
+	subHeading?: ReactNode;
 	summary?: ApiItemJSON['summary'];
 	typeParams?: TypeParameterData[];
 }>;
@@ -60,6 +62,7 @@ export function DocContainer({
 	implementsTokens,
 	methods,
 	properties,
+	subHeading,
 }: DocContainerProps) {
 	const matches = useMedia('(max-width: 768px)', true);
 
@@ -71,6 +74,8 @@ export function DocContainer({
 					{name}
 				</h2>
 
+				{subHeading}
+
 				<Section title="Summary" icon={<VscListSelection size={20} />} padded dense={matches}>
 					{summary ? <TSDoc node={summary} /> : <span>No summary provided.</span>}
 					<div className="border-light-900 -mx-8 mt-6 border-t-2" />

packages/website/src/components/MethodItem.tsx

@@ -1,13 +1,20 @@
 import type { ApiMethodJSON, ApiMethodSignatureJSON } from '@discordjs/api-extractor-utils';
-import { useCallback, useMemo } from 'react';
+import { Menu, MenuButton, MenuItem, useMenuState } from 'ariakit';
+import { useCallback, useMemo, useState } from 'react';
 import { FiLink } from 'react-icons/fi';
+import { VscChevronDown } from 'react-icons/vsc';
 import { HyperlinkedText } from './HyperlinkedText';
 import { InheritanceText } from './InheritanceText';
 import { ParameterTable } from './ParameterTable';
 import { TSDoc } from './tsdoc/TSDoc';
 
 export function MethodItem({ data }: { data: ApiMethodJSON | ApiMethodSignatureJSON }) {
 	const method = data as ApiMethodJSON;
+
+	const [overloadIndex, setOverloadIndex] = useState(1);
+	const overloadedData = method.mergedSiblings[overloadIndex - 1]!;
+	const menuState = useMenuState({ gutter: 8 });
+
 	const key = useMemo(
 		() => `${data.name}${data.overloadIndex && data.overloadIndex > 1 ? `:${data.overloadIndex}` : ''}`,
 		[data.name, data.overloadIndex],
@@ -62,13 +69,35 @@ export function MethodItem({ data }: { data: ApiMethodJSON | ApiMethodSignatureJ
 					</div>
 				</div>
 			</div>
+			{data.mergedSiblings.length > 1 ? (
+				<div className="flex flex-shrink">
+					<MenuButton
+						state={menuState}
+						className="dark:bg-dark-600 border-light-800 dark:border-dark-100 z-20 flex flex-col rounded border bg-white p-1"
+					>
+						<div className="space-x-sm flex items-center">
+							{`Overload ${overloadIndex} of ${data.mergedSiblings.length}`}
+							<VscChevronDown />
+						</div>
+					</MenuButton>
+					<Menu state={menuState} className="dark:border-dark-100 rounded border">
+						{data.mergedSiblings.map((_, idx) => (
+							<MenuItem
+								className="hover:bg-light-700 active:bg-light-800 dark:bg-dark-600 dark:hover:bg-dark-500 dark:active:bg-dark-400 rounded bg-white p-3 text-sm"
+								key={idx}
+								onClick={() => setOverloadIndex(idx + 1)}
+							>{`Overload ${idx + 1}`}</MenuItem>
+						))}
+					</Menu>
+				</div>
+			) : null}
 			{data.summary || data.parameters.length ? (
 				<div className="mb-4 flex flex-col gap-4">
-					{data.deprecated ? <TSDoc node={data.deprecated} /> : null}
-					{data.summary ? <TSDoc node={data.summary} /> : null}
-					{data.remarks ? <TSDoc node={data.remarks} /> : null}
-					{data.comment ? <TSDoc node={data.comment} /> : null}
-					{data.parameters.length ? <ParameterTable data={data.parameters} /> : null}
+					{overloadedData.deprecated ? <TSDoc node={overloadedData.deprecated} /> : null}
+					{overloadedData.summary ?? data.summary ? <TSDoc node={overloadedData.summary ?? data.summary!} /> : null}
+					{overloadedData.remarks ? <TSDoc node={overloadedData.remarks} /> : null}
+					{overloadedData.comment ? <TSDoc node={overloadedData.comment} /> : null}
+					{overloadedData.parameters.length ? <ParameterTable data={overloadedData.parameters} /> : null}
 					{data.inheritanceData ? <InheritanceText data={data.inheritanceData} /> : null}
 				</div>
 			) : null}

packages/website/src/components/MethodList.tsx

@@ -5,14 +5,20 @@ import { MethodItem } from './MethodItem';
 export function MethodList({ data }: { data: (ApiMethodJSON | ApiMethodSignatureJSON)[] }) {
 	const methodItems = useMemo(
 		() =>
-			data.map((method) => (
-				<Fragment
-					key={`${method.name}${method.overloadIndex && method.overloadIndex > 1 ? `:${method.overloadIndex}` : ''}`}
-				>
-					<MethodItem data={method} />
-					<div className="border-light-900 -mx-8 border-t-2" />
-				</Fragment>
-			)),
+			data.map((method) => {
+				if (method.overloadIndex > 1) {
+					return null;
+				}
+
+				return (
+					<Fragment
+						key={`${method.name}${method.overloadIndex && method.overloadIndex > 1 ? `:${method.overloadIndex}` : ''}`}
+					>
+						<MethodItem data={method} />
+						<div className="border-light-900 -mx-8 border-t-2" />
+					</Fragment>
+				);
+			}),
 		[data],
 	);
 

packages/website/src/components/TableOfContentItems.tsx

@@ -27,6 +27,10 @@ export function TableOfContentItems({
 	const methodItems = useMemo(
 		() =>
 			methods.map((member) => {
+				if (member.overloadIndex && member.overloadIndex > 1) {
+					return null;
+				}
+
 				const key = `${member.name}${
 					member.overloadIndex && member.overloadIndex > 1 ? `:${member.overloadIndex}` : ''
 				}`;

packages/website/src/components/model/Function.tsx

@@ -1,17 +1,50 @@
 import type { ApiFunctionJSON } from '@discordjs/api-extractor-utils';
+import { Menu, MenuButton, MenuItem, useMenuState } from 'ariakit';
+import { useState } from 'react';
+import { VscChevronDown } from 'react-icons/vsc';
 import { DocContainer } from '../DocContainer';
 import { ParametersSection } from '../Sections';
 
 export function Function({ data }: { data: ApiFunctionJSON }) {
+	const [overloadIndex, setOverloadIndex] = useState(1);
+	const overloadedData = data.mergedSiblings[overloadIndex - 1]!;
+	const menuState = useMenuState({ gutter: 8 });
+
 	return (
 		<DocContainer
-			name={`${data.name}${data.overloadIndex && data.overloadIndex > 1 ? ` (${data.overloadIndex})` : ''}`}
-			kind={data.kind}
-			excerpt={data.excerpt}
-			summary={data.summary}
-			typeParams={data.typeParameters}
+			name={`${overloadedData.name}${
+				overloadedData.overloadIndex && overloadedData.overloadIndex > 1 ? ` (${overloadedData.overloadIndex})` : ''
+			}`}
+			kind={overloadedData.kind}
+			excerpt={overloadedData.excerpt}
+			summary={overloadedData.summary}
+			typeParams={overloadedData.typeParameters}
+			subHeading={
+				data.mergedSiblings.length > 1 ? (
+					<div className="flex flex-shrink">
+						<MenuButton
+							state={menuState}
+							className="dark:bg-dark-600 border-light-800 dark:border-dark-100 z-20 flex flex-col rounded border bg-white p-1"
+						>
+							<div className="space-x-sm flex items-center">
+								<p>{`Overload ${overloadIndex} of ${data.mergedSiblings.length}`}</p>
+								<VscChevronDown />
+							</div>
+						</MenuButton>
+						<Menu state={menuState} className="dark:border-dark-100 rounded border">
+							{data.mergedSiblings.map((_, idx) => (
+								<MenuItem
+									className="hover:bg-light-700 active:bg-light-800 dark:bg-dark-600 dark:hover:bg-dark-500 dark:active:bg-dark-400 rounded bg-white p-3 text-sm"
+									key={idx}
+									onClick={() => setOverloadIndex(idx + 1)}
+								>{`Overload ${idx + 1}`}</MenuItem>
+							))}
+						</Menu>
+					</div>
+				) : null
+			}
 		>
-			<ParametersSection data={data.parameters} />
+			<ParametersSection data={overloadedData.parameters} />
 		</DocContainer>
 	);
 }

packages/website/src/pages/docs/[...slug].tsx

@@ -193,7 +193,9 @@ export const getStaticProps: GetStaticProps = async ({ params }) => {
 				packageName,
 				branchName,
 				data: {
-					members: pkg ? getMembers(pkg, branchName) : [],
+					members: pkg
+						? getMembers(pkg, branchName).filter((item) => item.overloadIndex === null || item.overloadIndex <= 1)
+						: [],
 					member:
 						memberName && containerKey ? findMemberByKey(model, packageName, containerKey, branchName) ?? null : null,
 					source: mdxSource,
@@ -219,7 +221,7 @@ const member = (props?: ApiItemJSON | undefined) => {
 		case 'Class':
 			return <Class data={props as ApiClassJSON} />;
 		case 'Function':
-			return <Function data={props as ApiFunctionJSON} />;
+			return <Function key={props.containerKey} data={props as ApiFunctionJSON} />;
 		case 'Interface':
 			return <Interface data={props as ApiInterfaceJSON} />;
 		case 'TypeAlias':