Implement registerUI

package.json

@@ -31,10 +31,11 @@
     "@types/jest": "^26.0.24",
     "@types/lodash": "^4.14.171",
     "@types/node": "^16.3.1",
+    "@types/uuid": "^8.3.1",
     "@typescript-eslint/eslint-plugin": "^4.28.2",
     "@typescript-eslint/parser": "^4.28.2",
     "babel-jest": "^27.0.6",
-    "discord.js": "^13.0.0-dev.t1627776267.00c2bf8",
+    "discord.js": "^13.0.0-dev.t1627778678.74fc23b",
     "eslint": "^7.30.0",
     "jest": "^27.0.6",
     "lodash": "^4.17.21",
@@ -44,7 +45,8 @@
     "typescript": "^4.3.5"
   },
   "dependencies": {
-    "dotenv": "^10.0.0"
+    "dotenv": "^10.0.0",
+    "uuid": "^8.3.2"
   },
   "files": [
     "/dist"

src/Client.ts

@@ -4,33 +4,27 @@ import discord, {
   ApplicationCommandPermissionData,
   ClientOptions,
   Collection,
-  CommandInteraction,
   Guild,
   GuildApplicationCommandPermissionData,
-  Message,
   Snowflake,
 } from 'discord.js';
-import { dispatch } from './dispatch';
-import { loadStructures } from './loaders';
+import { isEqual } from 'lodash';
 import { Command, isCommand } from './Command';
+import { loadStructures } from './loaders';
+import { registerInteractionListener } from './registerInteractionListener';
 import { toData } from './utils/command';
-import { isEqual } from 'lodash';
-import { MessageFilter, runMessageFilters } from './messageFilters';
 
 export default class Client extends discord.Client {
-
   private commands = new Collection<string, Command>();
-  private messageFilters: MessageFilter[] = [];
 
   /**
    * Handles commands for the bot.
    */
   constructor(options: ClientOptions) {
     super(options);
-  }  
+  }
 
   async syncCommands(commands: Command[]): Promise<void> {
-
     if (!this.isReady()) {
       throw new Error('This must be used after the client is ready.');
     }
@@ -40,9 +34,10 @@ export default class Client extends discord.Client {
     }
 
     // Fetch the commands from the server.
-    const rawCommands = process.env.NODE_ENV === 'development' ?  
-      await this.guilds.cache.get(process.env.GUILD_ID)?.commands.fetch() : 
-      await this.application.commands.fetch();
+    const rawCommands =
+      process.env.NODE_ENV === 'development'
+        ? await this.guilds.cache.get(process.env.GUILD_ID)?.commands.fetch()
+        : await this.application.commands.fetch();
 
     if (!rawCommands) {
       throw new Error('Could not fetch remote commands!');
@@ -51,10 +46,10 @@ export default class Client extends discord.Client {
     // Normalize all of the commands.
 
     const appCommands = new Collection<string, ApplicationCommandData>();
-    rawCommands.map(toData).forEach(data => appCommands.set(data.name, data));
+    rawCommands.map(toData).forEach((data) => appCommands.set(data.name, data));
 
     const clientCommands = new Collection<string, ApplicationCommandData>();
-    commands.map(toData).forEach(data => clientCommands.set(data.name, data));
+    commands.map(toData).forEach((data) => clientCommands.set(data.name, data));
 
     // Helper for whenever there's a diff.
     const push = async () => {
@@ -65,17 +60,19 @@ export default class Client extends discord.Client {
 
     // If the length is not the same it's obvious that the commands aren't the same.
     if (appCommands.size !== clientCommands.size) {
-      console.log({ appCommands: appCommands.size, commands: clientCommands.size });
+      console.log({
+        appCommands: appCommands.size,
+        commands: clientCommands.size,
+      });
       await push();
       return;
     }
 
-
     // Calculate if theres a diff between the local and remote commands.
-    const diff = !appCommands.every(appCommand => {
+    const diff = !appCommands.every((appCommand) => {
       // Get the name, and get the corresponding command with the same name.
       const clientCommand = clientCommands.get(appCommand.name);
-      
+
       // Check if the commands are equal.
       return isEqual(clientCommand, appCommand);
     });
@@ -89,9 +86,7 @@ export default class Client extends discord.Client {
     await push();
   }
 
-  async pushCommands(
-    appCommands: ApplicationCommandData[],
-  ): Promise<void> {
+  async pushCommands(appCommands: ApplicationCommandData[]): Promise<void> {
     let guild: Guild | undefined = undefined;
     if (process.env.GUILD_ID) {
       guild = this.guilds.cache.get(process.env.GUILD_ID);
@@ -100,9 +95,7 @@ export default class Client extends discord.Client {
     }
 
     if (!guild) {
-      throw new Error(
-        'Guild is not initialized, check your GUILD_ID.'
-      );
+      throw new Error('Guild is not initialized, check your GUILD_ID.');
     }
 
     let pushedCommands: ApplicationCommand[] | undefined;
@@ -134,12 +127,6 @@ export default class Client extends discord.Client {
     await guild.commands.permissions.set({ fullPermissions });
   }
 
-  registerMessageFilters(filters: MessageFilter[]): void {
-    this.messageFilters.push(...filters);
-    this.on('messageUpdate', async (_, message) => await runMessageFilters(message as Message, this.messageFilters));
-    this.on('messageCreate', async (message) => await runMessageFilters(message, this.messageFilters));
-  }
-
   /**
    * Registers the commands to be used by this client.
    * @param dir The directory to load commands from.
@@ -149,7 +136,7 @@ export default class Client extends discord.Client {
     // Load all of the commands in.
     const commands = await loadStructures(dir, isCommand, recursive);
 
-    commands.forEach(command => {
+    commands.forEach((command) => {
       this.commands.set(command.name, command);
     });
 
@@ -162,27 +149,7 @@ export default class Client extends discord.Client {
       // If we get here the client is already ready, so we'll register immediately.
       await this.syncCommands(commands);
     }
-
-    // Enable dispatcher.
-    this.on('interactionCreate', (interaction) => {
-      if (interaction instanceof CommandInteraction) {
-        dispatch(interaction, commands);
-      }
-
-      // FIXME figure out a button/select menu api that
-      /*
-      if (interaction instanceof ButtonInteraction) {
-        const handler = client.buttonListeners.get(interaction.customId);
-
-        if (!handler) {
-          return;
-        }
-
-        // Run handler.
-        handler(interaction);
-      }
-      */
-    });
+    registerInteractionListener(this, commands, new Map(), new Map(), []);
   }
 }
 

src/Command.ts

@@ -1,10 +1,15 @@
 import {
   ApplicationCommandOptionData,
   CommandInteraction,
+  MessageActionRow,
   Snowflake,
 } from 'discord.js';
+import { MessageFilter } from './messageFilters';
+import { UI } from './UI';
 
-export type PermissionHandler = (interaction: CommandInteraction) => boolean | string | Promise<string | boolean>;
+export type PermissionHandler = (
+  interaction: CommandInteraction
+) => boolean | string | Promise<string | boolean>;
 
 /**
  * Represents a the blueprint for a slash commands.
@@ -26,10 +31,22 @@ export interface Command {
   readonly options?: ApplicationCommandOptionData[];
 
   /**
-   * The function that gets executed after the command
-   * is invoked.
+   * The function that gets executed after the command is invoked.
+   * @param args
+   * @param args.interaction Interaction object from discord.js
+   * @param args.registerUI **Must be called at most once per message!**
+   * Generates a discord.js compatible UI from Dispatch components.
+   * @param args.registerMessageFilters Registers a callback that receives all
+   * messages and deletes a message if the callback returns false
    */
-  run(interaction: CommandInteraction): Promise<void> | void;
+  run({
+    interaction,
+    registerUI,
+  }: {
+    interaction: CommandInteraction;
+    registerUI: (ui: UI) => MessageActionRow[];
+    registerMessageFilters: (filters: MessageFilter[]) => void;
+  }): Promise<void> | void;
 
   /**
    * The static role permissions for this command.

src/UI/Button.ts

@@ -0,0 +1,35 @@
+import {
+  ButtonInteraction,
+  MessageButtonOptions,
+  MessageButtonStyle,
+} from 'discord.js';
+import { Simplify } from '../utils/Simplify';
+import { UIComponent } from './UI';
+
+export type ButtonHandler = (
+  interaction: ButtonInteraction
+) => void | Promise<void>;
+
+export type Button = Simplify<
+  Omit<MessageButtonOptions, 'customId' | 'type'> & {
+    style: Simplify<Exclude<MessageButtonStyle, 'LINK'>>;
+    onClick: ButtonHandler;
+  }
+>;
+
+export type LinkButton = Simplify<
+  Omit<MessageButtonOptions, 'customId' | 'type'> & {
+    style: 'LINK';
+    url: string;
+  }
+>;
+
+export function isLinkButton(options: UIComponent): options is LinkButton {
+  return 'url' in options && 'style' in options && options.style === 'LINK';
+}
+
+export function isRegularButton(
+  options: UIComponent
+): options is Button {
+  return 'onClick' in options && 'style' in options;
+}

src/UI/SelectMenu.ts

@@ -0,0 +1,28 @@
+import {
+  MessageSelectMenuOptions,
+  MessageSelectOptionData,
+  SelectMenuInteraction,
+} from 'discord.js';
+import { Simplify } from '../utils/Simplify';
+import { UIComponent } from './UI';
+
+export type SelectOption = Simplify<
+  Omit<MessageSelectOptionData, 'value'> & {
+    value?: string;
+  }
+>;
+
+export type SelectMenu = Simplify<
+  Omit<MessageSelectMenuOptions, 'customId' | 'options' | 'type'> & {
+    onSelect: SelectMenuHandler;
+    options: SelectOption[];
+  }
+>;
+
+export type SelectMenuHandler = (
+  interaction: SelectMenuInteraction
+) => void | Promise<void>;
+
+export function isSelectMenu(options: UIComponent): options is SelectMenu {
+  return 'onSelect' in options;
+}