feat: components v2 jsx

Author: twlite

apps/test-bot/package.json

@@ -14,10 +14,10 @@
     "@commandkit/devtools": "workspace:*",
     "@commandkit/i18n": "workspace:*",
     "@commandkit/legacy": "workspace:*",
-    "discord.js": "^14.17.3",
+    "discord.js": "^14.19.1",
     "dotenv": "^16.4.7"
   },
   "devDependencies": {
     "tsx": "^4.7.0"
   }
-}
+}

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

@@ -0,0 +1,65 @@
+import CommandKit, {
+  Button,
+  ChatInputCommand,
+  CommandData,
+  Container,
+  File,
+  MediaGallery,
+  MediaGalleryItem,
+  Section,
+  Separator,
+  TextDisplay,
+} from 'commandkit';
+import {
+  AttachmentBuilder,
+  ButtonStyle,
+  MessageFlags,
+  SeparatorSpacingSize,
+} from 'discord.js';
+
+export const command: CommandData = {
+  name: 'components',
+  description: 'Test components v2',
+};
+
+const fileContent = '# This is a test file\nHello world!';
+const mediaItems: string[] = Array.from(
+  {
+    length: 6,
+  },
+  (_, i) => `https://cdn.discordapp.com/embed/avatars/${i}.png`,
+);
+
+export const chatInput: ChatInputCommand = async (ctx) => {
+  const container = (
+    <Container>
+      <TextDisplay content="# CommandKit Components v2 test" />
+      <Section>
+        <TextDisplay content="This is a section" />
+        <Button url="https://commandkit.dev" style={ButtonStyle.Link}>
+          Website
+        </Button>
+      </Section>
+      <Separator spacing={SeparatorSpacingSize.Large} />
+      <TextDisplay content="This is after separator" />
+      <File url="attachment://components-v2-are-awesome.md" />
+      <Separator spacing={SeparatorSpacingSize.Large} dividier />
+      <TextDisplay content="Discord's default avatars" />
+      <MediaGallery>
+        {mediaItems.map((item) => (
+          <MediaGalleryItem description="Gallery item description" url={item} />
+        ))}
+      </MediaGallery>
+    </Container>
+  );
+
+  await ctx.interaction.reply({
+    components: [container],
+    files: [
+      new AttachmentBuilder(Buffer.from(fileContent), {
+        name: 'components-v2-are-awesome.md',
+      }),
+    ],
+    flags: MessageFlags.IsComponentsV2,
+  });
+};

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

@@ -0,0 +1,38 @@
+import CommandKit, {
+  ChatInputCommand,
+  CommandData,
+  MediaGallery,
+  MediaGalleryItem,
+  TextDisplay,
+} from 'commandkit';
+import { MessageFlags } from 'discord.js';
+
+export const command: CommandData = {
+  name: 'gallery',
+  description: 'Test components v2 gallery',
+};
+
+const mediaItems: string[] = Array.from(
+  {
+    length: 6,
+  },
+  (_, i) => `https://cdn.discordapp.com/embed/avatars/${i}.png`,
+);
+
+export const chatInput: ChatInputCommand = async (ctx) => {
+  const components = (
+    <>
+      <TextDisplay content="Discord avatars" />
+      <MediaGallery>
+        {mediaItems.map((item) => (
+          <MediaGalleryItem description="Gallery item description" url={item} />
+        ))}
+      </MediaGallery>
+    </>
+  );
+
+  await ctx.interaction.reply({
+    components,
+    flags: MessageFlags.IsComponentsV2,
+  });
+};

packages/commandkit/package.json

@@ -46,7 +46,7 @@
     "@types/ms": "^0.7.34",
     "@types/node": "^22.10.2",
     "@types/yargs": "^17.0.32",
-    "discord.js": "^14.17.3",
+    "discord.js": "^14.19.1",
     "tsconfig": "workspace:*",
     "tsx": "^4.19.2",
     "typescript": "^5.7.3",
