Merge branch 'main' into rewrite-internals

pending https://github.com/esbuild-kit/tsx/issues/74

.eslintrc.cjs

@@ -0,0 +1,25 @@
+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"),
+  },
+  overrides: [
+    {
+      files: ["packages/website/cypress/**"],
+      parserOptions: {
+        project: require.resolve("./packages/website/cypress/tsconfig.json"),
+      },
+    },
+  ],
+}

.github/workflows/main.yml

@@ -0,0 +1,50 @@
+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 }}
+  TEST_CATEGORY_ID: ${{ secrets.TEST_CATEGORY_ID }}
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  run-commands:
+    strategy:
+      fail-fast: false
+      matrix:
+        command:
+          # if tests run in the same process, it dies,
+          # so we test them separate
+          - name: test
+            run: pnpm test
+          - name: test website
+            # the cache doesn't include cypress install, need to do it manually here
+            run: pnpm -C packages/website exec cypress install && 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:
+      - uses: actions/checkout@v2
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 7.8.0
+      - uses: actions/setup-node@v2
+        with:
+          # https://github.com/actions/setup-node#supported-version-syntax
+          node-version: "16"
+          cache: "pnpm"
+      - run: pnpm install --frozen-lockfile
+      - run: ${{ matrix.command.run }}

.github/workflows/release.yml

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

.github/workflows/tests.yml

@@ -1,44 +0,0 @@
-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,7 +5,6 @@ coverage
 .env
 *.code-workspace
 .pnpm-debug.log
+
 build
 .cache
-.vercel
-*.tsbuildinfo

.prettierignore

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

README.md

@@ -1,5 +1,5 @@
 <center>
-  <img src="packages/website/src/assets/banner.png" alt="Reacord: Create interactive Discord messages using React">
+  <img src="./packages/website/app/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,43 +2,30 @@
   "name": "reacord-monorepo",
   "private": true,
   "scripts": {
-    "lint": "run-s --continue-on-error lint:*",
+    "lint": "eslint --ext js,ts,tsx .",
-    "lint:eslint": "eslint . --fix --cache --cache-file=node_modules/.cache/.eslintcache --report-unused-disable-directives",
+    "lint-fix": "pnpm lint -- --fix",
-    "lint:prettier": "prettier . \"**/*.astro\" --write --cache --list-different",
+    "test": "vitest --coverage --no-watch",
-    "lint:types": "tsc -b & pnpm -r --parallel run typecheck",
+    "test-dev": "vitest --ui",
-    "astro-sync": "pnpm --filter website exec astro sync",
+    "format": "prettier --write .",
-    "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.26.2",
+    "@changesets/cli": "^2.24.2",
-    "@itsmapleleaf/configs": "github:itsMapleLeaf/configs",
+    "@itsmapleleaf/configs": "^1.1.5",
-    "eslint": "^8.51.0",
+    "@rushstack/eslint-patch": "^1.1.4",
-    "npm-run-all": "^4.1.5",
+    "@types/eslint": "^8.4.5",
-    "prettier": "^3.0.3",
+    "@vitest/ui": "^0.21.0",
-    "react": "^18.2.0",
+    "c8": "^7.12.0",
-    "tailwindcss": "^3.3.3",
+    "eslint": "^8.21.0",
-    "typescript": "^5.2.2",
+    "node": "^16.16.0",
-    "vitest": "^0.34.6"
+    "prettier": "^2.7.1",
+    "typescript": "^4.7.4",
+    "vitest": "^0.21.0"
   },
