embeds + decentralized element definition

src.new/button.tsx

@@ -0,0 +1,73 @@
+import type {
+  ButtonInteraction,
+  CacheType,
+  EmojiResolvable,
+  MessageButtonStyle,
+  MessageComponentInteraction,
+  MessageOptions,
+} from "discord.js"
+import { MessageActionRow } from "discord.js"
+import { nanoid } from "nanoid"
+import React from "react"
+import { last } from "../src/helpers/last.js"
+import { toUpper } from "../src/helpers/to-upper.js"
+import { Node } from "./node.js"
+
+export type ButtonProps = {
+  label?: string
+  style?: Exclude<Lowercase<MessageButtonStyle>, "link">
+  disabled?: boolean
+  emoji?: EmojiResolvable
+  onClick: (interaction: ButtonInteraction) => void
+}
+
+export function Button(props: ButtonProps) {
+  return (
+    <reacord-element props={props} createNode={() => new ButtonNode(props)} />
+  )
+}
+
+class ButtonNode extends Node<ButtonProps> {
+  private customId = nanoid()
+
+  private get buttonOptions() {
+    return {
+      type: "BUTTON",
+      customId: this.customId,
+      style: toUpper(this.props.style ?? "secondary"),
+      disabled: this.props.disabled,
+      emoji: this.props.emoji,
+      label: this.props.label,
+    } as const
+  }
+
+  override modifyMessageOptions(options: MessageOptions): void {
+    options.components ??= []
+
+    let actionRow = last(options.components)
+
+    if (
+      !actionRow ||
+      actionRow.components.length >= 5 ||
+      actionRow.components[0]?.type === "SELECT_MENU"
+    ) {
+      actionRow = new MessageActionRow()
+      options.components.push(actionRow)
+    }
+
+    if (actionRow instanceof MessageActionRow) {
+      actionRow.addComponents(this.buttonOptions)
+    } else {
+      actionRow.components.push(this.buttonOptions)
+    }
+  }
+
+  override handleInteraction(
+    interaction: MessageComponentInteraction<CacheType>,
+  ) {
+    if (interaction.isButton() && interaction.customId === this.customId) {
+      this.props.onClick(interaction)
+      return true
+    }
+  }
+}