first attempt at files api

package.json

@@ -3,8 +3,7 @@
   "scripts": {
     "lint": "eslint --ext js,ts,tsx .",
     "lint-fix": "pnpm lint -- --fix",
-    "format": "prettier --write .",
+    "format": "prettier --write ."
-    "release": "pnpm release -C packages/reacord"
   },
   "devDependencies": {
     "@itsmapleleaf/configs": "^1.1.3",

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

@@ -1,6 +1,5 @@
 import { expect, test } from "vitest"
-import type { PruneNullishValues } from "./prune-nullish-values"
+import { PruneNullishValues, pruneNullishValues } from "./prune-nullish-values"
-import { pruneNullishValues } from "./prune-nullish-values"
 
 test("pruneNullishValues", () => {
   type InputType = {
@@ -15,7 +14,6 @@ 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,3 +1,4 @@
+/* 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 "node:timers/promises"
+import { setTimeout } from "timers/promises"
 
 const maxTime = 1000
 

packages/reacord/library/core/file.ts

@@ -0,0 +1,7 @@
+import { Readable } from "node:stream"
+
+export type ReacordFile = {
+  name?: string
+  description?: string
+  data: Buffer | Readable | string
+}

packages/reacord/library/core/instance.ts

@@ -1,4 +1,5 @@
 import type { ReactNode } from "react"
+import { ReacordFile } from "./file"
 
 /**
  * Represents an interactive message, which can later be replaced or deleted.
@@ -16,4 +17,7 @@ export type ReacordInstance = {
    * This prevents it from listening to user interactions.
    */
   deactivate: () => void
+
+  /** Attach a file to the message for this instance */
+  attach: (file: ReacordFile) => void
 }

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

@@ -301,6 +301,15 @@ function createReacordMessage(message: Discord.Message): Message {
     delete: async () => {
       await message.delete()
     },
+    updateFiles: async (files) => {
+      await message.edit({
+        files: files.map(({ name, description, data }) => ({
+          name,
+          description,
+          attachment: data,
+        })),
+      })
+    },
   }
 }
 
@@ -310,6 +319,10 @@ function createEphemeralReacordMessage(): Message {
       console.warn("Ephemeral messages can't be edited")
       return Promise.resolve()
     },
+    updateFiles: () => {
+      console.warn("Ephemeral messages can't be edited")
+      return Promise.resolve()
+    },
     delete: () => {
       console.warn("Ephemeral messages can't be deleted")
       return Promise.resolve()
@@ -358,7 +371,10 @@ function getDiscordMessageOptions(
     })),
   }
 
