Merge branch 'main' into rewrite-internals

Update sending-messages.md

.changeset/README.md

@@ -0,0 +1,8 @@
+# Changesets
+
+Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
+with multi-package repos, or single-package repos to help you version and publish your code. You can
+find the full documentation for it [in our repository](https://github.com/changesets/changesets)
+
+We have a quick list of common questions to get you started engaging with this project in
+[our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md)

.changeset/config.json

@@ -0,0 +1,11 @@
+{
+  "$schema": "https://unpkg.com/@changesets/config@2.1.0/schema.json",
+  "changelog": "@changesets/cli/changelog",
+  "commit": false,
+  "fixed": [],
+  "linked": [],
+  "access": "public",
+  "baseBranch": "main",
+  "updateInternalDependencies": "patch",
+  "ignore": []
+}

.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"),
+      },
+    },
+  ],
+}

.eslintrc.json

@@ -1,26 +0,0 @@
-{
-  "extends": ["./node_modules/@itsmapleleaf/configs/eslint"],
-  "ignorePatterns": [
-    "**/node_modules/**",
-    "**/.cache/**",
-    "**/build/**",
-    "**/dist/**",
-    "**/coverage/**",
-    "**/public/**"
-  ],
-  "parserOptions": {
-    "project": "./tsconfig.base.json"
-  },
-  "rules": {
-    "import/no-unused-modules": "off",
-    "unicorn/prevent-abbreviations": "off"
-  },
-  "overrides": [
-    {
-      "files": ["packages/website/cypress/**"],
-      "parserOptions": {
-        "project": "./packages/website/cypress/tsconfig.json"
-      }
-    }
-  ]
-}

.github/workflows/deploy-website.yml

@@ -1,17 +0,0 @@
-name: deploy website
-on:
-  push:
-    branches: [main]
-    paths:
-      - "packages/website/**"
-      - "reacord/library/**/*.{ts,tsx}"
-jobs:
-  deploy:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v2
-      - uses: superfly/flyctl-actions@master
-        env:
-          FLY_API_TOKEN: ${{ secrets.FLY_API_TOKEN }}
-        with:
-          args: "deploy"

.github/workflows/main.yml

@@ -9,6 +9,11 @@ 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:
@@ -16,26 +21,30 @@ jobs:
       fail-fast: false
       matrix:
         command:
-          # if these run in the same process, it dies,
+          # if tests run in the same process, it dies,
           # so we test them separate
-          - name: test reacord
+          - name: test
-            run: pnpm test -C packages/reacord
+            run: pnpm test
           - name: test website
-            run: pnpm test -C packages/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 build --recursive
+            run: pnpm --recursive run build
           - name: lint
-            run: pnpm lint
+            run: pnpm run lint
           - name: typecheck
-            run: pnpm typecheck --parallel
+            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"
-      - run: npm i -g pnpm
+          cache: "pnpm"
       - run: pnpm install --frozen-lockfile
       - run: ${{ matrix.command.run }}

.github/workflows/release.yml

@@ -0,0 +1,37 @@
+# https://pnpm.io/using-changesets
+name: release
+
+on:
+  push:
+    branches:
+      - main
+
+concurrency: ${{ github.workflow }}-${{ github.ref }}
+
+jobs:
+  release:
+    name: release
+    runs-on: ubuntu-latest
+    steps:
+      - name: checkout
+        uses: actions/checkout@v2
+
+      - name: setup node
+        uses: actions/setup-node@v2
+        with:
+          node-version: 16
+
+      - name: install pnpm
+        run: npm install -g pnpm
+
+      - name: install deps
+        run: pnpm install --frozen-lockfile
+
+      - name: changesets release
+        id: changesets
+        uses: changesets/action@v1
+        with:
+          publish: pnpm run release
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

.gitignore

@@ -3,4 +3,8 @@ node_modules
 .vscode
 coverage
 .env
+*.code-workspace
+.pnpm-debug.log
 
+build
+.cache

.npmrc

@@ -0,0 +1 @@
+ignore-workspace-root-check = true

.prettierignore

@@ -4,3 +4,4 @@ coverage
 pnpm-lock.yaml
 build
 .cache
+packages/website/public/api

Dockerfile

@@ -1,15 +0,0 @@
-FROM node:lts-slim
-
-ENV CYPRESS_INSTALL_BINARY=0
-
-WORKDIR /app
-
-COPY / ./
-RUN ls -R
-
-RUN npm install -g pnpm
-RUN pnpm install --unsafe-perm --frozen-lockfile
-RUN pnpm run build -C packages/website
-
-ENV NODE_ENV=production
-CMD [ "pnpm", "-C", "packages/website", "start" ]

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2022  itsMapleLeaf
+Copyright (c) 2022 itsMapleLeaf
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -1,7 +1,9 @@
-# reacord
+<center>
-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)
 
-## Installation
 ```console
 # npm
 npm install reacord react discord.js
@@ -15,9 +17,11 @@ pnpm add reacord react discord.js
 ```
 
 ## Get Started
