monorepo

packages/reacord/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "reacord",
+  "type": "module",
+  "description": "send reactive discord messages using react components ⚛",
+  "version": "0.0.0",
+  "types": "./dist/main.d.ts",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    "import": "./dist/main.js",
+    "require": "./dist/main.cjs"
+  },
+  "scripts": {
+    "build": "tsup-node src/main.ts --clean --target node16 --format cjs,esm --dts"
+  },
+  "keywords": [],
+  "author": "itsMapleLeaf",
+  "license": "MIT",
+  "dependencies": {
+    "@types/node": "*",
+    "@types/react": "*",
+    "@types/react-reconciler": "^0.26.4",
+    "react-reconciler": "^0.26.2"
+  },
+  "peerDependencies": {
+    "discord.js": "^13.3",
+    "react": "^17.0.2"
+  },
+  "devDependencies": {
+    "discord.js": "^13.3.1",
+    "dotenv": "^10.0.0",
+    "esbuild": "^0.14.2",
+    "nanoid": "^3.1.30",
+    "reacord-helpers": "workspace:*",
+    "react": "^17.0.2",
+    "tsup": "^5.10.3"
+  }
+}

packages/reacord/src/components/embed.tsx

@@ -0,0 +1,19 @@
+import type { ColorResolvable } from "discord.js"
+import type { ReactNode } from "react"
+import * as React from "react"
+
+export type EmbedProps = {
+  color?: ColorResolvable
+  children?: ReactNode
+}
+
+export function Embed(props: EmbedProps) {
+  return (
+    <reacord-element
+      modifyOptions={(options) => {
+        options.embeds ??= []
+        options.embeds.push({ color: props.color })
+      }}
+    />
+  )
+}

packages/reacord/src/container.ts

@@ -0,0 +1,79 @@
+import type { Message, MessageOptions, TextBasedChannels } from "discord.js"
+import type { ReacordElement } from "./element.js"
+
+type Action =
+  | { type: "updateMessage"; options: MessageOptions }
+  | { type: "deleteMessage" }
+
+export class ReacordContainer {
+  private channel: TextBasedChannels
+  private message?: Message
+  private actions: Action[] = []
+  private runningPromise?: Promise<void>
+
+  constructor(channel: TextBasedChannels) {
+    this.channel = channel
+  }
+
+  render(instances: ReacordElement[]) {
+    const messageOptions: MessageOptions = {
+      content: instances.join("") || undefined, // empty strings are not allowed
+    }
+
+    const hasContent = messageOptions.content !== undefined
+
+    this.addAction(
+      hasContent
+        ? { type: "updateMessage", options: messageOptions }
+        : { type: "deleteMessage" },
+    )
+  }
+
+  completion() {
+    return this.runningPromise ?? Promise.resolve()
+  }
+
+  private addAction(action: Action) {
+    const lastAction = this.actions[this.actions.length - 1]
+    if (lastAction?.type === action.type) {
+      this.actions[this.actions.length - 1] = action
+    } else {
+      this.actions.push(action)
+    }
+    this.runActions()
+  }
+
+  private runActions() {
+    if (this.runningPromise) return
+
+    this.runningPromise = new Promise((resolve) => {
+      // using a microtask to allow multiple actions to be added synchronously
+      queueMicrotask(async () => {
+        let action: Action | undefined
+        while ((action = this.actions.shift())) {
+          try {
+            await this.runAction(action)
+          } catch (error) {
+            console.error(`Failed to run action:`, action)
+            console.error(error)
+          }
+        }
+        resolve()
+        this.runningPromise = undefined
+      })
+    })
+  }
+
+  private async runAction(action: Action) {
+    if (action.type === "updateMessage") {
+      this.message = await (this.message
+        ? this.message.edit(action.options)
+        : this.channel.send(action.options))
+    }
+
+    if (action.type === "deleteMessage") {
+      await this.message?.delete()
+      this.message = undefined
+    }
+  }
+}

packages/reacord/src/element.ts

@@ -0,0 +1,15 @@
+import type { MessageOptions } from "discord.js"
+
+export type ReacordElementJsxTag = "reacord-element"
+
+export type ReacordElement = {
+  modifyOptions: (options: MessageOptions) => void
+}
+
+declare global {
+  namespace JSX {
+    // eslint-disable-next-line @typescript-eslint/consistent-type-definitions
+    interface IntrinsicElements
+      extends Record<ReacordElementJsxTag, ReacordElement> {}
+  }
+}

