first attempt at files api

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

.eslintrc.cjs

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

.eslintrc.json

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

.github/workflows/deploy-website.yml

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

.gitignore

@@ -3,4 +3,7 @@ node_modules
 .vscode
 coverage
 .env
+*.code-workspace
 
+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

README.md

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

fly.toml

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

package.json

@@ -5,22 +5,13 @@
     "lint-fix": "pnpm lint -- --fix",
     "format": "prettier --write ."
   },
-  "dependencies": {
-    "@itsmapleleaf/configs": "^1.1.2"
-  },
   "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "^5.9.1",
+    "@itsmapleleaf/configs": "^1.1.3",
-    "@typescript-eslint/parser": "^5.9.1",
+    "@rushstack/eslint-patch": "^1.1.3",
-    "eslint": "^8.6.0",
+    "@types/eslint": "^8.4.1",
-    "eslint-config-prettier": "^8.3.0",
+    "eslint": "^8.14.0",
-    "eslint-import-resolver-typescript": "^2.5.0",
+    "prettier": "^2.6.2",
-    "eslint-plugin-import": "^2.25.4",
+    "typescript": "^4.6.3"
-    "eslint-plugin-jsx-a11y": "^6.5.1",
-    "eslint-plugin-react": "^7.28.0",
-    "eslint-plugin-react-hooks": "^4.3.0",
-    "eslint-plugin-unicorn": "^40.0.0",
-    "prettier": "^2.5.1",
-    "typescript": "^4.5.4"
   },
   "resolutions": {
     "esbuild": "latest"

packages/reacord/.gitignore

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

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-nullish-values.test.ts

@@ -0,0 +1,33 @@
+import { expect, test } from "vitest"
+import { PruneNullishValues, 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",
+    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

@@ -12,16 +12,31 @@ export function pruneNullishValues<T>(input: T): PruneNullishValues<T> {
   const result: any = {}
   for (const [key, value] of Object.entries(input)) {
     if (value != undefined) {
-      result[key] = isObject(value) ? pruneNullishValues(value) : value
+      result[key] = pruneNullishValues(value)
     }
   }
   return result
 }
 
-type PruneNullishValues<Input> = Input extends ReadonlyArray<infer Value>
+export type PruneNullishValues<Input> = Input extends object
-  ? ReadonlyArray<NonNullable<Value>>
+  ? OptionalKeys<
-  : Input extends object
+      { [Key in keyof Input]: NonNullable<PruneNullishValues<Input[Key]>> },
-  ? {
+      KeysWithNullishValues<Input>
-      [Key in keyof Input]: NonNullable<Input[Key]>
+    >
-    }
   : 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/wait-for.ts

@@ -0,0 +1,21 @@
+import { setTimeout } from "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/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/file.ts

@@ -0,0 +1,7 @@
+import { Readable } from "node:stream"
+
+export type ReacordFile = {
+  name?: string
+  description?: string
+  data: Buffer | Readable | string
+}

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

@@ -1,4 +1,5 @@
 import type { ReactNode } from "react"
+import { ReacordFile } from "./file"
 
 /**
  * Represents an interactive message, which can later be replaced or deleted.
@@ -16,4 +17,7 @@ export type ReacordInstance = {
    * This prevents it from listening to user interactions.
    */
   deactivate: () => void
+
+  /** Attach a file to the message for this instance */
+  attach: (file: ReacordFile) => void
 }

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

@@ -40,7 +40,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 +54,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 +68,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,
@@ -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,
     }
@@ -297,20 +298,18 @@ 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()
     },
+    updateFiles: async (files) => {
+      await message.edit({
+        files: files.map(({ name, description, data }) => ({
+          name,
+          description,
+          attachment: data,
+        })),
+      })
+    },
   }
 }
 
@@ -320,7 +319,7 @@ function createEphemeralReacordMessage(): Message {
       console.warn("Ephemeral messages can't be edited")
       return Promise.resolve()
     },
-    disableComponents: () => {
+    updateFiles: () => {
       console.warn("Ephemeral messages can't be edited")
       return Promise.resolve()
     },
@@ -372,7 +371,10 @@ function getDiscordMessageOptions(
     })),
   }
 
-  if (!options.content && !options.embeds?.length) {
+  const hasContent =
+    options.content || options.embeds?.length || options.files?.length
+
+  if (!hasContent) {
     options.content = "_ _"
   }
 

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)
@@ -62,7 +63,16 @@ export abstract class Reacord {
         this.renderers = this.renderers.filter((it) => it !== renderer)
         renderer.destroy()
       },
