release v0.4.0

.eslintrc.cjs

@@ -0,0 +1,25 @@
+require("@rushstack/eslint-patch/modern-module-resolution")
+
+/** @type {import('eslint').Linter.Config} */
+module.exports = {
+  extends: [require.resolve("@itsmapleleaf/configs/eslint")],
+  ignorePatterns: [
+    "**/node_modules/**",
+    "**/.cache/**",
+    "**/build/**",
+    "**/dist/**",
+    "**/coverage/**",
+    "**/public/**",
+  ],
+  parserOptions: {
+    project: require.resolve("./tsconfig.base.json"),
+  },
+  overrides: [
+    {
+      files: ["packages/website/cypress/**"],
+      parserOptions: {
+        project: require.resolve("./packages/website/cypress/tsconfig.json"),
+      },
+    },
+  ],
+}

.eslintrc.json

@@ -1,26 +0,0 @@
-{
-  "extends": ["./node_modules/@itsmapleleaf/configs/eslint"],
-  "ignorePatterns": [
-    "**/node_modules/**",
-    "**/.cache/**",
-    "**/build/**",
-    "**/dist/**",
-    "**/coverage/**",
-    "**/public/**"
-  ],
-  "parserOptions": {
-    "project": "./tsconfig.base.json"
-  },
-  "rules": {
-    "import/no-unused-modules": "off",
-    "unicorn/prevent-abbreviations": "off"
-  },
-  "overrides": [
-    {
-      "files": ["packages/website/cypress/**"],
-      "parserOptions": {
-        "project": "./packages/website/cypress/tsconfig.json"
-      }
-    }
-  ]
-}

.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

@@ -3,4 +3,8 @@ node_modules
 .vscode
 coverage
 .env
+*.code-workspace
+.pnpm-debug.log
 
+build
+.cache

.npmrc

@@ -0,0 +1 @@
+ignore-workspace-root-check = true

.prettierignore

@@ -4,3 +4,4 @@ coverage
 pnpm-lock.yaml
 build
 .cache
