more docks mockuping

.changeset/README.md

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

@@ -1,11 +0,0 @@
-{
-	"$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": []
-}

.changeset/five-wolves-destroy.md

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

.changeset/many-pets-melt.md

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

.eslintrc.json

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

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

@@ -0,0 +1,41 @@
+name: main
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+
+env:
+  TEST_BOT_TOKEN: ${{ secrets.TEST_BOT_TOKEN }}
+  TEST_CHANNEL_ID: ${{ secrets.TEST_CHANNEL_ID }}
+  TEST_GUILD_ID: ${{ secrets.TEST_GUILD_ID }}
+
+jobs:
+  run-commands:
+    strategy:
+      fail-fast: false
+      matrix:
+        command:
+          # if these run in the same process, it dies,
+          # so we test them separate
+          - name: test reacord
+            run: pnpm test -C packages/reacord
+          - name: test website
+            run: pnpm test -C packages/website
+          - name: build
+            run: pnpm build --recursive
+          - name: lint
+            run: pnpm lint
+          - name: typecheck
+            run: pnpm typecheck --parallel
+    name: ${{ matrix.command.name }}
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+        with:
+          # https://github.com/actions/setup-node#supported-version-syntax
+          node-version: "16"
+      - run: npm i -g pnpm
+      - run: pnpm install --frozen-lockfile
+      - run: ${{ matrix.command.run }}

.github/workflows/release.yml

@@ -1,33 +0,0 @@
-# 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:
-      - uses: actions/checkout@v3
-      - uses: pnpm/action-setup@v2
-        with:
-          version: 8
-      - uses: actions/setup-node@v3
-        with:
-          node-version: 18
-          cache: pnpm
-      - 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 }}

.github/workflows/tests.yml

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

.gitignore

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

.npmrc

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

.prettierignore

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

Dockerfile

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

README.md

@@ -1,5 +1,5 @@
 <center>
-  <img src="packages/website/src/assets/banner.png" alt="Reacord: Create interactive Discord messages using React">
+  <img src="./packages/website/app/assets/banner.png" alt="Reacord: Create interactive Discord messages using React">
 </center>
 
 ## Installation ∙ [![npm](https://img.shields.io/npm/v/reacord?color=blue&style=flat-square)](https://www.npmjs.com/package/reacord)
@@ -18,7 +18,7 @@ pnpm add reacord react discord.js
 
 ## Get Started
 
