add playground

package.json

@@ -18,9 +18,10 @@
     "lint-fix": "pnpm lint -- --fix",
     "format": "prettier --write .",
     "test": "node --experimental-vm-modules --no-warnings node_modules/jest/bin/jest.js --colors",
-    "test-watch": "node --experimental-vm-modules --no-warnings --inspect-brk node_modules/jest/bin/jest.js --watch --colors --runInBand",
+    "test-watch": "node --experimental-vm-modules --no-warnings --inspect node_modules/jest/bin/jest.js --watch --colors --runInBand",
     "coverage": "pnpm test -- --coverage",
-    "typecheck": "tsc --noEmit"
+    "typecheck": "tsc --noEmit",
+    "playground": "nodemon -x esmo ./playground/main.tsx"
   },
   "dependencies": {
     "@types/node": "*",
@@ -51,7 +52,9 @@
     "eslint-plugin-react": "^7.27.1",
     "eslint-plugin-react-hooks": "^4.3.0",
     "eslint-plugin-unicorn": "^39.0.0",
+    "esmo": "^0.13.0",
     "jest": "^27.4.5",
+    "nodemon": "^2.0.15",
     "prettier": "^2.5.1",
     "react": "^17.0.2",
     "tsup": "^5.11.6",

playground/counter.tsx

@@ -0,0 +1,12 @@
+import * as React from "react"
+import { Button } from "../src/main.js"
+
+export function Counter() {
+  const [count, setCount] = React.useState(0)
+  return (
+    <>
+      this button was clicked {count} times
+      <Button onClick={() => setCount(count + 1)}>clicc</Button>
+    </>
+  )
+}

playground/main.tsx

@@ -0,0 +1,60 @@
+import type { CommandInteraction } from "discord.js"
+import { Client } from "discord.js"
+import "dotenv/config"
+import * as React from "react"
+import { createRoot } from "../src/main.js"
+import { Counter } from "./counter.js"
+
+const client = new Client({
+  intents: ["GUILDS"],
+})
+
+type Command = {
+  name: string
+  description: string
+  run: (interaction: CommandInteraction) => unknown
+}
+
+const commands: Command[] = [
+  {
+    name: "counter",
+    description: "shows a counter button",
+    run: async (interaction) => {
+      const root = createRoot(interaction.channel!)
+      await interaction.reply("a")
+      await root.render(<Counter />)
+    },
+  },
+]
+
+client.on("ready", async () => {
+  for (const command of commands) {
+    for (const guild of client.guilds.cache.values()) {
+      await client.application?.commands.create(
+        {
+          name: command.name,
+          description: command.description,
+        },
+        guild.id,
+      )
+    }
+  }
+  console.log("ready 💖")
+})
+
+client.on("interactionCreate", async (interaction) => {
+  if (!interaction.isCommand()) return
+
+  const command = commands.find(
+    (command) => command.name === interaction.commandName,
+  )
+  if (command) {
+    try {
+      await command.run(interaction)
+    } catch (error) {
+      console.error(error)
+    }
+  }
+})
+
+await client.login(process.env.TEST_BOT_TOKEN)