flatten file structure and merge some things

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

@@ -40,7 +40,7 @@ test.beforeEach(async () => {
   await Promise.all(messages.map((message) => message.delete()))
 })
 
-test.serial.only("kitchen sink + destroy", async (t) => {
+test.serial("kitchen sink + destroy", async (t) => {
   const root = createRoot(channel)
 
   await root.render(

packages/reacord/src/components/embed.tsx

@@ -1,15 +0,0 @@
-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
-  children?: ReactNode
-}
-
-export function Embed(props: EmbedProps) {
-  return (
-    <reacord-element createInstance={() => new EmbedInstance(props.color)} />
-  )
-}

packages/reacord/src/components/text.tsx

@@ -1,11 +0,0 @@
-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-element createInstance={() => new TextElementInstance()} />
-}

packages/reacord/src/embed.tsx

@@ -3,10 +3,24 @@ import type {
   MessageEmbedOptions,
   MessageOptions,
 } from "discord.js"
+import type { ReactNode } from "react"
+import React from "react"
 import { ContainerInstance } from "./container-instance.js"
 
-/** Represents an <Embed /> element */
+export type EmbedProps = {
-export class EmbedInstance extends ContainerInstance {
+  color?: ColorResolvable
+  children?: ReactNode
+}
+
+export function Embed(props: EmbedProps) {
+  return (
+    <reacord-element createInstance={() => new EmbedInstance(props.color)}>
+      {props.children}
+    </reacord-element>
+  )
+}
+
+class EmbedInstance extends ContainerInstance {
   readonly name = "Embed"
 
   constructor(readonly color?: ColorResolvable) {

packages/reacord/src/jsx.d.ts

@@ -0,0 +1,11 @@
+declare namespace JSX {
+  import type { ReactNode } from "react"
+
+  // eslint-disable-next-line @typescript-eslint/consistent-type-definitions
+  interface IntrinsicElements {
+    "reacord-element": {
+      createInstance: () => unknown
+      children?: ReactNode
+    }
+  }
+}

packages/reacord/src/main.ts

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

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

@@ -1,13 +0,0 @@
-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/text.tsx

@@ -1,8 +1,21 @@
 import type { MessageOptions } from "discord.js"
+import type { ReactNode } from "react"
+import React from "react"
 import { ContainerInstance } from "./container-instance.js"
 
-/** Represents a <Text /> element */
+export type TextProps = {
-export class TextElementInstance extends ContainerInstance {
+  children?: ReactNode
+}
+
+export function Text(props: TextProps) {
+  return (
+    <reacord-element createInstance={() => new TextElementInstance()}>
+      {props.children}
+    </reacord-element>
+  )
+}
+
+class TextElementInstance extends ContainerInstance {
   readonly name = "Text"
 
   constructor() {