packages/reacord/src/instance.ts

@@ -0,0 +1,25 @@
+import type { Message, TextBasedChannels } from "discord.js"
+
+export class ReacordInstance {
+  message?: Message
+  content: string
+
+  constructor(content: string) {
+    this.content = content
+  }
+
+  render(channel: TextBasedChannels) {
+    if (this.message) {
+      this.message.edit(this.content).catch(console.error)
+    } else {
+      channel.send(this.content).then((message) => {
+        this.message = message
+      }, console.error)
+    }
+  }
+
+  destroy() {
+    this.message?.delete().catch(console.error)
+    this.message?.channel.messages.cache.delete(this.message?.id)
+  }
+}

packages/reacord/src/main.ts

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

packages/reacord/src/reconciler.ts

@@ -0,0 +1,94 @@
+/* eslint-disable unicorn/no-null */
+import { raise } from "reacord-helpers/raise.js"
+import ReactReconciler from "react-reconciler"
+import type { ReacordContainer } from "./container.js"
+import type { ReacordElement, ReacordElementJsxTag } from "./element.js"
+
+export const reconciler = ReactReconciler<
+  ReacordElementJsxTag,
+  ReacordElement,
+  ReacordContainer,
+  ReacordElement,
+  string,
+  unknown,
+  unknown,
+  unknown,
+  unknown,
+  unknown,
+  unknown,
+  unknown,
+  unknown
+>({
+  now: Date.now,
+  isPrimaryRenderer: true,
+  supportsMutation: false,
+  supportsPersistence: true,
+  supportsHydration: false,
+  scheduleTimeout: setTimeout,
+  cancelTimeout: clearTimeout,
+  noTimeout: -1,
+
+  getRootHostContext: () => ({}),
+  getChildHostContext: () => ({}),
+  shouldSetTextContent: () => false,
+
+  createInstance: (
+    type,
+    props,
+    rootContainerInstance,
+    hostContext,
+    internalInstanceHandle,
+  ) => {
+    return props
+  },
+
+  createTextInstance: (
+    text,
+    rootContainerInstance,
+    hostContext,
+    internalInstanceHandle,
+  ) => {
+    return text
+  },
+
+  prepareForCommit: () => null,
+  resetAfterCommit: () => null,
+
+  appendInitialChild: (parent, child) => raise("Not implemented"),
+  finalizeInitialChildren: (...args) => {
+    console.log("finalizeInitialChildren", args)
+    return false
+  },
+  getPublicInstance: () => raise("Not implemented"),
+  prepareUpdate: () => raise("Not implemented"),
+  preparePortalMount: () => raise("Not implemented"),
+
+  createContainerChildSet: (): ReacordElement[] => {
+    // console.log("createContainerChildSet", [container])
+    return []
+  },
+
+  appendChildToContainerChildSet: (
+    children: ReacordElement[],
+    child: ReacordElement,
+  ) => {
+    // console.log("appendChildToContainerChildSet", [children, child])
+    children.push(child)
+  },
+
+  finalizeContainerChildren: (
+    container: ReacordContainer,
+    children: ReacordElement[],
+  ) => {
+    // console.log("finalizeContainerChildren", [container, children])
+    return false
+  },
+
+  replaceContainerChildren: (
+    container: ReacordContainer,
+    children: ReacordElement[],
+  ) => {
+    console.log("replaceContainerChildren", [container, children])
+    container.render(children)
+  },
+})

packages/reacord/src/root.ts

@@ -0,0 +1,23 @@
+/* eslint-disable unicorn/no-null */
+import type { TextBasedChannels } from "discord.js"
+import type { ReactNode } from "react"
+import { ReacordContainer } from "./container"
+import { reconciler } from "./reconciler"
+
+export type ReacordRenderTarget = TextBasedChannels
+
+export function createRoot(target: ReacordRenderTarget) {
+  const container = new ReacordContainer(target)
+  const containerId = reconciler.createContainer(container, 0, false, null)
+  return {
+    render: (content: ReactNode) => {
+      reconciler.updateContainer(content, containerId)
+      return container.completion()
+    },
+    destroy: () => {
+      reconciler.updateContainer(null, containerId)
+      return container.completion()
+    },
+    completion: () => container.completion(),
+  }
+}

packages/reacord/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../../tsconfig.base.json"
+}