release v0.4.0

.github/workflows/main.yml

@@ -19,15 +19,15 @@ jobs:
           # if these run in the same process, it dies,
           # so we test them separate
           - name: test reacord
-            run: pnpm test -C packages/reacord
+            run: pnpm -C packages/reacord test
           - name: test website
-            run: pnpm test -C packages/website
+            run: pnpm -C packages/website test
           - name: build
-            run: pnpm build --recursive
+            run: pnpm --recursive run build
           - name: lint
-            run: pnpm lint
+            run: pnpm run lint
           - name: typecheck
-            run: pnpm typecheck --parallel
+            run: pnpm --recursive run typecheck
     name: ${{ matrix.command.name }}
     runs-on: ubuntu-latest
     steps:
@@ -36,6 +36,6 @@ jobs:
         with:
           # https://github.com/actions/setup-node#supported-version-syntax
           node-version: "16"
-      - run: npm i -g pnpm
+      - run: npm i -g pnpm@7.5.0
       - run: pnpm install --frozen-lockfile
       - run: ${{ matrix.command.run }}

.gitignore

@@ -4,6 +4,7 @@ node_modules
 coverage
 .env
 *.code-workspace
+.pnpm-debug.log
 
 build
 .cache

Dockerfile

@@ -1,15 +0,0 @@
-FROM node:lts-slim
-
-ENV CYPRESS_INSTALL_BINARY=0
-
-WORKDIR /app
-
-COPY / ./
-RUN ls -R
-
-RUN npm install -g pnpm
-RUN pnpm install --unsafe-perm --frozen-lockfile
-RUN pnpm run build -C packages/website
-
-ENV NODE_ENV=production
-CMD [ "pnpm", "-C", "packages/website", "start" ]

package.json

