remove initial content for create methods

packages/reacord/library/core/instance.ts

@@ -7,7 +7,7 @@ import type { ReactNode } from "react"
  */
 export interface ReacordInstance {
 	/** Render some JSX to this instance (edits the message) */
-	render: (content: ReactNode) => void
+	render: (content: ReactNode) => ReacordInstance
 
 	/** Remove this message */
 	destroy: () => void

packages/reacord/library/core/reacord-discord-js.ts

@@ -88,17 +88,14 @@ export class ReacordDiscordJs extends Reacord {
 	 *
 	 * @param target - Discord channel object.
 	 * @param [options] - Options for the channel message
-	 * @param [content] - Initial React node content to render.
 	 * @see https://reacord.mapleleaf.dev/guides/sending-messages
 	 */
 	public createChannelMessage(
 		target: Discord.Channel,
 		options: CreateChannelMessageOptions = {},
-		content?: React.ReactNode,
 	): ReacordInstance {
 		return this.createInstance(
 			this.createChannelMessageRenderer(target, options),
-			content,
 		)
 	}
 
@@ -107,17 +104,14 @@ export class ReacordDiscordJs extends Reacord {
 	 *
 	 * @param message - Discord message event object.
 	 * @param [options] - Options for the message reply method.
-	 * @param [content] - Initial React node content to render.
 	 * @see https://reacord.mapleleaf.dev/guides/sending-messages
 	 */
 	public createMessageReply(
 		message: Discord.Message,
 		options: CreateMessageReplyOptions = {},
-		content?: React.ReactNode,
 	): ReacordInstance {
 		return this.createInstance(
 			this.createMessageReplyRenderer(message, options),
-			content,
 		)
 	}
 
@@ -126,17 +120,14 @@ export class ReacordDiscordJs extends Reacord {
 	 *
 	 * @param interaction - Discord command interaction object.
 	 * @param [options] - Custom options for the interaction reply method.
-	 * @param [content] - Initial React node content to render.
 	 * @see https://reacord.mapleleaf.dev/guides/sending-messages
 	 */
 	public createInteractionReply(
 		interaction: Discord.CommandInteraction,
 		options: CreateInteractionReplyOptions = {},
-		content?: React.ReactNode,
 	): ReacordInstance {
 		return this.createInstance(
 			this.createInteractionReplyRenderer(interaction, options),
-			content,
 		)
 	}
 

packages/reacord/library/core/reacord.tsx

@@ -57,6 +57,7 @@ export abstract class Reacord {
 					<InstanceProvider value={instance}>{content}</InstanceProvider>,
 					container,
 				)
+				return instance
 			},
 			deactivate: () => {
 				this.deactivate(renderer)

packages/reacord/scripts/discordjs-manual-test.tsx

@@ -50,7 +50,7 @@ const createTest = async (
 }
 
 await createTest("basic", (channel) => {
-	reacord.createChannelMessage(channel, {}, "Hello, world!")
+	reacord.createChannelMessage(channel).render("Hello, world!")
 })
 
 await createTest("counter", (channel) => {
@@ -73,7 +73,7 @@ await createTest("counter", (channel) => {
 			</>
 		)
 	}
-	reacord.createChannelMessage(channel, {}, <Counter />)
+	reacord.createChannelMessage(channel).render(<Counter />)
 })
 
 await createTest("select", (channel) => {
@@ -102,9 +102,7 @@ await createTest("select", (channel) => {
 		)
 	}
 
-	const instance = reacord.createChannelMessage(
+	const instance = reacord.createChannelMessage(channel).render(
-		channel,
-		{},
 		<FruitSelect
 			onConfirm={(value) => {
 				instance.render(`you chose ${value}`)
@@ -115,9 +113,7 @@ await createTest("select", (channel) => {
 })
 
 await createTest("ephemeral button", (channel) => {
-	reacord.createChannelMessage(
+	reacord.createChannelMessage(channel).render(
-		channel,
-		{},
 		<>
 			<Button
 				label="public clic"
@@ -138,13 +134,11 @@ await createTest("delete this", (channel) => {
 		const instance = useInstance()
 		return <Button label="delete this" onClick={() => instance.destroy()} />
 	}
-	reacord.createChannelMessage(channel, {}, <DeleteThis />)
+	reacord.createChannelMessage(channel).render(<DeleteThis />)
 })
 
 await createTest("link", (channel) => {
-	reacord.createChannelMessage(
+	reacord
-		channel,
+		.createChannelMessage(channel)
-		{},
+		.render(<Link label="hi" url="https://mapleleaf.dev" />)
-		<Link label="hi" url="https://mapleleaf.dev" />,
-	)
 })

packages/reacord/test/reacord.test.tsx

@@ -6,8 +6,9 @@ import { test } from "vitest"
 test("rendering behavior", async () => {
 	const tester = new ReacordTester()
 
-	const reply = tester.createInteractionReply()
+	const reply = tester
-	reply.render(<KitchenSinkCounter onDeactivate={() => reply.deactivate()} />)
+		.createInteractionReply()
+		.render(<KitchenSinkCounter onDeactivate={() => reply.deactivate()} />)
 
 	await tester.assertMessages([
 		{
@@ -244,8 +245,7 @@ test("rendering behavior", async () => {
 test("delete", async () => {
 	const tester = new ReacordTester()
 
-	const reply = tester.createInteractionReply()
+	const reply = tester.createInteractionReply().render(
-	reply.render(
 		<>
 			some text
 			<Embed>some embed</Embed>

packages/reacord/test/select.test.tsx

@@ -53,9 +53,7 @@ test("single select", async () => {
 		])
 	}
 
-	const reply = tester.createInteractionReply()
+	tester.createInteractionReply().render(<TestSelect />)
-
-	reply.render(<TestSelect />)
 	await assertSelect([])
 	expect(onSelect).toHaveBeenCalledTimes(0)
 
@@ -119,9 +117,7 @@ test("multiple select", async () => {
 		])
 	}
 
-	const reply = tester.createInteractionReply()
+	tester.createInteractionReply().render(<TestSelect />)
-
-	reply.render(<TestSelect />)
 	await assertSelect([])
 	expect(onSelect).toHaveBeenCalledTimes(0)
 

packages/reacord/test/test-adapter.ts

@@ -43,29 +43,23 @@ export class ReacordTester extends Reacord {
 		return [...this.messageContainer]
 	}
 
-	public createChannelMessage(initialContent?: ReactNode): ReacordInstance {
+	public createChannelMessage(): ReacordInstance {
 		return this.createInstance(
 			new ChannelMessageRenderer(new TestChannel(this.messageContainer)),
-			initialContent,
 		)
 	}
 
-	public createMessageReply(initialContent?: ReactNode): ReacordInstance {
+	public createMessageReply(): ReacordInstance {
 		return this.createInstance(
 			new ChannelMessageRenderer(new TestChannel(this.messageContainer)),
-			initialContent,
 		)
 	}
 
-	public createInteractionReply(
+	public createInteractionReply(_options?: ReplyInfo): ReacordInstance {
-		initialContent?: ReactNode,
-		_options?: ReplyInfo,
-	): ReacordInstance {
 		return this.createInstance(
 			new InteractionReplyRenderer(
 				new TestCommandInteraction(this.messageContainer),
 			),
-			initialContent,
 		)
 	}
 
@@ -261,11 +255,13 @@ class TestComponentEvent {
 	guild: GuildInfo = {} as GuildInfo // todo
 
 	reply(content?: ReactNode): ReacordInstance {
-		return this.tester.createInteractionReply(content)
+		return this.tester.createInteractionReply().render(content)
 	}
 
 	ephemeralReply(content?: ReactNode): ReacordInstance {
-		return this.tester.createInteractionReply(content, { ephemeral: true })
+		return this.tester
+			.createInteractionReply({ ephemeral: true })
+			.render(content)
 	}
 }
 

packages/reacord/test/use-instance.test.tsx

@@ -49,9 +49,9 @@ describe("useInstance", () => {
 		}
 
 		const tester = new ReacordTester()
-		const instance = tester.createChannelMessage(
+		const instance = tester
-			<TestComponent name="parent" />,
+			.createChannelMessage()
-		)
+			.render(<TestComponent name="parent" />)
 
 		await tester.assertMessages([messageOutput("parent")])
 		expect(instanceFromHook).toBe(instance)

packages/website/src/content/guides/1-sending-messages.md

@@ -11,7 +11,8 @@ You can send messages via Reacord to a channel like so.
 ```jsx
 client.on("ready", () => {
 	const channel = await client.channels.fetch("abc123deadbeef")
-	reacord.createChannelMessage(channel, {}, "Hello, world!")
+	const instance = reacord.createChannelMessage(channel)
+	instance.render("Hello, world!")
 })
 ```
 
@@ -35,7 +36,7 @@ function Uptime() {
 }
 
 client.on("ready", () => {
-	reacord.createChannelMessage(channel, {}, <Uptime />)
+	reacord.createChannelMessage(channel).render(<Uptime />)
 })
 ```
 
@@ -59,11 +60,9 @@ Instead of sending messages to a channel, you may want to reply to a specific me
 const Hello = ({ username }) => <>Hello, {username}!</>
 
 client.on("messageCreate", (message) => {
-	reacord.createMessageReply(
+	reacord
-		message,
+		.createMessageReply(message)
-		{},
+		.render(<Hello username={message.author.displayName} />)
-		<Hello username={message.author.displayName} />,
-	)
 })
 ```
 
@@ -110,7 +109,7 @@ client.on("ready", () => {
 client.on("interactionCreate", (interaction) => {
 	if (interaction.isCommand() && interaction.commandName === "ping") {
 		// Use the createInteractionReply() function instead of createChannelMessage
-		reacord.createInteractionReply(interaction, {}, <>pong!</>)
+		reacord.createInteractionReply(interaction).render(<>pong!</>)
 	}
 })
 
@@ -149,14 +148,14 @@ handleCommands(client, [
 		name: "ping",
 		description: "pong!",
 		run: (interaction) => {
-			reacord.createInteractionReply(interaction, {}, <>pong!</>)
+			reacord.createInteractionReply(interaction).render(<>pong!</>)
 		},
 	},
 	{
 		name: "hi",
 		description: "say hi",
 		run: (interaction) => {
-			reacord.createInteractionReply(interaction, {}, <>hi</>)
+			reacord.createInteractionReply(interaction).render(<>hi</>)
 		},
 	},
 ])
@@ -176,11 +175,9 @@ handleCommands(client, [
 		name: "pong",
 		description: "pong, but in secret",
 		run: (interaction) => {
-			reacord.createInteractionReply(
+			reacord
-				interaction,
+				.createInteractionReply(interaction, { ephemeral: true })
-				{ ephemeral: true },
+				.render(<>(pong)</>)
-				<>(pong)</>,
-			)
 		},
 	},
 ])
@@ -196,7 +193,9 @@ handleCommands(client, [
 		name: "pong",
 		description: "pong, but converted into audio",
 		run: (interaction) => {
-			reacord.createInteractionReply(interaction, { tts: true }, <>pong!</>)
+			reacord
+				.createInteractionReply(interaction, { tts: true })
+				.render(<>pong!</>)
 		},
 	},
 ])

packages/website/src/content/guides/2-embeds.md

@@ -56,9 +56,7 @@ function FancyMessage({ children }) {
 ```
 
 ```jsx
-reacord.createChannelMessage(
+reacord.createChannelMessage(channel).render(
-	channel,
-	{},
 	<FancyMessage>
 		<FancyDetails title="Hello" description="World" />
 	</FancyMessage>,