remove vercel config

...only when an interaction was handled

.changeset/five-wolves-destroy.md

@@ -0,0 +1,5 @@
+---
+"reacord": minor
+---
+
+breaking: more descriptive component event types

.changeset/many-pets-melt.md

@@ -0,0 +1,33 @@
+---
+"reacord": minor
+---
+
+add new descriptive adapter methods
+
+The reacord instance names have been updated, and the old names are now deprecated.
+
+- `send` -> `createChannelMessage`
+- `reply` -> `createInteractionReply`
+
+These new methods also accept discord JS options. Usage example:
+
+```ts
+// can accept either a channel object or a channel ID
+reacord.createChannelMessage(channel)
+reacord.createChannelMessage(channel, {
+	tts: true,
+})
+reacord.createChannelMessage(channel, {
+	reply: {
+		messageReference: "123456789012345678",
+		failIfNotExists: false,
+	},
+})
+
+reacord.createInteractionReply(interaction)
+reacord.createInteractionReply(interaction, {
+	ephemeral: true,
+})
+```
+
+These new methods replace the old ones, which are now deprecated.

.eslintrc.cjs

@@ -1,38 +0,0 @@
-require("@rushstack/eslint-patch/modern-module-resolution")
-
-/** @type {import('eslint').Linter.Config} */
-module.exports = {
-  extends: [require.resolve("@itsmapleleaf/configs/eslint")],
-  ignorePatterns: [
-    "**/node_modules/**",
-    "**/.cache/**",
-    "**/build/**",
-    "**/dist/**",
-    "**/coverage/**",
-    "**/public/**",
-  ],
-  parserOptions: {
-    project: require.resolve("./tsconfig.base.json"),
-    extraFileExtensions: [".astro"],
-  },
-  overrides: [
-    {
-      files: ["packages/website/cypress/**"],
-      parserOptions: {
-        project: require.resolve("./packages/website/cypress/tsconfig.json"),
-      },
-    },
-    {
-      files: ["*.astro"],
-      parser: "astro-eslint-parser",
-      parserOptions: {
-        parser: "@typescript-eslint/parser",
-      },
-      rules: {
-        "react/no-unknown-property": "off",
-        "react/jsx-key": "off",
-        "react/jsx-no-undef": "off",
-      },
-    },
-  ],
-}

.github/workflows/main.yml

@@ -1,53 +0,0 @@
-name: main
-
-on:
-  push:
-    branches: [main]
-  pull_request:
-
-env:
-  TEST_BOT_TOKEN: ${{ secrets.TEST_BOT_TOKEN }}
-  TEST_CHANNEL_ID: ${{ secrets.TEST_CHANNEL_ID }}
-  TEST_GUILD_ID: ${{ secrets.TEST_GUILD_ID }}
-
-concurrency:
-  group: ${{ github.workflow }}-${{ github.ref }}
-  cancel-in-progress: true
-
-jobs:
-  run-commands:
-    strategy:
-      fail-fast: false
-      matrix:
-        command:
-          # if these run in the same process, it dies,
-          # so we test them separate
-          - name: test reacord
-            run: pnpm -C packages/reacord test
-          # - name: test website
-          #   run: pnpm -C packages/website test
-          - name: build
-            run: pnpm --recursive run build
-          - name: lint
-            run: pnpm run lint
-          - name: typecheck
-            run: pnpm --recursive run typecheck
-    name: ${{ matrix.command.name }}
-    runs-on: ubuntu-latest
-    steps:
-      - name: checkout
-        uses: actions/checkout@v3
-
-      - name: setup pnpm
-        uses: pnpm/action-setup@v2
-        with:
-          version: 7.13.4
-
-      - name: setup node
-        uses: actions/setup-node@v3
-        with:
-          node-version: 16
-          cache: pnpm
-
-      - run: pnpm install --frozen-lockfile
-      - run: ${{ matrix.command.run }}

.github/workflows/release.yml

@@ -13,22 +13,15 @@ jobs:
     name: release
     runs-on: ubuntu-latest
     steps:
-      - name: checkout
+      - uses: actions/checkout@v3
-        uses: actions/checkout@v3
+      - uses: pnpm/action-setup@v2
-
-      - name: setup pnpm
-        uses: pnpm/action-setup@v2
         with:
-          version: 7.13.4
+          version: 8
-
+      - uses: actions/setup-node@v3
-      - name: setup node
-        uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 18
           cache: pnpm
-
+      - run: pnpm install --frozen-lockfile
-      - name: install deps
-        run: pnpm install --frozen-lockfile
 
       - name: changesets release
         id: changesets

.github/workflows/tests.yml

@@ -0,0 +1,44 @@
+name: tests
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+
+env:
+  TEST_BOT_TOKEN: ${{ secrets.TEST_BOT_TOKEN }}
+  TEST_CHANNEL_ID: ${{ secrets.TEST_CHANNEL_ID }}
+  TEST_GUILD_ID: ${{ secrets.TEST_GUILD_ID }}
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  tests:
+    name: ${{ matrix.script }}
+    runs-on: ubuntu-latest
+    strategy:
+      fail-fast: false
+      matrix:
+        script:
+          - lint
+          - build
+          - test
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/cache@v3
+        with:
+          path: node_modules
+          key: ${{ runner.os }}-node-${{ hashFiles('**/pnpm-lock.yaml') }}
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 8
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          cache: pnpm
+      - run: pnpm install --frozen-lockfile
+      - run: pnpm run ${{ matrix.script }}
+      - uses: stefanzweifel/git-auto-commit-action@v4
+        if: always()

.gitignore

@@ -5,8 +5,7 @@ coverage
 .env
 *.code-workspace
 .pnpm-debug.log
-
 build
 .cache
-
 .vercel
+*.tsbuildinfo

.prettierignore

@@ -1,7 +1,3 @@
-node_modules
-dist
-coverage
 pnpm-lock.yaml
-build
+/packages/website/public/api
-.cache
+.astro
-packages/website/public/api

.prettierrc.cjs

@@ -1,14 +0,0 @@
-const base = require("@itsmapleleaf/configs/prettier")
-
-module.exports = {
-  ...base,
-  plugins: [require.resolve("prettier-plugin-astro")],
-  overrides: [
-    {
-      files: "*.astro",
-      options: {
-        parser: "astro",
-      },
-    },
-  ],
-}

README.md

@@ -1,5 +1,5 @@
 <center>
-  <img src="./packages/website/app/assets/banner.png" alt="Reacord: Create interactive Discord messages using React">
+  <img src="packages/website/src/assets/banner.png" alt="Reacord: Create interactive Discord messages using React">
 </center>
 
 ## Installation ∙ [![npm](https://img.shields.io/npm/v/reacord?color=blue&style=flat-square)](https://www.npmjs.com/package/reacord)

package.json

@@ -2,25 +2,43 @@
   "name": "reacord-monorepo",
   "private": true,
   "scripts": {
-    "lint": "eslint --ext js,ts,tsx .",
+    "lint": "run-s --continue-on-error lint:*",
-    "lint-fix": "pnpm lint -- --fix",
+    "lint:eslint": "eslint . --fix --cache --cache-file=node_modules/.cache/.eslintcache --report-unused-disable-directives",
-    "format": "prettier --write .",
+    "lint:prettier": "prettier . \"**/*.astro\" --write --cache --list-different",
+    "lint:types": "tsc -b & pnpm -r --parallel run typecheck",
+    "astro-sync": "pnpm --filter website exec astro sync",
+    "test": "vitest",
     "build": "pnpm -r run build",
+    "build:website": "pnpm --filter website... run build",
     "start": "pnpm -C packages/website run start",
+    "start:website": "pnpm -C packages/website run start",
     "release": "pnpm -r run build && changeset publish"
   },
   "devDependencies": {
-    "@changesets/cli": "^2.25.0",
+    "@changesets/cli": "^2.26.2",
-    "@itsmapleleaf/configs": "^1.1.7",
+    "@itsmapleleaf/configs": "github:itsMapleLeaf/configs",
-    "@rushstack/eslint-patch": "^1.2.0",
+    "eslint": "^8.51.0",
-    "@types/eslint": "^8.4.6",
+    "npm-run-all": "^4.1.5",
-    "astro-eslint-parser": "^0.12.0",
+    "prettier": "^3.0.3",
-    "eslint": "^8.36.0",
+    "react": "^18.2.0",
-    "prettier": "^2.7.1",
+    "tailwindcss": "^3.3.3",
-    "prettier-plugin-astro": "^0.8.0",
+    "typescript": "^5.2.2",
-    "typescript": "^4.8.4"
+    "vitest": "^0.34.6"
   },
-  "resolutions": {
+  "prettier": "@itsmapleleaf/configs/prettier",
-    "esbuild": "latest"
+  "eslintConfig": {
+    "extends": [
+      "./node_modules/@itsmapleleaf/configs/eslint.config.cjs",
+      "./node_modules/@itsmapleleaf/configs/eslint.config.react.cjs"
+    ],
+    "ignorePatterns": [
+      "node_modules",
+      "dist",
+      "packages/website/public/api"
+    ],
+    "rules": {
+      "@typescript-eslint/no-non-null-assertion": "warn",
+      "@typescript-eslint/require-await": "off"
+    }
   }
 }

packages/helpers/convert-object-property-case.test.ts

@@ -1,9 +1,9 @@
+import { camelCaseDeep, snakeCaseDeep } from "./convert-object-property-case"
 import type {
 	CamelCasedPropertiesDeep,
 	SnakeCasedPropertiesDeep,
 } from "type-fest"
 import { expect, test } from "vitest"
