release v0.3.0

it would probably be better to add an actual check and error for this, but meh

.eslintrc.json

@@ -14,5 +14,13 @@
   "rules": {
     "import/no-unused-modules": "off",
     "unicorn/prevent-abbreviations": "off"
+  },
+  "overrides": [
+    {
+      "files": ["packages/website/cypress/**"],
+      "parserOptions": {
+        "project": "./packages/website/cypress/tsconfig.json"
       }
+    }
+  ]
 }

.github/workflows/deploy-website.yml

@@ -1,9 +1,10 @@
-name: deploy docs
+name: deploy website
 on:
   push:
     branches: [main]
-    paths: [packages/docs/**, reacord/library/**/*.ts]
+    paths:
-
+      - "packages/website/**"
+      - "reacord/library/**/*.{ts,tsx}"
 jobs:
   deploy:
     runs-on: ubuntu-latest

.github/workflows/main.yml

@@ -11,20 +11,24 @@ env:
   TEST_GUILD_ID: ${{ secrets.TEST_GUILD_ID }}
 
 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 test -C packages/reacord
+          - name: test website
+            run: pnpm test -C packages/website
+          - name: build
+            run: pnpm build --recursive
+          - name: lint
+            run: pnpm lint
+          - name: typecheck
+            run: pnpm typecheck --parallel
+    name: ${{ matrix.command.name }}
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
@@ -34,4 +38,4 @@ jobs:
           node-version: "16"
       - run: npm i -g pnpm
       - run: pnpm install --frozen-lockfile
-      - run: pnpm run --recursive ${{ matrix.scripts.script }}
+      - run: ${{ matrix.command.run }}

Dockerfile

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

README.md

@@ -1,7 +1,23 @@
 # reacord
+Create interactive Discord messages using React!
 
-Create interactive Discord messages using React! [Visit the docs to get started.](https://reacord.fly.dev/guides/getting-started)
+## Installation
+```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.fly.dev/guides/getting-started)
+
+## Example
 <!-- prettier-ignore -->
 ```tsx
 import * as React from "react"

package.json

@@ -9,8 +9,8 @@
     "@itsmapleleaf/configs": "^1.1.2"
   },
   "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "^5.9.0",
+    "@typescript-eslint/eslint-plugin": "^5.9.1",
-    "@typescript-eslint/parser": "^5.9.0",
+    "@typescript-eslint/parser": "^5.9.1",
     "eslint": "^8.6.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-import-resolver-typescript": "^2.5.0",
@@ -18,7 +18,7 @@
     "eslint-plugin-jsx-a11y": "^6.5.1",
     "eslint-plugin-react": "^7.28.0",
     "eslint-plugin-react-hooks": "^4.3.0",
-    "eslint-plugin-unicorn": "^39.0.0",
+    "eslint-plugin-unicorn": "^40.0.0",
     "prettier": "^2.5.1",
     "typescript": "^4.5.4"
   },

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

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

packages/reacord/helpers/reject-after.ts

@@ -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/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/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.fly.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,7 +3,7 @@ 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"
@@ -154,7 +154,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 +163,7 @@ export class ReacordDiscordJs extends Reacord {
               "parentId",
               "rateLimitPerUser",
             ]),
+          ),
           id: interaction.channelId,
         }
       : raise("Non-channel interactions are not supported")
@@ -190,7 +192,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 +202,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 +214,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,
     }

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/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"

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,7 +2,7 @@
   "name": "reacord",
   "type": "module",
   "description": "Create interactive Discord messages using React.",
-  "version": "0.1.1",
+  "version": "0.3.0",
   "types": "./dist/main.d.ts",
   "files": [
     "dist"
@@ -20,20 +20,19 @@
   "scripts": {
     "build": "tsup-node 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",
     "typecheck": "tsc --noEmit",
-    "playground": "nodemon --exec esmo --ext ts,tsx ./playground/main.tsx",
+    "playground": "nodemon --exec esmo --ext ts,tsx --inspect=5858 --enable-source-maps ./playground/main.tsx",
     "release": "release-it"
   },
   "dependencies": {
     "@types/node": "*",
     "@types/react": "*",
     "@types/react-reconciler": "^0.26.4",
-    "nanoid": "^3.1.30",
+    "nanoid": "^3.1.31",
     "react-reconciler": "^0.26.2",
-    "rxjs": "^7.5.1"
+    "rxjs": "^7.5.2"
   },
   "peerDependencies": {
     "discord.js": "^13.3",
@@ -45,16 +44,13 @@
     }
   },
   "devDependencies": {
-    "@jest/globals": "^27.4.6",
-    "@types/jest": "^27.4.0",
     "@types/lodash-es": "^4.17.5",
     "c8": "^7.11.0",
     "discord.js": "^13.5.1",
-    "dotenv": "^10.0.0",
+    "dotenv": "^11.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",
@@ -63,7 +59,9 @@
     "release-it": "^14.12.1",
     "tsup": "^5.11.11",
     "type-fest": "^2.9.0",
-    "typescript": "^4.5.4"
+    "typescript": "^4.5.4",
+    "vite": "^2.7.10",
+    "vitest": "^0.0.141"
   },
   "resolutions": {
     "esbuild": "latest"

packages/reacord/playground/main.tsx

@@ -1,7 +1,7 @@
 import { Client } from "discord.js"
 import "dotenv/config"
 import React from "react"
-import { Button, ReacordDiscordJs } from "../library/main"
+import { Button, ReacordDiscordJs, useInstance } from "../library/main"
 import { createCommandHandler } from "./command-handler"
 import { Counter } from "./counter"
 import { FruitSelect } from "./fruit-select"
@@ -93,6 +93,17 @@ createCommandHandler(client, [
       )
     },
   },
