weird embed context ideas - committing just so it's not lost

packages/reacord/package.json

@@ -12,7 +12,7 @@
     "require": "./dist/main.cjs"
   },
   "scripts": {
-    "build": "tsup-node src/main.ts --clean --target node16 --format cjs,esm --dts"
+    "build": "tsup src/main.ts --clean --target node16 --format cjs,esm --dts"
   },
   "keywords": [],
   "author": "itsMapleLeaf",
@@ -21,6 +21,7 @@
     "@types/node": "*",
     "@types/react": "*",
     "@types/react-reconciler": "^0.26.4",
+    "immer": "^9.0.7",
     "react-reconciler": "^0.26.2"
   },
   "peerDependencies": {

packages/reacord/src/components/embed.tsx

@@ -1,4 +1,5 @@
-import type { ColorResolvable } from "discord.js"
+import type { ColorResolvable, MessageEmbedOptions } from "discord.js"
+import { raise } from "reacord-helpers/raise"
 import type { ReactNode } from "react"
 import * as React from "react"
 
@@ -8,12 +9,99 @@ export type EmbedProps = {
 }
 
 export function Embed(props: EmbedProps) {
+  const [instance] = React.useState(() => new EmbedInstance())
   return (
     <reacord-element
-      modifyOptions={(options) => {
-        options.embeds ??= []
-        options.embeds.push({ color: props.color })
-      }}
+      modifyOptions={(options) => ({
+        ...options,
+        embeds: [
+          ...(options.embeds || []),
+          {
+            color: props.color,
+            description: props.children,
+          },
+        ],
+      })}
     />
   )
 }
+
+export type EmbedTitleProps = {
+  children?: string
+  url?: string
+}
+
+export function EmbedTitle(props: EmbedTitleProps) {
+  const { useEmbedChild } = useEmbedContext()
+
+  useEmbedChild(
+    React.useCallback(
+      (options) => {
+        options.title = props.children
+        options.url = props.url
+      },
+      [props.children, props.url],
+    ),
+  )
+
+  return <></>
+}
+
+function useEmbedContext() {
+  const instance =
+    React.useContext(EmbedInstanceContext) ??
+    raise("Embed instance provider not found")
+
+  return React.useMemo(() => {
+    function useEmbedChild(
+      modifyEmbedOptions: (options: MessageEmbedOptions) => void,
+    ) {
+      React.useEffect(() => {
+        instance.add(modifyEmbedOptions)
+        return () => instance.remove(modifyEmbedOptions)
+      }, [modifyEmbedOptions])
+    }
+
+    return { useEmbedChild }
+  }, [instance])
+}
+
+const EmbedInstanceContext = React.createContext<EmbedInstance | undefined>(
+  undefined,
+)
+
+function EmbedInstanceProvider({
+  instance,
+  children,
+}: {
+  instance: EmbedInstance
+  children: ReactNode
+}) {
+  return (
+    <EmbedInstanceContext.Provider value={instance}>
+      {children}
+    </EmbedInstanceContext.Provider>
+  )
+}
+
+class EmbedInstance {
+  private children = new Set<EmbedChild>()
+
+  add(child: EmbedChild) {
+    this.children.add(child)
+  }
+
+  remove(child: EmbedChild) {
+    this.children.delete(child)
+  }
+
+  getEmbedOptions(): MessageEmbedOptions {
+    const options: MessageEmbedOptions = {}
+    for (const child of this.children) {
+      child(options)
+    }
+    return options
+  }
+}
+
+type EmbedChild = (options: MessageEmbedOptions) => void