move stuff around until it feels right

library/adapter/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
+}

library/adapter/discord-js-adapter.ts

@@ -0,0 +1,103 @@
+import type * as Discord from "discord.js"
+import { raise } from "../../helpers/raise"
+import { toUpper } from "../../helpers/to-upper"
+import type { CommandInteraction, ComponentInteraction } from "../interaction"
+import type { Message, MessageOptions } from "../message"
+import type { Adapter } from "./adapter"
+
+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))
+      }
+    })
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  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}`)
+      }),
+    })),
+  }
+}

library/adapter/test-adapter.ts

@@ -0,0 +1,107 @@
+import { nanoid } from "nanoid"
+import { raise } from "../../helpers/raise"
+import type {
+  ButtonInteraction,
+  CommandInteraction,
+  ComponentInteraction,
+} from "../interaction"
+import type { Message, MessageButtonOptions, MessageOptions } from "../message"
+import type { Adapter } from "./adapter"
+
+export class TestAdapter implements Adapter<{}> {
+  readonly messages: TestMessage[] = []
+
+  // eslint-disable-next-line class-methods-use-this
+  private componentInteractionListener: (
+    interaction: ComponentInteraction,
+  ) => void = () => {}
+
+  addComponentInteractionListener(
+    listener: (interaction: ComponentInteraction) => void,
+  ): void {
+    this.componentInteractionListener = listener
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  createCommandInteraction(
+    interaction: CommandInteraction,
+  ): CommandInteraction {
+    return interaction
+  }
+
+  findButtonByLabel(label: string) {
+    for (const message of this.messages) {
+      for (const component of message.options.actionRows.flat()) {
+        if (component.type === "button" && component.label === label) {
+          return this.createButtonActions(component, message)
+        }
+      }
+    }
+    raise(`Couldn't find button with label "${label}"`)
+  }
+
+  private createButtonActions(
+    button: MessageButtonOptions,
+    message: TestMessage,
+  ) {
+    return {
+      click: () => {
+        this.componentInteractionListener(
+          new TestButtonInteraction(button.customId, message),
+        )
+      },
+    }
+  }
+}
+
+export class TestMessage implements Message {
+  constructor(public options: MessageOptions) {}
+
+  async edit(options: MessageOptions): Promise<void> {
+    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
+        }
+      }
+    }
+  }
+}
+
+export class TestCommandInteraction implements CommandInteraction {
+  readonly type = "command"
+  readonly id = "test-command-interaction"
+  readonly channelId = "test-channel-id"
+
+  constructor(private adapter: TestAdapter) {}
+
+  private createMesssage(messageOptions: MessageOptions): Message {
+    const message = new TestMessage(messageOptions)
+    this.adapter.messages.push(message)
+    return message
+  }
+
+  reply(messageOptions: MessageOptions): Promise<Message> {
+    return Promise.resolve(this.createMesssage(messageOptions))
+  }
+
+  followUp(messageOptions: MessageOptions): Promise<Message> {
+    return Promise.resolve(this.createMesssage(messageOptions))
+  }
+}
+
+export class TestButtonInteraction implements ButtonInteraction {
+  readonly type = "button"
+  readonly id = nanoid()
+  readonly channelId = "test-channel-id"
+
+  constructor(readonly customId: string, readonly message: TestMessage) {}
+
+  async update(options: MessageOptions): Promise<void> {
+    this.message.options = options
+  }
+}

library/button.tsx

