Merge pull request #31 from itsMapleLeaf/changeset-release/main

...only when an interaction was handled

.eslintrc.cjs

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

.github/workflows/main.yml

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

.github/workflows/release.yml

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

.github/workflows/tests.yml

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

.gitignore

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

.prettierignore

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

.prettierrc.cjs

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

package.json

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

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

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

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

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

packages/helpers/is-instance-of.ts

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

packages/helpers/is-object.ts

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

packages/helpers/json.ts

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

packages/helpers/omit.test.ts

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

packages/helpers/omit.test.types.ts

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

packages/helpers/omit.ts

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

packages/helpers/package.json

@@ -2,10 +2,13 @@
   "name": "@reacord/helpers",
   "version": "0.0.0",
   "private": true,
+  "scripts": {
+    "typecheck": "tsc -b"
+  },
   "dependencies": {
-    "@types/lodash-es": "^4.17.6",
+    "@types/lodash-es": "^4.17.9",
     "lodash-es": "^4.17.21",
-    "type-fest": "^2.17.0",
+    "type-fest": "^4.3.2",
-    "vitest": "^0.18.1"
+    "vitest": "^0.34.5"
   }
 }

packages/helpers/pick.ts

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

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

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

packages/helpers/prune-nullish-values.ts

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

packages/helpers/reject-after.ts

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

packages/helpers/retry-with-timeout.ts

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

packages/helpers/tsconfig.json

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

packages/helpers/types.test.types.ts

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

packages/helpers/types.ts

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

packages/helpers/wait-for.ts

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

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

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

packages/reacord/CHANGELOG.md

@@ -1,5 +1,14 @@
 # reacord
 
+## 0.5.3
+
+### Patch Changes
+
+- 104b175: ensure message is edited from arbitrary component updates
+- 156cf90: fix interaction handling
+- 0bab505: fix DJS deprecation warning on isStringSelectMenu
+- d76f316: ensure action rows handle child interactions
+
 ## 0.5.2
 
 ### Patch Changes

packages/reacord/env.d.ts

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

packages/reacord/library/core/instance.ts

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

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

@@ -1,4 +1,4 @@
-/* eslint-disable class-methods-use-this */
+import { safeJsonStringify } from "@reacord/helpers/json"
 import { pick } from "@reacord/helpers/pick"
 import { pruneNullishValues } from "@reacord/helpers/prune-nullish-values"
 import { raise } from "@reacord/helpers/raise"
