Merge pull request #43 from domin-mnd/main

README.md

@@ -24,19 +24,21 @@ pnpm add reacord react discord.js
 
 <!-- prettier-ignore -->
 ```tsx
-import * as React from "react"
+import { useState } from "react"
 import { Embed, Button } from "reacord"
 
 function Counter() {
-  const [count, setCount] = React.useState(0)
+  const [count, setCount] = useState(0)
+
   return (
     <>
       <Embed title="Counter">
         This button has been clicked {count} times.
       </Embed>
-      <Button onClick={() => setCount(count + 1)}>
+      <Button
-        +1
+        label="+1"
-      </Button>
+        onClick={() => setCount(count + 1)}
+      />
     </>
   )
 }

packages/reacord/scripts/discordjs-manual-test.tsx

@@ -1,6 +1,8 @@
 import { raise } from "@reacord/helpers/raise.js"
 import {
 	Button,
+	Embed,
+	EmbedField,
 	Link,
 	Option,
 	ReacordDiscordJs,
@@ -11,7 +13,6 @@ import type { TextChannel } from "discord.js"
 import { ChannelType, Client, IntentsBitField } from "discord.js"
 import "dotenv/config"
 import { kebabCase } from "lodash-es"
-import * as React from "react"
 import { useState } from "react"
 
 const client = new Client({ intents: IntentsBitField.Flags.Guilds })
@@ -53,9 +54,57 @@ await createTest("basic", (channel) => {
 	reacord.createChannelMessage(channel).render("Hello, world!")
 })
 
+await createTest("readme counter", (channel) => {
+	interface EmbedCounterProps {
+		count: number
+		visible: boolean
+	}
+
+	function EmbedCounter({ count, visible }: EmbedCounterProps) {
+		if (!visible) return <></>
+
+		return (
+			<Embed title="the counter">
+				<EmbedField name="is it even?">{count % 2 ? "no" : "yes"}</EmbedField>
+			</Embed>
+		)
+	}
+
+	function Counter() {
+		const [showEmbed, setShowEmbed] = useState(false)
+		const [count, setCount] = useState(0)
+		const instance = useInstance()
+
+		return (
+			<>
+				this button was clicked {count} times
+				<EmbedCounter count={count} visible={showEmbed} />
+				<Button
+					style="primary"
+					label="clicc"
+					onClick={() => setCount(count + 1)}
+				/>
+				<Button
+					style="secondary"
+					label={showEmbed ? "hide embed" : "show embed"}
+					onClick={() => setShowEmbed(!showEmbed)}
+				/>
+				<Button
+					style="danger"
+					label="deactivate"
+					onClick={() => instance.destroy()}
+				/>
+			</>
+		)
+	}
+
+	reacord.createChannelMessage(channel).render(<Counter />)
+})
+
 await createTest("counter", (channel) => {
-	const Counter = () => {
+	function Counter() {
-		const [count, setCount] = React.useState(0)
+		const [count, setCount] = useState(0)
+
 		return (
 			<>
 				count: {count}

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
+```ts
-// main.jsx
+import { Client, Events } from "discord.js"
-import { Client } 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
-```

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
+```tsx
-client.on("ready", () => {
+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(<Uptime />)
 })
