add channel renderer + try to simplify adapter generics

library/core/adapters/adapter.ts

@@ -1,9 +1,15 @@
+import type { Channel } from "../../internal/channel"
 import type {
   CommandInteraction,
   ComponentInteraction,
 } from "../../internal/interaction"
 
-export type Adapter<CommandReplyInit> = {
+export type AdapterGenerics = {
+  commandReplyInit: unknown
+  channelInit: unknown
+}
+
+export type Adapter<Generics extends AdapterGenerics> = {
   /**
    * @internal
    */
@@ -14,5 +20,12 @@ export type Adapter<CommandReplyInit> = {
   /**
    * @internal
    */
-  createCommandInteraction(init: CommandReplyInit): CommandInteraction
+  createCommandInteraction(
+    init: Generics["commandReplyInit"],
+  ): CommandInteraction
+
+  /**
+   * @internal
+   */
+  createChannel(init: Generics["channelInit"]): Channel
 }

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

@@ -1,6 +1,7 @@
 import type * as Discord from "discord.js"
 import { raise } from "../../../helpers/raise"
 import { toUpper } from "../../../helpers/to-upper"
+import type { Channel } from "../../internal/channel"
 import type {
   CommandInteraction,
   ComponentInteraction,
@@ -8,7 +9,12 @@ import type {
 import type { Message, MessageOptions } from "../../internal/message"
 import type { Adapter } from "./adapter"
 
-export class DiscordJsAdapter implements Adapter<Discord.CommandInteraction> {
+type DiscordJsAdapterGenerics = {
+  commandReplyInit: Discord.CommandInteraction
+  channelInit: Discord.TextBasedChannel
+}
+
+export class DiscordJsAdapter implements Adapter<DiscordJsAdapterGenerics> {
   constructor(private client: Discord.Client) {}
 
   /**
@@ -51,6 +57,19 @@ export class DiscordJsAdapter implements Adapter<Discord.CommandInteraction> {
       },
     }
   }
+
+  /**
+   * @internal
+   */
+  // eslint-disable-next-line class-methods-use-this
+  createChannel(channel: Discord.TextBasedChannel): Channel {
+    return {
+      send: async (options) => {
+        const message = await channel.send(getDiscordMessageOptions(options))
+        return createReacordMessage(message)
+      },
+    }
+  }
 }
 
 function createReacordComponentInteraction(

library/core/reacord.ts

@@ -1,10 +1,12 @@
 import type { ReactNode } from "react"
+import { ChannelMessageRenderer } from "../internal/channel-message-renderer"
+import { CommandReplyRenderer } from "../internal/command-reply-renderer.js"
 import { reconciler } from "../internal/reconciler.js"
-import { Renderer } from "../internal/renderer.js"
+import type { Renderer } from "../internal/renderer"
-import type { Adapter } from "./adapters/adapter"
+import type { Adapter, AdapterGenerics } from "./adapters/adapter"
 
-export type ReacordConfig<InteractionInit> = {
+export type ReacordConfig<Generics extends AdapterGenerics> = {
-  adapter: Adapter<InteractionInit>
+  adapter: Adapter<Generics>
 
   /**
    * The max number of active instances.
@@ -19,10 +21,10 @@ export type ReacordInstance = {
   destroy: () => void
 }
 
-export class Reacord<InteractionInit> {
+export class Reacord<Generics extends AdapterGenerics> {
   private renderers: Renderer[] = []
 
-  constructor(private readonly config: ReacordConfig<InteractionInit>) {
+  constructor(private readonly config: ReacordConfig<Generics>) {
     config.adapter.addComponentInteractionListener((interaction) => {
       for (const renderer of this.renderers) {
         if (renderer.handleComponentInteraction(interaction)) return
@@ -34,15 +36,25 @@ export class Reacord<InteractionInit> {
     return this.config.maxInstances ?? 50
   }
 
-  createCommandReply(target: InteractionInit): ReacordInstance {
+  send(init: Generics["channelInit"]): ReacordInstance {
+    return this.createInstance(
+      new ChannelMessageRenderer(this.config.adapter.createChannel(init)),
+    )
+  }
+
+  reply(init: Generics["commandReplyInit"]): ReacordInstance {
+    return this.createInstance(
+      new CommandReplyRenderer(
+        this.config.adapter.createCommandInteraction(init),
+      ),
+    )
+  }
+
+  private createInstance(renderer: Renderer) {
     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, {})

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

library/internal/channel.ts

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

library/internal/command-reply-renderer.ts

@@ -0,0 +1,22 @@
+import type { CommandInteraction } 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 CommandReplyRenderer extends Renderer {
+  constructor(private interaction: CommandInteraction) {
+    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)
+  }
+}

library/internal/reconciler.ts

@@ -2,7 +2,7 @@ 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 type { Renderer } from "./renderer"
 import { TextNode } from "./text-node.js"
 
 const config: HostConfig<

library/internal/renderer.ts

@@ -1,32 +1,24 @@
-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 { 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 =
   | { action: "update" | "deactivate"; options: MessageOptions }
   | { action: "destroy" }
 
-export class Renderer {
+export abstract 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
+  private updates = new Subject<UpdatePayload>()
 
-  constructor(private interaction: CommandInteraction) {
+  private updateSubscription = this.updates
-    this.updateSubscription = this.updates
+    .pipe(concatMap((payload) => this.updateMessage(payload)))
-      .pipe(concatMap((payload) => this.updateMessage(payload)))
+    .subscribe({ error: console.error })
-      .subscribe({ error: console.error })
-  }
 
   render() {
     if (!this.active) {
@@ -62,6 +54,8 @@ export class Renderer {
     }
   }
 
+  protected abstract createMessage(options: MessageOptions): Promise<Message>
+
   private getMessageOptions(): MessageOptions {
     const options: MessageOptions = {
       content: "",
@@ -99,12 +93,6 @@ export class Renderer {
       return
     }
 
-    if (repliedInteractionIds.has(this.interaction.id)) {
+    this.message = await this.createMessage(payload.options)
-      this.message = await this.interaction.followUp(payload.options)
-      return
-    }
-
-    repliedInteractionIds.add(this.interaction.id)
-    this.message = await this.interaction.reply(payload.options)
   }
 }

library/testing.ts

@@ -3,6 +3,7 @@
 import { nanoid } from "nanoid"
 import { raise } from "../helpers/raise"
 import type { Adapter } from "./core/adapters/adapter"
+import type { Channel } from "./internal/channel"
 import type {
   ButtonInteraction,
   CommandInteraction,
@@ -16,9 +17,20 @@ import type {
   MessageSelectOptions,
 } from "./internal/message"
 
-export class TestAdapter implements Adapter<TestCommandInteraction> {
+type TestAdapterGenerics = {
+  commandReplyInit: TestCommandInteraction
+  channelInit: TestChannel
+}
+
+export class TestAdapter implements Adapter<TestAdapterGenerics> {
   messages: TestMessage[] = []
 
+  private constructor() {}
+
+  static create(): Adapter<TestAdapterGenerics> & TestAdapter {
+    return new TestAdapter()
+  }
+
   private componentInteractionListener: (
     interaction: ComponentInteraction,
   ) => void = () => {}
@@ -35,6 +47,10 @@ export class TestAdapter implements Adapter<TestCommandInteraction> {
     return interaction
   }
 
+  createChannel(channel: TestChannel): Channel {
+    return channel
+  }
+
   findButtonByLabel(label: string) {
     for (const message of this.messages) {
       for (const component of message.options.actionRows.flat()) {
@@ -162,3 +178,13 @@ export class TestSelectInteraction implements SelectInteraction {
     this.message.options = options
   }
 }
+
+export class TestChannel implements Channel {
+  constructor(private adapter: TestAdapter) {}
+
+  async send(messageOptions: MessageOptions): Promise<Message> {
+    const message = new TestMessage(messageOptions, this.adapter)
+    this.adapter.messages.push(message)
+    return message
+  }
+}

playground/main.tsx

@@ -20,7 +20,7 @@ createCommandHandler(client, [
     name: "counter",
     description: "shows a counter button",
     run: (interaction) => {
-      const reply = reacord.createCommandReply(interaction)
+      const reply = reacord.reply(interaction)
       reply.render(<Counter onDeactivate={() => reply.destroy()} />)
     },
   },
@@ -28,7 +28,7 @@ createCommandHandler(client, [
     name: "select",
     description: "shows a select",
     run: (interaction) => {
-      reacord.createCommandReply(interaction).render(<FruitSelect />)
+      reacord.reply(interaction).render(<FruitSelect />)
     },
   },
 ])

test/channel-message-renderer.tsx

@@ -0,0 +1,2 @@
+test.todo("channel message renderer")
+export {}

test/reacord.test.tsx

@@ -6,7 +6,7 @@ import { setupReacordTesting } from "./setup-testing"
 test("rendering behavior", async () => {
   const { reacord, adapter, assertMessages } = setupReacordTesting()
 
-  const reply = reacord.createCommandReply(new TestCommandInteraction(adapter))
+  const reply = reacord.reply(new TestCommandInteraction(adapter))
   reply.render(<KitchenSinkCounter onDeactivate={() => reply.deactivate()} />)
 
   await assertMessages([
@@ -244,7 +244,7 @@ test("rendering behavior", async () => {
 test("delete", async () => {
   const { reacord, adapter, assertMessages } = setupReacordTesting()
 
-  const reply = reacord.createCommandReply(new TestCommandInteraction(adapter))
+  const reply = reacord.reply(new TestCommandInteraction(adapter))
   reply.render(
     <>
       some text

test/setup-testing.ts

@@ -9,9 +9,9 @@ import { TestAdapter, TestCommandInteraction } from "../library/testing"
 const nextTickPromise = promisify(nextTick)
 
 export function setupReacordTesting() {
-  const adapter = new TestAdapter()
+  const adapter = TestAdapter.create()
   const reacord = new Reacord({ adapter })
-  const reply = reacord.createCommandReply(new TestCommandInteraction(adapter))
+  const reply = reacord.reply(new TestCommandInteraction(adapter))
 
   async function assertMessages(expected: ReturnType<typeof sampleMessages>) {
     await nextTickPromise() // wait for the render to complete