-  "prettier": "@itsmapleleaf/configs/prettier",
+  "resolutions": {
-  "eslintConfig": {
+    "esbuild": "latest"
-    "extends": [
+  },
-      "./node_modules/@itsmapleleaf/configs/eslint.config.cjs",
+  "prettier": "@itsmapleleaf/configs/prettier"
-      "./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/async-queue.ts

@@ -0,0 +1,35 @@
+export type AsyncCallback<T> = () => T
+
+type QueueItem = {
+  callback: AsyncCallback<unknown>
+  resolve: (value: unknown) => void
+  reject: (error: unknown) => void
+}
+
+export class AsyncQueue {
+  private items: QueueItem[] = []
+  private running = false
+
+  append<T>(callback: AsyncCallback<T>): Promise<Awaited<T>> {
+    return new Promise((resolve, reject) => {
+      this.items.push({ callback, resolve: resolve as any, reject })
+      void this.run()
+    })
+  }
+
+  private async run() {
+    if (this.running) return
+    this.running = true
+
+    let item
+    while ((item = this.items.shift())) {
+      try {
+        item.resolve(await item.callback())
+      } catch (error) {
+        item.reject(error)
+      }
+    }
+
+    this.running = false
+  }
+}

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

packages/helpers/generate-prop-combinations.ts

@@ -0,0 +1,21 @@
+export function generatePropCombinations<P>(values: {
+  [K in keyof P]: ReadonlyArray<P[K]>
+}) {
+  return generatePropCombinationsRecursive(values) as P[]
+}
+
+function generatePropCombinationsRecursive(
+  value: Record<string, readonly unknown[]>,
+): Array<Record<string, unknown>> {
+  const [key] = Object.keys(value)
+  if (!key) return [{}]
+
+  const { [key]: values = [], ...otherValues } = value
+  const result: Array<Record<string, unknown>> = []
+  for (const value of values) {
+    for (const otherValue of generatePropCombinationsRecursive(otherValues)) {
+      result.push({ [key]: value, ...otherValue })
+    }
+  }
+  return result
+}

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 =
-	<Instance, Args extends unknown[]>(
+  <T>(Constructor: new (...args: any[]) => T) =>
-		constructor: new (...args: Args) => Instance,
+  (value: unknown): value is T =>
-	) =>
+    value instanceof Constructor
-	(value: unknown): value is Instance =>
-		value instanceof constructor

packages/helpers/is-object.ts

@@ -1,3 +1,7 @@
-export function isObject(value: unknown): value is object {
+export function isObject<T>(
+  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

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

packages/helpers/omit.test.ts

@@ -1,7 +0,0 @@
-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

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

packages/helpers/omit.ts

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

packages/helpers/package.json

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

packages/helpers/pick.ts

@@ -1,11 +1,15 @@
-import type { LoosePick } from "./types"
+import type { LoosePick, UnknownRecord } from "./types"
 
-export function pick<T extends object, K extends keyof T | PropertyKey>(
+export function pick<T, K extends keyof T | PropertyKey>(
   object: T,
   keys: K[],
-) {
+): LoosePick<T, K> {
-	const keySet = new Set<PropertyKey>(keys)
+  const result: any = {}
-	return Object.fromEntries(
+  for (const key of keys) {
-		Object.entries(object).filter(([key]) => keySet.has(key)),
+    const value = (object as UnknownRecord)[key]
-	) as LoosePick<T, K>
+    if (value !== undefined) {
+      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", () => {
-	interface InputType {
+  type InputType = {
     a: string
     b: string | null | undefined
     c?: string
@@ -15,6 +15,7 @@ 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,25 +1,21 @@
 import { isObject } from "./is-object"
 
 export function pruneNullishValues<T>(input: T): PruneNullishValues<T> {
-	if (!isObject(input)) {
-		return input as PruneNullishValues<T>
-	}
-
   if (Array.isArray(input)) {
-		return input
+    return input.filter(Boolean).map((item) => pruneNullishValues(item)) as any
-			.filter(Boolean)
-			.map(
-				(item) => pruneNullishValues(item) as unknown,
-			) as PruneNullishValues<T>
   }
 
-	const result: Record<string, unknown> = {}
+  if (!isObject(input)) {
+    return input as any
+  }
+
+  const result: any = {}
   for (const [key, value] of Object.entries(input)) {
     if (value != undefined) {
       result[key] = pruneNullishValues(value)
     }
   }
-	return result as PruneNullishValues<T>
+  return result
 }
 
 export type PruneNullishValues<Input> = Input extends object

packages/helpers/reject-after.ts

@@ -1,5 +1,5 @@
-import { toError } from "./to-error.js"
 import { setTimeout } from "node:timers/promises"
+import { toError } from "./to-error.js"
 
 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, @typescript-eslint/no-unnecessary-condition
+  // eslint-disable-next-line no-constant-condition
   while (true) {
     try {
       return await callback()

packages/helpers/types.test.types.ts

@@ -1,4 +0,0 @@
-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,21 +1,11 @@
-import { raise } from "./raise.ts"
+export type MaybePromise<T> = T | Promise<T>
-
-export type MaybePromise<T> = T | PromiseLike<T>
 
 export type ValueOf<Type> = Type extends ReadonlyArray<infer Value>
   ? Value
   : Type[keyof Type]
 
-export type LoosePick<Shape, Keys extends PropertyKey> = Simplify<{
+export type UnknownRecord = Record<PropertyKey, unknown>
-	[Key in Extract<Keys, keyof Shape>]: Shape[Key]
-}>
 
-export type LooseOmit<Shape, Keys extends PropertyKey> = Simplify<{
+export type LoosePick<Shape, Keys extends PropertyKey> = {
-	[Key in Exclude<keyof Shape, Keys>]: Shape[Key]
+  [Key in Keys]: Shape extends Record<Key, infer Value> ? Value : never
-}>
+}
-
-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,10 +1,9 @@
 import { setTimeout } from "node:timers/promises"
-import type { MaybePromise } from "./types.ts"
 
 const maxTime = 1000
 
 export async function waitFor<Result>(
-	predicate: () => MaybePromise<Result>,
+  predicate: () => Result,
 ): Promise<Awaited<Result>> {
   const startTime = Date.now()
   let lastError: unknown
@@ -18,6 +17,5 @@ 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: unknown[]) => {
+      return (...values: any[]) => {
         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) as unknown
+        return value.apply(target, values)
       }
     },
   }) as T

packages/playground/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "@reacord/playground",
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "tsx watch src/main.tsx"
+  },
+  "dependencies": {
+    "@reacord/helpers": "workspace:*",
+    "discord.js": "^14.1.2",
+    "dotenv": "^16.0.1",
+    "ora": "^6.1.2",
+    "react": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/node": "*",
+    "@types/react": "^18.0.16",
+    "tsx": "^3.8.0",
+    "typescript": "^4.7.4"
+  }
+}

packages/playground/src/main.tsx

@@ -0,0 +1,54 @@
+import { raise } from "@reacord/helpers/raise"
+import { Client, GatewayIntentBits } from "discord.js"
+import * as dotenv from "dotenv"
+import { join } from "node:path"
+import { fileURLToPath } from "node:url"
+import { oraPromise } from "ora"
+import React from "react"
+import { Button, ReacordClient } from "../../reacord/src/main"
+
+dotenv.config({
+  path: join(fileURLToPath(import.meta.url), "../../../../.env"),
+  override: true,
+})
+
+const token = process.env.TEST_BOT_TOKEN ?? raise("TEST_BOT_TOKEN not defined")
+
+const client = new Client({ intents: [GatewayIntentBits.Guilds] })
+const reacord = new ReacordClient({ token })
+
+client.once("ready", async (client) => {
+  try {
+    await oraPromise(
+      client.application.commands.create({
+        name: "counter",
+        description: "counts things",
+      }),
+      "Registering commands",
+    )
+  } catch (error) {
+    console.error("Failed to register commands:", error)
+  }
+})
+
+client.on("interactionCreate", async (interaction) => {
+  if (
+    interaction.isChatInputCommand() &&
+    interaction.commandName === "counter"
+  ) {
+    reacord.reply(interaction, <Counter />)
+    // reacord.reply(interaction, "test3").render("test4")
+  }
+})
+
+await oraPromise(client.login(token), "Logging in")
+
+function Counter() {
+  const [count, setCount] = React.useState(0)
+  return (
+    <>
+      count: {count}
+      <Button label="+" onClick={() => setCount(count + 1)} />
+    </>
+  )
+}

packages/playground/tsconfig.json

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

packages/reacord/CHANGELOG.md

@@ -1,75 +1,5 @@
 # reacord
 
-## 0.6.0
-
-### Minor Changes
-
-- 11153df: breaking: more descriptive component event types
-- fb0a997: 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.
-
-## 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
-
-- 9813a01: import react-reconciler/constants.js for esm
-
-  ESM projects which tried to import reacord would fail due to the lack of .js on this import
-
 ## 0.5.1
 
 ### Patch Changes

packages/reacord/env.d.ts

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

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

@@ -1,113 +0,0 @@
-import type { ReactNode } from "react"
-import type { ReacordInstance } from "./instance"
-
-/** @category Component Event */
-export interface ComponentEvent {
-	/**
-	 * The message associated with this event. 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: ComponentEventMessage
-
-	/**
-	 * The channel that this event occurred in.
-	 *
-	 * @see https://discord.com/developers/docs/resources/channel#channel-object
-	 */
-	channel: ComponentEventChannel
-
-	/**
-	 * The user that triggered this event.
-	 *
-	 * @see https://discord.com/developers/docs/resources/user#user-object
-	 */
-	user: ComponentEventUser
-
-	/**
-	 * The guild that this event occurred in.
-	 *
-	 * @see https://discord.com/developers/docs/resources/guild#guild-object
-	 */
-	guild?: ComponentEventGuild
-
-	/** Create a new reply to this event. */
-	reply(
-		content?: ReactNode,
-		options?: ComponentEventReplyOptions,
-	): ReacordInstance
-
-	/**
-	 * Create an ephemeral reply to this event, shown only to the user who
-	 * triggered it.
-	 *
-	 * @deprecated Use event.reply(content, { ephemeral: true })
-	 */
-	ephemeralReply(content?: ReactNode): ReacordInstance
-}
-
-/** @category Component Event */
-export interface ComponentEventReplyOptions {
-	ephemeral?: boolean
-	tts?: boolean
-}
-
-/** @category Component Event */
-export interface ComponentEventChannel {
-	id: string
-	name?: string
-	topic?: string
-	nsfw?: boolean
-	lastMessageId?: string
-	ownerId?: string
-	parentId?: string
-	rateLimitPerUser?: number
-}
-
-/** @category Component Event */
-export interface ComponentEventMessage {
-	id: string
-	channelId: string
-	authorId: string
-	member?: ComponentEventGuildMember
-	content: string
-	timestamp: string
-	editedTimestamp?: string
-	tts: boolean
-	mentionEveryone: boolean
-	/** The IDs of mentioned users */
-	mentions: string[]
-}
-
-/** @category Component Event */
-export interface ComponentEventGuild {
-	id: string
-	name: string
-	member: ComponentEventGuildMember
-}
-
-/** @category Component Event */
-export interface ComponentEventGuildMember {
-	id: string
-	nick?: string
-	displayName: string
-	avatarUrl?: string
-	displayAvatarUrl: string
-	roles: string[]
-	color: number
-	joinedAt?: string
-	premiumSince?: string
-	pending?: boolean
-	communicationDisabledUntil?: string
-}
-
-/** @category Component Event */
-export interface ComponentEventUser {
-	id: string
-	username: string
-	discriminator: string
-	tag: string
-	avatarUrl: string | null
-	accentColor?: number
-}

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

@@ -1,56 +0,0 @@
-import type { ReactNode } 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 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. But this can be useful if you want a specific layout.
- *
- * ```tsx
- * // put buttons on two separate rows
- * <ActionRow>
- *   <Button label="First" onClick={handleFirst} />
- * </ActionRow>
- * <Button label="Second" onClick={handleSecond} />
- * ```
- *
- * @category Action Row
- * @see https://discord.com/developers/docs/interactions/message-components#action-rows
- */
-export function ActionRow(props: ActionRowProps) {
-	return (
-		<ReacordElement props={props} createNode={() => new ActionRowNode(props)}>
-			{props.children}
-		</ReacordElement>
-	)
-}
-
-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

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

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

@@ -1,69 +0,0 @@
-import { randomUUID } from "node:crypto"
-import { ReacordElement } from "../../internal/element.js"
-import type { ComponentInteraction } from "../../internal/interaction"
-import type { MessageOptions } from "../../internal/message"
-import { getNextActionRow } from "../../internal/message"
-import { Node } from "../../internal/node.js"
-import type { ComponentEvent } from "../component-event"
-import type { ButtonSharedProps } from "./button-shared-props"
-
-/** @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. */
-	onClick: (event: ButtonClickEvent) => void
-}
-
-/** @category Button */
-export type ButtonClickEvent = ComponentEvent
-
-/** @category Button */
-export function Button(props: ButtonProps) {
-	return (
-		<ReacordElement props={props} createNode={() => new ButtonNode(props)}>
-			<ReacordElement props={{}} createNode={() => new ButtonLabelNode({})}>
-				{props.label}
-			</ReacordElement>
-		</ReacordElement>
-	)
-}
-
-class ButtonNode extends Node<ButtonProps> {
-	private customId = randomUUID()
-
-	// this has text children, but buttons themselves shouldn't yield text
-	// eslint-disable-next-line @typescript-eslint/class-literal-property-style
-	override get text() {
-		return ""
-	}
-
-	override modifyMessageOptions(options: MessageOptions): void {
-		getNextActionRow(options).push({
-			type: "button",
-			customId: this.customId,
-			style: this.props.style ?? "secondary",
-			disabled: this.props.disabled,
-			emoji: this.props.emoji,
-			label: this.children.findType(ButtonLabelNode)?.text,
-		})
-	}
-
-	override handleComponentInteraction(interaction: ComponentInteraction) {
-		if (
-			interaction.type === "button" &&
-			interaction.customId === this.customId
-		) {
-			this.props.onClick(interaction.event)
-			return true
-		}
-		return false
-	}
-}
-
-class ButtonLabelNode extends Node<Record<string, never>> {}

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

@@ -1,36 +0,0 @@
-import type { ReactNode } 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 */
-export interface EmbedAuthorProps {
-	name?: ReactNode
-	children?: ReactNode
-	url?: string
-	iconUrl?: string
-}
-
-/** @category Embed */
-export function EmbedAuthor(props: EmbedAuthorProps) {
-	return (
-		<ReacordElement props={props} createNode={() => new EmbedAuthorNode(props)}>
-			<ReacordElement props={{}} createNode={() => new AuthorTextNode({})}>
-				{props.name ?? props.children}
-			</ReacordElement>
-		</ReacordElement>
-	)
-}
-
-class EmbedAuthorNode extends EmbedChildNode<EmbedAuthorProps> {
-	override modifyEmbedOptions(options: EmbedOptions): void {
-		options.author = {
-			name: this.children.findType(AuthorTextNode)?.text ?? "",
-			url: this.props.url,
-			icon_url: this.props.iconUrl,
-		}
-	}
-}
-
-class AuthorTextNode extends Node<Record<string, never>> {}

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

@@ -1,6 +0,0 @@
-import { Node } from "../../internal/node.js"
-import type { EmbedOptions } from "./embed-options"
-
-export abstract class EmbedChildNode<Props> extends Node<Props> {
-	abstract modifyEmbedOptions(options: EmbedOptions): void
-}

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

@@ -1,41 +0,0 @@
-import type { ReactNode } 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 */
-export interface EmbedFieldProps {
-	name: ReactNode
-	value?: ReactNode
-	inline?: boolean
-	children?: ReactNode
-}
-
-/** @category Embed */
-export function EmbedField(props: EmbedFieldProps) {
-	return (
-		<ReacordElement props={props} createNode={() => new EmbedFieldNode(props)}>
-			<ReacordElement props={{}} createNode={() => new FieldNameNode({})}>
-				{props.name}
-			</ReacordElement>
-			<ReacordElement props={{}} createNode={() => new FieldValueNode({})}>
-				{props.value ?? props.children}
-			</ReacordElement>
-		</ReacordElement>
-	)
-}
-
-class EmbedFieldNode extends EmbedChildNode<EmbedFieldProps> {
-	override modifyEmbedOptions(options: EmbedOptions): void {
-		options.fields ??= []
-		options.fields.push({
-			name: this.children.findType(FieldNameNode)?.text ?? "",
-			value: this.children.findType(FieldValueNode)?.text ?? "",
-			inline: this.props.inline,
-		})
-	}
-}
-
-class FieldNameNode extends Node<Record<string, never>> {}
-class FieldValueNode extends Node<Record<string, never>> {}

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

@@ -1,40 +0,0 @@
-import type { ReactNode } 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 */
-export interface EmbedFooterProps {
-	text?: ReactNode
-	children?: ReactNode
-	iconUrl?: string
-	timestamp?: string | number | Date
-}
-
-/** @category Embed */
-export function EmbedFooter({ text, children, ...props }: EmbedFooterProps) {
-	return (
-		<ReacordElement props={props} createNode={() => new EmbedFooterNode(props)}>
-			<ReacordElement props={{}} createNode={() => new FooterTextNode({})}>
-				{text ?? children}
-			</ReacordElement>
-		</ReacordElement>
-	)
-}
-
-class EmbedFooterNode extends EmbedChildNode<
-	Omit<EmbedFooterProps, "text" | "children">
-> {
-	override modifyEmbedOptions(options: EmbedOptions): void {
-		options.footer = {
-			text: this.children.findType(FooterTextNode)?.text ?? "",
-			icon_url: this.props.iconUrl,
-		}
-		options.timestamp = this.props.timestamp
-			? new Date(this.props.timestamp).toISOString()
-			: undefined
-	}
-}
-
-class FooterTextNode extends Node<Record<string, never>> {}

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

@@ -1,24 +0,0 @@
-import { ReacordElement } from "../../internal/element.js"
-import { EmbedChildNode } from "./embed-child.js"
-import type { EmbedOptions } from "./embed-options"
-
-/** @category Embed */
-export interface EmbedImageProps {
-	url: string
-}
-
-/** @category Embed */
-export function EmbedImage(props: EmbedImageProps) {
-	return (
-		<ReacordElement
-			props={props}
-			createNode={() => new EmbedImageNode(props)}
-		/>
-	)
-}
-
-class EmbedImageNode extends EmbedChildNode<EmbedImageProps> {
-	override modifyEmbedOptions(options: EmbedOptions): void {
-		options.image = { url: this.props.url }
-	}
-}

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

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

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

@@ -1,24 +0,0 @@
-import { ReacordElement } from "../../internal/element.js"
-import { EmbedChildNode } from "./embed-child.js"
-import type { EmbedOptions } from "./embed-options"
-
-/** @category Embed */
-export interface EmbedThumbnailProps {
-	url: string
-}
-
-/** @category Embed */
-export function EmbedThumbnail(props: EmbedThumbnailProps) {
-	return (
-		<ReacordElement
-			props={props}
-			createNode={() => new EmbedThumbnailNode(props)}
-		/>
-	)
-}
-
-class EmbedThumbnailNode extends EmbedChildNode<EmbedThumbnailProps> {
-	override modifyEmbedOptions(options: EmbedOptions): void {
-		options.thumbnail = { url: this.props.url }
-	}
-}

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

@@ -1,31 +0,0 @@
-import type { ReactNode } 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 */
-export interface EmbedTitleProps {
-	children: ReactNode
-	url?: string
-}
-
-/** @category Embed */
-export function EmbedTitle({ children, ...props }: EmbedTitleProps) {
-	return (
-		<ReacordElement props={props} createNode={() => new EmbedTitleNode(props)}>
-			<ReacordElement props={{}} createNode={() => new TitleTextNode({})}>
-				{children}
-			</ReacordElement>
-		</ReacordElement>
-	)
-}
-
-class EmbedTitleNode extends EmbedChildNode<Omit<EmbedTitleProps, "children">> {
-	override modifyEmbedOptions(options: EmbedOptions): void {
-		options.title = this.children.findType(TitleTextNode)?.text ?? ""
-		options.url = this.props.url
-	}
-}
-
-class TitleTextNode extends Node<Record<string, never>> {}

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

@@ -1,62 +0,0 @@
-import { snakeCaseDeep } from "@reacord/helpers/convert-object-property-case"
-import { omit } from "@reacord/helpers/omit"
-import type React from "react"
-import { ReacordElement } from "../../internal/element.js"
-import type { MessageOptions } from "../../internal/message"
-import { Node } from "../../internal/node.js"
-import { TextNode } from "../../internal/text-node"
-import { EmbedChildNode } from "./embed-child.js"
-import type { EmbedOptions } from "./embed-options"
-
-/**
- * @category Embed
- * @see https://discord.com/developers/docs/resources/channel#embed-object
- */
-export interface EmbedProps {
-	title?: string
-	description?: string
-	url?: string
-	color?: number
-	fields?: Array<{ name: string; value: string; inline?: boolean }>
-	author?: { name: string; url?: string; iconUrl?: string }
-	thumbnail?: { url: string }
-	image?: { url: string }
-	video?: { url: string }
-	footer?: { text: string; iconUrl?: string }
-	timestamp?: string | number | Date
-	children?: React.ReactNode
-}
-
-/**
- * @category Embed
- * @see https://discord.com/developers/docs/resources/channel#embed-object
- */
-export function Embed(props: EmbedProps) {
-	return (
-		<ReacordElement props={props} createNode={() => new EmbedNode(props)}>
-			{props.children}
-		</ReacordElement>
-	)
-}
-
-class EmbedNode extends Node<EmbedProps> {
-	override modifyMessageOptions(options: MessageOptions): void {
-		const embed: EmbedOptions = {
-			...snakeCaseDeep(omit(this.props, ["children", "timestamp"])),
-			timestamp: this.props.timestamp
-				? new Date(this.props.timestamp).toISOString()
-				: undefined,
-		}
-
-		for (const child of this.children) {
-			if (child instanceof EmbedChildNode) {
-				child.modifyEmbedOptions(embed)
-			}
-			if (child instanceof TextNode) {
-				embed.description = (embed.description ?? "") + child.props
-			}
-		}
-
-		options.embeds.push(embed)
-	}
-}

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

@@ -1,38 +0,0 @@
-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 */
-export type LinkProps = ButtonSharedProps & {
-	/** The URL the link should lead to */
-	url: string
-	/** The link text */
-	children?: string
-}
-
-/** @category Link */
-export function Link({ label, children, ...props }: LinkProps) {
-	return (
-		<ReacordElement props={props} createNode={() => new LinkNode(props)}>
-			<ReacordElement props={{}} createNode={() => new LinkTextNode({})}>
-				{label ?? children}
-			</ReacordElement>
-		</ReacordElement>
-	)
-}
-
-class LinkNode extends Node<Omit<LinkProps, "label" | "children">> {
-	override modifyMessageOptions(options: MessageOptions): void {
-		getNextActionRow(options).push({
-			type: "link",
-			disabled: this.props.disabled,
-			emoji: this.props.emoji,
-			label: this.children.findType(LinkTextNode)?.text,
-			url: this.props.url,
-		})
-	}
-}
-
-class LinkTextNode extends Node<Record<string, never>> {}

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

@@ -1,19 +0,0 @@
-import type { MessageSelectOptionOptions } from "../../internal/message"
-import { Node } from "../../internal/node"
-import type { OptionProps } from "./option"
-
-export class OptionNode extends Node<
-	Omit<OptionProps, "children" | "label" | "description">
-> {
-	get options(): MessageSelectOptionOptions {
-		return {
-			label: this.children.findType(OptionLabelNode)?.text ?? this.props.value,
-			value: this.props.value,
-			description: this.children.findType(OptionDescriptionNode)?.text,
-			emoji: this.props.emoji,
-		}
-	}
-}
-
-export class OptionLabelNode extends Node<Record<string, never>> {}
-export class OptionDescriptionNode extends Node<Record<string, never>> {}

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

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

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

@@ -1,152 +0,0 @@
-import { isInstanceOf } from "@reacord/helpers/is-instance-of"
-import { randomUUID } from "node:crypto"
-import type { ReactNode } from "react"
-import { ReacordElement } from "../../internal/element.js"
-import type { ComponentInteraction } from "../../internal/interaction"
-import type {
-	ActionRow,
-	ActionRowItem,
-	MessageOptions,
-} from "../../internal/message"
-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 */
-export interface SelectProps {
-	children?: ReactNode
-	/** Sets the currently selected value */
-	value?: string
-
-	/** Sets the currently selected values, for use with `multiple` */
-	values?: string[]
-
-	/** The text shown when no value is selected */
-	placeholder?: string
-
-	/** Set to true to allow multiple selected values */
-	multiple?: boolean
-
-	/**
-	 * With `multiple`, the minimum number of values that can be selected. When
-	 * `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.
-	 */
-	minValues?: number
-
-	/**
-	 * With `multiple`, the maximum number of values that can be selected. When
-	 * `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.
-	 */
-	disabled?: boolean
-
-	/**
-	 * Called when the user inputs a selection. Receives the entire select change
-	 * event, which can be used to create new replies, etc.
-	 */
-	onChange?: (event: SelectChangeEvent) => void
-
-	/**
-	 * 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. */
-	onChangeMultiple?: (values: string[], event: SelectChangeEvent) => void
-}
-
-/** @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) {
-	return (
-		<ReacordElement props={props} createNode={() => new SelectNode(props)}>
-			{props.children}
-		</ReacordElement>
-	)
-}
-
-class SelectNode extends Node<SelectProps> {
-	readonly customId = randomUUID()
-
-	override modifyMessageOptions(message: MessageOptions): void {
-		const actionRow: ActionRow = []
-		message.actionRows.push(actionRow)
-
-		const options = [...this.children]
-			.filter(isInstanceOf(OptionNode))
-			.map((node) => node.options)
-
-		const {
-			multiple,
-			value,
-			values,
-			minValues = 0,
-			maxValues = 25,
-			...props
-		} = omit(this.props, [
-			"children",
-			"onChange",
-			"onChangeValue",
-			"onChangeMultiple",
-		])
-
-		const item: ActionRowItem = {
-			...props,
-			type: "select",
-			customId: this.customId,
-			options,
-			values: [],
-		}
-
-		if (multiple) {
-			item.minValues = minValues
-			item.maxValues = maxValues
-			if (values) item.values = values
-		}
-
-		if (!multiple && value != undefined) {
-			item.values = [value]
-		}
-
-		actionRow.push(item)
-	}
-
-	override handleComponentInteraction(
-		interaction: ComponentInteraction,
-	): boolean {
-		const isSelectInteraction =
-			interaction.type === "select" &&
-			interaction.customId === this.customId &&
-			!this.props.disabled
-
-		if (!isSelectInteraction) return false
-
-		this.props.onChange?.(interaction.event)
-		this.props.onChangeMultiple?.(interaction.event.values, interaction.event)
-		if (interaction.event.values[0]) {
-			this.props.onChangeValue?.(interaction.event.values[0], interaction.event)
-		}
-		return true
-	}
-}

packages/reacord/library/core/instance.ts

@@ -1,20 +0,0 @@
-import type { ReactNode } from "react"
-
-/**
- * Represents an interactive message, which can later be replaced or deleted.
- *
- * @category Core
- */
-export interface ReacordInstance {
-	/** Render some JSX to this instance (edits the message) */
-	render: (content: ReactNode) => ReacordInstance
-
-	/** Remove this message */
-	destroy: () => void
-
-	/**
-	 * Same as destroy, but keeps the message and disables the components on it.
-	 * This prevents it from listening to user interactions.
-	 */
-	deactivate: () => void
-}

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

@@ -1,430 +0,0 @@
-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"
-import * as Discord from "discord.js"
-import type { ReactNode } from "react"
-import type { Except } from "type-fest"
-import type { ComponentInteraction } from "../internal/interaction"
-import type {
-	Message,
-	MessageButtonOptions,
-	MessageOptions,
-} from "../internal/message"
-import { ChannelMessageRenderer } from "../internal/renderers/channel-message-renderer"
-import { InteractionReplyRenderer } from "../internal/renderers/interaction-reply-renderer"
-import type {
-	ComponentEventChannel,
-	ComponentEventGuild,
-	ComponentEventGuildMember,
-	ComponentEventMessage,
-	ComponentEventReplyOptions,
-	ComponentEventUser,
-} from "./component-event"
-import type { ReacordInstance } from "./instance"
-import type { ReacordConfig } from "./reacord"
-import { Reacord } from "./reacord"
-
-/**
- * The Reacord adapter for Discord.js.
- *
- * @category Core
- */
-export class ReacordDiscordJs extends Reacord {
-	constructor(
-		private client: Discord.Client,
-		config: ReacordConfig = {},
-	) {
-		super(config)
-
-		client.on("interactionCreate", (interaction) => {
-			if (interaction.isButton() || interaction.isStringSelectMenu()) {
-				this.handleComponentInteraction(
-					this.createReacordComponentInteraction(interaction),
-				)
-			}
-		})
-	}
-
-	/**
-	 * 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
-	 */
-	public send(
-		channel: Discord.ChannelResolvable,
-		initialContent?: React.ReactNode,
-	): ReacordInstance {
-		return this.createInstance(
-			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
-	 */
-	public reply(
-		interaction: Discord.CommandInteraction,
-		initialContent?: React.ReactNode,
-	): ReacordInstance {
-		return this.createInstance(
-			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
-	 */
-	public ephemeralReply(
-		interaction: Discord.CommandInteraction,
-		initialContent?: React.ReactNode,
-	): ReacordInstance {
-		return this.createInstance(
-			this.createInteractionReplyRenderer(interaction, {
-				ephemeral: true,
-			}),
-			initialContent,
-		)
-	}
-
-	private createChannelMessageRenderer(
-		channelResolvable: Discord.ChannelResolvable,
-		messageCreateOptions?: Discord.MessageCreateOptions,
-	) {
-		return new ChannelMessageRenderer({
-			send: async (messageOptions) => {
-				let channel = this.client.channels.resolve(channelResolvable)
-				if (!channel && typeof channelResolvable === "string") {
-					channel = await this.client.channels.fetch(channelResolvable)
-				}
-
-				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)
-			},
-		})
-	}
-
-	private createInteractionReplyRenderer(
-		interaction:
-			| Discord.CommandInteraction
-			| Discord.MessageComponentInteraction,
-		interactionReplyOptions: Discord.InteractionReplyOptions,
-	) {
-		return new InteractionReplyRenderer({
-			interactionId: interaction.id,
-			reply: async (messageOptions) => {
-				const message = await interaction.reply({
-					...getDiscordMessageOptions(messageOptions),
-					...interactionReplyOptions,
-					fetchReply: true,
-				})
-				return createReacordMessage(message)
-			},
-			followUp: async (messageOptions) => {
-				const message = await interaction.followUp({
-					...getDiscordMessageOptions(messageOptions),
-					...interactionReplyOptions,
-					fetchReply: true,
-				})
-				return createReacordMessage(message)
-			},
-		})
-	}
-
-	private createReacordComponentInteraction(
-		interaction: Discord.MessageComponentInteraction,
-	): ComponentInteraction {
-		// todo please dear god clean this up
-		const channel: ComponentEventChannel = interaction.channel
-			? {
-					...pruneNullishValues(
-						pick(interaction.channel, [
-							"topic",
-							"nsfw",
-							"lastMessageId",
-							"ownerId",
-							"parentId",
-							"rateLimitPerUser",
-						]),
-					),
-					id: interaction.channelId,
-			  }
-			: raise("Non-channel interactions are not supported")
-
-		const message: ComponentEventMessage =
-			interaction.message instanceof Discord.Message
-				? {
-						...pick(interaction.message, [
-							"id",
-							"channelId",
-							"authorId",
-							"content",
-							"tts",
-							"mentionEveryone",
-						]),
-						timestamp: new Date(
-							interaction.message.createdTimestamp,
-						).toISOString(),
-						editedTimestamp: interaction.message.editedTimestamp
-							? 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: ComponentEventGuildMember | undefined =
-			interaction.member instanceof Discord.GuildMember
-				? {
-						...pruneNullishValues(
-							pick(interaction.member, [
-								"id",
-								"nick",
-								"displayName",
-								"avatarUrl",
-								"displayAvatarUrl",
-								"color",
-								"pending",
-							]),
-						),
-						displayName: interaction.member.displayName,
-						roles: interaction.member.roles.cache.map((role) => role.id),
-						joinedAt: interaction.member.joinedAt?.toISOString(),
-						premiumSince: interaction.member.premiumSince?.toISOString(),
-						communicationDisabledUntil:
-							interaction.member.communicationDisabledUntil?.toISOString(),
-						color: interaction.member.displayColor,
-						displayAvatarUrl: interaction.member.displayAvatarURL(),
-				  }
-				: undefined
-
-		const guild: ComponentEventGuild | undefined = interaction.guild
-			? {
-					...pruneNullishValues(pick(interaction.guild, ["id", "name"])),
-					member: member ?? raise("unexpected: member is undefined"),
-			  }
-			: undefined
-
-		const user: ComponentEventUser = {
-			...pruneNullishValues(
-				pick(interaction.user, ["id", "username", "discriminator", "tag"]),
-			),
-			avatarUrl: interaction.user.avatarURL(),
-			accentColor: interaction.user.accentColor ?? undefined,
-		}
-
-		const baseProps: Except<ComponentInteraction, "type"> = {
-			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
-				await interaction.deferUpdate()
-			},
-			reply: async (options) => {
-				const message = await interaction.reply({
-					...getDiscordMessageOptions(options),
-					fetchReply: true,
-				})
-				return createReacordMessage(message)
-			},
-			followUp: async (options) => {
-				const message = await interaction.followUp({
-					...getDiscordMessageOptions(options),
-					fetchReply: true,
-				})
-				return createReacordMessage(message)
-			},
-			event: {
-				channel,
-				message,
-				user,
-				guild,
-
-				reply: (content?: ReactNode, options?: ComponentEventReplyOptions) =>
-					this.createInstance(
-						this.createInteractionReplyRenderer(interaction, options ?? {}),
-						content,
-					),
-
-				/** @deprecated Use event.reply(content, { ephemeral: true }) */
-				ephemeralReply: (content: ReactNode) =>
-					this.createInstance(
-						this.createInteractionReplyRenderer(interaction, {
-							ephemeral: true,
-						}),
-						content,
-					),
-			},
-		}
-
-		if (interaction.isButton()) {
-			return {
-				...baseProps,
-				type: "button",
-			}
-		}
-
-		if (interaction.isStringSelectMenu()) {
-			return {
-				...baseProps,
-				type: "select",
-				event: {
-					...baseProps.event,
-					values: interaction.values,
-				},
-			}
-		}
-
-		raise(`Unsupported component interaction type: ${interaction.type}`)
-	}
-}
-
-function createReacordMessage(message: Discord.Message): Message {
-	return {
-		edit: async (options) => {
-			await message.edit(getDiscordMessageOptions(options))
-		},
-		delete: async () => {
-			await message.delete()
-		},
-	}
-}
-
-function convertButtonStyleToEnum(style: MessageButtonOptions["style"]) {
-	const styleMap = {
-		primary: Discord.ButtonStyle.Primary,
-		secondary: Discord.ButtonStyle.Secondary,
-		success: Discord.ButtonStyle.Success,
-		danger: Discord.ButtonStyle.Danger,
-	} as const
-
-	return styleMap[style ?? "secondary"]
-}
-
-// TODO: this could be a part of the core library,
-// and also handle some edge cases, e.g. empty messages
-function getDiscordMessageOptions(reacordOptions: MessageOptions) {
-	const options = {
-		content: reacordOptions.content || undefined,
-		embeds: reacordOptions.embeds,
-		components: reacordOptions.actionRows.map((row) => ({
-			type: Discord.ComponentType.ActionRow,
-			components: row.map(
-				(component): Discord.MessageActionRowComponentData => {
-					if (component.type === "button") {
-						return {
-							type: Discord.ComponentType.Button,
-							customId: component.customId,
-							label: component.label ?? "",
-							style: convertButtonStyleToEnum(component.style),
-							disabled: component.disabled,
-							emoji: component.emoji,
-						}
-					}
-
-					if (component.type === "link") {
-						return {
-							type: Discord.ComponentType.Button,
-							url: component.url,
-							label: component.label ?? "",
-							style: Discord.ButtonStyle.Link,
-							disabled: component.disabled,
-							emoji: component.emoji,
-						}
-					}
-
-					// future proofing
-					// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-					if (component.type === "select") {
-						return {
-							...component,
-							type: Discord.ComponentType.SelectMenu,
-							options: component.options.map((option) => ({
-								...option,
-								default: component.values?.includes(option.value),
-							})),
-						}
-					}
-
-					component satisfies never
-					throw new Error(
-						`Invalid component type ${safeJsonStringify(component)}}`,
-					)
-				},
-			),
-		})),
-	}
-
-	if (!options.content && !options.embeds.length) {
-		options.content = "_ _"
-	}
-
-	return options
-}

packages/reacord/library/core/reacord.tsx

@@ -1,82 +0,0 @@
-import type { ReactNode } from "react"
-import type { ComponentInteraction } from "../internal/interaction.js"
-import { reconciler } from "../internal/reconciler.js"
-import type { Renderer } from "../internal/renderers/renderer.js"
-import { InstanceProvider } from "./instance-context.js"
-import type { ReacordInstance } from "./instance.js"
-
-/** @category Core */
-export interface ReacordConfig {
-	/**
-	 * The max number of active instances. When this limit is exceeded, the oldest
-	 * instances will be disabled.
-	 */
-	maxInstances?: number
-}
-
-/**
- * The main Reacord class that other Reacord adapters should extend. Only use
- * this directly if you're making [a custom adapter](/guides/custom-adapters).
- */
-export abstract class Reacord {
-	private renderers: Renderer[] = []
-
-	constructor(private readonly config: ReacordConfig = {}) {}
-
-	protected handleComponentInteraction(interaction: ComponentInteraction) {
-		for (const renderer of this.renderers) {
-			if (renderer.handleComponentInteraction(interaction)) return
-		}
-	}
-
-	private get maxInstances() {
-		return this.config.maxInstances ?? 50
-	}
-
-	protected createInstance(renderer: Renderer, initialContent?: ReactNode) {
-		if (this.renderers.length > this.maxInstances && this.renderers[0]) {
-			this.deactivate(this.renderers[0])
-		}
-
-		this.renderers.push(renderer)
-
-		const container: unknown = reconciler.createContainer(
-			renderer,
-			0,
-			null,
-			false,
-			null,
-			"reacord",
-			() => {},
-			null,
-		)
-
-		const instance: ReacordInstance = {
-			render: (content: ReactNode) => {
-				reconciler.updateContainer(
-					<InstanceProvider value={instance}>{content}</InstanceProvider>,
-					container,
-				)
-				return instance
-			},
-			deactivate: () => {
-				this.deactivate(renderer)
-			},
-			destroy: () => {
-				this.renderers = this.renderers.filter((it) => it !== renderer)
-				renderer.destroy()
-			},
-		}
-
-		if (initialContent !== undefined) {
-			instance.render(initialContent)
-		}
-
-		return instance
-	}
-
-	private deactivate(renderer: Renderer) {
-		this.renderers = this.renderers.filter((it) => it !== renderer)
-		renderer.deactivate()
-	}
-}

packages/reacord/library/internal/channel.ts

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

packages/reacord/library/internal/container.ts

@@ -1,39 +0,0 @@
-export class Container<T> {
-	private items: T[] = []
-
-	add(...items: T[]) {
-		this.items.push(...items)
-	}
-
-	addBefore(item: T, before: T) {
-		let index = this.items.indexOf(before)
-		if (index === -1) {
-			index = this.items.length
-		}
-		this.items.splice(index, 0, item)
-	}
-
-	remove(toRemove: T) {
-		this.items = this.items.filter((item) => item !== toRemove)
-	}
-
-	clear() {
-		this.items = []
-	}
-
-	find(predicate: (item: T) => boolean): T | undefined {
-		return this.items.find(predicate)
-	}
-
-	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
-		}
-	}
-
-	[Symbol.iterator]() {
-		return this.items[Symbol.iterator]()
-	}
-}

packages/reacord/library/internal/element.ts

@@ -1,11 +0,0 @@
-import type { Node } from "./node"
-import type { ReactNode } from "react"
-import React from "react"
-
-export function ReacordElement<Props>(props: {
-	props: Props
-	createNode: () => Node<Props>
-	children?: ReactNode
-}) {
-	return React.createElement("reacord-element", props)
-}

packages/reacord/library/internal/interaction.ts

@@ -1,35 +0,0 @@
-import type { ComponentEvent } from "../core/component-event"
-import type { ButtonClickEvent, SelectChangeEvent } from "../main"
-import type { Message, MessageOptions } from "./message"
-
-export type Interaction = CommandInteraction | ComponentInteraction
-export type ComponentInteraction = ButtonInteraction | SelectInteraction
-
-export type CommandInteraction = BaseInteraction<"command">
-
-export type ButtonInteraction = BaseComponentInteraction<
-	"button",
-	ButtonClickEvent
->
-
-export type SelectInteraction = BaseComponentInteraction<
-	"select",
-	SelectChangeEvent
->
-
-export interface BaseInteraction<Type extends string> {
-	type: Type
-	id: string
-	reply(messageOptions: MessageOptions): Promise<Message>
-	followUp(messageOptions: MessageOptions): Promise<Message>
-}
-
-export type BaseComponentInteraction<
-	Type extends string,
-	Event extends ComponentEvent,
-> = BaseInteraction<Type> & {
-	event: Event
-	customId: string
-	update(options: MessageOptions): Promise<void>
-	deferUpdate(): Promise<void>
-}

packages/reacord/library/internal/limited-collection.ts

@@ -1,24 +0,0 @@
-export class LimitedCollection<T> {
-	private items: T[] = []
-
-	constructor(private readonly size: number) {}
-
-	add(item: T) {
-		if (this.items.length >= this.size) {
-			this.items.shift()
-		}
-		this.items.push(item)
-	}
-
-	has(item: T) {
-		return this.items.includes(item)
-	}
-
-	values(): readonly T[] {
-		return this.items
-	}
-
-	[Symbol.iterator]() {
-		return this.items[Symbol.iterator]()
-	}
-}

packages/reacord/library/internal/message.ts

@@ -1,65 +0,0 @@
-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 interface MessageOptions {
-	content: string
-	embeds: EmbedOptions[]
-	actionRows: ActionRow[]
-}
-
-export type ActionRow = ActionRowItem[]
-
-export type ActionRowItem =
-	| MessageButtonOptions
-	| MessageLinkOptions
-	| MessageSelectOptions
-
-export interface MessageButtonOptions {
-	type: "button"
-	customId: string
-	label?: string
-	style?: "primary" | "secondary" | "success" | "danger"
-	disabled?: boolean
-	emoji?: string
-}
-
-export interface MessageLinkOptions {
-	type: "link"
-	url: string
-	label?: string
-	emoji?: string
-	disabled?: boolean
-}
-
-export type MessageSelectOptions = Except<SelectProps, "children" | "value"> & {
-	type: "select"
-	customId: string
-	options: MessageSelectOptionOptions[]
-}
-
-export interface MessageSelectOptionOptions {
-	label: string
-	value: string
-	description?: string
-	emoji?: string
-}
-
-export interface Message {
-	edit(options: MessageOptions): Promise<void>
-	delete(): Promise<void>
-}
-
-export function getNextActionRow(options: MessageOptions): ActionRow {
-	let actionRow = last(options.actionRows)
-	if (
-		actionRow == undefined ||
-		actionRow.length >= 5 ||
-		actionRow[0]?.type === "select"
-	) {
-		actionRow = []
-		options.actionRows.push(actionRow)
-	}
-	return actionRow
-}

packages/reacord/library/internal/node.ts

@@ -1,21 +0,0 @@
-import { Container } from "./container.js"
-import type { ComponentInteraction } from "./interaction"
-import type { MessageOptions } from "./message"
-
-export abstract class Node<Props> {
-	readonly children = new Container<Node<unknown>>()
-
-	constructor(public props: Props) {}
-
-	modifyMessageOptions(_options: MessageOptions) {
-		// noop
-	}
-
-	handleComponentInteraction(_interaction: ComponentInteraction): boolean {
-		return false
-	}
-
-	get text(): string {
-		return [...this.children].map((child) => child.text).join("")
-	}
-}

packages/reacord/library/internal/reconciler.ts

@@ -1,107 +0,0 @@
-import { raise } from "@reacord/helpers/raise.js"
-import type { HostConfig } from "react-reconciler"
-import ReactReconciler from "react-reconciler"
-import { DefaultEventPriority } from "react-reconciler/constants.js"
-import { Node } from "./node.js"
-import type { Renderer } from "./renderers/renderer"
-import { TextNode } from "./text-node.js"
-
-const config: HostConfig<
-	string, // Type,
-	Record<string, unknown>, // Props,
-	Renderer, // Container,
-	Node<unknown>, // Instance,
-	TextNode, // TextInstance,
-	never, // SuspenseInstance,
-	never, // HydratableInstance,
-	never, // PublicInstance,
-	never, // HostContext,
-	true, // UpdatePayload,
-	never, // ChildSet,
-	number, // TimeoutHandle,
-	number // NoTimeout,
-> = {
-	supportsMutation: true,
-	supportsPersistence: false,
-	supportsHydration: false,
-	isPrimaryRenderer: true,
-	scheduleTimeout: global.setTimeout,
-	cancelTimeout: global.clearTimeout,
-	noTimeout: -1,
-
-	getRootHostContext: () => null,
-	getChildHostContext: (parentContext) => parentContext,
-
-	createInstance: (type, props) => {
-		if (type !== "reacord-element") {
-			raise(`Unknown element type: ${type}`)
-		}
-
-		if (typeof props.createNode !== "function") {
-			raise(`Missing createNode function`)
-		}
-
-		const node: unknown = props.createNode(props.props)
-		if (!(node instanceof Node)) {
-			raise(`createNode function did not return a Node`)
-		}
-
-		return node
-	},
-	createTextInstance: (text) => new TextNode(text),
-	shouldSetTextContent: () => false,
-	detachDeletedInstance: (_instance) => {},
-	beforeActiveInstanceBlur: () => {},
-	afterActiveInstanceBlur: () => {},
-	getInstanceFromNode: (_node: unknown) => null,
-	getInstanceFromScope: (_scopeInstance: unknown) => null,
-
-	clearContainer: (renderer) => {
-		renderer.nodes.clear()
-	},
-	appendChildToContainer: (renderer, child) => {
-		renderer.nodes.add(child)
-	},
-	removeChildFromContainer: (renderer, child) => {
-		renderer.nodes.remove(child)
-	},
-	insertInContainerBefore: (renderer, child, before) => {
-		renderer.nodes.addBefore(child, before)
-	},
-
-	appendInitialChild: (parent, child) => {
-		parent.children.add(child)
-	},
-	appendChild: (parent, child) => {
-		parent.children.add(child)
-	},
-	removeChild: (parent, child) => {
-		parent.children.remove(child)
-	},
-	insertBefore: (parent, child, before) => {
-		parent.children.addBefore(child, before)
-	},
-
-	prepareUpdate: () => true,
-	commitUpdate: (node, payload, type, oldProps, newProps) => {
-		node.props = newProps.props
-	},
-	commitTextUpdate: (node, oldText, newText) => {
-		node.props = newText
-	},
-
-	prepareForCommit: () => null,
-	resetAfterCommit: (renderer) => {
-		renderer.render()
-	},
-	prepareScopeUpdate: (_scopeInstance: unknown, _instance: unknown) => {},
-
-	preparePortalMount: () => raise("Portals are not supported"),
-	getPublicInstance: () => raise("Refs are currently not supported"),
-
-	finalizeInitialChildren: () => false,
-
-	getCurrentEventPriority: () => DefaultEventPriority,
-}
-
-export const reconciler = ReactReconciler(config)

packages/reacord/library/internal/renderers/channel-message-renderer.ts

@@ -1,13 +0,0 @@
-import type { Channel } from "../channel"
-import type { Message, MessageOptions } from "../message"
-import { Renderer } from "./renderer"
-
-export class ChannelMessageRenderer extends Renderer {
-	constructor(private channel: Channel) {
-		super()
-	}
-
-	protected createMessage(options: MessageOptions): Promise<Message> {
-		return this.channel.send(options)
-	}
-}

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

@@ -1,27 +0,0 @@
-import type { Message, MessageOptions } from "../message"
-import { Renderer } from "./renderer"
-
-// keep track of interaction ids which have replies,
-// 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 implementation: InteractionReplyRendererImplementation) {
-		super()
-	}
-
-	protected createMessage(options: MessageOptions): Promise<Message> {
-		if (repliedInteractionIds.has(this.implementation.interactionId)) {
-			return this.implementation.followUp(options)
-		}
-
-		repliedInteractionIds.add(this.implementation.interactionId)
-		return this.implementation.reply(options)
-	}
-}

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

@@ -1,117 +0,0 @@
-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 }
-	| { action: "deferUpdate"; interaction: ComponentInteraction }
-	| { action: "destroy" }
-
-export abstract class Renderer {
-	readonly nodes = new Container<Node<unknown>>()
-	private componentInteraction?: ComponentInteraction
-	private message?: Message
-	private active = true
-	private updates = new Subject<UpdatePayload>()
-
-	private updateSubscription = this.updates
-		.pipe(concatMap((payload) => this.updateMessage(payload)))
-		.subscribe({ error: console.error })
-
-	render() {
-		if (!this.active) {
-			console.warn("Attempted to update a deactivated message")
-			return
-		}
-
-		this.updates.next({
-			options: this.getMessageOptions(),
-			action: "update",
-		})
-	}
-
-	deactivate() {
-		this.active = false
-		this.updates.next({
-			options: this.getMessageOptions(),
-			action: "deactivate",
-		})
-	}
-
-	destroy() {
-		this.active = false
-		this.updates.next({ action: "destroy" })
-	}
-
-	handleComponentInteraction(interaction: ComponentInteraction) {
-		for (const node of this.nodes) {
-			if (node.handleComponentInteraction(interaction)) {
-				this.componentInteraction = interaction
-				setTimeout(() => {
-					this.updates.next({ action: "deferUpdate", interaction })
-				}, 500)
-				return true
-			}
-		}
-	}
-
-	protected abstract createMessage(options: MessageOptions): Promise<Message>
-
-	private getMessageOptions(): MessageOptions {
-		const options: MessageOptions = {
-			content: "",
-			embeds: [],
-			actionRows: [],
-		}
-		for (const node of this.nodes) {
-			node.modifyMessageOptions(options)
-		}
-		return options
-	}
-
-	private async updateMessage(payload: UpdatePayload) {
-		if (payload.action === "destroy") {
-			this.updateSubscription.unsubscribe()
-			await this.message?.delete()
-			return
-		}
-
-		if (payload.action === "deactivate") {
-			this.updateSubscription.unsubscribe()
-
-			await this.message?.edit({
-				...payload.options,
-				actionRows: payload.options.actionRows.map((row) =>
-					row.map((component) => ({
-						...component,
-						disabled: true,
-					})),
-				),
-			})
-
-			return
-		}
-
-		if (payload.action === "deferUpdate") {
-			await payload.interaction.deferUpdate()
-			return
-		}
-
-		if (this.componentInteraction) {
-			const promise = this.componentInteraction.update(payload.options)
-			this.componentInteraction = undefined
-			await promise
-			return
-		}
-
-		if (this.message) {
-			await this.message.edit(payload.options)
-			return
-		}
-
-		this.message = await this.createMessage(payload.options)
-	}
-}

packages/reacord/library/internal/text-node.ts

@@ -1,12 +0,0 @@
-import type { MessageOptions } from "./message"
-import { Node } from "./node.js"
-
-export class TextNode extends Node<string> {
-	override modifyMessageOptions(options: MessageOptions) {
-		options.content = options.content + this.props
-	}
-
-	override get text() {
-		return this.props
-	}
-}

packages/reacord/library/internal/timeout.ts

@@ -1,20 +0,0 @@
-export class Timeout {
-	private timeoutId?: NodeJS.Timeout
-
-	constructor(
-		private readonly time: number,
-		private readonly callback: () => void,
-	) {}
-
-	run() {
-		this.cancel()
-		this.timeoutId = setTimeout(this.callback, this.time)
-	}
-
-	cancel() {
-		if (this.timeoutId) {
-			clearTimeout(this.timeoutId)
-			this.timeoutId = undefined
-		}
-	}
-}

packages/reacord/library/main.ts

@@ -1,18 +0,0 @@
-export * from "./core/component-event"
-export * from "./core/components/action-row"
-export * from "./core/components/button"
-export * from "./core/components/button-shared-props"
-export * from "./core/components/embed"
-export * from "./core/components/embed-author"
-export * from "./core/components/embed-field"
-export * from "./core/components/embed-footer"
-export * from "./core/components/embed-image"
-export * from "./core/components/embed-thumbnail"
-export * from "./core/components/embed-title"
-export * from "./core/components/link"
-export * from "./core/components/option"
-export * from "./core/components/select"
-export * from "./core/instance"
-export { useInstance } from "./core/instance-context"
-export * from "./core/reacord"
-export * from "./core/reacord-discord-js"

packages/reacord/package.json

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

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

@@ -1,144 +0,0 @@
-import { raise } from "@reacord/helpers/raise.js"
-import {
-	Button,
-	Link,
-	Option,
-	ReacordDiscordJs,
-	Select,
-	useInstance,
-} 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 ?? raise("TEST_GUILD_ID not defined"),
-)
-
-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}`,
-	)
-}
-
-for (const [, channel] of category.children.cache) {
-	await channel.delete()
-}
-
-let prefix = 0
-const createTest = async (
-	name: string,
-	block: (channel: TextChannel) => unknown,
-) => {
-	prefix += 1
-	const channel = await category.children.create({
-		type: ChannelType.GuildText,
-		name: `${String(prefix).padStart(3, "0")}-${kebabCase(name)}`,
-	})
-	await block(channel)
-}
-
-await createTest("basic", (channel) => {
-	reacord.createChannelMessage(channel).render("Hello, world!")
-})
-
-await createTest("counter", (channel) => {
-	const Counter = () => {
-		const [count, setCount] = React.useState(0)
-		return (
-			<>
-				count: {count}
-				<Button
-					style="primary"
-					emoji="➕"
-					onClick={() => setCount(count + 1)}
-				/>
-				<Button
-					style="primary"
-					emoji="➖"
-					onClick={() => setCount(count - 1)}
-				/>
-				<Button label="reset" onClick={() => setCount(0)} />
-			</>
-		)
-	}
-	reacord.createChannelMessage(channel).render(<Counter />)
-})
-
-await createTest("select", (channel) => {
-	function FruitSelect({ onConfirm }: { onConfirm: (choice: string) => void }) {
-		const [value, setValue] = useState<string>()
-
-		return (
-			<>
-				<Select
-					placeholder="choose a fruit"
-					value={value}
-					onChangeValue={setValue}
-				>
-					<Option value="🍎" emoji="🍎" label="apple" description="it red" />
-					<Option value="🍌" emoji="🍌" label="banana" description="bnanbna" />
-					<Option value="🍒" emoji="🍒" label="cherry" description="heh" />
-				</Select>
-				<Button
-					label="confirm"
-					disabled={value == undefined}
-					onClick={() => {
-						if (value) onConfirm(value)
-					}}
-				/>
-			</>
-		)
-	}
-
-	const instance = reacord.createChannelMessage(channel).render(
-		<FruitSelect
-			onConfirm={(value) => {
-				instance.render(`you chose ${value}`)
-				instance.deactivate()
-			}}
-		/>,
-	)
-})
-
-await createTest("ephemeral button", (channel) => {
-	reacord.createChannelMessage(channel).render(
-		<>
-			<Button
-				label="public clic"
-				onClick={(event) =>
-					event.reply(`${event.guild?.member.displayName} clic`)
-				}
-			/>
-			<Button
-				label="clic"
-				onClick={(event) => event.reply("you clic", { ephemeral: true })}
-			/>
-		</>,
-	)
-})
-
-await createTest("delete this", (channel) => {
-	function DeleteThis() {
-		const instance = useInstance()
-		return <Button label="delete this" onClick={() => instance.destroy()} />
-	}
-	reacord.createChannelMessage(channel).render(<DeleteThis />)
-})
-
-await createTest("link", (channel) => {
-	reacord
-		.createChannelMessage(channel)
-		.render(<Link label="hi" url="https://mapleleaf.dev" />)
-})

packages/reacord/scripts/generate-exports.ts

@@ -0,0 +1,62 @@
+import { writeFile } from "node:fs/promises"
+import { join, relative } from "node:path/posix"
+import prettier from "prettier"
+import { Node, Project, SyntaxKind } from "ts-morph"
+
+function isDeclarationPublic(declaration: Node) {
+  if (!Node.isJSDocable(declaration)) return false
+
+  const jsDocTags = new Set(
+    declaration
+      .getJsDocs()
+      .flatMap((doc) => doc.getTags())
+      .map((tag) => tag.getTagName()),
+  )
+
+  return jsDocTags.has("category") && !jsDocTags.has("private")
+}
+
+const project = new Project()
+
+project.addSourceFilesAtPaths(["src/**/*.{ts,tsx}", "!src/main.ts"])
+
+const exportLines = project
+  .getSourceFiles()
+  .map((file) => {
+    const importPath = relative(
+      "src",
+      join(file.getDirectoryPath(), file.getBaseNameWithoutExtension()),
+    )
+    const exports = file.getExportedDeclarations()
+
+    const exportNames = [...exports].flatMap(([name, [declaration]]) => {
+      if (!declaration) return []
+      if (!isDeclarationPublic(declaration)) return []
+      if (
+        declaration.isKind(SyntaxKind.TypeAliasDeclaration) ||
+        declaration.isKind(SyntaxKind.InterfaceDeclaration)
+      ) {
+        return `type ${name}`
+      }
+      return name
+    })
+
+    return { importPath, exportNames }
+  })
+  .filter(({ exportNames }) => exportNames.length > 0)
+  .map(({ importPath, exportNames }) => {
+    return `export { ${exportNames.join(", ")} } from "./${importPath}"`
+  })
+
+const resolvedConfig = await prettier.resolveConfig("src/main.ts")
+if (!resolvedConfig) {
+  throw new Error("Could not find prettier config")
+}
+
+await writeFile(
+  "src/main.ts",
+  prettier.format(exportLines.join(";"), {
+    ...resolvedConfig,
+    parser: "typescript",
+  }),
+)

packages/reacord/src/create-discord-client.ts

@@ -0,0 +1,13 @@
+import type { ClientOptions } from "discord.js"
+import { Client } from "discord.js"
+import { once } from "node:events"
+
+export async function createDiscordClient(
+  token: string,
+  options: ClientOptions,
+) {
+  const client = new Client(options)
+  await client.login(token)
+  const [readyClient] = await once(client, "ready")
+  return readyClient
+}

packages/reacord/src/main.ts

@@ -0,0 +1,28 @@
+export {
+  type ReacordConfig,
+  type InteractionInfo,
+  ReacordClient,
+} from "./reacord-client"
+export { type ReacordInstance } from "./reacord-instance"
+export { ActionRow, type ActionRowProps } from "./react/action-row"
+export { type ButtonSharedProps } from "./react/button-shared-props"
+export { Button, type ButtonProps, type ButtonClickEvent } from "./react/button"
+export { type ComponentEvent } from "./react/component-event"
+export { EmbedAuthor, type EmbedAuthorProps } from "./react/embed-author"
+export { EmbedField, type EmbedFieldProps } from "./react/embed-field"
+export { EmbedFooter, type EmbedFooterProps } from "./react/embed-footer"
+export { EmbedImage, type EmbedImageProps } from "./react/embed-image"
+export {
+  EmbedThumbnail,
+  type EmbedThumbnailProps,
+} from "./react/embed-thumbnail"
+export { EmbedTitle, type EmbedTitleProps } from "./react/embed-title"
+export { Embed, type EmbedProps } from "./react/embed"
+export { useInstance } from "./react/instance-context"
+export { Link, type LinkProps } from "./react/link"
+export { Option, type OptionProps } from "./react/option"
+export {
+  Select,
+  type SelectProps,
+  type SelectChangeEvent,
+} from "./react/select"

packages/reacord/src/make-message-update-payload.ts

@@ -0,0 +1,257 @@
+import type {
+  APIActionRowComponent,
+  APIButtonComponent,
+  APIEmbed,
+  APISelectMenuComponent,
+  APISelectMenuOption,
+} from "discord-api-types/v10"
+import { ButtonStyle, ComponentType } from "discord-api-types/v10"
+import type { Node } from "./node"
+import { TextNode } from "./node"
+import { ActionRowNode } from "./react/action-row"
+import type { ButtonProps } from "./react/button"
+import { ButtonNode } from "./react/button"
+import { EmbedNode } from "./react/embed"
+import { EmbedAuthorNode } from "./react/embed-author"
+import {
+  EmbedFieldNameNode,
+  EmbedFieldNode,
+  EmbedFieldValueNode,
+} from "./react/embed-field"
+import { EmbedFooterNode } from "./react/embed-footer"
+import { EmbedImageNode } from "./react/embed-image"
+import { EmbedThumbnailNode } from "./react/embed-thumbnail"
+import { EmbedTitleNode } from "./react/embed-title"
+import { LinkNode } from "./react/link"
+import {
+  OptionDescriptionNode,
+  OptionLabelNode,
+  OptionNode,
+} from "./react/option"
+import { SelectNode } from "./react/select"
+
+export type MessageUpdatePayload = {
+  content: string | null
+  embeds: APIEmbed[]
+  components: Array<
+    APIActionRowComponent<APIButtonComponent | APISelectMenuComponent>
+  >
+}
+
+export function makeMessageUpdatePayload(root: Node): MessageUpdatePayload {
+  return {
+    // eslint-disable-next-line unicorn/no-null
+    content: root.extractText() || null,
+    embeds: makeEmbeds(root),
+    components: makeActionRows(root),
+  }
+}
+
+function makeEmbeds(root: Node) {
+  const embeds: APIEmbed[] = []
+
+  for (const node of root.children) {
+    if (node instanceof EmbedNode) {
+      const { props, children } = node
+
+      const embed: APIEmbed = {
+        author: props.author && {
+          name: props.author.name,
+          icon_url: props.author.iconUrl,
+          url: props.author.url,
+        },
+        color: props.color,
+        description: props.description,
+        fields: props.fields?.map(({ name, value, inline }) => ({
+          name,
+          value,
+          inline,
+        })),
+        footer: props.footer && {
+          text: props.footer.text,
+          icon_url: props.footer.iconUrl,
+        },
+        image: props.image,
+        thumbnail: props.thumbnail,
+        title: props.title,
+        url: props.url,
+        video: props.video,
+      }
+
+      if (props.timestamp !== undefined) {
+        embed.timestamp = normalizeDatePropToISOString(props.timestamp)
+      }
+
+      applyEmbedChildren(embed, children)
+
+      embeds.push(embed)
+    }
+  }
+
+  return embeds
+}
+
+function applyEmbedChildren(embed: APIEmbed, children: Node[]) {
+  for (const child of children) {
+    if (child instanceof EmbedAuthorNode) {
+      embed.author = {
+        name: child.extractText(),
+        icon_url: child.props.iconUrl,
+        url: child.props.url,
+      }
+    }
+
+    if (child instanceof EmbedFieldNode) {
+      embed.fields ??= []
+      embed.fields.push({
+        name: child.findInstanceOf(EmbedFieldNameNode)?.extractText() ?? "",
+        value:
+          child.findInstanceOf(EmbedFieldValueNode)?.extractText() || "_ _", // can't send an empty string
+        inline: child.props.inline,
+      })
+    }
+
+    if (child instanceof EmbedFooterNode) {
+      embed.footer = {
+        text: child.extractText(),
+        icon_url: child.props.iconUrl,
+      }
+      if (child.props.timestamp != undefined) {
+        embed.timestamp = normalizeDatePropToISOString(child.props.timestamp)
+      }
+    }
+
+    if (child instanceof EmbedImageNode) {
+      embed.image = { url: child.props.url }
+    }
+
+    if (child instanceof EmbedThumbnailNode) {
+      embed.thumbnail = { url: child.props.url }
+    }
+
+    if (child instanceof EmbedTitleNode) {
+      embed.title = child.extractText()
+      embed.url = child.props.url
+    }
+
+    if (child instanceof EmbedNode) {
+      applyEmbedChildren(embed, child.children)
+    }
+
+    if (child instanceof TextNode) {
+      embed.description ??= ""
+      embed.description += child.props.text
+    }
+  }
+}
+
+function normalizeDatePropToISOString(value: string | number | Date) {
+  return value instanceof Date
+    ? value.toISOString()
+    : new Date(value).toISOString()
+}
+
+function makeActionRows(root: Node) {
+  const actionRows: Array<
+    APIActionRowComponent<APIButtonComponent | APISelectMenuComponent>
+  > = []
+
+  function getNextActionRow() {
+    let currentRow = actionRows[actionRows.length - 1]
+    if (
+      !currentRow ||
+      currentRow.components.length >= 5 ||
+      currentRow.components[0]?.type === ComponentType.SelectMenu
+    ) {
+      currentRow = {
+        type: ComponentType.ActionRow,
+        components: [],
+      }
+      actionRows.push(currentRow)
+    }
+    return currentRow
+  }
+
+  for (const node of root.children) {
+    if (node instanceof ButtonNode) {
+      getNextActionRow().components.push({
+        type: ComponentType.Button,
+        custom_id: node.customId,
+        label: node.extractText(Number.POSITIVE_INFINITY),
+        emoji: node.props.emoji ? { name: node.props.emoji } : undefined,
+        style: translateButtonStyle(node.props.style ?? "secondary"),
+        disabled: node.props.disabled,
+      })
+    }
+
+    if (node instanceof LinkNode) {
+      getNextActionRow().components.push({
+        type: ComponentType.Button,
+        label: node.extractText(Number.POSITIVE_INFINITY),
+        url: node.props.url,
+        style: ButtonStyle.Link,
+        disabled: node.props.disabled,
+      })
+    }
+
+    if (node instanceof SelectNode) {
+      const actionRow: APIActionRowComponent<APISelectMenuComponent> = {
+        type: ComponentType.ActionRow,
+        components: [],
+      }
+      actionRows.push(actionRow)
+
+      let selectedValues: string[] = []
+      if (node.props.multiple && node.props.values) {
+        selectedValues = node.props.values ?? []
+      }
+      if (!node.props.multiple && node.props.value != undefined) {
+        selectedValues = [node.props.value]
+      }
+
+      const options = [...node.children]
+        .flatMap((child) => (child instanceof OptionNode ? child : []))
+        .map<APISelectMenuOption>((child) => ({
+          label:
+            child.findInstanceOf(OptionLabelNode)?.extractText() ||
+            child.props.value,
+          description: child
+            .findInstanceOf(OptionDescriptionNode)
+            ?.extractText(),
+          value: child.props.value,
+          default: selectedValues.includes(child.props.value),
+          emoji: { name: child.props.emoji },
+        }))
+
+      const select: APISelectMenuComponent = {
+        type: ComponentType.SelectMenu,
+        custom_id: node.customId,
+        options,
+        disabled: node.props.disabled,
+      }
+
+      if (node.props.multiple) {
+        select.min_values = node.props.minValues
+        select.max_values = node.props.maxValues
+      }
+
+      actionRow.components.push(select)
+    }
+
+    if (node instanceof ActionRowNode) {
+      actionRows.push(...makeActionRows(node))
+    }
+  }
+
+  return actionRows
+}
+
+function translateButtonStyle(style: NonNullable<ButtonProps["style"]>) {
+  const styleMap = {
+    primary: ButtonStyle.Primary,
+    secondary: ButtonStyle.Secondary,
+    danger: ButtonStyle.Danger,
+    success: ButtonStyle.Success,
+  } as const
+  return styleMap[style]
+}

packages/reacord/src/node.ts

@@ -0,0 +1,57 @@
+export class Node<Props = unknown> {
+  readonly children: Node[] = []
+
+  constructor(public props: Props) {}
+
+  clear() {
+    this.children.splice(0)
+  }
+
+  add(...nodes: Node[]) {
+    this.children.push(...nodes)
+  }
+
+  remove(node: Node) {
+    const index = this.children.indexOf(node)
+    if (index !== -1) this.children.splice(index, 1)
+  }
+
+  insertBefore(node: Node, beforeNode: Node) {
+    const index = this.children.indexOf(beforeNode)
+    if (index !== -1) this.children.splice(index, 0, node)
+  }
+
+  replace(oldNode: Node, newNode: Node) {
+    const index = this.children.indexOf(oldNode)
+    if (index !== -1) this.children[index] = newNode
+  }
+
+  clone(): this {
+    const cloned: this = new (this.constructor as any)()
+    cloned.add(...this.children.map((child) => child.clone()))
+    return cloned
+  }
+
+  *walk(): Generator<Node> {
+    yield this
+    for (const child of this.children) {
+      yield* child.walk()
+    }
+  }
+
+  findInstanceOf<T extends Node>(
+    cls: new (...args: any[]) => T,
+  ): T | undefined {
+    for (const child of this.children) {
+      if (child instanceof cls) return child
+    }
+  }
+
+  extractText(depth = 1): string {
+    if (this instanceof TextNode) return this.props.text
+    if (depth <= 0) return ""
+    return this.children.map((child) => child.extractText(depth - 1)).join("")
+  }
+}
+
+export class TextNode extends Node<{ text: string }> {}

packages/reacord/src/reacord-client.ts

@@ -0,0 +1,181 @@
+import type { APIInteraction, Client } from "discord.js"
+import {
+  GatewayDispatchEvents,
+  GatewayIntentBits,
+  InteractionResponseType,
+  InteractionType,
+  Routes,
+} from "discord.js"
+import * as React from "react"
+import { createDiscordClient } from "./create-discord-client"
+import type { ReacordInstance } from "./reacord-instance"
+import { ReacordInstancePrivate } from "./reacord-instance"
+import { InstanceProvider } from "./react/instance-context"
+import type { Renderer } from "./renderer"
+import {
+  ChannelMessageRenderer,
+  EphemeralInteractionReplyRenderer,
+  InteractionReplyRenderer,
+} from "./renderer"
+
+/**
+ * @category Core
+ */
+export type ReacordConfig = {
+  /** Discord bot token */
+  token: string
+
+  /**
+   * The max number of active instances.
+   * When this limit is exceeded, the oldest instances will be cleaned up
+   * to prevent memory leaks.
+   */
+  maxInstances?: number
+}
+
+/**
+ * Info for replying to an interaction. For Discord.js
+ * (and probably other libraries) you should be able to pass the
+ * interaction object directly:
+ * ```js
+ * client.on("interactionCreate", (interaction) => {
+ *   if (interaction.isChatInputCommand() && interaction.commandName === "hi") {
+ *     reacord.reply(interacition, "hi lol")
+ *   }
+ * })
+ * ```
+ * @category Core
+ */
+export type InteractionInfo = {
+  id: string
+  token: string
+}
+
+/**
+ * @category Core
+ */
+export class ReacordClient {
+  private readonly config: Required<ReacordConfig>
+  private readonly discordClientPromise: Promise<Client<true>>
+  private instances: ReacordInstancePrivate[] = []
+  destroyed = false
+
+  constructor(config: ReacordConfig) {
+    this.config = {
+      ...config,
+      maxInstances: config.maxInstances ?? 50,
+    }
+
+    this.discordClientPromise = createDiscordClient(this.config.token, {
+      intents: [GatewayIntentBits.Guilds],
+    })
+
+    this.discordClientPromise
+      .then((client) => {
+        // we listen to the websocket message instead of the normal "interactionCreate" event,
+        // so that we can pass a library-agnostic APIInteraction object to the user's component callbacks
+        // the DJS MessageComponentInteraction doesn't have the raw data on it (as of writing this)
+        client.ws.on(
+          GatewayDispatchEvents.InteractionCreate,
+          async (interaction: APIInteraction) => {
+            if (interaction.type !== InteractionType.MessageComponent) return
+
+            // handling a component interaction may not always result in a re-render,
+            // and in the case that it doesn't, discord will incorrectly show "interaction failed",
+            // so here, we'll just always defer an update just in case
+            //
+            // we _can_ be a little smarter and check to see if an update happened before deferring,
+            // but I can figure that out later
+            //
+            // or we can make the user defer themselves if they don't update,
+            // but that's bad UX probably
+            await client.rest.post(
+              Routes.interactionCallback(interaction.id, interaction.token),
+              { body: { type: InteractionResponseType.DeferredMessageUpdate } },
+            )
+
+            for (const instance of this.instances) {
+              instance.handleInteraction(interaction, this)
+            }
+          },
+        )
+        return client
+      })
+      .catch(console.error)
+  }
+
+  send(channelId: string, initialContent?: React.ReactNode) {
+    return this.createInstance(
+      new ChannelMessageRenderer(channelId, this.discordClientPromise),
+      initialContent,
+    )
+  }
+
+  reply(interaction: InteractionInfo, initialContent?: React.ReactNode) {
+    return this.createInstance(
+      new InteractionReplyRenderer(interaction, this.discordClientPromise),
+      initialContent,
+    )
+  }
+
+  ephemeralReply(
+    interaction: InteractionInfo,
+    initialContent?: React.ReactNode,
+  ) {
+    return this.createInstance(
+      new EphemeralInteractionReplyRenderer(
+        interaction,
+        this.discordClientPromise,
+      ),
+      initialContent,
+    )
+  }
+
+  destroy() {
+    void this.discordClientPromise.then((client) => client.destroy())
+    this.destroyed = true
+  }
+
+  private createInstance(renderer: Renderer, initialContent?: React.ReactNode) {
+    if (this.destroyed) throw new Error("ReacordClient is destroyed")
+
+    const instance = new ReacordInstancePrivate(renderer)
+
+    this.instances.push(instance)
+
+    if (this.instances.length > this.config.maxInstances) {
+      void this.instances[0]?.deactivate()
+      this.removeInstance(this.instances[0]!)
+    }
+
+    const publicInstance: ReacordInstance = {
+      render: (content: React.ReactNode) => {
+        instance.render(
+          React.createElement(
+            InstanceProvider,
+            { value: publicInstance },
+            content,
+          ),
+        )
+      },
+      deactivate: () => {
+        this.removeInstance(instance)
+        renderer.deactivate()
+      },
+      destroy: () => {
+        this.removeInstance(instance)
+        renderer.destroy()
+      },
+    }
+
+    if (initialContent !== undefined) {
+      publicInstance.render(initialContent)
+    }
+
+    return publicInstance
+  }
+
+  private removeInstance(instance: ReacordInstancePrivate) {
+    this.instances = this.instances.filter((the) => the !== instance)
+  }
+}

packages/reacord/src/reacord-instance.ts

@@ -0,0 +1,122 @@
+import type {
+  APIMessageComponentButtonInteraction,
+  APIMessageComponentInteraction,
+  APIMessageComponentSelectMenuInteraction,
+} from "discord.js"
+import { ComponentType } from "discord.js"
+import type * as React from "react"
+import { Node } from "./node"
+import type { ReacordClient } from "./reacord-client"
+import { ButtonNode } from "./react/button"
+import type { ComponentEvent } from "./react/component-event"
+import { reconciler } from "./react/reconciler"
+import type { SelectChangeEvent } from "./react/select"
+import { SelectNode } from "./react/select"
+import type { Renderer } from "./renderer"
+
+/**
+ * Represents an interactive message, which can later be replaced or deleted.
+ * @category Core
+ */
+export type ReacordInstance = {
+  /** Render some JSX to this instance (edits the message) */
+  render(content: React.ReactNode): void
+
+  /** Remove this message */
+  destroy(): void
+
+  /**
+   * Same as destroy, but keeps the message and disables the components on it.
+   * This prevents it from listening to user interactions.
+   */
+  deactivate(): void
+}
+
+export class ReacordInstancePrivate {
+  private readonly container = reconciler.createContainer(
+    this,
+    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,
+  )
+
+  readonly tree = new Node({})
+  private latestTree?: Node
+
+  constructor(readonly renderer: Renderer) {}
+
+  render(content: React.ReactNode) {
+    reconciler.updateContainer(content, this.container)
+  }
+
+  update(tree: Node) {
+    this.renderer.update(tree)
+    this.latestTree = tree
+  }
+
+  deactivate() {
+    this.renderer.deactivate()
+  }
+
+  destroy() {
+    this.renderer.destroy()
+  }
+
+  handleInteraction(
+    interaction: APIMessageComponentInteraction,
+    client: ReacordClient,
+  ) {
+    if (!this.latestTree) return
+
+    this.renderer.onComponentInteraction(interaction)
+
+    const baseEvent: ComponentEvent = {
+      reply: (content) => client.reply(interaction, content),
+      ephemeralReply: (content) => client.ephemeralReply(interaction, content),
+    }
+
+    if (interaction.data.component_type === ComponentType.Button) {
+      for (const node of this.latestTree.walk()) {
+        if (
+          node instanceof ButtonNode &&
+          node.customId === interaction.data.custom_id
+        ) {
+          node.props.onClick({
+            ...baseEvent,
+            interaction: interaction as APIMessageComponentButtonInteraction,
+          })
+          return
+        }
+      }
+    }
+
+    if (interaction.data.component_type === ComponentType.SelectMenu) {
+      const event: SelectChangeEvent = {
+        ...baseEvent,
+        interaction: interaction as APIMessageComponentSelectMenuInteraction,
+        values: interaction.data.values,
+      }
+
+      for (const node of this.latestTree.walk()) {
+        if (
+          node instanceof SelectNode &&
+          node.customId === interaction.data.custom_id
+        ) {
+          node.props.onChange?.(event)
+          node.props.onChangeMultiple?.(interaction.data.values, event)
+          if (interaction.data.values[0]) {
+            node.props.onChangeValue?.(interaction.data.values[0], event)
+          }
+          return
+        }
+      }
+    }
+  }
+}

packages/reacord/src/react/action-row.tsx

@@ -0,0 +1,39 @@
+import type { ReactNode } from "react"
+import React from "react"
+import { Node } from "../node"
+import { ReacordElement } from "./reacord-element"
+
+/**
+ * Props for an action row
+ * @category Action Row
+ */
+export type 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.
+ * But this can be useful if you want a specific layout.
+ *
+ * ```tsx
+ * // put buttons on two separate rows
+ * <ActionRow>
+ *   <Button label="First" onClick={handleFirst} />
+ * </ActionRow>
+ * <Button label="Second" onClick={handleSecond} />
+ * ```
+ *
+ * @category Action Row
+ * @see https://discord.com/developers/docs/interactions/message-components#action-rows
+ */
+export function ActionRow(props: ActionRowProps) {
+  return (
+    <ReacordElement props={{}} createNode={() => new ActionRowNode({})}>
+      {props.children}
+    </ReacordElement>
+  )
+}
+
+export class ActionRowNode extends Node<{}> {}

packages/reacord/src/react/button-shared-props.ts

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

packages/reacord/src/react/button.tsx

@@ -0,0 +1,49 @@
+import type { APIMessageComponentButtonInteraction } from "discord.js"
+import { randomUUID } from "node:crypto"
+import React from "react"
+import { Node } from "../node"
+import type { ButtonSharedProps } from "./button-shared-props"
+import type { ComponentEvent } from "./component-event"
+import { ReacordElement } from "./reacord-element"
+
+/**
+ * @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.
+   */
+  onClick: (event: ButtonClickEvent) => void
+}
+
+/**
+ * @category Button
+ */
+export type ButtonClickEvent = ComponentEvent & {
+  /**
+   * Event details, e.g. the user who clicked, guild member, guild id, etc.
+   * @see https://discord.com/developers/docs/interactions/receiving-and-responding#interaction-object
+   */
+  interaction: APIMessageComponentButtonInteraction
+}
+
+/**
+ * @category Button
+ */
+export function Button(props: ButtonProps) {
+  return (
+    <ReacordElement props={props} createNode={() => new ButtonNode(props)}>
+      {props.label}
+    </ReacordElement>
+  )
+}
+
+export class ButtonNode extends Node<ButtonProps> {
+  readonly customId = randomUUID()
+}

packages/reacord/src/react/component-event.ts

@@ -0,0 +1,18 @@
+import type { ReactNode } from "react"
+import type { ReacordInstance } from "../reacord-instance"
+
+/**
+ * @category Component Event
+ */
+export type ComponentEvent = {
+  /**
+   * Create a new reply to this event.
+   */
+  reply(content?: ReactNode): ReacordInstance
+
+  /**
+   * Create an ephemeral reply to this event,
+   * shown only to the user who triggered it.
+   */
+  ephemeralReply(content?: ReactNode): ReacordInstance
+}

packages/reacord/src/react/embed-author.tsx

@@ -0,0 +1,27 @@
+import type { ReactNode } from "react"
+import React from "react"
+import { Node } from "../node"
+import { ReacordElement } from "./reacord-element"
+
+/**
+ * @category Embed
+ */
+export type EmbedAuthorProps = {
+  name?: ReactNode
+  children?: ReactNode
+  url?: string
+  iconUrl?: string
+}
+
+/**
+ * @category Embed
+ */
+export function EmbedAuthor(props: EmbedAuthorProps) {
+  return (
+    <ReacordElement props={props} createNode={() => new EmbedAuthorNode(props)}>
+      {props.name ?? props.children}
+    </ReacordElement>
+  )
+}
+
+export class EmbedAuthorNode extends Node<EmbedAuthorProps> {}

packages/reacord/src/react/embed-field.tsx

@@ -0,0 +1,34 @@
+import type { ReactNode } from "react"
+import React from "react"
+import { Node } from "../node"
+import { ReacordElement } from "./reacord-element"
+
+/**
+ * @category Embed
+ */
+export type EmbedFieldProps = {
+  name: ReactNode
+  value?: ReactNode
+  inline?: boolean
+  children?: ReactNode
+}
+
+/**
+ * @category Embed
+ */
+export function EmbedField(props: EmbedFieldProps) {
+  return (
+    <ReacordElement props={props} createNode={() => new EmbedFieldNode(props)}>
+      <ReacordElement props={{}} createNode={() => new EmbedFieldNameNode({})}>
+        {props.name}
+      </ReacordElement>
+      <ReacordElement props={{}} createNode={() => new EmbedFieldValueNode({})}>
+        {props.value ?? props.children}
+      </ReacordElement>
+    </ReacordElement>
+  )
+}
+
+export class EmbedFieldNode extends Node<EmbedFieldProps> {}
+export class EmbedFieldNameNode extends Node<{}> {}
+export class EmbedFieldValueNode extends Node<{}> {}

packages/reacord/src/react/embed-footer.tsx

@@ -0,0 +1,29 @@
+import type { ReactNode } from "react"
+import React from "react"
+import { Node } from "../node"
+import { ReacordElement } from "./reacord-element"
+
+/**
+ * @category Embed
+ */
+export type EmbedFooterProps = {
+  text?: ReactNode
+  children?: ReactNode
+  iconUrl?: string
+  timestamp?: string | number | Date
+}
+
+/**
+ * @category Embed
+ */
+export function EmbedFooter({ text, children, ...props }: EmbedFooterProps) {
+  return (
+    <ReacordElement props={props} createNode={() => new EmbedFooterNode(props)}>
+      {text ?? children}
+    </ReacordElement>
+  )
+}
+
+export class EmbedFooterNode extends Node<
+  Omit<EmbedFooterProps, "text" | "children">
+> {}

packages/reacord/src/react/embed-image.tsx

@@ -0,0 +1,24 @@
+import React from "react"
+import { Node } from "../node"
+import { ReacordElement } from "./reacord-element"
+
+/**
+ * @category Embed
+ */
+export type EmbedImageProps = {
+  url: string
+}
+
+/**
+ * @category Embed
+ */
+export function EmbedImage(props: EmbedImageProps) {
+  return (
+    <ReacordElement
+      props={props}
+      createNode={() => new EmbedImageNode(props)}
+    />
+  )
+}
+
+export class EmbedImageNode extends Node<EmbedImageProps> {}

packages/reacord/src/react/embed-thumbnail.tsx

@@ -0,0 +1,24 @@
+import React from "react"
+import { Node } from "../node"
+import { ReacordElement } from "./reacord-element"
+
+/**
+ * @category Embed
+ */
+export type EmbedThumbnailProps = {
+  url: string
+}
+
+/**
+ * @category Embed
+ */
+export function EmbedThumbnail(props: EmbedThumbnailProps) {
+  return (
+    <ReacordElement
+      props={props}
+      createNode={() => new EmbedThumbnailNode(props)}
+    />
+  )
+}
+
+export class EmbedThumbnailNode extends Node<EmbedThumbnailProps> {}

packages/reacord/src/react/embed-title.tsx

@@ -0,0 +1,26 @@
+import type { ReactNode } from "react"
+import React from "react"
+import type { Except } from "type-fest"
+import { Node } from "../node"
+import { ReacordElement } from "./reacord-element"
+
+/**
+ * @category Embed
+ */
+export type EmbedTitleProps = {
+  children: ReactNode
+  url?: string
+}
+
+/**
+ * @category Embed
+ */
+export function EmbedTitle({ children, ...props }: EmbedTitleProps) {
+  return (
+    <ReacordElement props={props} createNode={() => new EmbedTitleNode(props)}>
+      {children}
+    </ReacordElement>
+  )
+}
+
+export class EmbedTitleNode extends Node<Except<EmbedTitleProps, "children">> {}

packages/reacord/src/react/embed.tsx

@@ -0,0 +1,36 @@
+import React from "react"
+import { Node } from "../node"
+import { ReacordElement } from "./reacord-element"
+
+/**
+ * @category Embed
+ * @see https://discord.com/developers/docs/resources/channel#embed-object
+ */
+export type EmbedProps = {
+  title?: string
+  description?: string
+  url?: string
+  color?: number
+  fields?: Array<{ name: string; value: string; inline?: boolean }>
+  author?: { name: string; url?: string; iconUrl?: string }
+  thumbnail?: { url: string }
+  image?: { url: string }
+  video?: { url: string }
+  footer?: { text: string; iconUrl?: string }
+  timestamp?: string | number | Date
+  children?: React.ReactNode
+}
+
+/**
+ * @category Embed
+ * @see https://discord.com/developers/docs/resources/channel#embed-object
+ */
+export function Embed(props: EmbedProps) {
+  return (
+    <ReacordElement props={props} createNode={() => new EmbedNode(props)}>
+      {props.children}
+    </ReacordElement>
+  )
+}
+
+export class EmbedNode extends Node<EmbedProps> {}

packages/reacord/src/react/instance-context.ts

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

packages/reacord/src/react/link.tsx

@@ -0,0 +1,28 @@
+import React from "react"
+import type { Except } from "type-fest"
+import { Node } from "../node"
+import type { ButtonSharedProps } from "./button-shared-props"
+import { ReacordElement } from "./reacord-element"
+
+/**
+ * @category Link
+ */
+export type LinkProps = ButtonSharedProps & {
+  /** The URL the link should lead to */
+  url: string
+  /** The link text */
+  children?: string
+}
+
+/**
+ * @category Link
+ */
+export function Link({ label, children, ...props }: LinkProps) {
+  return (
+    <ReacordElement props={props} createNode={() => new LinkNode(props)}>
+      {label || children}
+    </ReacordElement>
+  )
+}
+
+export class LinkNode extends Node<Except<LinkProps, "label" | "children">> {}

packages/reacord/src/react/option.tsx

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

packages/reacord/src/react/reacord-element.ts

@@ -0,0 +1,11 @@
+import type { ReactNode } from "react"
+import React from "react"
+import type { Node } from "../node"
+
+export function ReacordElement<Props>(props: {
+  props: Props
+  createNode: () => Node<Props>
+  children?: ReactNode
+}) {
+  return React.createElement("reacord-element", props)
+}

packages/reacord/src/react/reconciler.ts

@@ -0,0 +1,108 @@
+/* eslint-disable unicorn/prefer-modern-dom-apis */
+import { raise } from "@reacord/helpers/raise"
+import ReactReconciler from "react-reconciler"
+import { DefaultEventPriority } from "react-reconciler/constants"
+import { Node, TextNode } from "../node"
+import type { ReacordInstancePrivate } from "../reacord-instance"
+
+export const reconciler = ReactReconciler<
+  string, // Type,
+  Record<string, unknown>, // Props,
+  ReacordInstancePrivate, // Container,
+  Node, // Instance,
+  TextNode, // TextInstance,
+  never, // SuspenseInstance,
+  never, // HydratableInstance,
+  never, // PublicInstance,
+  never, // HostContext,
+  true, // UpdatePayload,
+  never, // ChildSet,
+  number, // TimeoutHandle,
+  number // NoTimeout,
+>({
+  supportsMutation: true,
+  supportsPersistence: false,
+  supportsHydration: false,
+  isPrimaryRenderer: true,
+  scheduleTimeout: global.setTimeout,
+  cancelTimeout: global.clearTimeout,
+  noTimeout: -1,
+
+  // eslint-disable-next-line unicorn/no-null
+  getRootHostContext: () => null,
+  getChildHostContext: (parentContext) => parentContext,
+
+  createInstance: (type, props) => {
+    if (type !== "reacord-element") {
+      raise(`Unknown element type: ${type}`)
+    }
+
+    if (typeof props.createNode !== "function") {
+      raise(`Missing createNode function`)
+    }
+
+    const node = props.createNode(props.props)
+    if (!(node instanceof Node)) {
+      raise(`createNode function did not return a Node`)
+    }
+
+    return node
+  },
+  createTextInstance: (text) => new TextNode({ text }),
+  shouldSetTextContent: () => false,
+  detachDeletedInstance: (instance) => {},
+  beforeActiveInstanceBlur: () => {},
+  afterActiveInstanceBlur: () => {},
+  // eslint-disable-next-line unicorn/no-null
+  getInstanceFromNode: (node: any) => null,
+  // eslint-disable-next-line unicorn/no-null
+  getInstanceFromScope: (scopeInstance: any) => null,
+
+  clearContainer: (instance) => {
+    instance.tree.clear()
+  },
+  appendChildToContainer: (instance, child) => {
+    instance.tree.add(child)
+  },
+  removeChildFromContainer: (instance, child) => {
+    instance.tree.remove(child)
+  },
+  insertInContainerBefore: (instance, child, before) => {
+    instance.tree.insertBefore(child, before)
+  },
+
+  appendInitialChild: (parent, child) => {
+    parent.add(child)
+  },
+  appendChild: (parent, child) => {
+    parent.add(child)
+  },
+  removeChild: (parent, child) => {
+    parent.remove(child)
+  },
+  insertBefore: (parent, child, before) => {
+    parent.insertBefore(child, before)
+  },
+
+  prepareUpdate: () => true,
+  commitUpdate: (node, payload, type, oldProps, newProps) => {
+    node.props = newProps.props
+  },
+  commitTextUpdate: (node, oldText, newText) => {
+    node.props.text = newText
+  },
+
+  // eslint-disable-next-line unicorn/no-null
+  prepareForCommit: () => null,
+  resetAfterCommit: (renderer) => {
+    void renderer.update(renderer.tree)
+  },
+  prepareScopeUpdate: (scopeInstance: any, instance: any) => {},
+
+  preparePortalMount: () => raise("Portals are not supported"),
+  getPublicInstance: () => raise("Refs are currently not supported"),
+
+  finalizeInitialChildren: () => false,
+
+  getCurrentEventPriority: () => DefaultEventPriority,
+})

packages/reacord/src/react/select.tsx

@@ -0,0 +1,95 @@
+import type { APIMessageComponentSelectMenuInteraction } from "discord.js"
+import { randomUUID } from "node:crypto"
+import type { ReactNode } from "react"
+import React from "react"
+import { Node } from "../node"
+import type { ComponentEvent } from "./component-event"
+import { ReacordElement } from "./reacord-element"
+
+/**
+ * @category Select
+ */
+export type SelectProps = {
+  children?: ReactNode
+  /** Sets the currently selected value */
+  value?: string
+
+  /** Sets the currently selected values, for use with `multiple` */
+  values?: string[]
+
+  /** The text shown when no value is selected */
+  placeholder?: string
+
+  /** Set to true to allow multiple selected values */
+  multiple?: boolean
+
+  /**
+   * With `multiple`, the minimum number of values that can be selected.
+   * When `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.
+   */
+  minValues?: number
+
+  /**
+   * With `multiple`, the maximum number of values that can be selected.
+   * When `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. */
+  disabled?: boolean
+
+  /**
+   * Called when the user inputs a selection.
+   * Receives the entire select change event,
+   * which can be used to create new replies, etc.
+   */
+  onChange?: (event: SelectChangeEvent) => void
+
+  /**
+   * 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.
+   */
+  onChangeMultiple?: (values: string[], event: SelectChangeEvent) => void
+}
+
+/**
+ * @category Select
+ */
+export type SelectChangeEvent = ComponentEvent & {
+  /** The set of values that were selected by the user.
+   * If `multiple`, this can have more than one value.
+   */
+  values: string[]
+
+  /**
+   * Event details, e.g. the user who clicked, guild member, guild id, etc.
+   * @see https://discord.com/developers/docs/interactions/receiving-and-responding#interaction-object
+   */
+  interaction: APIMessageComponentSelectMenuInteraction
+}
+
+/**
+ * See [the select menu guide](/guides/select-menu) for a usage example.
+ * @category Select
+ */
+export function Select(props: SelectProps) {
+  return (
+    <ReacordElement props={props} createNode={() => new SelectNode(props)}>
+      {props.children}
+    </ReacordElement>
+  )
+}
+
+export class SelectNode extends Node<SelectProps> {
+  readonly customId = randomUUID()
+}

