Components v2 integration

package.json

@@ -1,6 +1,6 @@
 {
   "name": "crownutils",
-  "version": "1.0.0",
+  "version": "0.1.0",
   "description": "A Discord bot",
   "main": "dist/index.js",
   "type": "module",

src/commands/slash/ping.ts

@@ -1,6 +1,10 @@
 import { SlashCommandBuilder } from 'discord.js';
-import type { SlashCommand } from '@/types/command.js';
 import { pingMessages } from '@/lang/index.js';
+import type { SlashCommand } from '@/types/command.js';
+import { Container } from '@/lib/components/container.js';
+import { Text } from '@/lib/components/text.js';
+import { Separator } from '@/lib/components/separator.js';
+import { Title } from '@/lib/components/title.js';
 
 export const command: SlashCommand = {
   data: new SlashCommandBuilder()
@@ -9,15 +13,19 @@ export const command: SlashCommand = {
 
   async execute(interaction) {
     const before = Date.now();
-
-    await interaction.reply({ content: pingMessages.calculating });
-
+    await interaction.deferReply();
     const totalLatency = Date.now() - before;
-
     const discordLatency = Math.round(interaction.client.ws.ping);
 
-    await interaction.editReply(
-      pingMessages.result(totalLatency, discordLatency),
-    );
+    const message = new Container()
+      .color('info')
+      .add(
+        new Title(pingMessages.title),
+        new Separator(),
+        new Text(pingMessages.result(totalLatency, discordLatency)),
+      )
+      .build();
+
+    await interaction.editReply(message);
   },
 };

src/handlers/base-loader.ts

@@ -1,7 +1,7 @@
-import { logger } from '@/lib/logger.js';
 import { readdir } from 'node:fs/promises';
 import { dirname, join } from 'node:path';
 import { fileURLToPath, pathToFileURL } from 'node:url';
+import { logger } from '@/lib/logger.js';
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
 
@@ -11,7 +11,7 @@ export async function loadModules<T>(
   isValid: (obj: unknown) => obj is T,
 ): Promise<T[]> {
   const items: T[] = [];
-  const dirPath = dirname(join(__dirname, '..', directory));
+  const dirPath = join(__dirname, '..', directory);
 
   let files: string[];
   try {
@@ -25,7 +25,8 @@ export async function loadModules<T>(
     (file) =>
       (file.endsWith('.js') || file.endsWith('.ts')) && !file.endsWith('.d.ts'),
   );
-  for (const file of files) {
+
+  for (const file of moduleFiles) {
     const fileUrl = pathToFileURL(join(dirPath, file)).href;
     const module = (await import(fileUrl)) as Record<string, unknown>;
     const candidate = module[exportName];

src/lang/ping.ts

@@ -1,5 +1,5 @@
 export const pingMessages = {
-  calculating: '🏓 Pong',
+  title: '🏓 Pong',
   result: (totalMs: number, discordMs: number): string =>
-    `🏓 Pong\nLatence totale : ${totalMs} ms\nLatence Discord : ${discordMs} ms`,
+    `Latence totale : ${totalMs} ms\nLatence Discord : ${discordMs} ms`,
 } as const;

src/lib/components/component.ts

@@ -0,0 +1,30 @@
+import type {
+  ContainerBuilder,
+  SeparatorBuilder,
+  TextDisplayBuilder,
+} from 'discord.js';
+
+/** The discriminated union of all V2 components.
+ * "kind" is the discriminant: it tells Container which native
+ * discord.js method to call when assembling the component.
+ */
+export type V2Component = TextComponent | SeparatorComponent | RawComponent;
+
+export interface TextComponent {
+  kind: 'text';
+  toBuilder(): TextDisplayBuilder;
+}
+
+export interface SeparatorComponent {
+  kind: 'separator';
+  toBuilder(): SeparatorBuilder;
+}
+
+/** Escape hatch: wraps any native component the model doesn't cover
+ * (sections, galleries, buttons...). "apply" adds it to the container
+ *directly, since each native type needs its own add method.
+ */
+export interface RawComponent {
+  kind: 'raw';
+  apply(container: ContainerBuilder): void;
+}

src/lib/components/container.ts

@@ -0,0 +1,62 @@
+import { ContainerBuilder, MessageFlags, TextDisplayBuilder } from 'discord.js';
+import type { TextComponent, V2Component } from './component.js';
+
+const COLORS = {
+  success: 0x57f287,
+  error: 0xed4245,
+  info: 0x5865f2,
+  warning: 0xfee75c,
+} as const;
+
+type ColorName = keyof typeof COLORS;
+
+export class Container {
+  private readonly components: V2Component[] = [];
+  private accentColor?: number;
+
+  public color(color: ColorName | number): this {
+    this.accentColor = typeof color === 'number' ? color : COLORS[color];
+    return this;
+  }
+
+  public add(...components: V2Component[]): this {
+    this.components.push(...components);
+    return this;
+  }
+
+  public build(): { components: ContainerBuilder[]; flags: number } {
+    const container = new ContainerBuilder();
+    if (this.accentColor !== undefined) {
+      container.setAccentColor(this.accentColor);
+    }
+
+    for (const component of this.components) {
+      switch (component.kind) {
+        case 'text':
+          container.addTextDisplayComponents(component.toBuilder());
+          break;
+        case 'separator':
+          container.addSeparatorComponents(component.toBuilder());
+          break;
+        case 'raw':
+          component.apply(container);
+          break;
+      }
+    }
+
+    return {
+      components: [container],
+      flags: MessageFlags.IsComponentsV2,
+    };
+  }
+}
+
+export function render(component: TextComponent): {
+  components: TextDisplayBuilder[];
+  flags: number;
+} {
+  return {
+    components: [component.toBuilder()],
+    flags: MessageFlags.IsComponentsV2,
+  };
+}

src/lib/components/footer.ts

@@ -0,0 +1,17 @@
+import { TextDisplayBuilder } from 'discord.js';
+import type { TextComponent } from './component.js';
+
+/**
+ * A footer-like component: small, subtle text (markdown "-#").
+ * V2 has no real footer field, so this is a Text under the hood
+ * (kind: 'text') rendered with the subtle "-#" markdown.
+ */
+export class Footer implements TextComponent {
+  public readonly kind = 'text';
+
+  public constructor(private readonly content: string) {}
+
+  public toBuilder(): TextDisplayBuilder {
+    return new TextDisplayBuilder().setContent(`-# ${this.content}`);
+  }
+}

src/lib/components/separator.ts

@@ -0,0 +1,10 @@
+import { SeparatorBuilder } from 'discord.js';
+import type { SeparatorComponent } from './component.js';
+
+export class Separator implements SeparatorComponent {
+  public readonly kind = 'separator';
+
+  public toBuilder(): SeparatorBuilder {
+    return new SeparatorBuilder();
+  }
+}

src/lib/components/text.ts

@@ -0,0 +1,12 @@
+import { TextDisplayBuilder } from 'discord.js';
+import type { TextComponent } from './component.js';
+
+export class Text implements TextComponent {
+  public readonly kind = 'text';
+
+  public constructor(private readonly content: string) {}
+
+  public toBuilder(): TextDisplayBuilder {
+    return new TextDisplayBuilder().setContent(this.content);
+  }
+}

src/lib/components/title.ts

@@ -0,0 +1,17 @@
+import { TextDisplayBuilder } from 'discord.js';
+import type { TextComponent } from './component.js';
+
+/**
+ * A heading component. It is a Text under the hood (kind: 'text')
+ * since Discord renders titles as markdown headers inside a
+ * TextDisplay — there is no dedicated "title" component in V2.
+ */
+export class Title implements TextComponent {
+  public readonly kind = 'text';
+
+  public constructor(private readonly content: string) {}
+
+  public toBuilder(): TextDisplayBuilder {
+    return new TextDisplayBuilder().setContent(`## ${this.content}`);
+  }
+}