feat: app directory command handler

Author: twlite

apps/test-bot/src/app/commands/avatar/command.tsx

@@ -0,0 +1,54 @@
+import { MessageCommandContext, SlashCommandContext } from 'commandkit';
+import { ApplicationCommandOptionType } from 'discord.js';
+
+export const command = {
+  name: 'avatar',
+  description: 'This is an avatar command.',
+  options: [
+    {
+      name: 'user',
+      description: 'The user to get the avatar for.',
+      type: ApplicationCommandOptionType.User,
+    },
+  ],
+};
+
+export async function chatInput(ctx: SlashCommandContext) {
+  const user = ctx.options.getUser('user') ?? ctx.interaction.user;
+
+  const { t } = ctx.locale();
+
+  const msg = await t('avatar', { user: user.username });
+
+  await ctx.interaction.reply({
+    embeds: [
+      {
+        title: msg,
+        image: {
+          url: user.displayAvatarURL({ size: 2048 }),
+        },
+        color: 0x7289da,
+      },
+    ],
+  });
+}
+
+export async function message(ctx: MessageCommandContext) {
+  const user = ctx.options.getUser('user') ?? ctx.message.author;
+
+  const { t } = ctx.locale();
+
+  const msg = await t('avatar', { user: user.username });
+
+  await ctx.message.reply({
+    embeds: [
+      {
+        title: msg,
+        image: {
+          url: user.displayAvatarURL({ size: 2048 }),
+        },
+        color: 0x7289da,
+      },
+    ],
+  });
+}

apps/test-bot/src/commands/misc/prompt.tsx renamed to apps/test-bot/src/app/commands/prompt/command.tsx

@@ -1,14 +1,15 @@
 import CommandKit, {
-  SlashCommandProps,
   CommandData,
   Modal,
   ShortInput,
   ParagraphInput,
   OnModalKitSubmit,
+  MessageCommandContext,
+  SlashCommandContext,
 } from 'commandkit';
 import { MessageFlags } from 'discord.js';
 
-export const data: CommandData = {
+export const command: CommandData = {
   name: 'prompt',
   description: 'This is a prompt command.',
 };
@@ -25,17 +26,27 @@ const handleSubmit: OnModalKitSubmit = async (interaction, context) => {
   context.dispose();
 };
 
-export async function run({ interaction }: SlashCommandProps) {
+export async function chatInput(ctx: SlashCommandContext) {
+  const { t } = ctx.locale();
+
+  const title = await t('modal.title');
+  const label = await t('input.label');
+  const description = await t('input.placeholder');
+
   const modal = (
-    <Modal title="My Cool Modal" onSubmit={handleSubmit}>
+    <Modal title={title} onSubmit={handleSubmit}>
       <ShortInput customId="name" label="Name" placeholder="John" required />
       <ParagraphInput
         customId="description"
-        label="Description"
-        placeholder="This is a description."
+        label={label}
+        placeholder={description}
       />
     </Modal>
   );
 
-  await interaction.showModal(modal);
+  await ctx.interaction.showModal(modal);
+}
+
+export async function message(ctx: MessageCommandContext) {
+  ctx.message.reply('Prompt is only available in slash commands.');
 }

apps/test-bot/src/app/events/ready/logger.ts

@@ -0,0 +1,5 @@
+import { Client } from 'discord.js';
+
+export default function ReadyEvent(client: Client<true>) {
+  console.log(`Successfully logged in as ${client.user?.tag}`);
+}

apps/test-bot/src/app/locales/en-US/avatar.json

@@ -0,0 +1,15 @@
+{
+  "command": {
+    "name": "avatar",
+    "description": "This is an avatar command.",
+    "options": [
+      {
+        "name": "user",
+        "description": "The user to get the avatar for."
+      }
+    ]
+  },
+  "translations": {
+    "avatar": "{user}'s avatar"
+  }
+}

apps/test-bot/src/app/locales/en-US/prompt.json

@@ -0,0 +1,11 @@
+{
+  "command": {
+    "name": "prompt",
+    "description": "This is a prompt command."
+  },
+  "translations": {
+    "modal.title": "My Cool Modal",
+    "input.label": "Description",
+    "input.placeholder": "This is a description"
+  }
+}

apps/test-bot/src/app/locales/fr/avatar.json

@@ -0,0 +1,15 @@
+{
+  "command": {
+    "name": "avatar",
+    "description": "C'est une commande pour afficher l'avatar.",
+    "options": [
+      {
+        "name": "user",
+        "description": "L'utilisateur dont vous souhaitez voir l'avatar."
+      }
+    ]
+  },
+  "translations": {
+    "avatar": "Avatar de {user}"
+  }
+}

apps/test-bot/src/app/locales/fr/prompt.json

@@ -0,0 +1,11 @@
+{
+  "command": {
+    "name": "prompt",
+    "description": "Ceci est une commande de prompt."
+  },
+  "translations": {
+    "modal.title": "Ma superbe modale",
+    "input.label": "Description",
+    "input.placeholder": "Ceci est une description"
+  }
+}

apps/test-bot/src/commands/misc/ping.ts

@@ -68,7 +68,7 @@ export async function run({ interaction, client }: SlashCommandProps) {
           ephemeral: true,
         });
       },
