feat(slashcommands): add JSON objects along with builders

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,6 +127,23 @@ module.exports = {
 	},
 };
 ```
+:::
+
+::: code-group-item JSON
+```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.
 

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

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,28 @@ 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: 3,
+			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 +169,9 @@ If you specify `choices` for an option, they'll be the **only** valid values use
 
 Specify them by using the `addChoices()` method from the slash command builder:
 
+:::: code-group
+
+::: code-group-item SlashCommandBuilder
 ```js {10-12}
 const { SlashCommandBuilder } = require('@discordjs/builders');
 
@@ -160,11 +188,49 @@ const data = new SlashCommandBuilder()
 				{ name: 'Movie', value: 'gif_movie' },
 			));
 ```
+:::
+
+::: code-group-item JSON
+```js
+const data = {
+	name: 'gif',
+	description: 'Sends a random gif!',
+	options: [
+		{
+			name: 'category',
+			description: 'The gif category',
+			type: 3,
+			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');
 
@@ -181,6 +247,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: 1,
+			options: [
+				{
+					name: 'target',
+					description: 'The user',
+					type: 'USER',
+				},
+			],
+		},
+		{
+			name: 'server',
+			description: 'Info about the server',
+			type: 1,
+		},
+	],
+};
+
+```
+:::
+
+::::
 
 ## Replying to slash commands
 
@@ -395,6 +493,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');
 
@@ -411,6 +513,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: 3,
+		},
+		{
+			name: 'int',
+			description: 'Enter an integer',
+			type: 4,
+		},
+		{
+			name: 'choice',
+			description: 'Select a boolean',
+			type: 5,
+		},
+		{
+			name: 'target',
+			description: 'Select a user',
+			type: 6,
+		},
+		{
+			name: 'destination',
+			description: 'Select a channel',
+			type: 7,
+		},
+		{
+			name: 'muted',
+			description: 'Select a role',
+			type: 8,
+		},
+		{
+			name: 'mentionable',
+			description: 'Mention something!',
+			type: 9,
+		},
+		{
+			name: 'num',
+			description: 'Enter a number',
+			type: 10,
+		},
+		{
+			name: 'attachment',
+			description: 'Attach something',
+			type: 11,
+		},
+	],
+};
+
+```
+:::
+
+::::
 
 You can `get()` these options from the `CommandInteractionOptionResolver` as shown below: