workspace

packages/reacord/library/internal/channel.ts

@@ -0,0 +1,5 @@
+import type { Message, MessageOptions } from "./message"
+
+export type Channel = {
+  send(message: MessageOptions): Promise<Message>
+}

packages/reacord/library/internal/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]()
+  }
+}

packages/reacord/library/internal/element.ts

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

packages/reacord/library/internal/interaction.ts

@@ -0,0 +1,35 @@
+import type { ComponentEvent } from "../core/component-event"
+import type { ButtonClickEvent, SelectChangeEvent } from "../main"
+import type { Message, MessageOptions } from "./message"
+
+export type Interaction = CommandInteraction | ComponentInteraction
+export type ComponentInteraction = ButtonInteraction | SelectInteraction
+
+export type CommandInteraction = BaseInteraction<"command">
+
+export type ButtonInteraction = BaseComponentInteraction<
+  "button",
+  ButtonClickEvent
+>
+
+export type SelectInteraction = BaseComponentInteraction<
+  "select",
+  SelectChangeEvent
+>
+
+export type BaseInteraction<Type extends string> = {
+  type: Type
+  id: string
+  reply(messageOptions: MessageOptions): Promise<Message>
+  followUp(messageOptions: MessageOptions): Promise<Message>
+}
+
+export type BaseComponentInteraction<
+  Type extends string,
+  Event extends ComponentEvent,
+> = BaseInteraction<Type> & {
+  event: Event
+  customId: string
+  update(options: MessageOptions): Promise<void>
+  deferUpdate(): Promise<void>
+}

packages/reacord/library/internal/limited-collection.ts

@@ -0,0 +1,24 @@
+export class LimitedCollection<T> {
+  private items: T[] = []
+
+  constructor(private readonly size: number) {}
+
+  add(item: T) {
+    if (this.items.length >= this.size) {
+      this.items.shift()
+    }
+    this.items.push(item)
+  }
+
+  has(item: T) {
+    return this.items.includes(item)
+  }
+
+  values(): readonly T[] {
+    return this.items
+  }
+
+  [Symbol.iterator]() {
+    return this.items[Symbol.iterator]()
+  }
+}

packages/reacord/library/internal/message.ts

@@ -0,0 +1,63 @@
+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"
+
+export type MessageOptions = {
+  content: string
+  embeds: EmbedOptions[]
+  actionRows: ActionRow[]
+}
+
+export type ActionRow = Array<
+  MessageButtonOptions | MessageLinkOptions | MessageSelectOptions
+>
+
+export type MessageButtonOptions = {
+  type: "button"
+  customId: string
+  label?: string
+  style?: "primary" | "secondary" | "success" | "danger"
+  disabled?: boolean
+  emoji?: string
+}
+
+export type MessageLinkOptions = {
+  type: "link"
+  url: string
+  label?: string
+  emoji?: string
+  disabled?: boolean
+}
+
+export type MessageSelectOptions = Except<SelectProps, "children" | "value"> & {
+  type: "select"
+  customId: string
+  options: MessageSelectOptionOptions[]
+}
+
+export type MessageSelectOptionOptions = {
+  label: string
+  value: string
+  description?: string
+  emoji?: string
+}
+
+export type Message = {
+  edit(options: MessageOptions): Promise<void>
+  delete(): Promise<void>
+  disableComponents(): Promise<void>
+}
+
+export function getNextActionRow(options: MessageOptions): ActionRow {
+  let actionRow = last(options.actionRows)
+  if (
+    actionRow == undefined ||
+    actionRow.length >= 5 ||
+    actionRow[0]?.type === "select"
+  ) {
+    actionRow = []
+    options.actionRows.push(actionRow)
+  }
+  return actionRow
+}

packages/reacord/library/internal/node.ts