+  {
+    name: "delete-this",
+    description: "delete this",
+    run: (interaction) => {
+      function DeleteThis() {
+        const instance = useInstance()
+        return <Button label="delete this" onClick={() => instance.destroy()} />
+      }
+      reacord.reply(interaction, <DeleteThis />)
+    },
+  },
 ])
 
 await client.login(process.env.TEST_BOT_TOKEN)

packages/reacord/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/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, fn, test } from "vitest"
+import { Button, Option, Select } from "../library/main"
+import { ReacordTester } from "./test-adapter"
 
 test("single select", async () => {
   const tester = new ReacordTester()
-  const onSelect = jest.fn()
+  const onSelect = 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 = 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

@@ -4,37 +4,41 @@ import { nanoid } from "nanoid"
 import { nextTick } from "node:process"
 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 {
-  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,
+  MessageButtonOptions,
+  MessageOptions,
+  MessageSelectOptions,
+} 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 +53,32 @@ 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"]>) {
+  async assertMessages(expected: MessageSample[]) {
     await nextTickPromise()
     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,14 +90,21 @@ 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) {
@@ -265,11 +275,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/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)
+
+    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
+    tester.findButtonByLabel("destroy child").click()
+    await tester.assertMessages([messageOutput("parent")])
+
+    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,5 @@ node_modules
 /public/build
 .env
 /public/api
+cypress/videos
+cypress/screenshots

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

@@ -16,11 +16,12 @@ export function MainNavigation() {
           <AppLink {...link} key={link.to} className={linkClass} />
         ))}
       </div>