-[Visit the docs to get started.](https://reacord.fly.dev/guides/getting-started)
+
+[Visit the docs to get started.](https://reacord.mapleleaf.dev/guides/getting-started)
 
 ## Example
+
 <!-- prettier-ignore -->
 ```tsx
 import * as React from "react"

fly.toml

@@ -1,40 +0,0 @@
-# fly.toml file generated for reacord on 2021-12-29T14:06:41-06:00
-
-app = "reacord"
-
-kill_signal = "SIGINT"
-kill_timeout = 5
-processes = []
-
-[env]
-PORT = 8080
-
-[experimental]
-allowed_public_ports = []
-auto_rollback = true
-
-[[services]]
-http_checks = []
-internal_port = 8080
-processes = ["app"]
-protocol = "tcp"
-script_checks = []
-
-[services.concurrency]
-hard_limit = 25
-soft_limit = 20
-type = "connections"
-
-[[services.ports]]
-handlers = ["http"]
-port = 80
-
-[[services.ports]]
-handlers = ["tls", "http"]
-port = 443
-
-[[services.tcp_checks]]
-grace_period = "1s"
-interval = "15s"
-restart_limit = 0
-timeout = "2s"

package.json

@@ -1,26 +1,28 @@
 {
+  "name": "reacord-monorepo",
   "private": true,
   "scripts": {
     "lint": "eslint --ext js,ts,tsx .",
     "lint-fix": "pnpm lint -- --fix",
-    "format": "prettier --write ."
+    "test": "vitest --coverage --no-watch",
-  },
+    "test-dev": "vitest --ui",
-  "dependencies": {
+    "format": "prettier --write .",
-    "@itsmapleleaf/configs": "^1.1.2"
+    "build": "pnpm -r run build",
+    "start": "pnpm -C packages/website run start",
+    "release": "pnpm -r run build && changeset publish"
   },
   "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "^5.9.1",
+    "@changesets/cli": "^2.24.2",
-    "@typescript-eslint/parser": "^5.9.1",
+    "@itsmapleleaf/configs": "^1.1.5",
-    "eslint": "^8.6.0",
+    "@rushstack/eslint-patch": "^1.1.4",
-    "eslint-config-prettier": "^8.3.0",
+    "@types/eslint": "^8.4.5",
-    "eslint-import-resolver-typescript": "^2.5.0",
+    "@vitest/ui": "^0.21.0",
-    "eslint-plugin-import": "^2.25.4",
+    "c8": "^7.12.0",
-    "eslint-plugin-jsx-a11y": "^6.5.1",
+    "eslint": "^8.21.0",
-    "eslint-plugin-react": "^7.28.0",
+    "node": "^16.16.0",
-    "eslint-plugin-react-hooks": "^4.3.0",
+    "prettier": "^2.7.1",
-    "eslint-plugin-unicorn": "^40.0.0",
+    "typescript": "^4.7.4",
-    "prettier": "^2.5.1",
+    "vitest": "^0.21.0"
-    "typescript": "^4.5.4"
   },
   "resolutions": {
     "esbuild": "latest"

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/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/log-pretty.ts

@@ -1,6 +1,5 @@
 import { inspect } from "node:util"
 
-// eslint-disable-next-line import/no-unused-modules
 export function logPretty(value: unknown) {
   console.info(
     inspect(value, {

packages/helpers/omit.ts

@@ -1,4 +1,3 @@
-// eslint-disable-next-line import/no-unused-modules
 export function omit<Subject extends object, Key extends PropertyKey>(
   subject: Subject,
   keys: Key[],

packages/helpers/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "@reacord/helpers",
+  "type": "module",
+  "private": true,
+  "dependencies": {
+    "@types/lodash-es": "^4.17.6",
+    "@types/node": "*",
+    "lodash-es": "^4.17.21",
+    "type-fest": "^2.18.0"
+  }
+}

packages/helpers/pick.ts

@@ -1,6 +1,5 @@
 import type { LoosePick, UnknownRecord } from "./types"
 
-// eslint-disable-next-line import/no-unused-modules
 export function pick<T, K extends keyof T | PropertyKey>(
   object: T,
   keys: K[],

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

@@ -0,0 +1,35 @@
+import { expect, test } from "vitest"
+import type { PruneNullishValues } from "./prune-nullish-values"
+import { pruneNullishValues } from "./prune-nullish-values"
+
+test("pruneNullishValues", () => {
+  type InputType = {
+    a: string
+    b: string | null | undefined
+    c?: string
+    d: {
+      a: string
+      b: string | undefined
+    }
+  }
+
+  const input: InputType = {
+    a: "a",
+    // eslint-disable-next-line unicorn/no-null
+    b: null,
+    c: undefined,
+    d: {
+      a: "a",
+      b: undefined,
+    },
+  }
+
+  const output: PruneNullishValues<InputType> = {
+    a: "a",
+    d: {
+      a: "a",
+    },
+  }
+
+  expect(pruneNullishValues(input)).toEqual(output)
+})

packages/helpers/prune-nullish-values.ts

@@ -0,0 +1,42 @@
+import { isObject } from "./is-object"
+
+export function pruneNullishValues<T>(input: T): PruneNullishValues<T> {
+  if (Array.isArray(input)) {
+    return input.filter(Boolean).map((item) => pruneNullishValues(item)) as any
+  }
+
+  if (!isObject(input)) {
+    return input as any
+  }
+
+  const result: any = {}
+  for (const [key, value] of Object.entries(input)) {
+    if (value != undefined) {
+      result[key] = pruneNullishValues(value)
+    }
+  }
+  return result
+}
+
+export type PruneNullishValues<Input> = Input extends object
+  ? OptionalKeys<
+      { [Key in keyof Input]: NonNullable<PruneNullishValues<Input[Key]>> },
+      KeysWithNullishValues<Input>
+    >
+  : Input
+
+type OptionalKeys<Input, Keys extends keyof Input> = Omit<Input, Keys> & {
+  [Key in Keys]?: Input[Key]
+}
+
+type KeysWithNullishValues<Input> = NonNullable<
+  Values<{
+    [Key in keyof Input]: null extends Input[Key]
+      ? Key
+      : undefined extends Input[Key]
+      ? Key
+      : never
+  }>
+>
+
+type Values<Input> = Input[keyof Input]

packages/helpers/tsconfig.json

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

packages/helpers/types.ts

@@ -1,4 +1,3 @@
-/* eslint-disable import/no-unused-modules */
 export type MaybePromise<T> = T | Promise<T>
 
 export type ValueOf<Type> = Type extends ReadonlyArray<infer Value>

packages/helpers/wait-for.ts

@@ -0,0 +1,21 @@
+import { setTimeout } from "node:timers/promises"
+
+const maxTime = 1000
+
+export async function waitFor<Result>(
+  predicate: () => Result,
+): Promise<Awaited<Result>> {
+  const startTime = Date.now()
+  let lastError: unknown
+
+  while (Date.now() - startTime < maxTime) {
+    try {
+      return await predicate()
+    } catch (error) {
+      lastError = error
+      await setTimeout(50)
+    }
+  }
+
+  throw lastError ?? new Error("Timeout")
+}

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

@@ -1,6 +1,5 @@
 import { inspect } from "node:util"
 
-// eslint-disable-next-line import/no-unused-modules
 export function withLoggedMethodCalls<T extends object>(value: T) {
   return new Proxy(value as Record<string | symbol, unknown>, {
     get(target, property) {

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/.gitignore

@@ -0,0 +1,2 @@
+/README.md
+/LICENSE

packages/reacord/CHANGELOG.md

@@ -0,0 +1,15 @@
+# reacord
+
+## 0.5.1
+
+### Patch Changes
+
+- 72f4a4a: upgrade dependencies and remove some unneeded
+- 7536bde: add types in exports to work with TS nodenext
+- e335165: fix links
+
+## 0.5.0
+
+### Minor Changes
+
+- aa65da5: allow JSX in more places

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

@@ -1,27 +0,0 @@
-import { isObject } from "./is-object"
-
-export function pruneNullishValues<T>(input: T): PruneNullishValues<T> {
-  if (Array.isArray(input)) {
-    return input.filter(Boolean).map((item) => pruneNullishValues(item)) as any
-  }
-
-  if (!isObject(input)) {
-    return input as any
-  }
-
-  const result: any = {}
-  for (const [key, value] of Object.entries(input)) {
-    if (value != undefined) {
-      result[key] = pruneNullishValues(value)
-    }
-  }
-  return result
-}
-
-type PruneNullishValues<Input> = Input extends ReadonlyArray<infer Value>
-  ? ReadonlyArray<NonNullable<Value>>
-  : Input extends object
-  ? {
-      [Key in keyof Input]: NonNullable<Input[Key]>
-    }
-  : Input

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 type 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: MessageInfo
-
-  /**
-   * The channel that this event occurred in.
-   * @see https://discord.com/developers/docs/resources/channel#channel-object
-   */
-  channel: ChannelInfo
-
-  /**
-   * The user that triggered this event.
-   * @see https://discord.com/developers/docs/resources/user#user-object
-   */
-  user: UserInfo
-
-  /**
-   * The guild that this event occurred in.
-   * @see https://discord.com/developers/docs/resources/guild#guild-object
-   */
-  guild?: GuildInfo
-
-  /**
-   * 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
-}
-
-/**
- * @category Component Event
- */
-export type ChannelInfo = {
-  id: string
-  name?: string
-  topic?: string
-  nsfw?: boolean
-  lastMessageId?: string
-  ownerId?: string
-  parentId?: string
-  rateLimitPerUser?: number
-}
-
-/**
- * @category Component Event
- */
-export type MessageInfo = {
-  id: string
-  channelId: string
-  authorId: UserInfo
-  member?: GuildMemberInfo
-  content: string
-  timestamp: string
-  editedTimestamp?: string
-  tts: boolean
-  mentionEveryone: boolean
-  /** The IDs of mentioned users */
-  mentions: string[]
-}
-
-/**
- * @category Component Event
- */
-export type GuildInfo = {
-  id: string
-  name: string
-  member: GuildMemberInfo
-}
-
-/**
- * @category Component Event
- */
-export type GuildMemberInfo = {
-  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 type UserInfo = {
-  id: string
-  username: string
-  discriminator: string
-  tag: string
-  avatarUrl: string
-  accentColor?: number
-}

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

@@ -1,65 +0,0 @@
-import { nanoid } from "nanoid"
-import React from "react"
-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)} />
-  )
-}
-
-class ButtonNode extends Node<ButtonProps> {
-  private customId = nanoid()
-
-  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.props.label,
-    })
-  }
-
-  override handleComponentInteraction(interaction: ComponentInteraction) {
-    if (
-      interaction.type === "button" &&
-      interaction.customId === this.customId
-    ) {
-      this.props.onClick(interaction.event)
-      return true
-    }
-    return false
-  }
-}

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

@@ -1,36 +0,0 @@
-import React from "react"
-import { ReacordElement } from "../../internal/element.js"
-import { EmbedChildNode } from "./embed-child.js"
-import type { EmbedOptions } from "./embed-options"
-
-/**
- * @category Embed
- */
-export type EmbedAuthorProps = {
-  name?: string
-  children?: string
-  url?: string
-  iconUrl?: string
-}
-
-/**
- * @category Embed
- */
-export function EmbedAuthor(props: EmbedAuthorProps) {
-  return (
-    <ReacordElement
-      props={props}
-      createNode={() => new EmbedAuthorNode(props)}
-    />
-  )
-}
-
-class EmbedAuthorNode extends EmbedChildNode<EmbedAuthorProps> {
-  override modifyEmbedOptions(options: EmbedOptions): void {
-    options.author = {
-      name: this.props.name ?? this.props.children ?? "",
-      url: this.props.url,
-      icon_url: this.props.iconUrl,
-    }
-  }
-}

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,37 +0,0 @@
-import React from "react"
-import { ReacordElement } from "../../internal/element.js"
-import { EmbedChildNode } from "./embed-child.js"
-import type { EmbedOptions } from "./embed-options"
-
-/**
- * @category Embed
- */
-export type EmbedFieldProps = {
-  name: string
-  value?: string
-  inline?: boolean
-  children?: string
-}
-
-/**
- * @category Embed
- */
-export function EmbedField(props: EmbedFieldProps) {
-  return (
-    <ReacordElement
-      props={props}
-      createNode={() => new EmbedFieldNode(props)}
-    />
-  )
-}
-
-class EmbedFieldNode extends EmbedChildNode<EmbedFieldProps> {
-  override modifyEmbedOptions(options: EmbedOptions): void {
-    options.fields ??= []
-    options.fields.push({
-      name: this.props.name,
-      value: this.props.value ?? this.props.children ?? "",
-      inline: this.props.inline,
-    })
-  }
-}

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

@@ -1,38 +0,0 @@
-import React from "react"
-import { ReacordElement } from "../../internal/element.js"
-import { EmbedChildNode } from "./embed-child.js"
-import type { EmbedOptions } from "./embed-options"
-
-/**
- * @category Embed
- */
-export type EmbedFooterProps = {
-  text?: string
-  children?: string
-  iconUrl?: string
-  timestamp?: string | number | Date
-}
-
-/**
- * @category Embed
- */
-export function EmbedFooter(props: EmbedFooterProps) {
-  return (
-    <ReacordElement
-      props={props}
-      createNode={() => new EmbedFooterNode(props)}
-    />
-  )
-}
-
-class EmbedFooterNode extends EmbedChildNode<EmbedFooterProps> {
-  override modifyEmbedOptions(options: EmbedOptions): void {
-    options.footer = {
-      text: this.props.text ?? this.props.children ?? "",
-      icon_url: this.props.iconUrl,
-    }
-    options.timestamp = this.props.timestamp
-      ? new Date(this.props.timestamp).toISOString()
-      : undefined
-  }
-}

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

@@ -1,29 +0,0 @@
-import React from "react"
-import { ReacordElement } from "../../internal/element.js"
-import { EmbedChildNode } from "./embed-child.js"
-import type { EmbedOptions } from "./embed-options"
-
-/**
- * @category Embed
- */
-export type 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 { Except, SnakeCasedPropertiesDeep } from "type-fest"
-import type { EmbedProps } from "./embed"
-
-export type EmbedOptions = SnakeCasedPropertiesDeep<
-  Except<EmbedProps, "timestamp" | "children"> & {
-    timestamp?: string
-  }
->

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

@@ -1,29 +0,0 @@
-import React from "react"
-import { ReacordElement } from "../../internal/element.js"
-import { EmbedChildNode } from "./embed-child.js"
-import type { EmbedOptions } from "./embed-options"
-
-/**
- * @category Embed
- */
-export type 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 React from "react"
-import { ReacordElement } from "../../internal/element.js"
-import { EmbedChildNode } from "./embed-child.js"
-import type { EmbedOptions } from "./embed-options"
-
-/**
- * @category Embed
- */
-export type EmbedTitleProps = {
-  children: string
-  url?: string
-}
-
-/**
- * @category Embed
- */
-export function EmbedTitle(props: EmbedTitleProps) {
-  return (
-    <ReacordElement
-      props={props}
-      createNode={() => new EmbedTitleNode(props)}
-    />
-  )
-}
-
-class EmbedTitleNode extends EmbedChildNode<EmbedTitleProps> {
-  override modifyEmbedOptions(options: EmbedOptions): void {
-    options.title = this.props.children
-    options.url = this.props.url
-  }
-}

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

@@ -1,62 +0,0 @@
-import React from "react"
-import { snakeCaseDeep } from "../../../helpers/convert-object-property-case"
-import { omit } from "../../../helpers/omit"
-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 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>
-  )
-}
-
-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,35 +0,0 @@
-import React from "react"
-import { ReacordElement } from "../../internal/element.js"
-import type { MessageOptions } from "../../internal/message"
-import { getNextActionRow } from "../../internal/message"
-import { Node } from "../../internal/node.js"
-import type { ButtonSharedProps } from "./button-shared-props"
-
-/**
- * @category Link
- */
-export type LinkProps = ButtonSharedProps & {
-  /** The URL the link should lead to */
-  url: string
-  /** The link text */
-  children?: string
-}
-
-/**
- * @category Link
- */
-export function Link(props: LinkProps) {
-  return <ReacordElement props={props} createNode={() => new LinkNode(props)} />
-}
-
-class LinkNode extends Node<LinkProps> {
-  override modifyMessageOptions(options: MessageOptions): void {
-    getNextActionRow(options).push({
-      type: "link",
-      disabled: this.props.disabled,
-      emoji: this.props.emoji,
-      label: this.props.label || this.props.children,
-      url: this.props.url,
-    })
-  }
-}

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

@@ -1,14 +0,0 @@
-import type { MessageSelectOptionOptions } from "../../internal/message"
-import { Node } from "../../internal/node"
-import type { OptionProps } from "./option"
-
-export class OptionNode extends Node<OptionProps> {
-  get options(): MessageSelectOptionOptions {
-    return {
-      label: this.props.children || this.props.label || this.props.value,
-      value: this.props.value,
-      description: this.props.description,
-      emoji: this.props.emoji,
-    }
-  }
-}

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

@@ -1,38 +0,0 @@
-import React from "react"
-import { ReacordElement } from "../../internal/element"
-import { OptionNode } from "./option-node"
-
-/**
- * @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?: string
-  /** The text shown to the user */
-  children?: string
-  /** Description for the option, shown to the user */
-  description?: string
-
-  /**
-   * 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(props: OptionProps) {
-  return (
-    <ReacordElement props={props} createNode={() => new OptionNode(props)} />
-  )
-}

packages/reacord/library/core/instance.ts

@@ -1,19 +0,0 @@
-import type { ReactNode } from "react"
-
-/**
- * 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: 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
-}

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

@@ -1,381 +0,0 @@
-/* eslint-disable class-methods-use-this */
-import * as Discord from "discord.js"
-import type { ReactNode } from "react"
-import type { Except } from "type-fest"
-import { pick } from "../../helpers/pick"
-import { pruneNullishValues } from "../../helpers/prune-nullish-values"
-import { raise } from "../../helpers/raise"
-import { toUpper } from "../../helpers/to-upper"
-import type { ComponentInteraction } from "../internal/interaction"
-import type { Message, MessageOptions } from "../internal/message"
-import { ChannelMessageRenderer } from "../internal/renderers/channel-message-renderer"
-import { InteractionReplyRenderer } from "../internal/renderers/interaction-reply-renderer"
-import type {
-  ChannelInfo,
-  GuildInfo,
-  GuildMemberInfo,
-  MessageInfo,
-  UserInfo,
-} 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.isMessageComponent()) {
-        this.handleComponentInteraction(
-          this.createReacordComponentInteraction(interaction),
-        )
-      }
-    })
-  }
-
-  /**
-   * Sends a message to a channel.
-   * @see https://reacord.fly.dev/guides/sending-messages
-   */
-  override send(
-    channelId: string,
-    initialContent?: React.ReactNode,
-  ): ReacordInstance {
-    return this.createInstance(
-      this.createChannelRenderer(channelId),
-      initialContent,
-    )
-  }
-
-  /**
-   * Sends a message as a reply to a command interaction.
-   * @see https://reacord.fly.dev/guides/sending-messages
-   */
-  override 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.
-   * @see https://reacord.fly.dev/guides/sending-messages
-   */
-  override ephemeralReply(
-    interaction: Discord.CommandInteraction,
-    initialContent?: React.ReactNode,
-  ): ReacordInstance {
-    return this.createInstance(
-      this.createEphemeralInteractionReplyRenderer(interaction),
-      initialContent,
-    )
-  }
-
-  private createChannelRenderer(channelId: string) {
-    return new ChannelMessageRenderer({
-      send: async (options) => {
-        const channel =
-          this.client.channels.cache.get(channelId) ??
-          (await this.client.channels.fetch(channelId)) ??
-          raise(`Channel ${channelId} not found`)
-
-        if (!channel.isText()) {
-          raise(`Channel ${channelId} is not a text channel`)
-        }
-
-        const message = await channel.send(getDiscordMessageOptions(options))
-        return createReacordMessage(message)
-      },
-    })
-  }
-
-  private createInteractionReplyRenderer(
-    interaction:
-      | Discord.CommandInteraction
-      | Discord.MessageComponentInteraction,
-  ) {
-    return new InteractionReplyRenderer({
-      type: "command",
-      id: interaction.id,
-      reply: async (options) => {
-        const message = await interaction.reply({
-          ...getDiscordMessageOptions(options),
-          fetchReply: true,
-        })
-        return createReacordMessage(message as Discord.Message)
-      },
-      followUp: async (options) => {
-        const message = await interaction.followUp({
-          ...getDiscordMessageOptions(options),
-          fetchReply: true,
-        })
-        return createReacordMessage(message as Discord.Message)
-      },
-    })
-  }
-
-  private createEphemeralInteractionReplyRenderer(
-    interaction:
-      | Discord.CommandInteraction
-      | Discord.MessageComponentInteraction,
-  ) {
-    return new InteractionReplyRenderer({
-      type: "command",
-      id: interaction.id,
-      reply: async (options) => {
-        await interaction.reply({
-          ...getDiscordMessageOptions(options),
-          ephemeral: true,
-        })
-        return createEphemeralReacordMessage()
-      },
-      followUp: async (options) => {
-        await interaction.followUp({
-          ...getDiscordMessageOptions(options),
-          ephemeral: true,
-        })
-        return createEphemeralReacordMessage()
-      },
-    })
-  }
-
-  private createReacordComponentInteraction(
-    interaction: Discord.MessageComponentInteraction,
-  ): ComponentInteraction {
-    // todo please dear god clean this up
-    const channel: ChannelInfo = interaction.channel
-      ? {
-          ...pruneNullishValues(
-            pick(interaction.channel, [
-              "topic",
-              "nsfw",
-              "lastMessageId",
-              "ownerId",
-              "parentId",
-              "rateLimitPerUser",
-            ]),
-          ),
-          id: interaction.channelId,
-        }
-      : raise("Non-channel interactions are not supported")
-
-    const message: MessageInfo =
-      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),
-          }
-        : raise("Message not found")
-
-    const member: GuildMemberInfo | 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(),
-          }
-        : undefined
-
-    const guild: GuildInfo | undefined = interaction.guild
-      ? {
-          ...pruneNullishValues(pick(interaction.guild, ["id", "name"])),
-          member: member ?? raise("unexpected: member is undefined"),
-        }
-      : undefined
-
-    const user: UserInfo = {
-      ...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) => {
-        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 as Discord.Message)
-      },
-      followUp: async (options) => {
-        const message = await interaction.followUp({
-          ...getDiscordMessageOptions(options),
-          fetchReply: true,
-        })
-        return createReacordMessage(message as Discord.Message)
-      },
-      event: {
-        channel,
-        message,
-        user,
-        guild,
-
-        reply: (content?: ReactNode) =>
-          this.createInstance(
-            this.createInteractionReplyRenderer(interaction),
-            content,
-          ),
-
-        ephemeralReply: (content: ReactNode) =>
-          this.createInstance(
-            this.createEphemeralInteractionReplyRenderer(interaction),
-            content,
-          ),
-      },
-    }
-
-    if (interaction.isButton()) {
-      return {
-        ...baseProps,
-        type: "button",
-      }
-    }
-
-    if (interaction.isSelectMenu()) {
-      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))
-    },
-    disableComponents: async () => {
-      for (const actionRow of message.components) {
-        for (const component of actionRow.components) {
-          component.setDisabled(true)
-        }
-      }
-
-      await message.edit({
-        components: message.components,
-      })
-    },
-    delete: async () => {
-      await message.delete()
-    },
-  }
-}
-
-function createEphemeralReacordMessage(): Message {
-  return {
-    edit: () => {
-      console.warn("Ephemeral messages can't be edited")
-      return Promise.resolve()
-    },
-    disableComponents: () => {
-      console.warn("Ephemeral messages can't be edited")
-      return Promise.resolve()
-    },
-    delete: () => {
-      console.warn("Ephemeral messages can't be deleted")
-      return Promise.resolve()
-    },
-  }
-}
-
-// TODO: this could be a part of the core library,
-// and also handle some edge cases, e.g. empty messages
-function getDiscordMessageOptions(
-  reacordOptions: MessageOptions,
-): Discord.MessageOptions {
-  const options: Discord.MessageOptions = {
-    // eslint-disable-next-line unicorn/no-null
-    content: reacordOptions.content || null,
-    embeds: reacordOptions.embeds,
-    components: reacordOptions.actionRows.map((row) => ({
-      type: "ACTION_ROW",
-      components: row.map(
-        (component): Discord.MessageActionRowComponentOptions => {
-          if (component.type === "button") {
-            return {
-              type: "BUTTON",
-              customId: component.customId,
-              label: component.label ?? "",
-              style: toUpper(component.style ?? "secondary"),
-              disabled: component.disabled,
-              emoji: component.emoji,
-            }
-          }
-
-          if (component.type === "select") {
-            return {
-              ...component,
-              type: "SELECT_MENU",
-              options: component.options.map((option) => ({
-                ...option,
-                default: component.values?.includes(option.value),
-              })),
-            }
-          }
-
-          raise(`Unsupported component type: ${component.type}`)
-        },
-      ),
-    })),
-  }
-
-  if (!options.content && !options.embeds?.length) {
-    options.content = "_ _"
-  }
-
-  return options
-}

packages/reacord/library/core/reacord.tsx

@@ -1,79 +0,0 @@
-import type { ReactNode } from "react"
-import React from "react"
-import type { ComponentInteraction } from "../internal/interaction"
-import { reconciler } from "../internal/reconciler.js"
-import type { Renderer } from "../internal/renderers/renderer"
-import type { ReacordInstance } from "./instance"
-import { InstanceProvider } from "./instance-context"
-
-/**
- * @category Core
- */
-export type 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 = {}) {}
-
-  abstract send(...args: unknown[]): ReacordInstance
-  abstract reply(...args: unknown[]): ReacordInstance
-  abstract ephemeralReply(...args: unknown[]): ReacordInstance
-
-  protected handleComponentInteraction(interaction: ComponentInteraction) {
-    for (const renderer of this.renderers) {
-      if (renderer.handleComponentInteraction(interaction)) return
-    }
-  }
-
-  private get maxInstances() {
-    return this.config.maxInstances ?? 50
-  }
-
-  protected createInstance(renderer: Renderer, initialContent?: ReactNode) {
-    if (this.renderers.length > this.maxInstances) {
-      this.deactivate(this.renderers[0]!)
-    }
-
-    this.renderers.push(renderer)
-
-    const container = reconciler.createContainer(renderer, 0, false, {})
-
-    const instance: ReacordInstance = {
-      render: (content: ReactNode) => {
-        reconciler.updateContainer(
-          <InstanceProvider value={instance}>{content}</InstanceProvider>,
-          container,
-        )
-      },
-      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 type Channel = {
-  send(message: MessageOptions): Promise<Message>
-}

packages/reacord/library/internal/container.ts

@@ -1,27 +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 = []
-  }
-
-  [Symbol.iterator]() {
-    return this.items[Symbol.iterator]()
-  }
-}

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 type 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,66 +0,0 @@
-import type { Except } from "type-fest"
-import { last } from "../../helpers/last"
-import type { EmbedOptions } from "../core/components/embed-options"
-import type { SelectProps } from "../core/components/select"
-
-export type MessageOptions = {
-  content: string
-  embeds: EmbedOptions[]
-  actionRows: ActionRow[]
-}
-
-export type ActionRow = ActionRowItem[]
-
-export type ActionRowItem =
-  | MessageButtonOptions
-  | MessageLinkOptions
-  | MessageSelectOptions
-
-export type MessageButtonOptions = {
-  type: "button"
-  customId: string
-  label?: string
-  style?: "primary" | "secondary" | "success" | "danger"
-  disabled?: boolean
-  emoji?: string
-}
-
-export type 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 type MessageSelectOptionOptions = {
-  label: string
-  value: string
-  description?: string
-  emoji?: string
-}
-
-export type Message = {
-  edit(options: MessageOptions): Promise<void>
-  delete(): Promise<void>
-  disableComponents(): 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,16 +0,0 @@
-/* eslint-disable class-methods-use-this */
-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) {}
-
-  handleComponentInteraction(interaction: ComponentInteraction): boolean {
-    return false
-  }
-}

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,22 +0,0 @@
-import type { Interaction } from "../interaction"
-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 class InteractionReplyRenderer extends Renderer {
-  constructor(private interaction: Interaction) {
-    super()
-  }
-
-  protected createMessage(options: MessageOptions): Promise<Message> {
-    if (repliedInteractionIds.has(this.interaction.id)) {
-      return this.interaction.followUp(options)
-    }
-
-    repliedInteractionIds.add(this.interaction.id)
-    return this.interaction.reply(options)
-  }
-}

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

@@ -1,109 +0,0 @@
-import { Subject } from "rxjs"
-import { concatMap } from "rxjs/operators"
-import { Container } from "../container.js"
-import type { ComponentInteraction } from "../interaction"
-import type { Message, MessageOptions } from "../message"
-import type { Node } from "../node.js"
-
-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) {
-    this.componentInteraction = interaction
-
-    setTimeout(() => {
-      this.updates.next({ action: "deferUpdate", interaction })
-    }, 500)
-
-    for (const node of this.nodes) {
-      if (node.handleComponentInteraction(interaction)) {
-        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?.disableComponents()
-      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,8 +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
-  }
-}

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,15 +2,33 @@
   "name": "reacord",
   "type": "module",
   "description": "Create interactive Discord messages using React.",
-  "version": "0.3.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",
+  "license": "MIT",
+  "keywords": [
+    "discord",
+    "discord-js",
+    "react",
+    "react-js",
+    "react-renderer",
+    "interaction",
+    "message",
+    "embed",
+    "reacord"
+  ],
   "files": [
-    "dist"
+    "dist",
+    "README.md",
+    "LICENSE"
   ],
   "exports": {
     ".": {
       "import": "./dist/main.js",
-      "require": "./dist/main.cjs"
+      "require": "./dist/main.cjs",
+      "types": "./dist/main.d.ts"
     },
     "./package.json": {
       "import": "./package.json",
@@ -18,24 +36,33 @@
     }
   },
   "scripts": {
-    "build": "tsup-node library/main.ts --target node16 --format cjs,esm --dts --sourcemap",
+    "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"
-    "typecheck": "tsc --noEmit",
+  },
-    "playground": "nodemon --exec esmo --ext ts,tsx --inspect=5858 --enable-source-maps ./playground/main.tsx",
+  "tsup": {
-    "release": "release-it"
+    "entry": [
+      "src/main.ts"
+    ],
+    "sourcemap": true,
+    "target": "node16",
+    "format": [
+      "cjs",
+      "esm"
+    ],
+    "dts": true
   },
   "dependencies": {
     "@types/node": "*",
     "@types/react": "*",
-    "@types/react-reconciler": "^0.26.4",
+    "@types/react-reconciler": "*",
-    "nanoid": "^3.1.31",
+    "discord-api-types": "^0.37.1",
-    "react-reconciler": "^0.26.2",
+    "react-reconciler": "^0.29.0",
-    "rxjs": "^7.5.2"
+    "rxjs": "^7.5.6"
   },
   "peerDependencies": {
-    "discord.js": "^13.3",
+    "discord.js": "^14",
     "react": ">=17"
   },
   "peerDependenciesMeta": {
@@ -44,24 +71,24 @@
     }
   },
   "devDependencies": {
-    "@types/lodash-es": "^4.17.5",
+    "@reacord/helpers": "workspace:*",
-    "c8": "^7.11.0",
+    "@types/lodash-es": "^4.17.6",
-    "discord.js": "^13.5.1",
+    "@types/prettier": "^2.7.0",
-    "dotenv": "^11.0.0",
+    "date-fns": "^2.29.1",
-    "esbuild": "latest",
+    "discord.js": "^14.1.2",
-    "esbuild-jest": "^0.5.0",
+    "dotenv": "^16.0.1",
-    "esmo": "^0.13.0",
     "lodash-es": "^4.17.21",
-    "nodemon": "^2.0.15",
+    "nodemon": "^2.0.19",
-    "prettier": "^2.5.1",
+    "ora": "^6.1.2",
-    "pretty-ms": "^7.0.1",
+    "prettier": "^2.7.1",
-    "react": "^17.0.2",
+    "pretty-ms": "^8.0.0",
-    "release-it": "^14.12.1",
+    "react": "^18.2.0",
-    "tsup": "^5.11.11",
+    "release-it": "^15.2.0",
-    "type-fest": "^2.9.0",
+    "ts-morph": "^15.1.0",
-    "typescript": "^4.5.4",
+    "tsup": "^6.2.1",
-    "vite": "^2.7.10",
+    "tsx": "^3.8.0",
-    "vitest": "^0.0.141"
+    "type-fest": "^2.18.0",
+    "typescript": "^4.7.4"
   },
   "resolutions": {
     "esbuild": "latest"
@@ -74,5 +101,8 @@
       "release": true,
       "web": true
     }
+  },
+  "publishConfig": {
+    "access": "public"
   }
 }

packages/reacord/playground/command-handler.ts

@@ -1,38 +0,0 @@
-import type { Client, CommandInteraction } from "discord.js"
-
-type Command = {
-  name: string
-  description: string
-  run: (interaction: CommandInteraction) => unknown
-}
-
-export function createCommandHandler(client: Client, commands: Command[]) {
-  client.on("ready", async () => {
-    for (const command of commands) {
-      for (const guild of client.guilds.cache.values()) {
-        await client.application?.commands.create(
-          {
-            name: command.name,
-            description: command.description,
-          },
-          guild.id,
-        )
-      }
-    }
-  })
-
-  client.on("interactionCreate", async (interaction) => {
-    if (!interaction.isCommand()) return
-
-    const command = commands.find(
-      (command) => command.name === interaction.commandName,
-    )
-    if (command) {
-      try {
-        await command.run(interaction)
-      } catch (error) {
-        console.error(error)
-      }
-    }
-  })
-}

packages/reacord/playground/counter.tsx

@@ -1,36 +0,0 @@
-import * as React from "react"
-import { Button, Embed, EmbedField, EmbedTitle } from "../library/main"
-
-export function Counter(props: { onDeactivate: () => void }) {
-  const [count, setCount] = React.useState(0)
-  const [embedVisible, setEmbedVisible] = React.useState(false)
-
-  return (
-    <>
-      this button was clicked {count} times
-      {embedVisible && (
-        <Embed>
-          <EmbedTitle>the counter</EmbedTitle>
-          {count > 0 && (
-            <EmbedField name="is it even?">
-              {count % 2 === 0 ? "yes" : "no"}
-            </EmbedField>
-          )}
-        </Embed>
-      )}
-      {embedVisible && (
-        <Button label="hide embed" onClick={() => setEmbedVisible(false)} />
-      )}
-      <Button
-        style="primary"
-        emoji="<:plus_one:778531744860602388>"
-        label="clicc"
-        onClick={() => setCount(count + 1)}
-      />
-      {!embedVisible && (
-        <Button label="show embed" onClick={() => setEmbedVisible(true)} />
-      )}
-      <Button style="danger" label="deactivate" onClick={props.onDeactivate} />
-    </>
-  )
-}

packages/reacord/playground/fruit-select.tsx

@@ -1,31 +0,0 @@
-import React, { useState } from "react"
-import { Button, Option, Select } from "../library/main"
-
-export function FruitSelect({
-  onConfirm,
-}: {
-  onConfirm: (choice: string) => void
-}) {
-  const [value, setValue] = useState<string>()
-
-  return (
-    <>
-      <Select
-        placeholder="choose a fruit"
-        value={value}
-        onChangeValue={setValue}
-      >
-        <Option value="🍎" />
-        <Option value="🍌" />
-        <Option value="🍒" />
-      </Select>
-      <Button
-        label="confirm"
-        disabled={value == undefined}
-        onClick={() => {
-          if (value) onConfirm(value)
-        }}
-      />
-    </>
-  )
-}

packages/reacord/playground/main.tsx

@@ -1,109 +0,0 @@
-import { Client } from "discord.js"
-import "dotenv/config"
-import React from "react"
-import { Button, ReacordDiscordJs, useInstance } from "../library/main"
-import { createCommandHandler } from "./command-handler"
-import { Counter } from "./counter"
-import { FruitSelect } from "./fruit-select"
-
-const client = new Client({
-  intents: ["GUILDS"],
-})
-
-const reacord = new ReacordDiscordJs(client)
-
-client.on("ready", () => {
-  console.info("ready 💖")
-
-  // const now = new Date()
-
-  // function UptimeCounter() {
-  //   const [uptime, setUptime] = React.useState(0)
-
-  //   React.useEffect(() => {
-  //     const interval = setInterval(() => {
-  //       setUptime(Date.now() - now.getTime())
-  //     }, 5000)
-  //     return () => clearInterval(interval)
-  //   }, [])
-
-  //   return (
-  //     <Embed>this bot has been running for {prettyMilliseconds(uptime)}</Embed>
-  //   )
-  // }
-
-  // reacord.send("671787605624487941", <UptimeCounter />)
-})
-
-createCommandHandler(client, [
-  {
-    name: "button",
-    description: "it's a button",
-    run: (interaction) => {
-      reacord.reply(
-        interaction,
-        <Button label="clic" onClick={() => console.info("was clic")} />,
-      )
-    },
-  },
-  {
-    name: "counter",
-    description: "shows a counter button",
-    run: (interaction) => {
-      const reply = reacord.reply(interaction)
-      reply.render(<Counter onDeactivate={() => reply.destroy()} />)
-    },
-  },
-  {
-    name: "select",
-    description: "shows a select",
-    run: (interaction) => {
-      const instance = reacord.reply(
-        interaction,
-        <FruitSelect
-          onConfirm={(value) => {
-            instance.render(`you chose ${value}`)
-            instance.deactivate()
-          }}
-        />,
-      )
-    },
-  },
-  {
-    name: "ephemeral-button",
-    description: "button which shows ephemeral messages",
-    run: (interaction) => {
-      reacord.reply(
-        interaction,
-        <>
-          <Button
-            label="public clic"
-            onClick={(event) =>
-              reacord.reply(
-                interaction,
-                `${event.guild?.member.displayName} clic`,
-              )
-            }
-          />
-          <Button
-            label="clic"
-            onClick={(event) => event.ephemeralReply("you clic")}
-          />
-        </>,
-      )
-    },
-  },
-  {
-    name: "delete-this",
-    description: "delete this",
-    run: (interaction) => {
-      function DeleteThis() {
-        const instance = useInstance()
-        return <Button label="delete this" onClick={() => instance.destroy()} />
-      }
-      reacord.reply(interaction, <DeleteThis />)
-    },
-  },
-])
-
-await client.login(process.env.TEST_BOT_TOKEN)

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

@@ -1,8 +1,7 @@
 import type { ReactNode } from "react"
 import React from "react"
-import { ReacordElement } from "../../internal/element.js"
+import { Node } from "../node"
-import type { MessageOptions } from "../../internal/message"
+import { ReacordElement } from "./reacord-element"
-import { Node } from "../../internal/node.js"
 
 /**
  * Props for an action row
@@ -21,9 +20,9 @@ export type ActionRowProps = {
  * ```tsx
  * // put buttons on two separate rows
  * <ActionRow>
- *   <Button onClick={handleFirst}>First</Button>
+ *   <Button label="First" onClick={handleFirst} />
  * </ActionRow>
- * <Button onClick={handleSecond}>Second</Button>
+ * <Button label="Second" onClick={handleSecond} />
  * ```
  *
  * @category Action Row
@@ -31,17 +30,10 @@ export type ActionRowProps = {
  */
 export function ActionRow(props: ActionRowProps) {
   return (
-    <ReacordElement props={props} createNode={() => new ActionRowNode(props)}>
+    <ReacordElement props={{}} createNode={() => new ActionRowNode({})}>
       {props.children}
     </ReacordElement>
   )
 }
 
-class ActionRowNode extends Node<{}> {
+export class ActionRowNode extends Node<{}> {}
-  override modifyMessageOptions(options: MessageOptions): void {
-    options.actionRows.push([])
-    for (const child of this.children) {
-      child.modifyMessageOptions(options)
-    }
-  }
-}

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

@@ -1,10 +1,12 @@
+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?: string
+  label?: ReactNode
 
   /** When true, the button will be slightly faded, and cannot be clicked. */
   disabled?: boolean

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 { raise } from "@reacord/helpers/raise"
 import * as React from "react"
-import { raise } from "../../helpers/raise"
+import type { ReacordInstance } from "../reacord-instance"
-import type { ReacordInstance } from "./instance"
 
 const Context = React.createContext<ReacordInstance | undefined>(undefined)
 
@@ -10,7 +10,7 @@ export const InstanceProvider = Context.Provider
  * Get the associated instance for the current component.
  *
  * @category Core
- * @see https://reacord.fly.dev/guides/use-instance
+ * @see https://reacord.mapleleaf.dev/guides/use-instance
  */
 export function useInstance(): ReacordInstance {
   return (

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

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