From 42fa11f144e6913a3a225372fbee2c0beb83da54 Mon Sep 17 00:00:00 2001 From: megatank58 Date: Mon, 6 Jun 2022 06:39:42 +0000 Subject: [PATCH 1/5] feat(slashcommands): add JSON objects --- guide/creating-your-bot/command-handling.md | 16 ++ guide/creating-your-bot/creating-commands.md | 12 ++ guide/interactions/slash-commands.md | 161 +++++++++++++++++++ 3 files changed, 189 insertions(+) diff --git a/guide/creating-your-bot/command-handling.md b/guide/creating-your-bot/command-handling.md index d2b38ac4a..6e9f1f1b5 100644 --- a/guide/creating-your-bot/command-handling.md +++ b/guide/creating-your-bot/command-handling.md @@ -126,6 +126,22 @@ module.exports = { }; ``` +::: tip +The slash command builder is a utility class to build slash commands. You can also construct the objects directly without using the builder. + +```js {2-5} +module.exports = { + data: { + name: 'ping', + description: 'Replies with Pong!', + }, + async execute(interaction) { + await interaction.reply('Pong!'); + }, +}; +``` +::: + You can go ahead and do the same for the rest of your commands, putting their respective blocks of code inside the `execute()` function. ::: tip diff --git a/guide/creating-your-bot/creating-commands.md b/guide/creating-your-bot/creating-commands.md index bacb05717..6af05d488 100644 --- a/guide/creating-your-bot/creating-commands.md +++ b/guide/creating-your-bot/creating-commands.md @@ -86,6 +86,18 @@ rest.put(Routes.applicationGuildCommands(clientId, guildId), { body: commands }) ::: :::: +::: tip +The slash command builder is a utility class to build slash commands. You can also construct the objects directly without using the builder. + +```js +const commands = [ + { name: 'ping', description: 'Replies with pong!' }, + { name: 'server', description: 'Replies with server info!' }, + { name: 'user', description: 'Replies with user info!' }, +]; +``` +::: + Once you fill in these values, run `node deploy-commands.js` in your project directory to register your commands to a single guild. It's also possible to [register commands globally](/interactions/slash-commands.md#global-commands). ::: tip diff --git a/guide/interactions/slash-commands.md b/guide/interactions/slash-commands.md index 503ab36de..e08afe766 100644 --- a/guide/interactions/slash-commands.md +++ b/guide/interactions/slash-commands.md @@ -99,6 +99,9 @@ await rest.put( Application commands can have `options`. Think of these options as arguments to a function. You can specify them as shown below: +:::: code-group + +::: code-group-item SlashCommandBuilder ```js {6-9} const { SlashCommandBuilder } = require('@discordjs/builders'); @@ -110,6 +113,27 @@ const data = new SlashCommandBuilder() .setDescription('The input to echo back') .setRequired(true)); ``` +::: + +::: code-group-item JSON +```js +const data = { + name: 'echo', + description: 'Replies with your input!', + options: [ + { + name: 'input', + description: 'The input to echo back', + type: 'STRING', + required: true, + }, + ], +}; + +``` +::: + +:::: Notice how `.setRequired(true)` is specified within the options builder. Setting this will prevent the user from sending the command without specifying a value for this option! @@ -144,6 +168,9 @@ If you specify `choices` for an option, they'll be the **only** valid values use Specify them by using the `addChoice()` method from the slash command builder: +:::: code-group + +::: code-group-item SlashCommandBuilder ```js {10-12} const { SlashCommandBuilder } = require('@discordjs/builders'); @@ -158,11 +185,49 @@ const data = new SlashCommandBuilder() .addChoice('Meme', 'gif_meme') .addChoice('Movie', 'gif_movie')); ``` +::: + +::: code-group-item JSON +```js +const data = { + name: 'gif', + description: 'Sends a random gif!', + options: [ + { + name: 'category', + description: 'The gif category', + type: 'STRING', + required: true, + choices: [ + { + name: 'Funny', + value: 'gif_funny', + }, + { + name: 'Meme', + value: 'gif_meme', + }, + { + name: 'Movie', + value: 'gif_movie', + }, + ], + }, + ], +}; + +``` +::: + +:::: ### Subcommands Subcommands are available with the `.addSubcommand()` method: +:::: code-group + +::: code-group-item SlashCommandBuilder ```js {6-14} const { SlashCommandBuilder } = require('@discordjs/builders'); @@ -179,6 +244,38 @@ const data = new SlashCommandBuilder() .setName('server') .setDescription('Info about the server')); ``` +::: + +::: code-group-item JSON +```js +const data = { + name: 'info', + description: 'Get info about a user or a server!', + options: [ + { + name: 'user', + description: 'Info about a user', + type: 'SUBCOMMAND', + options: [ + { + name: 'target', + description: 'The user', + type: 'USER', + }, + ], + }, + { + name: 'server', + description: 'Info about the server', + type: 'SUBCOMMAND', + }, + ], +}; + +``` +::: + +:::: ## Replying to slash commands @@ -393,6 +490,10 @@ Interaction responses can use masked links (e.g. `[text](http://site.com)`) and In this section, we'll cover how to access the values of a command's options. Let's assume you have a command that contains the following options: +:::: code-group + +::: code-group-item SlashCommandBuilder + ```js {6-14} const { SlashCommandBuilder } = require('@discordjs/builders'); @@ -409,6 +510,66 @@ const data = new SlashCommandBuilder() .addNumberOption(option => option.setName('num').setDescription('Enter a number')) .addAttachmentOption(option => option.setName('attachment').setDescription('Attach something')); ``` +::: + +::: code-group-item JSON +```js +const data = { + name: 'ping', + description: 'Replies with Pong!', + options: [ + { + name: 'input', + description: 'Enter a string', + type: 'STRING', + }, + { + name: 'int', + description: 'Enter an integer', + type: 'INTEGER', + }, + { + name: 'choice', + description: 'Select a boolean', + type: 'BOOLEAN', + }, + { + name: 'target', + description: 'Select a user', + type: 'USER', + }, + { + name: 'destination', + description: 'Select a channel', + type: 'CHANNEL', + }, + { + name: 'muted', + description: 'Select a role', + type: 'ROLE', + }, + { + name: 'mentionable', + description: 'Mention something!', + type: 'MENTIONABLE', + }, + { + name: 'num', + description: 'Enter a number', + type: 'NUMBER', + }, + { + name: 'attachment', + description: 'Attach something', + type: 'ATTACHMENT', + }, + ], +}; + +``` +::: + +:::: You can `get()` these options from the `CommandInteractionOptionResolver` as shown below: From eaf0350ed8f248a479f3a9aab8bf680355a4ad09 Mon Sep 17 00:00:00 2001 From: megatank58 Date: Mon, 6 Jun 2022 12:43:01 +0530 Subject: [PATCH 2/5] fix: use code-group in place of TIP --- guide/creating-your-bot/command-handling.md | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/guide/creating-your-bot/command-handling.md b/guide/creating-your-bot/command-handling.md index 6e9f1f1b5..4c814a707 100644 --- a/guide/creating-your-bot/command-handling.md +++ b/guide/creating-your-bot/command-handling.md @@ -113,6 +113,8 @@ pnpm add @discordjs/builders Next, create a `commands/ping.js` file for your ping command: +:::: code-group +::: code-group-item SlashCommandBuilder ```js const { SlashCommandBuilder } = require('@discordjs/builders'); @@ -125,10 +127,9 @@ module.exports = { }, }; ``` +::: -::: tip -The slash command builder is a utility class to build slash commands. You can also construct the objects directly without using the builder. - +::: code-group-item JSON ```js {2-5} module.exports = { data: { @@ -142,6 +143,8 @@ module.exports = { ``` ::: +:::: + You can go ahead and do the same for the rest of your commands, putting their respective blocks of code inside the `execute()` function. ::: tip From d188f3dd4abf2adb57ea9010c3343a235e5c839c Mon Sep 17 00:00:00 2001 From: megatank58 Date: Tue, 7 Jun 2022 05:42:03 +0000 Subject: [PATCH 3/5] chore: use numbers instead of strings --- guide/interactions/slash-commands.md | 27 ++++++++++++++------------- 1 file changed, 14 insertions(+), 13 deletions(-) diff --git a/guide/interactions/slash-commands.md b/guide/interactions/slash-commands.md index 4d7461cde..d2fbbb878 100644 --- a/guide/interactions/slash-commands.md +++ b/guide/interactions/slash-commands.md @@ -116,6 +116,7 @@ const data = new SlashCommandBuilder() ::: ::: code-group-item JSON + ```js const data = { name: 'echo', @@ -124,7 +125,7 @@ const data = { { name: 'input', description: 'The input to echo back', - type: 'STRING', + type: 3, required: true, }, ], @@ -198,7 +199,7 @@ const data = { { name: 'category', description: 'The gif category', - type: 'STRING', + type: 3, required: true, choices: [ { @@ -257,7 +258,7 @@ const data = { { name: 'user', description: 'Info about a user', - type: 'SUBCOMMAND', + type: 1, options: [ { name: 'target', @@ -269,7 +270,7 @@ const data = { { name: 'server', description: 'Info about the server', - type: 'SUBCOMMAND', + type: 1, }, ], }; @@ -523,47 +524,47 @@ const data = { { name: 'input', description: 'Enter a string', - type: 'STRING', + type: 3, }, { name: 'int', description: 'Enter an integer', - type: 'INTEGER', + type: 4, }, { name: 'choice', description: 'Select a boolean', - type: 'BOOLEAN', + type: 5, }, { name: 'target', description: 'Select a user', - type: 'USER', + type: 6, }, { name: 'destination', description: 'Select a channel', - type: 'CHANNEL', + type: 7, }, { name: 'muted', description: 'Select a role', - type: 'ROLE', + type: 8, }, { name: 'mentionable', description: 'Mention something!', - type: 'MENTIONABLE', + type: 9, }, { name: 'num', description: 'Enter a number', - type: 'NUMBER', + type: 10, }, { name: 'attachment', description: 'Attach something', - type: 'ATTACHMENT', + type: 11, }, ], }; From 7824d91a5b76b3c03685490d9e5f644f6ec9e1a1 Mon Sep 17 00:00:00 2001 From: megatank58 Date: Tue, 14 Jun 2022 14:25:30 +0530 Subject: [PATCH 4/5] feat: use enums --- guide/interactions/slash-commands.md | 34 +++++++++++++++++----------- 1 file changed, 21 insertions(+), 13 deletions(-) diff --git a/guide/interactions/slash-commands.md b/guide/interactions/slash-commands.md index d2fbbb878..943b05115 100644 --- a/guide/interactions/slash-commands.md +++ b/guide/interactions/slash-commands.md @@ -118,6 +118,8 @@ const data = new SlashCommandBuilder() ::: code-group-item JSON ```js +const { ApplicationCommandOptionType } = require('discord-api-types/v9'); + const data = { name: 'echo', description: 'Replies with your input!', @@ -125,7 +127,7 @@ const data = { { name: 'input', description: 'The input to echo back', - type: 3, + type: ApplicationCommandOptionType.String, required: true, }, ], @@ -192,6 +194,8 @@ const data = new SlashCommandBuilder() ::: code-group-item JSON ```js +const { ApplicationCommandOptionType } = require('discord-api-types/v9'); + const data = { name: 'gif', description: 'Sends a random gif!', @@ -199,7 +203,7 @@ const data = { { name: 'category', description: 'The gif category', - type: 3, + type: ApplicationCommandOptionType.String, required: true, choices: [ { @@ -251,6 +255,8 @@ const data = new SlashCommandBuilder() ::: code-group-item JSON ```js +const { ApplicationCommandOptionType } = require('discord-api-types/v9'); + const data = { name: 'info', description: 'Get info about a user or a server!', @@ -258,7 +264,7 @@ const data = { { name: 'user', description: 'Info about a user', - type: 1, + type: ApplicationCommandOptionType.Subcommand, options: [ { name: 'target', @@ -270,7 +276,7 @@ const data = { { name: 'server', description: 'Info about the server', - type: 1, + type: ApplicationCommandOptionType.Subcommand, }, ], }; @@ -517,6 +523,8 @@ const data = new SlashCommandBuilder() ::: code-group-item JSON ```js +const { ApplicationCommandOptionType } = require('discord-api-types/v9'); + const data = { name: 'ping', description: 'Replies with Pong!', @@ -524,47 +532,47 @@ const data = { { name: 'input', description: 'Enter a string', - type: 3, + type: ApplicationCommandOptionType.String, }, { name: 'int', description: 'Enter an integer', - type: 4, + type: ApplicationCommandOptionType.Integer, }, { name: 'choice', description: 'Select a boolean', - type: 5, + type: ApplicationCommandOptionType.Boolean, }, { name: 'target', description: 'Select a user', - type: 6, + type: ApplicationCommandOptionType.User, }, { name: 'destination', description: 'Select a channel', - type: 7, + type: ApplicationCommandOptionType.Channel, }, { name: 'muted', description: 'Select a role', - type: 8, + type: ApplicationCommandOptionType.Role, }, { name: 'mentionable', description: 'Mention something!', - type: 9, + type: ApplicationCommandOptionType.Mentionable, }, { name: 'num', description: 'Enter a number', - type: 10, + type: ApplicationCommandOptionType.Number, }, { name: 'attachment', description: 'Attach something', - type: 11, + type: ApplicationCommandOptionType.Attachment, }, ], }; From ed82de85450c57e4e329aca232713924387859b5 Mon Sep 17 00:00:00 2001 From: megatank58 Date: Tue, 14 Jun 2022 16:00:29 +0530 Subject: [PATCH 5/5] Update guide/interactions/slash-commands.md Co-authored-by: Almeida --- guide/interactions/slash-commands.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/guide/interactions/slash-commands.md b/guide/interactions/slash-commands.md index 943b05115..060dd8f13 100644 --- a/guide/interactions/slash-commands.md +++ b/guide/interactions/slash-commands.md @@ -269,7 +269,7 @@ const data = { { name: 'target', description: 'The user', - type: 'USER', + type: ApplicationCommandOptionType.User, }, ], },