New discord.js-react utility bridge library

packages/discord.js/.gitignore

@@ -0,0 +1 @@
+/LICENSE

packages/discord.js/env.d.ts

@@ -0,0 +1 @@
+/// <reference types="@total-typescript/ts-reset" />

packages/discord.js/library/main.ts

@@ -0,0 +1,2 @@
+export * from "./use-message"
+export * from "./use-reactions"

packages/discord.js/library/use-message.ts

@@ -0,0 +1,5 @@
+import type { Message } from "discord.js";
+
+export function useMessage(): Message {
+  return {} as Message;
+}

packages/discord.js/library/use-reactions.ts

@@ -0,0 +1,50 @@
+import {
+	Collection,
+	type Message,
+	type MessageReaction,
+	type ReactionCollector,
+} from "discord.js"
+import { useEffect, useState } from "react"
+import { useMessage } from "./use-message"
+
+export interface UseReactionsOptions {
+	message?: Message
+}
+
+type Reactions = Collection<string, MessageReaction>
+
+export function useReactions(options: UseReactionsOptions) {
+	// Hooks should not be called conditionally
+	const messageInstance = useMessage()
+	// Ref will persist the value across renders
+	const message = options.message ?? messageInstance
+	const [collector, setCollector] = useState<ReactionCollector | null>(null)
+	const [alive, setAlive] = useState<boolean>(true)
+
+	// Reactions collection
+	const [reactions, setReactions] = useState<Reactions>(
+		() => new Collection(),
+	)
+
+	useEffect(() => {
+		const collector = message.createReactionCollector({
+			dispose: true,
+		})
+
+		const update = () => {
+			setReactions(() => collector.collected)
+		}
+
+		setCollector(collector)
+		collector.on("collect", update)
+		collector.on("remove", update)
+		collector.on("end", () => {
+			update()
+			setAlive(false)
+		})
+
+		return () => collector.stop()
+	}, [message])
+
+	return { reactions, alive, collector }
+}

packages/discord.js/package.json

@@ -0,0 +1,84 @@
+{
+  "name": "@reacord/discord.js",
+  "type": "module",
+  "description": "Utility bridge between discord.js and react.",
+  "version": "0.0.1",
+  "homepage": "https://reacord.mapleleaf.dev",
+  "repository": "https://github.com/itsMapleLeaf/reacord.git",
+  "changelog": "https://github.com/itsMapleLeaf/reacord/releases",
+  "license": "MIT",
+  "keywords": [
+    "discord",
+    "discord-js",
+    "react",
+    "react-js",
+    "react-renderer",
+    "interaction",
+    "message",
+    "embed",
+    "reacord",
+    "bridge"
+  ],
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "types": "./dist/main.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/main.js",
+      "require": "./dist/main.cjs",
+      "types": "./dist/main.d.ts"
+    },
+    "./package.json": {
+      "import": "./package.json",
+      "require": "./package.json"
+    }
+  },
+  "scripts": {
+    "build": "cpy ../../LICENSE . && tsup library/main.ts --target node18 --format cjs,esm --sourcemap --dts --dts-resolve",
+    "build-watch": "pnpm build -- --watch",
+    "test": "vitest --coverage --no-watch",
+    "test-dev": "vitest",
+    "typecheck": "tsc -b"
+  },
+  "dependencies": {
+    "@types/node": "^20.8.4",
+    "@types/react": "^18.2.27",
+    "@types/react-reconciler": "^0.28.5",
+    "react-reconciler": "^0.29.0",
+    "rxjs": "^7.8.1"
+  },
+  "peerDependencies": {
+    "discord.js": "^14",
+    "reacord": ">=0.6.0",
+    "react": ">=17"
+  },
+  "devDependencies": {
+    "@reacord/helpers": "workspace:*",
+    "@types/lodash-es": "^4.17.9",
+    "c8": "^8.0.1",
+    "cpy-cli": "^5.0.0",
+    "discord.js": "^14.13.0",
+    "dotenv": "^16.3.1",
+    "lodash-es": "^4.17.21",
+    "nodemon": "^3.0.1",
+    "prettier": "^3.0.3",
+    "react": "^18.2.0",
+    "tsup": "^7.2.0",
+    "type-fest": "^4.4.0"
+  },
+  "release-it": {
+    "git": {
+      "commitMessage": "release v${version}"
+    },
+    "github": {
+      "release": true,
+      "web": true
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

packages/discord.js/tsconfig.json

@@ -0,0 +1,7 @@
+{
+	"extends": "../../tsconfig.base.json",
+	"compilerOptions": {
+		"jsx": "react-jsx"
+	},
+	"exclude": ["node_modules", "dist"]
+}

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

@@ -9,11 +9,11 @@ import {
 	Select,
 	useInstance,
 } from "../library/main.js"
-import type { TextChannel } from "discord.js"
-import { ChannelType, Client, IntentsBitField } from "discord.js"
+import type { CommandInteraction, TextChannel } from "discord.js"
+import { ChannelType, Client, Events, IntentsBitField } from "discord.js"
 import "dotenv/config"
 import { kebabCase } from "lodash-es"
-import { useState } from "react"
+import { useEffect, useState } from "react"
 
 const client = new Client({ intents: IntentsBitField.Flags.Guilds })
 const reacord = new ReacordDiscordJs(client)
@@ -50,6 +50,29 @@ const createTest = async (
 	await block(channel)
 }
 
+const executables: Record<
+	string,
+	(interaction: CommandInteraction) => unknown
+> = {}
+const createInteractionTest = async (
+	name: string,
+	block: (interaction: CommandInteraction) => unknown,
+) => {
+	const slashName = kebabCase(name)
+
+	await client.application?.commands.create({
+		name: slashName,
+		description: "Test command",
+	})
+	executables[slashName] = block
+}
+
+client.on(Events.InteractionCreate, (interaction) => {
+	if (interaction.isCommand()) {
+		executables[interaction.commandName]?.(interaction)
+	}
+})
+
 await createTest("basic", (channel) => {
 	reacord.createChannelMessage(channel).render("Hello, world!")
 })
@@ -125,6 +148,36 @@ await createTest("counter", (channel) => {
 	reacord.createChannelMessage(channel).render(<Counter />)
 })
 
+await createInteractionTest("bounce counter", (interaction) => {
+	function Counter() {
+		const [count, setCount] = useState(0)
+
+		useEffect(() => {
+			// This will reply once the count is updated to track useEffect usage.
+			// Not creating instances.
+			void interaction.followUp(`Updated the count to ${count}`)
+		}, [count])
+
+		return (
+			<>
+				count: {count}
+				<Button
+					style="primary"
+					emoji="➕"
+					onClick={() => setCount(count + 1)}
+				/>
+				<Button
+					style="primary"
+					emoji="➖"
+					onClick={() => setCount(count - 1)}
+				/>
+				<Button label="reset" onClick={() => setCount(0)} />
+			</>
+		)
+	}
+	reacord.createInteractionReply(interaction).render(<Counter />)
+})
+
 await createTest("select", (channel) => {
 	function FruitSelect({ onConfirm }: { onConfirm: (choice: string) => void }) {
 		const [value, setValue] = useState<string>()