Version Packages

was only used for viest config types, don't need it now

.changeset/README.md

@@ -0,0 +1,8 @@
+# Changesets
+
+Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
+with multi-package repos, or single-package repos to help you version and publish your code. You can
+find the full documentation for it [in our repository](https://github.com/changesets/changesets)
+
+We have a quick list of common questions to get you started engaging with this project in
+[our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md)

.changeset/config.json

@@ -0,0 +1,11 @@
+{
+  "$schema": "https://unpkg.com/@changesets/config@2.1.0/schema.json",
+  "changelog": "@changesets/cli/changelog",
+  "commit": false,
+  "fixed": [],
+  "linked": [],
+  "access": "public",
+  "baseBranch": "main",
+  "updateInternalDependencies": "patch",
+  "ignore": []
+}

.github/workflows/main.yml

@@ -10,6 +10,10 @@ env:
   TEST_CHANNEL_ID: ${{ secrets.TEST_CHANNEL_ID }}
   TEST_GUILD_ID: ${{ secrets.TEST_GUILD_ID }}
 
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
 jobs:
   run-commands:
     strategy:
@@ -19,15 +23,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 +40,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 }}

.github/workflows/release.yml

@@ -0,0 +1,37 @@
+# https://pnpm.io/using-changesets
+name: release
+
+on:
+  push:
+    branches:
+      - main
+
+concurrency: ${{ github.workflow }}-${{ github.ref }}
+
+jobs:
+  release:
+    name: release
+    runs-on: ubuntu-latest
+    steps:
+      - name: checkout
+        uses: actions/checkout@v2
+
+      - name: setup node
+        uses: actions/setup-node@v2
+        with:
+          node-version: 16
+
+      - name: install pnpm
+        run: npm install -g pnpm
+
+      - name: install deps
+        run: pnpm install --frozen-lockfile
+
+      - name: changesets release
+        id: changesets
+        uses: changesets/action@v1
+        with:
+          publish: pnpm run release
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

.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" ]

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2022  itsMapleLeaf
+Copyright (c) 2022 itsMapleLeaf
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package.json