@@ -3,7 +3,10 @@
   "scripts": {
     "lint": "eslint --ext js,ts,tsx .",
     "lint-fix": "pnpm lint -- --fix",
-    "format": "prettier --write ."
+    "format": "prettier --write .",
+    "release": "pnpm -C packages/reacord run release",
+    "build": "pnpm -C packages/website run build",
+    "start": "pnpm -C packages/website run start"
   },
   "devDependencies": {
     "@itsmapleleaf/configs": "^1.1.3",
@@ -11,7 +14,8 @@
     "@types/eslint": "^8.4.1",
     "eslint": "^8.14.0",
     "prettier": "^2.6.2",
-    "typescript": "^4.6.3"
+    "typescript": "^4.6.3",
+    "node": "^16"
   },
   "resolutions": {
     "esbuild": "latest"

packages/reacord/helpers/prune-nullish-values.test.ts

@@ -1,5 +1,6 @@
 import { expect, test } from "vitest"
-import { PruneNullishValues, pruneNullishValues } from "./prune-nullish-values"
+import type { PruneNullishValues } from "./prune-nullish-values"
+import { pruneNullishValues } from "./prune-nullish-values"
 
 test("pruneNullishValues", () => {
   type InputType = {
@@ -14,6 +15,7 @@ test("pruneNullishValues", () => {
 
   const input: InputType = {
     a: "a",
+    // eslint-disable-next-line unicorn/no-null
     b: null,
     c: undefined,
     d: {

packages/reacord/helpers/types.ts

@@ -1,4 +1,3 @@
-/* eslint-disable import/no-unused-modules */
 export type MaybePromise<T> = T | Promise<T>
 
 export type ValueOf<Type> = Type extends ReadonlyArray<infer Value>

packages/reacord/helpers/wait-for.ts

@@ -1,4 +1,4 @@
-import { setTimeout } from "timers/promises"
+import { setTimeout } from "node:timers/promises"
 
 const maxTime = 1000
 

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

@@ -5,9 +5,12 @@ import type { Except } from "type-fest"
 import { pick } from "../../helpers/pick"
 import { pruneNullishValues } from "../../helpers/prune-nullish-values"
 import { raise } from "../../helpers/raise"
-import { toUpper } from "../../helpers/to-upper"
 import type { ComponentInteraction } from "../internal/interaction"
-import type { Message, MessageOptions } from "../internal/message"
+import type {
+  Message,
+  MessageButtonOptions,
+  MessageOptions,
+} from "../internal/message"
 import { ChannelMessageRenderer } from "../internal/renderers/channel-message-renderer"
 import { InteractionReplyRenderer } from "../internal/renderers/interaction-reply-renderer"
 import type {
@@ -30,7 +33,7 @@ export class ReacordDiscordJs extends Reacord {
     super(config)
 
     client.on("interactionCreate", (interaction) => {
-      if (interaction.isMessageComponent()) {
+      if (interaction.isButton() || interaction.isSelectMenu()) {
         this.handleComponentInteraction(
           this.createReacordComponentInteraction(interaction),
         )
@@ -88,7 +91,7 @@ export class ReacordDiscordJs extends Reacord {
           (await this.client.channels.fetch(channelId)) ??
           raise(`Channel ${channelId} not found`)
 
-        if (!channel.isText()) {
+        if (!channel.isTextBased()) {
           raise(`Channel ${channelId} is not a text channel`)
         }
 
@@ -317,25 +320,34 @@ function createEphemeralReacordMessage(): Message {
   }
 }
 
+function convertButtonStyleToEnum(style: MessageButtonOptions["style"]) {
+  const styleMap = {
+    primary: Discord.ButtonStyle.Primary,
+    secondary: Discord.ButtonStyle.Secondary,
+    success: Discord.ButtonStyle.Success,
+    danger: Discord.ButtonStyle.Danger,
+  } as const
+
+  return styleMap[style ?? "secondary"]
+}
+
 // TODO: this could be a part of the core library,
 // and also handle some edge cases, e.g. empty messages
-function getDiscordMessageOptions(
+function getDiscordMessageOptions(reacordOptions: MessageOptions) {
-  reacordOptions: MessageOptions,
+  const options = {
-): Discord.MessageOptions {
-  const options: Discord.MessageOptions = {
     // eslint-disable-next-line unicorn/no-null
     content: reacordOptions.content || null,
     embeds: reacordOptions.embeds,
     components: reacordOptions.actionRows.map((row) => ({
-      type: "ACTION_ROW",
+      type: Discord.ComponentType.ActionRow,
       components: row.map(
-        (component): Discord.MessageActionRowComponentOptions => {
+        (component): Discord.MessageActionRowComponentData => {
           if (component.type === "button") {
             return {
-              type: "BUTTON",
+              type: Discord.ComponentType.Button,
               customId: component.customId,
               label: component.label ?? "",
-              style: toUpper(component.style ?? "secondary"),
+              style: convertButtonStyleToEnum(component.style),
               disabled: component.disabled,
               emoji: component.emoji,
             }
@@ -344,7 +356,7 @@ function getDiscordMessageOptions(
           if (component.type === "select") {
             return {
               ...component,
-              type: "SELECT_MENU",
+              type: Discord.ComponentType.SelectMenu,
               options: component.options.map((option) => ({
                 ...option,
                 default: component.values?.includes(option.value),

packages/reacord/package.json

@@ -2,7 +2,7 @@
   "name": "reacord",
   "type": "module",
   "description": "Create interactive Discord messages using React.",
-  "version": "0.3.5",
+  "version": "0.4.0",
   "types": "./dist/main.d.ts",
   "homepage": "https://reacord.mapleleaf.dev",
   "repository": "https://github.com/itsMapleLeaf/reacord.git",
@@ -35,7 +35,7 @@
     }
   },
   "scripts": {
-    "build": "tsup-node library/main.ts --target node16 --format cjs,esm --dts --sourcemap",
+    "build": "tsup library/main.ts --target node16 --format cjs,esm --dts --sourcemap",
     "build-watch": "pnpm build -- --watch",
     "test": "vitest --coverage --no-watch",
     "test-dev": "vitest",
@@ -52,7 +52,7 @@
     "rxjs": "^7.5.5"
   },
   "peerDependencies": {
-    "discord.js": "^13.3",
+    "discord.js": "^14",
     "react": ">=17"
   },
   "peerDependenciesMeta": {
@@ -63,7 +63,7 @@
   "devDependencies": {
     "@types/lodash-es": "^4.17.6",
     "c8": "^7.11.2",
-    "discord.js": "^13.6.0",
+    "discord.js": "^14.0.3",
     "dotenv": "^16.0.0",
     "esbuild": "latest",
     "esbuild-jest": "^0.5.0",
@@ -78,7 +78,7 @@
     "type-fest": "^2.12.2",
     "typescript": "^4.6.3",
     "vite": "^2.9.5",
-    "vitest": "^0.9.4"
+    "vitest": "^0.10.0"
   },
   "resolutions": {
     "esbuild": "latest"

packages/reacord/playground/command-handler.ts

@@ -22,7 +22,7 @@ export function createCommandHandler(client: Client, commands: Command[]) {
   })
 
   client.on("interactionCreate", async (interaction) => {
-    if (!interaction.isCommand()) return
+    if (!interaction.isChatInputCommand()) return
 
     const command = commands.find(
       (command) => command.name === interaction.commandName,

packages/reacord/playground/main.tsx

@@ -1,4 +1,4 @@
-import { Client } from "discord.js"
+import { Client, IntentsBitField } from "discord.js"
 import "dotenv/config"
 import React from "react"
 import { Button, ReacordDiscordJs, useInstance } from "../library/main"
@@ -7,7 +7,7 @@ import { Counter } from "./counter"
 import { FruitSelect } from "./fruit-select"
 
 const client = new Client({
-  intents: ["GUILDS"],
+  intents: IntentsBitField.Flags.Guilds,
 })
 
 const reacord = new ReacordDiscordJs(client)

packages/reacord/test/commonjs-require.test.ts

@@ -0,0 +1,12 @@
+import { spawnSync } from "node:child_process"
+import { createRequire } from "node:module"
+import { beforeAll, expect, test } from "vitest"
+
+beforeAll(() => {
+  spawnSync("pnpm", ["run", "build"])
+})
+
+test("can require commonjs", () => {
+  const require = createRequire(import.meta.url)
+  expect(() => require("../dist/main.cjs")).not.toThrow()
+})

packages/website/app/root.tsx

@@ -1,4 +1,3 @@
-import packageJson from "reacord/package.json"
 import type {
   LinksFunction,
   LoaderFunction,
@@ -13,6 +12,7 @@ import {
   ScrollRestoration,
   useLoaderData,
 } from "@remix-run/react"
+import packageJson from "reacord/package.json"
 import bannerUrl from "~/assets/banner.png"
 import faviconUrl from "~/assets/favicon.png"
 import { GuideLinksProvider } from "~/modules/navigation/guide-links-context"
@@ -77,6 +77,7 @@ export default function App() {
   return (
     <html lang="en" className="bg-slate-900 text-slate-100">
       <head>
+        {/* eslint-disable-next-line unicorn/text-encoding-identifier-case */}
         <meta charSet="utf-8" />
         <meta name="viewport" content="width=device-width,initial-scale=1" />
         <Meta />
@@ -84,9 +85,10 @@ export default function App() {
         {process.env.NODE_ENV === "production" && (
           <script
             async
-            data-website-id="49c69ade-5593-4853-9686-c9ca9d519a18"
+            defer
-            src="https://umami-production-265f.up.railway.app/umami.js"
+            data-website-id="e3ce3a50-720e-4489-be37-cc091c1b7029"
-          />
+            src="https://umami-production-72bc.up.railway.app/umami.js"
+          ></script>
         )}
       </head>
       <body>

packages/website/package.json

@@ -11,7 +11,7 @@
     "typecheck": "tsc --noEmit && tsc --project cypress/tsconfig.json --noEmit"
   },
   "dependencies": {
-    "@headlessui/react": "^1.5.0",
+    "@headlessui/react": "^1.6.0",
     "@heroicons/react": "^1.0.6",
     "@reach/rect": "^0.17.0",
     "@remix-run/node": "^1.4.1",
@@ -33,13 +33,13 @@
     "@remix-run/node": "^1.4.1",
     "@testing-library/cypress": "^8.0.2",
     "@types/node": "*",
-    "@types/react": "^18.0.6",
+    "@types/react": "^18.0.7",
     "@types/react-dom": "^18.0.2",
     "@types/tailwindcss": "^3.0.10",
     "@types/wait-on": "^5.3.1",
-    "autoprefixer": "^10.4.4",
+    "autoprefixer": "^10.4.5",
     "concurrently": "^7.1.0",
-    "cypress": "^9.5.4",
+    "cypress": "^9.6.0",
     "execa": "^6.1.0",
     "postcss": "^8.4.12",
     "rehype-prism-plus": "^1.3.2",
@@ -48,8 +48,5 @@
     "typescript": "^4.6.3",
     "wait-on": "^6.0.1"
   },
-  "engines": {
-    "node": ">=14"
-  },
   "sideEffects": false
 }