Version Packages

need to figure out how to do this with remix-tailwind lol

.changeset/README.md

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

.changeset/config.json

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

.eslintrc.cjs

@@ -0,0 +1,25 @@
+require("@rushstack/eslint-patch/modern-module-resolution")
+
+/** @type {import('eslint').Linter.Config} */
+module.exports = {
+  extends: [require.resolve("@itsmapleleaf/configs/eslint")],
+  ignorePatterns: [
+    "**/node_modules/**",
+    "**/.cache/**",
+    "**/build/**",
+    "**/dist/**",
+    "**/coverage/**",
+    "**/public/**",
+  ],
+  parserOptions: {
+    project: require.resolve("./tsconfig.base.json"),
+  },
+  overrides: [
+    {
+      files: ["packages/website/cypress/**"],
+      parserOptions: {
+        project: require.resolve("./packages/website/cypress/tsconfig.json"),
+      },
+    },
+  ],
+}

.eslintrc.json

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

.github/workflows/deploy-docs.yml

@@ -1,16 +0,0 @@
-name: deploy docs
-on:
-  push:
-    branches: [main]
-    paths: [packages/docs/**, reacord/library/**/*.ts]
-
-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

@@ -10,21 +10,29 @@ env:
   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-scripts:
+  run-commands:
     strategy:
-      matrix:
-        scripts:
-          - name: test
-            script: coverage
-          - name: lint
-            script: lint
-          - name: typecheck
-            script: typecheck
-          - name: build
-            script: build
       fail-fast: false
-    name: ${{ matrix.scripts.name }}
+      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:
       - uses: actions/checkout@v2
@@ -32,6 +40,6 @@ jobs:
         with:
           # https://github.com/actions/setup-node#supported-version-syntax
           node-version: "16"
-      - run: npm i -g pnpm
+      - run: npm i -g pnpm@7.5.0
       - run: pnpm install --frozen-lockfile
-      - run: pnpm run --recursive ${{ matrix.scripts.script }}
+      - run: ${{ matrix.command.run }}

.github/workflows/release.yml

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

.gitignore

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

.npmrc

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

.prettierignore

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

Dockerfile

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

README.md

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

fly.toml

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

package.json