-      <div className="md:hidden" id="main-navigation-popover">
+      <div className="md:hidden">
         <PopoverMenu>
           {mainLinks.map((link) => (
             <AppLink
               {...link}
+              role="menuitem"
               key={link.to}
               className={PopoverMenu.itemClass}
             />
@@ -29,6 +30,7 @@ export function MainNavigation() {
           {guideLinks.map(({ link }) => (
             <AppLink
               {...link}
+              role="menuitem"
               key={link.to}
               className={PopoverMenu.itemClass}
             />

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

@@ -10,6 +10,7 @@ export function PopoverMenu({ children }: { children: React.ReactNode }) {
         <MenuAlt4Icon className="w-6" />
       </button>
       <div
+        role="menu"
         className={`
           w-48 max-h-[calc(100vh-4rem)]
           absolute right-0 top-[calc(100%+8px)]

packages/website/app/root.tsx

@@ -54,7 +54,7 @@ export default function App() {
         <meta name="viewport" content="width=device-width,initial-scale=1" />
         <Meta />
         <Links />
-        <script defer src="//unpkg.com/alpinejs@3.7.1" />
+        <script defer src="https://unpkg.com/alpinejs@3.7.1/dist/cdn.min.js" />
       </head>
       <body>
         <GuideLinksProvider value={data.guideLinks}>

packages/website/app/routes/guides/use-instance.md

@@ -0,0 +1,26 @@
+---
+meta:
+  title: useInstance
+  description: Using useInstance to get the current instance within a component
+---
+
+# useInstance
+
+You can use `useInstance` to get the current [instance](/guides/sending-messages) within a component. This can be used to let a component destroy or deactivate itself.
+
+```jsx
+import { Button, useInstance } from "reacord"
+
+function SelfDestruct() {
+  const instance = useInstance()
+  return (
+    <Button
+      style="danger"
+      label="delete this"
+      onClick={() => instance.destroy()}
+    />
+  )
+}
+
+reacord.send(channelId, <SelfDestruct />)
+```

packages/website/cypress.json

@@ -0,0 +1,3 @@
+{
+  "baseUrl": "http://localhost:3000/"
+}

packages/website/cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

packages/website/cypress/integration/mobile-popover-menu.test.ts

@@ -0,0 +1,12 @@
+export {}
+
+describe("main popover menu", () => {
+  it("should toggle on button click", () => {
+    cy.viewport(480, 720)
+    cy.visit("/")
+    cy.findByRole("button", { name: "Menu" }).click()
+    cy.findByRole("menu").should("be.visible")
+    cy.findByRole("button", { name: "Menu" }).click()
+    cy.findByRole("menu").should("not.exist")
+  })
+})

packages/website/cypress/plugins/index.js

@@ -0,0 +1,22 @@
+/// <reference types="cypress" />
+// ***********************************************************
+// This example plugins/index.js can be used to load plugins
+//
+// You can change the location of this file or turn off loading
+// the plugins file with the 'pluginsFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/plugins-guide
+// ***********************************************************
+
+// This function is called when a project is opened or re-opened (e.g. due to
+// the project's config changing)
+
+/**
+ * @type {Cypress.PluginConfig}
+ */
+// eslint-disable-next-line no-unused-vars
+export default function cypressConfig(on, config) {
+  // `on` is used to hook into various events Cypress emits
+  // `config` is the resolved Cypress config
+}

packages/website/cypress/support/commands.js

@@ -0,0 +1,26 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+import "@testing-library/cypress/add-commands"

packages/website/cypress/support/index.js

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/index.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

packages/website/cypress/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "types": ["cypress", "@testing-library/cypress"]
+  },
+  "include": ["."],
+  "exclude": []
+}

packages/website/package.json

@@ -1,12 +1,14 @@
 {
   "private": true,
-  "name": "reacord-docs-new",
+  "name": "website",
   "scripts": {
     "prepare": "remix setup node",
     "dev": "concurrently 'typedoc --watch' 'remix dev'",
+    "test": "node ./scripts/test.js",
+    "test-dev": "pnpm dev & wait-on http-get://localhost:3000 && cypress open",
     "build": "typedoc && remix build",
     "start": "remix-serve build",
-    "typecheck": "tsc --noEmit"
+    "typecheck": "tsc --noEmit && tsc --project cypress/tsconfig.json --noEmit"
   },
   "dependencies": {
     "@heroicons/react": "^1.0.5",
@@ -23,19 +25,24 @@
     "react-dom": "^17.0.2",
     "remix": "^1.1.1",
     "remix-tailwind": "^0.2.1",
-    "tailwindcss": "^3.0.12"
+    "tailwindcss": "^3.0.13"
   },
   "devDependencies": {
     "@remix-run/dev": "^1.1.1",
     "@remix-run/node": "^1.1.1",
+    "@testing-library/cypress": "^8.0.2",
     "@types/node": "*",
     "@types/react": "^17.0.38",
     "@types/react-dom": "^17.0.11",
     "@types/tailwindcss": "^3.0.2",
+    "@types/wait-on": "^5.3.1",
     "concurrently": "^7.0.0",
-    "rehype-prism-plus": "^1.2.2",
+    "cypress": "^9.2.1",
+    "execa": "^6.0.0",
+    "rehype-prism-plus": "^1.3.1",
     "typedoc": "^0.22.10",
-    "typescript": "^4.5.4"
+    "typescript": "^4.5.4",
+    "wait-on": "^6.0.0"
   },
   "engines": {
     "node": ">=14"

packages/website/scripts/package.json

@@ -0,0 +1,3 @@
+{
+  "type": "module"
+}

packages/website/scripts/test.js

@@ -0,0 +1,10 @@
+import cypress from "cypress"
+import { execa } from "execa"
+import waitOn from "wait-on"
+
+await execa("pnpm", ["build"], { stdio: "inherit" })
+const app = execa("pnpm", ["start"], { stdio: "inherit" })
+await waitOn({ resources: ["http-get://localhost:3000"] })
+await cypress.run()
+console.log("cypress run done")
+app.kill()

todo.md

@@ -40,21 +40,24 @@
     - instances
       - [x] sending channel messages
       - [x] cleaning up instances
-      - [ ] sending command replies
+      - [x] sending command replies
-    - [ ] embeds
+    - [x] embeds
-    - [ ] buttons and links
+    - [x] buttons and links
-    - [ ] select menus
+    - [x] select menus
+    - [ ] adapters
   - api reference
     - [x] rendering and making it available
 
 # docs polish
 
-- [ ] remove client-side react hydration
+- [x] remove client-side react hydration
-- [ ] use a small script for the popover menu toggle
+- [x] ~~use a small script for the popover menu toggle~~ went with alpine
-- [ ] adding doc comments to source
+- [ ] improve accessibility on mobile menu
+- [x] adding doc comments to source
 - [ ] docs: use literate-ts to typecheck code blocks
 - [ ] each page should have a link at the bottom to the previous and next pages
 - [ ] anchor links on markdown headings
+- [ ] custom UI for api reference
 
 # internal
 
@@ -72,6 +75,7 @@
 - [ ] timestamp component
 - [ ] `useMessage`
 - [ ] `useReactions`
+- [ ] `useInstance` - returns the associated instance, probably replaces `useMessage`
 - [ ] max instance count per guild
 - [ ] max instance count per channel
 - [ ] uncontrolled select

tsconfig.base.json

@@ -10,6 +10,7 @@
     "**/dist/**",
     "**/.cache/**",
     "**/api/_build/**",
-    "**/public/**"
+    "**/public/**",
+    "**/cypress/**"
   ]
 }