packages/reacord/src/renderer.ts

@@ -0,0 +1,251 @@
+import { AsyncQueue } from "@reacord/helpers/async-queue"
+import type {
+  Client,
+  Message,
+  RESTPostAPIInteractionFollowupResult,
+  Snowflake,
+} from "discord.js"
+import { InteractionResponseType, Routes, TextChannel } from "discord.js"
+import type { MessageUpdatePayload } from "./make-message-update-payload"
+import { makeMessageUpdatePayload } from "./make-message-update-payload"
+import type { Node } from "./node"
+import type { InteractionInfo } from "./reacord-client"
+
+export abstract class Renderer {
+  private active = true
+  private componentInteraction?: InteractionInfo
+  private readonly queue = new AsyncQueue()
+
+  constructor(protected readonly clientPromise: Promise<Client<true>>) {}
+
+  protected abstract handleUpdate(payload: MessageUpdatePayload): Promise<void>
+  protected abstract handleDestroy(): Promise<void>
+  protected abstract handleDeactivate(): Promise<void>
+
+  update(tree: Node) {
+    const payload = makeMessageUpdatePayload(tree)
+
+    this.queue
+      .append(async () => {
+        if (!this.active) return
+
+        if (this.componentInteraction) {
+          await this.updateInteractionMessage(
+            this.componentInteraction,
+            payload,
+          )
+          this.componentInteraction = undefined
+          return
+        }
+
+        await this.handleUpdate(payload)
+      })
+      .catch(console.error)
+  }
+
+  destroy() {
+    if (!this.active) return
+    this.active = false
+    this.queue.append(() => this.handleDestroy()).catch(console.error)
+  }
+
+  deactivate() {
+    this.queue
+      .append(async () => {
+        await this.handleDeactivate()
+        this.active = false
+      })
+      .catch(console.error)
+  }
+
+  onComponentInteraction(info: InteractionInfo) {
+    this.componentInteraction = info
+
+    // a component update might not happen in response to this interaction,
+    // so we'll defer it after a timeout if it's not handled by then
+    setTimeout(() => {
+      this.queue
+        .append(() => {
+          if (!this.componentInteraction) return
+          const info = this.componentInteraction
+          this.componentInteraction = undefined
+          return this.deferMessageUpdate(info)
+        })
+        .catch(console.error)
+    }, 500)
+  }
+
+  private async updateInteractionMessage(
+    { id, token }: InteractionInfo,
+    payload: MessageUpdatePayload,
+  ) {
+    const client = await this.clientPromise
+    await client.rest.post(Routes.interactionCallback(id, token), {
+      body: {
+        type: InteractionResponseType.UpdateMessage,
+        data: payload,
+      },
+    })
+  }
+
+  private async deferMessageUpdate({ id, token }: InteractionInfo) {
+    const client = await this.clientPromise
+    await client.rest.post(Routes.interactionCallback(id, token), {
+      body: { type: InteractionResponseType.DeferredMessageUpdate },
+    })
+  }
+}
+
+export class ChannelMessageRenderer extends Renderer {
+  private channel?: TextChannel
+  private message?: Message
+
+  constructor(
+    private readonly channelId: string,
+    clientPromise: Promise<Client<true>>,
+  ) {
+    super(clientPromise)
+  }
+
+  override async handleUpdate(payload: MessageUpdatePayload): Promise<void> {
+    if (this.message) {
+      await this.message.edit(payload)
+      return
+    }
+
+    const channel = await this.getChannel()
+    this.message = await channel.send(payload)
+  }
+
+  override async handleDestroy(): Promise<void> {
+    const message = this.message
+    this.message = undefined
+    await message?.delete()
+  }
+
+  override async handleDeactivate(): Promise<void> {
+    throw new Error("not implemented")
+  }
+
+  private async getChannel(): Promise<TextChannel> {
+    if (this.channel) return this.channel
+
+    const client = await this.clientPromise
+
+    const channel =
+      client.channels.cache.get(this.channelId) ??
+      (await client.channels.fetch(this.channelId))
+
+    if (!(channel instanceof TextChannel)) {
+      throw new TypeError(`Channel ${this.channelId} is not a text channel`)
+    }
+
+    this.channel = channel
+    return channel
+  }
+}
+
+export class InteractionReplyRenderer extends Renderer {
+  private messageCreated = false
+
+  constructor(
+    private interaction: InteractionInfo,
+    clientPromise: Promise<Client<true>>,
+  ) {
+    super(clientPromise)
+  }
+
+  async handleUpdate(payload: MessageUpdatePayload): Promise<void> {
+    const client = await this.clientPromise
+    if (!this.messageCreated) {
+      await client.rest.post(
+        Routes.interactionCallback(this.interaction.id, this.interaction.token),
+        {
+          body: {
+            type: InteractionResponseType.ChannelMessageWithSource,
+            data: payload,
+          },
+        },
+      )
+      this.messageCreated = true
+    } else {
+      await client.rest.patch(
+        Routes.webhookMessage(
+          client.application.id,
+          this.interaction.token,
+          "@original",
+        ),
+        { body: payload },
+      )
+    }
+  }
+
+  handleDestroy(): Promise<void> {
+    throw new Error("Method not implemented.")
+  }
+
+  handleDeactivate(): Promise<void> {
+    throw new Error("Method not implemented.")
+  }
+}
+
+export class InteractionFollowUpRenderer extends Renderer {
+  private messageId?: Snowflake
+
+  constructor(
+    readonly interaction: InteractionInfo,
+    clientPromise: Promise<Client<true>>,
+  ) {
+    super(clientPromise)
+  }
+
+  async handleUpdate(payload: MessageUpdatePayload): Promise<void> {
+    const client = await this.clientPromise
+
+    if (!this.messageId) {
+      const response = (await client.rest.post(
+        Routes.webhookMessage(client.application.id, this.interaction.token),
+        { body: payload },
+      )) as RESTPostAPIInteractionFollowupResult
+      this.messageId = response.id
+    } else {
+      await client.rest.patch(
+        Routes.webhookMessage(
+          client.application.id,
+          this.interaction.token,
+          this.messageId,
+        ),
+        { body: payload },
+      )
+    }
+  }
+
+  handleDestroy(): Promise<void> {
+    throw new Error("Method not implemented.")
+  }
+
+  handleDeactivate(): Promise<void> {
+    throw new Error("Method not implemented.")
+  }
+}
+
+export class EphemeralInteractionReplyRenderer extends Renderer {
+  constructor(
+    private readonly interaction: InteractionInfo,
+    clientPromise: Promise<Client<true>>,
+  ) {
+    super(clientPromise)
+  }
+
+  handleUpdate(payload: MessageUpdatePayload): Promise<void> {
+    throw new Error("Method not implemented.")
+  }
+
+  handleDestroy(): Promise<void> {
+    throw new Error("Method not implemented.")
+  }
+
+  handleDeactivate(): Promise<void> {
+    throw new Error("Method not implemented.")
+  }
+}

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

