instance management and deactivation

playground/counter.tsx

@@ -4,7 +4,7 @@ import { EmbedField } from "../src.new/embed/embed-field.js"
 import { EmbedTitle } from "../src.new/embed/embed-title.js"
 import { Embed } from "../src.new/embed/embed.js"
 
-export function Counter() {
+export function Counter(props: { onDeactivate: () => void }) {
   const [count, setCount] = React.useState(0)
   const [embedVisible, setEmbedVisible] = React.useState(false)
 
@@ -32,6 +32,7 @@ export function Counter() {
       {!embedVisible && (
         <Button label="show embed" onClick={() => setEmbedVisible(true)} />
       )}
+      <Button style="danger" label="deactivate" onClick={props.onDeactivate} />
     </>
   )
 }

playground/main.tsx

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

src.new/main.ts

@@ -8,15 +8,32 @@ import type { OpaqueRoot } from "react-reconciler"
 import { reconciler } from "./reconciler.js"
 import { Renderer } from "./renderer.js"
 
-export class InstanceManager {
-  private instances = new Set<Instance>()
+export type ReacordConfig = {
+  /**
+   * A Discord.js client. Reacord will listen to interaction events
+   * and send them to active instances. */
+  client: Client
 
-  private constructor() {}
+  /**
+   * The max number of active instances.
+   * When this limit is exceeded, the oldest instances will be disabled.
+   */
+  maxInstances?: number
+}
 
-  static create(client: Client) {
-    const manager = new InstanceManager()
+export class Reacord {
+  private instances: Instance[] = []
 
-    client.on("interactionCreate", (interaction) => {
+  private constructor(private readonly config: ReacordConfig) {}
+
+  private get maxInstances() {
+    return this.config.maxInstances ?? 50
+  }
+
+  static create(config: ReacordConfig) {
+    const manager = new Reacord(config)
+
+    config.client.on("interactionCreate", (interaction) => {
       if (!interaction.isMessageComponent()) return
       for (const instance of manager.instances) {
         if (instance.handleInteraction(interaction)) return
@@ -26,14 +43,23 @@ export class InstanceManager {
     return manager
   }
 
-  create(interaction: CommandInteraction) {
+  reply(interaction: CommandInteraction) {
     const instance = new Instance(interaction)
-    this.instances.add(instance)
-    return instance
+    this.instances.push(instance)
+
+    if (this.instances.length > this.maxInstances) {
+      this.deactivate(this.instances[0]!)
+    }
+
+    return {
+      render: (content: ReactNode) => instance.render(content),
+      deactivate: () => this.deactivate(instance),
+    }
   }
 
-  destroy(instance: Instance) {
-    this.instances.delete(instance)
+  private deactivate(instance: Instance) {
+    this.instances = this.instances.filter((it) => it !== instance)
+    instance.deactivate()
   }
 }
 
@@ -50,6 +76,10 @@ class Instance {
     reconciler.updateContainer(content, this.container)
   }
 
+  deactivate() {
+    this.renderer.deactivate()
+  }
+
   handleInteraction(interaction: MessageComponentInteraction) {
     return this.renderer.handleInteraction(interaction)
   }

src.new/renderer.ts

@@ -3,6 +3,7 @@ import type {
   MessageComponentInteraction,
   MessageOptions,
 } from "discord.js"
+import type { Subscription } from "rxjs"
 import { Subject } from "rxjs"
 import { concatMap } from "rxjs/operators"
 import { Container } from "./container.js"
@@ -12,20 +13,43 @@ import type { Node } from "./node.js"
 // 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?: MessageComponentInteraction
   private messageId?: string
-  private updates = new Subject<MessageOptions>()
+  private updates = new Subject<UpdatePayload>()
+  private updateSubscription: Subscription
+  private active = true
 
   constructor(private interaction: CommandInteraction) {
-    this.updates
-      .pipe(concatMap((options) => this.updateMessage(options)))
+    this.updateSubscription = this.updates
+      .pipe(concatMap((payload) => this.updateMessage(payload)))
       .subscribe()
   }
 
   render() {
-    this.updates.next(this.getMessageOptions())
+    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",
+    })
   }
 
   handleInteraction(interaction: MessageComponentInteraction) {
@@ -49,7 +73,28 @@ export class Renderer {
     return options
   }
 
-  private async updateMessage(options: MessageOptions) {
+  private async updateMessage({ options, action }: UpdatePayload) {
+    if (action === "deactivate" && this.messageId) {
+      this.updateSubscription.unsubscribe()
+
+      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
+    }
+
     if (this.componentInteraction) {
       const promise = this.componentInteraction.update(options)
       this.componentInteraction = undefined