From a41c825cdd08c5aa6c0922b45348b0578bc2d2c3 Mon Sep 17 00:00:00 2001
From: Domin-MND <69919939+domin-mnd@users.noreply.github.com>
Date: Sun, 29 Oct 2023 13:51:00 +0300
Subject: [PATCH 1/4] use typescript for docs
---
.../src/content/guides/0-getting-started.md | 23 ++-----
.../src/content/guides/1-sending-messages.md | 61 ++++++++++++-------
.../website/src/content/guides/2-embeds.md | 28 ++++++---
.../website/src/content/guides/3-buttons.md | 15 ++---
.../website/src/content/guides/4-links.md | 4 +-
.../src/content/guides/5-select-menu.md | 25 +++++---
.../src/content/guides/6-use-instance.md | 4 +-
7 files changed, 95 insertions(+), 65 deletions(-)
diff --git a/packages/website/src/content/guides/0-getting-started.md b/packages/website/src/content/guides/0-getting-started.md
index c87e251..2b232cb 100644
--- a/packages/website/src/content/guides/0-getting-started.md
+++ b/packages/website/src/content/guides/0-getting-started.md
@@ -6,7 +6,7 @@ slug: getting-started
# Getting Started
-These guides assume some familiarity with [JavaScript](https://developer.mozilla.org/en-US/docs/Web/javascript), [React](https://reactjs.org), [Discord.js](https://discord.js.org) and the [Discord API](https://discord.dev). Keep these pages as reference if you need it.
+These guides assume some familiarity with [JavaScript](https://developer.mozilla.org/en-US/docs/Web/javascript), [TypeScript](https://www.typescriptlang.org/), [React](https://reactjs.org), [Discord.js](https://discord.js.org) and the [Discord API](https://discord.dev). Keep these pages as reference if you need it.
## Setup from template
@@ -29,31 +29,16 @@ pnpm add reacord react discord.js
Create a Discord.js client and a Reacord instance:
-```js
-// main.jsx
-import { Client } from "discord.js"
+```ts
+import { Client, Events } from "discord.js"
import { ReacordDiscordJs } from "reacord"
const client = new Client()
const reacord = new ReacordDiscordJs(client)
-client.on("ready", () => {
+client.once(Events.ClientReady, () => {
console.log("Ready!")
})
await client.login(process.env.BOT_TOKEN)
```
-
-To use JSX in your code, run it with [tsx](https://npm.im/tsx):
-
-```bash
-npm install -D tsx
-npx tsx main.tsx
-```
-
-For production, I recommend compiling it with [tsup](https://npm.im/tsup):
-
-```bash
-npm install -D tsup
-npx tsup src/main.tsx --target node20
-```
diff --git a/packages/website/src/content/guides/1-sending-messages.md b/packages/website/src/content/guides/1-sending-messages.md
index 330a8a2..d9721dd 100644
--- a/packages/website/src/content/guides/1-sending-messages.md
+++ b/packages/website/src/content/guides/1-sending-messages.md
@@ -8,8 +8,8 @@ slug: sending-messages
You can send messages via Reacord to a channel like so.
-```jsx
-client.on("ready", () => {
+```tsx
+client.once(Events.ClientReady, () => {
const channel = await client.channels.fetch("abc123deadbeef")
reacord.createChannelMessage(channel).render("Hello, world!")
})
@@ -19,7 +19,9 @@ The `.createChannelMessage()` function creates a **Reacord instance**. You can p
Components rendered through this instance can include state and effects, and the message on Discord will update automatically.
-```jsx
+```tsx
+import { useEffect, useState } from "react"
+
function Uptime() {
const [startTime] = useState(Date.now())
const [currentTime, setCurrentTime] = useState(Date.now())
@@ -34,7 +36,7 @@ function Uptime() {
return <>this message has been shown for {currentTime - startTime}ms
}
-client.on("ready", () => {
+client.once(Events.ClientReady, () => {
const instance = reacord.createChannelMessage(channel)
instance.render()
})
@@ -42,10 +44,14 @@ client.on("ready", () => {
The instance can be rendered to multiple times, which will update the message each time.
-```jsx
-const Hello = ({ subject }) => <>Hello, {subject}!
+```tsx
+interface HelloProps {
+ subject: string
+}
-client.on("ready", () => {
+const Hello = ({ subject }: HelloProps) => <>Hello, {subject}!
+
+client.once(Events.ClientReady, () => {
const instance = reacord.createChannelMessage(channel)
instance.render()
instance.render()
@@ -54,7 +60,7 @@ client.on("ready", () => {
You can specify various options for the message:
-```jsx
+```tsx
const instance = reacord.createChannelMessage(channel, {
tts: true,
reply: {
@@ -75,7 +81,7 @@ If you no longer want to use the instance, you can clean it up in a few ways:
By default, Reacord has a max limit on the number of active instances, and deactivates older instances to conserve memory. This can be configured through the Reacord options:
-```js
+```ts
const reacord = new ReacordDiscordJs(client, {
// after sending four messages,
// the first one will be deactivated
@@ -91,29 +97,29 @@ This section also applies to other kinds of application commands, such as contex
To reply to a command interaction, use the `.createInteractionReply()` function. This function returns an instance that works the same way as the one from `.createChannelMessage()`. Here's an example:
-```jsx
-import { Client } from "discord.js"
+```tsx
+import { Client, Events } from "discord.js"
import { Button, ReacordDiscordJs } from "reacord"
import * as React from "react"
const client = new Client({ intents: [] })
const reacord = new ReacordDiscordJs(client)
-client.on("ready", () => {
+client.once(Events.ClientReady, () => {
client.application?.commands.create({
name: "ping",
description: "pong!",
})
})
-client.on("interactionCreate", (interaction) => {
+client.on(Events.InteractionCreate, (interaction) => {
if (interaction.isCommand() && interaction.commandName === "ping") {
// Use the createInteractionReply() function instead of createChannelMessage
reacord.createInteractionReply(interaction).render(<>pong!)
}
})
-client.login(process.env.DISCORD_TOKEN)
+await client.login(process.env.DISCORD_TOKEN)
```