@@ -0,0 +1,60 @@
+import { nanoid } from "nanoid"
+import React from "react"
+import { last } from "../helpers/last.js"
+import { ReacordElement } from "./element.js"
+import type { ButtonInteraction, ComponentInteraction } from "./interaction"
+import type { MessageOptions } from "./message"
+import { Node } from "./node.js"
+
+export type ButtonProps = {
+  label?: string
+  style?: "primary" | "secondary" | "success" | "danger"
+  disabled?: boolean
+  emoji?: string
+  onClick: (interaction: ButtonInteraction) => void
+}
+
+export function Button(props: ButtonProps) {
+  return (
+    <ReacordElement props={props} createNode={() => new ButtonNode(props)} />
+  )
+}
+
+class ButtonNode extends Node<ButtonProps> {
+  private customId = nanoid()
+
+  override modifyMessageOptions(options: MessageOptions): void {
+    options.actionRows ??= []
+
+    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: this.props.style ?? "secondary",
+      disabled: this.props.disabled,
+      emoji: this.props.emoji,
+      label: this.props.label,
+    })
+  }
+
+  override handleComponentInteraction(interaction: ComponentInteraction) {
+    if (
+      interaction.type === "button" &&
+      interaction.customId === this.customId
+    ) {
+      this.props.onClick(interaction)
+      return true
+    }
+    return false
+  }
+}

library/container.ts

@@ -0,0 +1,27 @@
+export class Container<T> {
+  private items: T[] = []
+
+  add(...items: T[]) {
+    this.items.push(...items)
+  }
+
+  addBefore(item: T, before: T) {
+    let index = this.items.indexOf(before)
+    if (index === -1) {
+      index = this.items.length
+    }
+    this.items.splice(index, 0, item)
+  }
+
+  remove(toRemove: T) {
+    this.items = this.items.filter((item) => item !== toRemove)
+  }
+
+  clear() {
+    this.items = []
+  }
+
+  [Symbol.iterator]() {
+    return this.items[Symbol.iterator]()
+  }
+}

library/element.ts

@@ -0,0 +1,11 @@
+import type { ReactNode } from "react"
+import React from "react"
+import type { Node } from "./node.js"
+
+export function ReacordElement<Props>(props: {
+  props: Props
+  createNode: () => Node<Props>
+  children?: ReactNode
+}) {
+  return React.createElement("reacord-element", props)
+}

library/embed/embed-child.ts

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

library/embed/embed-field.tsx

@@ -0,0 +1,30 @@
+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
+  inline?: boolean
+  children: string
+}
+
+export function EmbedField(props: EmbedFieldProps) {
+  return (
+    <ReacordElement
+      props={props}
+      createNode={() => new EmbedFieldNode(props)}
+    />
+  )
+}
+
+class EmbedFieldNode extends EmbedChildNode<EmbedFieldProps> {
+  override modifyEmbedOptions(options: EmbedOptions): void {
+    options.fields ??= []
+    options.fields.push({
+      name: this.props.name,
+      value: this.props.children,
+      inline: this.props.inline,
+    })
+  }
+}

library/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
+}

library/embed/embed-title.tsx

@@ -0,0 +1,25 @@
+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
+  url?: string
+}
+
+export function EmbedTitle(props: EmbedTitleProps) {
+  return (
+    <ReacordElement
+      props={props}
+      createNode={() => new EmbedTitleNode(props)}
+    />
+  )
+}
+
+class EmbedTitleNode extends EmbedChildNode<EmbedTitleProps> {
+  override modifyEmbedOptions(options: EmbedOptions): void {
+    options.title = this.props.children
+    options.url = this.props.url
+  }
+}

library/embed/embed.tsx

@@ -0,0 +1,51 @@
+import React from "react"
+import { omit } from "../../helpers/omit"
+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?: string
+  color?: number
+  footer?: {
+    text: string
+    iconURL?: string
+  }
+  image?: {
+    url: string
+  }
+  thumbnail?: {
+    url: string
+  }
+  author?: {
+    name: string
+    url?: string
+    iconURL?: string
+  }
+  children?: React.ReactNode
+}
+
+export function Embed(props: EmbedProps) {
+  return (
+    <ReacordElement props={props} createNode={() => new EmbedNode(props)}>
+      {props.children}
+    </ReacordElement>
+  )
+}
+
+class EmbedNode extends Node<EmbedProps> {
+  override modifyMessageOptions(options: MessageOptions): void {
+    const embed = omit(this.props, ["children"])
+    for (const child of this.children) {
+      if (child instanceof EmbedChildNode) {
+        child.modifyEmbedOptions(embed)
+      }
+    }
+
+    options.embeds ??= []
+    options.embeds.push(embed)
+  }
+}