@@ -0,0 +1,16 @@
+/* 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>>()
+
+  constructor(public props: Props) {}
+
+  modifyMessageOptions(options: MessageOptions) {}
+
+  handleComponentInteraction(interaction: ComponentInteraction): boolean {
+    return false
+  }
+}

packages/reacord/library/internal/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 "./renderers/renderer"
+import { TextNode } from "./text-node.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.props = newProps.props
+  },
+  commitTextUpdate: (node, oldText, newText) => {
+    node.props = 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)

packages/reacord/library/internal/renderers/channel-message-renderer.ts

@@ -0,0 +1,13 @@
+import type { Channel } from "../channel"
+import type { Message, MessageOptions } from "../message"
+import { Renderer } from "./renderer"
+
+export class ChannelMessageRenderer extends Renderer {
+  constructor(private channel: Channel) {
+    super()
+  }
+
+  protected createMessage(options: MessageOptions): Promise<Message> {
+    return this.channel.send(options)
+  }
+}

packages/reacord/library/internal/renderers/interaction-reply-renderer.ts

@@ -0,0 +1,22 @@
+import type { Interaction } from "../interaction"
+import type { Message, MessageOptions } from "../message"
+import { Renderer } from "./renderer"
+
+// keep track of interaction ids which have replies,
+// so we know whether to call reply() or followUp()
+const repliedInteractionIds = new Set<string>()
+
+export class InteractionReplyRenderer extends Renderer {
+  constructor(private interaction: Interaction) {
+    super()
+  }
+
+  protected createMessage(options: MessageOptions): Promise<Message> {
+    if (repliedInteractionIds.has(this.interaction.id)) {
+      return this.interaction.followUp(options)
+    }
+
+    repliedInteractionIds.add(this.interaction.id)
+    return this.interaction.reply(options)
+  }
+}

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

@@ -0,0 +1,109 @@
+import { Subject } from "rxjs"
+import { concatMap } from "rxjs/operators"
+import { Container } from "../container.js"
+import type { ComponentInteraction } from "../interaction"
+import type { Message, MessageOptions } from "../message"
+import type { Node } from "../node.js"
+
+type UpdatePayload =
+  | { action: "update" | "deactivate"; options: MessageOptions }
+  | { action: "deferUpdate"; interaction: ComponentInteraction }
+  | { action: "destroy" }
+
+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 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",
+    })
+  }
+
+  destroy() {
+    this.active = false
+    this.updates.next({ action: "destroy" })
+  }
+
+  handleComponentInteraction(interaction: ComponentInteraction) {
+    this.componentInteraction = interaction
+
+    setTimeout(() => {
+      this.updates.next({ action: "deferUpdate", interaction })
+    }, 500)
+
+    for (const node of this.nodes) {
+      if (node.handleComponentInteraction(interaction)) {
+        return true
+      }
+    }
+  }
+
+  protected abstract createMessage(options: MessageOptions): Promise<Message>
+
+  private getMessageOptions(): MessageOptions {
+    const options: MessageOptions = {
+      content: "",
+      embeds: [],
+      actionRows: [],
+    }
+    for (const node of this.nodes) {
+      node.modifyMessageOptions(options)
+    }
+    return options
+  }
+
+  private async updateMessage(payload: UpdatePayload) {
+    if (payload.action === "destroy") {
+      this.updateSubscription.unsubscribe()
+      await this.message?.delete()
+      return
+    }
+
+    if (payload.action === "deactivate") {
+      this.updateSubscription.unsubscribe()
+      await this.message?.disableComponents()
+      return
+    }
+
+    if (payload.action === "deferUpdate") {
+      await payload.interaction.deferUpdate()
+      return
+    }
+
+    if (this.componentInteraction) {
+      const promise = this.componentInteraction.update(payload.options)
+      this.componentInteraction = undefined
+      await promise
+      return
+    }
+
+    if (this.message) {
+      await this.message.edit(payload.options)
+      return
+    }
+
+    this.message = await this.createMessage(payload.options)
+  }
+}

packages/reacord/library/internal/text-node.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
+  }
+}

packages/reacord/library/internal/timeout.ts

@@ -0,0 +1,20 @@
+export class Timeout {
+  private timeoutId?: NodeJS.Timeout
+
+  constructor(
+    private readonly time: number,
+    private readonly callback: () => void,
+  ) {}
+
+  run() {
+    this.cancel()
+    this.timeoutId = setTimeout(this.callback, this.time)
+  }
+
+  cancel() {
+    if (this.timeoutId) {
+      clearTimeout(this.timeoutId)
+      this.timeoutId = undefined
+    }
+  }
+}