reply instance deletion

library/core/adapters/discord-js-adapter.ts

@@ -100,6 +100,9 @@ function createReacordMessage(message: Discord.Message): Message {
         components: message.components,
       })
     },
+    delete: async () => {
+      await message.delete()
+    },
   }
 }
 

library/core/reacord.ts

@@ -16,6 +16,7 @@ export type ReacordConfig<InteractionInit> = {
 export type ReacordInstance = {
   render: (content: ReactNode) => void
   deactivate: () => void
+  destroy: () => void
 }
 
 export class Reacord<InteractionInit> {
@@ -53,6 +54,10 @@ export class Reacord<InteractionInit> {
       deactivate: () => {
         this.deactivate(renderer)
       },
+      destroy: () => {
+        this.renderers = this.renderers.filter((it) => it !== renderer)
+        renderer.destroy()
+      },
     }
   }
 

library/internal/message.ts

@@ -45,6 +45,7 @@ export type MessageSelectOptionOptions = {
 
 export type Message = {
   edit(options: MessageOptions): Promise<void>
+  delete(): Promise<void>
   disableComponents(): Promise<void>
 }
 

library/internal/renderer.ts

@@ -10,10 +10,9 @@ import type { Node } from "./node.js"
 // so we know whether to call reply() or followUp()
 const repliedInteractionIds = new Set<string>()
 
-type UpdatePayload = {
+type UpdatePayload =
-  options: MessageOptions
+  | { action: "update" | "deactivate"; options: MessageOptions }
-  action: "update" | "deactivate"
+  | { action: "destroy" }
-}
 
 export class Renderer {
   readonly nodes = new Container<Node<unknown>>()
@@ -49,6 +48,11 @@ export class Renderer {
     })
   }
 
+  destroy() {
+    this.active = false
+    this.updates.next({ action: "destroy" })
+  }
+
   handleComponentInteraction(interaction: ComponentInteraction) {
     this.componentInteraction = interaction
     for (const node of this.nodes) {
@@ -70,31 +74,37 @@ export class Renderer {
     return options
   }
 
-  private async updateMessage({ options, action }: UpdatePayload) {
+  private async updateMessage(payload: UpdatePayload) {
-    if (action === "deactivate" && this.message) {
+    if (payload.action === "destroy") {
       this.updateSubscription.unsubscribe()
-      await this.message.disableComponents()
+      await this.message?.delete()
+      return
+    }
+
+    if (payload.action === "deactivate") {
+      this.updateSubscription.unsubscribe()
+      await this.message?.disableComponents()
       return
     }
 
     if (this.componentInteraction) {
-      const promise = this.componentInteraction.update(options)
+      const promise = this.componentInteraction.update(payload.options)
       this.componentInteraction = undefined
       await promise
       return
     }
 
     if (this.message) {
-      await this.message.edit(options)
+      await this.message.edit(payload.options)
       return
     }
 
     if (repliedInteractionIds.has(this.interaction.id)) {
-      this.message = await this.interaction.followUp(options)
+      this.message = await this.interaction.followUp(payload.options)
       return
     }
 
     repliedInteractionIds.add(this.interaction.id)
-    this.message = await this.interaction.reply(options)
+    this.message = await this.interaction.reply(payload.options)
   }
 }

library/testing.ts

@@ -17,7 +17,7 @@ import type {
 } from "./internal/message"
 
 export class TestAdapter implements Adapter<TestCommandInteraction> {
-  readonly messages: TestMessage[] = []
+  messages: TestMessage[] = []
 
   private componentInteractionListener: (
     interaction: ComponentInteraction,
@@ -60,6 +60,10 @@ export class TestAdapter implements Adapter<TestCommandInteraction> {
     raise(`Couldn't find select with placeholder "${placeholder}"`)
   }
 
+  removeMessage(message: TestMessage) {
+    this.messages = this.messages.filter((m) => m !== message)
+  }
+
   private createButtonActions(
     button: MessageButtonOptions,
     message: TestMessage,
@@ -88,7 +92,7 @@ export class TestAdapter implements Adapter<TestCommandInteraction> {
 }
 
 export class TestMessage implements Message {
-  constructor(public options: MessageOptions) {}
+  constructor(public options: MessageOptions, private adapter: TestAdapter) {}
 
   async edit(options: MessageOptions): Promise<void> {
     this.options = options
@@ -103,6 +107,10 @@ export class TestMessage implements Message {
       }
     }
   }
+
+  async delete(): Promise<void> {
+    this.adapter.removeMessage(this)
+  }
 }
 
 export class TestCommandInteraction implements CommandInteraction {
@@ -113,7 +121,7 @@ export class TestCommandInteraction implements CommandInteraction {
   constructor(private adapter: TestAdapter) {}
 
   private createMesssage(messageOptions: MessageOptions): Message {
-    const message = new TestMessage(messageOptions)
+    const message = new TestMessage(messageOptions, this.adapter)
     this.adapter.messages.push(message)
     return message
   }

test/reacord.test.tsx

@@ -3,9 +3,9 @@ import { Button, Embed, EmbedField, EmbedTitle } from "../library/main"
 import { TestCommandInteraction } from "../library/testing"
 import { setupReacordTesting } from "./setup-testing"
 
+test("rendering behavior", async () => {
   const { reacord, adapter, assertMessages } = setupReacordTesting()
 
-test("rendering behavior", async () => {
   const reply = reacord.createCommandReply(new TestCommandInteraction(adapter))
   reply.render(<KitchenSinkCounter onDeactivate={() => reply.deactivate()} />)
 
@@ -241,6 +241,32 @@ test("rendering behavior", async () => {
   ])
 })
 
+test("delete", async () => {
+  const { reacord, adapter, assertMessages } = setupReacordTesting()
+
+  const reply = reacord.createCommandReply(new TestCommandInteraction(adapter))
+  reply.render(
+    <>
+      some text
+      <Embed>some embed</Embed>
+      <Button label="some button" onClick={() => {}} />
+    </>,
+  )
+
+  await assertMessages([
+    {
+      content: "some text",
+      embeds: [{ description: "some embed" }],
+      actionRows: [
+        [{ type: "button", style: "secondary", label: "some button" }],
+      ],
+    },
+  ])
+
+  reply.destroy()
+  await assertMessages([])
+})
+
 // test multiple instances that can be updated independently,
 // + old instances getting deactivated once the limit is reached
 test.todo("multiple instances")

todo.md

@@ -22,9 +22,14 @@
   - [x] action row
   - [x] button onClick
 - [x] deactivate
-- [ ] destroy
+- [x] destroy
 - [ ] docs
 
+# internal
+
+- [ ] combine `MessageOptions` and `Message` into a single message object (?)
+- [ ] consider always calling `deferUpdate` on component interactions
+
 # cool ideas / polish
 
 - [ ] message property on reacord instance