@@ -1,40 +1,60 @@
-import { test } from "vitest"
+import { ComponentType } from "discord.js"
-import { ActionRow, Button, Select } from "../library/main"
+import React from "react"
-import { ReacordTester } from "./test-adapter"
+import { expect, test } from "vitest"
-
+import { ActionRow, Button, Option, Select } from "../src/main"
-const testing = new ReacordTester()
+import { ReacordTester } from "./tester"
 
 test("action row", async () => {
-	await testing.assertRender(
+  const { message } = await ReacordTester.render(
+    "action row",
     <>
       <Button label="outside button" onClick={() => {}} />
       <ActionRow>
         <Button label="button inside action row" onClick={() => {}} />
       </ActionRow>
-			<Select />
+      <Select value="the">
+        <Option value="the" />
+      </Select>
       <Button label="last row 1" onClick={() => {}} />
       <Button label="last row 2" onClick={() => {}} />
     </>,
-		[
-			{
-				content: "",
-				embeds: [],
-				actionRows: [
-					[{ type: "button", style: "secondary", label: "outside button" }],
-					[
-						{
-							type: "button",
-							style: "secondary",
-							label: "button inside action row",
-						},
-					],
-					[{ type: "select", options: [], values: [] }],
-					[
-						{ type: "button", style: "secondary", label: "last row 1" },
-						{ type: "button", style: "secondary", label: "last row 2" },
-					],
-				],
-			},
-		],
   )
+
+  expect(message.components.map((c) => c.toJSON())).toEqual([
+    {
+      type: ComponentType.ActionRow,
+      components: [
+        expect.objectContaining({
+          type: ComponentType.Button,
+          label: "outside button",
+        }),
+      ],
+    },
+    {
+      type: ComponentType.ActionRow,
+      components: [
+        expect.objectContaining({
+          type: ComponentType.Button,
+          label: "button inside action row",
+        }),
+      ],
+    },
+    {
+      type: ComponentType.ActionRow,
+      components: [expect.objectContaining({ type: ComponentType.SelectMenu })],
+    },
+    {
+      type: ComponentType.ActionRow,
+      components: [
+        expect.objectContaining({
+          type: ComponentType.Button,
+          label: "last row 1",
+        }),
+        expect.objectContaining({
+          type: ComponentType.Button,
+          label: "last row 2",
+        }),
+      ],
+    },
+  ])
 })

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

@@ -1,12 +1,16 @@
 import { spawnSync } from "node:child_process"
 import { createRequire } from "node:module"
+import { join } from "node:path"
+import { fileURLToPath } from "node:url"
 import { beforeAll, expect, test } from "vitest"
 
 beforeAll(() => {
-	spawnSync("pnpm", ["run", "build"])
+  spawnSync("pnpm", ["run", "build"], {
+    cwd: join(fileURLToPath(import.meta.url), ".."),
+  })
 })
 
 test("can require commonjs", () => {
   const require = createRequire(import.meta.url)
-	expect(() => require("../dist/main.cjs") as unknown).not.toThrow()
+  expect(() => require("../dist/main.cjs")).not.toThrow()
 })

packages/reacord/test/discord-js.test.tsx

@@ -1,3 +0,0 @@
-import { test } from "vitest"
-
-test.todo("discord js integration")

packages/reacord/test/embed.test.tsx

@@ -1,4 +1,5 @@
-import { test } from "vitest"
+import React from "react"
+import { expect, test } from "vitest"
 import {
   Embed,
   EmbedAuthor,
@@ -7,15 +8,14 @@ import {
   EmbedImage,
   EmbedThumbnail,
   EmbedTitle,
-} from "../library/main"
+} from "../src/main"
-import { ReacordTester } from "./test-adapter"
+import { ReacordTester } from "./tester"
-
-const testing = new ReacordTester()
 
 test("kitchen sink", async () => {
   const now = new Date()
 
-	await testing.assertRender(
+  const { message } = await ReacordTester.render(
+    "kitchen sink",
     <>
       <Embed color={0xfe_ee_ef}>
         <EmbedAuthor name="author" iconUrl="https://example.com/author.png" />
@@ -32,17 +32,15 @@ test("kitchen sink", async () => {
         />
       </Embed>
     </>,
-		[
+  )
-			{
+
-				actionRows: [],
+  expect(message.embeds.map((e) => e.toJSON())).toEqual([
-				content: "",
+    expect.objectContaining({
-				embeds: [
-					{
       description: "description text",
-						author: {
+      author: expect.objectContaining({
         icon_url: "https://example.com/author.png",
         name: "author",
-						},
+      }),
       color: 0xfe_ee_ef,
       fields: [
         {
@@ -51,66 +49,66 @@ test("kitchen sink", async () => {
           value: "field value",
         },
         {
+          inline: false,
           name: "block field",
           value: "block field value",
         },
       ],
-						footer: {
+      footer: expect.objectContaining({
         icon_url: "https://example.com/footer.png",
         text: "footer text",
-						},
+      }),
-						image: {
+      image: expect.objectContaining({
         url: "https://example.com/image.png",
-						},
+      }),
-						thumbnail: {
+      thumbnail: expect.objectContaining({
         url: "https://example.com/thumbnail.png",
-						},
+      }),
-						timestamp: now.toISOString(),
       title: "title text",
-					},
+    }),
-				],
+  ])
-			},
+
-		],
+  // the timestamp format from Discord is not the same one that JS makes
-	)
+  expect(new Date(message.embeds[0]!.timestamp!)).toEqual(now)
 })
 
 test("author variants", async () => {
-	await testing.assertRender(
+  const { message } = await ReacordTester.render(
+    "author variants",
     <>
       <Embed>
         <EmbedAuthor iconUrl="https://example.com/author.png">
-					author name
+          author name 1
         </EmbedAuthor>
       </Embed>
       <Embed>
-				<EmbedAuthor iconUrl="https://example.com/author.png" />
+        <EmbedAuthor
+          name="author name 2"
+          iconUrl="https://example.com/author.png"
+        />
       </Embed>
     </>,
-		[
-			{
-				content: "",
-				actionRows: [],
-				embeds: [
-					{
-						author: {
-							icon_url: "https://example.com/author.png",
-							name: "author name",
-						},
-					},
-					{
-						author: {
-							icon_url: "https://example.com/author.png",
-							name: "",
-						},
-					},
-				],
-			},
-		],
   )
-})
+
+  expect(message.embeds.map((e) => e.toJSON())).toEqual([
+    expect.objectContaining({
+      author: expect.objectContaining({
+        name: "author name 1",
+        icon_url: "https://example.com/author.png",
+      }),
+    }),
+    expect.objectContaining({
+      author: expect.objectContaining({
+        name: "author name 2",
+        icon_url: "https://example.com/author.png",
+      }),
+    }),
+  ])
+}, 20_000)
 
 test("field variants", async () => {
-	await testing.assertRender(
+  const { message } = await ReacordTester.render(
+    "field variants",
     <>
       <Embed>
         <EmbedField name="field name" value="field value" />
@@ -121,43 +119,41 @@ test("field variants", async () => {
         <EmbedField name="field name" />
       </Embed>
     </>,
-		[
+  )
-			{
+
-				content: "",
+  expect(message.embeds.map((e) => e.toJSON())).toEqual([
-				actionRows: [],
+    expect.objectContaining({
-				embeds: [
-					{
       fields: [
         {
           name: "field name",
           value: "field value",
+          inline: false,
         },
         {
-								inline: true,
           name: "field name",
           value: "field value",
+          inline: true,
         },
         {
-								inline: true,
           name: "field name",
           value: "field value",
+          inline: true,
         },
         {
           name: "field name",
-								value: "",
+          value: "_ _",
+          inline: false,
         },
       ],
-					},
+    }),
-				],
+  ])
-			},
-		],
-	)
 })
 
 test("footer variants", async () => {
   const now = new Date()
 
-	await testing.assertRender(
+  const { message } = await ReacordTester.render(
+    "footer variants",
     <>
       <Embed>
         <EmbedFooter text="footer text" />
@@ -175,45 +171,37 @@ test("footer variants", async () => {
         <EmbedFooter iconUrl="https://example.com/footer.png" timestamp={now} />
       </Embed>
     </>,
-		[
-			{
-				content: "",
-				actionRows: [],
-				embeds: [
-					{
-						footer: {
-							text: "footer text",
-						},
-					},
-					{
-						footer: {
-							icon_url: "https://example.com/footer.png",
-							text: "footer text",
-						},
-					},
-					{
-						footer: {
-							text: "footer text",
-						},
-						timestamp: now.toISOString(),
-					},
-					{
-						footer: {
-							icon_url: "https://example.com/footer.png",
-							text: "",
-						},
-						timestamp: now.toISOString(),
-					},
-				],
-			},
-		],
   )
+
+  expect(message.embeds.map((e) => e.toJSON())).toEqual([
+    expect.objectContaining({
+      footer: {
+        text: "footer text",
+      },
+    }),
+    expect.objectContaining({
+      footer: expect.objectContaining({
+        icon_url: "https://example.com/footer.png",
+        text: "footer text",
+      }),
+    }),
+    expect.objectContaining({
+      timestamp: expect.stringContaining(""),
+    }),
+    expect.objectContaining({
+      timestamp: expect.stringContaining(""),
+    }),
+  ])
+
+  expect(new Date(message.embeds[2]!.timestamp!)).toEqual(now)
+  expect(new Date(message.embeds[3]!.timestamp!)).toEqual(now)
 })
 
 test("embed props", async () => {
   const now = new Date()
 
-	await testing.assertRender(
+  const { message } = await ReacordTester.render(
+    "embed props",
     <Embed
       title="title text"
       description="description text"
@@ -240,35 +228,33 @@ test("embed props", async () => {
         { name: "block field", value: "block field value" },
       ]}
     />,
-		[
+  )
-			{
+
-				content: "",
+  expect(message.embeds.map((e) => e.toJSON())).toEqual([
-				actionRows: [],
+    expect.objectContaining({
-				embeds: [
-					{
       title: "title text",
       description: "description text",
       url: "https://example.com/",
       color: 0xfe_ee_ef,
-						timestamp: now.toISOString(),
+      author: expect.objectContaining({
-						author: {
         name: "author name",
         url: "https://example.com/author",
         icon_url: "https://example.com/author.png",
-						},
+      }),
-						thumbnail: { url: "https://example.com/thumbnail.png" },
+      thumbnail: expect.objectContaining({
-						image: { url: "https://example.com/image.png" },
+        url: "https://example.com/thumbnail.png",
-						footer: {
+      }),
+      image: expect.objectContaining({ url: "https://example.com/image.png" }),
+      footer: expect.objectContaining({
         text: "footer text",
         icon_url: "https://example.com/footer.png",
-						},
+      }),
       fields: [
         { name: "field name", value: "field value", inline: true },
-							{ name: "block field", value: "block field value" },
+        { name: "block field", value: "block field value", inline: false },
       ],
-					},
+    }),
-				],
+  ])
-			},
+
-		],
+  expect(new Date(message.embeds[0]!.timestamp!)).toEqual(now)
-	)
 })

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

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

packages/reacord/test/global-setup.ts

@@ -0,0 +1,6 @@
+import { oraPromise } from "ora"
+import { ReacordTester } from "./tester"
+
+export async function setup() {
+  await oraPromise(ReacordTester.removeChannels(), "Running test setup...")
+}