start of embed + more test coverage

packages/reacord/src/components/embed.tsx

@@ -0,0 +1,12 @@
+import type { ColorResolvable } from "discord.js"
+import type { ReactNode } from "react"
+import React from "react"
+
+export type EmbedProps = {
+  color?: ColorResolvable
+  children?: ReactNode
+}
+
+export function Embed(props: EmbedProps) {
+  return <reacord-embed {...props} />
+}

packages/reacord/src/elements.ts

@@ -1,7 +1,9 @@
+import type { EmbedProps } from "./components/embed.js"
 import type { TextProps } from "./components/text.jsx"
 
 export type ReacordElementMap = {
   "reacord-text": TextProps
+  "reacord-embed": EmbedProps
 }
 
 declare global {

packages/reacord/src/main.ts

@@ -1,2 +1,3 @@
+export * from "./components/embed.js"
 export * from "./components/text.js"
 export * from "./root.js"

packages/reacord/src/reconciler.ts

@@ -3,11 +3,12 @@ import { raise } from "reacord-helpers/raise.js"
 import ReactReconciler from "react-reconciler"
 import type { ReacordElementMap } from "./elements.js"
 import type { ReacordContainer } from "./renderer/container.js"
+import { EmbedInstance } from "./renderer/embed-instance.js"
 import { TextElementInstance } from "./renderer/text-element-instance.js"
 import { TextInstance } from "./renderer/text-instance.js"
 
 // instances that represent an element
-type ElementInstance = TextElementInstance
+type ElementInstance = TextElementInstance | EmbedInstance
 
 // any instance
 type Instance = ElementInstance | TextInstance
@@ -18,13 +19,13 @@ type ElementTag =
 
 type Props = Record<string, unknown>
 
-const createInstance = (
-  type: ElementTag,
-  props: Props,
-): TextElementInstance => {
+const createInstance = (type: ElementTag, props: Props): ElementInstance => {
   if (type === "reacord-text") {
     return new TextElementInstance()
   }
+  if (type === "reacord-embed") {
+    return new EmbedInstance((props as any).color)
+  }
   raise(`Unknown element type "${type}"`)
 }
 
@@ -79,7 +80,25 @@ export const reconciler = ReactReconciler<
   },
 
   appendInitialChild: (parent, child) => {
-    parent.add(child)
+    if (
+      parent instanceof TextElementInstance &&
+      (child instanceof TextInstance || child instanceof TextElementInstance)
+    ) {
+      parent.add(child)
+      return
+    }
+
+    if (
+      parent instanceof EmbedInstance &&
+      (child instanceof TextInstance || child instanceof TextElementInstance)
+    ) {
+      parent.add(child)
+      return
+    }
+
+    raise(
+      `Cannot append child of type ${child.constructor.name} to ${parent.constructor.name}`,
+    )
   },
 
   cloneInstance: (

packages/reacord/src/renderer/container.ts

@@ -1,4 +1,5 @@
 import type { Message, MessageOptions, TextBasedChannels } from "discord.js"
+import type { EmbedInstance } from "./embed-instance.js"
 import type { TextElementInstance } from "./text-element-instance.js"
 import type { TextInstance } from "./text-instance.js"
 
@@ -6,7 +7,7 @@ type Action =
   | { type: "updateMessage"; options: MessageOptions }
   | { type: "deleteMessage" }
 
-type ContainerChild = TextInstance | TextElementInstance
+type ContainerChild = TextInstance | TextElementInstance | EmbedInstance
 
 export class ReacordContainer {
   private channel: TextBasedChannels
@@ -19,17 +20,17 @@ export class ReacordContainer {
   }
 
   render(children: ContainerChild[]) {
-    const messageOptions: MessageOptions = {}
+    const options: MessageOptions = {}
     for (const child of children) {
-      child.renderToMessage(messageOptions)
+      child.renderToMessage(options)
     }
 
     // can't render an empty message
-    if (!messageOptions?.content) {
-      messageOptions.content = "_ _"
+    if (!options?.content && !options.embeds?.length) {
+      options.content = "_ _"
     }
 
-    this.addAction({ type: "updateMessage", options: messageOptions })
+    this.addAction({ type: "updateMessage", options })
   }
 
   destroy() {

packages/reacord/src/renderer/embed-instance.ts

@@ -0,0 +1,31 @@
+import type {
+  ColorResolvable,
+  MessageEmbedOptions,
+  MessageOptions,
+} from "discord.js"
+import type { TextElementInstance } from "./text-element-instance.js"
+import type { TextInstance } from "./text-instance.js"
+
+type EmbedChild = TextInstance | TextElementInstance
+
+export class EmbedInstance {
+  children: EmbedChild[] = []
+
+  constructor(readonly color: ColorResolvable) {}
+
+  add(child: EmbedChild) {
+    this.children.push(child)
+  }
+
+  renderToMessage(message: MessageOptions) {
+    message.embeds ??= []
+    message.embeds.push(this.embedOptions)
+  }
+
+  get embedOptions(): MessageEmbedOptions {
+    return {
+      color: this.color,
+      description: this.children.map((child) => child.text).join("") || "_ _",
+    }
+  }
+}