decentralization refactor wip

packages/integration-tests/tests/rendering.test.tsx

@@ -40,7 +40,7 @@ test.beforeEach(async () => {
   await Promise.all(messages.map((message) => message.delete()))
 })
 
-test.serial("kitchen sink + destroy", async (t) => {
+test.serial.only("kitchen sink + destroy", async (t) => {
   const root = createRoot(channel)
 
   await root.render(
@@ -110,18 +110,6 @@ test.serial("empty embed fallback", async (t) => {
   await assertMessages(t, [{ embeds: [{ color: null, description: "_ _" }] }])
 })
 
-test.serial("invalid children error", (t) => {
-  const root = createRoot(channel)
-
-  t.throws(() =>
-    root.render(
-      <Text>
-        <Embed />
-      </Text>,
-    ),
-  )
-})
-
 type MessageData = ReturnType<typeof extractMessageData>
 function extractMessageData(message: Message) {
   return {

packages/reacord/src/components/embed.tsx

@@ -1,6 +1,7 @@
 import type { ColorResolvable } from "discord.js"
 import type { ReactNode } from "react"
 import React from "react"
+import { EmbedInstance } from "../renderer/embed-instance.js"
 
 export type EmbedProps = {
   color?: ColorResolvable
@@ -8,5 +9,7 @@ export type EmbedProps = {
 }
 
 export function Embed(props: EmbedProps) {
-  return <reacord-embed {...props} />
+  return (
+    <reacord-element createInstance={() => new EmbedInstance(props.color)} />
+  )
 }

packages/reacord/src/components/text.tsx

@@ -1,10 +1,11 @@
 import type { ReactNode } from "react"
 import React from "react"
+import { TextElementInstance } from "../renderer/text-element-instance.js"
 
 export type TextProps = {
   children?: ReactNode
 }
 
 export function Text(props: TextProps) {
-  return <reacord-text {...props} />
+  return <reacord-element createInstance={() => new TextElementInstance()} />
 }

packages/reacord/src/elements.ts

@@ -1,14 +0,0 @@
-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 {
-  namespace JSX {
-    // eslint-disable-next-line @typescript-eslint/consistent-type-definitions
-    interface IntrinsicElements extends ReacordElementMap {}
-  }
-}

packages/reacord/src/main.ts

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

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

@@ -0,0 +1,13 @@
+import type { MessageOptions } from "discord.js"
+
+export abstract class BaseInstance {
+  /** The name of the JSX element represented by this instance */
+  abstract readonly name: string
+
+  /** If the element represents text, the text for this element */
+  getText?(): string
+
+  /** If this element can be a child of a message,
+   * the function to modify the message options */
+  renderToMessage?(options: MessageOptions): void
+}

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

@@ -0,0 +1,40 @@
+import { BaseInstance } from "./base-instance.js"
+
+// eslint-disable-next-line import/no-unused-modules
+export type ContainerInstanceOptions = {
+  /**
+   * Whether or not to log a warning when calling getChildrenText() with non-text children
+   *
+   * Regardless of what this is set to, non-text children will always be skipped */
+  warnOnNonTextChildren: boolean
+}
+
+export abstract class ContainerInstance extends BaseInstance {
+  readonly children: BaseInstance[] = []
+
+  constructor(private readonly options: ContainerInstanceOptions) {
+    super()
+  }
+
+  add(child: BaseInstance) {
+    this.children.push(child)
+  }
+
+  clear() {
+    this.children.splice(0)
+  }
+
+  protected getChildrenText(): string {
+    let text = ""
+    for (const child of this.children) {
+      if (!child.getText) {
+        if (this.options.warnOnNonTextChildren) {
+          console.warn(`${child.name} is not a valid child of ${this.name}`)
+        }
+        continue
+      }
+      text += child.getText()
+    }
+    return text
+  }
+}

packages/reacord/src/renderer/container.ts

@@ -1,14 +1,10 @@
 import type { Message, MessageOptions, TextBasedChannels } from "discord.js"
-import type { EmbedInstance } from "./embed-instance.js"
+import type { BaseInstance } from "./base-instance.js"
-import type { TextElementInstance } from "./text-element-instance.js"
-import type { TextInstance } from "./text-instance.js"
 
 type Action =
   | { type: "updateMessage"; options: MessageOptions }
   | { type: "deleteMessage" }
 
-type ContainerChild = TextInstance | TextElementInstance | EmbedInstance
-
 export class ReacordContainer {
   private channel: TextBasedChannels
   private message?: Message
@@ -19,9 +15,13 @@ export class ReacordContainer {
     this.channel = channel
   }
 
-  render(children: ContainerChild[]) {
+  render(children: BaseInstance[]) {
     const options: MessageOptions = {}
     for (const child of children) {
+      if (!child.renderToMessage) {
+        console.warn(`${child.name} is not a valid message child`)
+        continue
+      }
       child.renderToMessage(options)
     }
 

packages/reacord/src/renderer/elements.d.ts

@@ -0,0 +1,13 @@
+export type ReacordElementTag = "reacord-element"
+
+export type ReacordElementProps = {
+  createInstance: () => unknown
+}
+
+declare global {
+  namespace JSX {
+    // eslint-disable-next-line @typescript-eslint/consistent-type-definitions
+    interface IntrinsicElements
+      extends Record<ReacordElementTag, ReacordElementProps> {}
+  }
+}

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

@@ -3,21 +3,17 @@ import type {
   MessageEmbedOptions,
   MessageOptions,
 } from "discord.js"
-import type { TextElementInstance } from "./text-element-instance.js"
+import { ContainerInstance } from "./container-instance.js"
-import type { TextInstance } from "./text-instance.js"
 
-type EmbedChild = TextInstance | TextElementInstance
+/** Represents an <Embed /> element */
+export class EmbedInstance extends ContainerInstance {
+  readonly name = "Embed"
 
-export class EmbedInstance {
+  constructor(readonly color?: ColorResolvable) {
-  children: EmbedChild[] = []
+    super({ warnOnNonTextChildren: false })
-
-  constructor(readonly color: ColorResolvable) {}
-
-  add(child: EmbedChild) {
-    this.children.push(child)
   }
 
-  renderToMessage(message: MessageOptions) {
+  override renderToMessage(message: MessageOptions) {
     message.embeds ??= []
     message.embeds.push(this.embedOptions)
   }
@@ -25,7 +21,7 @@ export class EmbedInstance {
   get embedOptions(): MessageEmbedOptions {
     return {
       color: this.color,
-      description: this.children.map((child) => child.text).join("") || "_ _",
+      description: this.getChildrenText() || "_ _",
     }
   }
 }

packages/reacord/src/renderer/reconciler.ts

@@ -1,46 +1,46 @@
 /* eslint-disable unicorn/no-null */
+import { inspect } from "node:util"
 import { raise } from "reacord-helpers/raise.js"
 import ReactReconciler from "react-reconciler"
-import type { ReacordElementMap } from "./elements.js"
+import { BaseInstance } from "./base-instance.js"
-import type { ReacordContainer } from "./renderer/container.js"
+import { ContainerInstance } from "./container-instance.js"
-import { EmbedInstance } from "./renderer/embed-instance.js"
+import type { ReacordContainer } from "./container.js"
-import { TextElementInstance } from "./renderer/text-element-instance.js"
+import { TextInstance } from "./text-instance.js"
-import { TextInstance } from "./renderer/text-instance.js"
 
-// instances that represent an element
+type ElementTag = string
-type ElementInstance = TextElementInstance | EmbedInstance
-
-// any instance
-type Instance = ElementInstance | TextInstance
-
-type ElementTag =
-  | keyof ReacordElementMap
-  | (string & { __autocompleteHack__?: never })
 
 type Props = Record<string, unknown>
 
-const createInstance = (type: ElementTag, props: Props): ElementInstance => {
+const createInstance = (type: string, props: Props): BaseInstance => {
-  if (type === "reacord-text") {
+  if (type !== "reacord-element") {
-    return new TextElementInstance()
+    raise(`createInstance: unknown type: ${type}`)
   }
-  if (type === "reacord-embed") {
+
-    return new EmbedInstance((props as any).color)
+  if (typeof props.createInstance !== "function") {
+    const actual = inspect(props.createInstance)
+    raise(`invalid createInstance function, received: ${actual}`)
   }
-  raise(`Unknown element type "${type}"`)
+
+  const instance = props.createInstance()
+  if (!(instance instanceof BaseInstance)) {
+    raise(`invalid instance: ${inspect(instance)}`)
+  }
+
+  return instance
 }
 
 export const reconciler = ReactReconciler<
-  ElementTag, // Type,
+  string, // Type (jsx tag),
   Props, // Props,
   ReacordContainer, // Container,
-  ElementInstance, // Instance,
+  BaseInstance, // Instance,
   TextInstance, // TextInstance,
   never, // SuspenseInstance,
   never, // HydratableInstance,
   never, // PublicInstance,
   null, // HostContext,
   never, // UpdatePayload,
-  Instance[], // ChildSet,
+  BaseInstance[], // ChildSet,
   unknown, // TimeoutHandle,
   unknown // NoTimeout
 >({
@@ -63,46 +63,37 @@ export const reconciler = ReactReconciler<
 
   createContainerChildSet: () => [],
 
-  appendChildToContainerChildSet: (childSet: Instance[], child: Instance) => {
+  appendChildToContainerChildSet: (
+    childSet: BaseInstance[],
+    child: BaseInstance,
+  ) => {
     childSet.push(child)
   },
 
   finalizeContainerChildren: (
     container: ReacordContainer,
-    children: Instance[],
+    children: BaseInstance[],
   ) => false,
 
   replaceContainerChildren: (
     container: ReacordContainer,
-    children: Instance[],
+    children: BaseInstance[],
   ) => {
     container.render(children)
   },
 
   appendInitialChild: (parent, child) => {
-    if (
+    if (parent instanceof ContainerInstance) {
-      parent instanceof TextElementInstance &&
-      (child instanceof TextInstance || child instanceof TextElementInstance)
-    ) {
       parent.add(child)
-      return
+    } else {
+      raise(
+        `Cannot append child of type ${child.constructor.name} to ${parent.constructor.name}`,
+      )
     }
-
-    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: (
-    instance: Instance,
+    instance: BaseInstance,
     _: unknown,
     type: ElementTag,
     oldProps: Props,

packages/reacord/src/renderer/root.ts

@@ -1,8 +1,8 @@
 /* eslint-disable unicorn/no-null */
 import type { TextBasedChannels } from "discord.js"
 import type { ReactNode } from "react"
+import { ReacordContainer } from "./container"
 import { reconciler } from "./reconciler"
-import { ReacordContainer } from "./renderer/container"
 
 export type ReacordRenderTarget = TextBasedChannels
 

packages/reacord/src/renderer/text-element-instance.ts

@@ -1,22 +1,19 @@
 import type { MessageOptions } from "discord.js"
-import type { TextInstance } from "./text-instance.js"
+import { ContainerInstance } from "./container-instance.js"
 
-type TextElementChild = TextElementInstance | TextInstance
+/** Represents a <Text /> element */
+export class TextElementInstance extends ContainerInstance {
+  readonly name = "Text"
 
-export class TextElementInstance {
+  constructor() {
-  children = new Set<TextElementChild>()
+    super({ warnOnNonTextChildren: true })
-
-  add(child: TextElementChild) {
-    this.children.add(child)
   }
 
-  renderToMessage(options: MessageOptions) {
+  override getText() {
-    for (const child of this.children) {
+    return this.getChildrenText()
-      options.content = `${options.content ?? ""}${child.text}`
-    }
   }
 
-  get text(): string {
+  override renderToMessage(options: MessageOptions) {
-    return [...this.children].map((child) => child.text).join("")
+    options.content = (options.content ?? "") + this.getText()
   }
 }

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

@@ -1,9 +1,19 @@
 import type { MessageOptions } from "discord.js"
+import { BaseInstance } from "./base-instance.js"
 
-export class TextInstance {
+/** Represents raw strings in JSX */
-  constructor(readonly text: string) {}
+export class TextInstance extends BaseInstance {
+  readonly name = "Text"
 
-  renderToMessage(options: MessageOptions) {
+  constructor(private readonly text: string) {
-    options.content = `${options.content ?? ""}${this.text}`
+    super()
+  }
+
+  override getText() {
+    return this.text
+  }
+
+  override renderToMessage(options: MessageOptions) {
+    options.content = (options.content ?? "") + this.getText()
   }
 }

tsconfig.json

@@ -1,4 +1,7 @@
 {
   "extends": "@itsmapleleaf/configs/tsconfig.base",
+  "compilerOptions": {
+    "noImplicitOverride": true
+  },
   "exclude": ["**/node_modules/**", "**/coverage/**", "**/dist/**"]
 }