-[Visit the docs to get started.](https://reacord.mapleleaf.dev/guides/getting-started)
+[Visit the docs to get started.](https://reacord.fly.dev/guides/getting-started)
 
 ## Example
 

fly.toml

@@ -0,0 +1,40 @@
+# 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,44 +1,29 @@
 {
-  "name": "reacord-monorepo",
   "private": true,
   "scripts": {
-    "lint": "run-s --continue-on-error lint:*",
+    "lint": "eslint --ext js,ts,tsx .",
-    "lint:eslint": "eslint . --fix --cache --cache-file=node_modules/.cache/.eslintcache --report-unused-disable-directives",
+    "lint-fix": "pnpm lint -- --fix",
-    "lint:prettier": "prettier . \"**/*.astro\" --write --cache --list-different",
+    "format": "prettier --write ."
-    "lint:types": "tsc -b & pnpm -r --parallel run typecheck",
+  },
-    "astro-sync": "pnpm --filter website exec astro sync",
+  "dependencies": {
-    "test": "vitest",
+    "@itsmapleleaf/configs": "^1.1.2"
-    "build": "pnpm -r run build",
-    "build:website": "pnpm --filter website... run build",
-    "start": "pnpm -C packages/website run start",
-    "start:website": "pnpm -C packages/website run start",
-    "release": "pnpm -r run build && changeset publish"
   },
   "devDependencies": {
-    "@changesets/cli": "^2.26.2",
+    "@typescript-eslint/eslint-plugin": "^5.9.1",
-    "@itsmapleleaf/configs": "github:itsMapleLeaf/configs",
+    "@typescript-eslint/parser": "^5.9.1",
-    "eslint": "^8.51.0",
+    "eslint": "^8.6.0",
-    "npm-run-all": "^4.1.5",
+    "eslint-config-prettier": "^8.3.0",
-    "prettier": "^3.0.3",
+    "eslint-import-resolver-typescript": "^2.5.0",
-    "react": "^18.2.0",
+    "eslint-plugin-import": "^2.25.4",
-    "tailwindcss": "^3.3.3",
+    "eslint-plugin-jsx-a11y": "^6.5.1",
-    "typescript": "^5.2.2",
+    "eslint-plugin-react": "^7.28.0",
-    "vitest": "^0.34.6"
+    "eslint-plugin-react-hooks": "^4.3.0",
+    "eslint-plugin-unicorn": "^40.0.0",
+    "prettier": "^2.5.1",
+    "typescript": "^4.5.4"
   },
-  "prettier": "@itsmapleleaf/configs/prettier",
+  "resolutions": {
-  "eslintConfig": {
+    "esbuild": "latest"
-    "extends": [
+  },
-      "./node_modules/@itsmapleleaf/configs/eslint.config.cjs",
+  "prettier": "@itsmapleleaf/configs/prettier"
-      "./node_modules/@itsmapleleaf/configs/eslint.config.react.cjs"
-    ],
-    "ignorePatterns": [
-      "node_modules",
-      "dist",
-      "packages/website/public/api"
-    ],
-    "rules": {
-      "@typescript-eslint/no-non-null-assertion": "warn",
-      "@typescript-eslint/require-await": "off"
-    }
-  }
 }

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

@@ -1,42 +0,0 @@
-import { camelCaseDeep, snakeCaseDeep } from "./convert-object-property-case"
-import type {
-	CamelCasedPropertiesDeep,
-	SnakeCasedPropertiesDeep,
-} from "type-fest"
-import { expect, test } from "vitest"
-
-test("camelCaseDeep", () => {
-	const input = {
-		some_prop: {
-			some_deep_prop: "some_deep_value",
-		},
-		someOtherProp: "someOtherValue",
-	}
-
-	const expected: CamelCasedPropertiesDeep<typeof input> = {
-		someProp: {
-			someDeepProp: "some_deep_value",
-		},
-		someOtherProp: "someOtherValue",
-	}
-
-	expect(camelCaseDeep(input)).toEqual(expected)
-})
-
-test("snakeCaseDeep", () => {
-	const input = {
-		someProp: {
-			someDeepProp: "someDeepValue",
-		},
-		some_other_prop: "someOtherValue",
-	}
-
-	const expected: SnakeCasedPropertiesDeep<typeof input> = {
-		some_prop: {
-			some_deep_prop: "someDeepValue",
-		},
-		some_other_prop: "someOtherValue",
-	}
-
-	expect(snakeCaseDeep(input)).toEqual(expected)
-})

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

@@ -1,35 +0,0 @@
-import { camelCase, isObject, snakeCase } from "lodash-es"
-import type {
-	CamelCasedPropertiesDeep,
-	SnakeCasedPropertiesDeep,
-	UnknownRecord,
-} from "type-fest"
-
-function convertKeyCaseDeep<Input, Output>(
-	input: Input,
-	convertKey: (key: string) => string,
-): Output {
-	if (!isObject(input)) {
-		return input as unknown as Output
-	}
-
-	if (Array.isArray(input)) {
-		return input.map((item) =>
-			convertKeyCaseDeep(item, convertKey),
-		) as unknown as Output
-	}
-
-	const output = {} as UnknownRecord
-	for (const [key, value] of Object.entries(input)) {
-		output[convertKey(key)] = convertKeyCaseDeep(value, convertKey)
-	}
-	return output as Output
-}
-
-export function camelCaseDeep<T>(input: T): CamelCasedPropertiesDeep<T> {
-	return convertKeyCaseDeep(input, camelCase)
-}
-
-export function snakeCaseDeep<T>(input: T): SnakeCasedPropertiesDeep<T> {
-	return convertKeyCaseDeep(input, snakeCase)
-}

packages/helpers/is-instance-of.ts

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

packages/helpers/is-object.ts

@@ -1,3 +0,0 @@
-export function isObject(value: unknown): value is object {
-	return typeof value === "object" && value !== null
-}

packages/helpers/json.ts

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

packages/helpers/log-pretty.ts

@@ -1,11 +0,0 @@
-import { inspect } from "node:util"
-
-export function logPretty(value: unknown) {
-	console.info(
-		inspect(value, {
-			// depth: Number.POSITIVE_INFINITY,
-			depth: 10,
-			colors: true,
-		}),
-	)
-}

packages/helpers/omit.test.ts

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

packages/helpers/omit.test.types.ts

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

packages/helpers/omit.ts

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

packages/helpers/package.json

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

packages/helpers/pick.ts

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

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

@@ -1,34 +0,0 @@
-import { expect, test } from "vitest"
-import type { PruneNullishValues } from "./prune-nullish-values"
-import { pruneNullishValues } from "./prune-nullish-values"
-
-test("pruneNullishValues", () => {
-	interface InputType {
-		a: string
-		b: string | null | undefined
-		c?: string
-		d: {
-			a: string
-			b: string | undefined
-		}
-	}
-
-	const input: InputType = {
-		a: "a",
-		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

@@ -1,46 +0,0 @@
-import { isObject } from "./is-object"
-
-export function pruneNullishValues<T>(input: T): PruneNullishValues<T> {
-	if (!isObject(input)) {
-		return input as PruneNullishValues<T>
-	}
-
-	if (Array.isArray(input)) {
-		return input
-			.filter(Boolean)
-			.map(
-				(item) => pruneNullishValues(item) as unknown,
-			) as PruneNullishValues<T>
-	}
-
-	const result: Record<string, unknown> = {}
-	for (const [key, value] of Object.entries(input)) {
-		if (value != undefined) {
-			result[key] = pruneNullishValues(value)
-		}
-	}
-	return result as PruneNullishValues<T>
-}
-
-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/retry-with-timeout.ts

@@ -1,21 +0,0 @@
-import { setTimeout } from "node:timers/promises"
-
-const maxTime = 500
-const waitPeriod = 50
-
-export async function retryWithTimeout<T>(
-	callback: () => Promise<T> | T,
-): Promise<T> {
-	const startTime = Date.now()
-	// eslint-disable-next-line no-constant-condition, @typescript-eslint/no-unnecessary-condition
-	while (true) {
-		try {
-			return await callback()
-		} catch (error) {
-			if (Date.now() - startTime > maxTime) {
-				throw error
-			}
-			await setTimeout(waitPeriod)
-		}
-	}
-}

packages/helpers/to-error.ts

@@ -1,3 +0,0 @@
-export function toError(value: unknown) {
-	return value instanceof Error ? value : new Error(String(value))
-}

packages/helpers/tsconfig.json

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

packages/helpers/types.test.types.ts

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

packages/helpers/types.ts

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

packages/helpers/wait-for.ts

@@ -1,23 +0,0 @@
-import { setTimeout } from "node:timers/promises"
-import type { MaybePromise } from "./types.ts"
-
-const maxTime = 1000
-
-export async function waitFor<Result>(
-	predicate: () => MaybePromise<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)
-		}
-	}
-
-	// eslint-disable-next-line @typescript-eslint/no-throw-literal
-	throw lastError ?? new Error("Timeout")
-}

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

@@ -1,24 +0,0 @@
-import { inspect } from "node:util"
-
-export function withLoggedMethodCalls<T extends object>(value: T) {
-	return new Proxy(value as Record<string | symbol, unknown>, {
-		get(target, property) {
-			const value = target[property]
-			if (typeof value !== "function") {
-				return value
-			}
-			return (...values: unknown[]) => {
-				console.info(
-					`${String(property)}(${values
-						.map((value) =>
-							typeof value === "object" && value !== null
-								? value.constructor.name
-								: inspect(value, { colors: true }),
-						)
-						.join(", ")})`,
-				)
-				return value.apply(target, values) as unknown
-			}
-		},
-	}) as T
-}

packages/reacord/CHANGELOG.md

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

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

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

@@ -0,0 +1,42 @@
+import type {
+  CamelCasedPropertiesDeep,
+  SnakeCasedPropertiesDeep,
+} from "type-fest"
+import { expect, test } from "vitest"
+import { camelCaseDeep, snakeCaseDeep } from "./convert-object-property-case"
+
+test("camelCaseDeep", () => {
+  const input = {
+    some_prop: {
+      some_deep_prop: "some_deep_value",
+    },
+    someOtherProp: "someOtherValue",
+  }
+
+  const expected: CamelCasedPropertiesDeep<typeof input> = {
+    someProp: {
+      someDeepProp: "some_deep_value",
+    },
+    someOtherProp: "someOtherValue",
+  }
+
+  expect(camelCaseDeep(input)).toEqual(expected)
+})
+
+test("snakeCaseDeep", () => {
+  const input = {
+    someProp: {
+      someDeepProp: "someDeepValue",
+    },
+    some_other_prop: "someOtherValue",
+  }
+
+  const expected: SnakeCasedPropertiesDeep<typeof input> = {
+    some_prop: {
+      some_deep_prop: "someDeepValue",
+    },
+    some_other_prop: "someOtherValue",
+  }
+
+  expect(snakeCaseDeep(input)).toEqual(expected)
+})

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

@@ -0,0 +1,34 @@
+import { camelCase, isObject, snakeCase } from "lodash-es"
+import type {
+  CamelCasedPropertiesDeep,
+  SnakeCasedPropertiesDeep,
+} from "type-fest"
+
+function convertKeyCaseDeep<Input, Output>(
+  input: Input,
+  convertKey: (key: string) => string,
+): Output {
+  if (!isObject(input)) {
+    return input as unknown as Output
+  }
+
+  if (Array.isArray(input)) {
+    return input.map((item) =>
+      convertKeyCaseDeep(item, convertKey),
+    ) as unknown as Output
+  }
+
+  const output: any = {}
+  for (const [key, value] of Object.entries(input)) {
+    output[convertKey(key)] = convertKeyCaseDeep(value, convertKey)
+  }
+  return output
+}
+
+export function camelCaseDeep<T>(input: T): CamelCasedPropertiesDeep<T> {
+  return convertKeyCaseDeep(input, camelCase)
+}
+
+export function snakeCaseDeep<T>(input: T): SnakeCasedPropertiesDeep<T> {
+  return convertKeyCaseDeep(input, snakeCase)
+}

packages/reacord/helpers/is-instance-of.ts

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

packages/reacord/helpers/is-object.ts

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

packages/reacord/helpers/log-pretty.ts

@@ -0,0 +1,12 @@
+import { inspect } from "node:util"
+
+// eslint-disable-next-line import/no-unused-modules
+export function logPretty(value: unknown) {
+  console.info(
+    inspect(value, {
+      // depth: Number.POSITIVE_INFINITY,
+      depth: 10,
+      colors: true,
+    }),
+  )
+}

packages/reacord/helpers/omit.ts

@@ -0,0 +1,14 @@
+// eslint-disable-next-line import/no-unused-modules
+export function omit<Subject extends object, Key extends PropertyKey>(
+  subject: Subject,
+  keys: Key[],
+  // hack: using a conditional type preserves union types
+): Subject extends any ? Omit<Subject, Key> : never {
+  const result: any = {}
+  for (const key in subject) {
+    if (!keys.includes(key as unknown as Key)) {
+      result[key] = subject[key]
+    }
+  }
+  return result
+}

packages/reacord/helpers/pick.ts

@@ -0,0 +1,16 @@
+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[],
+): LoosePick<T, K> {
+  const result: any = {}
+  for (const key of keys) {
+    const value = (object as UnknownRecord)[key]
+    if (value !== undefined) {
+      result[key] = value
+    }
+  }
+  return result
+}

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

@@ -0,0 +1,27 @@
+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/helpers/reject-after.ts

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

packages/reacord/helpers/retry-with-timeout.ts

@@ -0,0 +1,21 @@
+import { setTimeout } from "node:timers/promises"
+
+const maxTime = 500
+const waitPeriod = 50
+
+export async function retryWithTimeout<T>(
+  callback: () => Promise<T> | T,
+): Promise<T> {
+  const startTime = Date.now()
+  // eslint-disable-next-line no-constant-condition
+  while (true) {
+    try {
+      return await callback()
+    } catch (error) {
+      if (Date.now() - startTime > maxTime) {
+        throw error
+      }
+      await setTimeout(waitPeriod)
+    }
+  }
+}

packages/reacord/helpers/to-error.ts

@@ -0,0 +1,3 @@
+export function toError(value: unknown) {
+  return value instanceof Error ? value : new Error(String(value))
+}

packages/reacord/helpers/types.ts

@@ -0,0 +1,12 @@
+/* eslint-disable import/no-unused-modules */
+export type MaybePromise<T> = T | Promise<T>
+
+export type ValueOf<Type> = Type extends ReadonlyArray<infer Value>
+  ? Value
+  : Type[keyof Type]
+
+export type UnknownRecord = Record<PropertyKey, unknown>
+
+export type LoosePick<Shape, Keys extends PropertyKey> = {
+  [Key in Keys]: Shape extends Record<Key, infer Value> ? Value : never
+}

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

@@ -0,0 +1,25 @@
+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) {
+      const value = target[property]
+      if (typeof value !== "function") {
+        return value
+      }
+      return (...values: any[]) => {
+        console.info(
+          `${String(property)}(${values
+            .map((value) =>
+              typeof value === "object" && value !== null
+                ? value.constructor.name
+                : inspect(value, { colors: true }),
+            )
+            .join(", ")})`,
+        )
+        return value.apply(target, values)
+      }
+    },
+  }) as T
+}

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

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

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

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

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

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

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

