diff --git a/apps/guide/CONTRIBUTING.md b/apps/guide/CONTRIBUTING.md new file mode 100644 index 000000000..5fedc15a6 --- /dev/null +++ b/apps/guide/CONTRIBUTING.md @@ -0,0 +1,135 @@ +# Contributing + +## Local development + +Clone the code base into a local folder, `cd` into it, and install the dependencies: + +```bash +git clone https://github.com/discordjs/discord.js.git +cd discord.js/apps/guide +pnpm --filter guide install +``` + +You can and should use `pnpm dev` to check your changes out locally before pushing them for review. + +## Adding pages + +To add a new page to the guide, create a `filename.mdx` file in the folder of your choice located under `/content`. Fumadocs will pick it up and route appropriately. To list the section in the sidebar, make sure it is listed in the `meta.json` file of the directory you placed it in under the `pages` key. The order in the `pages` array determines the order pages have in the sidebar. + +## Framework and components + +The guide uses the fumadocs documention framework for Next.js. You can find examples as well as documentation for the components you can use at . + +## General guidelines + +Please try your best to follow the guidelines below. They help to make the guide appear as a coherent piece of work rather than a collection of disconnected pieces with different writing styles. + +### Spelling, grammar, and wording + +Improper grammar, strange wording, and incorrect spelling are all things that may lead to confusion when a user reads a guide page. It's important to attempt to keep the content clear and consistent. Re-read what you've written and place yourself in the shoes of someone else for a moment to see if you can fully understand everything without any confusion. + +Don't worry if you aren't super confident with your grammar/spelling/wording skills; all pull requests get thoroughly reviewed, and comments are left in areas that need to be fixed or could be done better/differently. + +#### "You"/"your" instead of "we"/"our" + +When explaining parts of the guide, we recommend to use "you" instead of "we" when referring to the read or things they can do: + +```diff +- To check our Node version, we can run `node -v`. ++ To check your Node version, you can run `node -v`. + +- To delete a message, we can do: `message.delete();` ++ To delete a message, you can do: `message.delete();` + +- Our final code should look like this: ... ++ Your final code should look like this: ... + +- Before we can actually do this, we need to update our configuration file. ++ Before you can actually do this, you need to update your configuration file. +``` + +#### "We" instead of "I" + +When referring to yourself, use "we" (as in "the writers of this guide") instead of "I". For example: + +```diff +- If you don't already have this package installed, I would highly recommend doing so. ++ If you don't already have this package installed, we would highly recommend doing so. +# Valid alternative: ++ If you don't already have this package installed, it's highly recommended that you do so. + +- In this section, I'll be covering how to do that really cool thing everyone's asking about. ++ In this section, we'll be covering how to do that really cool thing everyone's asking about. +``` + +#### Inclusive language + +Try to avoid using genered and otherwise non-inclusive language. The following are just examples to give you an idea of what we expect. Don't understand this as a complete list of "banned terms": + +- Use they/them/their instead of gendered pronouns (he/him/his, she/her/hers). +- Avoid using "master" and "slave", you can use "primary" and "replica" or "secondary" instead. +- Avoid gendered terms like "guys", "folks" and "people" work just as well. +- Avoid ableist terms "sanity check", use "confidence check" or "coherence check" instead. +- Avoid talking about "dummy" values, call them "placeholder" or "sample value" instead. + +### Paragraph structure + +Try to keep guide articles formatted nicely and easy to read. If paragraphs get too long, you can usually split them up where they introduce a new concept or facet. Adding a bit of spacing can make the guide easier to digest and follow! Try to avoid run-on sentences with many embedded clauses. + +## Semantic components + +You can find the full documentation for the guide framework at . If you are unsure what to use when, consider looking through the existing guide pages and how they approach things. + +### Callouts + +You can use [Callouts](https://fumadocs.dev/docs/ui/markdown#callouts) to describe additional context that doesn't fully fit into the flow of the paragraph or requires special attention. Prefer to MDX syntax `` over Remark `:::` admonitions. + +### Code + +Fumadocs integrates [Shiki transformers](https://fumadocs.dev/docs/ui/markdown#shiki-transformers) for visual highlighting through the use of [Rhype Code](https://fumadocs.dev/docs/headless/mdx/rehype-code). + +When describing changes or additions to code, prefer using the appropriate language (`js` in most cases for this guide) with diff transformers over `diff` highlights: + +```js +console.log('Hello'); // [!code --] +console.log('Hello World'); // [!code ++] +``` + +You can put the transfomer syntax above the respective line and declare ranges instead of repeating formatting intsructions. You can also combine different transformers on the same line. Note that word highlights highlight the word across the code block by default, but do respect ranges. + +```js +console.log('Hello'); // [!code --:2] +console.log('World'); +// [!code ++] +console.log('Hello World'); +``` + +```js +// ... +// [!code focus:2] [!code word:log:1] +console.log('Hello World!'); // this instance of "log" is highlighted +console.log('Foobar'); // this one is not +// ... +``` + +When introducing new functions in a paragraph, consider highlighting them in the following code snippet to draw additional attention to their use. For example, if you just described the `log` function: + +```js +console.log('Hello World'); // [!code word:log] +``` + +Make sure to denote the file names or paths if you describe progress in a specific code sample. When descrbing multiple files, use [tab groups](https://fumadocs.dev/docs/ui/markdown#tab-groups). + +````md +```json title="package.json" tab="Configuration" +{ ... } +``` + +```js tab="Usage" +// code showing how to use what is being configued +``` +```` + +### Directory Structure + +You can use the [Files](https://fumadocs.dev/docs/ui/components/files) component to visualize the expected directory structure, if it is relevant to the approach you describe. diff --git a/apps/guide/README.md b/apps/guide/README.md index f0ccd490a..49be19483 100644 --- a/apps/guide/README.md +++ b/apps/guide/README.md @@ -19,17 +19,17 @@ - [Website][website] ([source][website-source]) - [Documentation][documentation] - [Guide][guide] ([source][guide-source]) - Also see the v13 to v14 [Update Guide][guide-update], which includes updated and removed items from the library. - [discord.js Discord server][discord] -- [Discord API Discord server][discord-api] - [GitHub][source] -- [Related libraries][related-libs] ## Contributing -Before creating an issue, please ensure that it hasn't already been reported/suggested, and double-check the -[documentation][documentation]. -See [the contribution guide][contributing] if you'd like to submit a PR. +Before creating an issue, please ensure that it hasn't already been reported/suggested, and double-check the existing guide. +See [the contribution guide][./contributing] if you'd like to submit a PR. + +## Local Development + +To install and run just the guide portion of the repository for development, you can install dependencies with `pnpm --filter guide install` and serve a development version of the guide on localhost with `pnpm dev`. ## Help @@ -38,11 +38,9 @@ If you don't understand something in the documentation, you are experiencing pro [website]: https://discord.js.org [website-source]: https://github.com/discordjs/discord.js/tree/main/apps/website [documentation]: https://discord.js.org/docs -[guide]: https://discordjs.guide/ -[guide-source]: https://github.com/discordjs/guide +[guide]: https://discord.js/guide +[guide-source]: https://github.com/discordjs/discord.js/tree/main/apps/guide [guide-update]: https://discordjs.guide/additional-info/changes-in-v14.html [discord]: https://discord.gg/djs -[discord-api]: https://discord.gg/discord-api -[source]: https://github.com/discordjs/discord.js/tree/main/apps/website -[related-libs]: https://discord.com/developers/docs/topics/community-resources#libraries +[source]: https://github.com/discordjs/discord.js/tree/main/apps/guide [contributing]: https://github.com/discordjs/discord.js/blob/main/.github/CONTRIBUTING.md diff --git a/apps/guide/content/docs/index.mdx b/apps/guide/content/docs/index.mdx deleted file mode 100644 index 671152ab7..000000000 --- a/apps/guide/content/docs/index.mdx +++ /dev/null @@ -1,7 +0,0 @@ ---- -title: Hello World ---- - -## Introduction - -I love Anime. diff --git a/apps/guide/content/docs/legacy/additional-features/cooldowns.mdx b/apps/guide/content/docs/legacy/additional-features/cooldowns.mdx new file mode 100644 index 000000000..4a827bd4e --- /dev/null +++ b/apps/guide/content/docs/legacy/additional-features/cooldowns.mdx @@ -0,0 +1,103 @@ +--- +title: Cooldowns +--- + +Spam is something you generally want to avoid, especially if one of your commands require calls to other APIs or takes a bit of time to build/send. + + + This section assumes you followed the [Command Handling](../app-creation/handling-commands) part of the guide. + + +First, add a cooldown property to your command. This will determine how long the user would have to wait (in seconds) before using the command again. + +```js title="commands/utility/ping.js" +const { SlashCommandBuilder } = require('discord.js'); + +module.exports = { + cooldown: 5, // [!code ++] + data: new SlashCommandBuilder().setName('ping').setDescription('Replies with Pong!'), + async execute(interaction) { + // ... + }, +}; +``` + +In your main file, initialize a [Collection](../additional-info/collections) to store cooldowns of commands: + +```js +client.cooldowns = new Collection(); +``` + +The key will be the command names, and the values will be Collections associating the user's id (key) to the last time (value) this user used this command. Overall the logical path to get a user's last usage of a command will be `cooldowns > command > user > timestamp`. + +In your `InteractionCreate` event handler, add the following code: + +```js title="index.js / interactionCreate.js (if you followed the event handler section)" +// ... +// [!code ++:14] +const { cooldowns } = interaction.client; + +if (!cooldowns.has(command.data.name)) { + cooldowns.set(command.data.name, new Collection()); +} + +const now = Date.now(); +const timestamps = cooldowns.get(command.data.name); +const defaultCooldownDuration = 3; +const cooldownAmount = (command.cooldown ?? defaultCooldownDuration) * 1_000; + +if (timestamps.has(interaction.user.id)) { + // ... +} +``` + +You check if the `cooldowns` Collection already has an entry for the command being used. If this is not the case, you can add a new entry, where the value is initialized as an empty Collection. Next, create the following variables: + +1. `now`: The current timestamp. +2. `timestamps`: A reference to the Collection of user ids and timestamp key/value pairs for the triggered command. +3. `cooldownAmount`: The specified cooldown for the command, converted to milliseconds for straightforward calculation. If none is specified, this defaults to three seconds. + +If the user has already used this command in this session, get the timestamp, calculate the expiration time, and inform the user of the amount of time they need to wait before using this command again. Note the use of the `return` statement here, causing the code below this snippet to execute only if the user has not used this command in this session or the wait has already expired. + +Continuing with your current setup, this is the complete `if` statement: + +```js title="index.js / interactionCreate.js (if you followed the event handler section)" +const defaultCooldownDuration = 3; +const cooldownAmount = (command.cooldown ?? defaultCooldownDuration) * 1_000; + +// [!code focus:13] +if (timestamps.has(interaction.user.id)) { + // ... // [!code --] + // [!code ++:9] + const expirationTime = timestamps.get(interaction.user.id) + cooldownAmount; + + if (now < expirationTime) { + const expiredTimestamp = Math.round(expirationTime / 1_000); + return interaction.reply({ + content: `Please wait, you are on a cooldown for \`${command.data.name}\`. You can use it again .`, + flags: MessageFlags.Ephemeral, + }); + } +} +``` + +Since the `timestamps` Collection has the user's id as the key, you can use the `get()` method on it to get the value and sum it up with the `cooldownAmount` variable to get the correct expiration timestamp and further check to see if it's expired or not. + +The previous user check serves as a precaution in case the user leaves the guild. You can now use the `setTimeout` method, which will allow you to execute a function after a specified amount of time and remove the timeout. + +```js +// [!code focus] +if (timestamps.has(interaction.user.id)) { + const expiredTimestamp = Math.round(expirationTime / 1_000); + return interaction.reply({ + content: `Please wait, you are on a cooldown for \`${command.data.name}\`. You can use it again .`, + flags: MessageFlags.Ephemeral, + }); +} // [!code focus] + +// [!code ++:2] [!code focus:2] +timestamps.set(interaction.user.id, now); +setTimeout(() => timestamps.delete(interaction.user.id), cooldownAmount); +``` + +This line causes the entry for the user under the specified command to be deleted after the command's cooldown time has expired for them. diff --git a/apps/guide/content/docs/legacy/additional-features/reloading-commands.mdx b/apps/guide/content/docs/legacy/additional-features/reloading-commands.mdx new file mode 100644 index 000000000..23b906b30 --- /dev/null +++ b/apps/guide/content/docs/legacy/additional-features/reloading-commands.mdx @@ -0,0 +1,74 @@ +--- +title: Reloading Commands +--- + +When writing your commands, you may find it tedious to restart your bot every time for testing the smallest changes. With a command handler, you can eliminate this issue and reload your commands while your bot is running. + + + ESM does not support require and clearing import cache. You can use [hot-esm](https://www.npmjs.com/package/hot-esm) + to import files without cache. Windows support is experimental per [this + issue](https://github.com/vinsonchuong/hot-esm/issues/33). + + + + This section assumes you followed the [Command Handling](../app-creation/handling-commands) part of the guide. + + +```js title="commands/utility/reload.js" +const { SlashCommandBuilder } = require('discord.js'); + +module.exports = { + data: new SlashCommandBuilder() + .setName('reload') + .setDescription('Reloads a command.') + .addStringOption((option) => option.setName('command').setDescription('The command to reload.').setRequired(true)), + async execute(interaction) { + // ... + }, +}; +``` + +First off, you need to check if the command you want to reload exists. You can do this check similarly to getting a command. + +```js +module.exports = { + // ... + // [!code focus:10] + async execute(interaction) { + // ... // [!code --] + // [!code ++:6] + const commandName = interaction.options.getString('command', true).toLowerCase(); + const command = interaction.client.commands.get(commandName); + + if (!command) { + return interaction.reply(`There is no command with name \`${commandName}\`!`); + } + }, +}; +``` + + + The reload command ideally should not be used by every user. You should deploy it as a guild command in a private + guild. + + +To build the correct file path, you will need the file name. You can use `command.data.name` for doing that. + +In theory, all there is to do is delete the previous command from `client.commands` and require the file again. In practice, you cannot do this easily as `require()` caches the file. If you were to require it again, you would load the previously cached file without any changes. You first need to delete the file from `require.cache`, and only then should you require and set the command file to `client.commands`: + +```js +delete require.cache[require.resolve(`./${command.data.name}.js`)]; + +try { + const newCommand = require(`./${command.data.name}.js`); + interaction.client.commands.set(newCommand.data.name, newCommand); + await interaction.reply(`Command \`${newCommand.data.name}\` was reloaded!`); +} catch (error) { + console.error(error); + await interaction.reply( + `There was an error while reloading a command \`${command.data.name}\`:\n\`${error.message}\``, + ); +} +``` + +The snippet above uses a `try...catch` block to load the command file and add it to `client.commands`. In case of an error, it will log the full error to the console and notify the user about it with the error's message component `error.message`. Note that you never actually delete the command from the commands Collection and instead overwrite it. This behavior prevents you from deleting a command and ending up with no command at all after a failed `require()` call, as each use of the reload command checks that Collection again. diff --git a/apps/guide/content/docs/legacy/additional-info/async-await.mdx b/apps/guide/content/docs/legacy/additional-info/async-await.mdx new file mode 100644 index 000000000..73c1c605f --- /dev/null +++ b/apps/guide/content/docs/legacy/additional-info/async-await.mdx @@ -0,0 +1,219 @@ +--- +title: Understanding async/await +--- + +If you aren't very familiar with ECMAScript 2017, you may not know about async/await. It's a useful way to handle Promises in a hoisted manner. It's also slightly faster and increases overall readability. + +## How do Promises work? + +Before we can get into async/await, you should know what Promises are and how they work because async/await is just a way to handle Promises. If you know what Promises are and how to deal with them, you can skip this part. + +Promises are a way to handle asynchronous tasks in JavaScript; they are the newer alternative to callbacks. A Promise has many similarities to a progress bar; they represent an unfinished and ongoing process. An excellent example of this is a request to a server (e.g., discord.js sends requests to Discord's API). + +A Promise can have three states; pending, resolved, and rejected. + +- The **pending** state means that the Promise still is ongoing and neither resolved nor rejected. +- The **resolved** state means that the Promise is done and executed without any errors. +- The **rejected** state means that the Promise encountered an error and could not execute correctly. + +One important thing to know is that a Promise can only have one state simultaneously; it can never be pending and resolved, rejected and resolved, or pending and rejected. You may be asking, "How would that look in code?". Here is a small example: + + + This example uses ES6 code. If you do not know what that is, you should read up on that [here](./es6-syntax). + + +```js +function deleteMessages(amount) { + // [!code word:Promise] + return new Promise((resolve, reject) => { + if (amount > 10) return reject(new Error("You can't delete more than 10 Messages at a time.")); + setTimeout(() => resolve('Deleted 10 messages.'), 2_000); + }); +} + +deleteMessages(5) + // [!code word:then] + .then((value) => { + // `deleteMessages` is complete and has not encountered any errors + // the resolved value will be the string "Deleted 10 messages" + }) + // [!code word:catch] + .catch((error) => { + // `deleteMessages` encountered an error + // the error will be an Error Object + }); +``` + +In this scenario, the `deleteMessages` function returns a Promise. The `.then()` method will trigger if the Promise resolves, and the `.catch()` method if the Promise rejects. In the `deleteMessages` function, the Promise is resolved after 2 seconds with the string "Deleted 10 messages.", so the `.catch()` method will never be executed. You can also pass the `.catch()` function as the second parameter of `.then()`. + +## How to implement async/await + +### Theory + +The following information is essential to know before working with async/await. You can only use the `await` keyword inside a function declared as `async` (you put the `async` keyword before the `function` keyword or before the parameters when using a callback function). + +A simple example would be: + +```js +// [!code word:async] +async function declaredAsAsync() { + // ... +} +``` + +or + +```js +// [!code word:async] +const declaredAsAsync = async () => { + // ... +}; +``` + +You can use that as well if you use the arrow function as an event listener. + +```js +client.on('event', async (first, last) => { + // ... +}); +``` + +An important thing to know is that a function declared as `async` will always return a Promise. In addition to this, if you return something, the Promise will resolve with that value, and if you throw an error, it will reject the Promise with that error. + +### Execution with discord.js code + +Now that you know how Promises work and what they are used for, let's look at an example that handles multiple Promises. Let's say you want to react with letters (regional indicators) in a specific order. For this example, here's a basic template for a discord.js bot with some ES6 adjustments. + +```js title="promise-example.js" lineNumbers +const { Client, Events, GatewayIntentBits } = require('discord.js'); + +const client = new Client({ intents: [GatewayIntentBits.Guilds] }); + +client.once(Events.ClientReady, () => { + console.log('I am ready!'); +}); + +client.on(Events.InteractionCreate, (interaction) => { + if (!interaction.isChatInputCommand()) return; + + if (interaction.commandName === 'react') { + // ... + } +}); + +client.login('your-token-goes-here'); +``` + +If you don't know how Node.js asynchronous execution works, you would probably try something like this: + +```js title="promise-example.js" lineNumbers=9 +client.on(Events.InteractionCreate, (interaction) => { + // ... + // [!code focus:7] + if (commandName === 'react') { + const response = interaction.reply({ content: 'Reacting!', withResponse: true }); // [!code ++:5] + const { message } = response.resource; + message.react('🇦'); + message.react('🇧'); + message.react('🇨'); + } +}); +``` + +But since all of these methods are started at the same time, it would just be a race to which server request finished first, so there would be no guarantee that it would react at all (if the message isn't fetched) or in the order you wanted it to. In order to make sure it reacts after the message is sent and in order (a, b, c), you'd need to use the `.then()` callback from the Promises that these methods return. The code would look like this: + +```js title="promise-example.js" lineNumbers=9 +client.on(Events.InteractionCreate, (interaction) => { + // ... + if (commandName === 'react') { + interaction.reply({ content: 'Reacting!', withResponse: true }).then((response) => { + const { message } = response.resource; + message.react('🇦'); // [!code --:3] + message.react('🇧'); + message.react('🇨'); + message // [!code ++:7] + .react('🇦') + .then(() => message.react('🇧')) + .then(() => message.react('🇨')) + .catch((error) => { + // handle failure of any Promise rejection inside here + }); + }); + } +}); +``` + +In this piece of code, the Promises are [chain resolved](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/then#Chaining) with each other, and if one of the Promises gets rejected, the function passed to `.catch()` gets called. Here's the same code but with async/await: + +```js title="promise-example.js" lineNumbers=9 +client.on(Events.InteractionCreate, async (interaction) => { + // ... + if (commandName === 'react') { + const response = await interaction.reply({ content: 'Reacting!', withResponse: true }); + const { message } = response.resource; + message.react('🇦'); // [!code --:3] + message.react('🇧'); + message.react('🇨'); + await message.react('🇦'); // [!code ++:3] + await message.react('🇧'); + await message.react('🇨'); + } +}); +``` + +It's mostly the same code, but how would you catch Promise rejections now since `.catch()` isn't there anymore? That is also a useful feature with async/await; the error will be thrown if you await it so that you can wrap the awaited Promises inside a try/catch, and you're good to go. + +```js title="promise-example.js" lineNumbers=9 +client.on(Events.InteractionCreate, async (interaction) => { + if (commandName === 'react') { + // [!code ++] + try { + const response = await interaction.reply({ content: 'Reacting!', withResponse: true }); + const { message } = response.resource; + await message.react('🇦'); + await message.react('🇧'); + await message.react('🇨'); + // [!code ++:3] + } catch (error) { + // handle failure of any Promise rejection inside here + } + } +}); +``` + +This code looks clean and is also easy to read. + +So you may be asking, "How would I get the value the Promise resolved with?". + +Let's look at an example where you want to delete a sent reply. + +```js title="promise-example.js" +client.on(Events.InteractionCreate, (interaction) => { + // ... + if (commandName === 'delete') { + interaction + .reply({ content: 'This message will be deleted.', withResponse: true }) + .then((response) => setTimeout(() => response.resource.message.delete(), 10_000)) // [!code word:response] + .catch((error) => { + // handle error + }); + } +}); +``` + +The return value of a `.reply()` with the `withResponse` option set to `true` is a promise which resolves with `InteractionCallbackResponse`, but how would the same code with async/await look? + +```js title="promise-example.js" +client.on(Events.InteractionCreate, async (interaction) => { + if (commandName === 'delete') { + try { + const response = await interaction.reply({ content: 'This message will be deleted.', withResponse: true }); // [!code word:response] + setTimeout(() => response.resource.message.delete(), 10_000); + } catch (error) { + // handle error + } + } +}); +``` + +With async/await, you can assign the awaited function to a variable representing the returned value. Now you know how you use async/await. diff --git a/apps/guide/content/docs/legacy/additional-info/changes-in-v14.mdx b/apps/guide/content/docs/legacy/additional-info/changes-in-v14.mdx new file mode 100644 index 000000000..2da06b7f2 --- /dev/null +++ b/apps/guide/content/docs/legacy/additional-info/changes-in-v14.mdx @@ -0,0 +1,674 @@ +--- +title: Updating to v14 +--- + +## Before you start + +Make sure you're using the latest LTS version of Node. To check your Node version, use `node -v` in your terminal or command prompt, and if it's not high enough, update it! There are many resources online to help you with this step based on your host system. + +### Various packages are now included in v14 + +If you previously had `@discordjs/builders`, `@discordjs/formatters`, `@discordjs/rest`, or `discord-api-types` manually installed, it's _highly_ recommended that you uninstall the packages to avoid package version conflicts. + +```sh tab="npm" +npm uninstall @discordjs/builders @discordjs/formatters @discordjs/rest discord-api-types +``` + +```sh tab="yarn" +yarn remove @discordjs/builders @discordjs/formatters @discordjs/rest discord-api-types +``` + +```sh tab="pnpm" +pnpm remove @discordjs/builders @discordjs/formatters @discordjs/rest discord-api-types +``` + +## Breaking Changes + +### API version + +discord.js v14 makes the switch to Discord API v10! + +### Common Breakages + +### Enum Values + +Any areas that used to accept a `string` or `number` type for an enum parameter will now only accept exclusively `number`s. + +In addition, the old enums exported by discord.js v13 and lower are replaced with new enums from [discord-api-types](https://discord-api-types.dev/api/discord-api-types-v10). + +#### New enum differences + +Most of the difference between enums from discord.js and discord-api-types can be summarized as so: + +1. Enums are singular, i.e., `ApplicationCommandOptionTypes` -> `ApplicationCommandOptionType` +2. Enums that are prefixed with `Message` no longer have the `Message` prefix, i.e., `MessageButtonStyles` -> `ButtonStyle` +3. Enum values are `PascalCase` rather than `SCREAMING_SNAKE_CASE`, i.e., `.CHAT_INPUT` -> `.ChatInput` + + + You might be inclined to use raw `number`s (most commonly referred to as [magic numbers]()) instead of enum values. This is highly discouraged. Enums provide more readability and are more resistant to changes in the API. Magic numbers can obscure the meaning of your code in many ways, check out this [blog post](https://blog.webdevsimplified.com/2020-02/magic-numbers/) if you want more context on as to why they shouldn't be used. + + +#### Common enum breakages + +Areas like `Client` initialization, JSON slash commands and JSON message components will likely need to be modified to accommodate these changes: + +##### Common Client Initialization Changes + +```js +const { Client, Intents } = require('discord.js'); // [!code --] +const { Client, GatewayIntentBits, Partials } = require('discord.js'); // [!code ++] + +const client = new Client({ intents: [Intents.FLAGS.GUILDS], partials: ['CHANNEL'] }); // [!code --] +const client = new Client({ intents: [GatewayIntentBits.Guilds], partials: [Partials.Channel] }); // [!code ++] +``` + +##### Common Application Command Data changes + +```js +const { ApplicationCommandType, ApplicationCommandOptionType } = require('discord.js'); // [!code ++] + +const command = { + name: 'ping', + type: 'CHAT_INPUT', // [!code --] + type: ApplicationCommandType.ChatInput, // [!code ++] + options: [ + { + name: 'option', + description: 'A sample option', + type: 'STRING', // [!code --] + type: ApplicationCommandOptionType.String, // [!code ++] + }, + ], +}; +``` + +##### Common Button Data changes + +```js +const { ButtonStyle } = require('discord.js'); // [!code ++] + +const button = { + label: 'test', + style: 'PRIMARY', // [!code --] + style: ButtonStyle.Primary, // [!code ++] + customId: '1234', +}; +``` + +### Removal of method-based type guards + +#### Channels + +Some channel type guard methods that narrowed to one channel type have been removed. Instead compare the `type` property against a [ChannelType](https://discord-api-types.dev/api/discord-api-types-v10/enum/ChannelType) enum member to narrow channels. + +```js +const { ChannelType } = require('discord.js'); // [!code ++] + +channel.isText(); // [!code --] +channel.type === ChannelType.GuildText; // [!code ++] + +channel.isVoice(); // [!code --] +channel.type === ChannelType.GuildVoice; // [!code ++] + +channel.isDM(); // [!code --] +channel.type === ChannelType.DM; // [!code ++] +``` + +### Builders + +Builders are no longer returned by the API like they were previously. For example you send the API an `EmbedBuilder` but you receive an `Embed` of the same data from the API. This may affect how your code handles received structures such as components. Refer to [message component changes section](#messagecomponent) for more details. + +Added `disableValidators()` and `enableValidators()` as top-level exports which disable or enable validation (enabled by default). + +### Consolidation of `create()` & `edit()` parameters + +Various `create()` and `edit()` methods on managers and objects have had their parameters consolidated. The changes are below: + +- `Guild#edit()` now takes `reason` in the `data` parameter +- `GuildChannel#edit()` now takes `reason` in the `data` parameter +- `GuildEmoji#edit()` now takes `reason` in the `data` parameter +- `Role#edit()` now takes `reason` in the `data` parameter +- `Sticker#edit()` now takes `reason` in the `data` parameter +- `ThreadChannel#edit()` now takes `reason` in the `data` parameter +- `GuildChannelManager#create()` now takes `name` in the `options` parameter +- `GuildChannelManager#createWebhook()` (and other text-based channels) now takes `channel` and `name` in the `options` parameter +- `GuildChannelManager#edit()` now takes `reason` as a part of `data` +- `GuildEmojiManager#edit()` now takes `reason` as a part of `data` +- `GuildManager#create()` now takes `name` as a part of `options` +- `GuildMemberManager#edit()` now takes `reason` as a part of `data` +- `GuildMember#edit()` now takes `reason` as a part of `data` +- `GuildStickerManager#edit()` now takes `reason` as a part of `data` +- `RoleManager#edit()` now takes `reason` as a part of `options` +- `Webhook#edit()` now takes `reason` as a part of `options` +- `GuildEmojiManager#create()` now takes `attachment` and `name` as a part of `options` +- `GuildStickerManager#create()` now takes `file`, `name`, and `tags` as a part of `options` + +### Activity + +The following properties have been removed as they are not documented by Discord: + +- `Activity#id` +- `Activity#platform` +- `Activity#sessionId` +- `Activity#syncId` + +### Application + +`Application#fetchAssets()` has been removed as it is no longer supported by the API. + +### BitField + +- BitField constituents now have a `BitField` suffix to avoid naming conflicts with the enum names: + +```js +new Permissions(); // [!code --] +new PermissionsBitField(); // [!code ++] + +new MessageFlags(); // [!code --] +new MessageFlagsBitField(); // [!code ++] + +new ThreadMemberFlags(); // [!code --] +new ThreadMemberFlagsBitField(); // [!code ++] + +new UserFlags(); // [!code --] +new UserFlagsBitField(); // [!code ++] + +new SystemChannelFlags(); // [!code --] +new SystemChannelFlagsBitField(); // [!code ++] + +new ApplicationFlags(); // [!code --] +new ApplicationFlagsBitField(); // [!code ++] + +new Intents(); // [!code --] +new IntentsBitField(); // [!code ++] + +new ActivityFlags(); // [!code --] +new ActivityFlagsBitField(); // [!code ++] +``` + +- `#FLAGS` has been renamed to `#Flags` + +### CDN + +The methods that return CDN URLs have changed. Here is an example on a User: + +```js +const url = user.displayAvatarURL({ dynamic: true, format: 'png', size: 1_024 }); // [!code --] +const url = user.displayAvatarURL({ extension: 'png', size: 1_024 }); // [!code ++] +``` + +Dynamic URLs use `ImageURLOptions` and static URLs use `BaseImageURLOptions`. Since dynamic URLs are returned by default, this option has been renamed to `forceStatic` which forces the return of a static URL. Additionally, `format` has been renamed to `extension`. + +### CategoryChannel + +`CategoryChannel#children` is no longer a `Collection` of channels the category contains. It is now a manager (`CategoryChannelChildManager`). This also means `CategoryChannel#createChannel()` has been moved to the `CategoryChannelChildManager`. + +### Channel + +The following type guards have been removed: + +- `Channel#isText()` +- `Channel#isVoice()` +- `Channel#isDirectory()` +- `Channel#isDM()` +- `Channel#isGroupDM()` +- `Channel#isCategory()` +- `Channel#isNews()` + +Refer to [this section](#channels) for more context. + +The base channel class is now `BaseChannel`. + +### Client + +The `restWsBridgeTimeout` client option has been removed. + +### CommandInteractionOptionResolver + +`CommandInteractionOptionResolver#getMember()` no longer has a parameter for `required`. See [this pull request](https://github.com/discordjs/discord.js/pull/7188) for more information. + +### Constants + +- Many constant objects and key arrays are now top-level exports for example: + +```js +const { Constants } = require('discord.js'); // [!code --] +const { Colors } = Constants; // [!code --] +const { Colors } = require('discord.js'); // [!code ++] +``` + +- The refactored constants structures have `PascalCase` member names as opposed to `SCREAMING_SNAKE_CASE` member names. + +- Many of the exported constants structures have been replaced and renamed: + +```js +Opcodes; // [!code --] +GatewayOpcodes; // [!code ++] + +WSEvents; // [!code --] +GatewayDispatchEvents; // [!code ++] + +WSCodes; // [!code --] +GatewayCloseCodes; // [!code ++] + +InviteScopes; // [!code --] +OAuth2Scopes; // [!code ++] +``` + +### Events + +The `message` and `interaction` events are now removed. Use `messageCreate` and `interactionCreate` instead. + +`applicationCommandCreate`, `applicationCommandDelete` and `applicationCommandUpdate` have all been removed. See [this pull request](https://github.com/discordjs/discord.js/pull/6492) for more information. + +The `threadMembersUpdate` event now emits the users who were added, the users who were removed, and the thread respectively. + +### GuildBanManager + +Developers should utilise `deleteMessageSeconds` instead of `days` and `deleteMessageDays`: + +```js +.create('123456789', { + days: 3 // [!code --] + deleteMessageDays: 3 // [!code --] + deleteMessageSeconds: 3 * 24 * 60 * 60 // [!code ++] +}); +``` + +`deleteMessageDays` (introduced with version 14) and `days` are both deprecated and will be removed in the future. + +### Guild + +`Guild#setRolePositions()` and `Guild#setChannelPositions()` have been removed. Use `RoleManager#setPositions()` and `GuildChannelManager#setPositions()` instead respectively. + +`Guild#maximumPresences` no longer has a default value of 25,000. + +`Guild#me` has been moved to `GuildMemberManager#me`. See [this pull request](https://github.com/discordjs/discord.js/pull/7669) for more information. + +### GuildAuditLogs & GuildAuditLogsEntry + +`GuildAuditLogs.build()` has been removed as it has been deemed defunct. There is no alternative. + +The following properties & methods have been moved to the `GuildAuditLogsEntry` class: + +- `GuildAuditLogs.Targets` +- `GuildAuditLogs.actionType()` +- `GuildAuditLogs.targetType()` + +### GuildMember + +`GuildMember#pending` is now nullable to account for partial guild members. See [this issue](https://github.com/discordjs/discord.js/issues/6546) for more information. + +### IntegrationApplication + +`IntegrationApplication#summary` has been removed as it is no longer supported by the API. + +### Interaction + +Whenever an interaction is replied to and one fetches the reply, it could possibly give an `APIMessage` if the guild was not cached. However, interaction replies now always return an `InteractionCallbackResponse` with `withResponse` set to `true`. + +The base interaction class is now `BaseInteraction`. + +### Invite + +`Invite#inviter` is now a getter and resolves structures from the cache. + +### MessageAttachment + +`MessageAttachment` has now been renamed to `AttachmentBuilder`. // [!code --] + +```js +new MessageAttachment(buffer, 'image.png'); // [!code --] +new AttachmentBuilder(buffer, { name: 'image.png' }); // [!code ++] +``` + +### MessageComponent + +- MessageComponents have been renamed as well. They no longer have the `Message` prefix, and now have a `Builder` suffix: + +```js +const button = new MessageButton(); // [!code --] +const button = new ButtonBuilder(); // [!code ++] + +const selectMenu = new MessageSelectMenu(); // [!code --] +const selectMenu = new StringSelectMenuBuilder(); // [!code ++] + +const actionRow = new MessageActionRow(); // [!code --] +const actionRow = new ActionRowBuilder(); // [!code ++] + +const textInput = new TextInputComponent(); // [!code --] +const textInput = new TextInputBuilder(); // [!code ++] +``` + +- Components received from the API are no longer directly mutable. If you wish to mutate a component from the API, use `ComponentBuilder#from`. For example, if you want to make a button mutable: + +```js +const editedButton = receivedButton // [!code --] + .setDisabled(true); // [!code --] +const { ButtonBuilder } = require('discord.js'); // [!code ++] +const editedButton = ButtonBuilder.from(receivedButton) // [!code ++] + .setDisabled(true); // [!code ++] +``` + +### MessageManager + +`MessageManager#fetch()`'s second parameter has been removed. The `BaseFetchOptions` the second parameter once was is now merged into the first parameter. + +```js +messageManager.fetch('1234567890', { cache: false, force: true }); // [!code --] +messageManager.fetch({ message: '1234567890', cache: false, force: true }); // [!code ++] +``` + +### MessageSelectMenu + +- `MessageSelectMenu` has been renamed to `StringSelectMenuBuilder` +- `StringSelectMenuBuilder#addOption()` has been removed. Use `StringSelectMenuBuilder#addOptions()` instead. + +### MessageEmbed + +- `MessageEmbed` has now been renamed to `EmbedBuilder`. +- `EmbedBuilder#setAuthor()` now accepts a sole `EmbedAuthorOptions` object. +- `EmbedBuilder#setFooter()` now accepts a sole `EmbedFooterOptions` object. +- `EmbedBuilder#addField()` has been removed. Use `EmbedBuilder#addFields()` instead. + +```js +new MessageEmbed().addField('Inline field title', 'Some value here', true); // [!code --] +new EmbedBuilder().addFields([ // [!code ++] + { name: 'one', value: 'one', inline: true }, // [!code ++] + { name: 'two', value: 'two', inline: true }, // [!code ++] ++]); +``` + +### Modal + +- `Modal` has been renamed as well and now has a `Builder` suffix: + +```js +const modal = new Modal(); // [!code --] +const modal = new ModalBuilder(); // [!code ++] +``` + +### PartialTypes + +The `PartialTypes` string array has been removed. Use the `Partials` enum instead. + +In addition to this, there is now a new partial: `Partials.ThreadMember`. + +### Permissions + +Thread permissions `USE_PUBLIC_THREADS` and `USE_PRIVATE_THREADS` have been removed as they are deprecated in the API. Use `CREATE_PUBLIC_THREADS` and `CREATE_PRIVATE_THREADS` respectively. + +`ManageEmojisAndStickers` has been deprecated due to API changes. Its replacement is `ManageGuildExpressions`. See [this pull request](https://github.com/discord/discord-api-docs/pull/6017) for more information. + +### PermissionOverwritesManager + +Overwrites are now keyed by the `PascalCase` permission key rather than the `SCREAMING_SNAKE_CASE` permission key. + +### REST Events + +#### apiRequest + +This REST event has been removed as discord.js now uses [Undici](https://github.com/nodejs/undici) as the underlying request handler. You must now use a [Diagnostics Channel](https://undici.nodejs.org/#/docs/api/DiagnosticsChannel). Here is a simple example: + +```js +import diagnosticsChannel from 'node:diagnostics_channel'; + +diagnosticsChannel.channel('undici:request:create').subscribe((data) => { + // If you use TypeScript, `data` may be casted as + // `DiagnosticsChannel.RequestCreateMessage` + // from Undici to receive type definitions. + const { request } = data; + console.log(request.method); // Log the method + console.log(request.path); // Log the path + console.log(request.headers); // Log the headers + console.log(request); // Or just log everything! +}); +``` + +You can find further examples at the [Undici Diagnostics Channel documentation](https://undici.nodejs.org/#/docs/api/DiagnosticsChannel). + +#### apiResponse + +This REST event has been renamed to `response` and moved to `Client#rest`: + +```js +client.on('apiResponse', ...); // [!code --] +client.rest.on('response', ...); // [!code ++] +``` + +#### invalidRequestWarning + +This REST event has been moved to `Client#rest`: + +```js +client.on('invalidRequestWarning', ...); // [!code --] +client.rest.on('invalidRequestWarning', ...); // [!code ++] +``` + +#### rateLimit + +This REST event has been renamed to `rateLimited` and moved to `Client#rest`: + +```js +client.on('rateLimit', ...); // [!code --] +client.rest.on('rateLimited', ...); // [!code ++] +``` + +### RoleManager + +`Role.comparePositions()` has been removed. Use `RoleManager#comparePositions()` instead. + +### Sticker + +`Sticker#tags` is now a nullable string (`string | null`). Previously, it was a nullable array of strings (`string[] | null`). See [this pull request](https://github.com/discordjs/discord.js/pull/8010) for more information. + +### ThreadChannel + +The `MAX` helper used in `ThreadAutoArchiveDuration` has been removed. Discord has since allowed any guild to use any auto archive time which makes this helper redundant. + +### ThreadMemberManager + +`ThreadMemberManager#fetch()`'s second parameter has been removed. The `BaseFetchOptions` the second parameter once was is now merged into the first parameter. In addition, the boolean helper to specify `cache` has been removed. + +Usage is now as follows: + +```js +// The second parameter is merged into the first parameter. +threadMemberManager.fetch('1234567890', { cache: false, force: true }); // [!code --] +threadMemberManager.fetch({ member: '1234567890', cache: false, force: true }); // [!code ++] + +// The lone boolean has been removed. One must be explicit here. +threadMemberManager.fetch(false); // [!code --] +threadMemberManager.fetch({ cache: false }); // [!code ++] +``` + +### Util + +`Util.removeMentions()` has been removed. To control mentions, you should use `allowedMentions` on `BaseMessageOptions` instead. + +`Util.splitMessage()` has been removed. This utility method is something the developer themselves should do. + +`Util.resolveAutoArchiveMaxLimit()` has been removed. Discord has since allowed any guild to use any auto archive time which makes this method redundant. + +Other functions in `Util` have been moved to top-level exports so you can directly import them from `discord.js`. + +```js +import { Util } from 'discord.js'; // [!code --] +Util.escapeMarkdown(message); // [!code --] +import { escapeMarkdown } from 'discord.js'; // [!code ++] +escapeMarkdown(message); // [!code ++] +``` + +### `.deleted` Field(s) have been removed + +You can no longer use the `deleted` property to check if a structure was deleted. See [this issue](https://github.com/discordjs/discord.js/issues/7091) for more information. + +### VoiceChannel + +`VoiceChannel#editable` has been removed. You should use `GuildChannel#manageable` instead. + +### VoiceRegion + +`VoiceRegion#vip` has been removed as it is no longer part of the API. + +### Webhook + +`Webhook#fetchMessage()`'s second parameter no longer allows a boolean to be passed. The `cache` option in `WebhookFetchMessageOptions` should be used instead. + +## Features + +### ApplicationCommand + +NFSW commands are supported. + +### Attachment + +Added support for voice message metadata fields. + +### AutocompleteInteraction + +`AutocompleteInteraction#commandGuildId` has been added which is the id of the guild the invoked application command is registered to. + +### BaseChannel + +Added support for `BaseChannel#flags`. + +Store channels have been removed as they are no longer part of the API. + +`BaseChannel#url` has been added which is a link to a channel, just like in the client. + +Additionally, new typeguards have been added: + +- `BaseChannel#isDMBased()` +- `BaseChannel#isTextBased()` +- `BaseChannel#isVoiceBased()` + +### BaseInteraction + +Added `BaseInteraction#isRepliable()` to check whether a given interaction can be replied to. + +### ClientApplication + +Added support for role connection metadata. + +### Collection + +- Added `Collection#merge()` and `Collection#combineEntries()`. +- New type: `ReadonlyCollection` which indicates an immutable `Collection`. + +### Collector + +A new `ignore` event has been added which is emitted whenever an element is not collected by the collector. + +Component collector options now use the `ComponentType` enum values: + +```js +const { ComponentType } = require('discord.js'); // [!code ++] + +const collector = interaction.channel.createMessageComponentCollector({ + filter: collectorFilter, + componentType: 'BUTTON', // [!code --] + componentType: ComponentType.Button, // [!code ++] + time: 20_000, +}); +``` + +### CommandInteraction + +`CommandInteraction#commandGuildId` has been added which is the id of the guild the invoked application command is registered to. + +### CommandInteractionOptionResolver + +`CommandInteractionOptionResolver#getChannel()` now has a third parameter which narrows the channel type. + +### Events + +Added support for `guildAuditLogEntryCreate` event. + +### ForumChannel + +Added support for forum channels. + +Added support for `ForumChannel#defaultForumLayout`. + +### Guild + +Added `Guild#setMFALevel()` which sets the guild's MFA level. + +Added `Guild#maxVideoChannelUsers` which indicates the maximum number of video channel users. + +Added `Guild#maxStageVideoChannelUsers` which indicates the maximum number of video channel users for stage channels. + +Added `Guild#disableInvites()` which disables the guild's invites. + +Added support for the `after` parameter in `Guild#fetchAuditLogs()`. + +### GuildChannelManager + +`videoQualityMode` may be used whilst creating a channel to initially set the camera video quality mode. + +### GuildEmojiManager + +Added `GuildEmojiManager#delete()` and `GuildEmojiManager#edit()` for managing existing guild emojis. + +### GuildForumThreadManager + +Added `GuildForumThreadManager` as manager for threads in forum channels. + +### GuildMember + +Added support for `GuildMember#flags`. + +### GuildMembersChunk + +This object now supports the `GuildMembersChunk#notFound` property. + +### GuildMemberManager + +Added `GuildMemberManager#fetchMe()` to fetch the client user in the guild. + +Added `GuildMemberManager#addRole()` and `GuildMemberManager#removeRole()`. These methods allow a single addition or removal of a role respectively to a guild member, even if uncached. + +### GuildTextThreadManager + +Added `GuildTextThreadManager` as manager for threads in text channels and announcement channels. + +### Message + +`Message#position` has been added as an approximate position in a thread. + +Added support for role subscription data. + +### MessageReaction + +Added `MessageReaction#react()` to make the client user react with the reaction the class belongs to. + +### Role + +Added support for role subscriptions. + +Added support for `Role#tags#guildConnections`. + +### StageChannel + +Stage channels now allow messages to be sent in them, much like voice channels. + +### Sticker + +Added support for GIF stickers. + +### ThreadMemberManager + +The new `withMember` options returns the associated guild member with the thread member. + +When fetching multiple thread members alongside `withMember`, paginated results will be returned. The `after` and `limit` option are supported in this scenario. + +### Webhook + +Added `Webhook#applicationId`. + +Added the `threadName` property in `Webhook#send()` options which allows a webhook to create a post in a forum channel. + +### WebSocketManager + +discord.js uses `@discordjs/ws` internally diff --git a/apps/guide/content/docs/legacy/additional-info/collections.mdx b/apps/guide/content/docs/legacy/additional-info/collections.mdx new file mode 100644 index 000000000..5963a026b --- /dev/null +++ b/apps/guide/content/docs/legacy/additional-info/collections.mdx @@ -0,0 +1,107 @@ +--- +title: Collections +--- + +discord.js comes with a utility class known as `Collection`. +It extends JavaScript's native `Map` class, so it has all the `Map` features and more! + + + If you're not familiar with `Map`, read [MDN's page on + it](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map) before continuing. You + should be familiar with `Array` + [methods](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array) as well. We will + also use some ES6 features, so read up [here](./es6-syntax) if you do not know what they are. + + +A `Map` allows for an association between unique keys and their values. +For example, how can you transform every value or filter the entries in a `Map` easily? +This is the point of the `Collection` class! + +## Array-like Methods + +Many of the methods on `Collection` correspond to their namesake in `Array`. One of them is `find`: + +```js +// Assume we have an array of users and a collection of the same users. +array.find((u) => u.discriminator === '1000'); // [!code word:find] +collection.find((u) => u.discriminator === '1000'); +``` + +The interface of the callback function is very similar between the two. +For arrays, callbacks usually pass the parameters `(value, index, array)`, where `value` is the value iterated to, +`index` is the current index, and `array` is the array. For collections, you would have `(value, key, collection)`. +Here, `value` is the same, but `key` is the key of the value, and `collection` is the collection itself instead. + +Methods that follow this philosophy of staying close to the `Array` interface are as follows: + +- `find` +- `filter` - Note that this returns a `Collection` rather than an `Array`. +- `map` - Yet this returns an `Array` of values instead of a `Collection`! +- `every` +- `some` +- `reduce` +- `concat` +- `sort` + +## Converting to Array + +Since `Collection` extends `Map`, it is an [iterable](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols), and can be converted to an `Array` through either `Array.from()` or spread syntax (`...collection`). + +```js +// For values. +Array.from(collection.values()); +[...collection.values()]; + +// For keys. +Array.from(collection.keys()); +[...collection.keys()]; + +// For [key, value] pairs. +Array.from(collection); +[...collection]; +``` + + + Many people convert Collections to Arrays way too much! + + This can lead to unnecessary and confusing code. Before you use `Array.from()` or similar, ask yourself if whatever you are trying to do can't be done with the given `Map` or `Collection` methods or with a for-of loop. Not being familiar with a new data structure should not mean you default to transforming it into the other. + + There is usually a reason, why a `Map` or `Collection` is used. Most structures in Discord can be identified with an `id`, which lends itself well to `key -> value` associations like in `Map`s. + + + +## Extra Utilities + +Some methods are not from `Array` and are instead entirely new to standard JavaScript. + +```js +// A random value. +collection.random(); + +// The first value. +collection.first(); + +// The first 5 values. +collection.first(5); + +// Similar to `first`, but from the end. +collection.last(); +collection.last(2); + +// Removes anything that meets the condition from the collection. +// Sort of like `filter`, but in-place. +collection.sweep((user) => user.username === 'Bob'); +``` + +A more complicated method is `partition`, which splits a single Collection into two new Collections based on the provided function. +You can think of it as two `filter`s, but done at the same time (and because of that much more performant): + +```js +// `bots` is a Collection of users where their `bot` property was true. +// `humans` is a Collection where the property was false instead! +const [bots, humans] = collection.partition((u) => u.bot); // [!code word:partition] + +// Both return true. +bots.every((b) => b.bot); +humans.every((h) => !h.bot); // note the "not" ! operator +``` diff --git a/apps/guide/content/docs/legacy/additional-info/es6-syntax.mdx b/apps/guide/content/docs/legacy/additional-info/es6-syntax.mdx new file mode 100644 index 000000000..8f1c6478a --- /dev/null +++ b/apps/guide/content/docs/legacy/additional-info/es6-syntax.mdx @@ -0,0 +1,243 @@ +--- +title: ES6 Syntax +--- + +If you've used JavaScript for only a (relatively) small amount of time or don't have much experience with it, you might not be aware of what ES6 is and what beneficial features it includes. Since this is a guide primarily for Discord bots, we'll be using some discord.js code as an example of what you might have versus what you could do to benefit from ES6. + +Here's the startup code we'll be using: + +```js title="index.js" lineNumbers +const { Client, Events, GatewayIntentBits } = require('discord.js'); // [!code word:const] +const config = require('./config.json'); + +const client = new Client({ intents: [GatewayIntentBits.Guilds] }); + +// [!code word:=>] +client.once(Events.ClientReady, () => { + console.log('Ready!'); +}); + +client.on(Events.InteractionCreate, (interaction) => { + if (!interaction.isChatInputCommand()) return; + + const { commandName } = interaction; + + if (commandName === 'ping') { + interaction.reply('Pong.'); + } else if (commandName === 'beep') { + interaction.reply('Boop.'); + } else if (commandName === 'server') { + interaction.reply('Guild name: ' + interaction.guild.name + '\nTotal members: ' + interaction.guild.memberCount); + } else if (commandName === 'user-info') { + interaction.reply('Your username: ' + interaction.user.username + '\nYour ID: ' + interaction.user.id); + } +}); + +client.login(config.token); +``` + +If you haven't noticed, this piece of code is already using a bit of ES6 here! The `const` keyword and arrow function declaration (`() => ...`) is ES6 syntax, and we recommend using it whenever possible. + +As for the code above, there are a few places where things can be done better. Let's look at them. + +## Template literals + +If you check the code above, it's currently doing things like `'Guild name: ' + interaction.guild.name` and `'Your username: ' + interaction.user.username`, which is perfectly valid. It is a bit hard to read, though, and it's not too fun to constantly type out. Fortunately, there's a better alternative. + +```js title="index.js" lineNumbers=19 +} else if (commandName === 'server') { + interaction.reply('Guild name: ' + interaction.guild.name + '\nTotal members: ' + interaction.guild.memberCount); // [!code --] + interaction.reply(`Guild name: ${interaction.guild.name}\nTotal members: ${interaction.guild.memberCount}`); // [!code ++] +} +else if (commandName === 'user-info') { + interaction.reply('Your username: ' + interaction.user.username + '\nYour ID: ' + interaction.user.id); // [!code --] + interaction.reply(`Your username: ${interaction.user.username}\nYour ID: ${interaction.user.id}`); // [!code ++] +} +``` + +Easier to read and write! The best of both worlds. + +### Template literals vs string concatenation + +If you've used other programming languages, you might be familiar with the term "string interpolation". Template literals would be JavaScript's implementation of string interpolation. If you're familiar with the heredoc syntax, it's very much like that; it allows for string interpolation, as well as multiline strings. + +The example below won't go too much into detail about it, but if you're interested in reading more, you can [read about them on MDN](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Template_literals). + +```js +const username = 'Sanctuary'; +const password = 'pleasedonthackme'; + +function letsPretendThisDoesSomething() { + return 'Yay for sample data.'; +} + +console.log('Your username is: **' + username + '**.'); // [!code --:2] +console.log('Your password is: **' + password + '**.'); +console.log(`Your username is: **${username}**.`); // [!code ++:2] +console.log(`Your password is: **${password}**.`); + +console.log('1 + 1 = ' + (1 + 1)); // [!code --] +console.log(`1 + 1 = ${1 + 1}`); // [!code ++] + +console.log("And here's a function call: " + letsPretendThisDoesSomething()); // [!code --] +console.log(`And here's a function call: ${letsPretendThisDoesSomething()}`); // [!code ++] + +console.log('Putting strings on new lines\n' + 'can be a bit painful\n' + 'with string concatenation.'); // [!code --] +// [!code ++:5] +console.log(` + Putting strings on new lines + is a breeze + with template literals! +`); +``` + + + As you will notice, template literals will also render the white space inside them, including the indentation! There + are ways around this, which we will discuss in another section. + + +You can see how it makes things easier and more readable. In some cases, it can even make your code shorter! This one is something you'll want to take advantage of as much as possible. + +## Arrow functions + +Arrow functions are shorthand for regular functions, with the addition that they use a lexical `this` context inside of their own. If you don't know what the `this` keyword is referring to, don't worry about it; you'll learn more about it as you advance. + +Here are some examples of ways you can benefit from arrow functions over regular functions: + +```js +// [!code --:3] +client.once(Events.ClientReady, function () { + console.log('Ready!'); +}); +client.once(Events.ClientReady, () => console.log('Ready!')); // [!code ++] + +// [!code --:3] +client.on(Events.TypingStart, function (typing) { + console.log(typing.user.tag + ' started typing in #' + typing.channel.name); +}); +client.on(Events.TypingStart, (typing) => console.log(`${typing.user.tag} started typing in #${typing.channel.name}`)); // [!code ++] + +// [!code --:3] +client.on(Events.MessageCreate, function (message) { + console.log(message.author.tag + ' sent: ' + message.content); +}); +client.on(Events.MessageCreate, (message) => console.log(`${message.author.tag} sent: ${message.content}`)); // [!code ++] + +// [!code --:3] +var doubleAge = function (age) { + return 'Your age doubled is: ' + age * 2; +}; +const doubleAge = (age) => `Your age doubled is: ${age * 2}`; // [!code ++] + +// [!code --:4] +var collectorFilter = function (m) { + return m.content === 'I agree' && !m.author.bot; +}; +var collector = message.createMessageCollector({ filter: collectorFilter, time: 15_000 }); +const collectorFilter = (m) => m.content === 'I agree' && !m.author.bot; // [!code ++:2] +const collector = message.createMessageCollector({ filter: collectorFilter, time: 15_000 }); +``` + +There are a few important things you should note here: + +- The parentheses around function parameters are optional when you have only one parameter but are required otherwise. If you feel like this will confuse you, it may be a good idea to use parentheses. +- You can cleanly put what you need on a single line without curly braces. +- Omitting curly braces will make arrow functions use **implicit return**, but only if you have a single-line expression. The `doubleAge` and `filter` variables are a good example of this. +- Unlike the `function someFunc() { ... }` declaration, arrow functions cannot be used to create functions with such syntax. You can create a variable and give it an anonymous arrow function as the value, though (as seen with the `doubleAge` and `filter` variables). + +We won't be covering the lexical `this` scope with arrow functions in here, but you can Google around if you're still curious. Again, if you aren't sure what `this` is or when you need it, reading about lexical `this` first may only confuse you. + +## Destructuring + +Destructuring is an easy way to extract items from an object or array. If you've never seen the syntax for it before, it can be a bit confusing, but it's straightforward to understand once explained! + +### Object destructuring + +Here's a common example where object destructuring would come in handy: + +```js +const config = require('./config.json'); +const prefix = config.prefix; +const token = config.token; +``` + +This code is a bit verbose and not the most fun to write out each time. Object destructuring simplifies this, making it easier to both read and write. Take a look: + +```js +const config = require('./config.json'); // [!code --:3] +const prefix = config.prefix; +const token = config.token; +const { prefix, token } = require('./config.json'); // [!code ++] +``` + +Object destructuring takes those properties from the object and stores them in variables. If the property doesn't exist, it'll still create a variable but with the value of `undefined`. So instead of using `config.token` in your `client.login()` method, you'd simply use `token`. And since destructuring creates a variable for each item, you don't even need that `const prefix = config.prefix` line. Pretty cool! + +Additionally, you could do this for your commands: + +```js +client.on(Events.InteractionCreate, (interaction) => { + const { commandName } = interaction; + + if (commandName === 'ping') { + // ping command here... + } else if (commandName === 'beep') { + // beep command here... + } + // other commands here... +}); +``` + +The code is shorter and looks cleaner, but it shouldn't be necessary if you follow along with the [command handler](../app-creation/handling-commands) part of the guide. + +You can also rename variables when destructuring, if necessary. A good example is when you're extracting a property with a name already being used or conflicts with a reserved keyword. The syntax is as follows: + +```js +// `default` is a reserved keyword +const { default: defaultValue } = someObject; + +console.log(defaultValue); +// 'Some default value here' +``` + +### Array destructuring + +Array destructuring syntax is very similar to object destructuring, except that you use brackets instead of curly braces. In addition, since you're using it on an array, you destructure the items in the same order the array is. Without array destructuring, this is how you'd extract items from an array: + +```js +// assuming we're in a `profile` command and have an `args` variable +const name = args[0]; +const age = args[1]; +const location = args[2]; +``` + +Like the first example with object destructuring, this is a bit verbose and not fun to write out. Array destructuring eases this pain. + +```js +const name = args[0]; // [!code --:3] +const age = args[1]; +const location = args[2]; +const [name, age, location] = args; // [!code ++] +``` + +A single line of code that makes things much cleaner! In some cases, you may not even need all the array's items (e.g., when using `string.match(regex)`). Array destructuring still allows you to operate in the same sense. + +```js +const [, username, id] = message.content.match(someRegex); +``` + +In this snippet, we use a comma without providing a name for the item in the array we don't need. You can also give it a placeholder name (`_match` or similar) if you prefer, of course; it's entirely preference at that point. + + + The underscore `_` prefix is a convention for unused variables. Some lint rules will error or warn if you define + identifiers without using them in your code but ignore identifiers starting with `_`. + + +## var, let, and const + +Since there are many, many articles out there that can explain this part more in-depth, we'll only be giving you a TL;DR and an article link if you choose to read more about it. + +1. The `var` keyword is what was (and can still be) used in JavaScript before `let` and `const` came to surface. There are many issues with `var`, though, such as it being function-scoped, hoisting related issues, and allowing redeclaration. +2. The `let` keyword is essentially the new `var`; it addresses many of the issues `var` has, but its most significant factor would be that it's block-scoped and disallows redeclaration (_not_ reassignment). +3. The `const` keyword is for giving variables a constant value that is unable to be reassigned. `const`, like `let`, is also block-scoped. + +The general rule of thumb recommended by this guide is to use `const` wherever possible, `let` otherwise, and avoid using `var`. Here's a [helpful article](https://madhatted.com/2016/1/25/let-it-be) if you want to read more about this subject. diff --git a/apps/guide/content/docs/legacy/additional-info/images/search.png b/apps/guide/content/docs/legacy/additional-info/images/search.png new file mode 100644 index 000000000..c22df5765 Binary files /dev/null and b/apps/guide/content/docs/legacy/additional-info/images/search.png differ diff --git a/apps/guide/content/docs/legacy/additional-info/images/send.png b/apps/guide/content/docs/legacy/additional-info/images/send.png new file mode 100644 index 000000000..172513640 Binary files /dev/null and b/apps/guide/content/docs/legacy/additional-info/images/send.png differ diff --git a/apps/guide/content/docs/legacy/additional-info/meta.json b/apps/guide/content/docs/legacy/additional-info/meta.json new file mode 100644 index 000000000..e86660df2 --- /dev/null +++ b/apps/guide/content/docs/legacy/additional-info/meta.json @@ -0,0 +1,3 @@ +{ + "pages": ["async-await", "collections", "es6-syntax", "notation", "rest-api"] +} diff --git a/apps/guide/content/docs/legacy/additional-info/notation.mdx b/apps/guide/content/docs/legacy/additional-info/notation.mdx new file mode 100644 index 000000000..6f5573087 --- /dev/null +++ b/apps/guide/content/docs/legacy/additional-info/notation.mdx @@ -0,0 +1,61 @@ +--- +title: Understanding Notation +--- + +Throughout the discord.js docs and when asking for help on the official server, you will run into many different kinds of notations. To help you understand the texts that you read, we will be going over some standard notations. + + + Always keep in mind that notation is not always rigorous. There will be typos, misunderstandings, or contexts that + will cause notation to differ from the usual meanings. + + +## Classes + +Some common notations refer to a class or the properties, methods, or events of a class. There are many variations on these notations, and they are very flexible depending on the person, so use your best judgment when reading them. + +The notation `` means an instance of the `Class` class. For example, a snippet like `.reply('Hello')` is asking you to replace `` with some value that is an instance of `BaseInteraction`, e.g. `interaction.reply('Hello')`. It could also just be a placeholder, e.g., `` would mean a placeholder for some ID. + +The notation `Class#foo` can refer to the `foo` property, method, or event of the `Class` class. Which one the writer meant needs to be determined from context. For example: + +- `BaseInteraction#user` means that you should refer to the `user` property on a `BaseInteraction`. +- `TextChannel#send` means that you should refer to the `send` method on a `TextChannel`. +- `Client#interactionCreate` means that you should refer to the `interactionCreate` event on a `Client`. + + + Remember that this notation is not valid JavaScript; it is a shorthand to refer to a specific piece of code. + + +Sometimes, the notation is extended, which can help you determine which one the writer meant. For example, `TextChannel#send(options)` is definitely a method of `TextChannel`, since it uses function notation. `Client#event:messageCreate` is an event since it says it is an event. + +The vital thing to take away from this notation is that the `#` symbol signifies that the property, method, or event can only be accessed through an instance of the class. Unfortunately, many abuse this notation, e.g., `#send` or `Util#resolveColor`. `` is already an instance, so this makes no sense, and `resolveColor` is a static method–you should write it as `Util.resolveColor`. Always refer back to the docs if you are confused. + +As an example, the documentation's search feature uses this notation. + +![Docs search](./images/search.png) + +Notice the use of the `.` operator for the static method, `Role.comparePositions` and the `#` notation for the method, `Role#comparePositionsTo`. + +## Types + +In the discord.js docs, there are type signatures everywhere, such as in properties, parameters, or return values. If you do not come from a statically typed language, you may not know what specific notations mean. + +The symbol `*` means any type. For example, methods that return `*` mean that they can return anything, and a parameter of type `*` can be anything. + +The symbol `?` means that the type is nullable. You can see it before or after the type (e.g. `?T` or `T?`). This symbol means that the value can be of the type `T` or `null`. An example is `GuildMember#nickname`; its type is `?string` since a member may or may not have a nickname. + +The expression `T[]` means an array of `T`. You can sometimes see multiple brackets `[]`, indicating that the array is multi-dimensional, e.g., `string[][]`. + +The expression `...T` signifies a rest parameter of type `T`. This means that the function can take any amount of arguments, and all those arguments must be of the type `T`. + +The operator `|`, which can read as "or", creates a union type, e.g. `A|B|C`. Simply, it means the value can be of any one of the types given. + +The angle brackets `<>` are used for generic types or parameterized types, signifying a type that uses another type(s). The notation looks like `A` where `A` is the type and `B` is a type parameter. If this is hard to follow, it is enough to keep in mind that whenever you see `A`, you can think of an `A` containing `B`. Examples: + +- `Array` means an array of strings. +- `Promise` means a `Promise` that contains a `User`. +- `Array>` would be an array of `Promise`s, each containing a `User` or a `GuildMember`. +- `Collection` would be a `Collection`, containing key-value pairs where the keys are `Snowflake`s, and the values are `User`s. + +![TextChannel#send on the docs](./images/send.png) + +In this piece of the docs, you can see two type signatures, `string`, `MessagePayload`, or `MessageOptions`, and `Promise<(Message|Array)>`. The meaning of the word "or" here is the same as `|`. diff --git a/apps/guide/content/docs/legacy/additional-info/rest-api.mdx b/apps/guide/content/docs/legacy/additional-info/rest-api.mdx new file mode 100644 index 000000000..ed9fe3f59 --- /dev/null +++ b/apps/guide/content/docs/legacy/additional-info/rest-api.mdx @@ -0,0 +1,176 @@ +--- +title: REST APIs +--- + +REST APIs are extremely popular on the web and allow you to freely grab a site's data if it has an available API over an HTTP connection. + +## Making HTTP requests with Node + +In these examples, we will be using [undici](https://www.npmjs.com/package/undici), an excellent library for making HTTP requests. + +To install undici, run the following command: + +```sh tab="npm" +npm i install undici +``` + +```sh tab="yarn" +yarn add undici +``` + +```sh tab="pnpm" +pnpm add undici +``` + +## Skeleton code + +To start off, you will be using the following skeleton code. Since both the commands you will be adding in this section require an interaction with external APIs, you will defer the reply, so your application responds with a "thinking..." state. You can then edit the reply once you got the data you need: + +```js title="rest-examples.js" lineNumbers +const { Client, EmbedBuilder, Events, GatewayIntentBits } = require('discord.js'); + +const client = new Client({ intents: [GatewayIntentBits.Guilds] }); + +client.once(Events.ClientReady, (readyClient) => { + console.log(`Ready! Logged in as ${readyClient.user.tag}`); +}); + +client.on(Events.InteractionCreate, async (interaction) => { + if (!interaction.isChatInputCommand()) return; + + const { commandName } = interaction; + await interaction.deferReply(); + // ... +}); + +client.login('your-token-goes-here'); +``` + + + We're taking advantage of [destructuring](./es6-syntax#destructuring) in this tutorial to maintain readability. + + +## Using undici + +Undici is a Promise-based HTTP/1.1 client, written from scratch for Node.js. If you aren't already familiar with Promises, you should read up on them [here](./async-await). + +In this tutorial, you will be making a bot with two API-based commands using the [random.cat](https://aws.random.cat) and [Urban Dictionary](https://www.urbandictionary.com) APIs. + +On top of your file, import the library function you will be using: + +```js +const { request } = require('undici'); +``` + +### Random Cat + + + Unfortunately, the `aws.random.cat` API doesn't work anymore. We will keep the example as-is until we find a better + showcase! + + +Random cat's API is available at [https://aws.random.cat/meow](https://aws.random.cat/meow) and returns a [JSON](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON) response. To actually fetch data from the API, you're going to do the following: + +```js +const catResult = await request('https://aws.random.cat/meow'); +const { file } = await catResult.body.json(); +``` + +If you just add this code, it will seem like nothing happens. What you do not see, is that you are launching a request to the random.cat server, which responds some JSON data. The helper function parses the response data to a JavaScript object you can work with. The object will have a `file` property with the value of a link to a random cat image. + +Next, you will implement this approach into an application command: + +```js +client.on(Events.InteractionCreate, async (interaction) => { + // ... + if (commandName === 'cat') { + const catResult = await request('https://aws.random.cat/meow'); + const { file } = await catResult.body.json(); + interaction.editReply({ files: [file] }); + } +}); +``` + +So, here's what's happening in this code: + +1. Your application sends a `GET` request to random.cat. +2. random.cat sees the request and gets a random file url from their database. +3. random.cat then sends that file's URL as a JSON object in a stringified form that contains a link to the image. +4. undici receives the response and you parse the body to a JSON object. +5. Your application then attaches the image and sends it in Discord. + +### Urban Dictionary + +Urban Dictionary's API is available at [https://api.urbandictionary.com/v0/define](https://api.urbandictionary.com/v0/define), accepts a `term` parameter, and returns a JSON response. + +The following code will fetch data from this api: + +```js +// ... +client.on(Events.InteractionCreate, async (interaction) => { + // ... + if (commandName === 'urban') { + const term = interaction.options.getString('term'); + const query = new URLSearchParams({ term }); // [!code word:URLSearchParams] + + const dictResult = await request(`https://api.urbandictionary.com/v0/define?${query}`); + const { list } = await dictResult.body.json(); + } +}); +``` + +Here, you are using JavaScript's native [URLSearchParams class](https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams) to create a [query string](https://en.wikipedia.org/wiki/Query_string) for the URL so that the Urban Dictionary server can parse it and know what you want to look up. + +If you were to do `/urban hello world`, then the URL would become https://api.urbandictionary.com/v0/define?term=hello%20world since the string `"hello world"` is encoded. + +You can get the respective properties from the returned JSON. If you were to view it in your browser, it usually looks like a bunch of mumbo jumbo. If it doesn't, great! If it does, then you should get a JSON formatter/viewer. If you're using Chrome, [JSON Formatter](https://chrome.google.com/webstore/detail/json-formatter/bcjindcccaagfpapjjmafapmmgkkhgoa) is one of the more popular extensions. If you're not using Chrome, search for "JSON formatter/viewer <your browser>" and get one. + +Now, if you look at the JSON, you can see that it has a `list` property, which is an array of objects containing various definitions for the term (maximum 10). Something you always want to do when making API-based commands is to handle the case when no results are available. So, if you throw a random term in there (e.g. `njaksdcas`) and then look at the response the `list` array should be empty. Now you are ready to start writing! + +As explained above, you'll want to check if the API returned any answers for your query, and send back the definition if that's the case: + +```js +if (commandName === 'urban') { + // ... + if (!list.length) { + return interaction.editReply(`No results found for **${term}**.`); + } + + interaction.editReply(`**${term}**: ${list[0].definition}`); +} +``` + +Here, you are only getting the first object from the array of objects called `list` and grabbing its `definition` property. + +If you've followed the tutorial, you should have something like this: + +Now, you can make it an [embed](../popular-topics/embeds) for easier formatting. + +You can define the following helper function at the top of your file. In the code below, you can use this function to truncate the returned data and make sure the embed doesn't error, because field values exceed 1024 characters. + +```js +const trim = (str, max) => (str.length > max ? `${str.slice(0, max - 3)}...` : str); +``` + +And here is how you can build the embed from the API data: + +```js +const [answer] = list; + +const embed = new EmbedBuilder() + .setColor(0xefff00) + .setTitle(answer.word) + .setURL(answer.permalink) + .addFields( + { name: 'Definition', value: trim(answer.definition, 1_024) }, + { name: 'Example', value: trim(answer.example, 1_024) }, + { name: 'Rating', value: `${answer.thumbs_up} thumbs up. ${answer.thumbs_down} thumbs down.` }, + ); + +interaction.editReply({ embeds: [embed] }); +``` + + + Check out display components for a newer approach to message formatting! You can read the [display + components](../popular-topics/display-components) section of this guide to learn more about using them! + diff --git a/apps/guide/content/docs/legacy/app-creation/creating-commands.mdx b/apps/guide/content/docs/legacy/app-creation/creating-commands.mdx new file mode 100644 index 000000000..72865b7e7 --- /dev/null +++ b/apps/guide/content/docs/legacy/app-creation/creating-commands.mdx @@ -0,0 +1,141 @@ +--- +title: Creating slash commands +--- + +## Creating slash commands + +import { Step, Steps } from 'fumadocs-ui/components/steps'; +import { File, Folder, Files } from 'fumadocs-ui/components/files'; + +Discord allows developers to register [slash commands](https://discord.com/developers/docs/interactions/application-commands), which provide users a first-class way of interacting directly with your application. + +Slash commands provide a huge number of benefits over manual message parsing, including: + +- Integration with the Discord client interface. +- Automatic command detection and parsing of the associated options/arguments. +- Typed argument inputs for command options, e.g. "String", "User", or "Role". +- Validated or dynamic choices for command options. +- In-channel private responses (ephemeral messages). +- Pop-up form-style inputs for capturing additional information. + +...and many more! + +## Before you continue + +Assuming you've followed the guide so far, your project directory should look something like this: + + + + + + + + + + + + + + +### Command Files + +The individual command files, containing slash command definitions and functionality. + + + + +### Command Handler + +The [command handler](./handling-commands), dynamically reads the command files and executes commands. + + + + +### Command Deployment + +The command [deployment script](./deploying-commands) to register your slash commands with Discord. + + + + +These steps can be followed in any order, but are all required to make your bot work. This page details step **1**. Make sure you also check out the other linked pages. + +## Individual command files + +Create a new folder named `commands` and a subfolder named `utility` inside it, which is where you'll store all of your utility command files. You'll be using the class to construct the command definitions. + +At a minimum, the definition of a slash command must have a name and a description. Slash command names must be between 1-32 characters and contain no capital letters, spaces, or symbols other than `-` and `_`. Using the builder, a simple `ping` command definition would look like this: + +```js +new SlashCommandBuilder().setName('ping').setDescription('Replies with Pong!'); +``` + +A slash command also requires a function to run when the command is used, to respond to the interaction. Using an interaction response method confirms to Discord that your bot successfully received the interaction, and has responded to the user. Discord enforces this to ensure that all slash commands provide a good user experience (UX). Failing to respond will cause Discord to show that the command failed, even if your bot is performing other actions as a result. + +The simplest way to acknowledge and respond to an interaction is the `interaction.reply()` method. Other methods of replying are covered on the [Response methods](../slash-commands/response-methods) page later in this section. + +```js +async execute(interaction) { + await interaction.reply('Pong!') +} +``` + +Put these two together by creating a `ping.js` file in the `commands/utility` folder for your first command. Inside this file, you're going to define and export two items. + +- The `data` property, which will provide the command definition shown above for registering to Discord. +- The `execute` method, which will contain the functionality to run from our event handler when the command is used. + +These are placed inside `module.exports` so they can be read by other files; namely the command loader and command deployment scripts mentioned earlier. + +```js title="commands/utility/ping.js" +const { SlashCommandBuilder } = require('discord.js'); + +module.exports = { + data: new SlashCommandBuilder().setName('ping').setDescription('Replies with Pong!'), + async execute(interaction) { + await interaction.reply('Pong!'); + }, +}; +``` + + + [`module.exports`](https://nodejs.org/api/modules.html#modules_module_exports) is how you export data in Node.js so that you can [`require()`](https://nodejs.org/api/modules.html#modules_require_id) it in other files. + + If you need to access your client instance from inside a command file, you can access it via `interaction.client`. If you need to access external files, packages, etc., you should `require()` them at the top of the file. + + + +That's it for your basic ping command. Below are examples of two more commands we're going to build upon throughout the guide, so create two more files for these before you continue reading. + +```js tab="User" title="commands/utility/user.js" +const { SlashCommandBuilder } = require('discord.js'); + +module.exports = { + data: new SlashCommandBuilder().setName('user').setDescription('Provides information about the user.'), + async execute(interaction) { + // interaction.user is the object representing the User who ran the command + // interaction.member is the GuildMember object, which represents the user in the specific guild + await interaction.reply( + `This command was run by ${interaction.user.username}, who joined on ${interaction.member.joinedAt}.`, + ); + }, +}; +``` + +```js tab="Server" title="commands/utility/server.js" +const { SlashCommandBuilder } = require('discord.js'); + +module.exports = { + data: new SlashCommandBuilder().setName('server').setDescription('Provides information about the server.'), + async execute(interaction) { + // interaction.guild is the object representing the Guild in which the command was run + await interaction.reply( + `This server is ${interaction.guild.name} and has ${interaction.guild.memberCount} members.`, + ); + }, +}; +``` + +#### Next steps + +You can implement additional commands by creating new files within a dedicated subfolder in the `commands` folder, but these three are the ones we're going to use for the examples as we go on. For now let's move on to the code you'll need for command handling, to load the files and respond to incoming interactions. diff --git a/apps/guide/content/docs/legacy/app-creation/deploying-commands.mdx b/apps/guide/content/docs/legacy/app-creation/deploying-commands.mdx new file mode 100644 index 000000000..c40ee4389 --- /dev/null +++ b/apps/guide/content/docs/legacy/app-creation/deploying-commands.mdx @@ -0,0 +1,153 @@ +--- +title: Registering Commands +--- + +import { Step, Steps } from 'fumadocs-ui/components/steps'; + +For fully functional slash commands, you need three important pieces of code: + + + + +### Command Files + +The individual command files, containing [slash command](./creating-commands) definitions and functionality. + + + + +### Command Handler + +The [command handler](./handling-commands), dynamically reads the command files and executes commands. + + + + +### Command Deployment + +The command deployment script to register your slash commands with Discord. + + + + +These steps can be followed in any order, but are all required to make your bot work. This page details step **3**. Make sure you also check out the other linked pages. + +## Command registration + +Slash commands can be registered in two ways; in one specific guild, or for every guild the bot is in. We're going to look at single-guild registration first, as this is a good way to develop and test your commands before a global deployment. + +Your application will need the `applications.commands` scope authorized in a guild for any of its slash commands to appear, and to be able to register them in a specific guild without error. + +Slash commands only need to be registered once, and updated when the definition (description, options etc) is changed. As there is a daily limit on command creations, it's not necessary nor desirable to connect a whole client to the gateway or do this on every `ready` event. As such, a standalone script using the lighter REST manager is preferred. + +This script is intended to be run separately, only when you need to make changes to your slash command **definitions** - you're free to modify parts such as the execute function as much as you like without redeployment. + +### Guild commands + +Create a `deploy-commands.js` file in your project directory. This file will be used to register and update the slash commands for your bot application. + +Add two more properties to your `config.json` file, which we'll need in the deployment script: + +- `clientId`: Your application's client id ([Discord Developer Portal](https://discord.com/developers/applications) > "General Information" > application id) +- `guildId`: Your development server's id ([Enable developer mode](https://support.discord.com/hc/en-us/articles/206346498) > Right-click the server title > "Copy ID") + +```json title="config.json" +{ + "token": "your-token-goes-here", + // [!code ++:2] + "clientId": "your-application-id-goes-here", + "guildId": "your-server-id-goes-here" +} +``` + +With these defined, you can use the deployment script below: + +```js title="deploy-commands.js" lineNumbers +const { REST, Routes } = require('discord.js'); +const { clientId, guildId, token } = require('./config.json'); +const fs = require('node:fs'); +const path = require('node:path'); + +const commands = []; +// Grab all the command folders from the commands directory you created earlier +const foldersPath = path.join(__dirname, 'commands'); +const commandFolders = fs.readdirSync(foldersPath); + +for (const folder of commandFolders) { + // Grab all the command files from the commands directory you created earlier + const commandsPath = path.join(foldersPath, folder); + const commandFiles = fs.readdirSync(commandsPath).filter((file) => file.endsWith('.js')); + // Grab the SlashCommandBuilder#toJSON() output of each command's data for deployment + for (const file of commandFiles) { + const filePath = path.join(commandsPath, file); + const command = require(filePath); + if ('data' in command && 'execute' in command) { + commands.push(command.data.toJSON()); + } else { + console.log(`[WARNING] The command at ${filePath} is missing a required "data" or "execute" property.`); + } + } +} + +// Construct and prepare an instance of the REST module +const rest = new REST().setToken(token); + +// and deploy your commands! +(async () => { + try { + console.log(`Started refreshing ${commands.length} application (/) commands.`); + + // [!code word:Guild] + // The put method is used to fully refresh all commands in the guild with the current set + const data = await rest.put(Routes.applicationGuildCommands(clientId, guildId), { body: commands }); + + console.log(`Successfully reloaded ${data.length} application (/) commands.`); + } catch (error) { + // And of course, make sure you catch and log any errors! + console.error(error); + } +})(); +``` + +Once you fill in these values, run `node deploy-commands.js` in your project directory to register your commands to the guild specified. If you see the success message, check for the commands in the server by typing `/`! If all goes well, you should be able to run them and see your bot's response in Discord! + +### Global commands + +Global application commands will be available in all the guilds your application has the `applications.commands` scope authorized in, and in direct messages by default. + +To deploy global commands, you can use the same script from the guild commands section above and simply adjust the route in the script to `.applicationCommands(clientId)` + +```js +await rest.put(Routes.applicationCommands(clientId), { body: commands }); +``` + +### Where to deploy + + + Guild-based deployment of commands is best suited for development and testing in your own personal server. Once you're satisfied that it's ready, deploy the command globally to publish it to all guilds that your bot is in. + + You may wish to have a separate application and token in the Discord Dev Portal for your dev application, to avoid duplication between your guild-based commands and the global deployment. + + + +#### Further reading + +You've successfully sent a response to a slash command! However, this is only the most basic of command event and response functionality. Much more is available to enhance the user experience including: + + + + Apply a similar dynamic, modular handling approach to client events. + + + Utilize different response methods for slash commands. + + + Expand on the command examples with additional, validated, option types. + + + Level up command responses with formatted content and display components. + + + Enhance your commands with more input methods using Buttons, Select Menus, and Modals! + + diff --git a/apps/guide/content/docs/legacy/app-creation/handling-commands.mdx b/apps/guide/content/docs/legacy/app-creation/handling-commands.mdx new file mode 100644 index 000000000..538f1c8e9 --- /dev/null +++ b/apps/guide/content/docs/legacy/app-creation/handling-commands.mdx @@ -0,0 +1,171 @@ +--- +title: Command Handling +--- + +import { Step, Steps } from 'fumadocs-ui/components/steps'; + +Unless your bot project is small, it's not a very good idea to have a single file with a giant `if`/`else if` chain for commands. If you want to implement features into your bot and make your development process a lot less painful, you'll want to implement a command handler. Let's get started on that! + +For fully functional slash commands, you need three important pieces of code: + + + + +### Command Files + +The individual command files, containing [slash command](./creating-commands) definitions and functionality. + + + + +### Command Handler + +The command handler, dynamically reads the command files and executes commands. + + + + +### Command Deployment + +The command [deployment script](./deploying-commands) to register your slash commands with Discord. + + + + +These steps can be followed in any order, but are all required to make your bot work. This page details step **2**. Make sure you also check out the other linked pages. + +## Loading command files + +Now that your command files have been created, your bot needs to load these files on startup. + +In your `index.js` file, make these additions to the base template: + +```js title="index.js" lineNumbers +// [!code ++:4] +const fs = require('node:fs'); +const path = require('node:path'); +const { Client, Collection, Events, GatewayIntentBits, MessageFlags } = require('discord.js'); +const { token } = require('./config.json'); + +const client = new Client({ intents: [GatewayIntentBits.Guilds] }); + +client.once(Events.ClientReady, (readyClient) => { + console.log(`Ready! Logged in as ${readyClient.user.tag}`); +}); + +client.commands = new Collection(); // [!code ++] +``` + +We recommend attaching a `.commands` property to your client instance so that you can access your commands in other files. The rest of the examples in this guide will follow this convention. For TypeScript users, we recommend extending the base Client class to add this property, [casting](https://www.typescripttutorial.net/typescript-tutorial/type-casting/), or [augmenting the module type](https://www.typescriptlang.org/docs/handbook/declaration-merging.html#module-augmentation). + + + - The [`fs`](https://nodejs.org/api/fs.html) module is Node's native file system module. `fs` is used to read the + `commands` directory and identify our command files. - The [`path`](https://nodejs.org/api/path.html) module is Node's + native path utility module. `path` helps construct paths to access files and directories. One of the advantages of the + `path` module is that it automatically detects the operating system and uses the appropriate joiners. - The + `Collection` class extends JavaScript's native + [`Map`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map) class, and includes more + extensive, useful functionality. `Collection` is used to store and efficiently retrieve commands for execution. + + +Next, using the modules imported above, dynamically retrieve your command files with a few more additions to the `index.js` file: + +```js title="index.js" lineNumbers=12 +client.commands = new Collection(); + +const foldersPath = path.join(__dirname, 'commands'); +const commandFolders = fs.readdirSync(foldersPath); + +for (const folder of commandFolders) { + const commandsPath = path.join(foldersPath, folder); + const commandFiles = fs.readdirSync(commandsPath).filter((file) => file.endsWith('.js')); + for (const file of commandFiles) { + const filePath = path.join(commandsPath, file); + const command = require(filePath); + // Set a new item in the Collection with the key as the command name and the value as the exported module + if ('data' in command && 'execute' in command) { + client.commands.set(command.data.name, command); + } else { + console.log(`[WARNING] The command at ${filePath} is missing a required "data" or "execute" property.`); + } + } +} +``` + +First, [`path.join()`](https://nodejs.org/api/path.html#pathjoinpaths) helps to construct a path to the `commands` directory. The first [`fs.readdirSync()`](https://nodejs.org/api/fs.html#fs_fs_readdirsync_path_options) method then reads the path to the directory and returns an array of all the folder names it contains, currently `['utility']`. The second `fs.readdirSync()` method reads the path to this directory and returns an array of all the file names they contain, currently `['ping.js', 'server.js', 'user.js']`. To ensure only command files get processed, `Array.filter()` removes any non-JavaScript files from the array. + +With the correct files identified, the last step is dynamically set each command into the `client.commands` Collection. For each file being loaded, check that it has at least the `data` and `execute` properties. This helps to prevent errors resulting from loading empty, unfinished, or otherwise incorrect command files while you're still developing. + +## Receiving command interactions + +You will receive an interaction for every slash command executed. To respond to a command, you need to create a listener for the `interactionCreate` event that will execute code when your application receives an interaction. Place the code below in the `index.js` file you created earlier. + +```js title="index.js" lineNumbers=32 +// [!code ++:3] +client.on(Events.InteractionCreate, (interaction) => { + console.log(interaction); +}); +``` + +Not every interaction is a slash command (e.g. `MessageComponent` interactions). Make sure to only handle slash commands in this function by making use of the `BaseInteraction#isChatInputCommand` method to exit the handler if another type is encountered. This method also provides typeguarding for TypeScript users, narrowing the type from `BaseInteraction` to a `ChatInputCommandInteraction`. + +```js title="index.js" lineNumbers=32 +client.on(Events.InteractionCreate, (interaction) => { + if (!interaction.isChatInputCommand()) return; // [!code ++] + console.log(interaction); +}); +``` + +## Executing commands + +When your bot receives a `interactionCreate` event, the interaction object contains all the information you need to dynamically retrieve and execute your commands! + +Let's take a look at the `ping` command again. Note the `execute()` function that will reply to the interaction with "Pong!". + +```js title="commands/utility/ping.js" +// [!code word:execute] +module.exports = { + data: new SlashCommandBuilder().setName('ping').setDescription('Replies with Pong!'), + async execute(interaction) { + await interaction.reply('Pong!'); + }, +}; +``` + +First, you need to get the matching command from the `client.commands` Collection based on the `interaction.commandName`. Your `Client` instance is always available via `interaction.client`. If no matching command is found, log an error to the console and ignore the event. + +With the right command identified, all that's left to do is call the command's `.execute()` method and pass in the `interaction` variable as its argument. In case something goes wrong, catch and log any error to the console. + +```js title="index.js" lineNumbers=32 +client.on(Events.InteractionCreate, async (interaction) => { + if (!interaction.isChatInputCommand()) return; + // [!code ++:23] + const command = interaction.client.commands.get(interaction.commandName); + + if (!command) { + console.error(`No command matching ${interaction.commandName} was found.`); + return; + } + + try { + await command.execute(interaction); + } catch (error) { + console.error(error); + if (interaction.replied || interaction.deferred) { + await interaction.followUp({ + content: 'There was an error while executing this command!', + flags: MessageFlags.Ephemeral, + }); + } else { + await interaction.reply({ + content: 'There was an error while executing this command!', + flags: MessageFlags.Ephemeral, + }); + } + } +}); +``` + +#### Next steps + +Your command files are now loaded into your bot, and the event listener is prepared and ready to respond. In the next section, we cover the final step: a command deployment script you'll need to register your commands so they appear in the Discord client. diff --git a/apps/guide/content/docs/legacy/app-creation/handling-events.mdx b/apps/guide/content/docs/legacy/app-creation/handling-events.mdx new file mode 100644 index 000000000..98bf64a82 --- /dev/null +++ b/apps/guide/content/docs/legacy/app-creation/handling-events.mdx @@ -0,0 +1,215 @@ +--- +title: Event Handling +--- + +import { File, Folder, Files } from 'fumadocs-ui/components/files'; + +Node.js uses an event-driven architecture, making it possible to execute code when a specific event occurs. The discord.js library takes full advantage of this. You can visit the `Client` documentation to see the full list of events. + + + This page assumes you've followed the guide up to this point, and created your `index.js` and individual slash + commands according to those pages. + + +At this point, your `index.js` file has listeners for two events: `ClientReady` and `InteractionCreate`. + +```js title="index.js" +// [!code word:ClientReady] +client.once(Events.ClientReady, (readyClient) => { + console.log(`Ready! Logged in as ${readyClient.user.tag}`); + +// [!code word:InteractionCreate] +client.on(Events.InteractionCreate, async (interaction) => { + if (!interaction.isChatInputCommand()) return; + + const command = interaction.client.commands.get(interaction.commandName); + + if (!command) { + console.error(`No command matching ${interaction.commandName} was found.`); + return; + } + + try { + await command.execute(interaction); + } catch (error) { + console.error(error); + if (interaction.replied || interaction.deferred) { + await interaction.followUp({ + content: 'There was an error while executing this command!', + flags: MessageFlags.Ephemeral, + }); + } else { + await interaction.reply({ + content: 'There was an error while executing this command!', + flags: MessageFlags.Ephemeral, + }); + } + } +}); +``` + +Currently, the event listeners are in the `index.js` file. `Client#ready`emits once when the `Client` becomes ready for use, and `Client#interactionCreate` emits whenever an interaction is received. Moving the event listener code into individual files is simple, and we'll be taking a similar approach to the command handler. + + + You're only going to move these two events from `index.js`. The code for [loading command + files](./handling-commands#loading-command-files) will stay here! + + +## Individual event files + +Your project directory should look something like this: + + + + + + + + + + + + + +Create an `events` folder in the same directory. You can then move the code from your event listeners in `index.js` to separate files: `events/ready.js` and `events/interactionCreate.js`. + +```js tab="Ready Handler" title="events/ready.js" +const { Events } = require('discord.js'); + +module.exports = { + name: Events.ClientReady, + once: true, + execute(client) { + console.log(`Ready! Logged in as ${client.user.tag}`); + }, +}; +``` + +```js tab="Interaction Handler" title="events/interactionCreate.js" +const { Events, MessageFlags } = require('discord.js'); + +module.exports = { + name: Events.InteractionCreate, + async execute(interaction) { + if (!interaction.isChatInputCommand()) return; + + const command = interaction.client.commands.get(interaction.commandName); + + if (!command) { + console.error(`No command matching ${interaction.commandName} was found.`); + return; + } + + try { + await command.execute(interaction); + } catch (error) { + console.error(error); + if (interaction.replied || interaction.deferred) { + await interaction.followUp({ + content: 'There was an error while executing this command!', + flags: MessageFlags.Ephemeral, + }); + } else { + await interaction.reply({ + content: 'There was an error while executing this command!', + flags: MessageFlags.Ephemeral, + }); + } + } + }, +}; +``` + +```js title="index.js" tab="Main File (after removing events)" +const fs = require('node:fs'); +const path = require('node:path'); +const { Client, Collection, GatewayIntentBits } = require('discord.js'); +const { token } = require('./config.json'); + +const client = new Client({ intents: [GatewayIntentBits.Guilds] }); + +client.commands = new Collection(); +const foldersPath = path.join(__dirname, 'commands'); +const commandFolders = fs.readdirSync(foldersPath); + +for (const folder of commandFolders) { + const commandsPath = path.join(foldersPath, folder); + const commandFiles = fs.readdirSync(commandsPath).filter((file) => file.endsWith('.js')); + for (const file of commandFiles) { + const filePath = path.join(commandsPath, file); + const command = require(filePath); + if ('data' in command && 'execute' in command) { + client.commands.set(command.data.name, command); + } else { + console.log(`[WARNING] The command at ${filePath} is missing a required "data" or "execute" property.`); + } + } +} + +client.login(token); +``` + +The `name` property states which event this file is for, and the `once` property holds a boolean value that specifies if the event should run only once. You don't need to specify this in `interactionCreate.js` as the default behavior will be to run on every event instance. The `execute` function holds your event logic, which will be called by the event handler whenever the event emits. + +## Reading event files + +Next, let's write the code for dynamically retrieving all the event files in the `events` folder. We'll be taking a similar approach to our [command handler](./handling-commands). Place the new code highlighted below in your `index.js`. + +`fs.readdirSync().filter()` returns an array of all the file names in the given directory and filters for only `.js` files, i.e. `['ready.js', 'interactionCreate.js']`. + +```js title="index.js" +const fs = require('node:fs'); +const path = require('node:path'); +const { Client, Collection, GatewayIntentBits } = require('discord.js'); +const { token } = require('./config.json'); + +const client = new Client({ intents: [GatewayIntentBits.Guilds] }); + +client.commands = new Collection(); +const foldersPath = path.join(__dirname, 'commands'); +const commandFolders = fs.readdirSync(foldersPath); + +for (const folder of commandFolders) { + const commandsPath = path.join(foldersPath, folder); + const commandFiles = fs.readdirSync(commandsPath).filter((file) => file.endsWith('.js')); + for (const file of commandFiles) { + const filePath = path.join(commandsPath, file); + const command = require(filePath); + if ('data' in command && 'execute' in command) { + client.commands.set(command.data.name, command); + } else { + console.log(`[WARNING] The command at ${filePath} is missing a required "data" or "execute" property.`); + } + } +} + +// [!code ++:12] +const eventsPath = path.join(__dirname, 'events'); +const eventFiles = fs.readdirSync(eventsPath).filter((file) => file.endsWith('.js')); + +for (const file of eventFiles) { + const filePath = path.join(eventsPath, file); + const event = require(filePath); + if (event.once) { + client.once(event.name, (...args) => event.execute(...args)); + } else { + client.on(event.name, (...args) => event.execute(...args)); + } +} + +client.login(token); +``` + +You'll notice the code looks very similar to the command loading above it - read the files in the events folder and load each one individually. + +The `Client` class in discord.js extends the [`EventEmitter`](https://nodejs.org/api/events.html#events_class_eventemitter) class. Therefore, the `client` object exposes the [`.on()`](https://nodejs.org/api/events.html#events_emitter_on_eventname_listener) and [`.once()`](https://nodejs.org/api/events.html#events_emitter_once_eventname_listener) methods that you can use to register event listeners. These methods take two arguments: the event name and a callback function. These are defined in your separate event files as `name` and `execute`. + +The callback function passed takes argument(s) returned by its respective event, collects them in an `args` array using the `...` [rest parameter syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters), then calls `event.execute()` while passing in the `args` array using the `...` [spread syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax). They are used here because different events in discord.js have different numbers of arguments. The rest parameter collects these variable number of arguments into a single array, and the spread syntax then takes these elements and passes them to the `execute` function. + +After this, listening for other events is as easy as creating a new file in the `events` folder. The event handler will automatically retrieve and register it whenever you restart your bot. + + + In most cases, you can access your `client` instance in other files by obtaining it from one of the other discord.js + structures, e.g. `interaction.client` in the `interactionCreate` event. You do not need to manually pass it to your + events. + diff --git a/apps/guide/content/docs/legacy/app-creation/main-file.mdx b/apps/guide/content/docs/legacy/app-creation/main-file.mdx new file mode 100644 index 000000000..798ae42af --- /dev/null +++ b/apps/guide/content/docs/legacy/app-creation/main-file.mdx @@ -0,0 +1,50 @@ +--- +title: The Main File +--- + + + This page assumes you've already prepared the [configuration files](../app-creation/project-setup#configuration-files) + from the previous page. We're using the `config.json` approach, however feel free to substitute your own! + + +## Creating the main file + +Open your code editor and create a new file. We suggest that you save the file as `index.js`, but you may name it whatever you wish. + +Here's the base code to get you started: + +```js title="index.js" +// Require the necessary discord.js classes +const { Client, Events, GatewayIntentBits } = require('discord.js'); +const { token } = require('./config.json'); + +// Create a new client instance +const client = new Client({ intents: [GatewayIntentBits.Guilds] }); + +// When the client is ready, run this code (only once). +// The distinction between `client: Client` and `readyClient: Client` is important for TypeScript developers. +// It makes some properties non-nullable. +client.once(Events.ClientReady, (readyClient) => { + console.log(`Ready! Logged in as ${readyClient.user.tag}`); +}); + +// Log in to Discord with your client's token +client.login(token); +``` + +This is how you create a client instance for your Discord bot and log in to Discord. The `GatewayIntentBits.Guilds` intents option is necessary for the discord.js client to work as you expect it to, as it ensures that the caches for guilds, channels, and roles are populated and available for internal use. + +The term "guild" is used by the Discord API and in discord.js to refer to a Discord server. + +Intents also define which events Discord should send to your bot, and you may wish to enable more than just the minimum. You can read more about the other intents in the [Intents topic](../popular-topics/intents). + +## Running your application + +Open your terminal and run `node index.js` to start the process. If you see "Ready!" after a few seconds, you're good to go! The next step is to start adding slash commands to develop your app's functionality. + + + You can open your `package.json` file and edit the `"main": "index.js"` field to point to your main file. You can then run `node .` in your terminal to start the process! + + After closing the process with Ctrl C, you can press the up arrow on your keyboard to bring up the latest commands you've run. Pressing up and then enter after closing the process is a quick way to start it up again. + + diff --git a/apps/guide/content/docs/legacy/app-creation/meta.json b/apps/guide/content/docs/legacy/app-creation/meta.json new file mode 100644 index 000000000..63cb41d3c --- /dev/null +++ b/apps/guide/content/docs/legacy/app-creation/meta.json @@ -0,0 +1,11 @@ +{ + "title": "Creating Your App", + "pages": [ + "project-setup", + "main-file", + "creating-commands", + "handling-commands", + "deploying-commands", + "handling-events" + ] +} diff --git a/apps/guide/content/docs/legacy/app-creation/project-setup.mdx b/apps/guide/content/docs/legacy/app-creation/project-setup.mdx new file mode 100644 index 000000000..8614cc728 --- /dev/null +++ b/apps/guide/content/docs/legacy/app-creation/project-setup.mdx @@ -0,0 +1,101 @@ +--- +title: Project Setup +--- + +## Configuration files + +Once you [add your bot to a server](../preparations/adding-your-app), the next step is to start coding and get it online! Let's start by creating a config file for your client token and a main file for your bot application. + +As explained in the ["What is a token, anyway?"](../preparations/app-setup#what-is-a-token-anyway) section, your token is essentially your bot's password, and you should protect it as best as possible. This can be done through a `config.json` file or by using environment variables. + +Open your application in the [Discord Developer Portal](https://discord.com/developers/applications) and go to the "Bot" page to copy your token. + +## Using `config.json` + +Storing data in a `config.json` file is a common way of keeping your sensitive values safe. Create a `config.json` file in your project directory and paste in your token. You can access your token inside other files by using `require()`. + +```json tab="Config" title="config.json" +{ + "token": "your-token-goes-here" +} +``` + +```js tab="Usage" +const { token } = require('./config.json'); + +console.log(token); +``` + + + If you're using Git, you should not commit files containing secrets. Read on to find out how to [exclude them from + versioning by using `.gitignore`](#git-and-gitignore). + + +## Using environment variables + +Environment variables are, as the name suggets, values you can pass to your environment (e.g. terminal session, Docker container, node process). This has the benefit that you can keep your code the same for different execution contexts. + +```txt title=".env" +A=Hello World +B=123 +DISCORD_TOKEN=MTI3NDMxMjA3PDQ3ODIxNzIzNg.G6uEbl.IpA3-9YeScYr9pu9K1utMlpP4p-KJwNxcIAbi8 +``` + + + If you're using Git, you should not commit `.env` or other environment files containing secrets. Read on to find out + how to [exclude them from versioning by using `.gitignore`](#git-and-gitignore). + + +To use environment variables in Node.js, we recommend you use the command line interface flag `--env-file` to point to the `.env` file you want to use. Note that the file name `.env` is just a convention. You could for example have a `.env.development` and `.env.production` file with different values depending on the Discord application you want to run your code. + +You can also read multiple environment files by using the `--env-file` flag multiple times. + +```sh +node --env-file=.env index.js +``` + +You don't need to pass any special flags when using Bun! Bun reads `.env` files automatically. + +The values you specify in `.env` files this way are exposed through the `process.env` global variable in any file. Note that values passed this way will always be strings. If you want to do calculations on environment numbers, you will have to parse them: + +```js title="index.js" +// [!code word:env] +console.log(process.env.A); +console.log(process.env.B + 9); // 1239 (this concatenates the number to the string!) +console.log(Number(process.env.C) + 9); // 132 +console.log(process.env.DISCORD_TOKEN); +``` + +## Online editors + +While we generally do not recommend using online editors as hosting solutions, but rather invest in a proper virtual private server, these services do offer ways to keep your credentials safe as well! Please see the respective service's documentation and help articles for more information on how to keep sensitive values safe: + + + + Learn more about storing secrets in `.env` files using Glitch + + + Learn more about configuration variables in Heroku + + + Learn more about secrets and environment variables in Replit + + + +## Git and `.gitignore` + +Git is a fantastic tool to keep track of your code changes and allows you to upload progress to services like [GitHub](https://github.com/), [GitLab](https://about.gitlab.com/), or [Bitbucket](https://bitbucket.org/product). While this is super useful to share code with other developers, it also bears the risk of uploading your configuration files with sensitive values! + +You can specify files that Git should ignore in its versioning systems with a `.gitignore` file. Create a `.gitignore` file in your project directory and add the names of the files and folders you want to ignore. The following example ignores the `config.json` and `.env` files as well as the `node_modules` directory: + +```txt title=".gitignore" +node_modules +.env +config.json +``` + + + `.gitignore` files can specify intricate patterns and help with your general development flow. Apart from keeping your + credentials safe, you should exclude `node_modules` from version control as well, its contents can be restored from + the entries in your `package.json` and `package-lock.json` files. + diff --git a/apps/guide/content/docs/legacy/images/branding/banner-blurple-small.png b/apps/guide/content/docs/legacy/images/branding/banner-blurple-small.png new file mode 100644 index 000000000..9cf75fd75 Binary files /dev/null and b/apps/guide/content/docs/legacy/images/branding/banner-blurple-small.png differ diff --git a/apps/guide/content/docs/legacy/images/branding/banner-blurple.png b/apps/guide/content/docs/legacy/images/branding/banner-blurple.png new file mode 100644 index 000000000..7b4511cf4 Binary files /dev/null and b/apps/guide/content/docs/legacy/images/branding/banner-blurple.png differ diff --git a/apps/guide/content/docs/legacy/images/branding/banner-small.png b/apps/guide/content/docs/legacy/images/branding/banner-small.png new file mode 100644 index 000000000..0f0d327d3 Binary files /dev/null and b/apps/guide/content/docs/legacy/images/branding/banner-small.png differ diff --git a/apps/guide/content/docs/legacy/images/branding/banner.png b/apps/guide/content/docs/legacy/images/branding/banner.png new file mode 100644 index 000000000..bd00e6a6a Binary files /dev/null and b/apps/guide/content/docs/legacy/images/branding/banner.png differ diff --git a/apps/guide/content/docs/legacy/images/branding/logo-blurple-favicon.png b/apps/guide/content/docs/legacy/images/branding/logo-blurple-favicon.png new file mode 100644 index 000000000..8487e01d0 Binary files /dev/null and b/apps/guide/content/docs/legacy/images/branding/logo-blurple-favicon.png differ diff --git a/apps/guide/content/docs/legacy/images/branding/logo-blurple-small.png b/apps/guide/content/docs/legacy/images/branding/logo-blurple-small.png new file mode 100644 index 000000000..d72033ea6 Binary files /dev/null and b/apps/guide/content/docs/legacy/images/branding/logo-blurple-small.png differ diff --git a/apps/guide/content/docs/legacy/images/branding/logo-blurple.png b/apps/guide/content/docs/legacy/images/branding/logo-blurple.png new file mode 100644 index 000000000..af846c79c Binary files /dev/null and b/apps/guide/content/docs/legacy/images/branding/logo-blurple.png differ diff --git a/apps/guide/content/docs/legacy/images/branding/logo-favicon.png b/apps/guide/content/docs/legacy/images/branding/logo-favicon.png new file mode 100644 index 000000000..b83e8beed Binary files /dev/null and b/apps/guide/content/docs/legacy/images/branding/logo-favicon.png differ diff --git a/apps/guide/content/docs/legacy/images/branding/logo-small.png b/apps/guide/content/docs/legacy/images/branding/logo-small.png new file mode 100644 index 000000000..64857f710 Binary files /dev/null and b/apps/guide/content/docs/legacy/images/branding/logo-small.png differ diff --git a/apps/guide/content/docs/legacy/images/branding/logo.png b/apps/guide/content/docs/legacy/images/branding/logo.png new file mode 100644 index 000000000..36154964d Binary files /dev/null and b/apps/guide/content/docs/legacy/images/branding/logo.png differ diff --git a/apps/guide/content/docs/legacy/improving-dev-environment/package-json-scripts.mdx b/apps/guide/content/docs/legacy/improving-dev-environment/package-json-scripts.mdx new file mode 100644 index 000000000..8eb62590b --- /dev/null +++ b/apps/guide/content/docs/legacy/improving-dev-environment/package-json-scripts.mdx @@ -0,0 +1,200 @@ +--- +title: Package scripts +--- + +## Setting up package.json scripts + +An easy way to run scripts like a script to start your bot, a script to lint your bot's files, or whatever scripts you use is by storing them in your `package.json` file. After you store these scripts in your `package.json` file, you can run the `start` script to start your bot or the `lint` script to lint your code for errors. + +```sh tab="npm" +npm run start +npm run lint +``` + +```sh tab="yarn" +yarn run start +yarn run lint +``` + +```sh tab="pnpm" +pnpm run start +pnpm run lint +``` + +```sh tab="bun" +bun run start +bun run lint +``` + +## Getting started + + +Before getting started, you'll need to have a `package.json` file. If you don't have a `package.json` file yet, you can run the following command in the console to generate one. + +```sh tab="npm" +npm init -y +``` + +```sh tab="yarn" +yarn init -y +``` + +```sh tab="pnpm" +pnpm init +``` + +```sh tab="bun" +bun init -y +``` + + + +If you haven't touched your `package.json` file yet (excluding installing dependencies), your `package.json` file should look similar to the following: + +```json title="package.json" +{ + "name": "my-bot", + "version": "1.0.0", + "description": "A Discord bot!", + "main": "index.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "keywords": [], + "author": "", + "license": "ISC" +} +``` + +Let's zoom in more. Below `main`, you'll see `scripts`. You can specify your scripts there. In this guide, we'll show how to start and lint your bot using a `package.json` script. + +## Adding your first script + + + We'll assume you have finished the [creating your app](../app-creation/project-setup) section of the guide. If you + haven't, ensure to follow it first! + + +Over at your `package.json` file, add the following line to the `scripts`: + +```json title="package.json" +{ + "name": "my-bot", + "version": "1.0.0", + "description": "A Discord bot!", + "main": "index.js", + "scripts": { // [!code focus:5] + "test": "echo \"Error: no test specified\" && exit 1" // needs a comma // [!code --] + "test": "echo \"Error: no test specified\" && exit 1", // [!code ++] + "start": "node ." // [!code ++] + }, + "keywords": [], + "author": "", + "license": "ISC" +} +``` + + + The `node .` script will run the file you have specified at the `main` entry in your `package.json` file. If you don't + have it set yet, make sure to select your bot's main file as `main`! + + +Now, whenever you run the `start` script in your bot's directory, it will run the `node .` command. + +```sh tab="npm" +npm run start +``` + +```sh tab="yarn" +yarn run start +``` + +```sh tab="pnpm" +pnpm run start +``` + +```sh tab="bun" +bun run start +``` + +Let's create another script to lint your code via the command line. Add the following line to your scripts: + +```json title="package.json" +{ + "name": "my-bot", + "version": "1.0.0", + "description": "A Discord bot!", + "main": "index.js", + "scripts": { // [!code focus:6] + "test": "echo \"Error: no test specified\" && exit 1", + "start": "node ." // needs a comma // [!code --] + "start": "node .", // [!code ++] + "lint": "eslint ." // [!code ++] + }, + "keywords": [], + "author": "", + "license": "ISC" +} +``` + +Now, whenever you run the `lint` script, ESLint will lint your `index.js` file. + +```sh tab="npm" +npm run lint +``` + +```sh tab="yarn" +yarn run lint +``` + +```sh tab="pnpm" +pnpm run lint +``` + +```sh tab="bun" +bun run lint +``` + +Your `package.json` file should now look similar to the following: + +```json +{ + "name": "my-bot", + "version": "1.0.0", + "description": "A Discord bot!", + "main": "index.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1", + "start": "node .", + "lint": "eslint ." + }, + "keywords": [], + "author": "", + "license": "ISC" +} +``` + +And that's it! You can always add more scripts now, running them with: + +```sh tab="npm" +npm run +``` + +```sh tab="yarn" +yarn run +``` + +```sh tab="pnpm" +pnpm run +``` + +```sh tab="bun" +bun run +``` + + + + Package scripts allow some more configuration (like pre-, post- and lifecycle scripts) than we can cover in this + guide. Check out the official documentation on for more information. + + diff --git a/apps/guide/content/docs/legacy/improving-dev-environment/pm2.mdx b/apps/guide/content/docs/legacy/improving-dev-environment/pm2.mdx new file mode 100644 index 000000000..a2f71eeee --- /dev/null +++ b/apps/guide/content/docs/legacy/improving-dev-environment/pm2.mdx @@ -0,0 +1,113 @@ +--- +title: PM2 +--- + +PM2 is a process manager. It manages your applications' states, so you can start, stop, restart, and delete processes. It offers features such as monitoring running processes and setting up a "start with operating system" (be that Windows, Linux, or Mac) so your processes start when you boot your system. + +## Installation + +You can install PM2 via the following command: + +```sh tab="npm" +npm install --global pm2 +``` + +```sh tab="yarn" +yarn global add pm2 +``` + +```sh tab="pnpm" +pnpm add --global pm2 +``` + +```sh tab="bun" +bun add --global pm2 +``` + +## Starting your app + +After you install PM2, the easiest way you can start your app is by going to the directory your bot is in and then run the following: + +```sh +pm2 start your-app-name.js +``` + +### Additional notes + +The `pm2 start` script allows for more optional command-line arguments. + +- `--name`: This allows you to set the name of your process when listing it up with `pm2 list` or `pm2 monit`: + +```sh +pm2 start your-app-name.js --name "Some cool name" +``` + +- `--watch`: This option will automatically restart your process as soon as a file change is detected, which can be useful for development environments: + +```bash +pm2 start your-app-name.js --watch +``` + + + The `pm2 start` command can take more optional parameters, but only these two are relevant. If you want to see all the + parameters available, you can check the documentation of pm2 + [here](https://pm2.keymetrics.io/docs/usage/pm2-doc-single-page/). + + +Once the process launches with pm2, you can run `pm2 monit` to monitor all console outputs from the processes started by pm2. This accounts for any `console.log()` in your code or outputted errors. + +In a similar fashion to how you start the process, running `pm2 stop` will stop the current process without removing it from PM2's interface: + +```sh +pm2 stop your-app-name.js +``` + +## Setting up booting with your system + +Perhaps one of the more useful features of PM2 is being able to boot up with your Operating System. This feature will ensure that your bot processes will always be started after an (unexpected) reboot (e.g., after a power outage). + +The initial steps differ per OS. In this guide, we'll cover those for Windows and Linux/macOS. + +### Initial steps for Windows + +It is recommended to use `pm2-installer`. Follow the steps over at their [`GitHub`](https://github.com/jessety/pm2-installer). + +### Initial steps for Linux/macOS + +You'll need a start script, which you can get by running the following command: + +```sh +# Detects the available init system, generates the config, and enables startup system +pm2 startup +``` + +Or, if you want to specify your machine manually, select one of the options with the command: + +```sh +pm2 startup [ubuntu | ubuntu14 | ubuntu12 | centos | centos6 | arch | oracle | amazon | macos | darwin | freesd | systemd | systemv | upstart | launchd | rcd | openrc] +``` + +The output of running one of the commands listed above will output a command for you to run with all environment variables and options configured. + +**Example output for an Ubuntu user:** + +``` +[PM2] You have to run this command as root. Execute the following command: + sudo su -c "env PATH=$PATH:/home/user/.nvm/versions/node/v8.9/bin pm2 startup ubuntu -u user --hp /home/user +``` + +After running that command, you can continue to the next step. + +### Saving the current process list + +To save the current process list so it will automatically get started after a restart, run the following command: + +```sh +pm2 save +``` + +To disable this, you can run the following command: + +```sh +pm2 unstartup +``` diff --git a/apps/guide/content/docs/legacy/index.mdx b/apps/guide/content/docs/legacy/index.mdx new file mode 100644 index 000000000..c290d12fc --- /dev/null +++ b/apps/guide/content/docs/legacy/index.mdx @@ -0,0 +1,36 @@ +--- +title: Introduction +--- + +import { GithubInfo } from 'fumadocs-ui/components/github-info'; + + + +If you're reading this, it probably means you want to learn how to make a bot with discord.js. Awesome! You've come to the right place. +This guide will teach you things such as: + +- How to get a bot [up and running](./legacy/preparations/app-setup) from scratch; +- How to properly [create](./legacy/app-creation/project-setup), [organize](./legacy/app-creation/handling-commands), and expand on your commands; +- In-depth explanations and examples regarding popular topics (e.g. [components](./legacy/popular-topics/display-components) ,[reactions](./legacy/popular-topics/reactions), [embeds](./legacy/popular-topics/embeds), [canvas](./legacy/popular-topics/canvas)); +- Working with databases (e.g. [sequelize](./legacy/sequelize/) and [keyv](./legacy/keyv/keyv)); +- Getting started with [sharding](./legacy/sharding/); +- And much more. + +This guide will also cover subjects like common errors and how to solve them, keeping your code clean, setting up a proper development environment, etc. +Sounds good? Great! Let's get started, then. + +## Before you begin... + +Alright, making a bot is cool and all, but there are some prerequisites to it. To create a bot with discord.js, you should have a fairly decent grasp of JavaScript itself. +While you _can_ make a bot with very little JavaScript and programming knowledge, trying to do so without understanding the language first will only hinder you. You may get stuck on many uncomplicated issues, struggle with solutions to incredibly easy problems, and all-in-all end up frustrated. Sounds pretty annoying. + +If you don't know JavaScript but would like to learn about it, here are a few links to help get you started: + +- [Eloquent JavaScript, a free online book](http://eloquentjavascript.net/) +- [JavaScript.info, a modern javascript tutorial](https://javascript.info/) +- [Codecademy's interactive JavaScript course](https://www.codecademy.com/learn/introduction-to-javascript) +- [Nodeschool, for both JavaScript and Node.js lessons](https://nodeschool.io/) +- [MDN's JavaScript guide and full documentation](https://developer.mozilla.org/en-US/docs/Web/JavaScript) +- [Google, your best friend](https://google.com) + +Take your pick, learn some JavaScript, and once you feel like you're confident enough to make a bot, come back and get started! diff --git a/apps/guide/content/docs/legacy/interactions/context-menus.mdx b/apps/guide/content/docs/legacy/interactions/context-menus.mdx new file mode 100644 index 000000000..e7ad57fae --- /dev/null +++ b/apps/guide/content/docs/legacy/interactions/context-menus.mdx @@ -0,0 +1,52 @@ +--- +title: Context Menus +--- + +Context Menus are application commands which appear when right clicking or tapping a user or a message, in the Apps submenu. + + + This page is a follow-up to the [slash commands](../slash-commands/advanced-creation) section. Please carefully read + those pages first so that you can understand the methods used in this section. + + +## Registering context menu commands + +To create a context menu command, use the `ContextMenuCommandBuilder` class. You can then set the type of the context menu (user or message) using the `setType()` method. + +```js +const { ContextMenuCommandBuilder, ApplicationCommandType } = require('discord.js'); + +const data = new ContextMenuCommandBuilder().setName('User Information').setType(ApplicationCommandType.User); +``` + +## Receiving context menu command interactions + +Context menus commands, just like slash commands, are received via an interaction. You can check if a given interaction is a context menu by invoking the `isContextMenuCommand()` method, or the `isMessageContextMenuCommand()` and `isUserContextMenuCommand()` methods to check for the specific type of context menu interaction: + +```js +client.on(Events.InteractionCreate, (interaction) => { + if (!interaction.isUserContextMenuCommand()) return; + console.log(interaction); +}); +``` + +## Extracting data from context menus + +For user context menus, you can get the targeted user by accessing the `targetUser` or `targetMember` property from the `UserContextMenuCommandInteraction`. + +For message context menus, you can get the targeted message by accessing the `targetMessage` property from the `MessageContextMenuCommandInteraction`. + +```js +client.on(Events.InteractionCreate, (interaction) => { + if (!interaction.isUserContextMenuCommand()) return; + // Get the User's username from context menu + const { username } = interaction.targetUser; + console.log(username); +}); +``` + +## Notes + +- Context menu commands cannot have subcommands or any options. +- Responding to context menu commands functions the same as slash commands. Refer to our [slash command responses](../slash-commands/response-methods) guide for more information. +- Context menu command permissions also function the same as slash commands. Refer to our [slash command permissions](../slash-commands/permissions) guide for more information. diff --git a/apps/guide/content/docs/legacy/interactions/images/modal-example.png b/apps/guide/content/docs/legacy/interactions/images/modal-example.png new file mode 100644 index 000000000..9cee3d67d Binary files /dev/null and b/apps/guide/content/docs/legacy/interactions/images/modal-example.png differ diff --git a/apps/guide/content/docs/legacy/interactions/images/selectephem.png b/apps/guide/content/docs/legacy/interactions/images/selectephem.png new file mode 100644 index 000000000..2f109b358 Binary files /dev/null and b/apps/guide/content/docs/legacy/interactions/images/selectephem.png differ diff --git a/apps/guide/content/docs/legacy/interactions/meta.json b/apps/guide/content/docs/legacy/interactions/meta.json new file mode 100644 index 000000000..b684cd4a8 --- /dev/null +++ b/apps/guide/content/docs/legacy/interactions/meta.json @@ -0,0 +1,3 @@ +{ + "title": "Other Interactions" +} diff --git a/apps/guide/content/docs/legacy/interactions/modals.mdx b/apps/guide/content/docs/legacy/interactions/modals.mdx new file mode 100644 index 000000000..4bdc32bc4 --- /dev/null +++ b/apps/guide/content/docs/legacy/interactions/modals.mdx @@ -0,0 +1,192 @@ +--- +title: Modals +--- + +With modals you can create pop-up forms that allow users to provide you with formatted inputs through submissions. We'll cover how to create, show, and receive modal forms using discord.js! + + + This page is a follow-up to the [interactions (slash commands) page](../slash-commands/advanced-creation). Please + carefully read that section first, so that you can understand the methods used in this section. + + +## Building and responding with modals + +Unlike message components, modals aren't strictly components themselves. They're a callback structure used to respond to interactions. + + + You can have a maximum of five `ActionRowBuilder`s per modal builder, and one `TextInputBuilder` within an + `ActionRowBuilder`. Currently, you can only use `TextInputBuilder`s in modal action rows builders. + + +To create a modal you construct a new `ModalBuilder`. You can then use the setters to add the custom id and title. + +```js +const { Events, ModalBuilder } = require('discord.js'); + +client.on(Events.InteractionCreate, async (interaction) => { + if (!interaction.isChatInputCommand()) return; + + if (interaction.commandName === 'ping') { + const modal = new ModalBuilder().setCustomId('myModal').setTitle('My Modal'); + + // TODO: Add components to modal... + } +}); +``` + + + The custom id is a developer-defined string of up to 100 characters. Use this field to ensure you can uniquely define + all incoming interactions from your modals! + + +The next step is to add the input fields in which users responding can enter free-text. Adding inputs is similar to adding components to messages. + +At the end, we then call `ChatInputCommandInteraction#showModal` to display the modal to the user. + + +If you're using typescript you'll need to specify the type of components your action row holds. This can be done by specifying the generic parameter in `ActionRowBuilder`: + +```diff +- new ActionRowBuilder() ++ new ActionRowBuilder() +``` + + + +```js +const { ActionRowBuilder, Events, ModalBuilder, TextInputBuilder, TextInputStyle } = require('discord.js'); + +client.on(Events.InteractionCreate, async (interaction) => { + if (!interaction.isChatInputCommand()) return; + + if (interaction.commandName === 'ping') { + // Create the modal + const modal = new ModalBuilder().setCustomId('myModal').setTitle('My Modal'); + + // Add components to modal + + // Create the text input components + const favoriteColorInput = new TextInputBuilder() + .setCustomId('favoriteColorInput') + // The label is the prompt the user sees for this input + .setLabel("What's your favorite color?") + // Short means only a single line of text + .setStyle(TextInputStyle.Short); + + const hobbiesInput = new TextInputBuilder() + .setCustomId('hobbiesInput') + .setLabel("What's some of your favorite hobbies?") + // Paragraph means multiple lines of text. + .setStyle(TextInputStyle.Paragraph); + + // An action row only holds one text input, + // so you need one action row per text input. + const firstActionRow = new ActionRowBuilder().addComponents(favoriteColorInput); + const secondActionRow = new ActionRowBuilder().addComponents(hobbiesInput); + + // Add inputs to the modal + modal.addComponents(firstActionRow, secondActionRow); + + // Show the modal to the user + await interaction.showModal(modal); // [!code word:showModal] + } +}); +``` + +Restart your bot and invoke the `/ping` command again. You should see a popup form resembling the image below: + +![Modal Example](./images/modal-example.png) + + + Showing a modal must be the first response to an interaction. You cannot `defer()` or `deferUpdate()` then show a + modal later. + + +### Input styles + +Currently there are two different input styles available: + +- `Short`, a single-line text entry; +- `Paragraph`, a multi-line text entry similar to the HTML `