library/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>
+}

library/main.ts

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

library/message.ts

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

library/node.ts

@@ -0,0 +1,23 @@
+/* eslint-disable class-methods-use-this */
+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>>()
+  protected props: Props
+
+  constructor(initialProps: Props) {
+    this.props = initialProps
+  }
+
+  setProps(props: Props) {
+    this.props = props
+  }
+
+  modifyMessageOptions(options: MessageOptions) {}
+
+  handleComponentInteraction(interaction: ComponentInteraction): boolean {
+    return false
+  }
+}

library/reacord.ts

@@ -0,0 +1,63 @@
+import type { ReactNode } from "react"
+import type { Adapter } from "./adapter/adapter"
+import { reconciler } from "./reconciler.js"
+import { Renderer } from "./renderer.js"
+
+export type ReacordConfig<InteractionInit> = {
+  adapter: Adapter<InteractionInit>
+
+  /**
+   * The max number of active instances.
+   * When this limit is exceeded, the oldest instances will be disabled.
+   */
+  maxInstances?: number
+}
+
+export type ReacordInstance = {
+  render: (content: ReactNode) => void
+  deactivate: () => void
+}
+
+export class Reacord<InteractionInit> {
+  private renderers: Renderer[] = []
+
+  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
+  }
+
+  createCommandReply(target: InteractionInit): ReacordInstance {
+    if (this.renderers.length > this.maxInstances) {
+      this.deactivate(this.renderers[0]!)
+    }
+
+    const renderer = new Renderer(
+      this.config.adapter.createCommandInteraction(target),
+    )
+
+    this.renderers.push(renderer)
+
+    const container = reconciler.createContainer(renderer, 0, false, {})
+
+    return {
+      render: (content: ReactNode) => {
+        reconciler.updateContainer(content, container)
+      },
+      deactivate: () => {
+        this.deactivate(renderer)
+      },
+    }
+  }
+
+  private deactivate(renderer: Renderer) {
+    this.renderers = this.renderers.filter((it) => it !== renderer)
+    renderer.deactivate()
+  }
+}

library/reconciler.ts

@@ -0,0 +1,102 @@
+import type { HostConfig } from "react-reconciler"
+import ReactReconciler from "react-reconciler"
+import { raise } from "../helpers/raise.js"
+import { Node } from "./node.js"
+import type { Renderer } from "./renderer.js"
+import { TextNode } from "./text.js"
+
+const config: HostConfig<
+  string, // Type,
+  Record<string, unknown>, // Props,
+  Renderer, // Container,
+  Node<unknown>, // Instance,
+  TextNode, // TextInstance,
+  never, // SuspenseInstance,
+  never, // HydratableInstance,
+  never, // PublicInstance,
+  never, // HostContext,
+  true, // UpdatePayload,
+  never, // ChildSet,
+  number, // TimeoutHandle,
+  number // NoTimeout,
+> = {
+  // config
+  now: Date.now,
+  supportsMutation: true,
+  supportsPersistence: false,
+  supportsHydration: false,
+  isPrimaryRenderer: true,
+  scheduleTimeout: global.setTimeout,
+  cancelTimeout: global.clearTimeout,
+  noTimeout: -1,
+
+  // eslint-disable-next-line unicorn/no-null
+  getRootHostContext: () => null,
+  getChildHostContext: (parentContext) => parentContext,
+
+  createInstance: (type, props) => {
+    if (type !== "reacord-element") {
+      raise(`Unknown element type: ${type}`)
+    }
+
+    if (typeof props.createNode !== "function") {
+      raise(`Missing createNode function`)
+    }
+
+    const node = props.createNode(props.props)
+    if (!(node instanceof Node)) {
+      raise(`createNode function did not return a Node`)
+    }
+
+    return node
+  },
+  createTextInstance: (text) => new TextNode(text),
+  shouldSetTextContent: () => false,
+
+  clearContainer: (renderer) => {
+    renderer.nodes.clear()
+  },
+  appendChildToContainer: (renderer, child) => {
+    renderer.nodes.add(child)
+  },
+  removeChildFromContainer: (renderer, child) => {
+    renderer.nodes.remove(child)
+  },
+  insertInContainerBefore: (renderer, child, before) => {
+    renderer.nodes.addBefore(child, before)
+  },
+
+  appendInitialChild: (parent, child) => {
+    parent.children.add(child)
+  },
+  appendChild: (parent, child) => {
+    parent.children.add(child)
+  },
+  removeChild: (parent, child) => {
+    parent.children.remove(child)
+  },
+  insertBefore: (parent, child, before) => {
+    parent.children.addBefore(child, before)
+  },
+
+  prepareUpdate: () => true,
+  commitUpdate: (node, payload, type, oldProps, newProps) => {
+    node.setProps(newProps.props)
+  },
+  commitTextUpdate: (node, oldText, newText) => {
+    node.setProps(newText)
+  },
+
+  // eslint-disable-next-line unicorn/no-null
+  prepareForCommit: () => null,
+  resetAfterCommit: (renderer) => {
+    renderer.render()
+  },
+
+  preparePortalMount: () => raise("Portals are not supported"),
+  getPublicInstance: () => raise("Refs are currently not supported"),
+
+  finalizeInitialChildren: () => false,
+}
+
+export const reconciler = ReactReconciler(config)