-import { camelCaseDeep, snakeCaseDeep } from "./convert-object-property-case"
 
 test("camelCaseDeep", () => {
 	const input = {

packages/helpers/convert-object-property-case.ts

@@ -2,6 +2,7 @@ import { camelCase, isObject, snakeCase } from "lodash-es"
 import type {
 	CamelCasedPropertiesDeep,
 	SnakeCasedPropertiesDeep,
+	UnknownRecord,
 } from "type-fest"
 
 function convertKeyCaseDeep<Input, Output>(
@@ -18,11 +19,11 @@ function convertKeyCaseDeep<Input, Output>(
 		) as unknown as Output
 	}
 
-  const output: any = {}
+	const output = {} as UnknownRecord
 	for (const [key, value] of Object.entries(input)) {
 		output[convertKey(key)] = convertKeyCaseDeep(value, convertKey)
 	}
-  return output
+	return output as Output
 }
 
 export function camelCaseDeep<T>(input: T): CamelCasedPropertiesDeep<T> {

packages/helpers/is-instance-of.ts

@@ -1,7 +1,7 @@
-/**
+/** For narrowing instance types with array.filter */
- * for narrowing instance types with array.filter
- */
 export const isInstanceOf =
-  <T>(Constructor: new (...args: any[]) => T) =>
+	<Instance, Args extends unknown[]>(
-  (value: unknown): value is T =>
+		constructor: new (...args: Args) => Instance,
-    value instanceof Constructor
+	) =>
+	(value: unknown): value is Instance =>
+		value instanceof constructor

packages/helpers/is-object.ts

@@ -1,7 +1,3 @@
-export function isObject<T>(
+export function isObject(value: unknown): value is object {
-  value: T,
-): value is Exclude<T, Primitive | AnyFunction> {
 	return typeof value === "object" && value !== null
 }
-type Primitive = string | number | boolean | undefined | null
-type AnyFunction = (...args: any[]) => any

packages/helpers/json.ts

@@ -0,0 +1,7 @@
+export function safeJsonStringify(value: unknown): string {
+	try {
+		return JSON.stringify(value)
+	} catch {
+		return String(value)
+	}
+}

packages/helpers/omit.test.ts

@@ -0,0 +1,7 @@
+import { expect, test } from "vitest"
+import { omit } from "./omit.ts"
+
+test("omit", () => {
+	const subject = { a: 1, b: true }
+	expect(omit(subject, ["a"])).toStrictEqual({ b: true })
+})

packages/helpers/omit.test.types.ts

@@ -0,0 +1,3 @@
+import { omit } from "./omit.ts"
+
+omit({ a: 1, b: true }, ["a"]) satisfies { b: boolean }

packages/helpers/omit.ts

@@ -1,13 +1,10 @@
 export function omit<Subject extends object, Key extends PropertyKey>(
 	subject: Subject,
 	keys: Key[],
-  // hack: using a conditional type preserves union types
+) {
-): Subject extends any ? Omit<Subject, Key> : never {
+	const keySet = new Set<PropertyKey>(keys)
-  const result: any = {}
+	return Object.fromEntries(
-  for (const key in subject) {
+		Object.entries(subject).filter(([key]) => !keySet.has(key)),
-    if (!keys.includes(key as unknown as Key)) {
+		// hack: conditional type preserves unions
-      result[key] = subject[key]
+	) as Subject extends unknown ? Omit<Subject, Key> : never
-    }
-  }
-  return result
 }

packages/helpers/package.json

@@ -1,11 +1,15 @@
 {
   "name": "@reacord/helpers",
+  "type": "module",
   "version": "0.0.0",
   "private": true,
+  "scripts": {
+    "typecheck": "tsc -b"
+  },
   "dependencies": {
-    "@types/lodash-es": "^4.17.6",
+    "@types/lodash-es": "^4.17.9",
     "lodash-es": "^4.17.21",
-    "type-fest": "^2.17.0",
+    "type-fest": "^4.4.0",
-    "vitest": "^0.18.1"
+    "vitest": "^0.34.6"
   }
 }

packages/helpers/pick.ts

@@ -1,15 +1,11 @@
-import type { LoosePick, UnknownRecord } from "./types"
+import type { LoosePick } from "./types"
 
-export function pick<T, K extends keyof T | PropertyKey>(
+export function pick<T extends object, K extends keyof T | PropertyKey>(
 	object: T,
 	keys: K[],
-): LoosePick<T, K> {
+) {
-  const result: any = {}
+	const keySet = new Set<PropertyKey>(keys)
-  for (const key of keys) {
+	return Object.fromEntries(
-    const value = (object as UnknownRecord)[key]
+		Object.entries(object).filter(([key]) => keySet.has(key)),
-    if (value !== undefined) {
+	) as LoosePick<T, K>
-      result[key] = value
-    }
-  }
-  return result
 }

packages/helpers/prune-nullish-values.test.ts

@@ -3,7 +3,7 @@ import type { PruneNullishValues } from "./prune-nullish-values"
 import { pruneNullishValues } from "./prune-nullish-values"
 
 test("pruneNullishValues", () => {
-  type InputType = {
+	interface InputType {
 		a: string
 		b: string | null | undefined
 		c?: string
@@ -15,7 +15,6 @@ test("pruneNullishValues", () => {
 
 	const input: InputType = {
 		a: "a",
-    // eslint-disable-next-line unicorn/no-null
 		b: null,
 		c: undefined,
 		d: {

packages/helpers/prune-nullish-values.ts

@@ -1,21 +1,25 @@
 import { isObject } from "./is-object"
 
 export function pruneNullishValues<T>(input: T): PruneNullishValues<T> {
-  if (Array.isArray(input)) {
-    return input.filter(Boolean).map((item) => pruneNullishValues(item)) as any
-  }
-
 	if (!isObject(input)) {
-    return input as any
+		return input as PruneNullishValues<T>
 	}
 
-  const result: any = {}
+	if (Array.isArray(input)) {
-  for (const [key, value] of Object.entries(input as any)) {
+		return input
+			.filter(Boolean)
+			.map(
+				(item) => pruneNullishValues(item) as unknown,
+			) as PruneNullishValues<T>
+	}
+
+	const result: Record<string, unknown> = {}
+	for (const [key, value] of Object.entries(input)) {
 		if (value != undefined) {
 			result[key] = pruneNullishValues(value)
 		}
 	}
-  return result
+	return result as PruneNullishValues<T>
 }
 
 export type PruneNullishValues<Input> = Input extends object

packages/helpers/reject-after.ts

@@ -1,5 +1,5 @@
-import { setTimeout } from "node:timers/promises"
 import { toError } from "./to-error.js"
+import { setTimeout } from "node:timers/promises"
 
 export async function rejectAfter(
 	timeMs: number,

packages/helpers/retry-with-timeout.ts

@@ -7,7 +7,7 @@ export async function retryWithTimeout<T>(
 	callback: () => Promise<T> | T,
 ): Promise<T> {
 	const startTime = Date.now()
-  // eslint-disable-next-line no-constant-condition
+	// eslint-disable-next-line no-constant-condition, @typescript-eslint/no-unnecessary-condition
 	while (true) {
 		try {
 			return await callback()

packages/helpers/tsconfig.json

@@ -0,0 +1,3 @@
+{
+	"extends": "../../tsconfig.base.json"
+}

packages/helpers/types.test.types.ts

@@ -0,0 +1,4 @@
+import { type LooseOmit, type LoosePick, typeEquals } from "./types.ts"
+
+typeEquals<LoosePick<{ a: 1; b: 2 }, "a">, { a: 1 }>(true)
+typeEquals<LooseOmit<{ a: 1; b: 2 }, "a">, { b: 2 }>(true)

packages/helpers/types.ts

@@ -1,11 +1,21 @@
-export type MaybePromise<T> = T | Promise<T>
+import { raise } from "./raise.ts"
+
+export type MaybePromise<T> = T | PromiseLike<T>
 
 export type ValueOf<Type> = Type extends ReadonlyArray<infer Value>
 	? Value
 	: Type[keyof Type]
 
-export type UnknownRecord = Record<PropertyKey, unknown>
+export type LoosePick<Shape, Keys extends PropertyKey> = Simplify<{
+	[Key in Extract<Keys, keyof Shape>]: Shape[Key]
+}>
 
-export type LoosePick<Shape, Keys extends PropertyKey> = {
+export type LooseOmit<Shape, Keys extends PropertyKey> = Simplify<{
-  [Key in Keys]: Shape extends Record<Key, infer Value> ? Value : never
+	[Key in Exclude<keyof Shape, Keys>]: Shape[Key]
-}
+}>
+
+export type Simplify<T> = { [Key in keyof T]: T[Key] } & NonNullable<unknown>
+
+export const typeEquals = <A, B>(
+	_result: A extends B ? (B extends A ? true : false) : false,
+) => raise("typeEquals() should not be called at runtime")

packages/helpers/wait-for.ts

@@ -1,9 +1,10 @@
 import { setTimeout } from "node:timers/promises"
+import type { MaybePromise } from "./types.ts"
 
 const maxTime = 1000
 
 export async function waitFor<Result>(
-  predicate: () => Result,
+	predicate: () => MaybePromise<Result>,
 ): Promise<Awaited<Result>> {
 	const startTime = Date.now()
 	let lastError: unknown
@@ -17,5 +18,6 @@ export async function waitFor<Result>(
 		}
 	}
 
+	// eslint-disable-next-line @typescript-eslint/no-throw-literal
 	throw lastError ?? new Error("Timeout")
 }

packages/helpers/with-logged-method-calls.ts

@@ -7,7 +7,7 @@ export function withLoggedMethodCalls<T extends object>(value: T) {
 			if (typeof value !== "function") {
 				return value
 			}
-      return (...values: any[]) => {
+			return (...values: unknown[]) => {
 				console.info(
 					`${String(property)}(${values
 						.map((value) =>
@@ -17,7 +17,7 @@ export function withLoggedMethodCalls<T extends object>(value: T) {
 						)
 						.join(", ")})`,
 				)
-        return value.apply(target, values)
+				return value.apply(target, values) as unknown
 			}
 		},
 	}) as T

packages/reacord/CHANGELOG.md

@@ -1,5 +1,32 @@
 # reacord
 
+## 0.5.5
+
+### Patch Changes
+
+- ced48a3: distribute d.ts files again instead of the source
+
+  distributing the source causes typecheck errors when the modules it imports from (in this case, `@reacord/helpers`) don't exist in the end users' projects, so we'll just distribute d.ts files instead like normal. failed experiment :(
+
+## 0.5.4
+
+### Patch Changes
+
+- 41c87e3: fix type definitions
+
+  `"types"` wasn't updated, oops!
+
+  technically the typedefs were already correctly defined via `"exports"`, but this may not be picked up depending on the tsconfig, so I'll ensure both are used for compatibility purposes. but this might be worth a note in the docs; pretty much every modern TS Node project should be using a tsconfig that doesn't require setting `"types"`
+
+## 0.5.3
+
+### Patch Changes
+
+- 104b175: ensure message is edited from arbitrary component updates
+- 156cf90: fix interaction handling
+- 0bab505: fix DJS deprecation warning on isStringSelectMenu
+- d76f316: ensure action rows handle child interactions
+
 ## 0.5.2
 
 ### Patch Changes

packages/reacord/env.d.ts

@@ -0,0 +1 @@
+/// <reference types="@total-typescript/ts-reset" />

packages/reacord/library/core/component-event.ts

@@ -1,52 +1,60 @@
 import type { ReactNode } from "react"
 import type { ReacordInstance } from "./instance"
 
-/**
+/** @category Component Event */
- * @category Component Event
+export interface ComponentEvent {
- */
-export type ComponentEvent = {
 	/**
-   * The message associated with this event.
+	 * The message associated with this event. For example: with a button click,
-   * For example: with a button click,
 	 * this is the message that the button is on.
+	 *
 	 * @see https://discord.com/developers/docs/resources/channel#message-object
 	 */
-  message: MessageInfo
+	message: ComponentEventMessage
 
 	/**
 	 * The channel that this event occurred in.
+	 *
 	 * @see https://discord.com/developers/docs/resources/channel#channel-object
 	 */
-  channel: ChannelInfo
+	channel: ComponentEventChannel
 
 	/**
 	 * The user that triggered this event.
+	 *
 	 * @see https://discord.com/developers/docs/resources/user#user-object
 	 */
-  user: UserInfo
+	user: ComponentEventUser
 
 	/**
 	 * The guild that this event occurred in.
+	 *
 	 * @see https://discord.com/developers/docs/resources/guild#guild-object
 	 */
-  guild?: GuildInfo
+	guild?: ComponentEventGuild
+
+	/** Create a new reply to this event. */
+	reply(
+		content?: ReactNode,
+		options?: ComponentEventReplyOptions,
+	): ReacordInstance
 
 	/**
-   * Create a new reply to this event.
+	 * Create an ephemeral reply to this event, shown only to the user who
-   */
+	 * triggered it.
-  reply(content?: ReactNode): ReacordInstance
+	 *
-
+	 * @deprecated Use event.reply(content, { ephemeral: true })
-  /**
-   * Create an ephemeral reply to this event,
-   * shown only to the user who triggered it.
 	 */
 	ephemeralReply(content?: ReactNode): ReacordInstance
 }
 
-/**
+/** @category Component Event */
- * @category Component Event
+export interface ComponentEventReplyOptions {
- */
+	ephemeral?: boolean
-export type ChannelInfo = {
+	tts?: boolean
+}
+
+/** @category Component Event */
+export interface ComponentEventChannel {
 	id: string
 	name?: string
 	topic?: string
@@ -57,14 +65,12 @@ export type ChannelInfo = {
 	rateLimitPerUser?: number
 }
 
-/**
+/** @category Component Event */
- * @category Component Event
+export interface ComponentEventMessage {
- */
-export type MessageInfo = {
 	id: string
 	channelId: string
-  authorId: UserInfo
+	authorId: string
-  member?: GuildMemberInfo
+	member?: ComponentEventGuildMember
 	content: string
 	timestamp: string
 	editedTimestamp?: string
@@ -74,19 +80,15 @@ export type MessageInfo = {
 	mentions: string[]
 }
 
-/**
+/** @category Component Event */
- * @category Component Event
+export interface ComponentEventGuild {
- */
-export type GuildInfo = {
 	id: string
 	name: string
-  member: GuildMemberInfo
+	member: ComponentEventGuildMember
 }
 
-/**
+/** @category Component Event */
- * @category Component Event
+export interface ComponentEventGuildMember {
- */
-export type GuildMemberInfo = {
 	id: string
 	nick?: string
 	displayName: string
@@ -100,14 +102,12 @@ export type GuildMemberInfo = {
 	communicationDisabledUntil?: string
 }
 
-/**
+/** @category Component Event */
- * @category Component Event
+export interface ComponentEventUser {
- */
-export type UserInfo = {
 	id: string
 	username: string
 	discriminator: string
 	tag: string
-  avatarUrl: string
+	avatarUrl: string | null
 	accentColor?: number
 }

packages/reacord/library/core/components/action-row.tsx

@@ -1,22 +1,23 @@
 import type { ReactNode } from "react"
-import React from "react"
 import { ReacordElement } from "../../internal/element.js"
 import type { MessageOptions } from "../../internal/message"
 import { Node } from "../../internal/node.js"
+import type { ComponentInteraction } from "../../internal/interaction.js"
 
 /**
  * Props for an action row
+ *
  * @category Action Row
  */
-export type ActionRowProps = {
+export interface ActionRowProps {
 	children?: ReactNode
 }
 
 /**
  * An action row is a top-level container for message components.
  *
- * You don't need to use this; Reacord automatically creates action rows for you.
+ * You don't need to use this; Reacord automatically creates action rows for
- * But this can be useful if you want a specific layout.
+ * you. But this can be useful if you want a specific layout.
  *
  * ```tsx
  * // put buttons on two separate rows
@@ -37,11 +38,19 @@ export function ActionRow(props: ActionRowProps) {
 	)
 }
 
-class ActionRowNode extends Node<{}> {
+class ActionRowNode extends Node<ActionRowProps> {
 	override modifyMessageOptions(options: MessageOptions): void {
 		options.actionRows.push([])
 		for (const child of this.children) {
 			child.modifyMessageOptions(options)
 		}
 	}
+	handleComponentInteraction(interaction: ComponentInteraction) {
+		for (const child of this.children) {
+			if (child.handleComponentInteraction(interaction)) {
+				return true
+			}
+		}
+		return false
+	}
 }

packages/reacord/library/core/components/button-shared-props.ts

@@ -2,9 +2,10 @@ import type { ReactNode } from "react"
 
 /**
  * Common props between button-like components
+ *
  * @category Button
  */
-export type ButtonSharedProps = {
+export interface ButtonSharedProps {
 	/** The text on the button. Rich formatting (markdown) is not supported here. */
 	label?: ReactNode
 
@@ -12,13 +13,12 @@ export type ButtonSharedProps = {
 	disabled?: boolean
 
 	/**
-   * Renders an emoji to the left of the text.
+	 * Renders an emoji to the left of the text. Has to be a literal emoji
-   * Has to be a literal emoji character (e.g. 🍍),
+	 * character (e.g. 🍍), or an emoji code, like
-   * or an emoji code, like `<:plus_one:778531744860602388>`.
+	 * `<:plus_one:778531744860602388>`.
 	 *
-   * To get an emoji code, type your emoji in Discord chat
+	 * To get an emoji code, type your emoji in Discord chat with a backslash `\`
-   * with a backslash `\` in front.
+	 * in front. The bot has to be in the emoji's guild to use it.
-   * The bot has to be in the emoji's guild to use it.
 	 */
 	emoji?: string
 }

packages/reacord/library/core/components/button.tsx

@@ -1,5 +1,4 @@
 import { randomUUID } from "node:crypto"
-import React from "react"
 import { ReacordElement } from "../../internal/element.js"
 import type { ComponentInteraction } from "../../internal/interaction"
 import type { MessageOptions } from "../../internal/message"
@@ -8,30 +7,23 @@ import { Node } from "../../internal/node.js"
 import type { ComponentEvent } from "../component-event"
 import type { ButtonSharedProps } from "./button-shared-props"
 
-/**
+/** @category Button */
- * @category Button
- */
 export type ButtonProps = ButtonSharedProps & {
 	/**
 	 * The style determines the color of the button and signals intent.
+	 *
 	 * @see https://discord.com/developers/docs/interactions/message-components#button-object-button-styles
 	 */
 	style?: "primary" | "secondary" | "success" | "danger"
 
-  /**
+	/** Happens when a user clicks the button. */
-   * Happens when a user clicks the button.
-   */
 	onClick: (event: ButtonClickEvent) => void
 }
 
-/**
+/** @category Button */
- * @category Button
- */
 export type ButtonClickEvent = ComponentEvent
 
-/**
+/** @category Button */
- * @category Button
- */
 export function Button(props: ButtonProps) {
 	return (
 		<ReacordElement props={props} createNode={() => new ButtonNode(props)}>
@@ -46,7 +38,7 @@ class ButtonNode extends Node<ButtonProps> {
 	private customId = randomUUID()
 
 	// this has text children, but buttons themselves shouldn't yield text
-  // eslint-disable-next-line class-methods-use-this
+	// eslint-disable-next-line @typescript-eslint/class-literal-property-style
 	override get text() {
 		return ""
 	}
@@ -74,4 +66,4 @@ class ButtonNode extends Node<ButtonProps> {
 	}
 }
 
-class ButtonLabelNode extends Node<{}> {}
+class ButtonLabelNode extends Node<Record<string, never>> {}

packages/reacord/library/core/components/embed-author.tsx

@@ -1,23 +1,18 @@
 import type { ReactNode } from "react"
-import React from "react"
 import { ReacordElement } from "../../internal/element.js"
 import { Node } from "../../internal/node.js"
 import { EmbedChildNode } from "./embed-child.js"
 import type { EmbedOptions } from "./embed-options"
 
-/**
+/** @category Embed */
- * @category Embed
+export interface EmbedAuthorProps {
- */
-export type EmbedAuthorProps = {
 	name?: ReactNode
 	children?: ReactNode
 	url?: string
 	iconUrl?: string
 }
 
-/**
+/** @category Embed */
- * @category Embed
- */
 export function EmbedAuthor(props: EmbedAuthorProps) {
 	return (
 		<ReacordElement props={props} createNode={() => new EmbedAuthorNode(props)}>
@@ -38,4 +33,4 @@ class EmbedAuthorNode extends EmbedChildNode<EmbedAuthorProps> {
 	}
 }
 
-class AuthorTextNode extends Node<{}> {}
+class AuthorTextNode extends Node<Record<string, never>> {}

packages/reacord/library/core/components/embed-field.tsx

@@ -1,23 +1,18 @@
 import type { ReactNode } from "react"
-import React from "react"
 import { ReacordElement } from "../../internal/element.js"
 import { Node } from "../../internal/node.js"
 import { EmbedChildNode } from "./embed-child.js"
 import type { EmbedOptions } from "./embed-options"
 
-/**
+/** @category Embed */
- * @category Embed
+export interface EmbedFieldProps {
- */
-export type EmbedFieldProps = {
 	name: ReactNode
 	value?: ReactNode
 	inline?: boolean
 	children?: ReactNode
 }
 
-/**
+/** @category Embed */
- * @category Embed
- */
 export function EmbedField(props: EmbedFieldProps) {
 	return (
 		<ReacordElement props={props} createNode={() => new EmbedFieldNode(props)}>
@@ -25,7 +20,7 @@ export function EmbedField(props: EmbedFieldProps) {
 				{props.name}
 			</ReacordElement>
 			<ReacordElement props={{}} createNode={() => new FieldValueNode({})}>
-        {props.value || props.children}
+				{props.value ?? props.children}
 			</ReacordElement>
 		</ReacordElement>
 	)
@@ -42,5 +37,5 @@ class EmbedFieldNode extends EmbedChildNode<EmbedFieldProps> {
 	}
 }
 
-class FieldNameNode extends Node<{}> {}
+class FieldNameNode extends Node<Record<string, never>> {}
-class FieldValueNode extends Node<{}> {}
+class FieldValueNode extends Node<Record<string, never>> {}

packages/reacord/library/core/components/embed-footer.tsx

@@ -1,23 +1,18 @@
 import type { ReactNode } from "react"
-import React from "react"
 import { ReacordElement } from "../../internal/element.js"
 import { Node } from "../../internal/node.js"
 import { EmbedChildNode } from "./embed-child.js"
 import type { EmbedOptions } from "./embed-options"
 
-/**
+/** @category Embed */
- * @category Embed
+export interface EmbedFooterProps {
- */
-export type EmbedFooterProps = {
 	text?: ReactNode
 	children?: ReactNode
 	iconUrl?: string
 	timestamp?: string | number | Date
 }
 
-/**
+/** @category Embed */
- * @category Embed
- */
 export function EmbedFooter({ text, children, ...props }: EmbedFooterProps) {
 	return (
 		<ReacordElement props={props} createNode={() => new EmbedFooterNode(props)}>
@@ -42,4 +37,4 @@ class EmbedFooterNode extends EmbedChildNode<
 	}
 }
 
-class FooterTextNode extends Node<{}> {}
+class FooterTextNode extends Node<Record<string, never>> {}

packages/reacord/library/core/components/embed-image.tsx

@@ -1,18 +1,13 @@
-import React from "react"
 import { ReacordElement } from "../../internal/element.js"
 import { EmbedChildNode } from "./embed-child.js"
 import type { EmbedOptions } from "./embed-options"
 
-/**
+/** @category Embed */
- * @category Embed
+export interface EmbedImageProps {
- */
-export type EmbedImageProps = {
 	url: string
 }
 
-/**
+/** @category Embed */
- * @category Embed
- */
 export function EmbedImage(props: EmbedImageProps) {
 	return (
 		<ReacordElement

packages/reacord/library/core/components/embed-options.ts

@@ -1,5 +1,5 @@
-import type { Except, SnakeCasedPropertiesDeep } from "type-fest"
 import type { EmbedProps } from "./embed"
+import type { Except, SnakeCasedPropertiesDeep } from "type-fest"
 
 export type EmbedOptions = SnakeCasedPropertiesDeep<
 	Except<EmbedProps, "timestamp" | "children"> & {

packages/reacord/library/core/components/embed-thumbnail.tsx

@@ -1,18 +1,13 @@
-import React from "react"
 import { ReacordElement } from "../../internal/element.js"
 import { EmbedChildNode } from "./embed-child.js"
 import type { EmbedOptions } from "./embed-options"
 
-/**
+/** @category Embed */
- * @category Embed
+export interface EmbedThumbnailProps {
- */
-export type EmbedThumbnailProps = {
 	url: string
 }
 
-/**
+/** @category Embed */
- * @category Embed
- */
 export function EmbedThumbnail(props: EmbedThumbnailProps) {
 	return (
 		<ReacordElement

packages/reacord/library/core/components/embed-title.tsx

@@ -1,21 +1,16 @@
 import type { ReactNode } from "react"
-import React from "react"
 import { ReacordElement } from "../../internal/element.js"
 import { Node } from "../../internal/node.js"
 import { EmbedChildNode } from "./embed-child.js"
 import type { EmbedOptions } from "./embed-options"
 
-/**
+/** @category Embed */
- * @category Embed
+export interface EmbedTitleProps {
- */
-export type EmbedTitleProps = {
 	children: ReactNode
 	url?: string
 }
 
-/**
+/** @category Embed */
- * @category Embed
- */
 export function EmbedTitle({ children, ...props }: EmbedTitleProps) {
 	return (
 		<ReacordElement props={props} createNode={() => new EmbedTitleNode(props)}>
@@ -33,4 +28,4 @@ class EmbedTitleNode extends EmbedChildNode<Omit<EmbedTitleProps, "children">> {
 	}
 }
 
-class TitleTextNode extends Node<{}> {}
+class TitleTextNode extends Node<Record<string, never>> {}

packages/reacord/library/core/components/embed.tsx

@@ -1,6 +1,6 @@
 import { snakeCaseDeep } from "@reacord/helpers/convert-object-property-case"
 import { omit } from "@reacord/helpers/omit"
-import React from "react"
+import type React from "react"
 import { ReacordElement } from "../../internal/element.js"
 import type { MessageOptions } from "../../internal/message"
 import { Node } from "../../internal/node.js"
@@ -12,7 +12,7 @@ import type { EmbedOptions } from "./embed-options"
  * @category Embed
  * @see https://discord.com/developers/docs/resources/channel#embed-object
  */
-export type EmbedProps = {
+export interface EmbedProps {
 	title?: string
 	description?: string
 	url?: string
@@ -53,7 +53,7 @@ class EmbedNode extends Node<EmbedProps> {
 				child.modifyEmbedOptions(embed)
 			}
 			if (child instanceof TextNode) {
-        embed.description = (embed.description || "") + child.props
+				embed.description = (embed.description ?? "") + child.props
 			}
 		}
 

packages/reacord/library/core/components/link.tsx

@@ -1,13 +1,10 @@
-import React from "react"
 import { ReacordElement } from "../../internal/element.js"
 import type { MessageOptions } from "../../internal/message"
 import { getNextActionRow } from "../../internal/message"
 import { Node } from "../../internal/node.js"
 import type { ButtonSharedProps } from "./button-shared-props"
 
-/**
+/** @category Link */
- * @category Link
- */
 export type LinkProps = ButtonSharedProps & {
 	/** The URL the link should lead to */
 	url: string
@@ -15,14 +12,12 @@ export type LinkProps = ButtonSharedProps & {
 	children?: string
 }
 
-/**
+/** @category Link */
- * @category Link
- */
 export function Link({ label, children, ...props }: LinkProps) {
 	return (
 		<ReacordElement props={props} createNode={() => new LinkNode(props)}>
 			<ReacordElement props={{}} createNode={() => new LinkTextNode({})}>
-        {label || children}
+				{label ?? children}
 			</ReacordElement>
 		</ReacordElement>
 	)
@@ -40,4 +35,4 @@ class LinkNode extends Node<Omit<LinkProps, "label" | "children">> {
 	}
 }
 
-class LinkTextNode extends Node<{}> {}
+class LinkTextNode extends Node<Record<string, never>> {}

packages/reacord/library/core/components/option-node.ts

@@ -15,5 +15,5 @@ export class OptionNode extends Node<
 	}
 }
 
-export class OptionLabelNode extends Node<{}> {}
+export class OptionLabelNode extends Node<Record<string, never>> {}
-export class OptionDescriptionNode extends Node<{}> {}
+export class OptionDescriptionNode extends Node<Record<string, never>> {}

packages/reacord/library/core/components/option.tsx

@@ -1,5 +1,4 @@
 import type { ReactNode } from "react"
-import React from "react"
 import { ReacordElement } from "../../internal/element"
 import {
 	OptionDescriptionNode,
@@ -7,10 +6,8 @@ import {
 	OptionNode,
 } from "./option-node"
 
-/**
+/** @category Select */
- * @category Select
+export interface OptionProps {
- */
-export type OptionProps = {
 	/** The internal value of this option */
 	value: string
 	/** The text shown to the user. This takes priority over `children` */
@@ -23,19 +20,16 @@ export type OptionProps = {
 	/**
 	 * Renders an emoji to the left of the text.
 	 *
-   * Has to be a literal emoji character (e.g. 🍍),
+	 * Has to be a literal emoji character (e.g. 🍍), or an emoji code, like
-   * or an emoji code, like `<:plus_one:778531744860602388>`.
+	 * `<:plus_one:778531744860602388>`.
 	 *
-   * To get an emoji code, type your emoji in Discord chat
+	 * To get an emoji code, type your emoji in Discord chat with a backslash `\`
-   * with a backslash `\` in front.
+	 * in front. The bot has to be in the emoji's guild to use it.
-   * The bot has to be in the emoji's guild to use it.
 	 */
 	emoji?: string
 }
 
-/**
+/** @category Select */
- * @category Select
- */
 export function Option({
 	label,
 	children,
@@ -46,7 +40,7 @@ export function Option({
 		<ReacordElement props={props} createNode={() => new OptionNode(props)}>
 			{(label !== undefined || children !== undefined) && (
 				<ReacordElement props={{}} createNode={() => new OptionLabelNode({})}>
-          {label || children}
+					{label ?? children}
 				</ReacordElement>
 			)}
 			{description !== undefined && (

packages/reacord/library/core/components/select.tsx

@@ -1,7 +1,6 @@
 import { isInstanceOf } from "@reacord/helpers/is-instance-of"
 import { randomUUID } from "node:crypto"
 import type { ReactNode } from "react"
-import React from "react"
 import { ReacordElement } from "../../internal/element.js"
 import type { ComponentInteraction } from "../../internal/interaction"
 import type {
@@ -12,11 +11,10 @@ import type {
 import { Node } from "../../internal/node.js"
 import type { ComponentEvent } from "../component-event"
 import { OptionNode } from "./option-node"
+import { omit } from "@reacord/helpers/omit.js"
 
-/**
+/** @category Select */
- * @category Select
+export interface SelectProps {
- */
-export type SelectProps = {
 	children?: ReactNode
 	/** Sets the currently selected value */
 	value?: string
@@ -31,8 +29,8 @@ export type SelectProps = {
 	multiple?: boolean
 
 	/**
-   * With `multiple`, the minimum number of values that can be selected.
+	 * With `multiple`, the minimum number of values that can be selected. When
-   * When `multiple` is false or not defined, this is always 1.
+	 * `multiple` is false or not defined, this is always 1.
 	 *
 	 * This only limits the number of values that can be received by the user.
 	 * This does not limit the number of values that can be displayed by you.
@@ -40,44 +38,44 @@ export type SelectProps = {
 	minValues?: number
 
 	/**
-   * With `multiple`, the maximum number of values that can be selected.
+	 * With `multiple`, the maximum number of values that can be selected. When
-   * When `multiple` is false or not defined, this is always 1.
+	 * `multiple` is false or not defined, this is always 1.
 	 *
 	 * This only limits the number of values that can be received by the user.
 	 * This does not limit the number of values that can be displayed by you.
 	 */
 	maxValues?: number
 
-  /** When true, the select will be slightly faded, and cannot be interacted with. */
+	/**
+	 * When true, the select will be slightly faded, and cannot be interacted
+	 * with.
+	 */
 	disabled?: boolean
 
 	/**
-   * Called when the user inputs a selection.
+	 * Called when the user inputs a selection. Receives the entire select change
-   * Receives the entire select change event,
+	 * event, which can be used to create new replies, etc.
-   * which can be used to create new replies, etc.
 	 */
 	onChange?: (event: SelectChangeEvent) => void
 
 	/**
-   * Convenience shorthand for `onChange`, which receives the first selected value.
+	 * Convenience shorthand for `onChange`, which receives the first selected
+	 * value.
 	 */
 	onChangeValue?: (value: string, event: SelectChangeEvent) => void
 
-  /**
+	/** Convenience shorthand for `onChange`, which receives all selected values. */
-   * Convenience shorthand for `onChange`, which receives all selected values.
-   */
 	onChangeMultiple?: (values: string[], event: SelectChangeEvent) => void
 }
 
-/**
+/** @category Select */
- * @category Select
- */
 export type SelectChangeEvent = ComponentEvent & {
 	values: string[]
 }
 
 /**
  * See [the select menu guide](/guides/select-menu) for a usage example.
+ *
  * @category Select
  */
 export function Select(props: SelectProps) {
@@ -105,12 +103,13 @@ class SelectNode extends Node<SelectProps> {
 			values,
 			minValues = 0,
 			maxValues = 25,
-      children,
-      onChange,
-      onChangeValue,
-      onChangeMultiple,
 			...props
-    } = this.props
+		} = omit(this.props, [
+			"children",
+			"onChange",
+			"onChangeValue",
+			"onChangeMultiple",
+		])
 
 		const item: ActionRowItem = {
 			...props,

packages/reacord/library/core/instance-context.tsx

@@ -1,6 +1,6 @@
-import { raise } from "@reacord/helpers/raise"
+import type { ReacordInstance } from "./instance.js"
+import { raise } from "@reacord/helpers/raise.js"
 import * as React from "react"
-import type { ReacordInstance } from "./instance"
 
 const Context = React.createContext<ReacordInstance | undefined>(undefined)
 

packages/reacord/library/core/instance.ts

@@ -2,11 +2,12 @@ import type { ReactNode } from "react"
 
 /**
  * Represents an interactive message, which can later be replaced or deleted.
+ *
  * @category Core
  */
-export type ReacordInstance = {
+export interface ReacordInstance {
 	/** Render some JSX to this instance (edits the message) */
-  render: (content: ReactNode) => void
+	render: (content: ReactNode) => ReacordInstance
 
 	/** Remove this message */
 	destroy: () => void

packages/reacord/library/core/reacord-discord-js.ts

@@ -1,4 +1,4 @@
-/* eslint-disable class-methods-use-this */
+import { safeJsonStringify } from "@reacord/helpers/json"
 import { pick } from "@reacord/helpers/pick"
 import { pruneNullishValues } from "@reacord/helpers/prune-nullish-values"
 import { raise } from "@reacord/helpers/raise"
@@ -14,11 +14,12 @@ import type {
 import { ChannelMessageRenderer } from "../internal/renderers/channel-message-renderer"
 import { InteractionReplyRenderer } from "../internal/renderers/interaction-reply-renderer"
 import type {
-  ChannelInfo,
+	ComponentEventChannel,
-  GuildInfo,
+	ComponentEventGuild,
-  GuildMemberInfo,
+	ComponentEventGuildMember,
-  MessageInfo,
+	ComponentEventMessage,
-  UserInfo,
+	ComponentEventReplyOptions,
+	ComponentEventUser,
 } from "./component-event"
 import type { ReacordInstance } from "./instance"
 import type { ReacordConfig } from "./reacord"
@@ -26,14 +27,18 @@ import { Reacord } from "./reacord"
 
 /**
  * The Reacord adapter for Discord.js.
+ *
  * @category Core
  */
 export class ReacordDiscordJs extends Reacord {
-  constructor(private client: Discord.Client, config: ReacordConfig = {}) {
+	constructor(
+		private client: Discord.Client,
+		config: ReacordConfig = {},
+	) {
 		super(config)
 
 		client.on("interactionCreate", (interaction) => {
-      if (interaction.isButton() || interaction.isSelectMenu()) {
+			if (interaction.isButton() || interaction.isStringSelectMenu()) {
 				this.handleComponentInteraction(
 					this.createReacordComponentInteraction(interaction),
 				)
@@ -43,59 +48,116 @@ export class ReacordDiscordJs extends Reacord {
 
 	/**
 	 * Sends a message to a channel.
+	 *
+	 * @param target Discord channel object.
+	 * @param [options] Options for the channel message
+	 * @see https://reacord.mapleleaf.dev/guides/sending-messages
+	 * @see {@link Discord.MessageCreateOptions}
+	 */
+	public createChannelMessage(
+		target: Discord.ChannelResolvable,
+		options: Discord.MessageCreateOptions = {},
+	): ReacordInstance {
+		return this.createInstance(
+			this.createChannelMessageRenderer(target, options),
+		)
+	}
+
+	/**
+	 * Replies to a command interaction by sending a message.
+	 *
+	 * @param interaction Discord command interaction object.
+	 * @param [options] Custom options for the interaction reply method.
+	 * @see https://reacord.mapleleaf.dev/guides/sending-messages
+	 * @see {@link Discord.InteractionReplyOptions}
+	 */
+	public createInteractionReply(
+		interaction: Discord.CommandInteraction,
+		options: Discord.InteractionReplyOptions = {},
+	): ReacordInstance {
+		return this.createInstance(
+			this.createInteractionReplyRenderer(interaction, options),
+		)
+	}
+
+	/**
+	 * Sends a message to a channel.
+	 *
+	 * @deprecated Use reacord.createChannelMessage() instead.
 	 * @see https://reacord.mapleleaf.dev/guides/sending-messages
 	 */
-  override send(
+	public send(
-    channelId: string,
+		channel: Discord.ChannelResolvable,
 		initialContent?: React.ReactNode,
 	): ReacordInstance {
 		return this.createInstance(
-      this.createChannelRenderer(channelId),
+			this.createChannelMessageRenderer(channel, {}),
 			initialContent,
 		)
 	}
 
 	/**
 	 * Sends a message as a reply to a command interaction.
+	 *
+	 * @deprecated Use reacord.createInteractionReply() instead.
 	 * @see https://reacord.mapleleaf.dev/guides/sending-messages
 	 */
-  override reply(
+	public reply(
 		interaction: Discord.CommandInteraction,
 		initialContent?: React.ReactNode,
 	): ReacordInstance {
 		return this.createInstance(
-      this.createInteractionReplyRenderer(interaction),
+			this.createInteractionReplyRenderer(interaction, {}),
 			initialContent,
 		)
 	}
 
 	/**
 	 * Sends an ephemeral message as a reply to a command interaction.
+	 *
+	 * @deprecated Use reacord.createInteractionReply(interaction, { ephemeral:
+	 *   true })
 	 * @see https://reacord.mapleleaf.dev/guides/sending-messages
 	 */
-  override ephemeralReply(
+	public ephemeralReply(
 		interaction: Discord.CommandInteraction,
 		initialContent?: React.ReactNode,
 	): ReacordInstance {
 		return this.createInstance(
-      this.createEphemeralInteractionReplyRenderer(interaction),
+			this.createInteractionReplyRenderer(interaction, {
+				ephemeral: true,
+			}),
 			initialContent,
 		)
 	}
 
-  private createChannelRenderer(channelId: string) {
+	private createChannelMessageRenderer(
+		channelResolvable: Discord.ChannelResolvable,
+		messageCreateOptions?: Discord.MessageCreateOptions,
+	) {
 		return new ChannelMessageRenderer({
-      send: async (options) => {
+			send: async (messageOptions) => {
-        const channel =
+				let channel = this.client.channels.resolve(channelResolvable)
-          this.client.channels.cache.get(channelId) ??
+				if (!channel && typeof channelResolvable === "string") {
-          (await this.client.channels.fetch(channelId)) ??
+					channel = await this.client.channels.fetch(channelResolvable)
-          raise(`Channel ${channelId} not found`)
-
-        if (!channel.isTextBased()) {
-          raise(`Channel ${channelId} is not a text channel`)
 				}
 
-        const message = await channel.send(getDiscordMessageOptions(options))
+				if (!channel) {
+					const id =
+						typeof channelResolvable === "string"
+							? channelResolvable
+							: channelResolvable.id
+					raise(`Channel ${id} not found`)
+				}
+
+				if (!channel.isTextBased()) {
+					raise(`Channel ${channel.id} must be a text channel`)
+				}
+
+				const message = await channel.send({
+					...getDiscordMessageOptions(messageOptions),
+					...messageCreateOptions,
+				})
 				return createReacordMessage(message)
 			},
 		})
@@ -105,48 +167,25 @@ export class ReacordDiscordJs extends Reacord {
 		interaction:
 			| Discord.CommandInteraction
 			| Discord.MessageComponentInteraction,
+		interactionReplyOptions: Discord.InteractionReplyOptions,
 	) {
 		return new InteractionReplyRenderer({
-      type: "command",
+			interactionId: interaction.id,
-      id: interaction.id,
+			reply: async (messageOptions) => {
-      reply: async (options) => {
 				const message = await interaction.reply({
-          ...getDiscordMessageOptions(options),
+					...getDiscordMessageOptions(messageOptions),
+					...interactionReplyOptions,
 					fetchReply: true,
 				})
-        return createReacordMessage(message as Discord.Message)
+				return createReacordMessage(message)
 			},
-      followUp: async (options) => {
+			followUp: async (messageOptions) => {
 				const message = await interaction.followUp({
-          ...getDiscordMessageOptions(options),
+					...getDiscordMessageOptions(messageOptions),
+					...interactionReplyOptions,
 					fetchReply: true,
 				})
-        return createReacordMessage(message as Discord.Message)
+				return createReacordMessage(message)
-      },
-    })
-  }
-
-  private createEphemeralInteractionReplyRenderer(
-    interaction:
-      | Discord.CommandInteraction
-      | Discord.MessageComponentInteraction,
-  ) {
-    return new InteractionReplyRenderer({
-      type: "command",
-      id: interaction.id,
-      reply: async (options) => {
-        await interaction.reply({
-          ...getDiscordMessageOptions(options),
-          ephemeral: true,
-        })
-        return createEphemeralReacordMessage()
-      },
-      followUp: async (options) => {
-        await interaction.followUp({
-          ...getDiscordMessageOptions(options),
-          ephemeral: true,
-        })
-        return createEphemeralReacordMessage()
 			},
 		})
 	}
@@ -155,7 +194,7 @@ export class ReacordDiscordJs extends Reacord {
 		interaction: Discord.MessageComponentInteraction,
 	): ComponentInteraction {
 		// todo please dear god clean this up
-    const channel: ChannelInfo = interaction.channel
+		const channel: ComponentEventChannel = interaction.channel
 			? {
 					...pruneNullishValues(
 						pick(interaction.channel, [
@@ -171,7 +210,7 @@ export class ReacordDiscordJs extends Reacord {
 			  }
 			: raise("Non-channel interactions are not supported")
 
-    const message: MessageInfo =
+		const message: ComponentEventMessage =
 			interaction.message instanceof Discord.Message
 				? {
 						...pick(interaction.message, [
@@ -189,10 +228,12 @@ export class ReacordDiscordJs extends Reacord {
 							? new Date(interaction.message.editedTimestamp).toISOString()
 							: undefined,
 						mentions: interaction.message.mentions.users.map((u) => u.id),
+						authorId: interaction.message.author.id,
+						mentionEveryone: interaction.message.mentions.everyone,
 				  }
 				: raise("Message not found")
 
-    const member: GuildMemberInfo | undefined =
+		const member: ComponentEventGuildMember | undefined =
 			interaction.member instanceof Discord.GuildMember
 				? {
 						...pruneNullishValues(
@@ -212,21 +253,23 @@ export class ReacordDiscordJs extends Reacord {
 						premiumSince: interaction.member.premiumSince?.toISOString(),
 						communicationDisabledUntil:
 							interaction.member.communicationDisabledUntil?.toISOString(),
+						color: interaction.member.displayColor,
+						displayAvatarUrl: interaction.member.displayAvatarURL(),
 				  }
 				: undefined
 
-    const guild: GuildInfo | undefined = interaction.guild
+		const guild: ComponentEventGuild | undefined = interaction.guild
 			? {
 					...pruneNullishValues(pick(interaction.guild, ["id", "name"])),
 					member: member ?? raise("unexpected: member is undefined"),
 			  }
 			: undefined
 
-    const user: UserInfo = {
+		const user: ComponentEventUser = {
 			...pruneNullishValues(
 				pick(interaction.user, ["id", "username", "discriminator", "tag"]),
 			),
-      avatarUrl: interaction.user.avatarURL()!,
+			avatarUrl: interaction.user.avatarURL(),
 			accentColor: interaction.user.accentColor ?? undefined,
 		}
 
@@ -234,7 +277,11 @@ export class ReacordDiscordJs extends Reacord {
 			id: interaction.id,
 			customId: interaction.customId,
 			update: async (options: MessageOptions) => {
+				if (interaction.deferred || interaction.replied) {
+					await interaction.message.edit(getDiscordMessageOptions(options))
+				} else {
 					await interaction.update(getDiscordMessageOptions(options))
+				}
 			},
 			deferUpdate: async () => {
 				if (interaction.replied || interaction.deferred) return
@@ -245,14 +292,14 @@ export class ReacordDiscordJs extends Reacord {
 					...getDiscordMessageOptions(options),
 					fetchReply: true,
 				})
-        return createReacordMessage(message as Discord.Message)
+				return createReacordMessage(message)
 			},
 			followUp: async (options) => {
 				const message = await interaction.followUp({
 					...getDiscordMessageOptions(options),
 					fetchReply: true,
 				})
-        return createReacordMessage(message as Discord.Message)
+				return createReacordMessage(message)
 			},
 			event: {
 				channel,
@@ -260,15 +307,18 @@ export class ReacordDiscordJs extends Reacord {
 				user,
 				guild,
 
-        reply: (content?: ReactNode) =>
+				reply: (content?: ReactNode, options?: ComponentEventReplyOptions) =>
 					this.createInstance(
-            this.createInteractionReplyRenderer(interaction),
+						this.createInteractionReplyRenderer(interaction, options ?? {}),
 						content,
 					),
 
+				/** @deprecated Use event.reply(content, { ephemeral: true }) */
 				ephemeralReply: (content: ReactNode) =>
 					this.createInstance(
-            this.createEphemeralInteractionReplyRenderer(interaction),
+						this.createInteractionReplyRenderer(interaction, {
+							ephemeral: true,
+						}),
 						content,
 					),
 			},
@@ -281,7 +331,7 @@ export class ReacordDiscordJs extends Reacord {
 			}
 		}
 
-    if (interaction.isSelectMenu()) {
+		if (interaction.isStringSelectMenu()) {
 			return {
 				...baseProps,
 				type: "select",
@@ -307,19 +357,6 @@ function createReacordMessage(message: Discord.Message): Message {
 	}
 }
 
-function createEphemeralReacordMessage(): Message {
-  return {
-    edit: () => {
-      console.warn("Ephemeral messages can't be edited")
-      return Promise.resolve()
-    },
-    delete: () => {
-      console.warn("Ephemeral messages can't be deleted")
-      return Promise.resolve()
-    },
-  }
-}
-
 function convertButtonStyleToEnum(style: MessageButtonOptions["style"]) {
 	const styleMap = {
 		primary: Discord.ButtonStyle.Primary,
@@ -335,8 +372,7 @@ function convertButtonStyleToEnum(style: MessageButtonOptions["style"]) {
 // and also handle some edge cases, e.g. empty messages
 function getDiscordMessageOptions(reacordOptions: MessageOptions) {
 	const options = {
-    // eslint-disable-next-line unicorn/no-null
+		content: reacordOptions.content || undefined,
-    content: reacordOptions.content || null,
 		embeds: reacordOptions.embeds,
 		components: reacordOptions.actionRows.map((row) => ({
 			type: Discord.ComponentType.ActionRow,
@@ -364,6 +400,8 @@ function getDiscordMessageOptions(reacordOptions: MessageOptions) {
 						}
 					}
 
+					// future proofing
+					// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
 					if (component.type === "select") {
 						return {
 							...component,
@@ -375,13 +413,16 @@ function getDiscordMessageOptions(reacordOptions: MessageOptions) {
 						}
 					}
 
-          raise(`Unsupported component type: ${(component as any).type}`)
+					component satisfies never
+					throw new Error(
+						`Invalid component type ${safeJsonStringify(component)}}`,
+					)
 				},
 			),
 		})),
 	}
 
-  if (!options.content && !options.embeds?.length) {
+	if (!options.content && !options.embeds.length) {
 		options.content = "_ _"
 	}
 

packages/reacord/library/core/reacord.tsx

@@ -1,35 +1,28 @@
 import type { ReactNode } from "react"
-import React from "react"
+import type { ComponentInteraction } from "../internal/interaction.js"
-import type { ComponentInteraction } from "../internal/interaction"
 import { reconciler } from "../internal/reconciler.js"
-import type { Renderer } from "../internal/renderers/renderer"
+import type { Renderer } from "../internal/renderers/renderer.js"
-import type { ReacordInstance } from "./instance"
+import { InstanceProvider } from "./instance-context.js"
-import { InstanceProvider } from "./instance-context"
+import type { ReacordInstance } from "./instance.js"
 
-/**
+/** @category Core */
- * @category Core
+export interface ReacordConfig {
- */
-export type ReacordConfig = {
 	/**
-   * The max number of active instances.
+	 * The max number of active instances. When this limit is exceeded, the oldest
-   * When this limit is exceeded, the oldest instances will be disabled.
+	 * instances will be disabled.
 	 */
 	maxInstances?: number
 }
 
 /**
- * The main Reacord class that other Reacord adapters should extend.
+ * The main Reacord class that other Reacord adapters should extend. Only use
- * Only use this directly if you're making [a custom adapter](/guides/custom-adapters).
+ * this directly if you're making [a custom adapter](/guides/custom-adapters).
  */
 export abstract class Reacord {
 	private renderers: Renderer[] = []
 
 	constructor(private readonly config: ReacordConfig = {}) {}
 
-  abstract send(...args: unknown[]): ReacordInstance
-  abstract reply(...args: unknown[]): ReacordInstance
-  abstract ephemeralReply(...args: unknown[]): ReacordInstance
-
 	protected handleComponentInteraction(interaction: ComponentInteraction) {
 		for (const renderer of this.renderers) {
 			if (renderer.handleComponentInteraction(interaction)) return
@@ -41,23 +34,20 @@ export abstract class Reacord {
 	}
 
 	protected createInstance(renderer: Renderer, initialContent?: ReactNode) {
-    if (this.renderers.length > this.maxInstances) {
+		if (this.renderers.length > this.maxInstances && this.renderers[0]) {
-      this.deactivate(this.renderers[0]!)
+			this.deactivate(this.renderers[0])
 		}
 
 		this.renderers.push(renderer)
 
-    const container = reconciler.createContainer(
+		const container: unknown = reconciler.createContainer(
 			renderer,
 			0,
-      // eslint-disable-next-line unicorn/no-null
 			null,
 			false,
-      // eslint-disable-next-line unicorn/no-null
 			null,
 			"reacord",
 			() => {},
-      // eslint-disable-next-line unicorn/no-null
 			null,
 		)
 
@@ -67,6 +57,7 @@ export abstract class Reacord {
 					<InstanceProvider value={instance}>{content}</InstanceProvider>,
 					container,
 				)
+				return instance
 			},
 			deactivate: () => {
 				this.deactivate(renderer)

packages/reacord/library/internal/channel.ts

@@ -1,5 +1,5 @@
 import type { Message, MessageOptions } from "./message"
 
-export type Channel = {
+export interface Channel {
 	send(message: MessageOptions): Promise<Message>
 }

packages/reacord/library/internal/container.ts

@@ -25,7 +25,9 @@ export class Container<T> {
 		return this.items.find(predicate)
 	}
 
-  findType<U extends T>(type: new (...args: any[]) => U): U | undefined {
+	findType<U extends T>(
+		type: new (...args: Array<NonNullable<unknown>>) => U,
+	): U | undefined {
 		for (const item of this.items) {
 			if (item instanceof type) return item
 		}

packages/reacord/library/internal/element.ts

@@ -1,6 +1,6 @@
+import type { Node } from "./node"
 import type { ReactNode } from "react"
 import React from "react"
-import type { Node } from "./node"
 
 export function ReacordElement<Props>(props: {
 	props: Props

packages/reacord/library/internal/interaction.ts

@@ -17,7 +17,7 @@ export type SelectInteraction = BaseComponentInteraction<
 	SelectChangeEvent
 >
 
-export type BaseInteraction<Type extends string> = {
+export interface BaseInteraction<Type extends string> {
 	type: Type
 	id: string
 	reply(messageOptions: MessageOptions): Promise<Message>

packages/reacord/library/internal/message.ts

@@ -1,9 +1,9 @@
-import { last } from "@reacord/helpers/last"
-import type { Except } from "type-fest"
 import type { EmbedOptions } from "../core/components/embed-options"
 import type { SelectProps } from "../core/components/select"
+import { last } from "@reacord/helpers/last"
+import type { Except } from "type-fest"
 
-export type MessageOptions = {
+export interface MessageOptions {
 	content: string
 	embeds: EmbedOptions[]
 	actionRows: ActionRow[]
@@ -16,7 +16,7 @@ export type ActionRowItem =
 	| MessageLinkOptions
 	| MessageSelectOptions
 
-export type MessageButtonOptions = {
+export interface MessageButtonOptions {
 	type: "button"
 	customId: string
 	label?: string
@@ -25,7 +25,7 @@ export type MessageButtonOptions = {
 	emoji?: string
 }
 
-export type MessageLinkOptions = {
+export interface MessageLinkOptions {
 	type: "link"
 	url: string
 	label?: string
@@ -39,14 +39,14 @@ export type MessageSelectOptions = Except<SelectProps, "children" | "value"> & {
 	options: MessageSelectOptionOptions[]
 }
 
-export type MessageSelectOptionOptions = {
+export interface MessageSelectOptionOptions {
 	label: string
 	value: string
 	description?: string
 	emoji?: string
 }
 
-export type Message = {
+export interface Message {
 	edit(options: MessageOptions): Promise<void>
 	delete(): Promise<void>
 }

packages/reacord/library/internal/node.ts

@@ -1,4 +1,3 @@
-/* eslint-disable class-methods-use-this */
 import { Container } from "./container.js"
 import type { ComponentInteraction } from "./interaction"
 import type { MessageOptions } from "./message"
@@ -8,9 +7,11 @@ export abstract class Node<Props> {
 
 	constructor(public props: Props) {}
 
-  modifyMessageOptions(options: MessageOptions) {}
+	modifyMessageOptions(_options: MessageOptions) {
+		// noop
+	}
 
-  handleComponentInteraction(interaction: ComponentInteraction): boolean {
+	handleComponentInteraction(_interaction: ComponentInteraction): boolean {
 		return false
 	}
 

packages/reacord/library/internal/reconciler.ts

@@ -29,7 +29,6 @@ const config: HostConfig<
 	cancelTimeout: global.clearTimeout,
 	noTimeout: -1,
 
-  // eslint-disable-next-line unicorn/no-null
 	getRootHostContext: () => null,
 	getChildHostContext: (parentContext) => parentContext,
 
@@ -42,7 +41,7 @@ const config: HostConfig<
 			raise(`Missing createNode function`)
 		}
 
-    const node = props.createNode(props.props)
+		const node: unknown = props.createNode(props.props)
 		if (!(node instanceof Node)) {
 			raise(`createNode function did not return a Node`)
 		}
@@ -51,13 +50,11 @@ const config: HostConfig<
 	},
 	createTextInstance: (text) => new TextNode(text),
 	shouldSetTextContent: () => false,
-  detachDeletedInstance: (instance) => {},
+	detachDeletedInstance: (_instance) => {},
 	beforeActiveInstanceBlur: () => {},
 	afterActiveInstanceBlur: () => {},
-  // eslint-disable-next-line unicorn/no-null
+	getInstanceFromNode: (_node: unknown) => null,
-  getInstanceFromNode: (node: any) => null,
+	getInstanceFromScope: (_scopeInstance: unknown) => null,
-  // eslint-disable-next-line unicorn/no-null
-  getInstanceFromScope: (scopeInstance: any) => null,
 
 	clearContainer: (renderer) => {
 		renderer.nodes.clear()
@@ -93,12 +90,11 @@ const config: HostConfig<
 		node.props = newText
 	},
 
-  // eslint-disable-next-line unicorn/no-null
 	prepareForCommit: () => null,
 	resetAfterCommit: (renderer) => {
 		renderer.render()
 	},
-  prepareScopeUpdate: (scopeInstance: any, instance: any) => {},
+	prepareScopeUpdate: (_scopeInstance: unknown, _instance: unknown) => {},
 
 	preparePortalMount: () => raise("Portals are not supported"),
 	getPublicInstance: () => raise("Refs are currently not supported"),

packages/reacord/library/internal/renderers/interaction-reply-renderer.ts

@@ -1,4 +1,3 @@
-import type { Interaction } from "../interaction"
 import type { Message, MessageOptions } from "../message"
 import { Renderer } from "./renderer"
 
@@ -6,17 +5,23 @@ import { Renderer } from "./renderer"
 // so we know whether to call reply() or followUp()
 const repliedInteractionIds = new Set<string>()
 
+export type InteractionReplyRendererImplementation = {
+	interactionId: string
+	reply: (options: MessageOptions) => Promise<Message>
+	followUp: (options: MessageOptions) => Promise<Message>
+}
+
 export class InteractionReplyRenderer extends Renderer {
-  constructor(private interaction: Interaction) {
+	constructor(private implementation: InteractionReplyRendererImplementation) {
 		super()
 	}
 
 	protected createMessage(options: MessageOptions): Promise<Message> {
-    if (repliedInteractionIds.has(this.interaction.id)) {
+		if (repliedInteractionIds.has(this.implementation.interactionId)) {
-      return this.interaction.followUp(options)
+			return this.implementation.followUp(options)
 		}
 
-    repliedInteractionIds.add(this.interaction.id)
+		repliedInteractionIds.add(this.implementation.interactionId)
-    return this.interaction.reply(options)
+		return this.implementation.reply(options)
 	}
 }

packages/reacord/library/internal/renderers/renderer.ts

@@ -1,9 +1,9 @@
-import { Subject } from "rxjs"
-import { concatMap } from "rxjs/operators"
 import { Container } from "../container.js"
 import type { ComponentInteraction } from "../interaction"
 import type { Message, MessageOptions } from "../message"
 import type { Node } from "../node.js"
+import { Subject } from "rxjs"
+import { concatMap } from "rxjs/operators"
 
 type UpdatePayload =
 	| { action: "update" | "deactivate"; options: MessageOptions }
@@ -47,14 +47,12 @@ export abstract class Renderer {
 	}
 
 	handleComponentInteraction(interaction: ComponentInteraction) {
+		for (const node of this.nodes) {
+			if (node.handleComponentInteraction(interaction)) {
 				this.componentInteraction = interaction
-
 				setTimeout(() => {
 					this.updates.next({ action: "deferUpdate", interaction })
 				}, 500)
-
-    for (const node of this.nodes) {
-      if (node.handleComponentInteraction(interaction)) {
 				return true
 			}
 		}

packages/reacord/package.json

@@ -2,8 +2,7 @@
   "name": "reacord",
   "type": "module",
   "description": "Create interactive Discord messages using React.",
-  "version": "0.5.2",
+  "version": "0.5.5",
-  "types": "./dist/main.d.ts",
   "homepage": "https://reacord.mapleleaf.dev",
   "repository": "https://github.com/itsMapleLeaf/reacord.git",
   "changelog": "https://github.com/itsMapleLeaf/reacord/releases",
@@ -24,6 +23,7 @@
     "README.md",
     "LICENSE"
   ],
+  "types": "./dist/main.d.ts",
   "exports": {
     ".": {
       "import": "./dist/main.js",
@@ -36,19 +36,19 @@
     }
   },
   "scripts": {
-    "build": "cp ../../README.md . && cp ../../LICENSE . && tsup library/main.ts --target node16 --format cjs,esm --dts --sourcemap",
+    "build": "cpy ../../README.md ../../LICENSE . && tsup library/main.ts --target node18 --format cjs,esm --sourcemap --dts --dts-resolve",
     "build-watch": "pnpm build -- --watch",
     "test": "vitest --coverage --no-watch",
     "test-dev": "vitest",
     "test-manual": "nodemon --exec tsx --ext ts,tsx ./scripts/discordjs-manual-test.tsx",
-    "typecheck": "tsc --noEmit"
+    "typecheck": "tsc -b"
   },
   "dependencies": {
-    "@types/node": "*",
+    "@types/node": "^20.8.4",
-    "@types/react": "*",
+    "@types/react": "^18.2.27",
-    "@types/react-reconciler": "^0.28.0",
+    "@types/react-reconciler": "^0.28.5",
     "react-reconciler": "^0.29.0",
-    "rxjs": "^7.5.6"
+    "rxjs": "^7.8.1"
   },
   "peerDependencies": {
     "discord.js": "^14",
@@ -61,23 +61,19 @@
   },
   "devDependencies": {
     "@reacord/helpers": "workspace:*",
-    "@types/lodash-es": "^4.17.6",
+    "@types/lodash-es": "^4.17.9",
-    "c8": "^7.12.0",
+    "c8": "^8.0.1",
-    "discord.js": "^14.0.3",
+    "cpy-cli": "^5.0.0",
-    "dotenv": "^16.0.1",
+    "discord.js": "^14.13.0",
+    "dotenv": "^16.3.1",
     "lodash-es": "^4.17.21",
-    "nodemon": "^2.0.19",
+    "nodemon": "^3.0.1",
-    "prettier": "^2.7.1",
+    "prettier": "^3.0.3",
     "pretty-ms": "^8.0.0",
     "react": "^18.2.0",
-    "tsup": "^6.1.3",
+    "tsup": "^7.2.0",
-    "tsx": "^3.8.0",
+    "tsx": "^3.13.0",
-    "type-fest": "^2.17.0",
+    "type-fest": "^4.4.0"
-    "typescript": "^4.7.4",
-    "vitest": "^0.18.1"
-  },
-  "resolutions": {
-    "esbuild": "latest"
   },
   "release-it": {
     "git": {

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

@@ -1,9 +1,4 @@
-import type { TextChannel } from "discord.js"
+import { raise } from "@reacord/helpers/raise.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"
 import {
 	Button,
 	Link,
@@ -11,16 +6,26 @@ import {
 	ReacordDiscordJs,
 	Select,
 	useInstance,
-} from "../library/main"
+} from "../library/main.js"
+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 })
 const reacord = new ReacordDiscordJs(client)
 
 await client.login(process.env.TEST_BOT_TOKEN)
 
-const guild = await client.guilds.fetch(process.env.TEST_GUILD_ID!)
+const guild = await client.guilds.fetch(
+	process.env.TEST_GUILD_ID ?? raise("TEST_GUILD_ID not defined"),
+)
 
-const category = await guild.channels.fetch(process.env.TEST_CATEGORY_ID!)
+const category = await guild.channels.fetch(
+	process.env.TEST_CATEGORY_ID ?? raise("TEST_CATEGORY_ID not defined"),
+)
 if (category?.type !== ChannelType.GuildCategory) {
 	throw new Error(
 		`channel ${process.env.TEST_CATEGORY_ID} is not a guild category. received ${category?.type}`,
@@ -34,7 +39,7 @@ for (const [, channel] of category.children.cache) {
 let prefix = 0
 const createTest = async (
 	name: string,
-  block: (channel: TextChannel) => void | Promise<unknown>,
+	block: (channel: TextChannel) => unknown,
 ) => {
 	prefix += 1
 	const channel = await category.children.create({
@@ -45,7 +50,7 @@ const createTest = async (
 }
 
 await createTest("basic", (channel) => {
-  reacord.send(channel.id, "Hello, world!")
+	reacord.createChannelMessage(channel).render("Hello, world!")
 })
 
 await createTest("counter", (channel) => {
@@ -68,7 +73,7 @@ await createTest("counter", (channel) => {
 			</>
 		)
 	}
-  reacord.send(channel.id, <Counter />)
+	reacord.createChannelMessage(channel).render(<Counter />)
 })
 
 await createTest("select", (channel) => {
@@ -97,8 +102,7 @@ await createTest("select", (channel) => {
 		)
 	}
 
-  const instance = reacord.send(
+	const instance = reacord.createChannelMessage(channel).render(
-    channel.id,
 		<FruitSelect
 			onConfirm={(value) => {
 				instance.render(`you chose ${value}`)
@@ -109,8 +113,7 @@ await createTest("select", (channel) => {
 })
 
 await createTest("ephemeral button", (channel) => {
-  reacord.send(
+	reacord.createChannelMessage(channel).render(
-    channel.id,
 		<>
 			<Button
 				label="public clic"
@@ -120,7 +123,7 @@ await createTest("ephemeral button", (channel) => {
 			/>
 			<Button
 				label="clic"
-        onClick={(event) => event.ephemeralReply("you clic")}
+				onClick={(event) => event.reply("you clic", { ephemeral: true })}
 			/>
 		</>,
 	)
@@ -131,9 +134,11 @@ await createTest("delete this", (channel) => {
 		const instance = useInstance()
 		return <Button label="delete this" onClick={() => instance.destroy()} />
 	}
-  reacord.send(channel.id, <DeleteThis />)
+	reacord.createChannelMessage(channel).render(<DeleteThis />)
 })
 
 await createTest("link", (channel) => {
-  reacord.send(channel.id, <Link label="hi" url="https://mapleleaf.dev" />)
+	reacord
+		.createChannelMessage(channel)
+		.render(<Link label="hi" url="https://mapleleaf.dev" />)
 })

packages/reacord/test/action-row.test.tsx

@@ -1,4 +1,3 @@
-import React from "react"
 import { test } from "vitest"
 import { ActionRow, Button, Select } from "../library/main"
 import { ReacordTester } from "./test-adapter"

packages/reacord/test/commonjs-require.test.ts

@@ -8,5 +8,5 @@ beforeAll(() => {
 
 test("can require commonjs", () => {
 	const require = createRequire(import.meta.url)
-  expect(() => require("../dist/main.cjs")).not.toThrow()
+	expect(() => require("../dist/main.cjs") as unknown).not.toThrow()
 })

packages/reacord/test/embed.test.tsx

@@ -1,4 +1,3 @@
-import React from "react"
 import { test } from "vitest"
 import {
 	Embed,

packages/reacord/test/ephemeral-reply.test.ts

@@ -1,2 +1,3 @@
 import { test } from "vitest"
+
 test.todo("ephemeral reply")

packages/reacord/test/link.test.tsx

@@ -1,4 +1,3 @@
-import React from "react"
 import { test } from "vitest"
 import { Link } from "../library/main"
 import { ReacordTester } from "./test-adapter"

packages/reacord/test/reacord.test.tsx

@@ -1,13 +1,14 @@
-import * as React from "react"
-import { test } from "vitest"
 import { Button, Embed, EmbedField, EmbedTitle } from "../library/main"
 import { ReacordTester } from "./test-adapter"
+import * as React from "react"
+import { test } from "vitest"
 
 test("rendering behavior", async () => {
 	const tester = new ReacordTester()
 
-  const reply = tester.reply()
+	const reply = tester
-  reply.render(<KitchenSinkCounter onDeactivate={() => reply.deactivate()} />)
+		.createInteractionReply()
+		.render(<KitchenSinkCounter onDeactivate={() => reply.deactivate()} />)
 
 	await tester.assertMessages([
 		{
@@ -244,8 +245,7 @@ test("rendering behavior", async () => {
 test("delete", async () => {
 	const tester = new ReacordTester()
 
-  const reply = tester.reply()
+	const reply = tester.createInteractionReply().render(
-  reply.render(
 		<>
 			some text
 			<Embed>some embed</Embed>

packages/reacord/test/select.test.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react"
+import { useState } from "react"
 import { expect, test, vi } from "vitest"
 import { Button, Option, Select } from "../library/main"
 import { ReacordTester } from "./test-adapter"
@@ -53,9 +53,7 @@ test("single select", async () => {
 		])
 	}
 
-  const reply = tester.reply()
+	tester.createInteractionReply().render(<TestSelect />)
-
-  reply.render(<TestSelect />)
 	await assertSelect([])
 	expect(onSelect).toHaveBeenCalledTimes(0)
 
@@ -119,22 +117,24 @@ test("multiple select", async () => {
 		])
 	}
 
-  const reply = tester.reply()
+	tester.createInteractionReply().render(<TestSelect />)
-
-  reply.render(<TestSelect />)
 	await assertSelect([])
 	expect(onSelect).toHaveBeenCalledTimes(0)
 
 	await tester.findSelectByPlaceholder("select").select("1", "3")
 	await assertSelect(expect.arrayContaining(["1", "3"]) as unknown as string[])
 	expect(onSelect).toHaveBeenCalledWith(
-    expect.objectContaining({ values: expect.arrayContaining(["1", "3"]) }),
+		expect.objectContaining({
+			values: expect.arrayContaining(["1", "3"]) as unknown,
+		}),
 	)
 
 	await tester.findSelectByPlaceholder("select").select("2")
 	await assertSelect(expect.arrayContaining(["2"]) as unknown as string[])
 	expect(onSelect).toHaveBeenCalledWith(
-    expect.objectContaining({ values: expect.arrayContaining(["2"]) }),
+		expect.objectContaining({
+			values: expect.arrayContaining(["2"]) as unknown,
+		}),
 	)
 
 	await tester.findSelectByPlaceholder("select").select()
@@ -144,7 +144,7 @@ test("multiple select", async () => {
 
 test("optional onSelect + unknown value", async () => {
 	const tester = new ReacordTester()
-  tester.reply().render(<Select placeholder="select" />)
+	tester.createInteractionReply().render(<Select placeholder="select" />)
 	await tester.findSelectByPlaceholder("select").select("something")
 	await tester.assertMessages([
 		{

packages/reacord/test/test-adapter.ts

@@ -1,5 +1,3 @@
-/* eslint-disable class-methods-use-this */
-/* eslint-disable require-await */
 import { logPretty } from "@reacord/helpers/log-pretty"
 import { omit } from "@reacord/helpers/omit"
 import { pruneNullishValues } from "@reacord/helpers/prune-nullish-values"
@@ -10,10 +8,11 @@ import { setTimeout } from "node:timers/promises"
 import type { ReactNode } from "react"
 import { expect } from "vitest"
 import type {
-  ChannelInfo,
+	ComponentEventChannel,
-  GuildInfo,
+	ComponentEventGuild,
-  MessageInfo,
+	ComponentEventMessage,
-  UserInfo,
+	ComponentEventReplyOptions,
+	ComponentEventUser,
 } from "../library/core/component-event"
 import type { ButtonClickEvent } from "../library/core/components/button"
 import type { SelectChangeEvent } from "../library/core/components/select"
@@ -23,18 +22,18 @@ import type { Channel } from "../library/internal/channel"
 import { Container } from "../library/internal/container"
 import type {
 	ButtonInteraction,
-  CommandInteraction,
 	SelectInteraction,
 } from "../library/internal/interaction"
 import type { Message, MessageOptions } from "../library/internal/message"
 import { ChannelMessageRenderer } from "../library/internal/renderers/channel-message-renderer"
-import { InteractionReplyRenderer } from "../library/internal/renderers/interaction-reply-renderer"
+import {
+	InteractionReplyRenderer,
+	type InteractionReplyRendererImplementation,
+} from "../library/internal/renderers/interaction-reply-renderer"
 
 export type MessageSample = ReturnType<ReacordTester["sampleMessages"]>[0]
 
-/**
+/** A Record adapter for automated tests. WIP */
- * A Record adapter for automated tests. WIP
- */
 export class ReacordTester extends Reacord {
 	private messageContainer = new Container<TestMessage>()
 
@@ -46,26 +45,28 @@ export class ReacordTester extends Reacord {
 		return [...this.messageContainer]
 	}
 
-  override send(initialContent?: ReactNode): ReacordInstance {
+	public createChannelMessage(): ReacordInstance {
 		return this.createInstance(
 			new ChannelMessageRenderer(new TestChannel(this.messageContainer)),
-      initialContent,
 		)
 	}
 
-  override reply(initialContent?: ReactNode): ReacordInstance {
+	public createMessageReply(): ReacordInstance {
+		return this.createInstance(
+			new ChannelMessageRenderer(new TestChannel(this.messageContainer)),
+		)
+	}
+
+	public createInteractionReply(
+		_options?: ComponentEventReplyOptions,
+	): ReacordInstance {
 		return this.createInstance(
 			new InteractionReplyRenderer(
 				new TestCommandInteraction(this.messageContainer),
 			),
-      initialContent,
 		)
 	}
 
-  override ephemeralReply(initialContent?: ReactNode): ReacordInstance {
-    return this.reply(initialContent)
-  }
-
 	assertMessages(expected: MessageSample[]) {
 		return waitFor(() => {
 			expect(this.sampleMessages()).toEqual(expected)
@@ -73,7 +74,7 @@ export class ReacordTester extends Reacord {
 	}
 
 	async assertRender(content: ReactNode, expected: MessageSample[]) {
-    const instance = this.reply()
+		const instance = this.createInteractionReply()
 		instance.render(content)
 		await this.assertMessages(expected)
 		instance.destroy()
@@ -175,9 +176,8 @@ class TestMessage implements Message {
 	}
 }
 
-class TestCommandInteraction implements CommandInteraction {
+class TestCommandInteraction implements InteractionReplyRendererImplementation {
-  readonly type = "command"
+	readonly interactionId = "test-command-interaction"
-  readonly id = "test-command-interaction"
 	readonly channelId = "test-channel-id"
 
 	constructor(private messageContainer: Container<TestMessage>) {}
@@ -252,17 +252,19 @@ class TestSelectInteraction
 class TestComponentEvent {
 	constructor(private tester: ReacordTester) {}
 
-  message: MessageInfo = {} as any // todo
+	message: ComponentEventMessage = {} as ComponentEventMessage // todo
-  channel: ChannelInfo = {} as any // todo
+	channel: ComponentEventChannel = {} as ComponentEventChannel // todo
-  user: UserInfo = {} as any // todo
+	user: ComponentEventUser = {} as ComponentEventUser // todo
-  guild: GuildInfo = {} as any // todo
+	guild: ComponentEventGuild = {} as ComponentEventGuild // todo
 
 	reply(content?: ReactNode): ReacordInstance {
-    return this.tester.reply(content)
+		return this.tester.createInteractionReply().render(content)
 	}
 
 	ephemeralReply(content?: ReactNode): ReacordInstance {
-    return this.tester.ephemeralReply(content)
+		return this.tester
+			.createInteractionReply({ ephemeral: true })
+			.render(content)
 	}
 }
 
@@ -274,7 +276,10 @@ class TestSelectChangeEvent
 	extends TestComponentEvent
 	implements SelectChangeEvent
 {
-  constructor(readonly values: string[], tester: ReacordTester) {
+	constructor(
+		readonly values: string[],
+		tester: ReacordTester,
+	) {
 		super(tester)
 	}
 }

packages/reacord/test/text-children.test.tsx

@@ -1,4 +1,3 @@
-import * as React from "react"
 import { test } from "vitest"
 import {
 	Button,

packages/reacord/test/use-instance.test.tsx

@@ -1,9 +1,8 @@
-import React from "react"
-import { describe, expect, it } from "vitest"
 import type { ReacordInstance } from "../library/main"
 import { Button, useInstance } from "../library/main"
 import type { MessageSample } from "./test-adapter"
 import { ReacordTester } from "./test-adapter"
+import { describe, expect, it } from "vitest"
 
 describe("useInstance", () => {
 	it("returns the instance of itself", async () => {
@@ -50,7 +49,9 @@ describe("useInstance", () => {
 		}
 
 		const tester = new ReacordTester()
-    const instance = tester.send(<TestComponent name="parent" />)
+		const instance = tester
+			.createChannelMessage()
+			.render(<TestComponent name="parent" />)
 
 		await tester.assertMessages([messageOutput("parent")])
 		expect(instanceFromHook).toBe(instance)

packages/reacord/tsconfig.json

@@ -1,4 +1,7 @@
 {
 	"extends": "../../tsconfig.base.json",
-  "include": ["**/*.ts", "**/*.tsx", "**/*.cjs", "**/*.mjs"]
+	"compilerOptions": {
+		"jsx": "react-jsx"
+	},
+	"exclude": ["node_modules", "dist"]
 }

packages/website/CHANGELOG.md

@@ -1,5 +1,29 @@
 # website
 
+## 0.4.6
+
+### Patch Changes
+
+- Updated dependencies [ced48a3]
+  - reacord@0.5.5
+
+## 0.4.5
+
+### Patch Changes
+
+- Updated dependencies [41c87e3]
+  - reacord@0.5.4
+
+## 0.4.4
+
+### Patch Changes
+
+- Updated dependencies [104b175]
+- Updated dependencies [156cf90]
+- Updated dependencies [0bab505]
+- Updated dependencies [d76f316]
+  - reacord@0.5.3
+
 ## 0.4.3
 
 ### Patch Changes

packages/website/astro.config.mjs

@@ -1,3 +1,5 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
 import prefetch from "@astrojs/prefetch"
 import react from "@astrojs/react"
 import tailwind from "@astrojs/tailwind"
@@ -7,11 +9,12 @@ import { defineConfig } from "astro/config"
 export default defineConfig({
 	integrations: [
 		tailwind({
-      config: {
 			applyBaseStyles: false,
-      },
 		}),
 		react(),
 		prefetch(),
 	],
+	markdown: {
+		shikiConfig: {},
+	},
 })

packages/website/package.json

@@ -1,42 +1,41 @@
 {
   "type": "module",
   "name": "website",
-  "version": "0.4.3",
+  "version": "0.4.6",
   "private": true,
   "sideEffects": false,
   "scripts": {
     "dev": "run-p --race --print-label dev:*",
     "dev:typedoc": "typedoc --watch",
     "dev:astro": "astro dev",
-    "test": "node ./scripts/test.js",
-    "test-dev": "run-p --race --print-label dev:* test-dev:*",
-    "test-dev:cypress": "wait-on http-get://localhost:3000 && cypress open",
     "start": "astro preview",
     "build": "typedoc && astro build",
-    "typecheck": "tsc --noEmit && tsc --project cypress/tsconfig.json --noEmit"
+    "typecheck": "astro check && tsc -b"
   },
   "dependencies": {
-    "@astrojs/prefetch": "^0.2.0",
+    "@astrojs/prefetch": "^0.3.0",
-    "@astrojs/react": "^2.1.0",
+    "@astrojs/react": "^2.3.2",
     "@fontsource/jetbrains-mono": "^4.5.12",
     "@fontsource/rubik": "^4.5.14",
-    "@heroicons/react": "^2.0.16",
+    "@heroicons/react": "^2.0.18",
-    "@tailwindcss/typography": "^0.5.9",
+    "@reacord/helpers": "workspace:^",
-    "astro": "^2.1.2",
+    "@tailwindcss/typography": "^0.5.10",
-    "clsx": "^1.2.1",
+    "astro": "^2.10.15",
+    "clsx": "^2.0.0",
     "reacord": "workspace:*",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "tailwind-merge": "^1.14.0"
   },
   "devDependencies": {
-    "@astrojs/tailwind": "^3.1.0",
+    "@astrojs/tailwind": "^4.0.0",
-    "@types/node": "*",
+    "@total-typescript/ts-reset": "^0.5.1",
-    "@types/react": "^18.0.28",
+    "@types/node": "^20.8.4",
-    "@types/react-dom": "^18.0.11",
+    "@types/react": "^18.2.27",
+    "@types/react-dom": "^18.2.12",
     "npm-run-all": "^4.1.5",
-    "tailwindcss": "^3.2.7",
+    "tailwindcss": "^3.3.3",
-    "typedoc": "^0.23.26",
+    "typedoc": "^0.25.2",
-    "typescript": "^4.9.5",
     "wait-on": "^7.0.1"
   }
 }

packages/website/src/components/app-footer.astro

@@ -1,11 +1,19 @@
 ---
 import { HeartIcon } from "@heroicons/react/20/solid"
+import { twMerge } from "tailwind-merge"
 import ExternalLink from "./external-link.astro"
+
+export interface Props {
+	class?: string
+}
 ---
 
-<footer class="container text-xs opacity-75">
+<footer class={twMerge("text-xs opacity-75", Astro.props.class)}>
 	<address class="not-italic">
-    &copy; {new Date().getFullYear()} itsMapleLeaf
+		&copy; {new Date().getFullYear()}
+		<ExternalLink class="link" href="https://github.com/itsMapleLeaf">
+			itsMapleLeaf
+		</ExternalLink>
 	</address>
 	<p>
 		Coded with <HeartIcon className="inline w-4 align-sub" /> using{" "}

packages/website/src/components/guide-layout.astro

@@ -9,16 +9,16 @@ const guides = await getCollection("guides")
 <Layout>
 	<div class="isolate">
 		<header
-      class="bg-slate-700/30 shadow sticky top-0 backdrop-blur-sm transition z-10 flex"
+			class="sticky top-0 z-10 flex bg-slate-700/30 shadow backdrop-blur-sm transition"
 		>
 			<div class="container">
 				<MainNavigation />
 			</div>
 		</header>
 		<main class="container mt-8 flex items-start gap-4">
-      <nav class="w-48 sticky top-24 hidden md:block">
+			<nav class="sticky top-24 hidden w-48 md:block">
 				<h2 class="text-2xl">Guides</h2>
-        <ul class="mt-3 flex flex-col gap-2 items-start">
+				<ul class="mt-3 flex flex-col items-start gap-2">
 					{
 						guides.map((guide) => (
 							<li>
@@ -30,7 +30,7 @@ const guides = await getCollection("guides")
 					}
 				</ul>
 			</nav>
-      <section class="prose prose-invert pb-8 flex-1 min-w-0">
+			<section class="prose prose-invert min-w-0 flex-1 pb-8">
 				<slot />
 			</section>
 		</main>

packages/website/src/components/landing-animation.tsx

@@ -3,6 +3,7 @@ import { useEffect, useRef, useState } from "react"
 import blobComfyUrl from "~/assets/blob-comfy.png"
 import cursorIbeamUrl from "~/assets/cursor-ibeam.png"
 import cursorUrl from "~/assets/cursor.png"
+import { raise } from "@reacord/helpers/raise.ts"
 
 const defaultState = {
 	chatInputText: "",
@@ -35,6 +36,7 @@ export function LandingAnimation() {
 		let running = true
 
 		void (async () => {
+			// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
 			while (running) {
 				setState(defaultState)
 				await delay(700)
@@ -69,7 +71,7 @@ export function LandingAnimation() {
 						count: state.count + 1,
 						chatInputCursorVisible: false,
 					}))
-          animateClick(addRef.current!)
+					animateClick(addRef.current ?? raise("addRef is null"))
 					await delay(700)
 				}
 
@@ -81,7 +83,7 @@ export function LandingAnimation() {
 				}))
 				await delay(1000)
 
-        animateClick(deleteRef.current!)
+				animateClick(deleteRef.current ?? raise("deleteRef is null"))
 				setState((state) => ({ ...state, messageVisible: false }))
 				await delay(1000)
 
@@ -102,17 +104,21 @@ export function LandingAnimation() {
 		let running = true
 
 		void (async () => {
+			// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
 			while (running) {
+				const cursor = cursorRef.current ?? raise("cursorRef is null")
+				const chatInput = chatInputRef.current ?? raise("chatInputRef is null")
+
 				// check if the cursor is in the input
-        const cursorRect = cursorRef.current!.getBoundingClientRect()
+				const cursorRect = cursor.getBoundingClientRect()
-        const chatInputRect = chatInputRef.current!.getBoundingClientRect()
+				const chatInputRect = chatInput.getBoundingClientRect()
 
 				const isOverInput =
 					cursorRef.current &&
 					chatInputRef.current &&
 					cursorRect.top + cursorRect.height / 2 > chatInputRect.top
 
-        cursorRef.current!.src = isOverInput ? cursorIbeamUrl : cursorUrl
+				cursor.src = isOverInput ? cursorIbeamUrl : cursorUrl
 
 				await animationFrame()
 			}
@@ -125,21 +131,21 @@ export function LandingAnimation() {
 
 	return (
 		<div
-      className="grid gap-2 relative pointer-events-none select-none"
+			className="animate-fade-in pointer-events-none relative grid select-none gap-2"
 			role="presentation"
 		>
 			<div
 				className={clsx(
-          "bg-slate-800 p-4 rounded-lg shadow transition",
+					"rounded-lg bg-slate-800 p-4 shadow transition",
-          state.messageVisible ? "opacity-100" : "opacity-0 -translate-y-2",
+					state.messageVisible ? "opacity-100" : "-translate-y-2 opacity-0",
 				)}
 			>
 				<div className="flex items-start gap-4">
-          <div className="w-12 h-12 p-2 rounded-full bg-no-repeat bg-contain bg-black/25">
+					<div className="h-12 w-12 rounded-full bg-black/25 bg-contain bg-no-repeat p-2">
 						<img
 							src={blobComfyUrl}
 							alt=""
-              className="object-contain scale-90 w-full h-full"
+							className="h-full w-full scale-90 object-contain"
 						/>
 					</div>
 					<div>
@@ -148,13 +154,13 @@ export function LandingAnimation() {
 						<div className="mt-2 flex flex-row gap-3">
 							<div
 								ref={addRef}
-                className="bg-emerald-700 text-white py-1.5 px-3 text-sm rounded"
+								className="rounded bg-emerald-700 px-3 py-1.5 text-sm text-white"
 							>
 								+1
 							</div>
 							<div
 								ref={deleteRef}
-                className="bg-red-700 text-white py-1.5 px-3 text-sm rounded"
+								className="rounded bg-red-700 px-3 py-1.5 text-sm text-white"
 							>
 								🗑 delete
 							</div>
@@ -163,12 +169,12 @@ export function LandingAnimation() {
 				</div>
 			</div>
 			<div
-        className="bg-slate-700 pb-2 pt-1.5 px-4 rounded-lg shadow"
+				className="rounded-lg bg-slate-700 px-4 pb-2 pt-1.5 shadow"
 				ref={chatInputRef}
 			>
 				<span
 					className={clsx(
-            "text-sm after:content-[attr(data-after)] after:relative after:-top-px after:-left-[2px]",
+						"text-sm after:relative after:-left-[2px] after:-top-px after:content-[attr(data-after)]",
 						state.chatInputCursorVisible
 							? "after:opacity-100"
 							: "after:opacity-0",
@@ -176,7 +182,7 @@ export function LandingAnimation() {
 					data-after="|"
 				>
 					{state.chatInputText || (
-            <span className="opacity-50 block absolute translate-y-1">
+						<span className="absolute block translate-y-1 opacity-50">
 							Message #showing-off-reacord
 						</span>
 					)}
@@ -186,7 +192,7 @@ export function LandingAnimation() {
 			<img
 				src={cursorUrl}
 				alt=""
-        className="transition-all duration-500 absolute scale-75 bg-transparent"
+				className="absolute scale-75 bg-transparent transition-all duration-500"
 				style={{ left: state.cursorLeft, bottom: state.cursorBottom }}
 				ref={cursorRef}
 			/>

packages/website/src/components/layout.astro

@@ -4,11 +4,10 @@ import "@fontsource/rubik/variable.css"
 import packageJson from "reacord/package.json"
 import bannerUrl from "~/assets/banner.png"
 import faviconUrl from "~/assets/favicon.png"
-import "~/styles/prism-theme.css"
 import "~/styles/tailwind.css"
 ---
 
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en" class="bg-slate-900 text-slate-100">
 	<head>
 		<meta charset="utf-8" />

packages/website/src/components/main-navigation.astro

@@ -29,6 +29,7 @@ const links = [
 		href: "https://github.com/itsMapleLeaf/reacord",
 		label: "GitHub",
 		icon: ArrowTopRightOnSquareIcon,
+		// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
 		component: ExternalLink,
 	},
 ]
@@ -36,17 +37,17 @@ const links = [
 const guides = await getCollection("guides")
 ---
 
-<nav class="flex justify-between items-center h-16">
+<nav class="flex h-16 items-center justify-between">
 	<a href="/">
 		<AppLogo class="w-32" />
 		<span class="sr-only">Home</span>
 	</a>
-  <div class="hidden md:flex gap-4">
+	<div class="hidden gap-4 md:flex">
 		{
 			links.map((link) => (
 				<link.component
 					href={link.href}
-          class="link inline-flex gap-1 items-center"
+					class="link inline-flex items-center gap-1"
 					rel={link.prefetch ? "prefetch" : undefined}
 				>
 					<link.icon className="inline-icon" />

packages/website/src/components/menu-item.astro

@@ -1,12 +1,12 @@
 ---
-export type Props = {
+export interface Props {
-  icon: (props: { class?: string; className?: string }) => any
+	icon: (props: { class?: string; className?: string }) => unknown
 	label: string
 }
 ---
 
 <div
-  class="px-3 py-2 transition text-left font-medium block w-full opacity-50 inline-flex gap-1 items-center hover:opacity-100 hover:text-emerald-500"
+	class="flex w-full items-center gap-1 px-3 py-2 text-left font-medium opacity-50 transition hover:text-emerald-500 hover:opacity-100"
 >
 	<Astro.props.icon class="inline-icon" className="inline-icon" />
 	<span class="flex-1">{Astro.props.label}</span>

packages/website/src/components/menu.astro

@@ -1,11 +1,11 @@
-<details class="md:hidden relative" data-menu>
+<details class="relative md:hidden" data-menu>
 	<summary
-    class="list-none p-2 -m-2 cursor-pointer hover:text-emerald-500 transition"
+		class="-m-2 cursor-pointer list-none p-2 transition hover:text-emerald-500"
 	>
 		<slot name="button" />
 	</summary>
 	<div
-    class="w-48 max-h-[calc(100vh-5rem)] bg-slate-800 shadow rounded-lg overflow-x-hidden overflow-y-auto top-[calc(100%+8px)] right-0 absolute z-10"
+		class="absolute right-0 top-[calc(100%+8px)] z-10 max-h-[calc(100vh-5rem)] w-48 overflow-y-auto overflow-x-hidden rounded-lg bg-slate-800 shadow"
 	>
 		<slot />
 	</div>

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, [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), [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
 
@@ -47,6 +47,13 @@ await client.login(process.env.BOT_TOKEN)
 To use JSX in your code, run it with [tsx](https://npm.im/tsx):
 
 ```bash
-npm install tsx
+npm install -D tsx
-tsx main.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

@@ -9,14 +9,13 @@ slug: sending-messages
 You can send messages via Reacord to a channel like so.
 
 ```jsx
-const channelId = "abc123deadbeef"
-
 client.on("ready", () => {
-  reacord.send(channelId, "Hello, world!")
+	const channel = await client.channels.fetch("abc123deadbeef")
+	reacord.createChannelMessage(channel).render("Hello, world!")
 })
 ```
 
-The `.send()` function creates a **Reacord instance**. You can pass strings, numbers, or anything that can be rendered by React, such as JSX!
+The `.createChannelMessage()` function creates a **Reacord instance**. You can pass strings, numbers, or anything that can be rendered by React, such as JSX!
 
 Components rendered through this instance can include state and effects, and the message on Discord will update automatically.
 
@@ -36,7 +35,8 @@ function Uptime() {
 }
 
 client.on("ready", () => {
-  reacord.send(channelId, <Uptime />)
+	const instance = reacord.createChannelMessage(channel)
+	instance.render(<Uptime />)
 })
 ```
 
@@ -46,12 +46,26 @@ The instance can be rendered to multiple times, which will update the message ea
 const Hello = ({ subject }) => <>Hello, {subject}!</>
 
 client.on("ready", () => {
-  const instance = reacord.send(channel)
+	const instance = reacord.createChannelMessage(channel)
 	instance.render(<Hello subject="World" />)
 	instance.render(<Hello subject="Moon" />)
 })
 ```
 
+You can specify various options for the message:
+
+```jsx
+const instance = reacord.createChannelMessage(channel, {
+	tts: true,
+	reply: {
+		messageReference: someMessage.id,
+	},
+	flags: [MessageFlags.SuppressNotifications],
+})
+```
+
+See the [Discord.js docs](https://discord.js.org/#/docs/discord.js/main/typedef/MessageCreateOptions) for all of the available options.
+
 ## Cleaning Up Instances
 
 If you no longer want to use the instance, you can clean it up in a few ways:
@@ -75,12 +89,12 @@ const reacord = new ReacordDiscordJs(client, {
 This section also applies to other kinds of application commands, such as context menu commands.
 </aside>
 
-To reply to a command interaction, use the `.reply()` function. This function returns an instance that works the same way as the one from `.send()`. Here's an example:
+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"
-import * as React from "react"
 import { Button, ReacordDiscordJs } from "reacord"
+import * as React from "react"
 
 const client = new Client({ intents: [] })
 const reacord = new ReacordDiscordJs(client)
@@ -94,8 +108,8 @@ client.on("ready", () => {
 
 client.on("interactionCreate", (interaction) => {
 	if (interaction.isCommand() && interaction.commandName === "ping") {
-    // Use the reply() function instead of send
+		// Use the createInteractionReply() function instead of createChannelMessage
-    reacord.reply(interaction, <>pong!</>)
+		reacord.createInteractionReply(interaction).render(<>pong!</>)
 	}
 })
 
@@ -134,14 +148,14 @@ handleCommands(client, [
 		name: "ping",
 		description: "pong!",
 		run: (interaction) => {
-      reacord.reply(interaction, <>pong!</>)
+			reacord.createInteractionReply(interaction).render(<>pong!</>)
 		},
 	},
 	{
 		name: "hi",
 		description: "say hi",
 		run: (interaction) => {
-      reacord.reply(interaction, <>hi</>)
+			reacord.createInteractionReply(interaction).render(<>hi</>)
 		},
 	},
 ])
@@ -149,18 +163,36 @@ handleCommands(client, [
 
 ## Ephemeral Command Replies
 
-Ephemeral replies are replies that only appear for one user. To create them, use the `.ephemeralReply()` function.
+Ephemeral replies are replies that only appear for one user. To create them, use the `.createInteractionReply()` function and provide `ephemeral` option.
 
-```tsx
+```jsx
 handleCommands(client, [
 	{
 		name: "pong",
 		description: "pong, but in secret",
 		run: (interaction) => {
-      reacord.ephemeralReply(interaction, <>(pong)</>)
+			reacord
+				.createInteractionReply(interaction, { ephemeral: true })
+				.render(<>(pong)</>)
 		},
 	},
 ])
 ```
 
-The `ephemeralReply` function also returns an instance, but ephemeral replies cannot be updated via `instance.render()`. You can `.deactivate()` them, but `.destroy()` will not delete the message; only the user can hide it from view.
+## Text-to-Speech Command Replies
+
+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
+handleCommands(client, [
+	{
+		name: "pong",
+		description: "pong, but converted into audio",
+		run: (interaction) => {
+			reacord
+				.createInteractionReply(interaction, { tts: true })
+				.render(<>pong!</>)
+		},
+	},
+])
+```

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

@@ -24,7 +24,9 @@ function FancyMessage({ title, description }) {
 ```
 
 ```jsx
-reacord.send(channelId, <FancyMessage title="Hello" description="World" />)
+reacord
+	.createChannelMessage(channel)
+	.render(<FancyMessage title="Hello" description="World" />)
 ```
 
 Reacord also comes with multiple embed components, for defining embeds on a piece-by-piece basis. This enables composition:
@@ -52,8 +54,7 @@ function FancyMessage({ children }) {
 ```
 
 ```jsx
-reacord.send(
+reacord.createChannelMessage(channel).render(
-  channelId,
 	<FancyMessage>
 		<FancyDetails title="Hello" description="World" />
 	</FancyMessage>,

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

@@ -35,7 +35,9 @@ function TheButton() {
 		const publicReply = event.reply(`${name} clicked the button. wow`)
 		setTimeout(() => publicReply.destroy(), 3000)
 
-    const privateReply = event.ephemeralReply("good job, you clicked it")
+		const privateReply = event.reply("good job, you clicked it", {
+			ephemeral: true,
+		})
 		privateReply.deactivate() // we don't need to listen to updates on this
 	}
 

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

@@ -36,8 +36,7 @@ export function FruitSelect({ onConfirm }) {
 ```
 
 ```jsx
-const instance = reacord.send(
+const instance = reacord.createChannelMessage(channel).render(
-  channelId,
 	<FruitSelect
 		onConfirm={(value) => {
 			instance.render(`you chose ${value}`)
@@ -49,7 +48,7 @@ const instance = reacord.send(
 
 For a multi-select, use the `multiple` prop, then you can use `values` and `onChangeMultiple` to handle multiple values.
 
-```tsx
+```jsx
 export function FruitSelect({ onConfirm }) {
 	const [values, setValues] = useState([])
 

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

@@ -22,5 +22,5 @@ function SelfDestruct() {
 	)
 }
 
-reacord.send(channelId, <SelfDestruct />)
+reacord.createChannelMessage(channel).render(<SelfDestruct />)
 ```

packages/website/src/env.d.ts

@@ -1,2 +1,3 @@
-/// <reference path="../.astro/types.d.ts" />
 /// <reference types="astro/client" />
+// eslint-disable-next-line @typescript-eslint/triple-slash-reference
+/// <reference path="../.astro/types.d.ts" />

packages/website/src/pages/guides/[slug].astro

@@ -1,12 +1,12 @@
 ---
-import { type GetStaticPaths } from "astro"
+import type { GetStaticPaths } from "astro"
 import { getCollection, type CollectionEntry } from "astro:content"
 import AppFooter from "~/components/app-footer.astro"
 import Layout from "~/components/layout.astro"
 import MainNavigation from "~/components/main-navigation.astro"
 import NavLink from "~/components/nav-link.astro"
 
-export type Props = {
+export interface Props {
 	guide: CollectionEntry<"guides">
 }
 
@@ -25,16 +25,18 @@ const { Content } = await Astro.props.guide.render()
 <Layout>
 	<div class="isolate">
 		<header
-      class="bg-slate-700/30 shadow sticky top-0 backdrop-blur-sm transition z-10 flex"
+			class="sticky top-0 z-10 flex bg-slate-700/30 shadow backdrop-blur-sm transition"
 		>
 			<div class="container">
 				<MainNavigation />
 			</div>
 		</header>
 		<main class="container mt-8 flex items-start gap-4">
-      <nav class="w-48 sticky top-24 hidden md:block">
+			<nav
+				class="sticky top-24 hidden h-[calc(100vh-theme(spacing.28))] w-48 flex-col gap-3 md:flex"
+			>
 				<h2 class="text-2xl">Guides</h2>
-        <ul class="mt-3 flex flex-col gap-2 items-start">
+				<ul class="flex flex-col items-start gap-2">
 					{
 						guides.map((guide) => (
 							<li>
@@ -49,15 +51,45 @@ const { Content } = await Astro.props.guide.render()
 						))
 					}
 				</ul>
+				<AppFooter class="mt-auto" />
 			</nav>
-      <section
+			<article class="-mt-8 min-w-0 max-w-none flex-1 pb-8">
-        class="prose prose-invert prose prose-invert prose-h1:font-light prose-h1:mb-4 prose-h1:text-3xl lg:prose-h1:text-4xl prose-h2:font-light prose-h3:font-light prose-p:my-3 prose-a:font-medium prose-a:text-emerald-400 hover:prose-a:no-underline prose-strong:font-medium prose-strong:text-emerald-400 prose-pre:font-monospace prose-pre:overflow-x-auto prose-code:before:hidden prose-code:after:hidden prose-code:text-slate-400 prose-li:mb-5 max-w-none pb-8 flex-1 min-w-0"
-      >
 				<Content />
-      </section>
+			</article>
 		</main>
-    <div class="py-2">
+		<AppFooter class="mx-auto mb-4 text-center md:hidden" />
-      <AppFooter />
-    </div>
 	</div>
 </Layout>
+
+<style>
+	article :global(:where(h1, h2, h3, h4, h5, h6)) {
+		@apply mb-3 mt-8 font-light;
+	}
+	article :global(h1) {
+		@apply text-3xl lg:text-4xl;
+	}
+	article :global(h2) {
+		@apply text-2xl;
+	}
+	article :global(h3) {
+		@apply text-xl;
+	}
+	article :global(p) {
+		@apply my-3;
+	}
+	article :global(a) {
+		@apply font-medium text-emerald-400 hover:no-underline;
+	}
+	article :global(strong) {
+		@apply font-medium text-emerald-400;
+	}
+	article :global(code) {
+		@apply rounded border border-slate-800 bg-slate-950 px-1 py-0.5 leading-none text-slate-300;
+	}
+	article :global(pre) {
+		@apply my-4 overflow-x-auto rounded-md border border-slate-800 !bg-slate-950 px-4 py-3 font-monospace;
+	}
+	article :global(pre code) {
+		@apply border-none bg-transparent p-0;
+	}
+</style>

packages/website/src/pages/index.astro

@@ -13,18 +13,18 @@ import MainNavigation from "~/components/main-navigation.astro"
 		style={{ backgroundImage: `url(${dotsBackgroundUrl})` }}
 	>
 	</div>
-  <div class="flex flex-col relative min-w-0 min-h-screen pb-4 gap-4">
+	<div class="relative flex min-h-screen min-w-0 flex-col gap-4 pb-4">
 		<header class="container">
 			<MainNavigation />
 		</header>
-    <div class="flex flex-col gap-4 my-auto px-4">
+		<div class="my-auto flex flex-col gap-4 px-4">
-      <AppLogo class="w-full max-w-lg mx-auto" />
+			<AppLogo class="mx-auto w-full max-w-lg" />
 
-      <div class="max-w-md w-full mx-auto isolate">
+			<div class="isolate mx-auto h-44 w-full max-w-md">
 				<LandingAnimation client:only />
 			</div>
 
-      <p class="text-center text-lg font-light -mb-1">
+			<p class="-mb-1 text-center text-lg font-light">
 				Create interactive Discord messages with React.
 			</p>
 
@@ -47,7 +47,7 @@ import MainNavigation from "~/components/main-navigation.astro"
 			</div>
 		</div>
 
-    <div class="text-center">
+		<div class="container text-center">
 			<AppFooter />
 		</div>
 	</div>

packages/website/src/styles/prism-theme.css

@@ -1,133 +0,0 @@
-/**
- * Nord Theme Originally by Arctic Ice Studio
- * https://nordtheme.com
- *
- * Ported for PrismJS by Zane Hitchcoxc (@zwhitchcox) and Gabriel Ramos (@gabrieluizramos)
- */
-
-code[class*="language-"],
-pre[class*="language-"] {
-  color: #f8f8f2;
-  background: none;
-  /* font-family: "Fira Code", Consolas, Monaco, "Andale Mono", "Ubuntu Mono",
-    monospace; */
-  text-align: left;
-  white-space: pre;
-  word-spacing: normal;
-  word-break: normal;
-  word-wrap: normal;
-  line-height: 1.7;
-  -moz-tab-size: 4;
-  -o-tab-size: 4;
-  tab-size: 4;
-  -webkit-hyphens: none;
-  -moz-hyphens: none;
-  -ms-hyphens: none;
-  hyphens: none;
-}
-
-/* Code blocks */
-pre[class*="language-"] {
-  padding: 1em;
-  margin: 0.5em 0;
-  overflow: auto;
-  border-radius: 0.3em;
-}
-
-:not(pre) > code[class*="language-"],
-pre[class*="language-"] {
-  /* background: #2e3440; */
-  background: rgba(0, 0, 0, 0.3);
-}
-
-/* Inline code */
-:not(pre) > code[class*="language-"] {
-  padding: 0.1em;
-  border-radius: 0.3em;
-  white-space: normal;
-}
-
-.token.comment,
-.token.prolog,
-.token.doctype,
-.token.cdata {
-  color: #636f88;
-}
-
-.token.punctuation {
-  color: #81a1c1;
-}
-
-.namespace {
-  opacity: 0.7;
-}
-
-.token.property,
-.token.tag,
-.token.constant,
-.token.symbol,
-.token.deleted {
-  color: #81a1c1;
-}
-
-.token.number {
-  color: #b48ead;
-}
-
-.token.boolean {
-  color: #81a1c1;
-}
-
-.token.selector,
-.token.attr-name,
-.token.string,
-.token.char,
-.token.builtin,
-.token.inserted {
-  color: #a3be8c;
-}
-
-.token.operator,
-.token.entity,
-.token.url,
-.language-css .token.string,
-.style .token.string,
-.token.variable {
-  color: #81a1c1;
-}
-
-.token.atrule,
-.token.attr-value,
-.token.function,
-.token.class-name {
-  color: #88c0d0;
-}
-
-.token.keyword {
-  color: #81a1c1;
-}
-
-.token.regex,
-.token.important {
-  color: #ebcb8b;
-}
-
-.token.important,
-.token.bold {
-  font-weight: bold;
-}
-
-.token.italic {
-  font-style: italic;
-}
-
-.token.entity {
-  cursor: help;
-}
-
-.code-line.highlight-line {
-  background-color: rgba(255, 255, 255, 0.08);
-  padding: 0 1rem;
-  margin: 0 -1rem;
-  display: block;
-}

packages/website/src/styles/tailwind.css

@@ -7,7 +7,7 @@
 		@apply outline-none;
 	}
 	:focus-visible {
-    @apply ring-2 ring-emerald-500 ring-inset;
+		@apply ring-2 ring-inset ring-emerald-500;
 	}
 
 	pre,
@@ -26,10 +26,10 @@
 	}
 
 	.link {
-    @apply font-medium inline-block relative opacity-60 hover:opacity-100 transition-opacity;
+		@apply relative inline-block font-medium opacity-60 transition-opacity hover:opacity-100;
 	}
 	.link::after {
-    @apply content-[''] bottom-[-2px] absolute block w-full h-px bg-current translate-y-[3px] opacity-0 transition;
+		@apply absolute bottom-[-2px] block h-px w-full translate-y-[3px] bg-current opacity-0 transition content-[''];
 	}
 	.link:hover::after {
 		@apply -translate-y-px opacity-50;
@@ -39,9 +39,21 @@
 	}
 
 	.button {
-    @apply inline-block mt-4 px-4 py-2.5 text-xl transition rounded-lg bg-black/25 hover:bg-black/40 hover:-translate-y-0.5 hover:shadow active:translate-y-0 active:transition-none;
+		@apply mt-4 inline-block rounded-lg bg-black/25 px-4 py-2.5 text-xl transition hover:-translate-y-0.5 hover:bg-black/40 hover:shadow active:translate-y-0 active:transition-none;
 	}
 	.button-solid {
 		@apply bg-emerald-700 hover:bg-emerald-800;
 	}
 }
+
+@layer utilities {
+	@keyframes fade-in {
+		from {
+			opacity: 0;
+		}
+	}
+
+	.animate-fade-in {
+		animation: fade-in 0.5s;
+	}
+}

packages/website/tailwind.config.cjs

@@ -1,18 +0,0 @@
-// @ts-nocheck
-module.exports = {
-  content: ["./src/**/*.{ts,tsx,md,astro}"],
-  theme: {
-    fontFamily: {
-      sans: ["RubikVariable", "sans-serif"],
-      monospace: ["'JetBrains Mono'", "monospace"],
-    },
-    boxShadow: {
-      DEFAULT: "0 2px 9px 0 rgb(0 0 0 / 0.3), 0 2px 4px -2px rgb(0 0 0 / 0.3)",
-    },
-    extend: {},
-  },
-  corePlugins: {
-    container: false,
-  },
-  plugins: [require("@tailwindcss/typography")],
-}

packages/website/tailwind.config.ts

@@ -0,0 +1,7 @@
+import type { Config } from "tailwindcss"
+import config from "../../tailwind.config.ts"
+
+export default {
+	...config,
+	content: ["./src/**/*.{ts,tsx,md,astro}"],
+} satisfies Config

packages/website/tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "extends": "../../tsconfig.base.json",
+	"extends": "../../tsconfig.base",
 	"compilerOptions": {
 		"jsx": "react-jsx",
 		"jsxImportSource": "react",
@@ -8,15 +8,5 @@
 			"~/*": ["./src/*"]
 		}
 	},
-  "include": ["**/*.ts", "**/*.tsx", "**/*.cjs", "**/*.mjs", "**/*.astro"],
+	"exclude": ["node_modules", "dist", "public/api"]
-  "exclude": [
-    "**/node_modules/**",
-    "**/coverage/**",
-    "**/build/**",
-    "**/dist/**",
-    "**/.cache/**",
-    "**/api/_build/**",
-    "**/public/**",
-    "app"
-  ]
 }