+      attach: (file) => {
+        renderer.attach(file)
+      },
     }
+
+    if (initialContent !== undefined) {
+      instance.render(initialContent)
+    }
+
+    return instance
   }
 
   private deactivate(renderer: Renderer) {

packages/reacord/library/internal/channel.ts

@@ -1,5 +1,7 @@
+import { ReacordFile } from "../core/file"
 import type { Message, MessageOptions } from "./message"
 
 export type Channel = {
   send(message: MessageOptions): Promise<Message>
+  sendFiles(files: readonly ReacordFile[]): Promise<Message>
 }

packages/reacord/library/internal/message.ts

@@ -2,6 +2,7 @@ import type { Except } from "type-fest"
 import { last } from "../../helpers/last"
 import type { EmbedOptions } from "../core/components/embed-options"
 import type { SelectProps } from "../core/components/select"
+import { ReacordFile } from "../main"
 
 export type MessageOptions = {
   content: string
@@ -49,7 +50,7 @@ export type MessageSelectOptionOptions = {
 export type Message = {
   edit(options: MessageOptions): Promise<void>
   delete(): Promise<void>
-  disableComponents(): Promise<void>
+  updateFiles(files: readonly ReacordFile[]): Promise<void>
 }
 
 export function getNextActionRow(options: MessageOptions): ActionRow {

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/channel-message-renderer.ts

@@ -1,3 +1,4 @@
+import { ReacordFile } from "../../core/file"
 import type { Channel } from "../channel"
 import type { Message, MessageOptions } from "../message"
 import { Renderer } from "./renderer"
@@ -10,4 +11,10 @@ export class ChannelMessageRenderer extends Renderer {
   protected createMessage(options: MessageOptions): Promise<Message> {
     return this.channel.send(options)
   }
+
+  protected createMessageFromFiles(
+    files: readonly ReacordFile[],
+  ): Promise<Message> {
+    return this.channel.sendFiles(files)
+  }
 }

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

@@ -1,5 +1,6 @@
 import { Subject } from "rxjs"
 import { concatMap } from "rxjs/operators"
+import { ReacordFile } from "../../core/file"
 import { Container } from "../container.js"
 import type { ComponentInteraction } from "../interaction"
 import type { Message, MessageOptions } from "../message"
@@ -7,15 +8,21 @@ import type { Node } from "../node.js"
 
 type UpdatePayload =
   | { action: "update" | "deactivate"; options: MessageOptions }
+  | { action: "files"; files: readonly ReacordFile[] }
   | { action: "deferUpdate"; interaction: ComponentInteraction }
   | { action: "destroy" }
 
+type NewMessagePayload =
+  | { source: "content"; messageOptions?: MessageOptions }
+  | { source: "files"; files?: readonly ReacordFile[] }
+
 export abstract class Renderer {
   readonly nodes = new Container<Node<unknown>>()
   private componentInteraction?: ComponentInteraction
   private message?: Message
   private active = true
   private updates = new Subject<UpdatePayload>()
+  private files: readonly ReacordFile[] = []
 
   private updateSubscription = this.updates
     .pipe(concatMap((payload) => this.updateMessage(payload)))
@@ -46,6 +53,11 @@ export abstract class Renderer {
     this.updates.next({ action: "destroy" })
   }
 
+  attach(file: ReacordFile) {
+    const newFiles = (this.files = [...this.files, file])
+    this.updates.next({ action: "files", files: newFiles })
+  }
+
   handleComponentInteraction(interaction: ComponentInteraction) {
     this.componentInteraction = interaction
 
@@ -60,7 +72,7 @@ export abstract class Renderer {
     }
   }
 
-  protected abstract createMessage(options: MessageOptions): Promise<Message>
+  protected abstract createMessage(options: NewMessagePayload): Promise<Message>
 
   private getMessageOptions(): MessageOptions {
     const options: MessageOptions = {
@@ -83,7 +95,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
     }
 
@@ -92,6 +114,15 @@ export abstract class Renderer {
       return
     }
 
+    if (payload.action === "files") {
+      if (this.message) {
+        await this.message?.updateFiles(payload.files)
+      } else {
+        this.message = await this.createMessageFromFiles(payload.files)
+      }
+      return
+    }
+
     if (this.componentInteraction) {
       const promise = this.componentInteraction.update(payload.options)
       this.componentInteraction = undefined

packages/reacord/library/main.ts

@@ -12,6 +12,8 @@ export * from "./core/components/embed-title"
 export * from "./core/components/link"
 export * from "./core/components/option"
 export * from "./core/components/select"
+export * from "./core/file"
 export * from "./core/instance"
+export { useInstance } from "./core/instance-context"
 export * from "./core/reacord"
 export * from "./core/reacord-discord-js"

packages/reacord/package.json

@@ -2,10 +2,27 @@
   "name": "reacord",
   "type": "module",
   "description": "Create interactive Discord messages using React.",
-  "version": "0.2.0",
+  "version": "0.3.5",
   "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": {
     ".": {
@@ -23,16 +40,16 @@
     "test": "vitest --coverage --no-watch",
     "test-dev": "vitest",
     "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"
+    "release": "bash scripts/release.sh"
   },
   "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.2"
+    "rxjs": "^7.5.5"
   },
   "peerDependencies": {
     "discord.js": "^13.3",
@@ -44,24 +61,24 @@
     }
   },
   "devDependencies": {
-    "@types/lodash-es": "^4.17.5",
+    "@types/lodash-es": "^4.17.6",
-    "c8": "^7.11.0",
+    "c8": "^7.11.2",
-    "discord.js": "^13.5.1",
+    "discord.js": "^13.6.0",
-    "dotenv": "^10.0.0",
+    "dotenv": "^16.0.0",
     "esbuild": "latest",
     "esbuild-jest": "^0.5.0",
-    "esmo": "^0.13.0",
+    "esmo": "^0.14.1",
     "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",
+    "type-fest": "^2.12.2",
-    "typescript": "^4.5.4",
+    "typescript": "^4.6.3",
-    "vite": "^2.7.10",
+    "vite": "^2.9.5",
-    "vitest": "^0.0.140"
+    "vitest": "^0.9.4"
   },
   "resolutions": {
     "esbuild": "latest"

packages/reacord/playground/command-handler.ts

@@ -8,17 +8,15 @@ type Command = {
 
 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(
+      client.application!.commands.set(
-          {
+        commands.map(({ name, description }) => ({
-            name: command.name,
+          name,
-            description: command.description,
+          description,
-          },
+        })),
         guild.id,
       )
     }
-    }
   })
 
   client.on("interactionCreate", async (interaction) => {

packages/reacord/playground/main.tsx

@@ -1,7 +1,10 @@
 import { Client } from "discord.js"
 import "dotenv/config"
+import { readFile } from "fs/promises"
+import { join } from "path"
 import React from "react"
-import { Button, ReacordDiscordJs } from "../library/main"
+import { fileURLToPath } from "url"
+import { Button, ReacordDiscordJs, useInstance } from "../library/main"
 import { createCommandHandler } from "./command-handler"
 import { Counter } from "./counter"
 import { FruitSelect } from "./fruit-select"
@@ -93,6 +96,30 @@ 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 />)
+    },
+  },
+  {
+    name: "anime",
+    description: "shows an anime image",
+    run: async (interaction) => {
+      const reply = reacord.reply(interaction)
+      const image = await readFile(
+        join(fileURLToPath(import.meta.url), "../anime.jpg"),
+      )
+
+      reply.attach({ name: "anime.jpg", data: image })
+      // reply.render("anime")
+    },
+  },
 ])
 
 await client.login(process.env.TEST_BOT_TOKEN)

packages/reacord/scripts/release.sh

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

packages/reacord/test/select.test.tsx

@@ -1,11 +1,11 @@
 import React, { useState } from "react"
-import { expect, fn, test } from "vitest"
+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 = fn()
+  const onSelect = vi.fn()
 
   function TestSelect() {
     const [value, setValue] = useState<string>()
@@ -75,7 +75,7 @@ test("single select", async () => {
 
 test("multiple select", async () => {
   const tester = new ReacordTester()
-  const onSelect = fn()
+  const onSelect = vi.fn()
 
   function TestSelect() {
     const [values, setValues] = useState<string[]>([])

packages/reacord/test/test-adapter.ts

@@ -1,14 +1,14 @@
 /* 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 { expect } from "vitest"
 import { logPretty } from "../helpers/log-pretty"
 import { omit } from "../helpers/omit"
 import { pruneNullishValues } from "../helpers/prune-nullish-values"
 import { raise } from "../helpers/raise"
+import { waitFor } from "../helpers/wait-for"
 import type {
   ChannelInfo,
   GuildInfo,
@@ -26,16 +26,11 @@ import type {
   CommandInteraction,
   SelectInteraction,
 } from "../library/internal/interaction"
-import type {
+import type { Message, MessageOptions } from "../library/internal/message"
-  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
@@ -51,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)
@@ -107,58 +102,59 @@ export class ReacordTester extends Reacord {
   }
 
   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),
-        )
-      },
-    }
   }
 }
 
@@ -174,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)
   }
@@ -196,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)
-    )
   }
 }
 
@@ -274,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/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/website/.gitignore

@@ -7,3 +7,4 @@ node_modules
 /public/api
 cypress/videos
 cypress/screenshots
+*.out.css

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

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

packages/website/app/entry.server.tsx

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

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

@@ -1,5 +1,6 @@
 import type { ComponentPropsWithoutRef } from "react"
-import { Link } from "remix"
+import { Link } from "@remix-run/react"
+import { ExternalLink } from "~/modules/dom/external-link"
 
 export type AppLinkProps = ComponentPropsWithoutRef<"a"> & {
   type: "internal" | "external" | "router"
@@ -17,9 +18,9 @@ export function AppLink({ type, to, children, ...props }: AppLinkProps) {
 
   if (type === "external") {
     return (
-      <a href={to} target="_blank" rel="noopener noreferrer" {...props}>
+      <ExternalLink href={to} {...props}>
         {children}
-      </a>
+      </ExternalLink>
     )
   }
 

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

@@ -18,7 +18,7 @@ export const mainLinks: AppLinkProps[] = [
   },
   {
     type: "internal",
-    to: "/api",
+    to: "/api/",
     children: (
       <>
         <CodeIcon className={inlineIconClass} /> API Reference

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

@@ -0,0 +1,69 @@
+import { Menu, Transition } from "@headlessui/react"
+import { MenuAlt4Icon } from "@heroicons/react/outline"
+import clsx from "clsx"
+import { ActiveLink } from "~/modules/navigation/active-link"
+import { useGuideLinksContext } from "~/modules/navigation/guide-links-context"
+import { Popper } from "~/modules/ui/popper"
+import { AppLink } from "./app-link"
+import { mainLinks } from "./main-links"
+
+export function MainNavigationMenu() {
+  const guideLinks = useGuideLinksContext()
+  return (
+    <Menu>
+      <Popper
+        renderReference={(reference) => (
+          <Menu.Button {...reference}>
+            <MenuAlt4Icon className="w-6" />
+            <span className="sr-only">Menu</span>
+          </Menu.Button>
+        )}
+        renderPopover={() => (
+          <Transition
+            enter="transition"
+            enterFrom="translate-y-4 opacity-0"
+            enterTo="translate-y-0 opacity-100"
+            leave="transition"
+            leaveFrom="translate-y-0 opacity-100"
+            leaveTo="translate-y-4 opacity-0"
+          >
+            <Menu.Items className="w-48 max-h-[calc(100vh-5rem)] bg-slate-800 shadow rounded-lg overflow-hidden overflow-y-auto focus:outline-none">
+              {mainLinks.map((link) => (
+                <Menu.Item key={link.to}>
+                  {({ active }) => (
+                    <AppLink {...link} className={menuItemClass({ active })} />
+                  )}
+                </Menu.Item>
+              ))}
+              <Menu.Item disabled>
+                <hr className="border-0 h-[2px] bg-black/50" />
+              </Menu.Item>
+              {guideLinks.map(({ link }) => (
+                <Menu.Item key={link.to}>
+                  {(menuItem) => (
+                    <ActiveLink to={link.to}>
+                      {(activeLink) => (
+                        <AppLink
+                          {...link}
+                          className={menuItemClass({
+                            active: activeLink.active || menuItem.active,
+                          })}
+                        />
+                      )}
+                    </ActiveLink>
+                  )}
+                </Menu.Item>
+              ))}
+            </Menu.Items>
+          </Transition>
+        )}
+      />
+    </Menu>
+  )
+}
+
+const menuItemClass = ({ active = false }) =>
+  clsx(
+    clsx`px-3 py-2 transition text-left font-medium block opacity-50`,
+    active && clsx`opacity-100 bg-black/75 text-emerald-400`,
+  )

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

@@ -1,41 +1,23 @@
-import { useGuideLinksContext } from "~/modules/navigation/guide-links-context"
+import { AppLogo } from "~/modules/app/app-logo"
 import { linkClass } from "../ui/components"
-import { PopoverMenu } from "../ui/popover-menu"
 import { AppLink } from "./app-link"
 import { mainLinks } from "./main-links"
+import { MainNavigationMenu } from "./main-navigation-menu"
 
 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>
+        <AppLogo className="w-32" />
+        <span className="sr-only">Home</span>
       </a>
       <div className="hidden md:flex gap-4">
         {mainLinks.map((link) => (
-          <AppLink {...link} key={link.to} className={linkClass} />
+          <AppLink {...link} key={link.to} className={linkClass()} />
         ))}
       </div>
       <div className="md:hidden">
-        <PopoverMenu>
+        <MainNavigationMenu />
-          {mainLinks.map((link) => (
-            <AppLink
-              {...link}
-              role="menuitem"
-              key={link.to}
-              className={PopoverMenu.itemClass}
-            />
-          ))}
-          <hr className="border-0 h-[2px] bg-black/50" />
-          {guideLinks.map(({ link }) => (
-            <AppLink
-              {...link}
-              role="menuitem"
-              key={link.to}
-              className={PopoverMenu.itemClass}
-            />
-          ))}
-        </PopoverMenu>
       </div>
     </nav>
   )

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

@@ -4,21 +4,41 @@ 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`
+export const linkClass = ({ active = false } = {}) =>
-  font-medium inline-block relative
+  clsx(
-  opacity-60 hover:opacity-100 transition-opacity
+    clsx`font-medium inline-block relative`,
-  after:absolute after:block after:w-full after:h-px after:bg-white/50 after:translate-y-[3px] after:opacity-0 after:transition
+    clsx`opacity-60 hover:opacity-100 transition-opacity`,
-  hover:after:translate-y-[-1px] hover:after:opacity-100
+    clsx`after:absolute after:block after:w-full after:h-px after:bg-white/50 after:translate-y-[3px] after:opacity-0 after:transition`,
-`
+    clsx`hover:after:translate-y-[-1px] hover:after:opacity-100`,
+    active
+      ? clsx`text-emerald-500 after:bg-emerald-500`
+      : clsx`after:bg-white/50`,
+  )
 
 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-p:my-3
   prose-a:font-medium prose-a:text-emerald-400 hover:prose-a:no-underline
   prose-strong:font-medium prose-strong:text-emerald-400
   prose-pre:font-monospace prose-pre:overflow-x-auto
+  prose-code:before:hidden prose-code:after:hidden prose-code:text-slate-400
+  prose-li:mb-5
   max-w-none
 `
+
+export const buttonClass = ({
+  variant,
+}: {
+  variant: "solid" | "semiblack"
+}) => {
+  return clsx(
+    clsx`inline-block mt-4 px-4 py-2.5 text-xl transition rounded-lg`,
+    clsx`hover:translate-y-[-2px] hover:shadow`,
+    clsx`active:translate-y-[0px] active:transition-none`, // using translate-y-[0px] instead of just -0 so it takes priority
+    variant === "solid" && clsx`bg-emerald-700 hover:bg-emerald-800`,
+    variant === "semiblack" && clsx`bg-black/25 hover:bg-black/40`,
+  )
+}

packages/website/app/modules/ui/modal.tsx

@@ -0,0 +1,80 @@
+import { XIcon } from "@heroicons/react/outline"
+import clsx from "clsx"
+import type { ReactNode } from "react"
+import { useEffect, useRef, useState } from "react"
+import { FocusOn } from "react-focus-on"
+import { Portal } from "~/modules/dom/portal"
+
+export function Modal({
+  children,
+  visible,
+  onClose,
+}: {
+  children: ReactNode
+  visible: boolean
+  onClose: () => void
+}) {
+  const closeButtonRef = useRef<HTMLButtonElement>(null)
+
+  useEffect(() => {
+    if (visible) {
+      // trying to immediately focus doesn't work for whatever reason
+      // neither did requestAnimationFrame
+      setTimeout(() => {
+        closeButtonRef.current?.focus()
+      }, 50)
+    }
+  }, [visible])
+
+  return (
+    <Portal>
+      <div
+        className={clsx(
+          "bg-black/70 fixed inset-0 transition-all flex flex-col p-4",
+          visible ? "opacity-100 visible" : "opacity-0 invisible",
+        )}
+      >
+        <FocusOn
+          className={clsx(
+            "m-auto flex flex-col gap-2 w-full max-h-full max-w-screen-sm overflow-y-auto transition",
+            visible ? "translate-y-0" : "translate-y-3",
+          )}
+          enabled={visible}
+          onClickOutside={onClose}
+          onEscapeKey={onClose}
+        >
+          <button
+            type="button"
+            className="self-end"
+            onClick={onClose}
+            ref={closeButtonRef}
+          >
+            <span className="sr-only">Close</span>
+            <XIcon aria-hidden className="w-6 text-white" />
+          </button>
+          <div className={clsx("bg-slate-700 rounded-md shadow p-4")}>
+            {children}
+          </div>
+        </FocusOn>
+      </div>
+    </Portal>
+  )
+}
+
+export function UncontrolledModal({
+  children,
+  button,
+}: {
+  children: ReactNode
+  button: (buttonProps: { onClick: () => void }) => void
+}) {
+  const [visible, setVisible] = useState(false)
+  return (
+    <>
+      {button({ onClick: () => setVisible(true) })}
+      <Modal visible={visible} onClose={() => setVisible(false)}>
+        {children}
+      </Modal>
+    </>
+  )
+}

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

@@ -1,32 +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
-        role="menu"
-        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/website/app/modules/ui/popper.tsx

@@ -0,0 +1,41 @@
+import { useRect } from "@reach/rect"
+import * as React from "react"
+import { Portal } from "~/modules/dom/portal"
+
+export function Popper({
+  renderReference,
+  renderPopover,
+}: {
+  renderReference: (referenceProps: {
+    ref: (element: HTMLElement | null | undefined) => void
+  }) => React.ReactNode
+  renderPopover: () => React.ReactNode
+}) {
+  const [reference, referenceRef] = React.useState<HTMLElement | null>()
+  const referenceRect = useRect(useValueAsRefObject(reference))
+
+  return (
+    <>
+      {renderReference({ ref: referenceRef })}
+      <Portal>
+        {referenceRect && (
+          <div
+            className="fixed -translate-x-full"
+            style={{
+              left: referenceRect.right,
+              top: referenceRect.bottom + 16,
+            }}
+          >
+            {renderPopover()}
+          </div>
+        )}
+      </Portal>
+    </>
+  )
+}
+
+function useValueAsRefObject<Value>(value: Value): { readonly current: Value } {
+  const ref = React.useRef<Value>(value)
+  ref.current = value
+  return ref
+}

packages/website/app/root.tsx

@@ -1,24 +1,49 @@
 import packageJson from "reacord/package.json"
-import type { LinksFunction, LoaderFunction, MetaFunction } from "remix"
+import type {
+  LinksFunction,
+  LoaderFunction,
+  MetaFunction,
+} from "@remix-run/node"
 import {
   Links,
   LiveReload,
   Meta,
   Outlet,
+  Scripts,
   ScrollRestoration,
   useLoaderData,
-} from "remix"
+} from "@remix-run/react"
+import bannerUrl from "~/assets/banner.png"
+import faviconUrl from "~/assets/favicon.png"
 import { GuideLinksProvider } from "~/modules/navigation/guide-links-context"
 import type { GuideLink } from "~/modules/navigation/load-guide-links.server"
 import { loadGuideLinks } from "~/modules/navigation/load-guide-links.server"
 import prismThemeCss from "~/modules/ui/prism-theme.css"
+import tailwindCss from "~/modules/ui/tailwind.out.css"
 
 export const meta: MetaFunction = () => ({
-  title: "Reacord",
+  "title": "Reacord",
-  description: packageJson.description,
+  "description": packageJson.description,
+  "theme-color": "#21754b",
+
+  "og:url": "https://reacord.mapleleaf.dev/",
+  "og:type": "website",
+  "og:title": "Reacord",
+  "og:description": "Create interactive Discord messages using React",
+  "og:image": bannerUrl,
+
+  "twitter:card": "summary_large_image",
+  "twitter:domain": "reacord.mapleleaf.dev",
+  "twitter:url": "https://reacord.mapleleaf.dev/",
+  "twitter:title": "Reacord",
+  "twitter:description": "Create interactive Discord messages using React",
+  "twitter:image": bannerUrl,
 })
 
 export const links: LinksFunction = () => [
+  { rel: "icon", type: "image/png", href: faviconUrl },
+  { rel: "stylesheet", href: tailwindCss },
+  { rel: "stylesheet", href: prismThemeCss },
   { rel: "preconnect", href: "https://fonts.googleapis.com" },
   {
     rel: "preconnect",
@@ -30,8 +55,10 @@ export const links: LinksFunction = () => [
     as: "style",
     href: "https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500&family=Rubik:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap",
   },
-  { rel: "stylesheet", href: "/tailwind.css" },
+  {
-  { rel: "stylesheet", href: prismThemeCss },
+    rel: "stylesheet",
+    href: "https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500&family=Rubik:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap",
+  },
 ]
 
 type LoaderData = {
@@ -54,13 +81,20 @@ export default function App() {
         <meta name="viewport" content="width=device-width,initial-scale=1" />
         <Meta />
         <Links />
-        <script defer src="https://unpkg.com/alpinejs@3.7.1/dist/cdn.min.js" />
+        {process.env.NODE_ENV === "production" && (
+          <script
+            async
+            data-website-id="49c69ade-5593-4853-9686-c9ca9d519a18"
+            src="https://umami-production-265f.up.railway.app/umami.js"
+          />
+        )}
       </head>
       <body>
         <GuideLinksProvider value={data.guideLinks}>
           <Outlet />
         </GuideLinksProvider>
         <ScrollRestoration />
+        <Scripts />
         {process.env.NODE_ENV === "development" && <LiveReload />}
       </body>
     </html>

packages/website/app/routes/guides.tsx

@@ -1,5 +1,6 @@
 import clsx from "clsx"
-import { Outlet } from "remix"
+import { Outlet } from "@remix-run/react"
+import { ActiveLink } from "~/modules/navigation/active-link"
 import { AppLink } from "~/modules/navigation/app-link"
 import { useGuideLinksContext } from "~/modules/navigation/guide-links-context"
 import { MainNavigation } from "~/modules/navigation/main-navigation"
@@ -12,7 +13,7 @@ import {
 export default function GuidePage() {
   const guideLinks = useGuideLinksContext()
   return (
-    <>
+    <div className="isolate">
       <header className="bg-slate-700/30 shadow sticky top-0 backdrop-blur-sm transition z-10 flex">
         <div className={maxWidthContainer}>
           <MainNavigation />
@@ -24,7 +25,11 @@ export default function GuidePage() {
           <ul className="mt-3 flex flex-col gap-2 items-start">
             {guideLinks.map(({ link }) => (
               <li key={link.to}>
-                <AppLink {...link} className={linkClass} />
+                <ActiveLink to={link.to}>
+                  {({ active }) => (
+                    <AppLink {...link} className={linkClass({ active })} />
+                  )}
+                </ActiveLink>
               </li>
             ))}
           </ul>
@@ -33,6 +38,6 @@ export default function GuidePage() {
           <Outlet />
         </section>
       </main>
-    </>
+    </div>
   )
 }

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/app/routes/index.tsx

@@ -1,29 +1,63 @@
-import packageJson from "reacord/package.json"
+import dotsBackgroundUrl from "~/assets/dots-background.svg"
-import LandingExample from "~/modules/landing/landing-example.mdx"
+import { AppFooter } from "~/modules/app/app-footer"
+import { AppLogo } from "~/modules/app/app-logo"
+import LandingCode from "~/modules/landing/landing-code.mdx"
 import { MainNavigation } from "~/modules/navigation/main-navigation"
-import { maxWidthContainer } from "~/modules/ui/components"
+import { buttonClass, maxWidthContainer } from "~/modules/ui/components"
+import { LandingAnimation } from "../modules/landing/landing-animation"
+import { UncontrolledModal } from "../modules/ui/modal"
 
 export default function Landing() {
   return (
-    <div className="flex flex-col min-w-0 min-h-screen text-center">
+    <>
+      <div
+        className="fixed inset-0 rotate-6 scale-125 opacity-20"
+        style={{ backgroundImage: `url(${dotsBackgroundUrl})` }}
+      />
+      <div className="flex flex-col relative min-w-0 min-h-screen pb-4 gap-4">
         <header className={maxWidthContainer}>
           <MainNavigation />
         </header>
-      <div className="px-4 pb-8 flex flex-1">
+        <div className="flex flex-col gap-4 my-auto px-4">
-        <main className="px-4 py-6 rounded-lg shadow bg-slate-800 space-y-5 m-auto w-full max-w-xl">
+          <AppLogo className="w-full max-w-lg mx-auto" />
-          <h1 className="text-6xl font-light">reacord</h1>
+
-          <section className="mx-auto text-sm sm:text-base">
+          <div className="max-w-md w-full mx-auto">
-            <LandingExample />
+            <LandingAnimation />
-          </section>
+          </div>
-          <p className="text-2xl font-light">{packageJson.description}</p>
+
+          <p className="text-center text-lg font-light -mb-1">
+            Create interactive Discord messages with React.
+          </p>
+
+          <div className="flex gap-4 self-center">
             <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"
+              className={buttonClass({ variant: "solid" })}
             >
               Get Started
             </a>
-        </main>
+
+            <UncontrolledModal
+              button={(button) => (
+                <button
+                  {...button}
+                  className={buttonClass({ variant: "semiblack" })}
+                >
+                  Show Code
+                </button>
+              )}
+            >
+              <div className="text-sm sm:text-base">
+                <LandingCode />
+              </div>
+            </UncontrolledModal>
           </div>
         </div>
+
+        <div className="text-center">
+          <AppFooter />
+        </div>
+      </div>
+    </>
   )
 }

packages/website/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/website/cypress/support/index.js

@@ -14,7 +14,7 @@
 // ***********************************************************
 
 // Import commands.js using ES2015 syntax:
-import './commands'
+import "./commands"
 
 // Alternatively you can use CommonJS syntax:
 // require('./commands')

packages/website/package.json

@@ -2,47 +2,51 @@
   "private": true,
   "name": "website",
   "scripts": {
-    "prepare": "remix setup node",
+    "dev": "concurrently 'typedoc --watch' 'pnpm tailwind -- --watch' 'remix dev'",
-    "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",
+    "build": "typedoc && pnpm tailwind -- --minify && remix build",
     "start": "remix-serve build",
+    "tailwind": "tailwindcss --config tailwind.config.cjs --input app/modules/ui/tailwind.css --output app/modules/ui/tailwind.out.css",
     "typecheck": "tsc --noEmit && tsc --project cypress/tsconfig.json --noEmit"
   },
   "dependencies": {
-    "@heroicons/react": "^1.0.5",
+    "@headlessui/react": "^1.5.0",
-    "@remix-run/react": "^1.1.1",
+    "@heroicons/react": "^1.0.6",
-    "@remix-run/serve": "^1.1.1",
+    "@reach/rect": "^0.17.0",
-    "@tailwindcss/typography": "^0.5.0",
+    "@remix-run/node": "^1.4.1",
-    "autoprefixer": "^10.4.2",
+    "@remix-run/react": "^1.4.1",
+    "@remix-run/serve": "^1.4.1",
+    "@tailwindcss/typography": "^0.5.2",
     "clsx": "^1.1.1",
-    "fast-glob": "^3.2.10",
+    "fast-glob": "^3.2.11",
     "gray-matter": "^4.0.3",
-    "postcss": "^8.4.5",
     "reacord": "workspace:*",
-    "react": "^17.0.2",
+    "react": "^18.0.0",
-    "react-dom": "^17.0.2",
+    "react-dom": "^18.0.0",
-    "remix": "^1.1.1",
+    "react-focus-on": "^3.5.4",
-    "remix-tailwind": "^0.2.1",
+    "react-router": "^6.3.0",
-    "tailwindcss": "^3.0.12"
+    "react-router-dom": "^6.3.0"
   },
   "devDependencies": {
-    "@remix-run/dev": "^1.1.1",
+    "@remix-run/dev": "^1.4.1",
-    "@remix-run/node": "^1.1.1",
+    "@remix-run/node": "^1.4.1",
     "@testing-library/cypress": "^8.0.2",
     "@types/node": "*",
-    "@types/react": "^17.0.38",
+    "@types/react": "^18.0.6",
-    "@types/react-dom": "^17.0.11",
+    "@types/react-dom": "^18.0.2",
-    "@types/tailwindcss": "^3.0.2",
+    "@types/tailwindcss": "^3.0.10",
     "@types/wait-on": "^5.3.1",
-    "concurrently": "^7.0.0",
+    "autoprefixer": "^10.4.4",
-    "cypress": "^9.2.1",
+    "concurrently": "^7.1.0",
-    "execa": "^6.0.0",
+    "cypress": "^9.5.4",
-    "rehype-prism-plus": "^1.3.0",
+    "execa": "^6.1.0",
-    "typedoc": "^0.22.10",
+    "postcss": "^8.4.12",
-    "typescript": "^4.5.4",
+    "rehype-prism-plus": "^1.3.2",
-    "wait-on": "^6.0.0"
+    "tailwindcss": "^3.0.24",
+    "typedoc": "^0.22.15",
+    "typescript": "^4.6.3",
+    "wait-on": "^6.0.1"
   },
   "engines": {
     "node": ">=14"

packages/website/scripts/test.js

@@ -6,5 +6,4 @@ 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()

packages/website/tsconfig.json

@@ -2,6 +2,7 @@
   "extends": "../../tsconfig.base.json",
   "compilerOptions": {
     "jsx": "react-jsx",
+    "baseUrl": ".",
     "paths": {
       "~/*": ["./app/*"]
     }

todo.md

@@ -75,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