move stuff around

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]()
+  }
+}

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)
+}

library/internal/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/internal/message.ts

@@ -0,0 +1,36 @@
+import type { EmbedOptions } from "../core/components/embed-options"
+
+export type MessageOptions = {
+  content: string
+  embeds: EmbedOptions[]
+  actionRows: Array<
+    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 = {
+  type: "select"
+  customId: string
+}
+
+export type Message = {
+  edit(options: MessageOptions): Promise<void>
+  disableComponents(): Promise<void>
+}

library/internal/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/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 "./renderer.js"
+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.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/internal/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/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
+  }
+}