-  if (!options.content && !options.embeds?.length) {
+  const hasContent =
+    options.content || options.embeds?.length || options.files?.length
+
+  if (!hasContent) {
     options.content = "_ _"
   }
 

packages/reacord/library/core/reacord.tsx

@@ -63,6 +63,9 @@ export abstract class Reacord {
         this.renderers = this.renderers.filter((it) => it !== renderer)
         renderer.destroy()
       },
+      attach: (file) => {
+        renderer.attach(file)
+      },
     }
 
     if (initialContent !== undefined) {

packages/reacord/library/internal/channel.ts

@@ -1,5 +1,7 @@
+import { ReacordFile } from "../core/file"
 import type { Message, MessageOptions } from "./message"
 
 export type Channel = {
   send(message: MessageOptions): Promise<Message>
+  sendFiles(files: readonly ReacordFile[]): Promise<Message>
 }

packages/reacord/library/internal/message.ts

@@ -2,6 +2,7 @@ import type { Except } from "type-fest"
 import { last } from "../../helpers/last"
 import type { EmbedOptions } from "../core/components/embed-options"
 import type { SelectProps } from "../core/components/select"
+import { ReacordFile } from "../main"
 
 export type MessageOptions = {
   content: string
@@ -49,6 +50,7 @@ export type MessageSelectOptionOptions = {
 export type Message = {
   edit(options: MessageOptions): Promise<void>
   delete(): Promise<void>
+  updateFiles(files: readonly ReacordFile[]): Promise<void>
 }
 
 export function getNextActionRow(options: MessageOptions): ActionRow {

packages/reacord/library/internal/renderers/channel-message-renderer.ts

@@ -1,3 +1,4 @@
+import { ReacordFile } from "../../core/file"
 import type { Channel } from "../channel"
 import type { Message, MessageOptions } from "../message"
 import { Renderer } from "./renderer"
@@ -10,4 +11,10 @@ export class ChannelMessageRenderer extends Renderer {
   protected createMessage(options: MessageOptions): Promise<Message> {
     return this.channel.send(options)
   }
+
+  protected createMessageFromFiles(
+    files: readonly ReacordFile[],
+  ): Promise<Message> {
+    return this.channel.sendFiles(files)
+  }
 }

packages/reacord/library/internal/renderers/renderer.ts

@@ -1,5 +1,6 @@
 import { Subject } from "rxjs"
 import { concatMap } from "rxjs/operators"
+import { ReacordFile } from "../../core/file"
 import { Container } from "../container.js"
 import type { ComponentInteraction } from "../interaction"
 import type { Message, MessageOptions } from "../message"
@@ -7,15 +8,21 @@ import type { Node } from "../node.js"
 
 type UpdatePayload =
   | { action: "update" | "deactivate"; options: MessageOptions }
+  | { action: "files"; files: readonly ReacordFile[] }
   | { action: "deferUpdate"; interaction: ComponentInteraction }
   | { action: "destroy" }
 
+type NewMessagePayload =
+  | { source: "content"; messageOptions?: MessageOptions }
+  | { source: "files"; files?: readonly ReacordFile[] }
+
 export abstract class Renderer {
   readonly nodes = new Container<Node<unknown>>()
   private componentInteraction?: ComponentInteraction
   private message?: Message
   private active = true
   private updates = new Subject<UpdatePayload>()
+  private files: readonly ReacordFile[] = []
 
   private updateSubscription = this.updates
     .pipe(concatMap((payload) => this.updateMessage(payload)))
@@ -46,6 +53,11 @@ export abstract class Renderer {
     this.updates.next({ action: "destroy" })
   }
 
+  attach(file: ReacordFile) {
+    const newFiles = (this.files = [...this.files, file])
+    this.updates.next({ action: "files", files: newFiles })
+  }
+
   handleComponentInteraction(interaction: ComponentInteraction) {
     this.componentInteraction = interaction
 
@@ -60,7 +72,7 @@ export abstract class Renderer {
     }
   }
 
-  protected abstract createMessage(options: MessageOptions): Promise<Message>
+  protected abstract createMessage(options: NewMessagePayload): Promise<Message>
 
   private getMessageOptions(): MessageOptions {
     const options: MessageOptions = {
@@ -102,6 +114,15 @@ export abstract class Renderer {
       return
     }
 
+    if (payload.action === "files") {
+      if (this.message) {
+        await this.message?.updateFiles(payload.files)
+      } else {
+        this.message = await this.createMessageFromFiles(payload.files)
+      }
+      return
+    }
+
     if (this.componentInteraction) {
       const promise = this.componentInteraction.update(payload.options)
       this.componentInteraction = undefined

packages/reacord/library/main.ts

@@ -12,6 +12,7 @@ export * from "./core/components/embed-title"
 export * from "./core/components/link"
 export * from "./core/components/option"
 export * from "./core/components/select"
+export * from "./core/file"
 export * from "./core/instance"
 export { useInstance } from "./core/instance-context"
 export * from "./core/reacord"

packages/reacord/package.json

@@ -2,7 +2,7 @@
   "name": "reacord",
   "type": "module",
   "description": "Create interactive Discord messages using React.",
-  "version": "0.3.6",
+  "version": "0.3.5",
   "types": "./dist/main.d.ts",
   "homepage": "https://reacord.mapleleaf.dev",
   "repository": "https://github.com/itsMapleLeaf/reacord.git",
@@ -78,7 +78,7 @@
     "type-fest": "^2.12.2",
     "typescript": "^4.6.3",
     "vite": "^2.9.5",
-    "vitest": "^0.10.0"
+    "vitest": "^0.9.4"
   },
   "resolutions": {
     "esbuild": "latest"

packages/reacord/playground/command-handler.ts

@@ -8,17 +8,15 @@ type Command = {
 
 export function createCommandHandler(client: Client, commands: Command[]) {
   client.on("ready", async () => {
-    for (const command of commands) {
     for (const guild of client.guilds.cache.values()) {
-        await client.application?.commands.create(
+      client.application!.commands.set(
-          {
+        commands.map(({ name, description }) => ({
-            name: command.name,
+          name,
-            description: command.description,
+          description,
-          },
+        })),
         guild.id,
       )
     }
-    }
   })
 
   client.on("interactionCreate", async (interaction) => {

packages/reacord/playground/main.tsx

@@ -1,6 +1,9 @@
 import { Client } from "discord.js"
 import "dotenv/config"
+import { readFile } from "fs/promises"
+import { join } from "path"
 import React from "react"
+import { fileURLToPath } from "url"
 import { Button, ReacordDiscordJs, useInstance } from "../library/main"
 import { createCommandHandler } from "./command-handler"
 import { Counter } from "./counter"
@@ -104,6 +107,19 @@ createCommandHandler(client, [
       reacord.reply(interaction, <DeleteThis />)
     },
   },
+  {
+    name: "anime",
+    description: "shows an anime image",
+    run: async (interaction) => {
+      const reply = reacord.reply(interaction)
+      const image = await readFile(
+        join(fileURLToPath(import.meta.url), "../anime.jpg"),
+      )
+
+      reply.attach({ name: "anime.jpg", data: image })
+      // reply.render("anime")
+    },
+  },
 ])
 
 await client.login(process.env.TEST_BOT_TOKEN)

packages/website/app/root.tsx

@@ -1,3 +1,4 @@
+import packageJson from "reacord/package.json"
 import type {
   LinksFunction,
   LoaderFunction,
@@ -12,7 +13,6 @@ 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,7 +77,6 @@ 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 />

packages/website/package.json

@@ -11,7 +11,7 @@
     "typecheck": "tsc --noEmit && tsc --project cypress/tsconfig.json --noEmit"
   },
   "dependencies": {
-    "@headlessui/react": "^1.6.0",
+    "@headlessui/react": "^1.5.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.7",
+    "@types/react": "^18.0.6",
     "@types/react-dom": "^18.0.2",
     "@types/tailwindcss": "^3.0.10",
     "@types/wait-on": "^5.3.1",
-    "autoprefixer": "^10.4.5",
+    "autoprefixer": "^10.4.4",
     "concurrently": "^7.1.0",
-    "cypress": "^9.6.0",
+    "cypress": "^9.5.4",
     "execa": "^6.1.0",
     "postcss": "^8.4.12",
     "rehype-prism-plus": "^1.3.2",