-      { message, time: 10_000, autoReset: true },
+      { time: 10_000, autoReset: true },
     )
     .onEnd(() => {
       console.log('onEnd called');

apps/test-bot/src/index.ts

@@ -6,7 +6,7 @@ const client = new Client({
   intents: ['Guilds', 'GuildMembers', 'GuildMessages', 'MessageContent'],
 });
 
-new CommandKit({
+const commandkit = new CommandKit({
   // @ts-ignore
   client,
   commandsPath: `${__dirname}/commands`,

packages/commandkit/src/CommandKit.ts

@@ -15,13 +15,19 @@ import { CacheProvider } from './cache/CacheProvider';
 import { MemoryCache } from './cache/MemoryCache';
 import { createElement, Fragment } from './components';
 import { EventInterceptor } from './components/common/EventInterceptor';
-import { Locale } from 'discord.js';
+import { Awaitable, Locale, Message } from 'discord.js';
 import { DefaultLocalizationStrategy } from './app/i18n/DefaultLocalizationStrategy';
 import { findAppDirectory } from './utils/utilities';
 import { join } from 'node:path';
 import { CommandsRouter, EventsRouter } from '@commandkit/router';
-import { COMMANDKIT_IS_DEV } from './utils/constants';
 import { AppCommandHandler } from './app/command-handler/AppCommandHandler';
+import { LocalizationStrategy } from './app/i18n/LocalizationStrategy';
+
+export interface CommandKitConfiguration {
+  defaultLocale: Locale;
+  localizationStrategy: LocalizationStrategy;
+  getMessageCommandPrefix: (message: Message) => Awaitable<string | string[]>;
+}
 
 export class CommandKit extends EventEmitter {
   #data: CommandKitData;
@@ -30,9 +36,10 @@ export class CommandKit extends EventEmitter {
   public static readonly createElement = createElement;
   public static readonly Fragment = Fragment;
 
-  public readonly config = {
+  public readonly config: CommandKitConfiguration = {
     defaultLocale: Locale.EnglishUS,
     localizationStrategy: new DefaultLocalizationStrategy(this),
+    getMessageCommandPrefix: () => '!',
   };
 
   public commandsRouter!: CommandsRouter;
@@ -95,6 +102,35 @@ export class CommandKit extends EventEmitter {
     }
   }
 
+  /**
+   * Sets the prefix resolver for the command handler.
+   * @param resolver The resolver function.
+   */
+  setPrefixResolver(
+    resolver: (message: Message) => Awaitable<string | string[]>,
+  ) {
+    this.config.getMessageCommandPrefix = resolver;
+    return this;
+  }
+
+  /**
+   * Sets the default locale for the command handler.
+   * @param locale The default locale.
+   */
+  setDefaultLocale(locale: Locale) {
+    this.config.defaultLocale = locale;
+    return this;
+  }
+
+  /**
+   * Sets the localization strategy for the command handler.
+   * @param strategy The localization strategy.
+   */
+  setLocalizationStrategy(strategy: LocalizationStrategy) {
+    this.config.localizationStrategy = strategy;
+    return this;
+  }
+
   /**
    * Resolves the current cache provider.
    */
@@ -128,8 +164,6 @@ export class CommandKit extends EventEmitter {
    * (Private) Initialize CommandKit.
    */
   async #init() {
-    await this.#initApp();
-
     // <!-- Setup event handler -->
     if (this.#data.eventsPath) {
       const eventHandler = new EventHandler({
@@ -168,9 +202,10 @@ export class CommandKit extends EventEmitter {
         bulkRegister: this.#data.bulkRegister || false,
       });
 
-      await commandHandler.init();
-
       this.#data.commandHandler = commandHandler;
+
+      await this.#initApp();
+      await commandHandler.init();
     }
   }
 
@@ -197,6 +232,8 @@ export class CommandKit extends EventEmitter {
     if (this.commandsRouter.isValidPath()) {
       await this.commandsRouter.scan();
     }
+
+    await this.appCommandsHandler.loadCommands();
   }
 
   async #initEvents() {