library/renderer.ts

@@ -0,0 +1,100 @@
+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,
+// so we know whether to call reply() or followUp()
+const repliedInteractionIds = new Set<string>()
+
+type UpdatePayload = {
+  options: MessageOptions
+  action: "update" | "deactivate"
+}
+
+export class Renderer {
+  readonly nodes = new Container<Node<unknown>>()
+  private componentInteraction?: ComponentInteraction
+  private message?: Message
+  private updates = new Subject<UpdatePayload>()
+  private updateSubscription: Subscription
+  private active = true
+
+  constructor(private interaction: CommandInteraction) {
+    this.updateSubscription = this.updates
+      .pipe(concatMap((payload) => this.updateMessage(payload)))
+      .subscribe({ error: console.error })
+  }
+
+  render() {
+    if (!this.active) {
+      console.warn("Attempted to update a deactivated message")
+      return
+    }
+
+    this.updates.next({
+      options: this.getMessageOptions(),
+      action: "update",
+    })
+  }
+
+  deactivate() {
+    this.active = false
+    this.updates.next({
+      options: this.getMessageOptions(),
+      action: "deactivate",
+    })
+  }
+
+  handleComponentInteraction(interaction: ComponentInteraction) {
+    this.componentInteraction = interaction
+    for (const node of this.nodes) {
+      if (node.handleComponentInteraction(interaction)) {
+        return true
+      }
+    }
+  }
+
+  private getMessageOptions(): MessageOptions {
+    const options: MessageOptions = {
+      content: "",
+      embeds: [],
+      actionRows: [],
+    }
+    for (const node of this.nodes) {
+      node.modifyMessageOptions(options)
+    }
+    return options
+  }
+
+  private async updateMessage({ options, action }: UpdatePayload) {
+    if (action === "deactivate" && this.message) {
+      this.updateSubscription.unsubscribe()
+      await this.message.disableComponents()
+      return
+    }
+
+    if (this.componentInteraction) {
+      const promise = this.componentInteraction.update(options)
+      this.componentInteraction = undefined
+      await promise
+      return
+    }
+
+    if (this.message) {
+      await this.message.edit(options)
+      return
+    }
+
+    if (repliedInteractionIds.has(this.interaction.id)) {
+      this.message = await this.interaction.followUp(options)
+      return
+    }
+
+    repliedInteractionIds.add(this.interaction.id)
+    this.message = await this.interaction.reply(options)
+  }
+}

library/text.ts

@@ -0,0 +1,8 @@
+import type { MessageOptions } from "./message"
+import { Node } from "./node.js"
+
+export class TextNode extends Node<string> {
+  override modifyMessageOptions(options: MessageOptions) {
+    options.content = (options.content ?? "") + this.props
+  }
+}