@@ -1,4 +1,5 @@
-import { randomUUID } from "node:crypto"
+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"
@@ -7,41 +8,38 @@ import { Node } from "../../internal/node.js"
 import type { ComponentEvent } from "../component-event"
 import type { ButtonSharedProps } from "./button-shared-props"
 
-/** @category Button */
+/**
+ * @category Button
+ */
 export type ButtonProps = ButtonSharedProps & {
   /**
    * The style determines the color of the button and signals intent.
-	 *
    * @see https://discord.com/developers/docs/interactions/message-components#button-object-button-styles
    */
   style?: "primary" | "secondary" | "success" | "danger"
 
-	/** Happens when a user clicks the button. */
+  /**
+   * Happens when a user clicks the button.
+   */
   onClick: (event: ButtonClickEvent) => void
 }
 
-/** @category Button */
+/**
+ * @category Button
+ */
 export type ButtonClickEvent = ComponentEvent
 
-/** @category Button */
+/**
+ * @category Button
+ */
 export function Button(props: ButtonProps) {
   return (
-		<ReacordElement props={props} createNode={() => new ButtonNode(props)}>
+    <ReacordElement props={props} createNode={() => new ButtonNode(props)} />
-			<ReacordElement props={{}} createNode={() => new ButtonLabelNode({})}>
-				{props.label}
-			</ReacordElement>
-		</ReacordElement>
   )
 }
 
 class ButtonNode extends Node<ButtonProps> {
-	private customId = randomUUID()
+  private customId = nanoid()
-
-	// this has text children, but buttons themselves shouldn't yield text
-	// eslint-disable-next-line @typescript-eslint/class-literal-property-style
-	override get text() {
-		return ""
-	}
 
   override modifyMessageOptions(options: MessageOptions): void {
     getNextActionRow(options).push({
@@ -50,7 +48,7 @@ class ButtonNode extends Node<ButtonProps> {
       style: this.props.style ?? "secondary",
       disabled: this.props.disabled,
       emoji: this.props.emoji,
-			label: this.children.findType(ButtonLabelNode)?.text,
+      label: this.props.label,
     })
   }
 
@@ -65,5 +63,3 @@ class ButtonNode extends Node<ButtonProps> {
     return false
   }
 }
-
-class ButtonLabelNode extends Node<Record<string, never>> {}

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

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

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

@@ -1,28 +1,27 @@
-import type { ReactNode } from "react"
+import React from "react"
 import { ReacordElement } from "../../internal/element.js"
-import { Node } from "../../internal/node.js"
 import { EmbedChildNode } from "./embed-child.js"
 import type { EmbedOptions } from "./embed-options"
 
-/** @category Embed */
+/**
-export interface EmbedFieldProps {
+ * @category Embed
-	name: ReactNode
+ */
-	value?: ReactNode
+export type EmbedFieldProps = {
+  name: string
+  value?: string
   inline?: boolean
-	children?: ReactNode
+  children?: string
 }
 
-/** @category Embed */
+/**
+ * @category Embed
+ */
 export function EmbedField(props: EmbedFieldProps) {
   return (
-		<ReacordElement props={props} createNode={() => new EmbedFieldNode(props)}>
+    <ReacordElement
-			<ReacordElement props={{}} createNode={() => new FieldNameNode({})}>
+      props={props}
-				{props.name}
+      createNode={() => new EmbedFieldNode(props)}
-			</ReacordElement>
+    />
-			<ReacordElement props={{}} createNode={() => new FieldValueNode({})}>
-				{props.value ?? props.children}
-			</ReacordElement>
-		</ReacordElement>
   )
 }
 
@@ -30,12 +29,9 @@ class EmbedFieldNode extends EmbedChildNode<EmbedFieldProps> {
   override modifyEmbedOptions(options: EmbedOptions): void {
     options.fields ??= []
     options.fields.push({
-			name: this.children.findType(FieldNameNode)?.text ?? "",
+      name: this.props.name,
-			value: this.children.findType(FieldValueNode)?.text ?? "",
+      value: this.props.value ?? this.props.children ?? "",
       inline: this.props.inline,
     })
   }
 }
-
-class FieldNameNode extends Node<Record<string, never>> {}
-class FieldValueNode extends Node<Record<string, never>> {}

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

@@ -1,34 +1,34 @@
-import type { ReactNode } from "react"
+import React from "react"
 import { ReacordElement } from "../../internal/element.js"
-import { Node } from "../../internal/node.js"
 import { EmbedChildNode } from "./embed-child.js"
 import type { EmbedOptions } from "./embed-options"
 
-/** @category Embed */
+/**
-export interface EmbedFooterProps {
+ * @category Embed
-	text?: ReactNode
+ */
-	children?: ReactNode
+export type EmbedFooterProps = {
+  text?: string
+  children?: string
   iconUrl?: string
   timestamp?: string | number | Date
 }
 
-/** @category Embed */
+/**
-export function EmbedFooter({ text, children, ...props }: EmbedFooterProps) {
+ * @category Embed
+ */
+export function EmbedFooter(props: EmbedFooterProps) {
   return (
-		<ReacordElement props={props} createNode={() => new EmbedFooterNode(props)}>
+    <ReacordElement
-			<ReacordElement props={{}} createNode={() => new FooterTextNode({})}>
+      props={props}
-				{text ?? children}
+      createNode={() => new EmbedFooterNode(props)}
-			</ReacordElement>
+    />
-		</ReacordElement>
   )
 }
 
-class EmbedFooterNode extends EmbedChildNode<
+class EmbedFooterNode extends EmbedChildNode<EmbedFooterProps> {
-	Omit<EmbedFooterProps, "text" | "children">
-> {
   override modifyEmbedOptions(options: EmbedOptions): void {
     options.footer = {
-			text: this.children.findType(FooterTextNode)?.text ?? "",
+      text: this.props.text ?? this.props.children ?? "",
       icon_url: this.props.iconUrl,
     }
     options.timestamp = this.props.timestamp
@@ -36,5 +36,3 @@ class EmbedFooterNode extends EmbedChildNode<
       : undefined
   }
 }
-
-class FooterTextNode extends Node<Record<string, never>> {}

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

@@ -1,13 +1,18 @@
+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 interface EmbedImageProps {
+ * @category Embed
+ */
+export type EmbedImageProps = {
   url: string
 }
 
-/** @category Embed */
+/**
+ * @category Embed
+ */
 export function EmbedImage(props: EmbedImageProps) {
   return (
     <ReacordElement

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

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

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

@@ -1,13 +1,18 @@
+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 interface EmbedThumbnailProps {
+ * @category Embed
+ */
+export type EmbedThumbnailProps = {
   url: string
 }
 
-/** @category Embed */
+/**
+ * @category Embed
+ */
 export function EmbedThumbnail(props: EmbedThumbnailProps) {
   return (
     <ReacordElement

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,6 +1,6 @@
-import type { ReacordInstance } from "./instance.js"
-import { raise } from "@reacord/helpers/raise.js"
 import * as React from "react"
+import { raise } from "../../helpers/raise"
+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.mapleleaf.dev/guides/use-instance
+ * @see https://reacord.fly.dev/guides/use-instance
  */
 export function useInstance(): ReacordInstance {
   return (

packages/reacord/library/core/instance.ts

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

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

@@ -1,25 +1,21 @@
-import { safeJsonStringify } from "@reacord/helpers/json"
+/* eslint-disable class-methods-use-this */
-import { pick } from "@reacord/helpers/pick"
-import { pruneNullishValues } from "@reacord/helpers/prune-nullish-values"
-import { raise } from "@reacord/helpers/raise"
 import * as Discord from "discord.js"
 import type { ReactNode } from "react"
 import type { Except } from "type-fest"
+import { 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 {
+import type { Message, MessageOptions } from "../internal/message"
-	Message,
-	MessageButtonOptions,
-	MessageOptions,
-} from "../internal/message"
 import { ChannelMessageRenderer } from "../internal/renderers/channel-message-renderer"
 import { InteractionReplyRenderer } from "../internal/renderers/interaction-reply-renderer"
 import type {
-	ComponentEventChannel,
+  ChannelInfo,
-	ComponentEventGuild,
+  GuildInfo,
-	ComponentEventGuildMember,
+  GuildMemberInfo,
-	ComponentEventMessage,
+  MessageInfo,
-	ComponentEventReplyOptions,
+  UserInfo,
-	ComponentEventUser,
 } from "./component-event"
 import type { ReacordInstance } from "./instance"
 import type { ReacordConfig } from "./reacord"
@@ -27,18 +23,14 @@ import { Reacord } from "./reacord"
 
 /**
  * The Reacord adapter for Discord.js.
- *
  * @category Core
  */
 export class ReacordDiscordJs extends Reacord {
-	constructor(
+  constructor(private client: Discord.Client, config: ReacordConfig = {}) {
-		private client: Discord.Client,
-		config: ReacordConfig = {},
-	) {
     super(config)
 
     client.on("interactionCreate", (interaction) => {
-			if (interaction.isButton() || interaction.isStringSelectMenu()) {
+      if (interaction.isMessageComponent()) {
         this.handleComponentInteraction(
           this.createReacordComponentInteraction(interaction),
         )
@@ -48,116 +40,59 @@ export class ReacordDiscordJs extends Reacord {
 
   /**
    * Sends a message to a channel.
-	 *
+   * @see https://reacord.fly.dev/guides/sending-messages
-	 * @param target Discord channel object.
-	 * @param [options] Options for the channel message
-	 * @see https://reacord.mapleleaf.dev/guides/sending-messages
-	 * @see {@link Discord.MessageCreateOptions}
    */
-	public createChannelMessage(
+  override send(
-		target: Discord.ChannelResolvable,
+    channelId: string,
-		options: Discord.MessageCreateOptions = {},
-	): ReacordInstance {
-		return this.createInstance(
-			this.createChannelMessageRenderer(target, options),
-		)
-	}
-
-	/**
-	 * Replies to a command interaction by sending a message.
-	 *
-	 * @param interaction Discord command interaction object.
-	 * @param [options] Custom options for the interaction reply method.
-	 * @see https://reacord.mapleleaf.dev/guides/sending-messages
-	 * @see {@link Discord.InteractionReplyOptions}
-	 */
-	public createInteractionReply(
-		interaction: Discord.CommandInteraction,
-		options: Discord.InteractionReplyOptions = {},
-	): ReacordInstance {
-		return this.createInstance(
-			this.createInteractionReplyRenderer(interaction, options),
-		)
-	}
-
-	/**
-	 * Sends a message to a channel.
-	 *
-	 * @deprecated Use reacord.createChannelMessage() instead.
-	 * @see https://reacord.mapleleaf.dev/guides/sending-messages
-	 */
-	public send(
-		channel: Discord.ChannelResolvable,
     initialContent?: React.ReactNode,
   ): ReacordInstance {
     return this.createInstance(
-			this.createChannelMessageRenderer(channel, {}),
+      this.createChannelRenderer(channelId),
       initialContent,
     )
   }
 
   /**
    * Sends a message as a reply to a command interaction.
-	 *
+   * @see https://reacord.fly.dev/guides/sending-messages
-	 * @deprecated Use reacord.createInteractionReply() instead.
-	 * @see https://reacord.mapleleaf.dev/guides/sending-messages
    */
-	public reply(
+  override reply(
     interaction: Discord.CommandInteraction,
     initialContent?: React.ReactNode,
   ): ReacordInstance {
     return this.createInstance(
-			this.createInteractionReplyRenderer(interaction, {}),
+      this.createInteractionReplyRenderer(interaction),
       initialContent,
     )
   }
 
   /**
    * Sends an ephemeral message as a reply to a command interaction.
-	 *
+   * @see https://reacord.fly.dev/guides/sending-messages
-	 * @deprecated Use reacord.createInteractionReply(interaction, { ephemeral:
-	 *   true })
-	 * @see https://reacord.mapleleaf.dev/guides/sending-messages
    */
-	public ephemeralReply(
+  override ephemeralReply(
     interaction: Discord.CommandInteraction,
     initialContent?: React.ReactNode,
   ): ReacordInstance {
     return this.createInstance(
-			this.createInteractionReplyRenderer(interaction, {
+      this.createEphemeralInteractionReplyRenderer(interaction),
-				ephemeral: true,
-			}),
       initialContent,
     )
   }
 
-	private createChannelMessageRenderer(
+  private createChannelRenderer(channelId: string) {
-		channelResolvable: Discord.ChannelResolvable,
-		messageCreateOptions?: Discord.MessageCreateOptions,
-	) {
     return new ChannelMessageRenderer({
-			send: async (messageOptions) => {
+      send: async (options) => {
-				let channel = this.client.channels.resolve(channelResolvable)
+        const channel =
-				if (!channel && typeof channelResolvable === "string") {
+          this.client.channels.cache.get(channelId) ??
-					channel = await this.client.channels.fetch(channelResolvable)
+          (await this.client.channels.fetch(channelId)) ??
+          raise(`Channel ${channelId} not found`)
+
+        if (!channel.isText()) {
+          raise(`Channel ${channelId} is not a text channel`)
         }
 
-				if (!channel) {
+        const message = await channel.send(getDiscordMessageOptions(options))
-					const id =
-						typeof channelResolvable === "string"
-							? channelResolvable
-							: channelResolvable.id
-					raise(`Channel ${id} not found`)
-				}
-
-				if (!channel.isTextBased()) {
-					raise(`Channel ${channel.id} must be a text channel`)
-				}
-
-				const message = await channel.send({
-					...getDiscordMessageOptions(messageOptions),
-					...messageCreateOptions,
-				})
         return createReacordMessage(message)
       },
     })
@@ -167,25 +102,48 @@ export class ReacordDiscordJs extends Reacord {
     interaction:
       | Discord.CommandInteraction
       | Discord.MessageComponentInteraction,
-		interactionReplyOptions: Discord.InteractionReplyOptions,
   ) {
     return new InteractionReplyRenderer({
-			interactionId: interaction.id,
+      type: "command",
-			reply: async (messageOptions) => {
+      id: interaction.id,
+      reply: async (options) => {
         const message = await interaction.reply({
-					...getDiscordMessageOptions(messageOptions),
+          ...getDiscordMessageOptions(options),
-					...interactionReplyOptions,
           fetchReply: true,
         })
-				return createReacordMessage(message)
+        return createReacordMessage(message as Discord.Message)
       },
-			followUp: async (messageOptions) => {
+      followUp: async (options) => {
         const message = await interaction.followUp({
-					...getDiscordMessageOptions(messageOptions),
+          ...getDiscordMessageOptions(options),
-					...interactionReplyOptions,
           fetchReply: true,
         })
-				return createReacordMessage(message)
+        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()
       },
     })
   }
@@ -194,7 +152,7 @@ export class ReacordDiscordJs extends Reacord {
     interaction: Discord.MessageComponentInteraction,
   ): ComponentInteraction {
     // todo please dear god clean this up
-		const channel: ComponentEventChannel = interaction.channel
+    const channel: ChannelInfo = interaction.channel
       ? {
           ...pruneNullishValues(
             pick(interaction.channel, [
@@ -210,7 +168,7 @@ export class ReacordDiscordJs extends Reacord {
         }
       : raise("Non-channel interactions are not supported")
 
-		const message: ComponentEventMessage =
+    const message: MessageInfo =
       interaction.message instanceof Discord.Message
         ? {
             ...pick(interaction.message, [
@@ -228,12 +186,10 @@ export class ReacordDiscordJs extends Reacord {
               ? new Date(interaction.message.editedTimestamp).toISOString()
               : undefined,
             mentions: interaction.message.mentions.users.map((u) => u.id),
-						authorId: interaction.message.author.id,
-						mentionEveryone: interaction.message.mentions.everyone,
           }
         : raise("Message not found")
 
-		const member: ComponentEventGuildMember | undefined =
+    const member: GuildMemberInfo | undefined =
       interaction.member instanceof Discord.GuildMember
         ? {
             ...pruneNullishValues(
@@ -248,28 +204,26 @@ export class ReacordDiscordJs extends Reacord {
               ]),
             ),
             displayName: interaction.member.displayName,
-						roles: interaction.member.roles.cache.map((role) => role.id),
+            roles: [...interaction.member.roles.cache.map((role) => role.id)],
             joinedAt: interaction.member.joinedAt?.toISOString(),
             premiumSince: interaction.member.premiumSince?.toISOString(),
             communicationDisabledUntil:
               interaction.member.communicationDisabledUntil?.toISOString(),
-						color: interaction.member.displayColor,
-						displayAvatarUrl: interaction.member.displayAvatarURL(),
           }
         : undefined
 
-		const guild: ComponentEventGuild | undefined = interaction.guild
+    const guild: GuildInfo | undefined = interaction.guild
       ? {
           ...pruneNullishValues(pick(interaction.guild, ["id", "name"])),
           member: member ?? raise("unexpected: member is undefined"),
         }
       : undefined
 
-		const user: ComponentEventUser = {
+    const user: UserInfo = {
       ...pruneNullishValues(
         pick(interaction.user, ["id", "username", "discriminator", "tag"]),
       ),
-			avatarUrl: interaction.user.avatarURL(),
+      avatarUrl: interaction.user.avatarURL()!,
       accentColor: interaction.user.accentColor ?? undefined,
     }
 
@@ -277,11 +231,7 @@ export class ReacordDiscordJs extends Reacord {
       id: interaction.id,
       customId: interaction.customId,
       update: async (options: MessageOptions) => {
-				if (interaction.deferred || interaction.replied) {
-					await interaction.message.edit(getDiscordMessageOptions(options))
-				} else {
         await interaction.update(getDiscordMessageOptions(options))
-				}
       },
       deferUpdate: async () => {
         if (interaction.replied || interaction.deferred) return
@@ -292,14 +242,14 @@ export class ReacordDiscordJs extends Reacord {
           ...getDiscordMessageOptions(options),
           fetchReply: true,
         })
-				return createReacordMessage(message)
+        return createReacordMessage(message as Discord.Message)
       },
       followUp: async (options) => {
         const message = await interaction.followUp({
           ...getDiscordMessageOptions(options),
           fetchReply: true,
         })
-				return createReacordMessage(message)
+        return createReacordMessage(message as Discord.Message)
       },
       event: {
         channel,
@@ -307,18 +257,15 @@ export class ReacordDiscordJs extends Reacord {
         user,
         guild,
 
-				reply: (content?: ReactNode, options?: ComponentEventReplyOptions) =>
+        reply: (content?: ReactNode) =>
           this.createInstance(
-						this.createInteractionReplyRenderer(interaction, options ?? {}),
+            this.createInteractionReplyRenderer(interaction),
             content,
           ),
 
-				/** @deprecated Use event.reply(content, { ephemeral: true }) */
         ephemeralReply: (content: ReactNode) =>
           this.createInstance(
-						this.createInteractionReplyRenderer(interaction, {
+            this.createEphemeralInteractionReplyRenderer(interaction),
-							ephemeral: true,
-						}),
             content,
           ),
       },
@@ -331,7 +278,7 @@ export class ReacordDiscordJs extends Reacord {
       }
     }
 
-		if (interaction.isStringSelectMenu()) {
+    if (interaction.isSelectMenu()) {
       return {
         ...baseProps,
         type: "select",
@@ -351,61 +298,68 @@ function createReacordMessage(message: Discord.Message): Message {
     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 convertButtonStyleToEnum(style: MessageButtonOptions["style"]) {
+function createEphemeralReacordMessage(): Message {
-	const styleMap = {
+  return {
-		primary: Discord.ButtonStyle.Primary,
+    edit: () => {
-		secondary: Discord.ButtonStyle.Secondary,
+      console.warn("Ephemeral messages can't be edited")
-		success: Discord.ButtonStyle.Success,
+      return Promise.resolve()
-		danger: Discord.ButtonStyle.Danger,
+    },
-	} as const
+    disableComponents: () => {
-
+      console.warn("Ephemeral messages can't be edited")
-	return styleMap[style ?? "secondary"]
+      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) {
+function getDiscordMessageOptions(
-	const options = {
+  reacordOptions: MessageOptions,
-		content: reacordOptions.content || undefined,
+): 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: Discord.ComponentType.ActionRow,
+      type: "ACTION_ROW",
       components: row.map(
-				(component): Discord.MessageActionRowComponentData => {
+        (component): Discord.MessageActionRowComponentOptions => {
           if (component.type === "button") {
             return {
-							type: Discord.ComponentType.Button,
+              type: "BUTTON",
               customId: component.customId,
               label: component.label ?? "",
-							style: convertButtonStyleToEnum(component.style),
+              style: toUpper(component.style ?? "secondary"),
               disabled: component.disabled,
               emoji: component.emoji,
             }
           }
 
-					if (component.type === "link") {
-						return {
-							type: Discord.ComponentType.Button,
-							url: component.url,
-							label: component.label ?? "",
-							style: Discord.ButtonStyle.Link,
-							disabled: component.disabled,
-							emoji: component.emoji,
-						}
-					}
-
-					// future proofing
-					// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
           if (component.type === "select") {
             return {
               ...component,
-							type: Discord.ComponentType.SelectMenu,
+              type: "SELECT_MENU",
               options: component.options.map((option) => ({
                 ...option,
                 default: component.values?.includes(option.value),
@@ -413,16 +367,13 @@ function getDiscordMessageOptions(reacordOptions: MessageOptions) {
             }
           }
 
-					component satisfies never
+          raise(`Unsupported component type: ${component.type}`)
-					throw new Error(
-						`Invalid component type ${safeJsonStringify(component)}}`,
-					)
         },
       ),
     })),
   }
 
-	if (!options.content && !options.embeds.length) {
+  if (!options.content && !options.embeds?.length) {
     options.content = "_ _"
   }
 

packages/reacord/library/core/reacord.tsx

@@ -1,28 +1,35 @@
 import type { ReactNode } from "react"
-import type { ComponentInteraction } from "../internal/interaction.js"
+import React from "react"
+import type { ComponentInteraction } from "../internal/interaction"
 import { reconciler } from "../internal/reconciler.js"
-import type { Renderer } from "../internal/renderers/renderer.js"
+import type { Renderer } from "../internal/renderers/renderer"
-import { InstanceProvider } from "./instance-context.js"
+import type { ReacordInstance } from "./instance"
-import type { ReacordInstance } from "./instance.js"
+import { InstanceProvider } from "./instance-context"
 
-/** @category Core */
+/**
-export interface ReacordConfig {
+ * @category Core
+ */
+export type ReacordConfig = {
   /**
-	 * The max number of active instances. When this limit is exceeded, the oldest
+   * The max number of active instances.
-	 * instances will be disabled.
+   * 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
+ * The main Reacord class that other Reacord adapters should extend.
- * this directly if you're making [a custom adapter](/guides/custom-adapters).
+ * 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
@@ -34,22 +41,13 @@ export abstract class Reacord {
   }
 
   protected createInstance(renderer: Renderer, initialContent?: ReactNode) {
-		if (this.renderers.length > this.maxInstances && this.renderers[0]) {
+    if (this.renderers.length > this.maxInstances) {
-			this.deactivate(this.renderers[0])
+      this.deactivate(this.renderers[0]!)
     }
 
     this.renderers.push(renderer)
 
-		const container: unknown = reconciler.createContainer(
+    const container = reconciler.createContainer(renderer, 0, false, {})
-			renderer,
-			0,
-			null,
-			false,
-			null,
-			"reacord",
-			() => {},
-			null,
-		)
 
     const instance: ReacordInstance = {
       render: (content: ReactNode) => {
@@ -57,7 +55,6 @@ export abstract class Reacord {
           <InstanceProvider value={instance}>{content}</InstanceProvider>,
           container,
         )
-				return instance
       },
       deactivate: () => {
         this.deactivate(renderer)

packages/reacord/library/internal/channel.ts

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

packages/reacord/library/internal/container.ts

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

packages/reacord/library/internal/element.ts

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

packages/reacord/library/internal/interaction.ts

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

packages/reacord/library/internal/message.ts

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

packages/reacord/library/internal/node.ts

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

packages/reacord/library/internal/reconciler.ts

@@ -1,7 +1,6 @@
-import { raise } from "@reacord/helpers/raise.js"
 import type { HostConfig } from "react-reconciler"
 import ReactReconciler from "react-reconciler"
-import { DefaultEventPriority } from "react-reconciler/constants.js"
+import { raise } from "../../helpers/raise.js"
 import { Node } from "./node.js"
 import type { Renderer } from "./renderers/renderer"
 import { TextNode } from "./text-node.js"
@@ -21,6 +20,8 @@ const config: HostConfig<
   number, // TimeoutHandle,
   number // NoTimeout,
 > = {
+  // config
+  now: Date.now,
   supportsMutation: true,
   supportsPersistence: false,
   supportsHydration: false,
@@ -29,6 +30,7 @@ const config: HostConfig<
   cancelTimeout: global.clearTimeout,
   noTimeout: -1,
 
+  // eslint-disable-next-line unicorn/no-null
   getRootHostContext: () => null,
   getChildHostContext: (parentContext) => parentContext,
 
@@ -41,7 +43,7 @@ const config: HostConfig<
       raise(`Missing createNode function`)
     }
 
-		const node: unknown = props.createNode(props.props)
+    const node = props.createNode(props.props)
     if (!(node instanceof Node)) {
       raise(`createNode function did not return a Node`)
     }
@@ -50,11 +52,6 @@ const config: HostConfig<
   },
   createTextInstance: (text) => new TextNode(text),
   shouldSetTextContent: () => false,
-	detachDeletedInstance: (_instance) => {},
-	beforeActiveInstanceBlur: () => {},
-	afterActiveInstanceBlur: () => {},
-	getInstanceFromNode: (_node: unknown) => null,
-	getInstanceFromScope: (_scopeInstance: unknown) => null,
 
   clearContainer: (renderer) => {
     renderer.nodes.clear()
@@ -90,18 +87,16 @@ const config: HostConfig<
     node.props = newText
   },
 
+  // eslint-disable-next-line unicorn/no-null
   prepareForCommit: () => null,
   resetAfterCommit: (renderer) => {
     renderer.render()
   },
-	prepareScopeUpdate: (_scopeInstance: unknown, _instance: unknown) => {},
 
   preparePortalMount: () => raise("Portals are not supported"),
   getPublicInstance: () => raise("Refs are currently not supported"),
 
   finalizeInitialChildren: () => false,
-
-	getCurrentEventPriority: () => DefaultEventPriority,
 }
 
 export const reconciler = ReactReconciler(config)

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

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

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

@@ -1,9 +1,9 @@
+import { Subject } from "rxjs"
+import { concatMap } from "rxjs/operators"
 import { Container } from "../container.js"
 import type { ComponentInteraction } from "../interaction"
 import type { Message, MessageOptions } from "../message"
 import type { Node } from "../node.js"
-import { Subject } from "rxjs"
-import { concatMap } from "rxjs/operators"
 
 type UpdatePayload =
   | { action: "update" | "deactivate"; options: MessageOptions }
@@ -47,12 +47,14 @@ export abstract class Renderer {
   }
 
   handleComponentInteraction(interaction: ComponentInteraction) {
-		for (const node of this.nodes) {
-			if (node.handleComponentInteraction(interaction)) {
     this.componentInteraction = interaction
+
     setTimeout(() => {
       this.updates.next({ action: "deferUpdate", interaction })
     }, 500)
+
+    for (const node of this.nodes) {
+      if (node.handleComponentInteraction(interaction)) {
         return true
       }
     }
@@ -81,17 +83,7 @@ export abstract class Renderer {
 
     if (payload.action === "deactivate") {
       this.updateSubscription.unsubscribe()
-
+      await this.message?.disableComponents()
-			await this.message?.edit({
-				...payload.options,
-				actionRows: payload.options.actionRows.map((row) =>
-					row.map((component) => ({
-						...component,
-						disabled: true,
-					})),
-				),
-			})
-
       return
     }
 

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

@@ -5,8 +5,4 @@ export class TextNode extends Node<string> {
   override modifyMessageOptions(options: MessageOptions) {
     options.content = options.content + this.props
   }
-
-	override get text() {
-		return this.props
-	}
 }

packages/reacord/package.json

@@ -2,8 +2,9 @@
   "name": "reacord",
   "type": "module",
   "description": "Create interactive Discord messages using React.",
-  "version": "0.5.5",
+  "version": "0.3.4",
-  "homepage": "https://reacord.mapleleaf.dev",
+  "types": "./dist/main.d.ts",
+  "homepage": "https://reacord.fly.dev",
   "repository": "https://github.com/itsMapleLeaf/reacord.git",
   "changelog": "https://github.com/itsMapleLeaf/reacord/releases",
   "license": "MIT",
@@ -23,12 +24,10 @@
     "README.md",
     "LICENSE"
   ],
-  "types": "./dist/main.d.ts",
   "exports": {
     ".": {
       "import": "./dist/main.js",
-      "require": "./dist/main.cjs",
+      "require": "./dist/main.cjs"
-      "types": "./dist/main.d.ts"
     },
     "./package.json": {
       "import": "./package.json",
@@ -36,22 +35,24 @@
     }
   },
   "scripts": {
-    "build": "cpy ../../README.md ../../LICENSE . && tsup library/main.ts --target node18 --format cjs,esm --sourcemap --dts --dts-resolve",
+    "build": "tsup-node library/main.ts --target node16 --format cjs,esm --dts --sourcemap",
     "build-watch": "pnpm build -- --watch",
     "test": "vitest --coverage --no-watch",
     "test-dev": "vitest",
-    "test-manual": "nodemon --exec tsx --ext ts,tsx ./scripts/discordjs-manual-test.tsx",
+    "typecheck": "tsc --noEmit",
-    "typecheck": "tsc -b"
+    "playground": "nodemon --exec esmo --ext ts,tsx --inspect=5858 --enable-source-maps ./playground/main.tsx",
+    "release": "bash scripts/release.sh"
   },
   "dependencies": {
-    "@types/node": "^20.8.4",
+    "@types/node": "*",
-    "@types/react": "^18.2.27",
+    "@types/react": "*",
-    "@types/react-reconciler": "^0.28.5",
+    "@types/react-reconciler": "^0.26.4",
-    "react-reconciler": "^0.29.0",
+    "nanoid": "^3.1.31",
-    "rxjs": "^7.8.1"
+    "react-reconciler": "^0.26.2",
+    "rxjs": "^7.5.2"
   },
   "peerDependencies": {
-    "discord.js": "^14",
+    "discord.js": "^13.3",
     "react": ">=17"
   },
   "peerDependenciesMeta": {
@@ -60,20 +61,27 @@
     }
   },
   "devDependencies": {
-    "@reacord/helpers": "workspace:*",
+    "@types/lodash-es": "^4.17.5",
-    "@types/lodash-es": "^4.17.9",
+    "c8": "^7.11.0",
-    "c8": "^8.0.1",
+    "discord.js": "^13.5.1",
-    "cpy-cli": "^5.0.0",
+    "dotenv": "^11.0.0",
-    "discord.js": "^14.13.0",
+    "esbuild": "latest",
-    "dotenv": "^16.3.1",
+    "esbuild-jest": "^0.5.0",
+    "esmo": "^0.13.0",
     "lodash-es": "^4.17.21",
-    "nodemon": "^3.0.1",
+    "nodemon": "^2.0.15",
-    "prettier": "^3.0.3",
+    "prettier": "^2.5.1",
-    "pretty-ms": "^8.0.0",
+    "pretty-ms": "^7.0.1",
-    "react": "^18.2.0",
+    "react": "^17.0.2",
-    "tsup": "^7.2.0",
+    "release-it": "^14.12.1",
-    "tsx": "^3.13.0",
+    "tsup": "^5.11.11",
-    "type-fest": "^4.4.0"
+    "type-fest": "^2.9.0",
+    "typescript": "^4.5.4",
+    "vite": "^2.7.10",
+    "vitest": "^0.0.141"
+  },
+  "resolutions": {
+    "esbuild": "latest"
   },
   "release-it": {
     "git": {
@@ -83,8 +91,5 @@
       "release": true,
       "web": true
     }
-  },
-  "publishConfig": {
-    "access": "public"
   }
 }

packages/reacord/playground/command-handler.ts

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

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

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

@@ -0,0 +1,109 @@
+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/discordjs-manual-test.tsx

@@ -1,144 +0,0 @@
-import { raise } from "@reacord/helpers/raise.js"
-import {
-	Button,
-	Link,
-	Option,
-	ReacordDiscordJs,
-	Select,
-	useInstance,
-} from "../library/main.js"
-import type { TextChannel } from "discord.js"
-import { ChannelType, Client, IntentsBitField } from "discord.js"
-import "dotenv/config"
-import { kebabCase } from "lodash-es"
-import * as React from "react"
-import { useState } from "react"
-
-const client = new Client({ intents: IntentsBitField.Flags.Guilds })
-const reacord = new ReacordDiscordJs(client)
-
-await client.login(process.env.TEST_BOT_TOKEN)
-
-const guild = await client.guilds.fetch(
-	process.env.TEST_GUILD_ID ?? raise("TEST_GUILD_ID not defined"),
-)
-
-const category = await guild.channels.fetch(
-	process.env.TEST_CATEGORY_ID ?? raise("TEST_CATEGORY_ID not defined"),
-)
-if (category?.type !== ChannelType.GuildCategory) {
-	throw new Error(
-		`channel ${process.env.TEST_CATEGORY_ID} is not a guild category. received ${category?.type}`,
-	)
-}
-
-for (const [, channel] of category.children.cache) {
-	await channel.delete()
-}
-
-let prefix = 0
-const createTest = async (
-	name: string,
-	block: (channel: TextChannel) => unknown,
-) => {
-	prefix += 1
-	const channel = await category.children.create({
-		type: ChannelType.GuildText,
-		name: `${String(prefix).padStart(3, "0")}-${kebabCase(name)}`,
-	})
-	await block(channel)
-}
-
-await createTest("basic", (channel) => {
-	reacord.createChannelMessage(channel).render("Hello, world!")
-})
-
-await createTest("counter", (channel) => {
-	const Counter = () => {
-		const [count, setCount] = React.useState(0)
-		return (
-			<>
-				count: {count}
-				<Button
-					style="primary"
-					emoji="➕"
-					onClick={() => setCount(count + 1)}
-				/>
-				<Button
-					style="primary"
-					emoji="➖"
-					onClick={() => setCount(count - 1)}
-				/>
-				<Button label="reset" onClick={() => setCount(0)} />
-			</>
-		)
-	}
-	reacord.createChannelMessage(channel).render(<Counter />)
-})
-
-await createTest("select", (channel) => {
-	function FruitSelect({ onConfirm }: { onConfirm: (choice: string) => void }) {
-		const [value, setValue] = useState<string>()
-
-		return (
-			<>
-				<Select
-					placeholder="choose a fruit"
-					value={value}
-					onChangeValue={setValue}
-				>
-					<Option value="🍎" emoji="🍎" label="apple" description="it red" />
-					<Option value="🍌" emoji="🍌" label="banana" description="bnanbna" />
-					<Option value="🍒" emoji="🍒" label="cherry" description="heh" />
-				</Select>
-				<Button
-					label="confirm"
-					disabled={value == undefined}
-					onClick={() => {
-						if (value) onConfirm(value)
-					}}
-				/>
-			</>
-		)
-	}
-
-	const instance = reacord.createChannelMessage(channel).render(
-		<FruitSelect
-			onConfirm={(value) => {
-				instance.render(`you chose ${value}`)
-				instance.deactivate()
-			}}
-		/>,
-	)
-})
-
-await createTest("ephemeral button", (channel) => {
-	reacord.createChannelMessage(channel).render(
-		<>
-			<Button
-				label="public clic"
-				onClick={(event) =>
-					event.reply(`${event.guild?.member.displayName} clic`)
-				}
-			/>
-			<Button
-				label="clic"
-				onClick={(event) => event.reply("you clic", { ephemeral: true })}
-			/>
-		</>,
-	)
-})
-
-await createTest("delete this", (channel) => {
-	function DeleteThis() {
-		const instance = useInstance()
-		return <Button label="delete this" onClick={() => instance.destroy()} />
-	}
-	reacord.createChannelMessage(channel).render(<DeleteThis />)
-})
-
-await createTest("link", (channel) => {
-	reacord
-		.createChannelMessage(channel)
-		.render(<Link label="hi" url="https://mapleleaf.dev" />)
-})

packages/reacord/scripts/release.sh

@@ -0,0 +1,4 @@
+pnpm build
+cp ../../README.md .
+cp ../../LICENSE .
+pnpx release-it

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

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

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

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

packages/reacord/test/embed.test.tsx

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

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

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

packages/reacord/test/link.test.tsx

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

packages/reacord/test/reacord.test.tsx

@@ -1,14 +1,13 @@
-import { Button, Embed, EmbedField, EmbedTitle } from "../library/main"
-import { ReacordTester } from "./test-adapter"
 import * as React from "react"
 import { test } from "vitest"
+import { Button, Embed, EmbedField, EmbedTitle } from "../library/main"
+import { ReacordTester } from "./test-adapter"
 
 test("rendering behavior", async () => {
   const tester = new ReacordTester()
 
-	const reply = tester
+  const reply = tester.reply()
-		.createInteractionReply()
+  reply.render(<KitchenSinkCounter onDeactivate={() => reply.deactivate()} />)
-		.render(<KitchenSinkCounter onDeactivate={() => reply.deactivate()} />)
 
   await tester.assertMessages([
     {
@@ -36,7 +35,7 @@ test("rendering behavior", async () => {
     },
   ])
 
-	await tester.findButtonByLabel("show embed").click()
+  tester.findButtonByLabel("show embed").click()
   await tester.assertMessages([
     {
       content: "count: 0",
@@ -63,7 +62,7 @@ test("rendering behavior", async () => {
     },
   ])
 
-	await tester.findButtonByLabel("clicc").click()
+  tester.findButtonByLabel("clicc").click()
   await tester.assertMessages([
     {
       content: "count: 1",
@@ -95,7 +94,7 @@ test("rendering behavior", async () => {
     },
   ])
 
-	await tester.findButtonByLabel("clicc").click()
+  tester.findButtonByLabel("clicc").click()
   await tester.assertMessages([
     {
       content: "count: 2",
@@ -127,7 +126,7 @@ test("rendering behavior", async () => {
     },
   ])
 
-	await tester.findButtonByLabel("hide embed").click()
+  tester.findButtonByLabel("hide embed").click()
   await tester.assertMessages([
     {
       content: "count: 2",
@@ -154,7 +153,7 @@ test("rendering behavior", async () => {
     },
   ])
 
-	await tester.findButtonByLabel("clicc").click()
+  tester.findButtonByLabel("clicc").click()
   await tester.assertMessages([
     {
       content: "count: 3",
@@ -181,7 +180,7 @@ test("rendering behavior", async () => {
     },
   ])
 
-	await tester.findButtonByLabel("deactivate").click()
+  tester.findButtonByLabel("deactivate").click()
   await tester.assertMessages([
     {
       content: "count: 3",
@@ -211,7 +210,7 @@ test("rendering behavior", async () => {
     },
   ])
 
-	await tester.findButtonByLabel("clicc").click()
+  tester.findButtonByLabel("clicc").click()
   await tester.assertMessages([
     {
       content: "count: 3",
@@ -245,7 +244,8 @@ test("rendering behavior", async () => {
 test("delete", async () => {
   const tester = new ReacordTester()
 
-	const reply = tester.createInteractionReply().render(
+  const reply = tester.reply()
+  reply.render(
     <>
       some text
       <Embed>some embed</Embed>

packages/reacord/test/select.test.tsx

@@ -1,11 +1,11 @@
-import { useState } from "react"
+import React, { useState } from "react"
-import { expect, test, vi } from "vitest"
+import { expect, fn, test } from "vitest"
 import { Button, Option, Select } from "../library/main"
 import { ReacordTester } from "./test-adapter"
 
 test("single select", async () => {
   const tester = new ReacordTester()
-	const onSelect = vi.fn()
+  const onSelect = fn()
 
   function TestSelect() {
     const [value, setValue] = useState<string>()
@@ -53,27 +53,29 @@ test("single select", async () => {
     ])
   }
 
-	tester.createInteractionReply().render(<TestSelect />)
+  const reply = tester.reply()
+
+  reply.render(<TestSelect />)
   await assertSelect([])
   expect(onSelect).toHaveBeenCalledTimes(0)
 
-	await tester.findSelectByPlaceholder("choose one").select("2")
+  tester.findSelectByPlaceholder("choose one").select("2")
   await assertSelect(["2"])
   expect(onSelect).toHaveBeenCalledWith(
     expect.objectContaining({ values: ["2"] }),
   )
 
-	await tester.findButtonByLabel("disable").click()
+  tester.findButtonByLabel("disable").click()
   await assertSelect(["2"], true)
 
-	await tester.findSelectByPlaceholder("choose one").select("1")
+  tester.findSelectByPlaceholder("choose one").select("1")
   await assertSelect(["2"], true)
   expect(onSelect).toHaveBeenCalledTimes(1)
 })
 
 test("multiple select", async () => {
   const tester = new ReacordTester()
-	const onSelect = vi.fn()
+  const onSelect = fn()
 
   function TestSelect() {
     const [values, setValues] = useState<string[]>([])
@@ -117,35 +119,33 @@ test("multiple select", async () => {
     ])
   }
 
-	tester.createInteractionReply().render(<TestSelect />)
+  const reply = tester.reply()
+
+  reply.render(<TestSelect />)
   await assertSelect([])
   expect(onSelect).toHaveBeenCalledTimes(0)
 
-	await tester.findSelectByPlaceholder("select").select("1", "3")
+  tester.findSelectByPlaceholder("select").select("1", "3")
   await assertSelect(expect.arrayContaining(["1", "3"]) as unknown as string[])
   expect(onSelect).toHaveBeenCalledWith(
-		expect.objectContaining({
+    expect.objectContaining({ values: expect.arrayContaining(["1", "3"]) }),
-			values: expect.arrayContaining(["1", "3"]) as unknown,
-		}),
   )
 
-	await tester.findSelectByPlaceholder("select").select("2")
+  tester.findSelectByPlaceholder("select").select("2")
   await assertSelect(expect.arrayContaining(["2"]) as unknown as string[])
   expect(onSelect).toHaveBeenCalledWith(
-		expect.objectContaining({
+    expect.objectContaining({ values: expect.arrayContaining(["2"]) }),
-			values: expect.arrayContaining(["2"]) as unknown,
-		}),
   )
 
-	await tester.findSelectByPlaceholder("select").select()
+  tester.findSelectByPlaceholder("select").select()
   await assertSelect([])
   expect(onSelect).toHaveBeenCalledWith(expect.objectContaining({ values: [] }))
 })
 
 test("optional onSelect + unknown value", async () => {
   const tester = new ReacordTester()
-	tester.createInteractionReply().render(<Select placeholder="select" />)
+  tester.reply().render(<Select placeholder="select" />)
-	await tester.findSelectByPlaceholder("select").select("something")
+  tester.findSelectByPlaceholder("select").select("something")
   await tester.assertMessages([
     {
       content: "",

packages/reacord/test/test-adapter.ts

@@ -1,18 +1,19 @@
-import { logPretty } from "@reacord/helpers/log-pretty"
+/* eslint-disable class-methods-use-this */
-import { omit } from "@reacord/helpers/omit"
+/* eslint-disable require-await */
-import { pruneNullishValues } from "@reacord/helpers/prune-nullish-values"
+import { nanoid } from "nanoid"
-import { raise } from "@reacord/helpers/raise"
+import { nextTick } from "node:process"
-import { waitFor } from "@reacord/helpers/wait-for"
+import { promisify } from "node:util"
-import { randomUUID } from "node:crypto"
-import { setTimeout } from "node:timers/promises"
 import type { ReactNode } from "react"
 import { expect } from "vitest"
+import { logPretty } from "../helpers/log-pretty"
+import { omit } from "../helpers/omit"
+import { pruneNullishValues } from "../helpers/prune-nullish-values"
+import { raise } from "../helpers/raise"
 import type {
-	ComponentEventChannel,
+  ChannelInfo,
-	ComponentEventGuild,
+  GuildInfo,
-	ComponentEventMessage,
+  MessageInfo,
-	ComponentEventReplyOptions,
+  UserInfo,
-	ComponentEventUser,
 } from "../library/core/component-event"
 import type { ButtonClickEvent } from "../library/core/components/button"
 import type { SelectChangeEvent } from "../library/core/components/select"
@@ -22,18 +23,25 @@ import type { Channel } from "../library/internal/channel"
 import { Container } from "../library/internal/container"
 import type {
   ButtonInteraction,
+  CommandInteraction,
   SelectInteraction,
 } from "../library/internal/interaction"
-import type { Message, MessageOptions } from "../library/internal/message"
+import type {
+  Message,
+  MessageButtonOptions,
+  MessageOptions,
+  MessageSelectOptions,
+} from "../library/internal/message"
 import { ChannelMessageRenderer } from "../library/internal/renderers/channel-message-renderer"
-import {
+import { InteractionReplyRenderer } from "../library/internal/renderers/interaction-reply-renderer"
-	InteractionReplyRenderer,
+
-	type InteractionReplyRendererImplementation,
+const nextTickPromise = promisify(nextTick)
-} from "../library/internal/renderers/interaction-reply-renderer"
 
 export type MessageSample = ReturnType<ReacordTester["sampleMessages"]>[0]
 
-/** A Record adapter for automated tests. WIP */
+/**
+ * A Record adapter for automated tests. WIP
+ */
 export class ReacordTester extends Reacord {
   private messageContainer = new Container<TestMessage>()
 
@@ -45,36 +53,33 @@ export class ReacordTester extends Reacord {
     return [...this.messageContainer]
   }
 
-	public createChannelMessage(): ReacordInstance {
+  override send(initialContent?: ReactNode): ReacordInstance {
     return this.createInstance(
       new ChannelMessageRenderer(new TestChannel(this.messageContainer)),
+      initialContent,
     )
   }
 
-	public createMessageReply(): ReacordInstance {
+  override reply(initialContent?: ReactNode): ReacordInstance {
-		return this.createInstance(
-			new ChannelMessageRenderer(new TestChannel(this.messageContainer)),
-		)
-	}
-
-	public createInteractionReply(
-		_options?: ComponentEventReplyOptions,
-	): ReacordInstance {
     return this.createInstance(
       new InteractionReplyRenderer(
         new TestCommandInteraction(this.messageContainer),
       ),
+      initialContent,
     )
   }
 
-	assertMessages(expected: MessageSample[]) {
+  override ephemeralReply(initialContent?: ReactNode): ReacordInstance {
-		return waitFor(() => {
+    return this.reply(initialContent)
+  }
+
+  async assertMessages(expected: MessageSample[]) {
+    await nextTickPromise()
     expect(this.sampleMessages()).toEqual(expected)
-		})
   }
 
   async assertRender(content: ReactNode, expected: MessageSample[]) {
-		const instance = this.createInteractionReply()
+    const instance = this.reply()
     instance.render(content)
     await this.assertMessages(expected)
     instance.destroy()
@@ -103,59 +108,58 @@ export class ReacordTester extends Reacord {
   }
 
   findButtonByLabel(label: string) {
-		return {
+    for (const message of this.messageContainer) {
-			click: () => {
+      for (const component of message.options.actionRows.flat()) {
-				return waitFor(() => {
-					for (const [component, message] of this.eachComponent()) {
         if (component.type === "button" && component.label === label) {
-							this.handleComponentInteraction(
+          return this.createButtonActions(component, message)
-								new TestButtonInteraction(component.customId, message, this),
+        }
-							)
-							return
       }
     }
     raise(`Couldn't find button with label "${label}"`)
-				})
-			},
-		}
   }
 
   findSelectByPlaceholder(placeholder: string) {
-		return {
+    for (const message of this.messageContainer) {
-			select: (...values: string[]) => {
+      for (const component of message.options.actionRows.flat()) {
-				return waitFor(() => {
-					for (const [component, message] of this.eachComponent()) {
         if (
           component.type === "select" &&
           component.placeholder === placeholder
         ) {
-							this.handleComponentInteraction(
+          return this.createSelectActions(component, message)
-								new TestSelectInteraction(
+        }
-									component.customId,
-									message,
-									values,
-									this,
-								),
-							)
-							return
       }
     }
     raise(`Couldn't find select with placeholder "${placeholder}"`)
-				})
-			},
-		}
   }
 
   createMessage(options: MessageOptions) {
     return new TestMessage(options, this.messageContainer)
   }
 
-	private *eachComponent() {
+  private createButtonActions(
-		for (const message of this.messageContainer) {
+    button: MessageButtonOptions,
-			for (const component of message.options.actionRows.flat()) {
+    message: TestMessage,
-				yield [component, message] as const
+  ) {
+    return {
+      click: () => {
+        this.handleComponentInteraction(
+          new TestButtonInteraction(button.customId, message, this),
+        )
+      },
     }
   }
+
+  private createSelectActions(
+    component: MessageSelectOptions,
+    message: TestMessage,
+  ) {
+    return {
+      select: (...values: string[]) => {
+        this.handleComponentInteraction(
+          new TestSelectInteraction(component.customId, message, values, this),
+        )
+      },
+    }
   }
 }
 
@@ -171,30 +175,43 @@ class TestMessage implements Message {
     this.options = options
   }
 
+  async disableComponents(): Promise<void> {
+    for (const row of this.options.actionRows) {
+      for (const action of row) {
+        if (action.type === "button") {
+          action.disabled = true
+        }
+      }
+    }
+  }
+
   async delete(): Promise<void> {
     this.container.remove(this)
   }
 }
 
-class TestCommandInteraction implements InteractionReplyRendererImplementation {
+class TestCommandInteraction implements CommandInteraction {
-	readonly interactionId = "test-command-interaction"
+  readonly type = "command"
+  readonly id = "test-command-interaction"
   readonly channelId = "test-channel-id"
 
   constructor(private messageContainer: Container<TestMessage>) {}
 
-	async reply(messageOptions: MessageOptions): Promise<Message> {
+  reply(messageOptions: MessageOptions): Promise<Message> {
-		await setTimeout()
+    return Promise.resolve(
-		return new TestMessage(messageOptions, this.messageContainer)
+      new TestMessage(messageOptions, this.messageContainer),
+    )
   }
 
-	async followUp(messageOptions: MessageOptions): Promise<Message> {
+  followUp(messageOptions: MessageOptions): Promise<Message> {
-		await setTimeout()
+    return Promise.resolve(
-		return new TestMessage(messageOptions, this.messageContainer)
+      new TestMessage(messageOptions, this.messageContainer),
+    )
   }
 }
 
 class TestInteraction {
-	readonly id = randomUUID()
+  readonly id = nanoid()
   readonly channelId = "test-channel-id"
 
   constructor(
@@ -252,19 +269,17 @@ class TestSelectInteraction
 class TestComponentEvent {
   constructor(private tester: ReacordTester) {}
 
-	message: ComponentEventMessage = {} as ComponentEventMessage // todo
+  message: MessageInfo = {} as any // todo
-	channel: ComponentEventChannel = {} as ComponentEventChannel // todo
+  channel: ChannelInfo = {} as any // todo
-	user: ComponentEventUser = {} as ComponentEventUser // todo
+  user: UserInfo = {} as any // todo
-	guild: ComponentEventGuild = {} as ComponentEventGuild // todo
+  guild: GuildInfo = {} as any // todo
 
   reply(content?: ReactNode): ReacordInstance {
-		return this.tester.createInteractionReply().render(content)
+    return this.tester.reply(content)
   }
 
   ephemeralReply(content?: ReactNode): ReacordInstance {
-		return this.tester
+    return this.tester.ephemeralReply(content)
-			.createInteractionReply({ ephemeral: true })
-			.render(content)
   }
 }
 
@@ -276,10 +291,7 @@ class TestSelectChangeEvent
   extends TestComponentEvent
   implements SelectChangeEvent
 {
-	constructor(
+  constructor(readonly values: string[], tester: ReacordTester) {
-		readonly values: string[],
-		tester: ReacordTester,
-	) {
     super(tester)
   }
 }