use adapter to make discord.js optional

notes.md

@@ -1,17 +1,17 @@
 # core features
 
-- [x] rendering core
+- [ ] render to channel
-- [ ] render to interaction
+- [x] render to interaction
 - [ ] ephemeral messages
 - [x] message content
 - embed
   - [x] color
-  - [x] author
+  - [ ] author
   - [x] description
   - [x] title - text children, url
-  - [x] footer - icon url, timestamp, text children
+  - [ ] footer - icon url, timestamp, text children
-  - [x] thumbnail - url
+  - [ ] thumbnail - url
-  - [x] image - url
+  - [ ] image - url
   - [x] fields - name, value, inline
 - message components
   - [x] buttons
@@ -20,11 +20,16 @@
   - [ ] action row
   - [x] button onClick
   - [ ] select onChange
+- [x] deactivate
+- [ ] destroy
 
 # cool ideas / polish
 
+- [ ] message property on reacord instance
 - [ ] files
 - [ ] stickers
 - [ ] user mention component
 - [ ] channel mention component
 - [ ] timestamp component
+- [ ] `useMessage`
+- [ ] `useReactions`

package.json

@@ -35,6 +35,11 @@
     "discord.js": "^13.3",
     "react": ">=17"
   },
+  "peerDependenciesMeta": {
+    "discord.js": {
+      "optional": true
+    }
+  },
   "devDependencies": {
     "@itsmapleleaf/configs": "^1.1.2",
     "@typescript-eslint/eslint-plugin": "^5.8.0",

playground/main.tsx

@@ -1,6 +1,7 @@
 import { Client } from "discord.js"
 import "dotenv/config"
 import React from "react"
+import { DiscordJsAdapter } from "../src/discord-js-adapter"
 import { Reacord } from "../src/main.js"
 import { createCommandHandler } from "./command-handler.js"
 import { Counter } from "./counter.js"
@@ -9,14 +10,17 @@ const client = new Client({
   intents: ["GUILDS"],
 })
 
-const reacord = Reacord.create({ client, maxInstances: 2 })
+const reacord = new Reacord({
+  adapter: new DiscordJsAdapter(client),
+  maxInstances: 2,
+})
 
 createCommandHandler(client, [
   {
     name: "counter",
     description: "shows a counter button",
     run: (interaction) => {
-      const reply = reacord.reply(interaction)
+      const reply = reacord.createCommandReply(interaction)
       reply.render(<Counter onDeactivate={() => reply.deactivate()} />)
     },
   },

src/adapter.ts

@@ -0,0 +1,9 @@
+import type { CommandInteraction, ComponentInteraction } from "./interaction"
+
+export type Adapter<InteractionInit> = {
+  addComponentInteractionListener(
+    listener: (interaction: ComponentInteraction) => void,
+  ): void
+
+  createCommandInteraction(interactionInfo: InteractionInit): CommandInteraction
+}

src/button.tsx

@@ -1,24 +1,16 @@
-import type {
-  ButtonInteraction,
-  CacheType,
-  EmojiResolvable,
-  MessageButtonStyle,
-  MessageComponentInteraction,
-  MessageOptions,
-} from "discord.js"
-import { MessageActionRow } from "discord.js"
 import { nanoid } from "nanoid"
 import React from "react"
 import { ReacordElement } from "./element.js"
 import { last } from "./helpers/last.js"
-import { toUpper } from "./helpers/to-upper.js"
+import type { ButtonInteraction, ComponentInteraction } from "./interaction"
+import type { MessageOptions } from "./message"
 import { Node } from "./node.js"
 
 export type ButtonProps = {
   label?: string
-  style?: Exclude<Lowercase<MessageButtonStyle>, "link">
+  style?: "primary" | "secondary" | "success" | "danger"
   disabled?: boolean
-  emoji?: EmojiResolvable
+  emoji?: string
   onClick: (interaction: ButtonInteraction) => void
 }
 
@@ -31,44 +23,38 @@ export function Button(props: ButtonProps) {
 class ButtonNode extends Node<ButtonProps> {
   private customId = nanoid()
 
-  private get buttonOptions() {
+  override modifyMessageOptions(options: MessageOptions): void {
-    return {
+    options.actionRows ??= []
-      type: "BUTTON",
+
+    let actionRow = last(options.actionRows)
+
+    if (
+      actionRow == undefined ||
+      actionRow.length >= 5 ||
+      actionRow[0]?.type === "select"
+    ) {
+      actionRow = []
+      options.actionRows.push(actionRow)
+    }
+
+    actionRow.push({
+      type: "button",
       customId: this.customId,
-      style: toUpper(this.props.style ?? "secondary"),
+      style: this.props.style ?? "secondary",
       disabled: this.props.disabled,
       emoji: this.props.emoji,
       label: this.props.label,
-    } as const
+    })
   }
 
-  override modifyMessageOptions(options: MessageOptions): void {
+  override handleComponentInteraction(interaction: ComponentInteraction) {
-    options.components ??= []
-
-    let actionRow = last(options.components)
-
     if (
-      !actionRow ||
+      interaction.type === "button" &&
-      actionRow.components.length >= 5 ||
+      interaction.customId === this.customId
-      actionRow.components[0]?.type === "SELECT_MENU"
     ) {
-      actionRow = new MessageActionRow()
-      options.components.push(actionRow)
-    }
-
-    if (actionRow instanceof MessageActionRow) {
-      actionRow.addComponents(this.buttonOptions)
-    } else {
-      actionRow.components.push(this.buttonOptions)
-    }
-  }
-
-  override handleInteraction(
-    interaction: MessageComponentInteraction<CacheType>,
-  ) {
-    if (interaction.isButton() && interaction.customId === this.customId) {
       this.props.onClick(interaction)
       return true
     }
+    return false
   }
 }

src/discord-js-adapter.ts

@@ -0,0 +1,102 @@
+import type * as Discord from "discord.js"
+import type { Adapter } from "./adapter"
+import { raise } from "./helpers/raise"
+import { toUpper } from "./helpers/to-upper"
+import type { CommandInteraction, ComponentInteraction } from "./interaction"
+import type { Message, MessageOptions } from "./message"
+
+export class DiscordJsAdapter implements Adapter<Discord.CommandInteraction> {
+  constructor(private client: Discord.Client) {}
+
+  addComponentInteractionListener(
+    listener: (interaction: ComponentInteraction) => void,
+  ) {
+    this.client.on("interactionCreate", (interaction) => {
+      if (interaction.isButton()) {
+        listener(createReacordComponentInteraction(interaction))
+      }
+    })
+  }
+
+  createCommandInteraction(
+    interaction: Discord.CommandInteraction,
+  ): CommandInteraction {
+    return {
+      type: "command",
+      id: interaction.id,
+      channelId: interaction.channelId,
+      reply: async (options) => {
+        const message = await interaction.reply({
+          ...getDiscordMessageOptions(options),
+          fetchReply: true,
+        })
+        return createReacordMessage(message as Discord.Message)
+      },
+      followUp: async (options) => {
+        const message = await interaction.followUp({
+          ...getDiscordMessageOptions(options),
+          fetchReply: true,
+        })
+        return createReacordMessage(message as Discord.Message)
+      },
+    }
+  }
+}
+
+function createReacordComponentInteraction(
+  interaction: Discord.MessageComponentInteraction,
+): ComponentInteraction {
+  return {
+    type: "button",
+    id: interaction.id,
+    channelId: interaction.channelId,
+    customId: interaction.customId,
+    update: async (options) => {
+      await interaction.update(getDiscordMessageOptions(options))
+    },
+  }
+}
+
+function createReacordMessage(message: Discord.Message): Message {
+  return {
+    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,
+      })
+    },
+  }
+}
+
+function getDiscordMessageOptions(
+  options: MessageOptions,
+): Discord.MessageOptions {
+  return {
+    content: options.content,
+    embeds: options.embeds,
+    components: options.actionRows.map((row) => ({
+      type: "ACTION_ROW",
+      components: row.map((component) => {
+        if (component.type === "button") {
+          return {
+            type: "BUTTON",
+            customId: component.customId,
+            label: component.label ?? "",
+            style: toUpper(component.style ?? "secondary"),
+            disabled: component.disabled,
+            emoji: component.emoji,
+          }
+        }
+        raise(`Unsupported component type: ${component.type}`)
+      }),
+    })),
+  }
+}

src/embed/embed-child.ts

@@ -1,6 +1,6 @@
-import type { MessageEmbedOptions } from "discord.js"
 import { Node } from "../node.js"
+import type { EmbedOptions } from "./embed-options"
 
 export abstract class EmbedChildNode<Props> extends Node<Props> {
-  abstract modifyEmbedOptions(options: MessageEmbedOptions): void
+  abstract modifyEmbedOptions(options: EmbedOptions): void
 }

src/embed/embed-field.tsx

@@ -1,7 +1,7 @@
-import type { MessageEmbedOptions } from "discord.js"
 import React from "react"
 import { ReacordElement } from "../element.js"
 import { EmbedChildNode } from "./embed-child.js"
+import type { EmbedOptions } from "./embed-options"
 
 export type EmbedFieldProps = {
   name: string
@@ -19,7 +19,7 @@ export function EmbedField(props: EmbedFieldProps) {
 }
 
 class EmbedFieldNode extends EmbedChildNode<EmbedFieldProps> {
-  override modifyEmbedOptions(options: MessageEmbedOptions): void {
+  override modifyEmbedOptions(options: EmbedOptions): void {
     options.fields ??= []
     options.fields.push({
       name: this.props.name,

src/embed/embed-options.ts

@@ -0,0 +1,19 @@
+export type EmbedOptions = {
+  title?: string
+  description?: string
+  url?: string
+  timestamp?: string
+  color?: number
+  fields?: EmbedFieldOptions[]
+  author?: { name: string; url?: string; icon_url?: string }
+  thumbnail?: { url: string }
+  image?: { url: string }
+  video?: { url: string }
+  footer?: { text: string; icon_url?: string }
+}
+
+export type EmbedFieldOptions = {
+  name: string
+  value: string
+  inline?: boolean
+}

src/embed/embed-title.tsx

@@ -1,7 +1,7 @@
-import type { MessageEmbedOptions } from "discord.js"
 import React from "react"
 import { ReacordElement } from "../element.js"
 import { EmbedChildNode } from "./embed-child.js"
+import type { EmbedOptions } from "./embed-options"
 
 export type EmbedTitleProps = {
   children: string
@@ -18,7 +18,7 @@ export function EmbedTitle(props: EmbedTitleProps) {
 }
 
 class EmbedTitleNode extends EmbedChildNode<EmbedTitleProps> {
-  override modifyEmbedOptions(options: MessageEmbedOptions): void {
+  override modifyEmbedOptions(options: EmbedOptions): void {
     options.title = this.props.children
     options.url = this.props.url
   }

src/embed/embed.tsx

@@ -1,13 +1,13 @@
-import type { MessageOptions } from "discord.js"
 import React from "react"
 import { ReacordElement } from "../element.js"
+import type { MessageOptions } from "../message"
 import { Node } from "../node.js"
 import { EmbedChildNode } from "./embed-child.js"
 
 export type EmbedProps = {
   description?: string
   url?: string
-  timestamp?: Date
+  timestamp?: string
   color?: number
   footer?: {
     text: string

src/interaction.ts

@@ -0,0 +1,29 @@
+import type { Message, MessageOptions } from "./message"
+
+export type Interaction = CommandInteraction | ComponentInteraction
+
+export type CommandInteraction = {
+  type: "command"
+  id: string
+  channelId: string
+  reply(messageOptions: MessageOptions): Promise<Message>
+  followUp(messageOptions: MessageOptions): Promise<Message>
+}
+
+export type ComponentInteraction = ButtonInteraction | SelectInteraction
+
+export type ButtonInteraction = {
+  type: "button"
+  id: string
+  channelId: string
+  customId: string
+  update(options: MessageOptions): Promise<void>
+}
+
+export type SelectInteraction = {
+  type: "select"
+  id: string
+  channelId: string
+  customId: string
+  update(options: MessageOptions): Promise<void>
+}

src/main.ts

@@ -1,5 +1,9 @@
+export * from "./adapter"
 export * from "./button"
+export * from "./discord-js-adapter"
 export * from "./embed/embed"
 export * from "./embed/embed-field"
 export * from "./embed/embed-title"
+export * from "./interaction"
+export * from "./message"
 export * from "./reacord"

src/message.ts

@@ -0,0 +1,28 @@
+import type { EmbedOptions } from "./embed/embed-options"
+
+export type MessageOptions = {
+  content: string
+  embeds: EmbedOptions[]
+  actionRows: Array<
+    Array<
+      | {
+          type: "button"
+          customId: string
+          label?: string
+          style?: "primary" | "secondary" | "success" | "danger"
+          disabled?: boolean
+          emoji?: string
+        }
+      | {
+          type: "select"
+          customId: string
+          // todo
+        }
+    >
+  >
+}
+
+export type Message = {
+  edit(options: MessageOptions): Promise<void>
+  disableComponents(): Promise<void>
+}

src/node.ts

@@ -1,6 +1,7 @@
 /* eslint-disable class-methods-use-this */
-import type { MessageComponentInteraction, MessageOptions } from "discord.js"
 import { Container } from "./container.js"
+import type { ComponentInteraction } from "./interaction"
+import type { MessageOptions } from "./message"
 
 export abstract class Node<Props> {
   readonly children = new Container<Node<unknown>>()
@@ -16,9 +17,7 @@ export abstract class Node<Props> {
 
   modifyMessageOptions(options: MessageOptions) {}
 
-  handleInteraction(
+  handleComponentInteraction(interaction: ComponentInteraction): boolean {
-    interaction: MessageComponentInteraction,
+    return false
-  ): true | undefined {
-    return undefined
   }
 }

src/reacord.ts

@@ -1,13 +1,10 @@
-import type { Client, CommandInteraction } from "discord.js"
 import type { ReactNode } from "react"
+import type { Adapter } from "./adapter"
 import { reconciler } from "./reconciler.js"
 import { Renderer } from "./renderer.js"
 
-export type ReacordConfig = {
+export type ReacordConfig<InteractionInit> = {
-  /**
+  adapter: Adapter<InteractionInit>
-   * A Discord.js client. Reacord will listen to interaction events
-   * and send them to active instances. */
-  client: Client
 
   /**
    * The max number of active instances.
@@ -21,34 +18,30 @@ export type ReacordInstance = {
   deactivate: () => void
 }
 
-export class Reacord {
+export class Reacord<InteractionInit> {
   private renderers: Renderer[] = []
 
-  private constructor(private readonly config: ReacordConfig) {}
+  constructor(private readonly config: ReacordConfig<InteractionInit>) {
+    config.adapter.addComponentInteractionListener((interaction) => {
+      for (const renderer of this.renderers) {
+        if (renderer.handleComponentInteraction(interaction)) return
+      }
+    })
+  }
 
   private get maxInstances() {
     return this.config.maxInstances ?? 50
   }
 
-  static create(config: ReacordConfig) {
+  createCommandReply(target: InteractionInit): ReacordInstance {
-    const manager = new Reacord(config)
-
-    config.client.on("interactionCreate", (interaction) => {
-      if (!interaction.isMessageComponent()) return
-      for (const renderer of manager.renderers) {
-        if (renderer.handleInteraction(interaction)) return
-      }
-    })
-
-    return manager
-  }
-
-  reply(interaction: CommandInteraction): ReacordInstance {
     if (this.renderers.length > this.maxInstances) {
       this.deactivate(this.renderers[0]!)
     }
 
-    const renderer = new Renderer(interaction)
+    const renderer = new Renderer(
+      this.config.adapter.createCommandInteraction(target),
+    )
+
     this.renderers.push(renderer)
 
     const container = reconciler.createContainer(renderer, 0, false, {})

src/renderer.ts

@@ -1,12 +1,9 @@
-import type {
-  CommandInteraction,
-  MessageComponentInteraction,
-  MessageOptions,
-} from "discord.js"
 import type { Subscription } from "rxjs"
 import { Subject } from "rxjs"
 import { concatMap } from "rxjs/operators"
 import { Container } from "./container.js"
+import type { CommandInteraction, ComponentInteraction } from "./interaction"
+import type { Message, MessageOptions } from "./message"
 import type { Node } from "./node.js"
 
 // keep track of interaction ids which have replies,
@@ -20,8 +17,8 @@ type UpdatePayload = {
 
 export class Renderer {
   readonly nodes = new Container<Node<unknown>>()
-  private componentInteraction?: MessageComponentInteraction
+  private componentInteraction?: ComponentInteraction
-  private messageId?: string
+  private message?: Message
   private updates = new Subject<UpdatePayload>()
   private updateSubscription: Subscription
   private active = true
@@ -52,10 +49,10 @@ export class Renderer {
     })
   }
 
-  handleInteraction(interaction: MessageComponentInteraction) {
+  handleComponentInteraction(interaction: ComponentInteraction) {
+    this.componentInteraction = interaction
     for (const node of this.nodes) {
-      this.componentInteraction = interaction
+      if (node.handleComponentInteraction(interaction)) {
-      if (node.handleInteraction(interaction)) {
         return true
       }
     }
@@ -65,7 +62,7 @@ export class Renderer {
     const options: MessageOptions = {
       content: "",
       embeds: [],
-      components: [],
+      actionRows: [],
     }
     for (const node of this.nodes) {
       node.modifyMessageOptions(options)
@@ -74,24 +71,9 @@ export class Renderer {
   }
 
   private async updateMessage({ options, action }: UpdatePayload) {
-    if (action === "deactivate" && this.messageId) {
+    if (action === "deactivate" && this.message) {
       this.updateSubscription.unsubscribe()
-
+      await this.message.disableComponents()
-      const message = await this.interaction.channel?.messages.fetch(
-        this.messageId,
-      )
-      if (!message) return
-
-      for (const actionRow of message.components) {
-        for (const component of actionRow.components) {
-          component.setDisabled(true)
-        }
-      }
-
-      await this.interaction.channel?.messages.edit(message.id, {
-        components: message.components,
-      })
-
       return
     }
 
@@ -102,25 +84,17 @@ export class Renderer {
       return
     }
 
-    if (this.messageId) {
+    if (this.message) {
-      await this.interaction.channel?.messages.edit(this.messageId, options)
+      await this.message.edit(options)
       return
     }
 
     if (repliedInteractionIds.has(this.interaction.id)) {
-      const message = await this.interaction.followUp({
+      this.message = await this.interaction.followUp(options)
-        ...options,
-        fetchReply: true,
-      })
-      this.messageId = message.id
       return
     }
 
     repliedInteractionIds.add(this.interaction.id)
-    const message = await this.interaction.reply({
+    this.message = await this.interaction.reply(options)
-      ...options,
-      fetchReply: true,
-    })
-    this.messageId = message.id
   }
 }

src/text.ts

@@ -1,4 +1,4 @@
-import type { MessageOptions } from "discord.js"
+import type { MessageOptions } from "./message"
 import { Node } from "./node.js"
 
 export class TextNode extends Node<string> {