@@ -42,10 +44,14 @@ client.on("ready", () => {
 
 The instance can be rendered to multiple times, which will update the message each time.
 
-```jsx
+```tsx
-const Hello = ({ subject }) => <>Hello, {subject}!</>
+interface HelloProps {
+	subject: string
+}
 
-client.on("ready", () => {
+const Hello = ({ subject }: HelloProps) => <>Hello, {subject}!</>
+
+client.once(Events.ClientReady, () => {
 	const instance = reacord.createChannelMessage(channel)
 	instance.render(<Hello subject="World" />)
 	instance.render(<Hello subject="Moon" />)
@@ -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
+```tsx
-import { Client } from "discord.js"
+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)
 ```
 
 <aside>
@@ -122,15 +128,26 @@ This example uses <a href="https://discord.com/developers/docs/interactions/appl
 
 However, the process of creating commands can get really repetitive and error-prone. A command framework could help with this, or you could make a small helper:
 
-```jsx
+```tsx
-function handleCommands(client, commands) {
+import type { Client, CommandInteraction } from "discord.js"
-	client.on("ready", () => {
+
+interface Command {
+	// Command name
+	name: string
+	// A mandatory description for the command
+	description: string
+	// Specific handler for the command
+	run: (interaction: CommandInteraction) => Promise<void> | void
+}
+
+function handleCommands(client: Client, commands: Command[]) {
+	client.once(Events.ClientReady, () => {
 		for (const { name, description } of commands) {
 			client.application?.commands.create({ name, description })
 		}
 	})
 
-	client.on("interactionCreate", (interaction) => {
+	client.on(Events.InteractionCreate, (interaction) => {
 		if (interaction.isCommand()) {
 			for (const command of commands) {
 				if (interaction.commandName === command.name) {
@@ -142,7 +159,7 @@ function handleCommands(client, commands) {
 }
 ```
 
-```jsx
+```tsx
 handleCommands(client, [
 	{
 		name: "ping",
@@ -165,7 +182,7 @@ handleCommands(client, [
 
 Ephemeral replies are replies that only appear for one user. To create them, use the `.createInteractionReply()` function and provide `ephemeral` option.
 
-```jsx
+```tsx
 handleCommands(client, [
 	{
 		name: "pong",
@@ -183,7 +200,7 @@ handleCommands(client, [
 
 Additionally interaction replies may have `tts` option to turn on text-to-speech ability for the reply. To create such reply, use `.createInteractionReply()` function and provide `tts` option.
 
-```jsx
+```tsx
 handleCommands(client, [
 	{
 		name: "pong",

packages/website/src/content/guides/2-embeds.md

@@ -8,10 +8,15 @@ slug: embeds
 
 Reacord comes with an `<Embed />` component for sending rich embeds.
 
-```jsx
+```tsx
 import { Embed } from "reacord"
 
-function FancyMessage({ title, description }) {
+interface FancyMessageProps {
+	title: string
+	description: string
+}
+
+function FancyMessage({ title, description }: FancyMessageProps) {
 	return (
 		<Embed
 			title={title}
@@ -23,7 +28,7 @@ function FancyMessage({ title, description }) {
 }
 ```
 
-```jsx
+```tsx
 reacord
 	.createChannelMessage(channel)
 	.render(<FancyMessage title="Hello" description="World" />)
@@ -31,10 +36,15 @@ reacord
 
 Reacord also comes with multiple embed components, for defining embeds on a piece-by-piece basis. This enables composition:
 
-```jsx
+```tsx
 import { Embed, EmbedTitle } from "reacord"
 
-function FancyDetails({ title, description }) {
+interface FancyDetailsProps {
+	title: string
+	description: string
+}
+
+function FancyDetails({ title, description }: FancyDetailsProps) {
 	return (
 		<>
 			<EmbedTitle>{title}</EmbedTitle>
@@ -44,7 +54,11 @@ function FancyDetails({ title, description }) {
 	)
 }
 
-function FancyMessage({ children }) {
+interface FancyMessageProps {
+	children: React.ReactNode
+}
+
+function FancyMessage({ children }: FancyMessageProps) {
 	return (
 		<Embed color={0x00ff00} timestamp={Date.now()}>
 			{children}
@@ -53,7 +67,7 @@ function FancyMessage({ children }) {
 }
 ```
 
-```jsx
+```tsx
 reacord.createChannelMessage(channel).render(
 	<FancyMessage>
 		<FancyDetails title="Hello" description="World" />

packages/website/src/content/guides/3-buttons.md

@@ -8,10 +8,11 @@ slug: buttons
 
 Use the `<Button />` component to create a message with a button, and use the `onClick` callback to respond to button clicks.
 
-```jsx
+```tsx
 import { Button } from "reacord"
+import { useState } from "react"
 
-function Counter() {
+export function Counter() {
 	const [count, setCount] = useState(0)
 
 	return (
@@ -25,12 +26,12 @@ function Counter() {
 
 The `onClick` callback receives an `event` object. It includes some information, such as the user who clicked the button, and functions for creating new replies in response. These functions return message instances.
 
-```jsx
+```tsx
-import { Button } from "reacord"
+import { Button, type ComponentEvent } from "reacord"
 
-function TheButton() {
+export function SuspiciousButton() {
-	function handleClick(event) {
+	function handleClick(event: ComponentEvent) {
-		const name = event.guild.member.displayName || event.user.username
+		const name = event.guild.member.displayName ?? event.user.username
 
 		const publicReply = event.reply(`${name} clicked the button. wow`)
 		setTimeout(() => publicReply.destroy(), 3000)

packages/website/src/content/guides/4-links.md

@@ -8,10 +8,10 @@ slug: links
 
 In Discord, links are a type of button, and they work similarly. Clicking on it leads you to the given URL. They only have one style, and can't be listened to for clicks.
 
-```jsx
+```tsx
 import { Link } from "reacord"
 
-function AwesomeLinks() {
+export function AwesomeLinks() {
 	return (
 		<>
 			<Link label="look at this" url="https://google.com" />

packages/website/src/content/guides/5-select-menu.md

@@ -8,9 +8,16 @@ slug: select-menus
 
 To create a select menu, use the `Select` component, and pass a list of `Option` components as children. Use the `value` prop to set a currently selected value. You can respond to changes in the value via `onChangeValue`.
 
-```jsx
+```tsx
-export function FruitSelect({ onConfirm }) {
+import { Button, Option, Select } from "reacord"
-	const [value, setValue] = useState()
+import { useState } from "react"
+
+interface FruitSelectProps {
+	onConfirm: (choice: string) => void
+}
+
+export function FruitSelect({ onConfirm }: FruitSelectProps) {
+	const [value, setValue] = useState<string>()
 
 	return (
 		<>
@@ -35,7 +42,7 @@ export function FruitSelect({ onConfirm }) {
 }
 ```
 
-```jsx
+```tsx
 const instance = reacord.createChannelMessage(channel).render(
 	<FruitSelect
 		onConfirm={(value) => {
@@ -48,9 +55,13 @@ const instance = reacord.createChannelMessage(channel).render(
 
 For a multi-select, use the `multiple` prop, then you can use `values` and `onChangeMultiple` to handle multiple values.
 
-```jsx
+```tsx
-export function FruitSelect({ onConfirm }) {
+interface FruitSelectProps {
-	const [values, setValues] = useState([])
+	onConfirm: (choices: string[]) => void
+}
+
+export function FruitSelect({ onConfirm }: FruitSelectProps) {
+	const [values, setValues] = useState<string[]>([])
 
 	return (
 		<Select

packages/website/src/content/guides/6-use-instance.md

@@ -8,10 +8,10 @@ slug: use-instance
 
 You can use `useInstance` to get the current [instance](/guides/sending-messages) within a component. This can be used to let a component destroy or deactivate itself.
 
-```jsx
+```tsx
 import { Button, useInstance } from "reacord"
 
-function SelfDestruct() {
+export function SelfDestruct() {
 	const instance = useInstance()
 	return (
 		<Button