more docks mockuping

.changeset/README.md

@@ -1,8 +0,0 @@
-# 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

@@ -1,11 +0,0 @@
-{
-  "$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": []
-}

.eslintrc.cjs

@@ -1,25 +0,0 @@
-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

@@ -0,0 +1,26 @@
+{
+  "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/deploy-website.yml

@@ -0,0 +1,17 @@
+name: deploy website
+on:
+  push:
+    branches: [main]
+    paths:
+      - "packages/website/**"
+      - "reacord/library/**/*.{ts,tsx}"
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: superfly/flyctl-actions@master
+        env:
+          FLY_API_TOKEN: ${{ secrets.FLY_API_TOKEN }}
+        with:
+          args: "deploy"

.github/workflows/main.yml

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

.github/workflows/release.yml

@@ -1,37 +0,0 @@
-# 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

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

.npmrc

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

.prettierignore

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

Dockerfile

@@ -0,0 +1,15 @@
+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" ]

README.md

@@ -18,7 +18,7 @@ pnpm add reacord react discord.js
 
 ## Get Started
 
-[Visit the docs to get started.](https://reacord.mapleleaf.dev/guides/getting-started)
+[Visit the docs to get started.](https://reacord.fly.dev/guides/getting-started)
 
 ## Example
 

fly.toml

@@ -0,0 +1,40 @@
+# fly.toml file generated for reacord on 2021-12-29T14:06:41-06:00
+
+app = "reacord"
+
+kill_signal = "SIGINT"
+kill_timeout = 5
+processes = []
+
+[env]
+PORT = 8080
+
+[experimental]
+allowed_public_ports = []
+auto_rollback = true
+
+[[services]]
+http_checks = []
+internal_port = 8080
+processes = ["app"]
+protocol = "tcp"
+script_checks = []
+
+[services.concurrency]
+hard_limit = 25
+soft_limit = 20
+type = "connections"
+
+[[services.ports]]
+handlers = ["http"]
+port = 80
+
+[[services.ports]]
+handlers = ["tls", "http"]
+port = 443
+
+[[services.tcp_checks]]
+grace_period = "1s"
+interval = "15s"
+restart_limit = 0
+timeout = "2s"

package.json

@@ -1,23 +1,26 @@
 {
-  "name": "reacord-monorepo",
   "private": true,
   "scripts": {
     "lint": "eslint --ext js,ts,tsx .",
     "lint-fix": "pnpm lint -- --fix",
-    "format": "prettier --write .",
-    "build": "pnpm -r run build",
-    "start": "pnpm -C packages/website run start",
-    "release": "pnpm -r run build && changeset publish"
+    "format": "prettier --write ."
+  },
+  "dependencies": {
+    "@itsmapleleaf/configs": "^1.1.2"
   },
   "devDependencies": {
-    "@changesets/cli": "^2.24.0",
-    "@itsmapleleaf/configs": "^1.1.3",
-    "@rushstack/eslint-patch": "^1.1.3",
-    "@types/eslint": "^8.4.1",
-    "eslint": "^8.14.0",
-    "node": "^16",
-    "prettier": "^2.6.2",
-    "typescript": "^4.6.3"
+    "@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"
   },
   "resolutions": {
     "esbuild": "latest"

packages/reacord/CHANGELOG.md

@@ -1,7 +0,0 @@
-# reacord
-
-## 0.5.0
-
-### Minor Changes
-
-- aa65da5: allow JSX in more places

packages/reacord/helpers/log-pretty.ts

@@ -1,5 +1,6 @@
 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,3 +1,4 @@
+// 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,5 +1,6 @@
 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

@@ -1,35 +0,0 @@
-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,25 +18,10 @@ export function pruneNullishValues<T>(input: T): PruneNullishValues<T> {
   return result
 }
 
-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 PruneNullishValues<Input> = Input extends ReadonlyArray<infer Value>
+  ? ReadonlyArray<NonNullable<Value>>
+  : Input extends object
+  ? {
+      [Key in keyof Input]: NonNullable<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]
+  : Input

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,21 +0,0 @@
-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,5 +1,6 @@
 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/components/button-shared-props.ts

@@ -1,12 +1,10 @@
-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?: ReactNode
+  label?: string
 
   /** When true, the button will be slightly faded, and cannot be clicked. */
   disabled?: boolean

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

@@ -34,23 +34,13 @@ export type ButtonClickEvent = ComponentEvent
  */
 export function Button(props: ButtonProps) {
   return (
-    <ReacordElement props={props} createNode={() => new ButtonNode(props)}>
-      <ReacordElement props={{}} createNode={() => new ButtonLabelNode({})}>
-        {props.label}
-      </ReacordElement>
-    </ReacordElement>
+    <ReacordElement props={props} createNode={() => new ButtonNode(props)} />
   )
 }
 
 class ButtonNode extends Node<ButtonProps> {
   private customId = nanoid()
 
-  // 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({
       type: "button",
@@ -58,7 +48,7 @@ class ButtonNode extends Node<ButtonProps> {
       style: this.props.style ?? "secondary",
       disabled: this.props.disabled,
       emoji: this.props.emoji,
-      label: this.children.findType(ButtonLabelNode)?.text,
+      label: this.props.label,
     })
   }
 
@@ -73,5 +63,3 @@ class ButtonNode extends Node<ButtonProps> {
     return false
   }
 }
-
-class ButtonLabelNode extends Node<{}> {}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

packages/reacord/library/core/instance-context.tsx

@@ -10,7 +10,7 @@ export const InstanceProvider = Context.Provider
  * Get the associated instance for the current component.
  *
  * @category Core
- * @see https://reacord.mapleleaf.dev/guides/use-instance
+ * @see https://reacord.fly.dev/guides/use-instance
  */
 export function useInstance(): ReacordInstance {
   return (

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

@@ -5,12 +5,9 @@ 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,
-  MessageButtonOptions,
-  MessageOptions,
-} from "../internal/message"
+import type { Message, MessageOptions } from "../internal/message"
 import { ChannelMessageRenderer } from "../internal/renderers/channel-message-renderer"
 import { InteractionReplyRenderer } from "../internal/renderers/interaction-reply-renderer"
 import type {
@@ -33,7 +30,7 @@ export class ReacordDiscordJs extends Reacord {
     super(config)
 
     client.on("interactionCreate", (interaction) => {
-      if (interaction.isButton() || interaction.isSelectMenu()) {
+      if (interaction.isMessageComponent()) {
         this.handleComponentInteraction(
           this.createReacordComponentInteraction(interaction),
         )
@@ -43,7 +40,7 @@ export class ReacordDiscordJs extends Reacord {
 
   /**
    * Sends a message to a channel.
-   * @see https://reacord.mapleleaf.dev/guides/sending-messages
+   * @see https://reacord.fly.dev/guides/sending-messages
    */
   override send(
     channelId: string,
@@ -57,7 +54,7 @@ export class ReacordDiscordJs extends Reacord {
 
   /**
    * Sends a message as a reply to a command interaction.
-   * @see https://reacord.mapleleaf.dev/guides/sending-messages
+   * @see https://reacord.fly.dev/guides/sending-messages
    */
   override reply(
     interaction: Discord.CommandInteraction,
@@ -71,7 +68,7 @@ export class ReacordDiscordJs extends Reacord {
 
   /**
    * Sends an ephemeral message as a reply to a command interaction.
-   * @see https://reacord.mapleleaf.dev/guides/sending-messages
+   * @see https://reacord.fly.dev/guides/sending-messages
    */
   override ephemeralReply(
     interaction: Discord.CommandInteraction,
@@ -91,7 +88,7 @@ export class ReacordDiscordJs extends Reacord {
           (await this.client.channels.fetch(channelId)) ??
           raise(`Channel ${channelId} not found`)
 
-        if (!channel.isTextBased()) {
+        if (!channel.isText()) {
           raise(`Channel ${channelId} is not a text channel`)
         }
 
@@ -301,6 +298,17 @@ 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()
     },
@@ -313,6 +321,10 @@ 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()
@@ -320,34 +332,25 @@ 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) {
-  const options = {
+function getDiscordMessageOptions(
+  reacordOptions: MessageOptions,
+): Discord.MessageOptions {
+  const options: Discord.MessageOptions = {
     // eslint-disable-next-line unicorn/no-null
     content: reacordOptions.content || null,
     embeds: reacordOptions.embeds,
     components: reacordOptions.actionRows.map((row) => ({
-      type: Discord.ComponentType.ActionRow,
+      type: "ACTION_ROW",
       components: row.map(
-        (component): Discord.MessageActionRowComponentData => {
+        (component): Discord.MessageActionRowComponentOptions => {
           if (component.type === "button") {
             return {
-              type: Discord.ComponentType.Button,
+              type: "BUTTON",
               customId: component.customId,
               label: component.label ?? "",
-              style: convertButtonStyleToEnum(component.style),
+              style: toUpper(component.style ?? "secondary"),
               disabled: component.disabled,
               emoji: component.emoji,
             }
@@ -356,7 +359,7 @@ function getDiscordMessageOptions(reacordOptions: MessageOptions) {
           if (component.type === "select") {
             return {
               ...component,
-              type: Discord.ComponentType.SelectMenu,
+              type: "SELECT_MENU",
               options: component.options.map((option) => ({
                 ...option,
                 default: component.values?.includes(option.value),

packages/reacord/library/internal/container.ts

@@ -21,16 +21,6 @@ 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/message.ts

@@ -49,6 +49,7 @@ 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/node.ts

@@ -13,8 +13,4 @@ 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

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

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

@@ -5,8 +5,4 @@ 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,9 +2,9 @@
   "name": "reacord",
   "type": "module",
   "description": "Create interactive Discord messages using React.",
-  "version": "0.5.0",
+  "version": "0.3.4",
   "types": "./dist/main.d.ts",
-  "homepage": "https://reacord.mapleleaf.dev",
+  "homepage": "https://reacord.fly.dev",
   "repository": "https://github.com/itsMapleLeaf/reacord.git",
   "changelog": "https://github.com/itsMapleLeaf/reacord/releases",
   "license": "MIT",
@@ -35,24 +35,24 @@
     }
   },
   "scripts": {
-    "build": "cp ../../README.md . && cp ../../LICENSE . && tsup library/main.ts --target node16 --format cjs,esm --dts --sourcemap",
+    "build": "tsup-node 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.26.4",
+    "nanoid": "^3.1.31",
+    "react-reconciler": "^0.26.2",
+    "rxjs": "^7.5.2"
   },
   "peerDependencies": {
-    "discord.js": "^14",
+    "discord.js": "^13.3",
     "react": ">=17"
   },
   "peerDependenciesMeta": {
@@ -61,22 +61,24 @@
     }
   },
   "devDependencies": {
-    "@types/lodash-es": "^4.17.6",
-    "c8": "^7.11.2",
-    "discord.js": "^14.0.3",
-    "dotenv": "^16.0.0",
+    "@types/lodash-es": "^4.17.5",
+    "c8": "^7.11.0",
+    "discord.js": "^13.5.1",
+    "dotenv": "^11.0.0",
+    "esbuild": "latest",
+    "esbuild-jest": "^0.5.0",
+    "esmo": "^0.13.0",
     "lodash-es": "^4.17.21",
     "nodemon": "^2.0.15",
-    "prettier": "^2.6.2",
+    "prettier": "^2.5.1",
     "pretty-ms": "^7.0.1",
-    "react": "^18.0.0",
-    "release-it": "^14.14.2",
-    "tsup": "^5.12.6",
-    "tsx": "^3.8.0",
-    "type-fest": "^2.12.2",
-    "typescript": "^4.6.3",
-    "vite": "^2.9.5",
-    "vitest": "^0.10.0"
+    "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"
   },
   "resolutions": {
     "esbuild": "latest"
@@ -89,8 +91,5 @@
       "release": true,
       "web": true
     }
-  },
-  "publishConfig": {
-    "access": "public"
   }
 }

packages/reacord/playground/command-handler.ts

@@ -0,0 +1,38 @@
+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

@@ -0,0 +1,36 @@
+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

@@ -0,0 +1,31 @@
+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

@@ -0,0 +1,109 @@
+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

@@ -1,134 +0,0 @@
-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,
-  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 />)
-})

packages/reacord/scripts/release.sh

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

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

@@ -1,12 +0,0 @@
-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, test, vi } from "vitest"
+import { expect, fn, test } from "vitest"
 import { Button, Option, Select } from "../library/main"
 import { ReacordTester } from "./test-adapter"
 
 test("single select", async () => {
   const tester = new ReacordTester()
-  const onSelect = vi.fn()
+  const onSelect = 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 = vi.fn()
+  const onSelect = 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 { setTimeout } from "node:timers/promises"
+import { nextTick } from "node:process"
+import { promisify } from "node:util"
 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,10 +26,17 @@ import type {
   CommandInteraction,
   SelectInteraction,
 } from "../library/internal/interaction"
-import type { Message, MessageOptions } from "../library/internal/message"
+import type {
+  Message,
+  MessageButtonOptions,
+  MessageOptions,
+  MessageSelectOptions,
+} 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]
 
 /**
@@ -66,10 +73,9 @@ export class ReacordTester extends Reacord {
     return this.reply(initialContent)
   }
 
-  assertMessages(expected: MessageSample[]) {
-    return waitFor(() => {
+  async assertMessages(expected: MessageSample[]) {
+    await nextTickPromise()
     expect(this.sampleMessages()).toEqual(expected)
-    })
   }
 
   async assertRender(content: ReactNode, expected: MessageSample[]) {
@@ -102,59 +108,58 @@ export class ReacordTester extends Reacord {
   }
 
   findButtonByLabel(label: string) {
-    return {
-      click: () => {
-        return waitFor(() => {
-          for (const [component, message] of this.eachComponent()) {
+    for (const message of this.messageContainer) {
+      for (const component of message.options.actionRows.flat()) {
         if (component.type === "button" && component.label === label) {
-              this.handleComponentInteraction(
-                new TestButtonInteraction(component.customId, message, this),
-              )
-              return
+          return this.createButtonActions(component, message)
+        }
       }
     }
     raise(`Couldn't find button with label "${label}"`)
-        })
-      },
-    }
   }
 
   findSelectByPlaceholder(placeholder: string) {
-    return {
-      select: (...values: string[]) => {
-        return waitFor(() => {
-          for (const [component, message] of this.eachComponent()) {
+    for (const message of this.messageContainer) {
+      for (const component of message.options.actionRows.flat()) {
         if (
           component.type === "select" &&
           component.placeholder === placeholder
         ) {
-              this.handleComponentInteraction(
-                new TestSelectInteraction(
-                  component.customId,
-                  message,
-                  values,
-                  this,
-                ),
-              )
-              return
+          return this.createSelectActions(component, message)
+        }
       }
     }
     raise(`Couldn't find select with placeholder "${placeholder}"`)
-        })
-      },
-    }
   }
 
   createMessage(options: MessageOptions) {
     return new TestMessage(options, this.messageContainer)
   }
 
-  private *eachComponent() {
-    for (const message of this.messageContainer) {
-      for (const component of message.options.actionRows.flat()) {
-        yield [component, message] as const
+  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),
+        )
+      },
+    }
   }
 }
 
@@ -170,6 +175,16 @@ 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)
   }
@@ -182,14 +197,16 @@ class TestCommandInteraction implements CommandInteraction {
 
   constructor(private messageContainer: Container<TestMessage>) {}
 
-  async reply(messageOptions: MessageOptions): Promise<Message> {
-    await setTimeout()
-    return new TestMessage(messageOptions, this.messageContainer)
+  reply(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)
+  followUp(messageOptions: MessageOptions): Promise<Message> {
+    return Promise.resolve(
+      new TestMessage(messageOptions, this.messageContainer),
+    )
   }
 }
 

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

@@ -1,89 +0,0 @@
-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/test/use-instance.test.tsx

@@ -55,7 +55,7 @@ describe("useInstance", () => {
     await tester.assertMessages([messageOutput("parent")])
     expect(instanceFromHook).toBe(instance)
 
-    await tester.findButtonByLabel("create parent").click()
+    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
-    await tester.findButtonByLabel("destroy child").click()
+    tester.findButtonByLabel("destroy child").click()
     await tester.assertMessages([messageOutput("parent")])
 
-    await tester.findButtonByLabel("destroy parent").click()
+    tester.findButtonByLabel("destroy parent").click()
     await tester.assertMessages([])
   })
 })

packages/website/.gitignore

@@ -4,7 +4,10 @@ node_modules
 /build
 /public/build
 .env
-/public/api
 cypress/videos
 cypress/screenshots
 *.out.css
+
+# typedoc output
+/public/api
+/app/assets/api.json

packages/website/CHANGELOG.md

@@ -1,8 +0,0 @@
-# website
-
-## 0.4.1
-
-### Patch Changes
-
-- Updated dependencies [aa65da5]
-  - reacord@0.5.0

packages/website/app/entry.client.tsx

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

packages/website/app/entry.server.tsx

@@ -1,21 +1,21 @@
-import { renderToString } from "react-dom/server"
-import type { EntryContext } from "@remix-run/node"
-import { RemixServer } from "@remix-run/react"
+import { renderToString } from "react-dom/server";
+import { RemixServer } from "remix";
+import type { EntryContext } from "remix";
 
 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/api/api-data.server.ts

@@ -0,0 +1,8 @@
+import type { JSONOutput } from "typedoc"
+import apiData from "~/assets/api.json"
+
+export type ApiData = JSONOutput.ContainerReflection
+
+export function getApiData(): ApiData {
+  return apiData as ApiData
+}

packages/website/app/modules/helpers/promise-all-object.ts

@@ -0,0 +1,13 @@
+export async function promiseAllObject<Input extends object>(
+  input: Input,
+): Promise<{
+  [K in keyof Input]: Awaited<Input[K]>
+}> {
+  const result: any = {}
+  await Promise.all(
+    Object.entries(input).map(async ([key, promise]) => {
+      result[key] = await promise
+    }),
+  )
+  return result
+}

packages/website/app/modules/markdown/render-markdown.server.ts

@@ -0,0 +1,23 @@
+export async function renderMarkdown(
+  markdown: string,
+): Promise<{ __html: string }> {
+  const rehypePrism = import("rehype-prism-plus").then(
+    (module) => module.default,
+  )
+  const rehypeStringify = import("rehype-stringify").then(
+    (module) => module.default,
+  )
+  const remarkParse = import("remark-parse").then((module) => module.default)
+  const remarkRehype = import("remark-rehype").then((module) => module.default)
+  const { unified } = await import("unified")
+
+  const processor = unified()
+    .use(await remarkParse)
+    .use(await remarkRehype)
+    .use(await rehypeStringify)
+    .use(await rehypePrism)
+
+  const result = await processor.process(markdown)
+
+  return { __html: result.toString() }
+}

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

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

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

@@ -9,7 +9,6 @@ export function MainNavigation() {
     <nav className="flex justify-between items-center h-16">
       <a href="/">
         <AppLogo className="w-32" />
-        <span className="sr-only">Home</span>
       </a>
       <div className="hidden md:flex gap-4">
         {mainLinks.map((link) => (

packages/website/app/modules/ui/modal.tsx

@@ -61,7 +61,7 @@ export function Modal({
   )
 }
 
-export function UncontrolledModal({
+export function ControlledModal({
   children,
   button,
 }: {

packages/website/app/root.tsx

@@ -1,8 +1,5 @@
-import type {
-  LinksFunction,
-  LoaderFunction,
-  MetaFunction,
-} from "@remix-run/node"
+import packageJson from "reacord/package.json"
+import type { LinksFunction, LoaderFunction, MetaFunction } from "remix"
 import {
   Links,
   LiveReload,
@@ -11,8 +8,7 @@ import {
   Scripts,
   ScrollRestoration,
   useLoaderData,
-} from "@remix-run/react"
-import packageJson from "reacord/package.json"
+} from "remix"
 import bannerUrl from "~/assets/banner.png"
 import faviconUrl from "~/assets/favicon.png"
 import { GuideLinksProvider } from "~/modules/navigation/guide-links-context"
@@ -26,15 +22,15 @@ export const meta: MetaFunction = () => ({
   "description": packageJson.description,
   "theme-color": "#21754b",
 
-  "og:url": "https://reacord.mapleleaf.dev/",
+  "og:url": "https://reacord.fly.dev/",
   "og:type": "website",
   "og:title": "Reacord",
   "og:description": "Create interactive Discord messages using React",
   "og:image": bannerUrl,
 
   "twitter:card": "summary_large_image",
-  "twitter:domain": "reacord.mapleleaf.dev",
-  "twitter:url": "https://reacord.mapleleaf.dev/",
+  "twitter:domain": "reacord.fly.dev",
+  "twitter:url": "https://reacord.fly.dev/",
   "twitter:title": "Reacord",
   "twitter:description": "Create interactive Discord messages using React",
   "twitter:image": bannerUrl,
@@ -55,10 +51,6 @@ export const links: LinksFunction = () => [
     as: "style",
     href: "https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500&family=Rubik:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap",
   },
-  {
-    rel: "stylesheet",
-    href: "https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500&family=Rubik:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap",
-  },
 ]
 
 type LoaderData = {
@@ -77,7 +69,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 />
@@ -85,10 +76,9 @@ export default function App() {
         {process.env.NODE_ENV === "production" && (
           <script
             async
-            defer
-            data-website-id="e3ce3a50-720e-4489-be37-cc091c1b7029"
-            src="https://umami-production-72bc.up.railway.app/umami.js"
-          ></script>
+            data-website-id="49c69ade-5593-4853-9686-c9ca9d519a18"
+            src="https://maple-umami.fly.dev/umami.js"
+          />
         )}
       </head>
       <body>

packages/website/app/routes/api.tsx

@@ -0,0 +1,78 @@
+import clsx from "clsx"
+import { Fragment } from "react"
+import type { LoaderFunction } from "remix"
+import { Outlet, useLoaderData } from "remix"
+import { getApiData } from "~/modules/api/api-data.server"
+import { ActiveLink } from "~/modules/navigation/active-link"
+import type { AppLinkProps } from "~/modules/navigation/app-link"
+import { AppLink } from "~/modules/navigation/app-link"
+import { MainNavigation } from "~/modules/navigation/main-navigation"
+import { linkClass, maxWidthContainer } from "~/modules/ui/components"
+
+type LoaderData = {
+  categorySections: Array<{
+    title: string
+    links: AppLinkProps[]
+  }>
+  // [key: string]: unknown
+}
+
+export const loader: LoaderFunction = async () => {
+  const apiData = getApiData()
+
+  const childrenById = Object.fromEntries(
+    apiData.children.map((child) => [child.id, { name: child.name }]),
+  )
+
+  const data: LoaderData = {
+    categorySections: apiData.categories.map((category) => ({
+      title: category.title,
+      links: category.children
+        .map((childId) => childrenById[childId])
+        .flatMap<AppLinkProps>((child) =>
+          child
+            ? { to: `/api/${child.name}`, type: "router", children: child.name }
+            : [],
+        ),
+    })),
+  }
+  return data
+}
+
+export default function ApiReferencePage() {
+  const data = useLoaderData<LoaderData>()
+  return (
+    <div className="isolate">
+      <header className="bg-slate-700/30 shadow sticky top-0 backdrop-blur-sm transition z-10 flex">
+        <div className={maxWidthContainer}>
+          <MainNavigation />
+        </div>
+      </header>
+
+      <div className={clsx(maxWidthContainer, "mt-8 flex items-start gap-4")}>
+        <nav className="w-48 sticky top-24 hidden md:block">
+          {data.categorySections.map((category) => (
+            <Fragment key={category.title}>
+              <h2 className="text-2xl">{category.title}</h2>
+              <ul className="mt-3 mb-6 flex flex-col gap-2 items-start">
+                {category.links.map((link) => (
+                  <li key={link.to}>
+                    <ActiveLink to={link.to}>
+                      {({ active }) => (
+                        <AppLink {...link} className={linkClass({ active })} />
+                      )}
+                    </ActiveLink>
+                  </li>
+                ))}
+              </ul>
+            </Fragment>
+          ))}
+        </nav>
+
+        <main className="pb-8 flex-1 min-w-0">
+          <Outlet />
+        </main>
+      </div>
+    </div>
+  )
+}

packages/website/app/routes/api/$name.tsx

@@ -0,0 +1,92 @@
+import type { LoaderFunction } from "remix"
+import { useLoaderData } from "remix"
+import { getApiData } from "~/modules/api/api-data.server"
+import { renderMarkdown } from "~/modules/markdown/render-markdown.server"
+import { docsProseClass } from "~/modules/ui/components"
+
+type LoaderData = {
+  title: string
+  description?: { __html: string }
+  [key: string]: unknown
+}
+
+export const loader: LoaderFunction = async ({ params }) => {
+  const apiData = getApiData()
+
+  const entityName = params.name!
+
+  const info = apiData.children?.find((child) => child.name === entityName)
+
+  const description = [
+    info?.comment?.shortText,
+    info?.comment?.text,
+    info?.signatures?.[0]?.comment?.shortText,
+    info?.signatures?.[0]?.comment?.text,
+  ]
+    .filter(Boolean)
+    .join("\n\n")
+
+  const data: LoaderData = {
+    title: entityName,
+    description: description ? await renderMarkdown(description) : undefined,
+    sig: await renderMarkdown(`
+\`\`\`tsx
+function ActionRow(props: ActionRowProps): ReactElement
+\`\`\`
+`),
+  }
+  return data
+}
+
+export default function ApiDetailPage() {
+  const data = useLoaderData<LoaderData>()
+
+  return (
+    <>
+      <h1 className="text-3xl font-light">{data.title}</h1>
+      <p className="text-sm font-bold opacity-50 uppercase mt-1">Component</p>
+      <section
+        className={docsProseClass}
+        dangerouslySetInnerHTML={data.description}
+      />
+      <section className={docsProseClass}>
+        <ul>
+          <li>
+            <p>
+              <code>children?: ReactNode</code>
+            </p>
+            <p>
+              This should be a list of <code>{`<Option />`}</code> components.
+            </p>
+            <ul>
+              <li>
+                <p>
+                  <code>disabled?: boolean</code>
+                </p>
+                <p>
+                  When true, the select will be slightly faded, and cannot be
+                  interacted with.
+                </p>
+              </li>
+            </ul>
+          </li>
+          <li>
+            <p>
+              <code>minValues?: number</code>
+            </p>
+            <p>
+              With <code>multiple</code>, the minimum number of values that can
+              be selected. When <code>multiple</code> is false or not defined,
+              this is always 1.
+            </p>
+            <p>
+              This only limits the number of values that can be received by the
+              user. This does not limit the number of values that can be
+              displayed by you.
+            </p>
+          </li>
+        </ul>
+      </section>
+    </>
+  )
+}

packages/website/app/routes/guides.tsx

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

packages/website/app/routes/index.tsx

@@ -5,7 +5,7 @@ import LandingCode from "~/modules/landing/landing-code.mdx"
 import { MainNavigation } from "~/modules/navigation/main-navigation"
 import { buttonClass, maxWidthContainer } from "~/modules/ui/components"
 import { LandingAnimation } from "../modules/landing/landing-animation"
-import { UncontrolledModal } from "../modules/ui/modal"
+import { ControlledModal } from "../modules/ui/modal"
 
 export default function Landing() {
   return (
@@ -37,7 +37,7 @@ export default function Landing() {
               Get Started
             </a>
 
-            <UncontrolledModal
+            <ControlledModal
               button={(button) => (
                 <button
                   {...button}
@@ -50,7 +50,7 @@ export default function Landing() {
               <div className="text-sm sm:text-base">
                 <LandingCode />
               </div>
-            </UncontrolledModal>
+            </ControlledModal>
           </div>
         </div>
 

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

@@ -1,9 +1,9 @@
 {
-  "name": "website",
-  "version": "0.4.1",
   "private": true,
+  "name": "website",
   "scripts": {
-    "dev": "concurrently 'typedoc --watch' 'pnpm tailwind -- --watch' 'remix dev'",
+    "prepare": "remix setup node",
+    "dev": "NODE_OPTIONS=--enable-source-maps 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",
     "build": "typedoc && pnpm tailwind -- --minify && remix build",
@@ -12,42 +12,49 @@
     "typecheck": "tsc --noEmit && tsc --project cypress/tsconfig.json --noEmit"
   },
   "dependencies": {
-    "@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",
+    "@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",
     "clsx": "^1.1.1",
-    "fast-glob": "^3.2.11",
+    "fast-glob": "^3.2.10",
     "gray-matter": "^4.0.3",
     "reacord": "workspace:*",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "react-focus-on": "^3.5.4",
-    "react-router": "^6.3.0",
-    "react-router-dom": "^6.3.0"
+    "react-router": "^6.2.1",
+    "react-router-dom": "^6.2.1",
+    "rehype-stringify": "^9.0.2",
+    "remark-parse": "^10.0.1",
+    "rehype-prism-plus": "^1.3.1",
+    "remark-rehype": "^10.1.0",
+    "remix": "^1.1.1",
+    "unified": "^10.1.1"
   },
   "devDependencies": {
-    "@remix-run/dev": "^1.4.1",
-    "@remix-run/node": "^1.4.1",
+    "@remix-run/dev": "^1.1.1",
+    "@remix-run/node": "^1.1.1",
     "@testing-library/cypress": "^8.0.2",
     "@types/node": "*",
-    "@types/react": "^18.0.7",
-    "@types/react-dom": "^18.0.2",
-    "@types/tailwindcss": "^3.0.10",
+    "@types/react": "^17.0.38",
+    "@types/react-dom": "^17.0.11",
+    "@types/tailwindcss": "^3.0.2",
     "@types/wait-on": "^5.3.1",
-    "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"
+    "autoprefixer": "^10.4.2",
+    "concurrently": "^7.0.0",
+    "cypress": "^9.2.1",
+    "execa": "^6.0.0",
+    "postcss": "^8.4.5",
+    "tailwindcss": "^3.0.13",
+    "typedoc": "^0.22.10",
+    "typescript": "^4.5.4",
+    "wait-on": "^6.0.0"
+  },
+  "engines": {
+    "node": ">=14"
   },
   "sideEffects": false
 }

packages/website/tsconfig.json

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

packages/website/typedoc.json

@@ -1,7 +1,8 @@
 {
+  "$schema": "https://typedoc.org/schema.json",
   "entryPoints": ["../reacord/library/main.ts"],
-  "out": ["public/api"],
   "tsconfig": "../reacord/tsconfig.json",
+  "json": "./app/assets/api.json",
   "excludeInternal": true,
   "excludePrivate": true,
   "excludeProtected": true,

pnpm-workspace.yaml

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