@@ -1,26 +1,23 @@
 {
+  "name": "reacord-monorepo",
   "private": true,
   "scripts": {
     "lint": "eslint --ext js,ts,tsx .",
     "lint-fix": "pnpm lint -- --fix",
-    "format": "prettier --write ."
+    "format": "prettier --write .",
-  },
+    "build": "pnpm -r run build",
-  "dependencies": {
+    "start": "pnpm -C packages/website run start",
-    "@itsmapleleaf/configs": "^1.1.2"
+    "release": "pnpm -r run build && changeset publish"
   },
   "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "^5.9.0",
+    "@changesets/cli": "^2.24.0",
-    "@typescript-eslint/parser": "^5.9.0",
+    "@itsmapleleaf/configs": "^1.1.3",
-    "eslint": "^8.6.0",
+    "@rushstack/eslint-patch": "^1.1.3",
-    "eslint-config-prettier": "^8.3.0",
+    "@types/eslint": "^8.4.1",
-    "eslint-import-resolver-typescript": "^2.5.0",
+    "eslint": "^8.14.0",
-    "eslint-plugin-import": "^2.25.4",
+    "node": "^16",
-    "eslint-plugin-jsx-a11y": "^6.5.1",
+    "prettier": "^2.6.2",
-    "eslint-plugin-react": "^7.28.0",
+    "typescript": "^4.6.3"
-    "eslint-plugin-react-hooks": "^4.3.0",
-    "eslint-plugin-unicorn": "^39.0.0",
-    "prettier": "^2.5.1",
-    "typescript": "^4.5.4"
   },
   "resolutions": {
     "esbuild": "latest"

packages/docs/README.md

@@ -1,53 +0,0 @@
-# Welcome to Remix!
-
-- [Remix Docs](https://remix.run/docs)
-
-## Development
-
-From your terminal:
-
-```sh
-npm run dev
-```
-
-This starts your app in development mode, rebuilding assets on file changes.
-
-## Deployment
-
-First, build your app for production:
-
-```sh
-npm run build
-```
-
-Then run the app in production mode:
-
-```sh
-npm start
-```
-
-Now you'll need to pick a host to deploy it to.
-
-### DIY
-
-If you're familiar with deploying node applications, the built-in Remix app server is production-ready.
-
-Make sure to deploy the output of `remix build`
-
-- `build/`
-- `public/build/`
-
-### Using a Template
-
-When you ran `npx create-remix@latest` there were a few choices for hosting. You can run that again to create a new project, then copy over your `app/` folder to the new project that's pre-configured for your target server.
-
-```sh
-cd ..
-# create a new project, and pick a pre-configured host
-npx create-remix@latest
-cd my-new-remix-app
-# remove the new project's app (not the old one!)
-rm -rf app
-# copy your app over
-cp -R ../my-old-remix-app/app app
-```

packages/docs/app/entry.client.tsx

@@ -1,4 +0,0 @@
-import { hydrate } from "react-dom";
-import { RemixBrowser } from "remix";
-
-hydrate(<RemixBrowser />, document);

packages/docs/app/entry.server.tsx

@@ -1,21 +0,0 @@
-import { renderToString } from "react-dom/server";
-import { RemixServer } from "remix";
-import type { EntryContext } from "remix";
-
-export default function handleRequest(
-  request: Request,
-  responseStatusCode: number,
-  responseHeaders: Headers,
-  remixContext: EntryContext
-) {
-  const markup = renderToString(
-    <RemixServer context={remixContext} url={request.url} />
-  );
-
-  responseHeaders.set("Content-Type", "text/html");
-
-  return new Response("<!DOCTYPE html>" + markup, {
-    status: responseStatusCode,
-    headers: responseHeaders
-  });
-}

packages/docs/app/modules/landing/landing-example.mdx

@@ -1,19 +0,0 @@
-{/* prettier-ignore */}
-```tsx
-import * as React from "react"
-import { Embed, Button } from "reacord"
-
-function Counter() {
-  const [count, setCount] = React.useState(0)
-  return (
-    <>
-      <Embed title="Counter">
-        This button has been clicked {count} times.
-      </Embed>
-      <Button onClick={() => setCount(count + 1)}>
-        +1
-      </Button>
-    </>
-  )
-}
-```

packages/docs/app/modules/navigation/main-navigation.tsx

@@ -1,40 +0,0 @@
-import { useGuideLinksContext } from "~/modules/navigation/guide-links-context"
-import { linkClass } from "../ui/components"
-import { PopoverMenu } from "../ui/popover-menu"
-import { AppLink } from "./app-link"
-import { mainLinks } from "./main-links"
-
-export function MainNavigation() {
-  const guideLinks = useGuideLinksContext()
-  return (
-    <nav className="flex justify-between items-center h-16">
-      <a href="/">
-        <h1 className="text-3xl font-light">reacord</h1>
-      </a>
-      <div className="hidden md:flex gap-4">
-        {mainLinks.map((link) => (
-          <AppLink {...link} key={link.to} className={linkClass} />
-        ))}
-      </div>
-      <div className="md:hidden" id="main-navigation-popover">
-        <PopoverMenu>
-          {mainLinks.map((link) => (
-            <AppLink
-              {...link}
-              key={link.to}
-              className={PopoverMenu.itemClass}
-            />
-          ))}
-          <hr className="border-0 h-[2px] bg-black/50" />
-          {guideLinks.map(({ link }) => (
-            <AppLink
-              {...link}
-              key={link.to}
-              className={PopoverMenu.itemClass}
-            />
-          ))}
-        </PopoverMenu>
-      </div>
-    </nav>
-  )
-}

packages/docs/app/modules/ui/components.ts

@@ -1,24 +0,0 @@
-import clsx from "clsx"
-
-export const maxWidthContainer = clsx`mx-auto w-full max-w-screen-lg px-4`
-
-export const inlineIconClass = clsx`inline w-5 align-sub`
-
-export const linkClass = clsx`
-  font-medium inline-block relative
-  opacity-60 hover:opacity-100 transition-opacity
-  after:absolute after:block after:w-full after:h-px after:bg-white/50 after:translate-y-[3px] after:opacity-0 after:transition
-  hover:after:translate-y-[-1px] hover:after:opacity-100
-`
-
-export const docsProseClass = clsx`
-  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-4
-  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
-  max-w-none
-`

packages/docs/app/modules/ui/popover-menu.tsx

@@ -1,31 +0,0 @@
-import { MenuAlt4Icon } from "@heroicons/react/outline"
-import clsx from "clsx"
-import React from "react"
-import { linkClass } from "./components"
-
-export function PopoverMenu({ children }: { children: React.ReactNode }) {
-  return (
-    <div className="relative" x-data="{ open: false }">
-      <button title="Menu" className={linkClass} x-on:click="open = !open">
-        <MenuAlt4Icon className="w-6" />
-      </button>
-      <div
-        className={`
-          w-48 max-h-[calc(100vh-4rem)]
-          absolute right-0 top-[calc(100%+8px)]
-          bg-slate-800 shadow rounded-lg
-          overflow-hidden overflow-y-auto 
-          transition-all
-        `}
-        x-bind:class="open ? 'visible opacity-100' : 'invisible opacity-0 translate-y-3'"
-      >
-        {children}
-      </div>
-    </div>
-  )
-}
-
-PopoverMenu.itemClass = clsx`
-  px-3 py-2 transition text-left font-medium block
-  opacity-50 hover:opacity-100 hover:bg-black/30
-`

packages/docs/app/routes/index.tsx

@@ -1,29 +0,0 @@
-import packageJson from "reacord/package.json"
-import LandingExample from "~/modules/landing/landing-example.mdx"
-import { MainNavigation } from "~/modules/navigation/main-navigation"
-import { maxWidthContainer } from "~/modules/ui/components"
-
-export default function Landing() {
-  return (
-    <div className="flex flex-col min-w-0 min-h-screen text-center">
-      <header className={maxWidthContainer}>
-        <MainNavigation />
-      </header>
-      <div className="px-4 pb-8 flex flex-1">
-        <main className="px-4 py-6 rounded-lg shadow bg-slate-800 space-y-5 m-auto w-full max-w-xl">
-          <h1 className="text-6xl font-light">reacord</h1>
-          <section className="mx-auto text-sm sm:text-base">
-            <LandingExample />
-          </section>
-          <p className="text-2xl font-light">{packageJson.description}</p>
-          <a
-            href="/guides/getting-started"
-            className="inline-block px-4 py-3 text-xl transition rounded-lg bg-emerald-700 hover:translate-y-[-2px] hover:bg-emerald-800 hover:shadow"
-          >
-            Get Started
-          </a>
-        </main>
-      </div>
-    </div>
-  )
-}

packages/docs/app/routes/tailwind[.]css.tsx

@@ -1,5 +0,0 @@
-import type { LoaderFunction } from "remix"
-import { serveTailwindCss } from "remix-tailwind"
-
-export const loader: LoaderFunction = () =>
-  serveTailwindCss("app/modules/ui/tailwind.css")

packages/docs/package.json

@@ -1,44 +0,0 @@
-{
-  "private": true,
-  "name": "reacord-docs-new",
-  "scripts": {
-    "prepare": "remix setup node",
-    "dev": "concurrently 'typedoc --watch' 'remix dev'",
-    "build": "typedoc && remix build",
-    "start": "remix-serve build",
-    "typecheck": "tsc --noEmit"
-  },
-  "dependencies": {
-    "@heroicons/react": "^1.0.5",
-    "@remix-run/react": "^1.1.1",
-    "@remix-run/serve": "^1.1.1",
-    "@tailwindcss/typography": "^0.5.0",
-    "autoprefixer": "^10.4.2",
-    "clsx": "^1.1.1",
-    "fast-glob": "^3.2.10",
-    "gray-matter": "^4.0.3",
-    "postcss": "^8.4.5",
-    "reacord": "workspace:*",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "remix": "^1.1.1",
-    "remix-tailwind": "^0.2.1",
-    "tailwindcss": "^3.0.12"
-  },
-  "devDependencies": {
-    "@remix-run/dev": "^1.1.1",
-    "@remix-run/node": "^1.1.1",
-    "@types/node": "*",
-    "@types/react": "^17.0.38",
-    "@types/react-dom": "^17.0.11",
-    "@types/tailwindcss": "^3.0.2",
-    "concurrently": "^7.0.0",
-    "rehype-prism-plus": "^1.2.2",
-    "typedoc": "^0.22.10",
-    "typescript": "^4.5.4"
-  },
-  "engines": {
-    "node": ">=14"
-  },
-  "sideEffects": false
-}

packages/reacord/.gitignore

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

packages/reacord/CHANGELOG.md

@@ -0,0 +1,7 @@
+# reacord
+
+## 0.5.0
+
+### Minor Changes
+
+- aa65da5: allow JSX in more places

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

@@ -2,6 +2,7 @@ import type {
   CamelCasedPropertiesDeep,
   SnakeCasedPropertiesDeep,
 } from "type-fest"
+import { expect, test } from "vitest"
 import { camelCaseDeep, snakeCaseDeep } from "./convert-object-property-case"
 
 test("camelCaseDeep", () => {
@@ -12,12 +13,14 @@ test("camelCaseDeep", () => {
     someOtherProp: "someOtherValue",
   }
 
-  expect(camelCaseDeep(input)).toEqual<CamelCasedPropertiesDeep<typeof input>>({
+  const expected: CamelCasedPropertiesDeep<typeof input> = {
     someProp: {
       someDeepProp: "some_deep_value",
     },
     someOtherProp: "someOtherValue",
-  })
+  }
+
+  expect(camelCaseDeep(input)).toEqual(expected)
 })
 
 test("snakeCaseDeep", () => {
@@ -28,10 +31,12 @@ test("snakeCaseDeep", () => {
     some_other_prop: "someOtherValue",
   }
 
-  expect(snakeCaseDeep(input)).toEqual<SnakeCasedPropertiesDeep<typeof input>>({
+  const expected: SnakeCasedPropertiesDeep<typeof input> = {
     some_prop: {
       some_deep_prop: "someDeepValue",
     },
     some_other_prop: "someOtherValue",
-  })
+  }
+
+  expect(snakeCaseDeep(input)).toEqual(expected)
 })

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

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

packages/reacord/helpers/omit.ts

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

packages/reacord/helpers/pick.ts

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

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

@@ -1,15 +0,0 @@
-export function pruneNullishValues<T extends object>(
-  object: T,
-): PruneNullishValues<T> {
-  const result: any = {}
-  for (const [key, value] of Object.entries(object)) {
-    if (value != undefined) {
-      result[key] = value
-    }
-  }
-  return result
-}
-
-type PruneNullishValues<T> = {
-  [Key in keyof T]: NonNullable<T[Key]>
-}

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

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

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

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

packages/reacord/helpers/reject-after.ts

@@ -6,5 +6,5 @@ export async function rejectAfter(
   error: unknown = `rejected after ${timeMs}ms`,
 ): Promise<never> {
   await setTimeout(timeMs)
-  return Promise.reject(toError(error))
+  throw toError(error)
 }

packages/reacord/helpers/types.ts

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

packages/reacord/helpers/wait-for.ts

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

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

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

packages/reacord/jest.config.js

@@ -1,15 +0,0 @@
-/** @type {import('@jest/types').Config.InitialOptions} */
-const config = {
-  transform: {
-    "^.+\\.[jt]sx?$": ["esbuild-jest", { format: "esm", sourcemap: true }],
-  },
-  extensionsToTreatAsEsm: [".ts", ".tsx"],
-  moduleNameMapper: {
-    "^(\\.\\.?/.+)\\.jsx?$": "$1",
-  },
-  verbose: true,
-  cache: false,
-  coverageReporters: ["text", "text-summary", "html"],
-  coveragePathIgnorePatterns: ["discord-js-adapter", "test/setup-testing"],
-}
-export default config

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

@@ -21,9 +21,9 @@ export type ActionRowProps = {
  * ```tsx
  * // put buttons on two separate rows
  * <ActionRow>
- *   <Button onClick={handleFirst}>First</Button>
+ *   <Button label="First" onClick={handleFirst} />
  * </ActionRow>
- * <Button onClick={handleSecond}>Second</Button>
+ * <Button label="Second" onClick={handleSecond} />
  * ```
  *
  * @category Action Row

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

@@ -1,10 +1,12 @@
+import type { ReactNode } from "react"
+
 /**
  * Common props between button-like components
  * @category Button
  */
 export type ButtonSharedProps = {
   /** The text on the button. Rich formatting (markdown) is not supported here. */
-  label?: string
+  label?: ReactNode
 
   /** When true, the button will be slightly faded, and cannot be clicked. */
   disabled?: boolean

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

@@ -34,13 +34,23 @@ export type ButtonClickEvent = ComponentEvent
  */
 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 = nanoid()
 
+  // this has text children, but buttons themselves shouldn't yield text
+  // eslint-disable-next-line class-methods-use-this
+  override get text() {
+    return ""
+  }
+
   override modifyMessageOptions(options: MessageOptions): void {
     getNextActionRow(options).push({
       type: "button",
@@ -48,7 +58,7 @@ class ButtonNode extends Node<ButtonProps> {
       style: this.props.style ?? "secondary",
       disabled: this.props.disabled,
       emoji: this.props.emoji,
-      label: this.props.label,
+      label: this.children.findType(ButtonLabelNode)?.text,
     })
   }
 
@@ -63,3 +73,5 @@ class ButtonNode extends Node<ButtonProps> {
     return false
   }
 }
+
+class ButtonLabelNode extends Node<{}> {}

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

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

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

@@ -1,5 +1,7 @@
+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"
 
@@ -7,10 +9,10 @@ import type { EmbedOptions } from "./embed-options"
  * @category Embed
  */
 export type EmbedFieldProps = {
-  name: string
+  name: ReactNode
-  value?: string
+  value?: ReactNode
   inline?: boolean
-  children?: string
+  children?: ReactNode
 }
 
 /**
@@ -18,10 +20,14 @@ export type EmbedFieldProps = {
  */
 export function EmbedField(props: EmbedFieldProps) {
   return (
-    <ReacordElement
+    <ReacordElement props={props} createNode={() => new EmbedFieldNode(props)}>
-      props={props}
+      <ReacordElement props={{}} createNode={() => new FieldNameNode({})}>
-      createNode={() => new EmbedFieldNode(props)}
+        {props.name}
-    />
+      </ReacordElement>
+      <ReacordElement props={{}} createNode={() => new FieldValueNode({})}>
+        {props.value || props.children}
+      </ReacordElement>
+    </ReacordElement>
   )
 }
 
@@ -29,9 +35,12 @@ class EmbedFieldNode extends EmbedChildNode<EmbedFieldProps> {
   override modifyEmbedOptions(options: EmbedOptions): void {
     options.fields ??= []
     options.fields.push({
-      name: this.props.name,
+      name: this.children.findType(FieldNameNode)?.text ?? "",
-      value: this.props.value ?? this.props.children ?? "",
+      value: this.children.findType(FieldValueNode)?.text ?? "",
       inline: this.props.inline,
     })
   }
 }
+
+class FieldNameNode extends Node<{}> {}
+class FieldValueNode extends Node<{}> {}

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

@@ -1,5 +1,7 @@
+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"
 
@@ -7,8 +9,8 @@ import type { EmbedOptions } from "./embed-options"
  * @category Embed
  */
 export type EmbedFooterProps = {
-  text?: string
+  text?: ReactNode
-  children?: string
+  children?: ReactNode
   iconUrl?: string
   timestamp?: string | number | Date
 }
@@ -16,19 +18,22 @@ export type EmbedFooterProps = {
 /**
  * @category Embed
  */
-export function EmbedFooter(props: EmbedFooterProps) {
+export function EmbedFooter({ text, children, ...props }: EmbedFooterProps) {
   return (
-    <ReacordElement
+    <ReacordElement props={props} createNode={() => new EmbedFooterNode(props)}>
-      props={props}
+      <ReacordElement props={{}} createNode={() => new FooterTextNode({})}>
-      createNode={() => new EmbedFooterNode(props)}
+        {text ?? children}
-    />
+      </ReacordElement>
+    </ReacordElement>
   )
 }
 
-class EmbedFooterNode extends EmbedChildNode<EmbedFooterProps> {
+class EmbedFooterNode extends EmbedChildNode<
+  Omit<EmbedFooterProps, "text" | "children">
+> {
   override modifyEmbedOptions(options: EmbedOptions): void {
     options.footer = {
-      text: this.props.text ?? this.props.children ?? "",
+      text: this.children.findType(FooterTextNode)?.text ?? "",
       icon_url: this.props.iconUrl,
     }
     options.timestamp = this.props.timestamp
@@ -36,3 +41,5 @@ class EmbedFooterNode extends EmbedChildNode<EmbedFooterProps> {
       : undefined
   }
 }
+
+class FooterTextNode extends Node<{}> {}

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

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

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

@@ -18,18 +18,26 @@ export type LinkProps = ButtonSharedProps & {
 /**
  * @category Link
  */
-export function Link(props: LinkProps) {
+export function Link({ label, children, ...props }: LinkProps) {
-  return <ReacordElement props={props} createNode={() => new LinkNode(props)} />
+  return (
+    <ReacordElement props={props} createNode={() => new LinkNode(props)}>
+      <ReacordElement props={{}} createNode={() => new LinkTextNode({})}>
+        {label || children}
+      </ReacordElement>
+    </ReacordElement>
+  )
 }
 
-class LinkNode extends Node<LinkProps> {
+class LinkNode extends Node<Omit<LinkProps, "label" | "children">> {
   override modifyMessageOptions(options: MessageOptions): void {
     getNextActionRow(options).push({
       type: "link",
       disabled: this.props.disabled,
       emoji: this.props.emoji,
-      label: this.props.label || this.props.children,
+      label: this.children.findType(LinkTextNode)?.text,
       url: this.props.url,
     })
   }
 }
+
+class LinkTextNode extends Node<{}> {}

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

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

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

@@ -1,6 +1,11 @@
+import type { ReactNode } from "react"
 import React from "react"
 import { ReacordElement } from "../../internal/element"
-import { OptionNode } from "./option-node"
+import {
+  OptionDescriptionNode,
+  OptionLabelNode,
+  OptionNode,
+} from "./option-node"
 
 /**
  * @category Select
@@ -9,11 +14,11 @@ export type OptionProps = {
   /** The internal value of this option */
   value: string
   /** The text shown to the user. This takes priority over `children` */
-  label?: string
+  label?: ReactNode
   /** The text shown to the user */
-  children?: string
+  children?: ReactNode
   /** Description for the option, shown to the user */
-  description?: string
+  description?: ReactNode
 
   /**
    * Renders an emoji to the left of the text.
@@ -31,8 +36,27 @@ export type OptionProps = {
 /**
  * @category Select
  */
-export function Option(props: OptionProps) {
+export function Option({
+  label,
+  children,
+  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

@@ -4,7 +4,11 @@ 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 { ActionRow, MessageOptions } from "../../internal/message"
+import type {
+  ActionRow,
+  ActionRowItem,
+  MessageOptions,
+} from "../../internal/message"
 import { Node } from "../../internal/node.js"
 import type { ComponentEvent } from "../component-event"
 import { OptionNode } from "./option-node"
@@ -108,19 +112,25 @@ class SelectNode extends Node<SelectProps> {
       ...props
     } = this.props
 
-    actionRow.push({
+    const item: ActionRowItem = {
       ...props,
       type: "select",
       customId: this.customId,
       options,
-      // I'm not counting on people using value and values at the same time,
+      values: [],
-      // but maybe we should resolve this differently anyhow? e.g. one should override the other
+    }
-      // or just warn if there are both
+
-      // or... try some other alternative design entirely
+    if (multiple) {
-      values: [...(values || []), ...(value ? [value] : [])],
+      item.minValues = minValues
-      minValues: multiple ? minValues : undefined,
+      item.maxValues = maxValues
-      maxValues: multiple ? Math.max(minValues, maxValues) : undefined,
+      if (values) item.values = values
-    })
+    }
+
+    if (!multiple && value != undefined) {
+      item.values = [value]
+    }
+
+    actionRow.push(item)
   }
 
   override handleComponentInteraction(

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

@@ -0,0 +1,20 @@
+import * as React from "react"
+import { raise } from "../../helpers/raise"
+import type { ReacordInstance } from "./instance"
+
+const Context = React.createContext<ReacordInstance | undefined>(undefined)
+
+export const InstanceProvider = Context.Provider
+
+/**
+ * Get the associated instance for the current component.
+ *
+ * @category Core
+ * @see https://reacord.mapleleaf.dev/guides/use-instance
+ */
+export function useInstance(): ReacordInstance {
+  return (
+    React.useContext(Context) ??
+    raise("Could not find instance, was this component rendered via Reacord?")
+  )
+}

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

@@ -3,11 +3,14 @@ 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-null-values"
+import { pruneNullishValues } from "../../helpers/prune-nullish-values"
 import { raise } from "../../helpers/raise"
-import { toUpper } from "../../helpers/to-upper"
 import type { ComponentInteraction } from "../internal/interaction"
-import type { Message, MessageOptions } from "../internal/message"
+import type {
+  Message,
+  MessageButtonOptions,
+  MessageOptions,
+} from "../internal/message"
 import { ChannelMessageRenderer } from "../internal/renderers/channel-message-renderer"
 import { InteractionReplyRenderer } from "../internal/renderers/interaction-reply-renderer"
 import type {
@@ -30,7 +33,7 @@ export class ReacordDiscordJs extends Reacord {
     super(config)
 
     client.on("interactionCreate", (interaction) => {
-      if (interaction.isMessageComponent()) {
+      if (interaction.isButton() || interaction.isSelectMenu()) {
         this.handleComponentInteraction(
           this.createReacordComponentInteraction(interaction),
         )
@@ -40,7 +43,7 @@ export class ReacordDiscordJs extends Reacord {
 
   /**
    * Sends a message to a channel.
-   * @see https://reacord.fly.dev/guides/sending-messages
+   * @see https://reacord.mapleleaf.dev/guides/sending-messages
    */
   override send(
     channelId: string,
@@ -54,7 +57,7 @@ export class ReacordDiscordJs extends Reacord {
 
   /**
    * Sends a message as a reply to a command interaction.
-   * @see https://reacord.fly.dev/guides/sending-messages
+   * @see https://reacord.mapleleaf.dev/guides/sending-messages
    */
   override reply(
     interaction: Discord.CommandInteraction,
@@ -68,7 +71,7 @@ export class ReacordDiscordJs extends Reacord {
 
   /**
    * Sends an ephemeral message as a reply to a command interaction.
-   * @see https://reacord.fly.dev/guides/sending-messages
+   * @see https://reacord.mapleleaf.dev/guides/sending-messages
    */
   override ephemeralReply(
     interaction: Discord.CommandInteraction,
@@ -88,7 +91,7 @@ export class ReacordDiscordJs extends Reacord {
           (await this.client.channels.fetch(channelId)) ??
           raise(`Channel ${channelId} not found`)
 
-        if (!channel.isText()) {
+        if (!channel.isTextBased()) {
           raise(`Channel ${channelId} is not a text channel`)
         }
 
@@ -154,7 +157,8 @@ export class ReacordDiscordJs extends Reacord {
     // todo please dear god clean this up
     const channel: ChannelInfo = interaction.channel
       ? {
-          ...pick(pruneNullishValues(interaction.channel), [
+          ...pruneNullishValues(
+            pick(interaction.channel, [
               "topic",
               "nsfw",
               "lastMessageId",
@@ -162,6 +166,7 @@ export class ReacordDiscordJs extends Reacord {
               "parentId",
               "rateLimitPerUser",
             ]),
+          ),
           id: interaction.channelId,
         }
       : raise("Non-channel interactions are not supported")
@@ -190,7 +195,8 @@ export class ReacordDiscordJs extends Reacord {
     const member: GuildMemberInfo | undefined =
       interaction.member instanceof Discord.GuildMember
         ? {
-            ...pick(pruneNullishValues(interaction.member), [
+            ...pruneNullishValues(
+              pick(interaction.member, [
                 "id",
                 "nick",
                 "displayName",
@@ -199,6 +205,7 @@ export class ReacordDiscordJs extends Reacord {
                 "color",
                 "pending",
               ]),
+            ),
             displayName: interaction.member.displayName,
             roles: [...interaction.member.roles.cache.map((role) => role.id)],
             joinedAt: interaction.member.joinedAt?.toISOString(),
@@ -210,18 +217,15 @@ export class ReacordDiscordJs extends Reacord {
 
     const guild: GuildInfo | undefined = interaction.guild
       ? {
-          ...pick(pruneNullishValues(interaction.guild), ["id", "name"]),
+          ...pruneNullishValues(pick(interaction.guild, ["id", "name"])),
           member: member ?? raise("unexpected: member is undefined"),
         }
       : undefined
 
     const user: UserInfo = {
-      ...pick(pruneNullishValues(interaction.user), [
+      ...pruneNullishValues(
-        "id",
+        pick(interaction.user, ["id", "username", "discriminator", "tag"]),
-        "username",
+      ),
-        "discriminator",
-        "tag",
-      ]),
       avatarUrl: interaction.user.avatarURL()!,
       accentColor: interaction.user.accentColor ?? undefined,
     }
@@ -297,17 +301,6 @@ 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()
     },
@@ -320,10 +313,6 @@ function createEphemeralReacordMessage(): Message {
       console.warn("Ephemeral messages can't be edited")
       return Promise.resolve()
     },
-    disableComponents: () => {
-      console.warn("Ephemeral messages can't be edited")
-      return Promise.resolve()
-    },
     delete: () => {
       console.warn("Ephemeral messages can't be deleted")
       return Promise.resolve()
@@ -331,25 +320,34 @@ function createEphemeralReacordMessage(): Message {
   }
 }
 
+function convertButtonStyleToEnum(style: MessageButtonOptions["style"]) {
+  const styleMap = {
+    primary: Discord.ButtonStyle.Primary,
+    secondary: Discord.ButtonStyle.Secondary,
+    success: Discord.ButtonStyle.Success,
+    danger: Discord.ButtonStyle.Danger,
+  } as const
+
+  return styleMap[style ?? "secondary"]
+}
+
 // TODO: this could be a part of the core library,
 // and also handle some edge cases, e.g. empty messages
-function getDiscordMessageOptions(
+function getDiscordMessageOptions(reacordOptions: MessageOptions) {
-  reacordOptions: MessageOptions,
+  const options = {
-): Discord.MessageOptions {
-  const options: Discord.MessageOptions = {
     // eslint-disable-next-line unicorn/no-null
     content: reacordOptions.content || null,
     embeds: reacordOptions.embeds,
     components: reacordOptions.actionRows.map((row) => ({
-      type: "ACTION_ROW",
+      type: Discord.ComponentType.ActionRow,
       components: row.map(
-        (component): Discord.MessageActionRowComponentOptions => {
+        (component): Discord.MessageActionRowComponentData => {
           if (component.type === "button") {
             return {
-              type: "BUTTON",
+              type: Discord.ComponentType.Button,
               customId: component.customId,
               label: component.label ?? "",
-              style: toUpper(component.style ?? "secondary"),
+              style: convertButtonStyleToEnum(component.style),
               disabled: component.disabled,
               emoji: component.emoji,
             }
@@ -358,7 +356,7 @@ function getDiscordMessageOptions(
           if (component.type === "select") {
             return {
               ...component,
-              type: "SELECT_MENU",
+              type: Discord.ComponentType.SelectMenu,
               options: component.options.map((option) => ({
                 ...option,
                 default: component.values?.includes(option.value),

packages/reacord/library/core/reacord.tsx

@@ -1,8 +1,10 @@
 import type { ReactNode } from "react"
+import React from "react"
 import type { ComponentInteraction } from "../internal/interaction"
 import { reconciler } from "../internal/reconciler.js"
 import type { Renderer } from "../internal/renderers/renderer"
 import type { ReacordInstance } from "./instance"
+import { InstanceProvider } from "./instance-context"
 
 /**
  * @category Core
@@ -47,13 +49,12 @@ export abstract class Reacord {
 
     const container = reconciler.createContainer(renderer, 0, false, {})
 
-    if (initialContent !== undefined) {
+    const instance: ReacordInstance = {
-      reconciler.updateContainer(initialContent, container)
-    }
-
-    return {
       render: (content: ReactNode) => {
-        reconciler.updateContainer(content, container)
+        reconciler.updateContainer(
+          <InstanceProvider value={instance}>{content}</InstanceProvider>,
+          container,
+        )
       },
       deactivate: () => {
         this.deactivate(renderer)
@@ -63,6 +64,12 @@ export abstract class Reacord {
         renderer.destroy()
       },
     }
+
+    if (initialContent !== undefined) {
+      instance.render(initialContent)
+    }
+
+    return instance
   }
 
   private deactivate(renderer: Renderer) {

packages/reacord/library/internal/container.ts

@@ -21,6 +21,16 @@ 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: any[]) => 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/message.ts

@@ -9,9 +9,12 @@ export type MessageOptions = {
   actionRows: ActionRow[]
 }
 
-export type ActionRow = Array<
+export type ActionRow = ActionRowItem[]
-  MessageButtonOptions | MessageLinkOptions | MessageSelectOptions
+
->
+export type ActionRowItem =
+  | MessageButtonOptions
+  | MessageLinkOptions
+  | MessageSelectOptions
 
 export type MessageButtonOptions = {
   type: "button"
@@ -46,7 +49,6 @@ export type MessageSelectOptionOptions = {
 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

@@ -13,4 +13,8 @@ export abstract class Node<Props> {
   handleComponentInteraction(interaction: ComponentInteraction): boolean {
     return false
   }
+
+  get text(): string {
+    return [...this.children].map((child) => child.text).join("")
+  }
 }

packages/reacord/library/internal/reconciler.ts

@@ -52,6 +52,8 @@ const config: HostConfig<
   },
   createTextInstance: (text) => new TextNode(text),
   shouldSetTextContent: () => false,
+  // @ts-expect-error
+  detachDeletedInstance: (instance) => {},
 
   clearContainer: (renderer) => {
     renderer.nodes.clear()

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

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

packages/reacord/library/main.ts

@@ -13,6 +13,6 @@ export * from "./core/components/link"
 export * from "./core/components/option"
 export * from "./core/components/select"
 export * from "./core/instance"
+export { useInstance } from "./core/instance-context"
 export * from "./core/reacord"
 export * from "./core/reacord-discord-js"
-export * from "./core/reacord-tester"

packages/reacord/package.json

@@ -2,10 +2,27 @@
   "name": "reacord",
   "type": "module",
   "description": "Create interactive Discord messages using React.",
-  "version": "0.1.1",
+  "version": "0.5.0",
   "types": "./dist/main.d.ts",
+  "homepage": "https://reacord.mapleleaf.dev",
+  "repository": "https://github.com/itsMapleLeaf/reacord.git",
+  "changelog": "https://github.com/itsMapleLeaf/reacord/releases",
+  "license": "MIT",
+  "keywords": [
+    "discord",
+    "discord-js",
+    "react",
+    "react-js",
+    "react-renderer",
+    "interaction",
+    "message",
+    "embed",
+    "reacord"
+  ],
   "files": [
-    "dist"
+    "dist",
+    "README.md",
+    "LICENSE"
   ],
   "exports": {
     ".": {
@@ -18,25 +35,24 @@
     }
   },
   "scripts": {
-    "build": "tsup-node library/main.ts --target node16 --format cjs,esm --dts --sourcemap",
+    "build": "cp ../../README.md . && cp ../../LICENSE . && tsup library/main.ts --target node16 --format cjs,esm --dts --sourcemap",
     "build-watch": "pnpm build -- --watch",
-    "test": "node --experimental-vm-modules --no-warnings ./node_modules/jest/bin/jest.js --colors",
+    "test": "vitest --coverage --no-watch",
-    "test-watch": "pnpm test -- --watch",
+    "test-dev": "vitest",
-    "coverage": "pnpm test -- --coverage",
+    "test-manual": "nodemon --exec tsx --ext ts,tsx ./scripts/discordjs-manual-test.tsx",
     "typecheck": "tsc --noEmit",
-    "playground": "nodemon --exec esmo --ext ts,tsx ./playground/main.tsx",
+    "release": "bash scripts/release.sh"
-    "release": "release-it"
   },
   "dependencies": {
     "@types/node": "*",
     "@types/react": "*",
-    "@types/react-reconciler": "^0.26.4",
+    "@types/react-reconciler": "^0.26.6",
-    "nanoid": "^3.1.30",
+    "nanoid": "^3.3.3",
-    "react-reconciler": "^0.26.2",
+    "react-reconciler": "^0.27.0",
-    "rxjs": "^7.5.1"
+    "rxjs": "^7.5.5"
   },
   "peerDependencies": {
-    "discord.js": "^13.3",
+    "discord.js": "^14",
     "react": ">=17"
   },
   "peerDependenciesMeta": {
@@ -45,25 +61,22 @@
     }
   },
   "devDependencies": {
-    "@jest/globals": "^27.4.6",
+    "@types/lodash-es": "^4.17.6",
-    "@types/jest": "^27.4.0",
+    "c8": "^7.11.2",
-    "@types/lodash-es": "^4.17.5",
+    "discord.js": "^14.0.3",
-    "c8": "^7.11.0",
+    "dotenv": "^16.0.0",
-    "discord.js": "^13.5.1",
-    "dotenv": "^10.0.0",
-    "esbuild": "latest",
-    "esbuild-jest": "^0.5.0",
-    "esmo": "^0.13.0",
-    "jest": "^27.4.7",
     "lodash-es": "^4.17.21",
     "nodemon": "^2.0.15",
-    "prettier": "^2.5.1",
+    "prettier": "^2.6.2",
     "pretty-ms": "^7.0.1",
-    "react": "^17.0.2",
+    "react": "^18.0.0",
-    "release-it": "^14.12.1",
+    "release-it": "^14.14.2",
-    "tsup": "^5.11.11",
+    "tsup": "^5.12.6",
-    "type-fest": "^2.9.0",
+    "tsx": "^3.8.0",
-    "typescript": "^4.5.4"
+    "type-fest": "^2.12.2",
+    "typescript": "^4.6.3",
+    "vite": "^2.9.5",
+    "vitest": "^0.10.0"
   },
   "resolutions": {
     "esbuild": "latest"
@@ -76,5 +89,8 @@
       "release": true,
       "web": true
     }
+  },
+  "publishConfig": {
+    "access": "public"
   }
 }

packages/reacord/playground/command-handler.ts

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

packages/reacord/playground/counter.tsx

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

packages/reacord/playground/fruit-select.tsx

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

packages/reacord/playground/main.tsx

@@ -1,98 +0,0 @@
-import { Client } from "discord.js"
-import "dotenv/config"
-import React from "react"
-import { Button, ReacordDiscordJs } 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")}
-          />
-        </>,
-      )
-    },
-  },
-])
-
-await client.login(process.env.TEST_BOT_TOKEN)

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

@@ -0,0 +1,134 @@
+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"
+import {
+  Button,
+  Option,
+  ReacordDiscordJs,
+  Select,
+  useInstance,
+} from "../library/main"
+
+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 category = await guild.channels.fetch(process.env.TEST_CATEGORY_ID!)
+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) => void | Promise<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.send(channel.id, "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.send(channel.id, <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.send(
+    channel.id,
+    <FruitSelect
+      onConfirm={(value) => {
+        instance.render(`you chose ${value}`)
+        instance.deactivate()
+      }}
+    />,
+  )
+})
+
+await createTest("ephemeral button", (channel) => {
+  reacord.send(
+    channel.id,
+    <>
+      <Button
+        label="public clic"
+        onClick={(event) =>
+          event.reply(`${event.guild?.member.displayName} clic`)
+        }
+      />
+      <Button
+        label="clic"
+        onClick={(event) => event.ephemeralReply("you clic")}
+      />
+    </>,
+  )
+})
+
+await createTest("delete this", (channel) => {
+  function DeleteThis() {
+    const instance = useInstance()
+    return <Button label="delete this" onClick={() => instance.destroy()} />
+  }
+  reacord.send(channel.id, <DeleteThis />)
+})

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

@@ -1,6 +1,7 @@
 import React from "react"
-import { ReacordTester } from "../library/core/reacord-tester"
+import { test } from "vitest"
 import { ActionRow, Button, Select } from "../library/main"
+import { ReacordTester } from "./test-adapter"
 
 const testing = new ReacordTester()
 

packages/reacord/test/channel-message-renderer.tsx

@@ -1,2 +1,3 @@
+import { test } from "vitest"
+
 test.todo("channel message renderer")
-export {}

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

@@ -0,0 +1,12 @@
+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")).not.toThrow()
+})

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

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

packages/reacord/test/embed.test.tsx

@@ -1,5 +1,5 @@
 import React from "react"
-import { ReacordTester } from "../library/core/reacord-tester"
+import { test } from "vitest"
 import {
   Embed,
   EmbedAuthor,
@@ -9,6 +9,7 @@ import {
   EmbedThumbnail,
   EmbedTitle,
 } from "../library/main"
+import { ReacordTester } from "./test-adapter"
 
 const testing = new ReacordTester()
 

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

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

packages/reacord/test/event-callbacks.test.tsx

@@ -1,3 +1,4 @@
+import { test } from "vitest"
+
 test.todo("button onClick")
 test.todo("select onChange")
-export {}

packages/reacord/test/link.test.tsx

@@ -1,6 +1,7 @@
 import React from "react"
-import { ReacordTester } from "../library/core/reacord-tester"
+import { test } from "vitest"
 import { Link } from "../library/main"
+import { ReacordTester } from "./test-adapter"
 
 const tester = new ReacordTester()
 

packages/reacord/test/reacord.test.tsx

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

packages/reacord/test/renderer.test.ts

@@ -1,6 +1,6 @@
+import { test } from "vitest"
+
 // test that the interaction update is _eventually_ deferred if there's no component update,
 // and that update isn't called after the fact
 // ...somehow
 test.todo("defer update timeout")
-
-export {}

packages/reacord/test/select.test.tsx

@@ -1,10 +1,11 @@
-import { jest } from "@jest/globals"
 import React, { useState } from "react"
-import { Button, Option, ReacordTester, Select } from "../library/main"
+import { expect, test, vi } from "vitest"
+import { Button, Option, Select } from "../library/main"
+import { ReacordTester } from "./test-adapter"
 
 test("single select", async () => {
   const tester = new ReacordTester()
-  const onSelect = jest.fn()
+  const onSelect = vi.fn()
 
   function TestSelect() {
     const [value, setValue] = useState<string>()
@@ -74,7 +75,7 @@ test("single select", async () => {
 
 test("multiple select", async () => {
   const tester = new ReacordTester()
-  const onSelect = jest.fn()
+  const onSelect = vi.fn()
 
   function TestSelect() {
     const [values, setValues] = useState<string[]>([])
@@ -125,13 +126,13 @@ test("multiple select", async () => {
   expect(onSelect).toHaveBeenCalledTimes(0)
 
   tester.findSelectByPlaceholder("select").select("1", "3")
-  await assertSelect(expect.arrayContaining(["1", "3"]))
+  await assertSelect(expect.arrayContaining(["1", "3"]) as unknown as string[])
   expect(onSelect).toHaveBeenCalledWith(
     expect.objectContaining({ values: expect.arrayContaining(["1", "3"]) }),
   )
 
   tester.findSelectByPlaceholder("select").select("2")
-  await assertSelect(expect.arrayContaining(["2"]))
+  await assertSelect(expect.arrayContaining(["2"]) as unknown as string[])
   expect(onSelect).toHaveBeenCalledWith(
     expect.objectContaining({ values: expect.arrayContaining(["2"]) }),
   )

packages/reacord/test/test-adapter.ts

@@ -1,39 +1,36 @@
 /* eslint-disable class-methods-use-this */
 /* eslint-disable require-await */
 import { nanoid } from "nanoid"
-import { nextTick } from "node:process"
+import { setTimeout } from "node:timers/promises"
-import { promisify } from "node:util"
 import type { ReactNode } from "react"
-import { logPretty } from "../../helpers/log-pretty"
+import { expect } from "vitest"
-import { omit } from "../../helpers/omit"
+import { logPretty } from "../helpers/log-pretty"
-import { raise } from "../../helpers/raise"
+import { omit } from "../helpers/omit"
-import type { Channel } from "../internal/channel"
+import { pruneNullishValues } from "../helpers/prune-nullish-values"
-import { Container } from "../internal/container"
+import { raise } from "../helpers/raise"
-import type {
+import { waitFor } from "../helpers/wait-for"
-  ButtonInteraction,
-  CommandInteraction,
-  SelectInteraction,
-} from "../internal/interaction"
-import type {
-  Message,
-  MessageButtonOptions,
-  MessageOptions,
-  MessageSelectOptions,
-} from "../internal/message"
-import { ChannelMessageRenderer } from "../internal/renderers/channel-message-renderer"
-import { InteractionReplyRenderer } from "../internal/renderers/interaction-reply-renderer"
 import type {
   ChannelInfo,
   GuildInfo,
   MessageInfo,
   UserInfo,
-} from "./component-event"
+} from "../library/core/component-event"
-import type { ButtonClickEvent } from "./components/button"
+import type { ButtonClickEvent } from "../library/core/components/button"
-import type { SelectChangeEvent } from "./components/select"
+import type { SelectChangeEvent } from "../library/core/components/select"
-import type { ReacordInstance } from "./instance"
+import type { ReacordInstance } from "../library/core/instance"
-import { Reacord } from "./reacord"
+import { Reacord } from "../library/core/reacord"
+import type { Channel } from "../library/internal/channel"
+import { Container } from "../library/internal/container"
+import type {
+  ButtonInteraction,
+  CommandInteraction,
+  SelectInteraction,
+} from "../library/internal/interaction"
+import type { Message, MessageOptions } from "../library/internal/message"
+import { ChannelMessageRenderer } from "../library/internal/renderers/channel-message-renderer"
+import { InteractionReplyRenderer } from "../library/internal/renderers/interaction-reply-renderer"
 
-const nextTickPromise = promisify(nextTick)
+export type MessageSample = ReturnType<ReacordTester["sampleMessages"]>[0]
 
 /**
  * A Record adapter for automated tests. WIP
@@ -49,33 +46,33 @@ export class ReacordTester extends Reacord {
     return [...this.messageContainer]
   }
 
-  override send(): ReacordInstance {
+  override send(initialContent?: ReactNode): ReacordInstance {
     return this.createInstance(
       new ChannelMessageRenderer(new TestChannel(this.messageContainer)),
+      initialContent,
     )
   }
 
-  override reply(): ReacordInstance {
+  override reply(initialContent?: ReactNode): ReacordInstance {
     return this.createInstance(
       new InteractionReplyRenderer(
         new TestCommandInteraction(this.messageContainer),
       ),
+      initialContent,
     )
   }
 
-  override ephemeralReply(): ReacordInstance {
+  override ephemeralReply(initialContent?: ReactNode): ReacordInstance {
-    return this.reply()
+    return this.reply(initialContent)
   }
 
-  async assertMessages(expected: ReturnType<this["sampleMessages"]>) {
+  assertMessages(expected: MessageSample[]) {
-    await nextTickPromise()
+    return waitFor(() => {
       expect(this.sampleMessages()).toEqual(expected)
+    })
   }
 
-  async assertRender(
+  async assertRender(content: ReactNode, expected: MessageSample[]) {
-    content: ReactNode,
-    expected: ReturnType<this["sampleMessages"]>,
-  ) {
     const instance = this.reply()
     instance.render(content)
     await this.assertMessages(expected)
@@ -87,69 +84,77 @@ export class ReacordTester extends Reacord {
   }
 
   sampleMessages() {
-    return this.messages.map((message) => ({
+    return pruneNullishValues(
+      this.messages.map((message) => ({
         ...message.options,
         actionRows: message.options.actionRows.map((row) =>
           row.map((component) =>
-          omit(component, ["customId", "onClick", "onSelect", "onSelectValue"]),
+            omit(component, [
+              "customId",
+              "onClick",
+              "onSelect",
+              "onSelectValue",
+            ]),
           ),
         ),
-    }))
+      })),
+    )
   }
 
   findButtonByLabel(label: string) {
-    for (const message of this.messageContainer) {
+    return {
-      for (const component of message.options.actionRows.flat()) {
+      click: () => {
+        return waitFor(() => {
+          for (const [component, message] of this.eachComponent()) {
             if (component.type === "button" && component.label === label) {
-          return this.createButtonActions(component, message)
+              this.handleComponentInteraction(
-        }
+                new TestButtonInteraction(component.customId, message, this),
+              )
+              return
             }
           }
           raise(`Couldn't find button with label "${label}"`)
+        })
+      },
+    }
   }
 
   findSelectByPlaceholder(placeholder: string) {
-    for (const message of this.messageContainer) {
+    return {
-      for (const component of message.options.actionRows.flat()) {
+      select: (...values: string[]) => {
+        return waitFor(() => {
+          for (const [component, message] of this.eachComponent()) {
             if (
               component.type === "select" &&
               component.placeholder === placeholder
             ) {
-          return this.createSelectActions(component, message)
+              this.handleComponentInteraction(
-        }
+                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 createButtonActions(
+  private *eachComponent() {
-    button: MessageButtonOptions,
+    for (const message of this.messageContainer) {
-    message: TestMessage,
+      for (const component of message.options.actionRows.flat()) {
-  ) {
+        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),
-        )
-      },
-    }
   }
 }
 
@@ -165,16 +170,6 @@ 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)
   }
@@ -187,16 +182,14 @@ class TestCommandInteraction implements CommandInteraction {
 
   constructor(private messageContainer: Container<TestMessage>) {}
 
-  reply(messageOptions: MessageOptions): Promise<Message> {
+  async reply(messageOptions: MessageOptions): Promise<Message> {
-    return Promise.resolve(
+    await setTimeout()
-      new TestMessage(messageOptions, this.messageContainer),
+    return new TestMessage(messageOptions, this.messageContainer)
-    )
   }
 
-  followUp(messageOptions: MessageOptions): Promise<Message> {
+  async followUp(messageOptions: MessageOptions): Promise<Message> {
-    return Promise.resolve(
+    await setTimeout()
-      new TestMessage(messageOptions, this.messageContainer),
+    return new TestMessage(messageOptions, this.messageContainer)
-    )
   }
 }
 
@@ -265,11 +258,11 @@ class TestComponentEvent {
   guild: GuildInfo = {} as any // todo
 
   reply(content?: ReactNode): ReacordInstance {
-    return this.tester.reply()
+    return this.tester.reply(content)
   }
 
   ephemeralReply(content?: ReactNode): ReacordInstance {
-    return this.tester.ephemeralReply()
+    return this.tester.ephemeralReply(content)
   }
 }
 

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

@@ -0,0 +1,89 @@
+import * as React from "react"
+import { test } from "vitest"
+import {
+  Button,
+  Embed,
+  EmbedAuthor,
+  EmbedField,
+  EmbedFooter,
+  EmbedTitle,
+  Link,
+  Option,
+  Select,
+} from "../library/main"
+import { ReacordTester } from "./test-adapter"
+
+test("text children in other components", async () => {
+  const tester = new ReacordTester()
+
+  const SomeText = () => <>some text</>
+
+  await tester.assertRender(
+    <>
+      <Embed>
+        <EmbedTitle>
+          <SomeText />
+        </EmbedTitle>
+        <EmbedAuthor>
+          <SomeText />
+        </EmbedAuthor>
+        <EmbedField name={<SomeText />}>
+          <SomeText /> <Button label="ignore this" onClick={() => {}} />
+          nailed it
+        </EmbedField>
+        <EmbedFooter>
+          <SomeText />
+        </EmbedFooter>
+      </Embed>
+      <Button label={<SomeText />} onClick={() => {}} />
+      <Link url="https://discord.com" label={<SomeText />} />
+      <Select>
+        <Option value="1">
+          <SomeText />
+        </Option>
+        <Option value="2" label={<SomeText />} description={<SomeText />} />
+      </Select>
+    </>,
+    [
+      {
+        content: "",
+        embeds: [
+          {
+            title: "some text",
+            author: {
+              name: "some text",
+            },
+            fields: [{ name: "some text", value: "some text nailed it" }],
+            footer: {
+              text: "some text",
+            },
+          },
+        ],
+        actionRows: [
+          [
+            {
+              type: "button",
+              label: "some text",
+              style: "secondary",
+            },
+            {
+              type: "link",
+              url: "https://discord.com",
+              label: "some text",
+            },
+          ],
+          [
+            {
+              type: "select",
+              values: [],
+              options: [
+                { value: "1", label: "some text" },
+                { value: "2", label: "some text", description: "some text" },
+              ],
+            },
+          ],
+        ],
+      },
+    ],
+  )
+})

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

@@ -0,0 +1,72 @@
+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"
+
+describe("useInstance", () => {
+  it("returns the instance of itself", async () => {
+    let instanceFromHook: ReacordInstance | undefined
+
+    function TestComponent({ name }: { name: string }) {
+      const instance = useInstance()
+      instanceFromHook ??= instance
+      return (
+        <>
+          <Button
+            label={`create ${name}`}
+            onClick={(event) => {
+              event.reply(<TestComponent name="child" />)
+            }}
+          />
+          <Button
+            label={`destroy ${name}`}
+            onClick={() => instance.destroy()}
+          />
+        </>
+      )
+    }
+
+    function messageOutput(name: string): MessageSample {
+      return {
+        content: "",
+        embeds: [],
+        actionRows: [
+          [
+            {
+              type: "button",
+              label: `create ${name}`,
+              style: "secondary",
+            },
+            {
+              type: "button",
+              label: `destroy ${name}`,
+              style: "secondary",
+            },
+          ],
+        ],
+      }
+    }
+
+    const tester = new ReacordTester()
+    const instance = tester.send(<TestComponent name="parent" />)
+
+    await tester.assertMessages([messageOutput("parent")])
+    expect(instanceFromHook).toBe(instance)
+
+    await tester.findButtonByLabel("create parent").click()
+    await tester.assertMessages([
+      messageOutput("parent"),
+      messageOutput("child"),
+    ])
+
+    // this test ensures that the only the child instance is destroyed,
+    // and not the parent instance
+    await tester.findButtonByLabel("destroy child").click()
+    await tester.assertMessages([messageOutput("parent")])
+
+    await tester.findButtonByLabel("destroy parent").click()
+    await tester.assertMessages([])
+  })
+})

packages/reacord/vitest.config.ts

@@ -0,0 +1,8 @@
+/// <reference types="vitest" />
+import { defineConfig } from "vite"
+
+export default defineConfig({
+  build: {
+    sourcemap: true,
+  },
+})

packages/website/.gitignore

@@ -5,3 +5,6 @@ node_modules
 /public/build
 .env
 /public/api
+cypress/videos
+cypress/screenshots
+*.out.css

packages/website/CHANGELOG.md

@@ -0,0 +1,8 @@
+# website
+
+## 0.4.1
+
+### Patch Changes
+
+- Updated dependencies [aa65da5]
+  - reacord@0.5.0

packages/website/app/assets/dots-background.svg

@@ -0,0 +1,3 @@
+<svg width="53" height="35" viewBox="0 0 53 35" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="3" cy="3" r="1" fill="white"/>
+</svg>

packages/website/app/entry.client.tsx

@@ -0,0 +1,4 @@
+import { hydrate } from "react-dom"
+import { RemixBrowser } from "@remix-run/react"
+
+hydrate(<RemixBrowser />, document)

packages/website/app/entry.server.tsx

@@ -0,0 +1,21 @@
+import { renderToString } from "react-dom/server"
+import type { EntryContext } from "@remix-run/node"
+import { RemixServer } from "@remix-run/react"
+
+export default function handleRequest(
+  request: Request,
+  responseStatusCode: number,
+  responseHeaders: Headers,
+  remixContext: EntryContext,
+) {
+  const markup = renderToString(
+    <RemixServer context={remixContext} url={request.url} />,
+  )
+
+  responseHeaders.set("Content-Type", "text/html")
+
+  return new Response("<!DOCTYPE html>" + markup, {
+    status: responseStatusCode,
+    headers: responseHeaders,
+  })
+}

packages/website/app/modules/app/app-footer.tsx

@@ -0,0 +1,27 @@
+import { HeartIcon } from "@heroicons/react/solid"
+import clsx from "clsx"
+import { ExternalLink } from "~/modules/dom/external-link"
+import { linkClass, maxWidthContainer } from "~/modules/ui/components"
+
+export function AppFooter() {
+  return (
+    <footer className={clsx(maxWidthContainer, "text-xs opacity-75")}>
+      <address className="not-italic">
+        &copy; {new Date().getFullYear()} itsMapleLeaf
+      </address>
+      <p>
+        Coded with <HeartIcon className="inline w-4 align-sub" /> using{" "}
+        <ExternalLink className={linkClass()} href="https://remix.run">
+          Remix
+        </ExternalLink>
+      </p>
+      <p>
+        Uses{" "}
+        <ExternalLink className={linkClass()} href="https://umami.is/">
+          umami
+        </ExternalLink>{" "}
+        for simple, non-identifying analytics.
+      </p>
+    </footer>
+  )
+}

packages/website/app/modules/dom/external-link.tsx

@@ -0,0 +1,12 @@
+import type { ComponentPropsWithoutRef } from "react"
+
+export function ExternalLink({
+  children,
+  ...props
+}: ComponentPropsWithoutRef<"a">) {
+  return (
+    <a target="_blank" rel="noopener noreferrer" {...props}>
+      {children}
+    </a>
+  )
+}

packages/website/app/modules/dom/portal.tsx

@@ -0,0 +1,20 @@
+import type { ReactNode } from "react"
+import { useEffect, useRef } from "react"
+import { createPortal } from "react-dom"
+
+export function Portal({ children }: { children: ReactNode }) {
+  const containerRef = useRef<Element>()
+
+  if (!containerRef.current && typeof document !== "undefined") {
+    containerRef.current = document.createElement("react-portal")
+    document.body.append(containerRef.current)
+  }
+
+  useEffect(() => () => containerRef.current!.remove(), [])
+
+  return containerRef.current ? (
+    createPortal(children, containerRef.current)
+  ) : (
+    <>{children}</>
+  )
+}

packages/website/app/modules/landing/landing-animation.tsx

@@ -0,0 +1,195 @@
+import clsx from "clsx"
+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"
+
+const defaultState = {
+  chatInputText: "",
+  chatInputCursorVisible: true,
+  messageVisible: false,
+  count: 0,
+  cursorLeft: "25%",
+  cursorBottom: "-15px",
+}
+
+const delay = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms))
+
+const animationFrame = () =>
+  new Promise((resolve) => requestAnimationFrame(resolve))
+
+export function LandingAnimation() {
+  const [state, setState] = useState(defaultState)
+  const chatInputRef = useRef<HTMLDivElement>(null)
+  const addRef = useRef<HTMLDivElement>(null)
+  const deleteRef = useRef<HTMLDivElement>(null)
+  const cursorRef = useRef<HTMLImageElement>(null)
+
+  useEffect(() => {
+    const animateClick = (element: HTMLElement) =>
+      element.animate(
+        [{ transform: `translateY(2px)` }, { transform: `translateY(0px)` }],
+        300,
+      )
+
+    let running = true
+
+    void (async () => {
+      while (running) {
+        setState(defaultState)
+        await delay(700)
+
+        for (const letter of "/counter") {
+          setState((state) => ({
+            ...state,
+            chatInputText: state.chatInputText + letter,
+          }))
+          await delay(100)
+        }
+
+        await delay(1000)
+
+        setState((state) => ({
+          ...state,
+          messageVisible: true,
+          chatInputText: "",
+        }))
+        await delay(1000)
+
+        setState((state) => ({
+          ...state,
+          cursorLeft: "70px",
+          cursorBottom: "40px",
+        }))
+        await delay(1500)
+
+        for (let i = 0; i < 3; i++) {
+          setState((state) => ({
+            ...state,
+            count: state.count + 1,
+            chatInputCursorVisible: false,
+          }))
+          animateClick(addRef.current!)
+          await delay(700)
+        }
+
+        await delay(500)
+
+        setState((state) => ({
+          ...state,
+          cursorLeft: "140px",
+        }))
+        await delay(1000)
+
+        animateClick(deleteRef.current!)
+        setState((state) => ({ ...state, messageVisible: false }))
+        await delay(1000)
+
+        setState(() => ({
+          ...defaultState,
+          chatInputCursorVisible: false,
+        }))
+        await delay(500)
+      }
+    })()
+
+    return () => {
+      running = false
+    }
+  }, [])
+
+  useEffect(() => {
+    let running = true
+
+    void (async () => {
+      while (running) {
+        // check if the cursor is in the input
+        const cursorRect = cursorRef.current!.getBoundingClientRect()
+        const chatInputRect = chatInputRef.current!.getBoundingClientRect()
+
+        const isOverInput =
+          cursorRef.current &&
+          chatInputRef.current &&
+          cursorRect.top + cursorRect.height / 2 > chatInputRect.top
+
+        cursorRef.current!.src = isOverInput ? cursorIbeamUrl : cursorUrl
+
+        await animationFrame()
+      }
+    })()
+
+    return () => {
+      running = false
+    }
+  })
+
+  return (
+    <div
+      className="grid gap-2 relative pointer-events-none select-none"
+      role="presentation"
+    >
+      <div
+        className={clsx(
+          "bg-slate-800 p-4 rounded-lg shadow transition",
+          state.messageVisible ? "opacity-100" : "opacity-0 -translate-y-2",
+        )}
+      >
+        <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">
+            <img
+              src={blobComfyUrl}
+              alt=""
+              className="object-contain scale-90 w-full h-full"
+            />
+          </div>
+          <div>
+            <p className="font-bold">comfybot</p>
+            <p>this button was clicked {state.count} times</p>
+            <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"
+              >
+                +1
+              </div>
+              <div
+                ref={deleteRef}
+                className="bg-red-700 text-white py-1.5 px-3 text-sm rounded"
+              >
+                🗑 delete
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        className="bg-slate-700 pb-2 pt-1.5 px-4 rounded-lg shadow"
+        ref={chatInputRef}
+      >
+        <span
+          className={clsx(
+            "text-sm after:content-[attr(data-after)] after:relative after:-top-px after:-left-[2px]",
+            state.chatInputCursorVisible
+              ? "after:opacity-100"
+              : "after:opacity-0",
+          )}
+          data-after="|"
+        >
+          {state.chatInputText || (
+            <span className="opacity-50 block absolute translate-y-1">
+              Message #showing-off-reacord
+            </span>
+          )}
+        </span>
+      </div>
+
+      <img
+        src={cursorUrl}
+        alt=""
+        className="transition-all duration-500 absolute scale-75"
+        style={{ left: state.cursorLeft, bottom: state.cursorBottom }}
+        ref={cursorRef}
+      />
+    </div>
+  )
+}

packages/website/app/modules/landing/landing-code.mdx

@@ -0,0 +1,26 @@
+{/* prettier-ignore */}
+```tsx
+import * as React from "react"
+import { Button, useInstance } from "reacord"
+
+function Counter() {
+  const [count, setCount] = React.useState(0)
+  const instance = useInstance()
+  return (
+    <>
+      this button was clicked {count} times
+      <Button
+        label="+1"
+        style="success"
+        onClick={() => setCount(count + 1)}
+      />
+      <Button
+        label="delete"
+        emoji="🗑"
+        style="danger"
+        onClick={() => instance.destroy()}
+      />
+    </>
+  )
+}
+```

packages/website/app/modules/navigation/active-link.tsx

@@ -0,0 +1,14 @@
+import type { ReactNode } from "react"
+import type { PathPattern } from "react-router"
+import { useMatch } from "react-router"
+
+export function ActiveLink({
+  to,
+  children,
+}: {
+  to: string | PathPattern
+  children: (props: { active: boolean }) => ReactNode
+}) {
+  const match = useMatch(to)
+  return <>{children({ active: match != undefined })}</>
+}