@@ -58,4 +58,4 @@
   "engines": {
     "node": ">=22"
   }
-}
+}

packages/commandkit/src/components/common/element.ts

@@ -1,7 +1,7 @@
 import { ActionRowBuilder, TextInputBuilder } from 'discord.js';
-import type { ButtonKit } from '../button/ButtonKit';
+import type { ButtonKit } from '../v1/button/ButtonKit';
 import { warnUnstable } from '../../utils/warn-unstable';
-import { ModalKit } from '../modal/ModalKit';
+import { ModalKit } from '../v1/modal/ModalKit';
 
 export const ElementType = {
   ActionRow: 'action-row',

packages/commandkit/src/components/index.ts

@@ -1,22 +1,25 @@
 // action row
-export * from './action-row/ActionRow';
+export * from './v1/action-row/ActionRow';
 
 // buttons
-export * from './button/ButtonKit';
-export * from './button/Button';
+export * from './v1/button/ButtonKit';
+export * from './v1/button/Button';
 
 // modals
-export * from './modal/ModalKit';
-export * from './modal/Modal';
+export * from './v1/modal/ModalKit';
+export * from './v1/modal/Modal';
 
 // select menus
-export * from './select-menu/StringSelectMenuKit';
-export * from './select-menu/ChannelSelectMenuKit';
-export * from './select-menu/MentionableSelectMenuKit';
-export * from './select-menu/UserSelectMenuKit';
-export * from './select-menu/RoleSelectMenuKit';
-export * from './select-menu/SelectMenu';
-export * from './select-menu/common';
+export * from './v1/select-menu/StringSelectMenuKit';
+export * from './v1/select-menu/ChannelSelectMenuKit';
+export * from './v1/select-menu/MentionableSelectMenuKit';
+export * from './v1/select-menu/UserSelectMenuKit';
+export * from './v1/select-menu/RoleSelectMenuKit';
+export * from './v1/select-menu/SelectMenu';
+export * from './v1/select-menu/common';
+
+// v2
+export * from './v2/index';
 
 // common
 export * from './common/element';

packages/commandkit/src/components/action-row/ActionRow.ts renamed to packages/commandkit/src/components/v1/action-row/ActionRow.ts

@@ -1,5 +1,5 @@
 import { ActionRowBuilder } from 'discord.js';
-import { AnyCommandKitElement, CommandKitElement } from '../common/element';
+import { AnyCommandKitElement, CommandKitElement } from '../../common/element';
 
 export interface ActionRowProps {
   children?: AnyCommandKitElement[] | AnyCommandKitElement;

packages/commandkit/src/components/button/Button.ts renamed to packages/commandkit/src/components/v1/button/Button.ts

@@ -5,9 +5,9 @@ import {
   type CommandKitButtonBuilderInteractionCollectorDispatch,
   type CommandKitButtonBuilderInteractionCollectorDispatchContextData,
 } from './ButtonKit';
-import { CommandKitElement } from '../common/element';
-import { MaybeArray } from '../common/types';
-import { EventInterceptorErrorHandler } from '../common/EventInterceptor';
+import { CommandKitElement } from '../../common/element';
+import { MaybeArray } from '../../common/types';
+import { EventInterceptorErrorHandler } from '../../common/EventInterceptor';
 
 export type ButtonChildrenLike = string | number | boolean;
 

packages/commandkit/src/components/button/ButtonKit.ts renamed to packages/commandkit/src/components/v1/button/ButtonKit.ts

@@ -9,11 +9,11 @@ import {
   exitContext,
   getCommandKit,
   getContext,
-} from '../../context/async-context';
+} from '../../../context/async-context';
 import {
   EventInterceptorContextData,
   EventInterceptorErrorHandler,
-} from '../common/EventInterceptor';
+} from '../../common/EventInterceptor';
 
 export type ButtonKitPredicate = (
   interaction: ButtonInteraction,

packages/commandkit/src/components/modal/Modal.ts renamed to packages/commandkit/src/components/v1/modal/Modal.ts

@@ -1,13 +1,13 @@
 import { ActionRowBuilder, TextInputBuilder, TextInputStyle } from 'discord.js';
-import { MaybeArray } from '../common/types';
-import { CommandKitElement } from '../common/element';
+import { MaybeArray } from '../../common/types';
+import { CommandKitElement } from '../../common/element';
 import {
   CommandKitModalBuilderInteractionCollectorDispatchContextData,
   ModalKit,
   OnModalKitEnd,
   OnModalKitSubmit,
 } from './ModalKit';
-import { EventInterceptorErrorHandler } from '../common/EventInterceptor';
+import { EventInterceptorErrorHandler } from '../../common/EventInterceptor';
 
 export interface ModalProps {
   customId?: string;

packages/commandkit/src/components/modal/ModalKit.ts renamed to packages/commandkit/src/components/v1/modal/ModalKit.ts

@@ -8,11 +8,11 @@ import {
   exitContext,
   getCommandKit,
   getContext,
-} from '../../context/async-context';
+} from '../../../context/async-context';
 import {
   EventInterceptorContextData,
   EventInterceptorErrorHandler,
-} from '../common/EventInterceptor';
+} from '../../common/EventInterceptor';
 
 export type ModalKitPredicate = (
   interaction: ModalSubmitInteraction,

packages/commandkit/src/components/select-menu/ChannelSelectMenuKit.ts renamed to packages/commandkit/src/components/v1/select-menu/ChannelSelectMenuKit.ts

@@ -7,8 +7,8 @@ import {
   exitContext,
   getCommandKit,
   getContext,
-} from '../../context/async-context';
-import { EventInterceptorErrorHandler } from '../common/EventInterceptor';
+} from '../../../context/async-context';
+import { EventInterceptorErrorHandler } from '../../common/EventInterceptor';
 import {
   CommandKitSelectMenuBuilderInteractionCollectorDispatch,
   CommandKitSelectMenuBuilderInteractionCollectorDispatchContextData,

packages/commandkit/src/components/select-menu/MentionableSelectMenuKit.ts renamed to packages/commandkit/src/components/v1/select-menu/MentionableSelectMenuKit.ts

@@ -7,8 +7,8 @@ import {
   exitContext,
   getCommandKit,
   getContext,
-} from '../../context/async-context';
-import { EventInterceptorErrorHandler } from '../common/EventInterceptor';
+} from '../../../context/async-context';
+import { EventInterceptorErrorHandler } from '../../common/EventInterceptor';
 import {
   CommandKitSelectMenuBuilderInteractionCollectorDispatch,
   CommandKitSelectMenuBuilderInteractionCollectorDispatchContextData,

packages/commandkit/src/components/select-menu/RoleSelectMenuKit.ts renamed to packages/commandkit/src/components/v1/select-menu/RoleSelectMenuKit.ts

@@ -7,8 +7,8 @@ import {
   exitContext,
   getCommandKit,
   getContext,
-} from '../../context/async-context';
-import { EventInterceptorErrorHandler } from '../common/EventInterceptor';
+} from '../../../context/async-context';
+import { EventInterceptorErrorHandler } from '../../common/EventInterceptor';
 import {
   CommandKitSelectMenuBuilderInteractionCollectorDispatch,
   CommandKitSelectMenuBuilderInteractionCollectorDispatchContextData,

packages/commandkit/src/components/select-menu/SelectMenu.ts renamed to packages/commandkit/src/components/v1/select-menu/SelectMenu.ts

@@ -18,7 +18,7 @@ import { MentionableSelectMenuKit } from './MentionableSelectMenuKit';
 import { RoleSelectMenuKit } from './RoleSelectMenuKit';
 import { StringSelectMenuKit } from './StringSelectMenuKit';
 import { UserSelectMenuKit } from './UserSelectMenuKit';
-import { MaybeArray } from '../common/types';
+import { MaybeArray } from '../../common/types';
 import {
   CommandKitSelectMenuBuilderInteractionCollectorDispatch,
   CommandKitSelectMenuBuilderInteractionCollectorDispatchContextData,

packages/commandkit/src/components/select-menu/StringSelectMenuKit.ts renamed to packages/commandkit/src/components/v1/select-menu/StringSelectMenuKit.ts

@@ -7,8 +7,8 @@ import {
   exitContext,
   getCommandKit,
   getContext,
-} from '../../context/async-context';
-import { EventInterceptorErrorHandler } from '../common/EventInterceptor';
+} from '../../../context/async-context';
+import { EventInterceptorErrorHandler } from '../../common/EventInterceptor';
 import {
   CommandKitSelectMenuBuilderInteractionCollectorDispatch,
   CommandKitSelectMenuBuilderInteractionCollectorDispatchContextData,

packages/commandkit/src/components/select-menu/UserSelectMenuKit.ts renamed to packages/commandkit/src/components/v1/select-menu/UserSelectMenuKit.ts

@@ -7,8 +7,8 @@ import {
   exitContext,
   getCommandKit,
   getContext,
-} from '../../context/async-context';
-import { EventInterceptorErrorHandler } from '../common/EventInterceptor';
+} from '../../../context/async-context';
+import { EventInterceptorErrorHandler } from '../../common/EventInterceptor';
 import {
   CommandKitSelectMenuBuilderInteractionCollectorDispatch,
   CommandKitSelectMenuBuilderInteractionCollectorDispatchContextData,

packages/commandkit/src/components/select-menu/common.ts renamed to packages/commandkit/src/components/v1/select-menu/common.ts

@@ -1,5 +1,5 @@
 import { Awaitable, Events } from 'discord.js';
-import { EventInterceptorContextData } from '../common/EventInterceptor';
+import { EventInterceptorContextData } from '../../common/EventInterceptor';
 
 export type SelectMenuKitPredicate<T> = (interaction: T) => Awaitable<boolean>;
 

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

@@ -0,0 +1,7 @@
+import { ComponentBuilder } from 'discord.js';
+
+export function applyId(props: { id?: number }, component: ComponentBuilder) {
+  if (props.id != null) {
+    component.setId(props.id);
+  }
+}

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

@@ -0,0 +1,61 @@
+import {
+  ActionRowBuilder,
+  ComponentBuilder,
+  ContainerBuilder,
+  ContainerComponentData,
+  FileBuilder,
+  MediaGalleryBuilder,
+  SectionBuilder,
+  SeparatorBuilder,
+  TextDisplayBuilder,
+} from 'discord.js';
+import { applyId } from './common';
+
+export interface ContainerProps
+  extends Omit<ContainerComponentData, 'type' | 'components'> {
+  children?: ComponentBuilder[];
+}
+
+export function Container(props: ContainerProps): ContainerBuilder {
+  const container = new ContainerBuilder();
+
+  applyId(props, container);
+
+  if (typeof props.accentColor != null) {
+    container.setAccentColor(props.accentColor);
+  }
+
+  if (props.spoiler != null) {
+    container.setSpoiler(props.spoiler);
+  }
+
+  if (props.children?.length) {
+    for (const child of props.children.flat()) {
+      if (child instanceof TextDisplayBuilder) {
+        container.addTextDisplayComponents(child);
+      }
+
+      if (child instanceof FileBuilder) {
+        container.addFileComponents(child);
+      }
+
+      if (child instanceof ActionRowBuilder) {
+        container.addActionRowComponents(child);
+      }
+
+      if (child instanceof SeparatorBuilder) {
+        container.addSeparatorComponents(child);
+      }
+
+      if (child instanceof SectionBuilder) {
+        container.addSectionComponents(child);
+      }
+
+      if (child instanceof MediaGalleryBuilder) {
+        container.addMediaGalleryComponents(child);
+      }
+    }
+  }
+
+  return container;
+}