fix: components children issue

Author: twlite

apps/test-bot/src/app/commands/(general)/components-test.tsx

@@ -0,0 +1,26 @@
+import {
+  ChatInputCommand,
+  CommandData,
+  Container,
+  TextDisplay,
+} from 'commandkit';
+import { Colors, MessageFlags } from 'discord.js';
+
+export const command: CommandData = {
+  name: 'components-test',
+  description: 'Test components v2 again',
+};
+
+export const chatInput: ChatInputCommand = async (ctx) => {
+  const container = (
+    <Container accentColor={Colors.Fuchsia}>
+      <TextDisplay content="# CommandKit Components v2 test" />
+    </Container>
+  );
+
+  await ctx.interaction.reply({
+    components: [container],
+
+    flags: MessageFlags.IsComponentsV2,
+  });
+};

packages/commandkit/src/components/v2/container.ts

@@ -8,7 +8,6 @@ import {
   SectionBuilder,
   SeparatorBuilder,
   TextDisplayBuilder,
-  ThumbnailBuilder,
 } from 'discord.js';
 import { applyId } from './common';
 
@@ -30,7 +29,10 @@ export function Container(props: ContainerProps): ContainerBuilder {
     container.setSpoiler(props.spoiler);
   }
 
-  if (props.children?.length) {
+  if (props.children != null) {
+    if (!Array.isArray(props.children)) props.children = [props.children];
+    if (props.children.length === 0) return container;
+
     for (const child of props.children.flat()) {
       if (child instanceof TextDisplayBuilder) {
         container.addTextDisplayComponents(child);

packages/commandkit/src/components/v2/media-gallery.ts

@@ -12,6 +12,7 @@ export function MediaGallery(props: MediaGalleryProps) {
   applyId(props, gallery);
 
   if (props.children != null) {
+    if (!Array.isArray(props.children)) props.children = [props.children];
     gallery.addItems(props.children.flat());
   }
 

packages/commandkit/src/components/v2/section.ts

@@ -17,6 +17,7 @@ export function Section(props: SectionProps): SectionBuilder {
   applyId(props, section);
 
   if (props.children != null) {
+    if (!Array.isArray(props.children)) props.children = [props.children];
     for (const accessory of props.children.flat()) {
       if (accessory instanceof ThumbnailBuilder) {
         section.setThumbnailAccessory(accessory);

packages/commandkit/src/components/v2/text-display.ts

@@ -1,8 +1,10 @@
 import { TextDisplayBuilder, TextDisplayComponentData } from 'discord.js';
 
+export type StringEncodable = string | number | boolean;
+
 export interface TextDisplayProps
   extends Omit<TextDisplayComponentData, 'type' | 'content'> {
-  children?: string | string[];
+  children?: StringEncodable | StringEncodable[];
   content?: string;
 }
 
@@ -13,7 +15,11 @@ export function TextDisplay(props: TextDisplayProps) {
     if (Array.isArray(props.children)) {
       textDisplay.setContent(props.children.join(' '));
     } else {
-      textDisplay.setContent(props.children);
+      textDisplay.setContent(
+        typeof props.children === 'string'
+          ? props.children
+          : String(props.children),
+      );
     }
   }