@@ -1,18 +1,23 @@
 {
+  "name": "reacord-monorepo",
   "private": true,
   "scripts": {
     "lint": "eslint --ext js,ts,tsx .",
     "lint-fix": "pnpm lint -- --fix",
     "format": "prettier --write .",
-    "release": "pnpm release -C packages/reacord"
+    "build": "pnpm -r run build",
+    "start": "pnpm -C packages/website run start",
+    "release": "pnpm -r run build && changeset publish"
   },
   "devDependencies": {
-    "@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"
+    "@changesets/cli": "^2.24.0",
+    "@itsmapleleaf/configs": "^1.1.5",
+    "@rushstack/eslint-patch": "^1.1.4",
+    "@types/eslint": "^8.4.5",
+    "eslint": "^8.20.0",
+    "node": "^16.16.0",
+    "prettier": "^2.7.1",
+    "typescript": "^4.7.4"
   },
   "resolutions": {
     "esbuild": "latest"

packages/reacord/CHANGELOG.md

@@ -0,0 +1,15 @@
+# reacord
+
+## 0.5.1
+
+### Patch Changes
+
+- 72f4a4a: upgrade dependencies and remove some unneeded
+- 7536bde: add types in exports to work with TS nodenext
+- e335165: fix links
+
+## 0.5.0
+
+### Minor Changes
+
+- aa65da5: allow JSX in more places

packages/reacord/library/core/components/button-shared-props.ts

@@ -1,10 +1,12 @@
+import type { ReactNode } from "react"
+
 /**
  * Common props between button-like components
  * @category Button
  */
 export type ButtonSharedProps = {
   /** The text on the button. Rich formatting (markdown) is not supported here. */
-  label?: string
+  label?: ReactNode
 
   /** When true, the button will be slightly faded, and cannot be clicked. */
   disabled?: boolean

packages/reacord/library/core/components/button.tsx

@@ -1,4 +1,4 @@
-import { nanoid } from "nanoid"
+import { randomUUID } from "node:crypto"
 import React from "react"
 import { ReacordElement } from "../../internal/element.js"
 import type { ComponentInteraction } from "../../internal/interaction"
@@ -34,12 +34,22 @@ export type ButtonClickEvent = ComponentEvent
  */
 export function Button(props: ButtonProps) {
   return (
-    <ReacordElement props={props} createNode={() => new ButtonNode(props)} />
+    <ReacordElement props={props} createNode={() => new ButtonNode(props)}>
+      <ReacordElement props={{}} createNode={() => new ButtonLabelNode({})}>
+        {props.label}
+      </ReacordElement>
+    </ReacordElement>
   )
 }
 
 class ButtonNode extends Node<ButtonProps> {
-  private customId = nanoid()
+  private customId = randomUUID()
+
+  // this has text children, but buttons themselves shouldn't yield text
+  // eslint-disable-next-line class-methods-use-this
+  override get text() {
+    return ""
+  }
 
   override modifyMessageOptions(options: MessageOptions): void {
     getNextActionRow(options).push({
@@ -48,7 +58,7 @@ class ButtonNode extends Node<ButtonProps> {
       style: this.props.style ?? "secondary",
       disabled: this.props.disabled,
       emoji: this.props.emoji,
-      label: this.props.label,
+      label: this.children.findType(ButtonLabelNode)?.text,
     })
   }
 
@@ -63,3 +73,5 @@ class ButtonNode extends Node<ButtonProps> {
     return false
   }
 }
+
+class ButtonLabelNode extends Node<{}> {}

packages/reacord/library/core/components/embed-author.tsx

@@ -1,5 +1,7 @@
+import type { ReactNode } from "react"
 import React from "react"
 import { ReacordElement } from "../../internal/element.js"
+import { Node } from "../../internal/node.js"
 import { EmbedChildNode } from "./embed-child.js"
 import type { EmbedOptions } from "./embed-options"
 
@@ -7,8 +9,8 @@ import type { EmbedOptions } from "./embed-options"
  * @category Embed
  */
 export type EmbedAuthorProps = {
-  name?: string
-  children?: string
+  name?: ReactNode
+  children?: ReactNode
   url?: string
   iconUrl?: string
 }
@@ -18,19 +20,22 @@ export type EmbedAuthorProps = {
  */
 export function EmbedAuthor(props: EmbedAuthorProps) {
   return (
-    <ReacordElement
-      props={props}
-      createNode={() => new EmbedAuthorNode(props)}
-    />
+    <ReacordElement props={props} createNode={() => new EmbedAuthorNode(props)}>
+      <ReacordElement props={{}} createNode={() => new AuthorTextNode({})}>
+        {props.name ?? props.children}
+      </ReacordElement>
+    </ReacordElement>
   )
 }
 
 class EmbedAuthorNode extends EmbedChildNode<EmbedAuthorProps> {
   override modifyEmbedOptions(options: EmbedOptions): void {
     options.author = {
-      name: this.props.name ?? this.props.children ?? "",
+      name: this.children.findType(AuthorTextNode)?.text ?? "",
       url: this.props.url,
       icon_url: this.props.iconUrl,
     }
   }
 }
+
+class AuthorTextNode extends Node<{}> {}

packages/reacord/library/core/components/embed-field.tsx

@@ -1,5 +1,7 @@
+import type { ReactNode } from "react"
 import React from "react"
 import { ReacordElement } from "../../internal/element.js"
+import { Node } from "../../internal/node.js"
 import { EmbedChildNode } from "./embed-child.js"
 import type { EmbedOptions } from "./embed-options"
 
@@ -7,10 +9,10 @@ import type { EmbedOptions } from "./embed-options"
  * @category Embed
  */
 export type EmbedFieldProps = {
-  name: string
-  value?: string
+  name: ReactNode
+  value?: ReactNode
   inline?: boolean
-  children?: string
+  children?: ReactNode
 }
 
 /**
@@ -18,10 +20,14 @@ export type EmbedFieldProps = {
  */
 export function EmbedField(props: EmbedFieldProps) {
   return (
-    <ReacordElement
-      props={props}
-      createNode={() => new EmbedFieldNode(props)}
-    />
+    <ReacordElement props={props} createNode={() => new EmbedFieldNode(props)}>
+      <ReacordElement props={{}} createNode={() => new FieldNameNode({})}>
+        {props.name}
+      </ReacordElement>
+      <ReacordElement props={{}} createNode={() => new FieldValueNode({})}>
+        {props.value || props.children}
+      </ReacordElement>
+    </ReacordElement>
   )
 }
 
@@ -29,9 +35,12 @@ class EmbedFieldNode extends EmbedChildNode<EmbedFieldProps> {
   override modifyEmbedOptions(options: EmbedOptions): void {
     options.fields ??= []
     options.fields.push({
-      name: this.props.name,
-      value: this.props.value ?? this.props.children ?? "",
+      name: this.children.findType(FieldNameNode)?.text ?? "",
+      value: this.children.findType(FieldValueNode)?.text ?? "",
       inline: this.props.inline,
     })
   }
 }
+
+class FieldNameNode extends Node<{}> {}
+class FieldValueNode extends Node<{}> {}

packages/reacord/library/core/components/embed-footer.tsx

@@ -1,5 +1,7 @@
+import type { ReactNode } from "react"
 import React from "react"
 import { ReacordElement } from "../../internal/element.js"
+import { Node } from "../../internal/node.js"
 import { EmbedChildNode } from "./embed-child.js"
 import type { EmbedOptions } from "./embed-options"
 
@@ -7,8 +9,8 @@ import type { EmbedOptions } from "./embed-options"
  * @category Embed
  */
 export type EmbedFooterProps = {
-  text?: string
-  children?: string
+  text?: ReactNode
+  children?: ReactNode
   iconUrl?: string
   timestamp?: string | number | Date
 }
@@ -16,19 +18,22 @@ export type EmbedFooterProps = {
 /**
  * @category Embed
  */
-export function EmbedFooter(props: EmbedFooterProps) {
+export function EmbedFooter({ text, children, ...props }: EmbedFooterProps) {
   return (
-    <ReacordElement
-      props={props}
-      createNode={() => new EmbedFooterNode(props)}
-    />
+    <ReacordElement props={props} createNode={() => new EmbedFooterNode(props)}>
+      <ReacordElement props={{}} createNode={() => new FooterTextNode({})}>
+        {text ?? children}
+      </ReacordElement>
+    </ReacordElement>
   )
 }
 
-class EmbedFooterNode extends EmbedChildNode<EmbedFooterProps> {
+class EmbedFooterNode extends EmbedChildNode<
+  Omit<EmbedFooterProps, "text" | "children">
+> {
   override modifyEmbedOptions(options: EmbedOptions): void {
     options.footer = {
-      text: this.props.text ?? this.props.children ?? "",
+      text: this.children.findType(FooterTextNode)?.text ?? "",
       icon_url: this.props.iconUrl,
     }
     options.timestamp = this.props.timestamp
@@ -36,3 +41,5 @@ class EmbedFooterNode extends EmbedChildNode<EmbedFooterProps> {
       : undefined
   }
 }
+
+class FooterTextNode extends Node<{}> {}

packages/reacord/library/core/components/embed-title.tsx

@@ -1,5 +1,7 @@
+import type { ReactNode } from "react"
 import React from "react"
 import { ReacordElement } from "../../internal/element.js"
+import { Node } from "../../internal/node.js"
 import { EmbedChildNode } from "./embed-child.js"
 import type { EmbedOptions } from "./embed-options"
 
@@ -7,25 +9,28 @@ import type { EmbedOptions } from "./embed-options"
  * @category Embed
  */
 export type EmbedTitleProps = {
-  children: string
+  children: ReactNode
   url?: string
 }
 
 /**
  * @category Embed
  */
-export function EmbedTitle(props: EmbedTitleProps) {
+export function EmbedTitle({ children, ...props }: EmbedTitleProps) {
   return (
-    <ReacordElement
-      props={props}
-      createNode={() => new EmbedTitleNode(props)}
-    />
+    <ReacordElement props={props} createNode={() => new EmbedTitleNode(props)}>
+      <ReacordElement props={{}} createNode={() => new TitleTextNode({})}>
+        {children}
+      </ReacordElement>
+    </ReacordElement>
   )
 }
 
-class EmbedTitleNode extends EmbedChildNode<EmbedTitleProps> {
+class EmbedTitleNode extends EmbedChildNode<Omit<EmbedTitleProps, "children">> {
   override modifyEmbedOptions(options: EmbedOptions): void {
-    options.title = this.props.children
+    options.title = this.children.findType(TitleTextNode)?.text ?? ""
     options.url = this.props.url
   }
 }
+
+class TitleTextNode extends Node<{}> {}

packages/reacord/library/core/components/link.tsx

@@ -18,18 +18,26 @@ export type LinkProps = ButtonSharedProps & {
 /**
  * @category Link
  */
-export function Link(props: LinkProps) {
-  return <ReacordElement props={props} createNode={() => new LinkNode(props)} />
+export function Link({ label, children, ...props }: LinkProps) {
+  return (
+    <ReacordElement props={props} createNode={() => new LinkNode(props)}>
+      <ReacordElement props={{}} createNode={() => new LinkTextNode({})}>
+        {label || children}
+      </ReacordElement>
+    </ReacordElement>
+  )
 }
 
-class LinkNode extends Node<LinkProps> {
+class LinkNode extends Node<Omit<LinkProps, "label" | "children">> {
   override modifyMessageOptions(options: MessageOptions): void {
     getNextActionRow(options).push({
       type: "link",
       disabled: this.props.disabled,
       emoji: this.props.emoji,
-      label: this.props.label || this.props.children,
+      label: this.children.findType(LinkTextNode)?.text,
       url: this.props.url,
     })
   }
 }
+
+class LinkTextNode extends Node<{}> {}

packages/reacord/library/core/components/option-node.ts

@@ -2,13 +2,18 @@ import type { MessageSelectOptionOptions } from "../../internal/message"
 import { Node } from "../../internal/node"
 import type { OptionProps } from "./option"
 
-export class OptionNode extends Node<OptionProps> {
+export class OptionNode extends Node<
+  Omit<OptionProps, "children" | "label" | "description">
+> {
   get options(): MessageSelectOptionOptions {
     return {
-      label: this.props.children || this.props.label || this.props.value,
+      label: this.children.findType(OptionLabelNode)?.text ?? this.props.value,
       value: this.props.value,
-      description: this.props.description,
+      description: this.children.findType(OptionDescriptionNode)?.text,
       emoji: this.props.emoji,
     }
   }
 }
+
+export class OptionLabelNode extends Node<{}> {}
+export class OptionDescriptionNode extends Node<{}> {}

packages/reacord/library/core/components/option.tsx

@@ -1,6 +1,11 @@
+import type { ReactNode } from "react"
 import React from "react"
 import { ReacordElement } from "../../internal/element"
-import { OptionNode } from "./option-node"
+import {
+  OptionDescriptionNode,
+  OptionLabelNode,
+  OptionNode,
+} from "./option-node"
 
 /**
  * @category Select
@@ -9,11 +14,11 @@ export type OptionProps = {
   /** The internal value of this option */
   value: string
   /** The text shown to the user. This takes priority over `children` */
-  label?: string
+  label?: ReactNode
   /** The text shown to the user */
-  children?: string
+  children?: ReactNode
   /** Description for the option, shown to the user */
-  description?: string
+  description?: ReactNode
 
   /**
    * Renders an emoji to the left of the text.
@@ -31,8 +36,27 @@ export type OptionProps = {
 /**
  * @category Select
  */
-export function Option(props: OptionProps) {
+export function Option({
+  label,
+  children,
+  description,
+  ...props
+}: OptionProps) {
   return (
-    <ReacordElement props={props} createNode={() => new OptionNode(props)} />
+    <ReacordElement props={props} createNode={() => new OptionNode(props)}>
+      {(label !== undefined || children !== undefined) && (
+        <ReacordElement props={{}} createNode={() => new OptionLabelNode({})}>
+          {label || children}
+        </ReacordElement>
+      )}
+      {description !== undefined && (
+        <ReacordElement
+          props={{}}
+          createNode={() => new OptionDescriptionNode({})}
+        >
+          {description}
+        </ReacordElement>
+      )}
+    </ReacordElement>
   )
 }

packages/reacord/library/core/components/select.tsx

@@ -1,4 +1,4 @@
-import { nanoid } from "nanoid"
+import { randomUUID } from "node:crypto"
 import type { ReactNode } from "react"
 import React from "react"
 import { isInstanceOf } from "../../../helpers/is-instance-of"
@@ -89,7 +89,7 @@ export function Select(props: SelectProps) {
 }
 
 class SelectNode extends Node<SelectProps> {
-  readonly customId = nanoid()
+  readonly customId = randomUUID()
 
   override modifyMessageOptions(message: MessageOptions): void {
     const actionRow: ActionRow = []

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,45 @@ 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,
+            }
+          }
+
+          if (component.type === "link") {
+            return {
+              type: Discord.ComponentType.Button,
+              url: component.url,
+              label: component.label ?? "",
+              style: Discord.ButtonStyle.Link,
               disabled: component.disabled,
               emoji: component.emoji,
             }
@@ -344,7 +367,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),
@@ -352,7 +375,7 @@ function getDiscordMessageOptions(
             }
           }
 
-          raise(`Unsupported component type: ${component.type}`)
+          raise(`Unsupported component type: ${(component as any).type}`)
         },
       ),
     })),

packages/reacord/library/core/reacord.tsx

@@ -47,7 +47,19 @@ export abstract class Reacord {
 
     this.renderers.push(renderer)
 
-    const container = reconciler.createContainer(renderer, 0, false, {})
+    const container = reconciler.createContainer(
+      renderer,
+      0,
+      // eslint-disable-next-line unicorn/no-null
+      null,
+      false,
+      // eslint-disable-next-line unicorn/no-null
+      null,
+      "reacord",
+      () => {},
+      // eslint-disable-next-line unicorn/no-null
+      null,
+    )
 
     const instance: ReacordInstance = {
       render: (content: ReactNode) => {

packages/reacord/library/internal/container.ts

@@ -21,6 +21,16 @@ export class Container<T> {
     this.items = []
   }
 
+  find(predicate: (item: T) => boolean): T | undefined {
+    return this.items.find(predicate)
+  }
+
+  findType<U extends T>(type: new (...args: any[]) => U): U | undefined {
+    for (const item of this.items) {
+      if (item instanceof type) return item
+    }
+  }
+
   [Symbol.iterator]() {
     return this.items[Symbol.iterator]()
   }

packages/reacord/library/internal/node.ts

@@ -13,4 +13,8 @@ export abstract class Node<Props> {
   handleComponentInteraction(interaction: ComponentInteraction): boolean {
     return false
   }
+
+  get text(): string {
+    return [...this.children].map((child) => child.text).join("")
+  }
 }

packages/reacord/library/internal/reconciler.ts

@@ -1,5 +1,6 @@
 import type { HostConfig } from "react-reconciler"
 import ReactReconciler from "react-reconciler"
+import { DefaultEventPriority } from "react-reconciler/constants"
 import { raise } from "../../helpers/raise.js"
 import { Node } from "./node.js"
 import type { Renderer } from "./renderers/renderer"
@@ -20,8 +21,6 @@ const config: HostConfig<
   number, // TimeoutHandle,
   number // NoTimeout,
 > = {
-  // config
-  now: Date.now,
   supportsMutation: true,
   supportsPersistence: false,
   supportsHydration: false,
@@ -52,8 +51,13 @@ const config: HostConfig<
   },
   createTextInstance: (text) => new TextNode(text),
   shouldSetTextContent: () => false,
-  // @ts-expect-error
   detachDeletedInstance: (instance) => {},
+  beforeActiveInstanceBlur: () => {},
+  afterActiveInstanceBlur: () => {},
+  // eslint-disable-next-line unicorn/no-null
+  getInstanceFromNode: (node: any) => null,
+  // eslint-disable-next-line unicorn/no-null
+  getInstanceFromScope: (scopeInstance: any) => null,
 
   clearContainer: (renderer) => {
     renderer.nodes.clear()
@@ -94,11 +98,14 @@ const config: HostConfig<
   resetAfterCommit: (renderer) => {
     renderer.render()
   },
+  prepareScopeUpdate: (scopeInstance: any, instance: any) => {},
 
   preparePortalMount: () => raise("Portals are not supported"),
   getPublicInstance: () => raise("Refs are currently not supported"),
 
   finalizeInitialChildren: () => false,
+
+  getCurrentEventPriority: () => DefaultEventPriority,
 }
 
 export const reconciler = ReactReconciler(config)

packages/reacord/library/internal/text-node.ts

@@ -5,4 +5,8 @@ export class TextNode extends Node<string> {
   override modifyMessageOptions(options: MessageOptions) {
     options.content = options.content + this.props
   }
+
+  override get text() {
+    return this.props
+  }
 }

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.5.1",
   "types": "./dist/main.d.ts",
   "homepage": "https://reacord.mapleleaf.dev",
   "repository": "https://github.com/itsMapleLeaf/reacord.git",
@@ -27,7 +27,8 @@
   "exports": {
     ".": {
       "import": "./dist/main.js",
-      "require": "./dist/main.cjs"
+      "require": "./dist/main.cjs",
+      "types": "./dist/main.d.ts"
     },
     "./package.json": {
       "import": "./package.json",
@@ -35,24 +36,23 @@
     }
   },
   "scripts": {
-    "build": "tsup-node library/main.ts --target node16 --format cjs,esm --dts --sourcemap",
+    "build": "cp ../../README.md . && cp ../../LICENSE . && tsup library/main.ts --target node16 --format cjs,esm --dts --sourcemap",
     "build-watch": "pnpm build -- --watch",
     "test": "vitest --coverage --no-watch",
     "test-dev": "vitest",
+    "test-manual": "nodemon --exec tsx --ext ts,tsx ./scripts/discordjs-manual-test.tsx",
     "typecheck": "tsc --noEmit",
-    "playground": "nodemon --exec esmo --ext ts,tsx --inspect=5858 --enable-source-maps ./playground/main.tsx",
     "release": "bash scripts/release.sh"
   },
   "dependencies": {
     "@types/node": "*",
     "@types/react": "*",
-    "@types/react-reconciler": "^0.26.6",
-    "nanoid": "^3.3.3",
-    "react-reconciler": "^0.27.0",
-    "rxjs": "^7.5.5"
+    "@types/react-reconciler": "^0.28.0",
+    "react-reconciler": "^0.29.0",
+    "rxjs": "^7.5.6"
   },
   "peerDependencies": {
-    "discord.js": "^13.3",
+    "discord.js": "^14",
     "react": ">=17"
   },
   "peerDependenciesMeta": {
@@ -62,23 +62,20 @@
   },
   "devDependencies": {
     "@types/lodash-es": "^4.17.6",
-    "c8": "^7.11.2",
-    "discord.js": "^13.6.0",
-    "dotenv": "^16.0.0",
-    "esbuild": "latest",
-    "esbuild-jest": "^0.5.0",
-    "esmo": "^0.14.1",
+    "c8": "^7.12.0",
+    "discord.js": "^14.0.3",
+    "dotenv": "^16.0.1",
     "lodash-es": "^4.17.21",
-    "nodemon": "^2.0.15",
-    "prettier": "^2.6.2",
-    "pretty-ms": "^7.0.1",
-    "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"
+    "nodemon": "^2.0.19",
+    "prettier": "^2.7.1",
+    "pretty-ms": "^8.0.0",
+    "react": "^18.2.0",
+    "release-it": "^15.1.3",
+    "tsup": "^6.1.3",
+    "tsx": "^3.8.0",
+    "type-fest": "^2.17.0",
+    "typescript": "^4.7.4",
+    "vitest": "^0.18.1"
   },
   "resolutions": {
     "esbuild": "latest"
@@ -91,5 +88,8 @@
       "release": true,
       "web": true
     }
+  },
+  "publishConfig": {
+    "access": "public"
   }
 }

packages/reacord/playground/command-handler.ts

@@ -1,38 +0,0 @@
-import type { Client, CommandInteraction } from "discord.js"
-
-type Command = {
-  name: string
-  description: string
-  run: (interaction: CommandInteraction) => unknown
-}
-
-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(
-          {
-            name: command.name,
-            description: command.description,
-          },
-          guild.id,
-        )
-      }
-    }
-  })
-
-  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)
-      }
-    }
-  })
-}

packages/reacord/playground/counter.tsx

@@ -1,36 +0,0 @@
-import * as React from "react"
-import { Button, Embed, EmbedField, EmbedTitle } from "../library/main"
-
-export function Counter(props: { onDeactivate: () => void }) {
-  const [count, setCount] = React.useState(0)
-  const [embedVisible, setEmbedVisible] = React.useState(false)
-
-  return (
-    <>
-      this button was clicked {count} times
-      {embedVisible && (
-        <Embed>
-          <EmbedTitle>the counter</EmbedTitle>
-          {count > 0 && (
-            <EmbedField name="is it even?">
-              {count % 2 === 0 ? "yes" : "no"}
-            </EmbedField>
-          )}
-        </Embed>
-      )}
-      {embedVisible && (
-        <Button label="hide embed" onClick={() => setEmbedVisible(false)} />
-      )}
-      <Button
-        style="primary"
-        emoji="<:plus_one:778531744860602388>"
-        label="clicc"
-        onClick={() => setCount(count + 1)}
-      />
-      {!embedVisible && (
-        <Button label="show embed" onClick={() => setEmbedVisible(true)} />
-      )}
-      <Button style="danger" label="deactivate" onClick={props.onDeactivate} />
-    </>
-  )
-}

packages/reacord/playground/fruit-select.tsx

@@ -1,31 +0,0 @@
-import React, { useState } from "react"
-import { Button, Option, Select } from "../library/main"
-
-export function FruitSelect({
-  onConfirm,
-}: {
-  onConfirm: (choice: string) => void
-}) {
-  const [value, setValue] = useState<string>()
-
-  return (
-    <>
-      <Select
-        placeholder="choose a fruit"
-        value={value}
-        onChangeValue={setValue}
-      >
-        <Option value="🍎" />
-        <Option value="🍌" />
-        <Option value="🍒" />
-      </Select>
-      <Button
-        label="confirm"
-        disabled={value == undefined}
-        onClick={() => {
-          if (value) onConfirm(value)
-        }}
-      />
-    </>
-  )
-}

packages/reacord/playground/main.tsx

@@ -1,109 +0,0 @@
-import { Client } from "discord.js"
-import "dotenv/config"
-import React from "react"
-import { Button, ReacordDiscordJs, useInstance } from "../library/main"
-import { createCommandHandler } from "./command-handler"
-import { Counter } from "./counter"
-import { FruitSelect } from "./fruit-select"
-
-const client = new Client({
-  intents: ["GUILDS"],
-})
-
-const reacord = new ReacordDiscordJs(client)
-
-client.on("ready", () => {
-  console.info("ready 💖")
-
-  // const now = new Date()
-
-  // function UptimeCounter() {
-  //   const [uptime, setUptime] = React.useState(0)
-
-  //   React.useEffect(() => {
-  //     const interval = setInterval(() => {
-  //       setUptime(Date.now() - now.getTime())
-  //     }, 5000)
-  //     return () => clearInterval(interval)
-  //   }, [])
-
-  //   return (
-  //     <Embed>this bot has been running for {prettyMilliseconds(uptime)}</Embed>
-  //   )
-  // }
-
-  // reacord.send("671787605624487941", <UptimeCounter />)
-})
-
-createCommandHandler(client, [
-  {
-    name: "button",
-    description: "it's a button",
-    run: (interaction) => {
-      reacord.reply(
-        interaction,
-        <Button label="clic" onClick={() => console.info("was clic")} />,
-      )
-    },
-  },
-  {
-    name: "counter",
-    description: "shows a counter button",
-    run: (interaction) => {
-      const reply = reacord.reply(interaction)
-      reply.render(<Counter onDeactivate={() => reply.destroy()} />)
-    },
-  },
-  {
-    name: "select",
-    description: "shows a select",
-    run: (interaction) => {
-      const instance = reacord.reply(
-        interaction,
-        <FruitSelect
-          onConfirm={(value) => {
-            instance.render(`you chose ${value}`)
-            instance.deactivate()
-          }}
-        />,
-      )
-    },
-  },
-  {
-    name: "ephemeral-button",
-    description: "button which shows ephemeral messages",
-    run: (interaction) => {
-      reacord.reply(
-        interaction,
-        <>
-          <Button
-            label="public clic"
-            onClick={(event) =>
-              reacord.reply(
-                interaction,
-                `${event.guild?.member.displayName} clic`,
-              )
-            }
-          />
-          <Button
-            label="clic"
-            onClick={(event) => event.ephemeralReply("you clic")}
-          />
-        </>,
-      )
-    },
-  },
-  {
-    name: "delete-this",
-    description: "delete this",
-    run: (interaction) => {
-      function DeleteThis() {
-        const instance = useInstance()
-        return <Button label="delete this" onClick={() => instance.destroy()} />
-      }
-      reacord.reply(interaction, <DeleteThis />)
-    },
-  },
-])
-
-await client.login(process.env.TEST_BOT_TOKEN)

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

@@ -0,0 +1,139 @@
+import type { TextChannel } from "discord.js"
+import { ChannelType, Client, IntentsBitField } from "discord.js"
+import "dotenv/config"
+import { kebabCase } from "lodash-es"
+import * as React from "react"
+import { useState } from "react"
+import {
+  Button,
+  Link,
+  Option,
+  ReacordDiscordJs,
+  Select,
+  useInstance,
+} from "../library/main"
+
+const client = new Client({ intents: IntentsBitField.Flags.Guilds })
+const reacord = new ReacordDiscordJs(client)
+
+await client.login(process.env.TEST_BOT_TOKEN)
+
+const guild = await client.guilds.fetch(process.env.TEST_GUILD_ID!)
+
+const category = await guild.channels.fetch(process.env.TEST_CATEGORY_ID!)
+if (category?.type !== ChannelType.GuildCategory) {
+  throw new Error(
+    `channel ${process.env.TEST_CATEGORY_ID} is not a guild category. received ${category?.type}`,
+  )
+}
+
+for (const [, channel] of category.children.cache) {
+  await channel.delete()
+}
+
+let prefix = 0
+const createTest = async (
+  name: string,
+  block: (channel: TextChannel) => void | Promise<unknown>,
+) => {
+  prefix += 1
+  const channel = await category.children.create({
+    type: ChannelType.GuildText,
+    name: `${String(prefix).padStart(3, "0")}-${kebabCase(name)}`,
+  })
+  await block(channel)
+}
+
+await createTest("basic", (channel) => {
+  reacord.send(channel.id, "Hello, world!")
+})
+
+await createTest("counter", (channel) => {
+  const Counter = () => {
+    const [count, setCount] = React.useState(0)
+    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.send(channel.id, <Counter />)
+})
+
+await createTest("select", (channel) => {
+  function FruitSelect({ onConfirm }: { onConfirm: (choice: string) => void }) {
+    const [value, setValue] = useState<string>()
+
+    return (
+      <>
+        <Select
+          placeholder="choose a fruit"
+          value={value}
+          onChangeValue={setValue}
+        >
+          <Option value="🍎" emoji="🍎" label="apple" description="it red" />
+          <Option value="🍌" emoji="🍌" label="banana" description="bnanbna" />
+          <Option value="🍒" emoji="🍒" label="cherry" description="heh" />
+        </Select>
+        <Button
+          label="confirm"
+          disabled={value == undefined}
+          onClick={() => {
+            if (value) onConfirm(value)
+          }}
+        />
+      </>
+    )
+  }
+
+  const instance = reacord.send(
+    channel.id,
+    <FruitSelect
+      onConfirm={(value) => {
+        instance.render(`you chose ${value}`)
+        instance.deactivate()
+      }}
+    />,
+  )
+})
+
+await createTest("ephemeral button", (channel) => {
+  reacord.send(
+    channel.id,
+    <>
+      <Button
+        label="public clic"
+        onClick={(event) =>
+          event.reply(`${event.guild?.member.displayName} clic`)
+        }
+      />
+      <Button
+        label="clic"
+        onClick={(event) => event.ephemeralReply("you clic")}
+      />
+    </>,
+  )
+})
+
+await createTest("delete this", (channel) => {
+  function DeleteThis() {
+    const instance = useInstance()
+    return <Button label="delete this" onClick={() => instance.destroy()} />
+  }
+  reacord.send(channel.id, <DeleteThis />)
+})
+
+await createTest("link", (channel) => {
+  reacord.send(channel.id, <Link label="hi" url="https://mapleleaf.dev" />)
+})

packages/reacord/scripts/release.sh

@@ -1,4 +0,0 @@
-pnpm build
-cp ../../README.md .
-cp ../../LICENSE .
-pnpx release-it

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/reacord.test.tsx

@@ -35,7 +35,7 @@ test("rendering behavior", async () => {
     },
   ])
 
-  tester.findButtonByLabel("show embed").click()
+  await tester.findButtonByLabel("show embed").click()
   await tester.assertMessages([
     {
       content: "count: 0",
@@ -62,7 +62,7 @@ test("rendering behavior", async () => {
     },
   ])
 
-  tester.findButtonByLabel("clicc").click()
+  await tester.findButtonByLabel("clicc").click()
   await tester.assertMessages([
     {
       content: "count: 1",
@@ -94,7 +94,7 @@ test("rendering behavior", async () => {
     },
   ])
 
-  tester.findButtonByLabel("clicc").click()
+  await tester.findButtonByLabel("clicc").click()
   await tester.assertMessages([
     {
       content: "count: 2",
@@ -126,7 +126,7 @@ test("rendering behavior", async () => {
     },
   ])
 
-  tester.findButtonByLabel("hide embed").click()
+  await tester.findButtonByLabel("hide embed").click()
   await tester.assertMessages([
     {
       content: "count: 2",
@@ -153,7 +153,7 @@ test("rendering behavior", async () => {
     },
   ])
 
-  tester.findButtonByLabel("clicc").click()
+  await tester.findButtonByLabel("clicc").click()
   await tester.assertMessages([
     {
       content: "count: 3",
@@ -180,7 +180,7 @@ test("rendering behavior", async () => {
     },
   ])
 
-  tester.findButtonByLabel("deactivate").click()
+  await tester.findButtonByLabel("deactivate").click()
   await tester.assertMessages([
     {
       content: "count: 3",
@@ -210,7 +210,7 @@ test("rendering behavior", async () => {
     },
   ])
 
-  tester.findButtonByLabel("clicc").click()
+  await tester.findButtonByLabel("clicc").click()
   await tester.assertMessages([
     {
       content: "count: 3",

packages/reacord/test/select.test.tsx

@@ -59,16 +59,16 @@ test("single select", async () => {
   await assertSelect([])
   expect(onSelect).toHaveBeenCalledTimes(0)
 
-  tester.findSelectByPlaceholder("choose one").select("2")
+  await tester.findSelectByPlaceholder("choose one").select("2")
   await assertSelect(["2"])
   expect(onSelect).toHaveBeenCalledWith(
     expect.objectContaining({ values: ["2"] }),
   )
 
-  tester.findButtonByLabel("disable").click()
+  await tester.findButtonByLabel("disable").click()
   await assertSelect(["2"], true)
 
-  tester.findSelectByPlaceholder("choose one").select("1")
+  await tester.findSelectByPlaceholder("choose one").select("1")
   await assertSelect(["2"], true)
   expect(onSelect).toHaveBeenCalledTimes(1)
 })
@@ -125,19 +125,19 @@ test("multiple select", async () => {
   await assertSelect([])
   expect(onSelect).toHaveBeenCalledTimes(0)
 
-  tester.findSelectByPlaceholder("select").select("1", "3")
+  await tester.findSelectByPlaceholder("select").select("1", "3")
   await assertSelect(expect.arrayContaining(["1", "3"]) as unknown as string[])
   expect(onSelect).toHaveBeenCalledWith(
     expect.objectContaining({ values: expect.arrayContaining(["1", "3"]) }),
   )
 
-  tester.findSelectByPlaceholder("select").select("2")
+  await tester.findSelectByPlaceholder("select").select("2")
   await assertSelect(expect.arrayContaining(["2"]) as unknown as string[])
   expect(onSelect).toHaveBeenCalledWith(
     expect.objectContaining({ values: expect.arrayContaining(["2"]) }),
   )
 
-  tester.findSelectByPlaceholder("select").select()
+  await tester.findSelectByPlaceholder("select").select()
   await assertSelect([])
   expect(onSelect).toHaveBeenCalledWith(expect.objectContaining({ values: [] }))
 })
@@ -145,7 +145,7 @@ test("multiple select", async () => {
 test("optional onSelect + unknown value", async () => {
   const tester = new ReacordTester()
   tester.reply().render(<Select placeholder="select" />)
-  tester.findSelectByPlaceholder("select").select("something")
+  await tester.findSelectByPlaceholder("select").select("something")
   await tester.assertMessages([
     {
       content: "",

packages/reacord/test/test-adapter.ts

@@ -1,6 +1,6 @@
 /* eslint-disable class-methods-use-this */
 /* eslint-disable require-await */
-import { nanoid } from "nanoid"
+import { randomUUID } from "node:crypto"
 import { setTimeout } from "node:timers/promises"
 import type { ReactNode } from "react"
 import { expect } from "vitest"
@@ -194,7 +194,7 @@ class TestCommandInteraction implements CommandInteraction {
 }
 
 class TestInteraction {
-  readonly id = nanoid()
+  readonly id = randomUUID()
   readonly channelId = "test-channel-id"
 
   constructor(

packages/reacord/test/text-children.test.tsx

@@ -0,0 +1,89 @@
+import * as React from "react"
+import { test } from "vitest"
+import {
+  Button,
+  Embed,
+  EmbedAuthor,
+  EmbedField,
+  EmbedFooter,
+  EmbedTitle,
+  Link,
+  Option,
+  Select,
+} from "../library/main"
+import { ReacordTester } from "./test-adapter"
+
+test("text children in other components", async () => {
+  const tester = new ReacordTester()
+
+  const SomeText = () => <>some text</>
+
+  await tester.assertRender(
+    <>
+      <Embed>
+        <EmbedTitle>
+          <SomeText />
+        </EmbedTitle>
+        <EmbedAuthor>
+          <SomeText />
+        </EmbedAuthor>
+        <EmbedField name={<SomeText />}>
+          <SomeText /> <Button label="ignore this" onClick={() => {}} />
+          nailed it
+        </EmbedField>
+        <EmbedFooter>
+          <SomeText />
+        </EmbedFooter>
+      </Embed>
+      <Button label={<SomeText />} onClick={() => {}} />
+      <Link url="https://discord.com" label={<SomeText />} />
+      <Select>
+        <Option value="1">
+          <SomeText />
+        </Option>
+        <Option value="2" label={<SomeText />} description={<SomeText />} />
+      </Select>
+    </>,
+    [
+      {
+        content: "",
+        embeds: [
+          {
+            title: "some text",
+            author: {
+              name: "some text",
+            },
+            fields: [{ name: "some text", value: "some text nailed it" }],
+            footer: {
+              text: "some text",
+            },
+          },
+        ],
+        actionRows: [
+          [
+            {
+              type: "button",
+              label: "some text",
+              style: "secondary",
+            },
+            {
+              type: "link",
+              url: "https://discord.com",
+              label: "some text",
+            },
+          ],
+          [
+            {
+              type: "select",
+              values: [],
+              options: [
+                { value: "1", label: "some text" },
+                { value: "2", label: "some text", description: "some text" },
+              ],
+            },
+          ],
+        ],
+      },
+    ],
+  )
+})

packages/reacord/vitest.config.ts

@@ -1,5 +1,5 @@
 /// <reference types="vitest" />
-import { defineConfig } from "vite"
+import { defineConfig } from "vitest/config"
 
 export default defineConfig({
   build: {

packages/website/CHANGELOG.md

@@ -0,0 +1,17 @@
+# website
+
+## 0.4.2
+
+### Patch Changes
+
+- Updated dependencies [72f4a4a]
+- Updated dependencies [7536bde]
+- Updated dependencies [e335165]
+  - reacord@0.5.1
+
+## 0.4.1
+
+### Patch Changes
+
+- Updated dependencies [aa65da5]
+  - reacord@0.5.0

packages/website/app/modules/navigation/load-guide-links.server.ts

@@ -2,35 +2,34 @@ import glob from "fast-glob"
 import grayMatter from "gray-matter"
 import { readFile } from "node:fs/promises"
 import { join, parse } from "node:path"
-import type { AppLinkProps } from "~/modules/navigation/app-link"
+import { z } from "zod"
 
 const guidesFolder = "app/routes/guides"
 
-export type GuideLink = {
-  title: string
-  order: number
-  link: AppLinkProps
-}
+const frontmatterSchema = z.object({
+  meta: z.object({
+    title: z.string(),
+    description: z.string(),
+  }),
+  order: z.number().optional(),
+})
 
-export async function loadGuideLinks(): Promise<GuideLink[]> {
+export type GuideLink = Awaited<ReturnType<typeof loadGuideLinks>>[0]
+
+export async function loadGuideLinks() {
   const guideFiles = await glob(`**/*.md`, { cwd: guidesFolder })
 
-  const links: GuideLink[] = await Promise.all(
+  const links = await Promise.all(
     guideFiles.map(async (file) => {
-      const { data } = grayMatter(await readFile(join(guidesFolder, file)))
-
-      let order = data.order
-      if (!Number.isFinite(order)) {
-        order = Number.POSITIVE_INFINITY
-      }
-
+      const result = grayMatter(await readFile(join(guidesFolder, file)))
+      const data = frontmatterSchema.parse(result.data)
       return {
-        title: data.meta?.title,
-        order,
+        title: data.meta.title,
+        order: data.order ?? Number.POSITIVE_INFINITY,
         link: {
-          type: "router",
+          type: "router" as const,
           to: `/guides/${parse(file).name}`,
-          children: data.meta?.title,
+          children: data.meta.title,
         },
       }
     }),

packages/website/app/root.tsx

@@ -1,8 +1,4 @@
-import type {
-  LinksFunction,
-  LoaderFunction,
-  MetaFunction,
-} from "@remix-run/node"
+import type { LinksFunction, MetaFunction } from "@remix-run/node"
 import {
   Links,
   LiveReload,
@@ -16,7 +12,6 @@ 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"
-import type { GuideLink } from "~/modules/navigation/load-guide-links.server"
 import { loadGuideLinks } from "~/modules/navigation/load-guide-links.server"
 import prismThemeCss from "~/modules/ui/prism-theme.css"
 import tailwindCss from "~/modules/ui/tailwind.out.css"
@@ -61,19 +56,14 @@ export const links: LinksFunction = () => [
   },
 ]
 
-type LoaderData = {
-  guideLinks: GuideLink[]
-}
-
-export const loader: LoaderFunction = async () => {
-  const data: LoaderData = {
+export async function loader() {
+  return {
     guideLinks: await loadGuideLinks(),
   }
-  return data
 }
 
 export default function App() {
-  const data: LoaderData = useLoaderData()
+  const data = useLoaderData<typeof loader>()
   return (
     <html lang="en" className="bg-slate-900 text-slate-100">
       <head>
@@ -85,9 +75,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/getting-started.md

@@ -7,11 +7,15 @@ meta:
 
 # Getting Started
 
-This guide assumes some familiarity with JavaScript, [React](https://reactjs.org), [Discord.js](https://discord.js.org) and the [Discord API](https://discord.dev). Keep these pages as reference if you need it.
+These guides assume some familiarity with JavaScript, [React](https://reactjs.org), [Discord.js](https://discord.js.org) and the [Discord API](https://discord.dev). Keep these pages as reference if you need it.
 
-**Note:** Ensure your project has support for running code with JSX. I recommend using [esno](https://npm.im/esno).
+## Setup from template
 
-## Install
+[Use this starter template](https://github.com/itsMapleLeaf/reacord-starter) to get off the ground quickly.
+
+## Adding to an existing project
+
+Install Reacord and dependencies:
 
 ```bash
 # npm
@@ -24,12 +28,10 @@ yarn add reacord react discord.js
 pnpm add reacord react discord.js
 ```
 
-## Setup
-
 Create a Discord.js client and a Reacord instance:
 
 ```js
-// main.js
+// main.jsx
 import { Client } from "discord.js"
 import { ReacordDiscordJs } from "reacord"
 
@@ -42,3 +44,10 @@ client.on("ready", () => {
 
 await client.login(process.env.BOT_TOKEN)
 ```
+
+To use JSX in your code, run it with [tsx](https://npm.im/tsx):
+
+```bash
+npm install tsx
+tsx main.tsx
+```

packages/website/app/routes/guides/use-instance.md

@@ -1,4 +1,5 @@
 ---
+order: 5
 meta:
   title: useInstance
   description: Using useInstance to get the current instance within a component

packages/website/cypress.config.ts

@@ -0,0 +1,8 @@
+import { defineConfig } from "cypress"
+
+export default defineConfig({
+  e2e: {
+    setupNodeEvents(on, config) {},
+    baseUrl: "http://localhost:3000/",
+  },
+})

packages/website/cypress.json

@@ -1,3 +0,0 @@
-{
-  "baseUrl": "http://localhost:3000/"
-}

packages/website/cypress/fixtures/example.json

@@ -1,5 +0,0 @@
-{
-  "name": "Using fixtures to represent data",
-  "email": "hello@cypress.io",
-  "body": "Fixtures are a great way to mock data for responses to routes"
-}

packages/website/cypress/plugins/index.js

@@ -1,22 +0,0 @@
-/// <reference types="cypress" />
-// ***********************************************************
-// This example plugins/index.js can be used to load plugins
-//
-// You can change the location of this file or turn off loading
-// the plugins file with the 'pluginsFile' configuration option.
-//
-// You can read more here:
-// https://on.cypress.io/plugins-guide
-// ***********************************************************
-
-// This function is called when a project is opened or re-opened (e.g. due to
-// the project's config changing)
-
-/**
- * @type {Cypress.PluginConfig}
- */
-// eslint-disable-next-line no-unused-vars
-export default function cypressConfig(on, config) {
-  // `on` is used to hook into various events Cypress emits
-  // `config` is the resolved Cypress config
-}

packages/website/cypress/support/commands.js

@@ -1,26 +0,0 @@
-// ***********************************************
-// This example commands.js shows you how to
-// create various custom commands and overwrite
-// existing commands.
-//
-// For more comprehensive examples of custom
-// commands please read more here:
-// https://on.cypress.io/custom-commands
-// ***********************************************
-//
-//
-// -- This is a parent command --
-// Cypress.Commands.add('login', (email, password) => { ... })
-//
-//
-// -- This is a child command --
-// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
-//
-//
-// -- This is a dual command --
-// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
-//
-//
-// -- This will overwrite an existing command --
-// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
-import "@testing-library/cypress/add-commands"

packages/website/cypress/support/commands.ts

@@ -0,0 +1 @@
+import "@testing-library/cypress/add-commands"

packages/website/cypress/support/e2e.ts

@@ -0,0 +1 @@
+import "./commands"

packages/website/cypress/support/index.js

@@ -1,20 +0,0 @@
-// ***********************************************************
-// This example support/index.js is processed and
-// loaded automatically before your test files.
-//
-// This is a great place to put global configuration and
-// behavior that modifies Cypress.
-//
-// You can change the location of this file or turn off
-// automatically serving support files with the
-// 'supportFile' configuration option.
-//
-// You can read more here:
-// https://on.cypress.io/configuration
-// ***********************************************************
-
-// Import commands.js using ES2015 syntax:
-import "./commands"
-
-// Alternatively you can use CommonJS syntax:
-// require('./commands')

packages/website/package.json

@@ -1,6 +1,7 @@
 {
-  "private": true,
   "name": "website",
+  "version": "0.4.2",
+  "private": true,
   "scripts": {
     "dev": "concurrently 'typedoc --watch' 'pnpm tailwind -- --watch' 'remix dev'",
     "test": "node ./scripts/test.js",
@@ -11,45 +12,43 @@
     "typecheck": "tsc --noEmit && tsc --project cypress/tsconfig.json --noEmit"
   },
   "dependencies": {
-    "@headlessui/react": "^1.6.0",
+    "@headlessui/react": "^1.6.6",
     "@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",
+    "@remix-run/node": "^1.6.5",
+    "@remix-run/react": "^1.6.5",
+    "@remix-run/serve": "^1.6.5",
+    "@tailwindcss/typography": "^0.5.4",
+    "clsx": "^1.2.1",
     "fast-glob": "^3.2.11",
     "gray-matter": "^4.0.3",
     "reacord": "workspace:*",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
-    "react-focus-on": "^3.5.4",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-focus-on": "^3.6.0",
     "react-router": "^6.3.0",
-    "react-router-dom": "^6.3.0"
+    "react-router-dom": "^6.3.0",
+    "zod": "^3.17.10"
   },
   "devDependencies": {
-    "@remix-run/dev": "^1.4.1",
+    "@remix-run/dev": "^1.6.5",
     "@remix-run/node": "^1.4.1",
-    "@testing-library/cypress": "^8.0.2",
+    "@testing-library/cypress": "^8.0.3",
     "@types/node": "*",
-    "@types/react": "^18.0.7",
-    "@types/react-dom": "^18.0.2",
-    "@types/tailwindcss": "^3.0.10",
+    "@types/react": "^18.0.15",
+    "@types/react-dom": "^18.0.6",
+    "@types/tailwindcss": "^3.0.11",
     "@types/wait-on": "^5.3.1",
-    "autoprefixer": "^10.4.5",
-    "concurrently": "^7.1.0",
-    "cypress": "^9.6.0",
+    "autoprefixer": "^10.4.7",
+    "concurrently": "^7.3.0",
+    "cypress": "^10.3.1",
     "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",
+    "postcss": "^8.4.14",
+    "rehype-prism-plus": "^1.4.2",
+    "tailwindcss": "^3.1.6",
+    "typedoc": "^0.23.8",
+    "typescript": "^4.7.4",
     "wait-on": "^6.0.1"
   },
-  "engines": {
-    "node": ">=14"
-  },
   "sideEffects": false
 }

packages/website/tsconfig.json

@@ -6,5 +6,6 @@
     "paths": {
       "~/*": ["./app/*"]
     }
-  }
+  },
+  "include": ["remix.env.d.ts", "**/*.ts", "**/*.tsx"]
 }

pnpm-workspace.yaml

@@ -1 +1,2 @@
-workspaces: [packages/*]
+packages:
+  - packages/*