@@ -26,14 +26,18 @@ import { Reacord } from "./reacord"
 
 /**
  * The Reacord adapter for Discord.js.
+ *
  * @category Core
  */
 export class ReacordDiscordJs extends Reacord {
-  constructor(private client: Discord.Client, config: ReacordConfig = {}) {
+	constructor(
+		private client: Discord.Client,
+		config: ReacordConfig = {},
+	) {
 		super(config)
 
 		client.on("interactionCreate", (interaction) => {
-      if (interaction.isButton() || interaction.isSelectMenu()) {
+			if (interaction.isButton() || interaction.isStringSelectMenu()) {
 				this.handleComponentInteraction(
 					this.createReacordComponentInteraction(interaction),
 				)
@@ -43,6 +47,7 @@ export class ReacordDiscordJs extends Reacord {
 
 	/**
 	 * Sends a message to a channel.
+	 *
 	 * @see https://reacord.mapleleaf.dev/guides/sending-messages
 	 */
 	override send(
@@ -57,6 +62,7 @@ export class ReacordDiscordJs extends Reacord {
 
 	/**
 	 * Sends a message as a reply to a command interaction.
+	 *
 	 * @see https://reacord.mapleleaf.dev/guides/sending-messages
 	 */
 	override reply(
@@ -71,6 +77,7 @@ export class ReacordDiscordJs extends Reacord {
 
 	/**
 	 * Sends an ephemeral message as a reply to a command interaction.
+	 *
 	 * @see https://reacord.mapleleaf.dev/guides/sending-messages
 	 */
 	override ephemeralReply(
@@ -114,14 +121,14 @@ export class ReacordDiscordJs extends Reacord {
 					...getDiscordMessageOptions(options),
 					fetchReply: true,
 				})
-        return createReacordMessage(message as Discord.Message)
+				return createReacordMessage(message)
 			},
 			followUp: async (options) => {
 				const message = await interaction.followUp({
 					...getDiscordMessageOptions(options),
 					fetchReply: true,
 				})
-        return createReacordMessage(message as Discord.Message)
+				return createReacordMessage(message)
 			},
 		})
 	}
@@ -189,6 +196,8 @@ 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")
 
@@ -212,6 +221,8 @@ export class ReacordDiscordJs extends Reacord {
 						premiumSince: interaction.member.premiumSince?.toISOString(),
 						communicationDisabledUntil:
 							interaction.member.communicationDisabledUntil?.toISOString(),
+						color: interaction.member.displayColor,
+						displayAvatarUrl: interaction.member.displayAvatarURL(),
 				  }
 				: undefined
 
@@ -226,7 +237,7 @@ export class ReacordDiscordJs extends Reacord {
 			...pruneNullishValues(
 				pick(interaction.user, ["id", "username", "discriminator", "tag"]),
 			),
-      avatarUrl: interaction.user.avatarURL()!,
+			avatarUrl: interaction.user.avatarURL(),
 			accentColor: interaction.user.accentColor ?? undefined,
 		}
 
@@ -234,7 +245,11 @@ export class ReacordDiscordJs extends Reacord {
 			id: interaction.id,
 			customId: interaction.customId,
 			update: async (options: MessageOptions) => {
+				if (interaction.deferred || interaction.replied) {
+					await interaction.message.edit(getDiscordMessageOptions(options))
+				} else {
 					await interaction.update(getDiscordMessageOptions(options))
+				}
 			},
 			deferUpdate: async () => {
 				if (interaction.replied || interaction.deferred) return
@@ -245,14 +260,14 @@ export class ReacordDiscordJs extends Reacord {
 					...getDiscordMessageOptions(options),
 					fetchReply: true,
 				})
-        return createReacordMessage(message as Discord.Message)
+				return createReacordMessage(message)
 			},
 			followUp: async (options) => {
 				const message = await interaction.followUp({
 					...getDiscordMessageOptions(options),
 					fetchReply: true,
 				})
-        return createReacordMessage(message as Discord.Message)
+				return createReacordMessage(message)
 			},
 			event: {
 				channel,
@@ -281,7 +296,7 @@ export class ReacordDiscordJs extends Reacord {
 			}
 		}
 
-    if (interaction.isSelectMenu()) {
+		if (interaction.isStringSelectMenu()) {
 			return {
 				...baseProps,
 				type: "select",
@@ -335,8 +350,7 @@ function convertButtonStyleToEnum(style: MessageButtonOptions["style"]) {
 // and also handle some edge cases, e.g. empty messages
 function getDiscordMessageOptions(reacordOptions: MessageOptions) {
 	const options = {
-    // eslint-disable-next-line unicorn/no-null
+		content: reacordOptions.content || undefined,
-    content: reacordOptions.content || null,
 		embeds: reacordOptions.embeds,
 		components: reacordOptions.actionRows.map((row) => ({
 			type: Discord.ComponentType.ActionRow,
@@ -364,6 +378,8 @@ function getDiscordMessageOptions(reacordOptions: MessageOptions) {
 						}
 					}
 
+					// future proofing
+					// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
 					if (component.type === "select") {
 						return {
 							...component,
@@ -375,13 +391,16 @@ function getDiscordMessageOptions(reacordOptions: MessageOptions) {
 						}
 					}
 
-          raise(`Unsupported component type: ${(component as any).type}`)
+					component satisfies never
+					throw new Error(
+						`Invalid component type ${safeJsonStringify(component)}}`,
+					)
 				},
 			),
 		})),
 	}
 
-  if (!options.content && !options.embeds?.length) {
+	if (!options.content && !options.embeds.length) {
 		options.content = "_ _"
 	}
 

packages/reacord/library/core/reacord.tsx

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

packages/reacord/library/internal/channel.ts

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

packages/reacord/library/internal/container.ts

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

packages/reacord/library/internal/element.ts

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

packages/reacord/library/internal/interaction.ts

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

packages/reacord/library/internal/message.ts

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

packages/reacord/library/internal/node.ts

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

packages/reacord/library/internal/reconciler.ts

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

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

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

packages/reacord/package.json

@@ -2,7 +2,7 @@
   "name": "reacord",
   "type": "module",
   "description": "Create interactive Discord messages using React.",
-  "version": "0.5.2",
+  "version": "0.5.3",
   "types": "./dist/main.d.ts",
   "homepage": "https://reacord.mapleleaf.dev",
   "repository": "https://github.com/itsMapleLeaf/reacord.git",
@@ -20,6 +20,7 @@
     "reacord"
   ],
   "files": [
+    "library",
     "dist",
     "README.md",
     "LICENSE"
@@ -28,7 +29,7 @@
     ".": {
       "import": "./dist/main.js",
       "require": "./dist/main.cjs",
-      "types": "./dist/main.d.ts"
+      "types": "./library/main.ts"
     },
     "./package.json": {
       "import": "./package.json",
@@ -36,19 +37,19 @@
     }
   },
   "scripts": {
-    "build": "cp ../../README.md . && cp ../../LICENSE . && tsup library/main.ts --target node16 --format cjs,esm --dts --sourcemap",
+    "build": "cpy ../../README.md ../../LICENSE . && tsup library/main.ts --target node16 --format cjs,esm --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"
   },
   "dependencies": {
-    "@types/node": "*",
+    "@types/node": "^20.7.0",
-    "@types/react": "*",
+    "@types/react": "^18.2.23",
-    "@types/react-reconciler": "^0.28.0",
+    "@types/react-reconciler": "^0.28.5",
     "react-reconciler": "^0.29.0",
-    "rxjs": "^7.5.6"
+    "rxjs": "^7.8.1"
   },
   "peerDependencies": {
     "discord.js": "^14",
@@ -61,23 +62,19 @@
   },
   "devDependencies": {
     "@reacord/helpers": "workspace:*",
-    "@types/lodash-es": "^4.17.6",
+    "@types/lodash-es": "^4.17.9",
-    "c8": "^7.12.0",
+    "c8": "^8.0.1",
-    "discord.js": "^14.0.3",
+    "cpy-cli": "^5.0.0",
-    "dotenv": "^16.0.1",
+    "discord.js": "^14.13.0",
+    "dotenv": "^16.3.1",
     "lodash-es": "^4.17.21",
-    "nodemon": "^2.0.19",
+    "nodemon": "^3.0.1",
-    "prettier": "^2.7.1",
+    "prettier": "^3.0.3",
     "pretty-ms": "^8.0.0",
     "react": "^18.2.0",
-    "tsup": "^6.1.3",
+    "tsup": "^7.2.0",
-    "tsx": "^3.8.0",
+    "tsx": "^3.13.0",
-    "type-fest": "^2.17.0",
+    "type-fest": "^4.3.2"
-    "typescript": "^4.7.4",
-    "vitest": "^0.18.1"
-  },
-  "resolutions": {
-    "esbuild": "latest"
   },
   "release-it": {
     "git": {

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

@@ -1,9 +1,4 @@
-import type { TextChannel } from "discord.js"
+import { raise } from "@reacord/helpers/raise.js"
-import { ChannelType, Client, IntentsBitField } from "discord.js"
-import "dotenv/config"
-import { kebabCase } from "lodash-es"
-import * as React from "react"
-import { useState } from "react"
 import {
 	Button,
 	Link,
@@ -11,16 +6,26 @@ import {
 	ReacordDiscordJs,
 	Select,
 	useInstance,
-} from "../library/main"
+} from "../library/main.js"
+import type { TextChannel } from "discord.js"
+import { ChannelType, Client, IntentsBitField } from "discord.js"
+import "dotenv/config"
+import { kebabCase } from "lodash-es"
+import * as React from "react"
+import { useState } from "react"
 
 const client = new Client({ intents: IntentsBitField.Flags.Guilds })
 const reacord = new ReacordDiscordJs(client)
 
 await client.login(process.env.TEST_BOT_TOKEN)
 
-const guild = await client.guilds.fetch(process.env.TEST_GUILD_ID!)
+const guild = await client.guilds.fetch(
+	process.env.TEST_GUILD_ID ?? raise("TEST_GUILD_ID not defined"),
+)
 
-const category = await guild.channels.fetch(process.env.TEST_CATEGORY_ID!)
+const category = await guild.channels.fetch(
+	process.env.TEST_CATEGORY_ID ?? raise("TEST_CATEGORY_ID not defined"),
+)
 if (category?.type !== ChannelType.GuildCategory) {
 	throw new Error(
 		`channel ${process.env.TEST_CATEGORY_ID} is not a guild category. received ${category?.type}`,
@@ -34,7 +39,7 @@ for (const [, channel] of category.children.cache) {
 let prefix = 0
 const createTest = async (
 	name: string,
-  block: (channel: TextChannel) => void | Promise<unknown>,
+	block: (channel: TextChannel) => unknown,
 ) => {
 	prefix += 1
 	const channel = await category.children.create({

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

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

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

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

packages/reacord/test/embed.test.tsx

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

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

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

packages/reacord/test/link.test.tsx

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

packages/reacord/test/reacord.test.tsx

@@ -1,7 +1,7 @@
-import * as React from "react"
-import { test } from "vitest"
 import { Button, Embed, EmbedField, EmbedTitle } from "../library/main"
 import { ReacordTester } from "./test-adapter"
+import * as React from "react"
+import { test } from "vitest"
 
 test("rendering behavior", async () => {
 	const tester = new ReacordTester()

packages/reacord/test/select.test.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react"
+import { useState } from "react"
 import { expect, test, vi } from "vitest"
 import { Button, Option, Select } from "../library/main"
 import { ReacordTester } from "./test-adapter"
@@ -128,13 +128,17 @@ test("multiple select", async () => {
 	await tester.findSelectByPlaceholder("select").select("1", "3")
 	await assertSelect(expect.arrayContaining(["1", "3"]) as unknown as string[])
 	expect(onSelect).toHaveBeenCalledWith(
-    expect.objectContaining({ values: expect.arrayContaining(["1", "3"]) }),
+		expect.objectContaining({
+			values: expect.arrayContaining(["1", "3"]) as unknown,
+		}),
 	)
 
 	await tester.findSelectByPlaceholder("select").select("2")
 	await assertSelect(expect.arrayContaining(["2"]) as unknown as string[])
 	expect(onSelect).toHaveBeenCalledWith(
-    expect.objectContaining({ values: expect.arrayContaining(["2"]) }),
+		expect.objectContaining({
+			values: expect.arrayContaining(["2"]) as unknown,
+		}),
 	)
 
 	await tester.findSelectByPlaceholder("select").select()

packages/reacord/test/test-adapter.ts

@@ -1,5 +1,3 @@
-/* eslint-disable class-methods-use-this */
-/* eslint-disable require-await */
 import { logPretty } from "@reacord/helpers/log-pretty"
 import { omit } from "@reacord/helpers/omit"
 import { pruneNullishValues } from "@reacord/helpers/prune-nullish-values"
@@ -32,9 +30,7 @@ import { InteractionReplyRenderer } from "../library/internal/renderers/interact
 
 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>()
 
@@ -252,10 +248,10 @@ class TestSelectInteraction
 class TestComponentEvent {
 	constructor(private tester: ReacordTester) {}
 
-  message: MessageInfo = {} as any // todo
+	message: MessageInfo = {} as MessageInfo // todo
-  channel: ChannelInfo = {} as any // todo
+	channel: ChannelInfo = {} as ChannelInfo // todo
-  user: UserInfo = {} as any // todo
+	user: UserInfo = {} as UserInfo // todo
-  guild: GuildInfo = {} as any // todo
+	guild: GuildInfo = {} as GuildInfo // todo
 
 	reply(content?: ReactNode): ReacordInstance {
 		return this.tester.reply(content)
@@ -274,7 +270,10 @@ class TestSelectChangeEvent
 	extends TestComponentEvent
 	implements SelectChangeEvent
 {
-  constructor(readonly values: string[], tester: ReacordTester) {
+	constructor(
+		readonly values: string[],
+		tester: ReacordTester,
+	) {
 		super(tester)
 	}
 }

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

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

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

@@ -1,9 +1,8 @@
-import React from "react"
-import { describe, expect, it } from "vitest"
 import type { ReacordInstance } from "../library/main"
 import { Button, useInstance } from "../library/main"
 import type { MessageSample } from "./test-adapter"
 import { ReacordTester } from "./test-adapter"
+import { describe, expect, it } from "vitest"
 
 describe("useInstance", () => {
 	it("returns the instance of itself", async () => {

packages/reacord/tsconfig.json

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

packages/website/CHANGELOG.md

@@ -1,5 +1,15 @@
 # website
 
+## 0.4.4
+
+### Patch Changes
+
+- Updated dependencies [104b175]
+- Updated dependencies [156cf90]
+- Updated dependencies [0bab505]
+- Updated dependencies [d76f316]
+  - reacord@0.5.3
+
 ## 0.4.3
 
 ### Patch Changes

packages/website/astro.config.mjs

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

packages/website/package.json

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

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

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

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

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

packages/website/src/components/layout.astro

@@ -4,7 +4,6 @@ import "@fontsource/rubik/variable.css"
 import packageJson from "reacord/package.json"
 import bannerUrl from "~/assets/banner.png"
 import faviconUrl from "~/assets/favicon.png"
-import "~/styles/prism-theme.css"
 import "~/styles/tailwind.css"
 ---
 

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

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

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

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

packages/website/src/content/guides/1-sending-messages.md

@@ -79,8 +79,8 @@ To reply to a command interaction, use the `.reply()` function. This function re
 
 ```jsx
 import { Client } from "discord.js"
-import * as React from "react"
 import { Button, ReacordDiscordJs } from "reacord"
+import * as React from "react"
 
 const client = new Client({ intents: [] })
 const reacord = new ReacordDiscordJs(client)

packages/website/src/env.d.ts

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

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

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

packages/website/src/pages/index.astro

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

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

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

packages/website/src/styles/tailwind.css

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

packages/website/tailwind.config.cjs

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

packages/website/tailwind.config.ts

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

packages/website/tsconfig.json

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

tailwind.config.ts

@@ -0,0 +1,16 @@
+export default {
+	theme: {
+		fontFamily: {
+			sans: ["RubikVariable", "sans-serif"],
+			monospace: ["'JetBrains Mono'", "monospace"],
+		},
+		boxShadow: {
+			DEFAULT: "0 2px 9px 0 rgb(0 0 0 / 0.3), 0 2px 4px -2px rgb(0 0 0 / 0.3)",
+		},
+		extend: {},
+	},
+	corePlugins: {
+		container: false,
+	},
+	plugins: [],
+}

tsconfig.base.json

@@ -1,24 +1,3 @@
 {
-  "extends": "@itsmapleleaf/configs/tsconfig.base",
+	"extends": "@itsmapleleaf/configs/tsconfig"
-  "compilerOptions": {
-    "noImplicitOverride": true
-  },
-  "include": [
-    "**/*.ts",
-    "**/*.tsx",
-    "**/*.cjs",
-    "**/*.mjs",
-    "**/*.astro",
-    ".eslintrc.cjs"
-  ],
-  "exclude": [
-    "**/node_modules/**",
-    "**/coverage/**",
-    "**/build/**",
-    "**/dist/**",
-    "**/.cache/**",
-    "**/api/_build/**",
-    "**/public/**",
-    "**/cypress/**"
-  ]
 }

tsconfig.json

@@ -0,0 +1,4 @@
+{
+	"extends": "./tsconfig.base.json",
+	"exclude": ["node_modules", "packages"]
+}