refactor: allow builders to accept emoji strings (#7616)

* refactor: allow emoji strings in button builder

* refactor: add emoji string support for select menu options

* fix: export select menu option

* chore: make requested changes

* Update packages/discord.js/typings/index.test-d.ts

Co-authored-by: Vlad Frangu <kingdgrizzle@gmail.com>

Co-authored-by: Vlad Frangu <kingdgrizzle@gmail.com>

packages/builders/src/components/selectMenu/UnsafeSelectMenuOption.ts

@@ -43,8 +43,8 @@ export class UnsafeSelectMenuOptionBuilder {
 	}
 
 	/**
-	 * Sets the emoji to display on this button
-	 * @param emoji The emoji to display on this button
+	 * Sets the emoji to display on this option
+	 * @param emoji The emoji to display on this option
 	 */
 	public setEmoji(emoji: APIMessageComponentEmoji) {
 		this.data.emoji = emoji;

packages/discord.js/src/index.js

@@ -142,6 +142,7 @@ exports.Role = require('./structures/Role').Role;
 exports.SelectMenuBuilder = require('./structures/SelectMenuBuilder');
 exports.SelectMenuComponent = require('./structures/SelectMenuComponent');
 exports.SelectMenuInteraction = require('./structures/SelectMenuInteraction');
+exports.SelectMenuOptionBuilder = require('./structures/SelectMenuOptionBuilder');
 exports.StageChannel = require('./structures/StageChannel');
 exports.StageInstance = require('./structures/StageInstance').StageInstance;
 exports.Sticker = require('./structures/Sticker').Sticker;
@@ -208,7 +209,6 @@ exports.UserFlags = require('discord-api-types/v10').UserFlags;
 exports.WebhookType = require('discord-api-types/v10').WebhookType;
 exports.UnsafeButtonBuilder = require('@discordjs/builders').UnsafeButtonBuilder;
 exports.UnsafeSelectMenuBuilder = require('@discordjs/builders').UnsafeSelectMenuBuilder;
-exports.SelectMenuOptionBuilder = require('@discordjs/builders').SelectMenuOptionBuilder;
 exports.UnsafeSelectMenuOptionBuilder = require('@discordjs/builders').UnsafeSelectMenuOptionBuilder;
 exports.DiscordAPIError = require('@discordjs/rest').DiscordAPIError;
 exports.HTTPError = require('@discordjs/rest').HTTPError;

packages/discord.js/src/structures/ButtonBuilder.js

@@ -2,12 +2,25 @@
 
 const { ButtonBuilder: BuildersButtonComponent, isJSONEncodable } = require('@discordjs/builders');
 const Transformers = require('../util/Transformers');
+const Util = require('../util/Util');
 
 class ButtonBuilder extends BuildersButtonComponent {
   constructor(data) {
     super(Transformers.toSnakeCase(data));
   }
 
+  /**
+   * Sets the emoji to display on this button
+   * @param {string|APIMessageComponentEmoji} emoji The emoji to display on this button
+   * @returns {ButtonComponent}
+   */
+  setEmoji(emoji) {
+    if (typeof emoji === 'string') {
+      return super.setEmoji(Util.parseEmoji(emoji));
+    }
+    return super.setEmoji(emoji);
+  }
+
   /**
    * Creates a new button builder from json data
    * @param {JSONEncodable<APIButtonComponent> | APIButtonComponent} other The other data

packages/discord.js/src/structures/SelectMenuOptionBuilder.js

@@ -0,0 +1,23 @@
+'use strict';
+
+const { SelectMenuOptionBuilder: BuildersSelectMenuOption } = require('@discordjs/builders');
+const Util = require('../util/Util');
+
+/**
+ * Represents a select menu option
+ */
+class SelectMenuOptionBuilder extends BuildersSelectMenuOption {
+  /**
+   * Sets the emoji to display on this option
+   * @param {ComponentEmojiResolvable} emoji The emoji to display on this option
+   * @returns {SelectMenuOptionBuilder}
+   */
+  setEmoji(emoji) {
+    if (typeof emoji === 'string') {
+      return super.setEmoji(Util.parseEmoji(emoji));
+    }
+    return super.setEmoji(emoji);
+  }
+}
+
+module.exports = SelectMenuOptionBuilder;

packages/discord.js/src/util/Components.js

@@ -57,6 +57,11 @@ const { ComponentType } = require('discord-api-types/v10');
  * @typedef {ActionRowData|ButtonComponentData|SelectMenuComponentData|TextInputComponentData} ComponentData
  */
 
+/**
+ * Any emoji data that can be used within a button
+ * @typedef {APIMessageComponentEmoji|string} ComponentEmojiResolvable
+ */
+
 class Components extends null {
   /**
    * Transforms API data into a component

packages/discord.js/typings/index.d.ts

@@ -19,6 +19,7 @@ import {
   roleMention,
   SelectMenuBuilder as BuilderSelectMenuComponent,
   TextInputBuilder as BuilderTextInputComponent,
+  UnsafeSelectMenuOptionBuilder as BuildersSelectMenuOption,
   spoiler,
   strikethrough,
   time,
@@ -539,9 +540,12 @@ export class ButtonComponent extends Component<APIButtonComponent> {
   public get url(): string | null;
 }
 
+export type ComponentEmojiResolvable = APIMessageComponentEmoji | string;
+
 export class ButtonBuilder extends BuilderButtonComponent {
   public constructor(data?: ButtonComponentData | (Omit<APIButtonComponent, 'type'> & { type?: ComponentType.Button }));
   public static from(other: JSONEncodable<APIButtonComponent> | APIButtonComponent): ButtonBuilder;
+  public override setEmoji(emoji: ComponentEmojiResolvable): this;
 }
 
 export class SelectMenuBuilder extends BuilderSelectMenuComponent {
@@ -551,6 +555,10 @@ export class SelectMenuBuilder extends BuilderSelectMenuComponent {
   public static from(other: JSONEncodable<APISelectMenuComponent> | APISelectMenuComponent): SelectMenuBuilder;
 }
 
+export class SelectMenuOptionBuilder extends BuildersSelectMenuOption {
+  public setEmoji(emoji: ComponentEmojiResolvable): this;
+}
+
 export class TextInputBuilder extends BuilderTextInputComponent {
   public constructor(data?: TextInputComponentData | APITextInputComponent);
   public static from(other: JSONEncodable<APITextInputComponent> | APITextInputComponent): TextInputBuilder;
@@ -5304,6 +5312,7 @@ export {
   ApplicationCommandPermissionType,
   APIEmbedField,
   APISelectMenuOption,
+  APIMessageComponentEmoji,
   AuditLogEvent,
   ButtonStyle,
   ChannelType,
@@ -5341,7 +5350,6 @@ export {
 export {
   UnsafeButtonBuilder,
   UnsafeSelectMenuBuilder,
-  SelectMenuOptionBuilder,
   UnsafeSelectMenuOptionBuilder,
   MessageActionRowComponentBuilder,
   ModalActionRowComponentBuilder,

packages/discord.js/typings/index.test-d.ts

@@ -1367,7 +1367,16 @@ new SelectMenuBuilder({
 
 new ButtonBuilder({
   style: ButtonStyle.Danger,
-});
+})
+  .setEmoji('<a:foo:123>')
+  .setEmoji('<:foo:123>')
+  .setEmoji('foobar:123')
+  .setEmoji('😏')
+  .setEmoji({
+    name: 'test',
+    id: '123',
+    animated: false,
+  });
 
 // @ts-expect-error
 new EmbedBuilder().setColor('abc');