+packages/website/public/api

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,24 +3,19 @@
   "scripts": {
     "lint": "eslint --ext js,ts,tsx .",
     "lint-fix": "pnpm lint -- --fix",
-    "format": "prettier --write ."
-  },
-  "dependencies": {
-    "@itsmapleleaf/configs": "^1.1.2"
+    "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": {
-    "@typescript-eslint/eslint-plugin": "^5.9.1",
-    "@typescript-eslint/parser": "^5.9.1",
-    "eslint": "^8.6.0",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-import-resolver-typescript": "^2.5.0",
-    "eslint-plugin-import": "^2.25.4",
-    "eslint-plugin-jsx-a11y": "^6.5.1",
-    "eslint-plugin-react": "^7.28.0",
-    "eslint-plugin-react-hooks": "^4.3.0",
-    "eslint-plugin-unicorn": "^40.0.0",
-    "prettier": "^2.5.1",
-    "typescript": "^4.5.4"
+    "@itsmapleleaf/configs": "^1.1.3",
+    "@rushstack/eslint-patch": "^1.1.3",
+    "@types/eslint": "^8.4.1",
+    "eslint": "^8.14.0",
+    "prettier": "^2.6.2",
+    "typescript": "^4.6.3",
+    "node": "^16"
   },
   "resolutions": {
     "esbuild": "latest"

packages/reacord/helpers/log-pretty.ts

@@ -1,6 +1,5 @@
 import { inspect } from "node:util"
 
-// eslint-disable-next-line import/no-unused-modules
 export function logPretty(value: unknown) {
   console.info(
     inspect(value, {

packages/reacord/helpers/omit.ts

@@ -1,4 +1,3 @@
-// eslint-disable-next-line import/no-unused-modules
 export function omit<Subject extends object, Key extends PropertyKey>(
   subject: Subject,
   keys: Key[],

packages/reacord/helpers/pick.ts

@@ -1,6 +1,5 @@
 import type { LoosePick, UnknownRecord } from "./types"
 
-// eslint-disable-next-line import/no-unused-modules
 export function pick<T, K extends keyof T | PropertyKey>(
   object: T,
   keys: K[],

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

@@ -0,0 +1,35 @@
+import { expect, test } from "vitest"
+import type { PruneNullishValues } from "./prune-nullish-values"
+import { pruneNullishValues } from "./prune-nullish-values"
+
+test("pruneNullishValues", () => {
+  type InputType = {
+    a: string
+    b: string | null | undefined
+    c?: string
+    d: {
+      a: string
+      b: string | undefined
+    }
+  }
+
+  const input: InputType = {
+    a: "a",
+    // eslint-disable-next-line unicorn/no-null
+    b: null,
+    c: undefined,
+    d: {
+      a: "a",
+      b: undefined,
+    },
+  }
+
+  const output: PruneNullishValues<InputType> = {
+    a: "a",
+    d: {
+      a: "a",
+    },
+  }
+
+  expect(pruneNullishValues(input)).toEqual(output)
+})

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

@@ -18,10 +18,25 @@ export function pruneNullishValues<T>(input: T): PruneNullishValues<T> {
   return result
 }
 
-type PruneNullishValues<Input> = Input extends ReadonlyArray<infer Value>
-  ? ReadonlyArray<NonNullable<Value>>
-  : Input extends object
-  ? {
-      [Key in keyof Input]: NonNullable<Input[Key]>
-    }
+export type PruneNullishValues<Input> = Input extends object
+  ? OptionalKeys<
+      { [Key in keyof Input]: NonNullable<PruneNullishValues<Input[Key]>> },
+      KeysWithNullishValues<Input>
+    >
   : Input
+
+type OptionalKeys<Input, Keys extends keyof Input> = Omit<Input, Keys> & {
+  [Key in Keys]?: Input[Key]
+}
+
+type KeysWithNullishValues<Input> = NonNullable<
+  Values<{
+    [Key in keyof Input]: null extends Input[Key]
+      ? Key
+      : undefined extends Input[Key]
+      ? Key
+      : never
+  }>
+>
+
+type Values<Input> = Input[keyof Input]

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

@@ -0,0 +1,21 @@
+import { setTimeout } from "node:timers/promises"
+
+const maxTime = 1000
+
+export async function waitFor<Result>(
+  predicate: () => Result,
+): Promise<Awaited<Result>> {
+  const startTime = Date.now()
+  let lastError: unknown
+
+  while (Date.now() - startTime < maxTime) {
+    try {
+      return await predicate()
+    } catch (error) {
+      lastError = error
+      await setTimeout(50)
+    }
+  }
+
+  throw lastError ?? new Error("Timeout")
+}

packages/reacord/helpers/with-logged-method-calls.ts

@@ -1,6 +1,5 @@
 import { inspect } from "node:util"
 
-// eslint-disable-next-line import/no-unused-modules
 export function withLoggedMethodCalls<T extends object>(value: T) {
   return new Proxy(value as Record<string | symbol, unknown>, {
     get(target, property) {

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`)
         }
 
@@ -298,17 +301,6 @@ function createReacordMessage(message: Discord.Message): Message {
     edit: async (options) => {
       await message.edit(getDiscordMessageOptions(options))
     },
-    disableComponents: async () => {
-      for (const actionRow of message.components) {
-        for (const component of actionRow.components) {
-          component.setDisabled(true)
-        }
-      }
-
-      await message.edit({
-        components: message.components,
-      })
-    },
     delete: async () => {
       await message.delete()
     },
@@ -321,10 +313,6 @@ function createEphemeralReacordMessage(): Message {
       console.warn("Ephemeral messages can't be edited")
       return Promise.resolve()
     },
-    disableComponents: () => {
-      console.warn("Ephemeral messages can't be edited")
-      return Promise.resolve()
-    },
     delete: () => {
       console.warn("Ephemeral messages can't be deleted")
       return Promise.resolve()
@@ -332,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(
-  reacordOptions: MessageOptions,
-): Discord.MessageOptions {
-  const options: Discord.MessageOptions = {
+function getDiscordMessageOptions(reacordOptions: MessageOptions) {
+  const options = {
     // 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,
             }
@@ -359,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/library/internal/message.ts

@@ -49,7 +49,6 @@ export type MessageSelectOptionOptions = {
 export type Message = {
   edit(options: MessageOptions): Promise<void>
   delete(): Promise<void>
-  disableComponents(): Promise<void>
 }
 
 export function getNextActionRow(options: MessageOptions): ActionRow {

packages/reacord/library/internal/reconciler.ts

@@ -52,6 +52,8 @@ const config: HostConfig<
   },
   createTextInstance: (text) => new TextNode(text),
   shouldSetTextContent: () => false,
+  // @ts-expect-error
+  detachDeletedInstance: (instance) => {},
 
   clearContainer: (renderer) => {
     renderer.nodes.clear()

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

@@ -83,7 +83,17 @@ export abstract class Renderer {
 
     if (payload.action === "deactivate") {
       this.updateSubscription.unsubscribe()
-      await this.message?.disableComponents()
+
+      await this.message?.edit({
+        ...payload.options,
+        actionRows: payload.options.actionRows.map((row) =>
+          row.map((component) => ({
+            ...component,
+            disabled: true,
+          })),
+        ),
+      })
+
       return
     }
 

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",
@@ -46,13 +46,13 @@
   "dependencies": {
     "@types/node": "*",
     "@types/react": "*",
-    "@types/react-reconciler": "^0.26.4",
-    "nanoid": "^3.1.31",
-    "react-reconciler": "^0.26.2",
-    "rxjs": "^7.5.2"
+    "@types/react-reconciler": "^0.26.6",
+    "nanoid": "^3.3.3",
+    "react-reconciler": "^0.27.0",
+    "rxjs": "^7.5.5"
   },
   "peerDependencies": {
-    "discord.js": "^13.3",
+    "discord.js": "^14",
     "react": ">=17"
   },
   "peerDependenciesMeta": {
@@ -61,24 +61,24 @@
     }
   },
   "devDependencies": {
-    "@types/lodash-es": "^4.17.5",
-    "c8": "^7.11.0",
-    "discord.js": "^13.5.1",
-    "dotenv": "^11.0.0",
+    "@types/lodash-es": "^4.17.6",
+    "c8": "^7.11.2",
+    "discord.js": "^14.0.3",
+    "dotenv": "^16.0.0",
     "esbuild": "latest",
     "esbuild-jest": "^0.5.0",
-    "esmo": "^0.13.0",
+    "esmo": "^0.14.1",
     "lodash-es": "^4.17.21",
     "nodemon": "^2.0.15",
-    "prettier": "^2.5.1",
+    "prettier": "^2.6.2",
     "pretty-ms": "^7.0.1",
-    "react": "^17.0.2",
-    "release-it": "^14.12.1",
-    "tsup": "^5.11.11",
-    "type-fest": "^2.9.0",
-    "typescript": "^4.5.4",
-    "vite": "^2.7.10",
-    "vitest": "^0.0.141"
+    "react": "^18.0.0",
+    "release-it": "^14.14.2",
+    "tsup": "^5.12.6",
+    "type-fest": "^2.12.2",
+    "typescript": "^4.6.3",
+    "vite": "^2.9.5",
+    "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/reacord/test/select.test.tsx

@@ -1,11 +1,11 @@
 import React, { useState } from "react"
-import { expect, fn, test } from "vitest"
+import { expect, test, vi } from "vitest"
 import { Button, Option, Select } from "../library/main"
 import { ReacordTester } from "./test-adapter"
 
 test("single select", async () => {
   const tester = new ReacordTester()
-  const onSelect = fn()
+  const onSelect = vi.fn()
 
   function TestSelect() {
     const [value, setValue] = useState<string>()
@@ -75,7 +75,7 @@ test("single select", async () => {
 
 test("multiple select", async () => {
   const tester = new ReacordTester()
-  const onSelect = fn()
+  const onSelect = vi.fn()
 
   function TestSelect() {
     const [values, setValues] = useState<string[]>([])

packages/reacord/test/test-adapter.ts

@@ -1,14 +1,14 @@
 /* eslint-disable class-methods-use-this */
 /* eslint-disable require-await */
 import { nanoid } from "nanoid"
-import { nextTick } from "node:process"
-import { promisify } from "node:util"
+import { setTimeout } from "node:timers/promises"
 import type { ReactNode } from "react"
 import { expect } from "vitest"
 import { logPretty } from "../helpers/log-pretty"
 import { omit } from "../helpers/omit"
 import { pruneNullishValues } from "../helpers/prune-nullish-values"
 import { raise } from "../helpers/raise"
+import { waitFor } from "../helpers/wait-for"
 import type {
   ChannelInfo,
   GuildInfo,
@@ -26,17 +26,10 @@ import type {
   CommandInteraction,
   SelectInteraction,
 } from "../library/internal/interaction"
-import type {
-  Message,
-  MessageButtonOptions,
-  MessageOptions,
-  MessageSelectOptions,
-} from "../library/internal/message"
+import type { Message, MessageOptions } from "../library/internal/message"
 import { ChannelMessageRenderer } from "../library/internal/renderers/channel-message-renderer"
 import { InteractionReplyRenderer } from "../library/internal/renderers/interaction-reply-renderer"
 
-const nextTickPromise = promisify(nextTick)
-
 export type MessageSample = ReturnType<ReacordTester["sampleMessages"]>[0]
 
 /**
@@ -73,9 +66,10 @@ export class ReacordTester extends Reacord {
     return this.reply(initialContent)
   }
 
-  async assertMessages(expected: MessageSample[]) {
-    await nextTickPromise()
-    expect(this.sampleMessages()).toEqual(expected)
+  assertMessages(expected: MessageSample[]) {
+    return waitFor(() => {
+      expect(this.sampleMessages()).toEqual(expected)
+    })
   }
 
   async assertRender(content: ReactNode, expected: MessageSample[]) {
@@ -108,57 +102,58 @@ export class ReacordTester extends Reacord {
   }
 
   findButtonByLabel(label: string) {
-    for (const message of this.messageContainer) {
-      for (const component of message.options.actionRows.flat()) {
-        if (component.type === "button" && component.label === label) {
-          return this.createButtonActions(component, message)
-        }
-      }
+    return {
+      click: () => {
+        return waitFor(() => {
+          for (const [component, message] of this.eachComponent()) {
+            if (component.type === "button" && component.label === label) {
+              this.handleComponentInteraction(
+                new TestButtonInteraction(component.customId, message, this),
+              )
+              return
+            }
+          }
+          raise(`Couldn't find button with label "${label}"`)
+        })
+      },
     }
-    raise(`Couldn't find button with label "${label}"`)
   }
 
   findSelectByPlaceholder(placeholder: string) {
-    for (const message of this.messageContainer) {
-      for (const component of message.options.actionRows.flat()) {
-        if (
-          component.type === "select" &&
-          component.placeholder === placeholder
-        ) {
-          return this.createSelectActions(component, message)
-        }
-      }
+    return {
+      select: (...values: string[]) => {
+        return waitFor(() => {
+          for (const [component, message] of this.eachComponent()) {
+            if (
+              component.type === "select" &&
+              component.placeholder === placeholder
+            ) {
+              this.handleComponentInteraction(
+                new TestSelectInteraction(
+                  component.customId,
+                  message,
+                  values,
+                  this,
+                ),
+              )
+              return
+            }
+          }
+          raise(`Couldn't find select with placeholder "${placeholder}"`)
+        })
+      },
     }
-    raise(`Couldn't find select with placeholder "${placeholder}"`)
   }
 
   createMessage(options: MessageOptions) {
     return new TestMessage(options, this.messageContainer)
   }
 
-  private createButtonActions(
-    button: MessageButtonOptions,
-    message: TestMessage,
-  ) {
-    return {
-      click: () => {
-        this.handleComponentInteraction(
-          new TestButtonInteraction(button.customId, message, this),
-        )
-      },
-    }
-  }
-
-  private createSelectActions(
-    component: MessageSelectOptions,
-    message: TestMessage,
-  ) {
-    return {
-      select: (...values: string[]) => {
-        this.handleComponentInteraction(
-          new TestSelectInteraction(component.customId, message, values, this),
-        )
-      },
+  private *eachComponent() {
+    for (const message of this.messageContainer) {
+      for (const component of message.options.actionRows.flat()) {
+        yield [component, message] as const
+      }
     }
   }
 }
@@ -175,16 +170,6 @@ class TestMessage implements Message {
     this.options = options
   }
 
-  async disableComponents(): Promise<void> {
-    for (const row of this.options.actionRows) {
-      for (const action of row) {
-        if (action.type === "button") {
-          action.disabled = true
-        }
-      }
-    }
-  }
-
   async delete(): Promise<void> {
     this.container.remove(this)
   }
@@ -197,16 +182,14 @@ class TestCommandInteraction implements CommandInteraction {
 
   constructor(private messageContainer: Container<TestMessage>) {}
 
-  reply(messageOptions: MessageOptions): Promise<Message> {
-    return Promise.resolve(
-      new TestMessage(messageOptions, this.messageContainer),
-    )
+  async reply(messageOptions: MessageOptions): Promise<Message> {
+    await setTimeout()
+    return new TestMessage(messageOptions, this.messageContainer)
   }
 
-  followUp(messageOptions: MessageOptions): Promise<Message> {
-    return Promise.resolve(
-      new TestMessage(messageOptions, this.messageContainer),
-    )
+  async followUp(messageOptions: MessageOptions): Promise<Message> {
+    await setTimeout()
+    return new TestMessage(messageOptions, this.messageContainer)
   }
 }
 

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

@@ -55,7 +55,7 @@ describe("useInstance", () => {
     await tester.assertMessages([messageOutput("parent")])
     expect(instanceFromHook).toBe(instance)
 
-    tester.findButtonByLabel("create parent").click()
+    await tester.findButtonByLabel("create parent").click()
     await tester.assertMessages([
       messageOutput("parent"),
       messageOutput("child"),
@@ -63,10 +63,10 @@ describe("useInstance", () => {
 
     // this test ensures that the only the child instance is destroyed,
     // and not the parent instance
-    tester.findButtonByLabel("destroy child").click()
+    await tester.findButtonByLabel("destroy child").click()
     await tester.assertMessages([messageOutput("parent")])
 
-    tester.findButtonByLabel("destroy parent").click()
+    await tester.findButtonByLabel("destroy parent").click()
     await tester.assertMessages([])
   })
 })

packages/website/app/entry.client.tsx

@@ -1,4 +1,4 @@
-import { hydrate } from "react-dom";
-import { RemixBrowser } from "remix";
+import { hydrate } from "react-dom"
+import { RemixBrowser } from "@remix-run/react"
 
-hydrate(<RemixBrowser />, document);
+hydrate(<RemixBrowser />, document)

packages/website/app/entry.server.tsx

@@ -1,21 +1,21 @@
-import { renderToString } from "react-dom/server";
-import { RemixServer } from "remix";
-import type { EntryContext } from "remix";
+import { renderToString } from "react-dom/server"
+import type { EntryContext } from "@remix-run/node"
+import { RemixServer } from "@remix-run/react"
 
 export default function handleRequest(
   request: Request,
   responseStatusCode: number,
   responseHeaders: Headers,
-  remixContext: EntryContext
+  remixContext: EntryContext,
 ) {
   const markup = renderToString(
-    <RemixServer context={remixContext} url={request.url} />
-  );
+    <RemixServer context={remixContext} url={request.url} />,
+  )
 
-  responseHeaders.set("Content-Type", "text/html");
+  responseHeaders.set("Content-Type", "text/html")
 
   return new Response("<!DOCTYPE html>" + markup, {
     status: responseStatusCode,
-    headers: responseHeaders
-  });
+    headers: responseHeaders,
+  })
 }

packages/website/app/modules/navigation/app-link.tsx

@@ -1,5 +1,5 @@
 import type { ComponentPropsWithoutRef } from "react"
-import { Link } from "remix"
+import { Link } from "@remix-run/react"
 import { ExternalLink } from "~/modules/dom/external-link"
 
 export type AppLinkProps = ComponentPropsWithoutRef<"a"> & {

packages/website/app/root.tsx

@@ -1,5 +1,8 @@
-import packageJson from "reacord/package.json"
-import type { LinksFunction, LoaderFunction, MetaFunction } from "remix"
+import type {
+  LinksFunction,
+  LoaderFunction,
+  MetaFunction,
+} from "@remix-run/node"
 import {
   Links,
   LiveReload,
@@ -8,7 +11,8 @@ import {
   Scripts,
   ScrollRestoration,
   useLoaderData,
-} from "remix"
+} 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"
@@ -73,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 />
@@ -80,9 +85,10 @@ export default function App() {
         {process.env.NODE_ENV === "production" && (
           <script
             async
-            data-website-id="49c69ade-5593-4853-9686-c9ca9d519a18"
-            src="https://umami-production-265f.up.railway.app/umami.js"
-          />
+            defer
+            data-website-id="e3ce3a50-720e-4489-be37-cc091c1b7029"
+            src="https://umami-production-72bc.up.railway.app/umami.js"
+          ></script>
         )}
       </head>
       <body>

packages/website/app/routes/guides.tsx

@@ -1,5 +1,5 @@
 import clsx from "clsx"
-import { Outlet } from "remix"
+import { Outlet } from "@remix-run/react"
 import { ActiveLink } from "~/modules/navigation/active-link"
 import { AppLink } from "~/modules/navigation/app-link"
 import { useGuideLinksContext } from "~/modules/navigation/guide-links-context"

packages/website/cypress/support/index.js

@@ -14,7 +14,7 @@
 // ***********************************************************
 
 // Import commands.js using ES2015 syntax:
-import './commands'
+import "./commands"
 
 // Alternatively you can use CommonJS syntax:
 // require('./commands')

packages/website/package.json

@@ -2,7 +2,6 @@
   "private": true,
   "name": "website",
   "scripts": {
-    "prepare": "remix setup node",
     "dev": "concurrently 'typedoc --watch' 'pnpm tailwind -- --watch' 'remix dev'",
     "test": "node ./scripts/test.js",
     "test-dev": "pnpm dev & wait-on http-get://localhost:3000 && cypress open",
@@ -12,45 +11,42 @@
     "typecheck": "tsc --noEmit && tsc --project cypress/tsconfig.json --noEmit"
   },
   "dependencies": {
-    "@headlessui/react": "^1.4.2",
-    "@heroicons/react": "^1.0.5",
-    "@reach/rect": "^0.16.0",
-    "@remix-run/react": "^1.1.1",
-    "@remix-run/serve": "^1.1.1",
-    "@tailwindcss/typography": "^0.5.0",
+    "@headlessui/react": "^1.6.0",
+    "@heroicons/react": "^1.0.6",
+    "@reach/rect": "^0.17.0",
+    "@remix-run/node": "^1.4.1",
+    "@remix-run/react": "^1.4.1",
+    "@remix-run/serve": "^1.4.1",
+    "@tailwindcss/typography": "^0.5.2",
     "clsx": "^1.1.1",
-    "fast-glob": "^3.2.10",
+    "fast-glob": "^3.2.11",
     "gray-matter": "^4.0.3",
     "reacord": "workspace:*",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
     "react-focus-on": "^3.5.4",
-    "react-router": "^6.2.1",
-    "react-router-dom": "^6.2.1",
-    "remix": "^1.1.1"
+    "react-router": "^6.3.0",
+    "react-router-dom": "^6.3.0"
   },
   "devDependencies": {
-    "@remix-run/dev": "^1.1.1",
-    "@remix-run/node": "^1.1.1",
+    "@remix-run/dev": "^1.4.1",
+    "@remix-run/node": "^1.4.1",
     "@testing-library/cypress": "^8.0.2",
     "@types/node": "*",
-    "@types/react": "^17.0.38",
-    "@types/react-dom": "^17.0.11",
-    "@types/tailwindcss": "^3.0.2",
+    "@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.2",
-    "concurrently": "^7.0.0",
-    "cypress": "^9.2.1",
-    "execa": "^6.0.0",
-    "postcss": "^8.4.5",
-    "rehype-prism-plus": "^1.3.1",
-    "tailwindcss": "^3.0.13",
-    "typedoc": "^0.22.10",
-    "typescript": "^4.5.4",
-    "wait-on": "^6.0.0"
-  },
-  "engines": {
-    "node": ">=14"
+    "autoprefixer": "^10.4.5",
+    "concurrently": "^7.1.0",
+    "cypress": "^9.6.0",
+    "execa": "^6.1.0",
+    "postcss": "^8.4.12",
+    "rehype-prism-plus": "^1.3.2",
+    "tailwindcss": "^3.0.24",
+    "typedoc": "^0.22.15",
+    "typescript": "^4.6.3",
+    "wait-on": "^6.0.1"
   },
   "sideEffects": false
 }

packages/website/tsconfig.json

@@ -2,6 +2,7 @@
   "extends": "../../tsconfig.base.json",
   "compilerOptions": {
     "jsx": "react-jsx",
+    "baseUrl": ".",
     "paths": {
       "~/*": ["./app/*"]
     }