kris/reacord
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

tooling overhaul

Browse Source
This commit is contained in:
itsMapleLeaf
2023-08-16 19:32:28 -05:00
parent 7ac1a9cdce
commit e9e5a1617b
111 changed files with 6758 additions and 6156 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
.changeset/config.json
View File

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

38
.eslintrc.cjs
View File

@@ -1,38 +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"),
extraFileExtensions: [".astro"],
},
overrides: [
{
files: ["packages/website/cypress/**"],
parserOptions: {
project: require.resolve("./packages/website/cypress/tsconfig.json"),
},
},
{
files: ["*.astro"],
parser: "astro-eslint-parser",
parserOptions: {
parser: "@typescript-eslint/parser",
},
rules: {
"react/no-unknown-property": "off",
"react/jsx-key": "off",
"react/jsx-no-undef": "off",
},
},
],
}

77
.eslintrc.json Normal file
View File

@@ -0,0 +1,77 @@
{
"root": true,
"env": {
"browser": true,
"es2021": true,
"node": true
},
"extends": [
"eslint:recommended",
"plugin:@typescript-eslint/recommended",
"plugin:@typescript-eslint/recommended-requiring-type-checking",
"plugin:@typescript-eslint/stylistic",
"plugin:@typescript-eslint/stylistic-type-checked",
"plugin:astro/recommended",
"prettier"
],
"parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaVersion": "latest",
"sourceType": "module",
"project": true
},
"plugins": ["@typescript-eslint", "react"],
"rules": {
"@typescript-eslint/no-unsafe-argument": "off",
"@typescript-eslint/no-unsafe-member-access": "off",
"@typescript-eslint/no-unsafe-assignment": "off",
"@typescript-eslint/no-unsafe-return": "off",
"@typescript-eslint/require-await": "off",
"@typescript-eslint/no-explicit-any": "warn",
"@typescript-eslint/no-unused-vars": [
"warn",
{ "argsIgnorePattern": "^_", "ignoreRestSiblings": true }
],
"@typescript-eslint/no-empty-function": "off"
},
"ignorePatterns": [
"node_modules",
"dist",
".astro",
"packages/website/public/api"
],
"settings": {
"react": {
"version": "detect"
}
},
"overrides": [
{
"files": ["*.tsx", "*.jsx"],
"extends": [
"plugin:react/recommended",
"plugin:react/jsx-runtime",
"plugin:react-hooks/recommended"
],
"rules": {
"react/prop-types": "off"
}
},
{
"files": ["*.astro"],
"parser": "astro-eslint-parser",
"parserOptions": {
"parser": "@typescript-eslint/parser",
"extraFileExtensions": [".astro"]
},
"globals": {
"astroHTML": "readonly"
},
"rules": {
"react/no-unknown-property": "off",
"react/jsx-key": "off",
"react/jsx-no-undef": "off"
}
}
]
}

35
.github/workflows/lint.yml vendored Normal file
View File

@@ -0,0 +1,35 @@
name: lint
on:
push:
branches: [main]
pull_request:
env:
TEST_BOT_TOKEN: ${{ secrets.TEST_BOT_TOKEN }}
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:
lint:
strategy:
fail-fast: false
matrix:
script: ["prettier", "eslint", "tsc", "tsc-root"]
name: lint (${{ matrix.script }})
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- uses: pnpm/action-setup@v2
with:
version: 8
- uses: actions/setup-node@v3
with:
node-version: 16
cache: pnpm
- run: pnpm install --frozen-lockfile
- run: pnpm run lint:${{ matrix.script }}

53
.github/workflows/main.yml vendored
View File

@@ -1,53 +0,0 @@
name: main
on:
push:
branches: [main]
pull_request:
env:
TEST_BOT_TOKEN: ${{ secrets.TEST_BOT_TOKEN }}
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:
fail-fast: false
matrix:
command:
# if these run in the same process, it dies,
# so we test them separate
- name: test reacord
run: pnpm -C packages/reacord test
# - name: test website
# run: pnpm -C packages/website test
- name: build
run: pnpm --recursive run build
- name: lint
run: pnpm run lint
- name: typecheck
run: pnpm run typecheck
name: ${{ matrix.command.name }}
runs-on: ubuntu-latest
steps:
- name: checkout
uses: actions/checkout@v3
- name: setup pnpm
uses: pnpm/action-setup@v2
with:
version: 7.13.4
- name: setup node
uses: actions/setup-node@v3
with:
node-version: 16
cache: pnpm
- run: pnpm install --frozen-lockfile
- run: ${{ matrix.command.run }}

19
.github/workflows/release.yml vendored
View File

@@ -13,22 +13,15 @@ jobs:
name: release name: release
runs-on: ubuntu-latest runs-on: ubuntu-latest
steps: steps:
- name: checkout - uses: actions/checkout@v3
uses: actions/checkout@v3 - uses: pnpm/action-setup@v2
- name: setup pnpm
uses: pnpm/action-setup@v2
with: with:
version: 7.13.4 version: 8
- uses: actions/setup-node@v3
- name: setup node
uses: actions/setup-node@v3
with: with:
node-version: 16 node-version: 18
cache: pnpm cache: pnpm
- run: pnpm install --frozen-lockfile
- name: install deps
run: pnpm install --frozen-lockfile
- name: changesets release - name: changesets release
id: changesets id: changesets

30
.github/workflows/unit-test.yml vendored Normal file
View File

@@ -0,0 +1,30 @@
name: unit test
on:
push:
branches: [main]
pull_request:
env:
TEST_BOT_TOKEN: ${{ secrets.TEST_BOT_TOKEN }}
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:
lint:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- uses: pnpm/action-setup@v2
with:
version: 8
- uses: actions/setup-node@v3
with:
node-version: 16
cache: pnpm
- run: pnpm install --frozen-lockfile
- run: pnpm test

3
.gitignore vendored
View File

@@ -5,8 +5,7 @@ coverage
.env .env
*.code-workspace *.code-workspace
.pnpm-debug.log .pnpm-debug.log
build build
.cache .cache
.vercel .vercel
*.tsbuildinfo

7
.prettierignore
View File

@@ -1,7 +1,2 @@
node_modules
dist
coverage
pnpm-lock.yaml pnpm-lock.yaml
build /packages/website/public/api
.cache
packages/website/public/api

18
.prettierrc Normal file
View File

@@ -0,0 +1,18 @@
{
"semi": false,
"useTabs": true,
"htmlWhitespaceSensitivity": "ignore",
"plugins": [
"prettier-plugin-jsdoc",
"prettier-plugin-astro",
"prettier-plugin-tailwindcss"
],
"overrides": [
{
"files": "*.astro",
"options": {
"parser": "astro"
}
}
]
}

14
.prettierrc.cjs
View File

@@ -1,14 +0,0 @@
const base = require("@itsmapleleaf/configs/prettier")
module.exports = {
...base,
plugins: [require.resolve("prettier-plugin-astro")],
overrides: [
{
files: "*.astro",
options: {
parser: "astro",
},
},
],
}

65
package.json
View File

@@ -1,27 +1,42 @@
{ {
"name": "reacord-monorepo", "name": "reacord-monorepo",
"private": true, "private": true,
"scripts": { "scripts": {
"lint": "eslint --ext js,ts,tsx .", "lint": "run-p --print-label --continue-on-error --silent lint:*",
"lint-fix": "pnpm lint -- --fix", "lint:prettier": "prettier --cache --check .",
"format": "prettier --write .", "lint:eslint": "eslint . --report-unused-disable-directives",
"typecheck": "tsc -b", "lint:tsc": "pnpm -r --parallel --no-bail exec tsc -b",
"build": "pnpm -r run build", "lint:tsc-root": "tsc -b",
"start": "pnpm -C packages/website run start", "format": "run-s --continue-on-error format:*",
"release": "pnpm -r run build && changeset publish" "format:eslint": "eslint . --report-unused-disable-directives --fix",
}, "format:prettier": "prettier --cache --write .",
"devDependencies": { "test": "vitest",
"@changesets/cli": "^2.25.0", "build": "pnpm -r run build",
"@itsmapleleaf/configs": "^1.1.7", "build:website": "pnpm --filter website... run build",
"@rushstack/eslint-patch": "^1.2.0", "start": "pnpm -C packages/website run start",
"@types/eslint": "^8.4.6", "start:website": "pnpm -C packages/website run start",
"astro-eslint-parser": "^0.12.0", "release": "pnpm -r run build && changeset publish"
"eslint": "^8.36.0", },
"prettier": "^2.7.1", "devDependencies": {
"prettier-plugin-astro": "^0.8.0", "@changesets/cli": "^2.26.2",
"typescript": "^4.8.4" "@itsmapleleaf/configs": "^3.0.1",
}, "@tailwindcss/typography": "^0.5.9",
"resolutions": { "@types/eslint": "^8.44.2",
"esbuild": "latest" "@typescript-eslint/eslint-plugin": "^6.4.0",
} "@typescript-eslint/parser": "^6.4.0",
"eslint": "^8.47.0",
"eslint-config-prettier": "^9.0.0",
"eslint-plugin-astro": "^0.28.0",
"eslint-plugin-react": "^7.33.2",
"eslint-plugin-react-hooks": "^4.6.0",
"npm-run-all": "^4.1.5",
"prettier": "^3.0.2",
"prettier-plugin-astro": "^0.11.1",
"prettier-plugin-jsdoc": "^1.0.1",
"prettier-plugin-tailwindcss": "^0.5.3",
"react": "^18.2.0",
"tailwindcss": "^3.3.3",
"typescript": "^5.1.6",
"vitest": "^0.34.1"
}
} }

58
packages/helpers/convert-object-property-case.test.ts
View File

@@ -1,42 +1,42 @@
import { camelCaseDeep, snakeCaseDeep } from "./convert-object-property-case"
import type { import type {
CamelCasedPropertiesDeep, CamelCasedPropertiesDeep,
SnakeCasedPropertiesDeep, SnakeCasedPropertiesDeep,
} from "type-fest" } from "type-fest"
import { expect, test } from "vitest" import { expect, test } from "vitest"
import { camelCaseDeep, snakeCaseDeep } from "./convert-object-property-case"
test("camelCaseDeep", () => { test("camelCaseDeep", () => {
const input = { const input = {
some_prop: { some_prop: {
some_deep_prop: "some_deep_value", some_deep_prop: "some_deep_value",
}, },
someOtherProp: "someOtherValue", someOtherProp: "someOtherValue",
} }
const expected: CamelCasedPropertiesDeep<typeof input> = { const expected: CamelCasedPropertiesDeep<typeof input> = {
someProp: { someProp: {
someDeepProp: "some_deep_value", someDeepProp: "some_deep_value",
}, },
someOtherProp: "someOtherValue", someOtherProp: "someOtherValue",
} }
expect(camelCaseDeep(input)).toEqual(expected) expect(camelCaseDeep(input)).toEqual(expected)
}) })
test("snakeCaseDeep", () => { test("snakeCaseDeep", () => {
const input = { const input = {
someProp: { someProp: {
someDeepProp: "someDeepValue", someDeepProp: "someDeepValue",
}, },
some_other_prop: "someOtherValue", some_other_prop: "someOtherValue",
} }
const expected: SnakeCasedPropertiesDeep<typeof input> = { const expected: SnakeCasedPropertiesDeep<typeof input> = {
some_prop: { some_prop: {
some_deep_prop: "someDeepValue", some_deep_prop: "someDeepValue",
}, },
some_other_prop: "someOtherValue", some_other_prop: "someOtherValue",
} }
expect(snakeCaseDeep(input)).toEqual(expected) expect(snakeCaseDeep(input)).toEqual(expected)
}) })

39
packages/helpers/convert-object-property-case.ts
View File

@@ -1,34 +1,35 @@
import { camelCase, isObject, snakeCase } from "lodash-es" import { camelCase, isObject, snakeCase } from "lodash-es"
import type { import type {
CamelCasedPropertiesDeep, CamelCasedPropertiesDeep,
SnakeCasedPropertiesDeep, SnakeCasedPropertiesDeep,
UnknownRecord,
} from "type-fest" } from "type-fest"
function convertKeyCaseDeep<Input, Output>( function convertKeyCaseDeep<Input, Output>(
input: Input, input: Input,
convertKey: (key: string) => string, convertKey: (key: string) => string,
): Output { ): Output {
if (!isObject(input)) { if (!isObject(input)) {
return input as unknown as Output return input as unknown as Output
} }
if (Array.isArray(input)) { if (Array.isArray(input)) {
return input.map((item) => return input.map((item) =>
convertKeyCaseDeep(item, convertKey), convertKeyCaseDeep(item, convertKey),
) as unknown as Output ) as unknown as Output
} }
const output: any = {} const output = {} as UnknownRecord
for (const [key, value] of Object.entries(input)) { for (const [key, value] of Object.entries(input)) {
output[convertKey(key)] = convertKeyCaseDeep(value, convertKey) output[convertKey(key)] = convertKeyCaseDeep(value, convertKey)
} }
return output return output as Output
} }
export function camelCaseDeep<T>(input: T): CamelCasedPropertiesDeep<T> { export function camelCaseDeep<T>(input: T): CamelCasedPropertiesDeep<T> {
return convertKeyCaseDeep(input, camelCase) return convertKeyCaseDeep(input, camelCase)
} }
export function snakeCaseDeep<T>(input: T): SnakeCasedPropertiesDeep<T> { export function snakeCaseDeep<T>(input: T): SnakeCasedPropertiesDeep<T> {
return convertKeyCaseDeep(input, snakeCase) return convertKeyCaseDeep(input, snakeCase)
} }

2
packages/helpers/get-environment-value.ts
View File

@@ -1,5 +1,5 @@
import { raise } from "./raise.js" import { raise } from "./raise.js"
export function getEnvironmentValue(name: string) { export function getEnvironmentValue(name: string) {
return process.env[name] ?? raise(`Missing environment variable: ${name}`) return process.env[name] ?? raise(`Missing environment variable: ${name}`)
} }

12
packages/helpers/is-instance-of.ts
View File

@@ -1,7 +1,7 @@
/** /** For narrowing instance types with array.filter */
* for narrowing instance types with array.filter
*/
export const isInstanceOf = export const isInstanceOf =
<T>(Constructor: new (...args: any[]) => T) => <Instance, Args extends unknown[]>(
(value: unknown): value is T => constructor: new (...args: Args) => Instance,
value instanceof Constructor ) =>
(value: unknown): value is Instance =>
value instanceof constructor

8
packages/helpers/is-object.ts
View File

@@ -1,7 +1,3 @@
export function isObject<T>( export function isObject(value: unknown): value is object {
value: T, return typeof value === "object" && value !== null
): value is Exclude<T, Primitive | AnyFunction> {
return typeof value === "object" && value !== null
} }
type Primitive = string | number | boolean | undefined | null
type AnyFunction = (...args: any[]) => any

7
packages/helpers/json.ts Normal file
View File

@@ -0,0 +1,7 @@
export function safeJsonStringify(value: unknown): string {
try {
return JSON.stringify(value)
} catch {
return String(value)
}
}

2
packages/helpers/last.ts
View File

@@ -1,3 +1,3 @@
export function last<T>(array: T[]): T | undefined { export function last<T>(array: T[]): T | undefined {
return array[array.length - 1] return array[array.length - 1]
} }

14
packages/helpers/log-pretty.ts
View File

@@ -1,11 +1,11 @@
import { inspect } from "node:util" import { inspect } from "node:util"
export function logPretty(value: unknown) { export function logPretty(value: unknown) {
console.info( console.info(
inspect(value, { inspect(value, {
// depth: Number.POSITIVE_INFINITY, // depth: Number.POSITIVE_INFINITY,
depth: 10, depth: 10,
colors: true, colors: true,
}), }),
) )
} }

7
packages/helpers/omit.test.ts Normal file
View File

@@ -0,0 +1,7 @@
import { expect, test } from "vitest"
import { omit } from "./omit.ts"
test("omit", () => {
const subject = { a: 1, b: true }
expect(omit(subject, ["a"])).toStrictEqual({ b: true })
})

3
packages/helpers/omit.test.types.ts Normal file
View File

@@ -0,0 +1,3 @@
import { omit } from "./omit.ts"
omit({ a: 1, b: true }, ["a"]) satisfies { b: boolean }

19
packages/helpers/omit.ts
View File

@@ -1,13 +1,10 @@
export function omit<Subject extends object, Key extends PropertyKey>( export function omit<Subject extends object, Key extends PropertyKey>(
subject: Subject, subject: Subject,
keys: Key[], keys: Key[],
// hack: using a conditional type preserves union types ) {
): Subject extends any ? Omit<Subject, Key> : never { const keySet = new Set<PropertyKey>(keys)
const result: any = {} return Object.fromEntries(
for (const key in subject) { Object.entries(subject).filter(([key]) => !keySet.has(key)),
if (!keys.includes(key as unknown as Key)) { // hack: conditional type preserves unions
result[key] = subject[key] ) as Subject extends unknown ? Omit<Subject, Key> : never
}
}
return result
} }

18
packages/helpers/package.json
View File

@@ -1,11 +1,11 @@
{ {
"name": "@reacord/helpers", "name": "@reacord/helpers",
"version": "0.0.0", "version": "0.0.0",
"private": true, "private": true,
"dependencies": { "dependencies": {
"@types/lodash-es": "^4.17.6", "@types/lodash-es": "^4.17.8",
"lodash-es": "^4.17.21", "lodash-es": "^4.17.21",
"type-fest": "^2.17.0", "type-fest": "^4.2.0",
"vitest": "^0.18.1" "vitest": "^0.34.1"
} }
} }

22
packages/helpers/pick.ts
View File

@@ -1,15 +1,11 @@
import type { LoosePick, UnknownRecord } from "./types" import type { LoosePick } from "./types"
export function pick<T, K extends keyof T | PropertyKey>( export function pick<T extends object, K extends keyof T | PropertyKey>(
object: T, object: T,
keys: K[], keys: K[],
): LoosePick<T, K> { ) {
const result: any = {} const keySet = new Set<PropertyKey>(keys)
for (const key of keys) { return Object.fromEntries(
const value = (object as UnknownRecord)[key] Object.entries(object).filter(([key]) => keySet.has(key)),
if (value !== undefined) { ) as LoosePick<T, K>
result[key] = value
}
}
return result
} }

51
packages/helpers/prune-nullish-values.test.ts
View File

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

54
packages/helpers/prune-nullish-values.ts
View File

@@ -1,42 +1,44 @@
import { isObject } from "./is-object" import { isObject } from "./is-object"
export function pruneNullishValues<T>(input: T): PruneNullishValues<T> { export function pruneNullishValues<T>(input: T): PruneNullishValues<T> {
if (Array.isArray(input)) { if (!isObject(input)) {
return input.filter(Boolean).map((item) => pruneNullishValues(item)) as any return input as PruneNullishValues<T>
} }
if (!isObject(input)) { if (Array.isArray(input)) {
return input as any return input
} .filter(Boolean)
.map((item) => pruneNullishValues(item)) as PruneNullishValues<T>
}
const result: any = {} const result: Record<string, unknown> = {}
for (const [key, value] of Object.entries(input as any)) { for (const [key, value] of Object.entries(input)) {
if (value != undefined) { if (value != undefined) {
result[key] = pruneNullishValues(value) result[key] = pruneNullishValues(value)
} }
} }
return result return result as PruneNullishValues<T>
} }
export type PruneNullishValues<Input> = Input extends object export type PruneNullishValues<Input> = Input extends object
? OptionalKeys< ? OptionalKeys<
{ [Key in keyof Input]: NonNullable<PruneNullishValues<Input[Key]>> }, { [Key in keyof Input]: NonNullable<PruneNullishValues<Input[Key]>> },
KeysWithNullishValues<Input> KeysWithNullishValues<Input>
> >
: Input : Input
type OptionalKeys<Input, Keys extends keyof Input> = Omit<Input, Keys> & { type OptionalKeys<Input, Keys extends keyof Input> = Omit<Input, Keys> & {
[Key in Keys]?: Input[Key] [Key in Keys]?: Input[Key]
} }
type KeysWithNullishValues<Input> = NonNullable< type KeysWithNullishValues<Input> = NonNullable<
Values<{ Values<{
[Key in keyof Input]: null extends Input[Key] [Key in keyof Input]: null extends Input[Key]
? Key ? Key
: undefined extends Input[Key] : undefined extends Input[Key]
? Key ? Key
: never : never
}> }>
> >
type Values<Input> = Input[keyof Input] type Values<Input> = Input[keyof Input]

2
packages/helpers/raise.ts
View File

@@ -1,5 +1,5 @@
import { toError } from "./to-error.js" import { toError } from "./to-error.js"
export function raise(error: unknown): never { export function raise(error: unknown): never {
throw toError(error) throw toError(error)
} }

10
packages/helpers/reject-after.ts
View File

@@ -1,10 +1,10 @@
import { setTimeout } from "node:timers/promises"
import { toError } from "./to-error.js" import { toError } from "./to-error.js"
import { setTimeout } from "node:timers/promises"
export async function rejectAfter( export async function rejectAfter(
timeMs: number, timeMs: number,
error: unknown = `rejected after ${timeMs}ms`, error: unknown = `rejected after ${timeMs}ms`,
): Promise<never> { ): Promise<never> {
await setTimeout(timeMs) await setTimeout(timeMs)
throw toError(error) throw toError(error)
} }

26
packages/helpers/retry-with-timeout.ts
View File

@@ -4,18 +4,18 @@ const maxTime = 500
const waitPeriod = 50 const waitPeriod = 50
export async function retryWithTimeout<T>( export async function retryWithTimeout<T>(
callback: () => Promise<T> | T, callback: () => Promise<T> | T,
): Promise<T> { ): Promise<T> {
const startTime = Date.now() const startTime = Date.now()
// eslint-disable-next-line no-constant-condition // eslint-disable-next-line no-constant-condition
while (true) { while (true) {
try { try {
return await callback() return await callback()
} catch (error) { } catch (error) {
if (Date.now() - startTime > maxTime) { if (Date.now() - startTime > maxTime) {
throw error throw error
} }
await setTimeout(waitPeriod) await setTimeout(waitPeriod)
} }
} }
} }

2
packages/helpers/to-error.ts
View File

@@ -1,3 +1,3 @@
export function toError(value: unknown) { export function toError(value: unknown) {
return value instanceof Error ? value : new Error(String(value)) return value instanceof Error ? value : new Error(String(value))
} }

2
packages/helpers/to-upper.ts
View File

@@ -1,4 +1,4 @@
/** A typesafe version of toUpperCase */ /** A typesafe version of toUpperCase */
export function toUpper<S extends string>(string: S) { export function toUpper<S extends string>(string: S) {
return string.toUpperCase() as Uppercase<S> return string.toUpperCase() as Uppercase<S>
} }

2
packages/helpers/tsconfig.json
View File

@@ -1,3 +1,3 @@
{ {
"extends": "@itsmapleleaf/configs/tsconfig.base" "extends": "../../tsconfig.base.json"
} }

4
packages/helpers/types.test.types.ts Normal file
View File

@@ -0,0 +1,4 @@
import { LooseOmit, LoosePick, typeEquals } from "./types.ts"
typeEquals<LoosePick<{ a: 1; b: 2 }, "a">, { a: 1 }>(true)
typeEquals<LooseOmit<{ a: 1; b: 2 }, "a">, { b: 2 }>(true)

26
packages/helpers/types.ts
View File

@@ -1,11 +1,21 @@
export type MaybePromise<T> = T | Promise<T> import { raise } from "./raise.ts"
export type ValueOf<Type> = Type extends ReadonlyArray<infer Value> export type MaybePromise<T> = T | PromiseLike<T>
? Value
: Type[keyof Type]
export type UnknownRecord = Record<PropertyKey, unknown> export type ValueOf<Type> = Type extends readonly (infer Value)[]
? Value
: Type[keyof Type]
export type LoosePick<Shape, Keys extends PropertyKey> = { export type LoosePick<Shape, Keys extends PropertyKey> = Simplify<{
[Key in Keys]: Shape extends Record<Key, infer Value> ? Value : never [Key in Extract<Keys, keyof Shape>]: Shape[Key]
} }>
export type LooseOmit<Shape, Keys extends PropertyKey> = Simplify<{
[Key in Exclude<keyof Shape, Keys>]: Shape[Key]
}>
export type Simplify<T> = { [Key in keyof T]: T[Key] } & NonNullable<unknown>
export const typeEquals = <A, B>(
_result: A extends B ? (B extends A ? true : false) : false,
) => raise("typeEquals() should not be called at runtime")

25
packages/helpers/wait-for.ts
View File

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

40
packages/helpers/with-logged-method-calls.ts
View File

@@ -1,24 +1,24 @@
import { inspect } from "node:util" import { inspect } from "node:util"
export function withLoggedMethodCalls<T extends object>(value: T) { export function withLoggedMethodCalls<T extends object>(value: T) {
return new Proxy(value as Record<string | symbol, unknown>, { return new Proxy(value as Record<string | symbol, unknown>, {
get(target, property) { get(target, property) {
const value = target[property] const value = target[property]
if (typeof value !== "function") { if (typeof value !== "function") {
return value return value
} }
return (...values: any[]) => { return (...values: unknown[]) => {
console.info( console.info(
`${String(property)}(${values `${String(property)}(${values
.map((value) => .map((value) =>
typeof value === "object" && value !== null typeof value === "object" && value !== null
? value.constructor.name ? value.constructor.name
: inspect(value, { colors: true }), : inspect(value, { colors: true }),
) )
.join(", ")})`, .join(", ")})`,
) )
return value.apply(target, values) return value.apply(target, values)
} }
}, },
}) as T }) as T
} }

1
packages/reacord/env.d.ts vendored Normal file
View File

@@ -0,0 +1 @@
/// <reference types="@total-typescript/ts-reset" />

177
packages/reacord/library/core/component-event.ts
View File

@@ -1,113 +1,102 @@
import type { ReactNode } from "react" import type { ReactNode } from "react"
import type { ReacordInstance } from "./instance" import type { ReacordInstance } from "./instance"
/** /** @category Component Event */
* @category Component Event export interface ComponentEvent {
*/ /**
export type ComponentEvent = { * The message associated with this event. For example: with a button click,
/** * this is the message that the button is on.
* The message associated with this event. *
* For example: with a button click, * @see https://discord.com/developers/docs/resources/channel#message-object
* this is the message that the button is on. */
* @see https://discord.com/developers/docs/resources/channel#message-object message: MessageInfo
*/
message: MessageInfo
/** /**
* The channel that this event occurred in. * The channel that this event occurred in.
* @see https://discord.com/developers/docs/resources/channel#channel-object *
*/ * @see https://discord.com/developers/docs/resources/channel#channel-object
channel: ChannelInfo */
channel: ChannelInfo
/** /**
* The user that triggered this event. * The user that triggered this event.
* @see https://discord.com/developers/docs/resources/user#user-object *
*/ * @see https://discord.com/developers/docs/resources/user#user-object
user: UserInfo */
user: UserInfo
/** /**
* The guild that this event occurred in. * The guild that this event occurred in.
* @see https://discord.com/developers/docs/resources/guild#guild-object *
*/ * @see https://discord.com/developers/docs/resources/guild#guild-object
guild?: GuildInfo */
guild?: GuildInfo
/** /** Create a new reply to this event. */
* Create a new reply to this event. reply(content?: ReactNode): ReacordInstance
*/
reply(content?: ReactNode): ReacordInstance
/** /**
* Create an ephemeral reply to this event, * Create an ephemeral reply to this event, shown only to the user who
* shown only to the user who triggered it. * triggered it.
*/ */
ephemeralReply(content?: ReactNode): ReacordInstance ephemeralReply(content?: ReactNode): ReacordInstance
} }
/** /** @category Component Event */
* @category Component Event export interface ChannelInfo {
*/ id: string
export type ChannelInfo = { name?: string
id: string topic?: string
name?: string nsfw?: boolean
topic?: string lastMessageId?: string
nsfw?: boolean ownerId?: string
lastMessageId?: string parentId?: string
ownerId?: string rateLimitPerUser?: number
parentId?: string
rateLimitPerUser?: number
} }
/** /** @category Component Event */
* @category Component Event export interface MessageInfo {
*/ id: string
export type MessageInfo = { channelId: string
id: string authorId: string
channelId: string member?: GuildMemberInfo
authorId: UserInfo content: string
member?: GuildMemberInfo timestamp: string
content: string editedTimestamp?: string
timestamp: string tts: boolean
editedTimestamp?: string mentionEveryone: boolean
tts: boolean /** The IDs of mentioned users */
mentionEveryone: boolean mentions: string[]
/** The IDs of mentioned users */
mentions: string[]
} }
/** /** @category Component Event */
* @category Component Event export interface GuildInfo {
*/ id: string
export type GuildInfo = { name: string
id: string member: GuildMemberInfo
name: string
member: GuildMemberInfo
} }
/** /** @category Component Event */
* @category Component Event export interface GuildMemberInfo {
*/ id: string
export type GuildMemberInfo = { nick?: string
id: string displayName: string
nick?: string avatarUrl?: string
displayName: string displayAvatarUrl: string
avatarUrl?: string roles: string[]
displayAvatarUrl: string color: number
roles: string[] joinedAt?: string
color: number premiumSince?: string
joinedAt?: string pending?: boolean
premiumSince?: string communicationDisabledUntil?: string
pending?: boolean
communicationDisabledUntil?: string
} }
/** /** @category Component Event */
* @category Component Event export interface UserInfo {
*/ id: string
export type UserInfo = { username: string
id: string discriminator: string
username: string tag: string
discriminator: string avatarUrl: string
tag: string accentColor?: number
avatarUrl: string
accentColor?: number
} }

34
packages/reacord/library/core/components/action-row.tsx
View File

@@ -1,22 +1,22 @@
import type { ReactNode } from "react" import type { ReactNode } from "react"
import React from "react"
import { ReacordElement } from "../../internal/element.js" import { ReacordElement } from "../../internal/element.js"
import type { MessageOptions } from "../../internal/message" import type { MessageOptions } from "../../internal/message"
import { Node } from "../../internal/node.js" import { Node } from "../../internal/node.js"
/** /**
* Props for an action row * Props for an action row
*
* @category Action Row * @category Action Row
*/ */
export type ActionRowProps = { export interface ActionRowProps {
children?: ReactNode children?: ReactNode
} }
/** /**
* An action row is a top-level container for message components. * An action row is a top-level container for message components.
* *
* You don't need to use this; Reacord automatically creates action rows for you. * You don't need to use this; Reacord automatically creates action rows for
* But this can be useful if you want a specific layout. * you. But this can be useful if you want a specific layout.
* *
* ```tsx * ```tsx
* // put buttons on two separate rows * // put buttons on two separate rows
@@ -30,18 +30,18 @@ export type ActionRowProps = {
* @see https://discord.com/developers/docs/interactions/message-components#action-rows * @see https://discord.com/developers/docs/interactions/message-components#action-rows
*/ */
export function ActionRow(props: ActionRowProps) { export function ActionRow(props: ActionRowProps) {
return ( return (
<ReacordElement props={props} createNode={() => new ActionRowNode(props)}> <ReacordElement props={props} createNode={() => new ActionRowNode(props)}>
{props.children} {props.children}
</ReacordElement> </ReacordElement>
) )
} }
class ActionRowNode extends Node<{}> { class ActionRowNode extends Node<ActionRowProps> {
override modifyMessageOptions(options: MessageOptions): void { override modifyMessageOptions(options: MessageOptions): void {
options.actionRows.push([]) options.actionRows.push([])
for (const child of this.children) { for (const child of this.children) {
child.modifyMessageOptions(options) child.modifyMessageOptions(options)
} }
} }
} }

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

@@ -2,23 +2,23 @@ import type { ReactNode } from "react"
/** /**
* Common props between button-like components * Common props between button-like components
*
* @category Button * @category Button
*/ */
export type ButtonSharedProps = { export interface ButtonSharedProps {
/** The text on the button. Rich formatting (markdown) is not supported here. */ /** The text on the button. Rich formatting (markdown) is not supported here. */
label?: ReactNode label?: ReactNode
/** When true, the button will be slightly faded, and cannot be clicked. */ /** When true, the button will be slightly faded, and cannot be clicked. */
disabled?: boolean disabled?: boolean
/** /**
* Renders an emoji to the left of the text. * Renders an emoji to the left of the text. Has to be a literal emoji
* Has to be a literal emoji character (e.g. 🍍), * character (e.g. 🍍), or an emoji code, like
* or an emoji code, like `<:plus_one:778531744860602388>`. * `<:plus_one:778531744860602388>`.
* *
* To get an emoji code, type your emoji in Discord chat * To get an emoji code, type your emoji in Discord chat with a backslash `\`
* with a backslash `\` in front. * in front. The bot has to be in the emoji's guild to use it.
* The bot has to be in the emoji's guild to use it. */
*/ emoji?: string
emoji?: string
} }

98
packages/reacord/library/core/components/button.tsx
View File

@@ -1,5 +1,4 @@
import { randomUUID } from "node:crypto" import { randomUUID } from "node:crypto"
import React from "react"
import { ReacordElement } from "../../internal/element.js" import { ReacordElement } from "../../internal/element.js"
import type { ComponentInteraction } from "../../internal/interaction" import type { ComponentInteraction } from "../../internal/interaction"
import type { MessageOptions } from "../../internal/message" import type { MessageOptions } from "../../internal/message"
@@ -8,70 +7,63 @@ import { Node } from "../../internal/node.js"
import type { ComponentEvent } from "../component-event" import type { ComponentEvent } from "../component-event"
import type { ButtonSharedProps } from "./button-shared-props" import type { ButtonSharedProps } from "./button-shared-props"
/** /** @category Button */
* @category Button
*/
export type ButtonProps = ButtonSharedProps & { export type ButtonProps = ButtonSharedProps & {
/** /**
* The style determines the color of the button and signals intent. * The style determines the color of the button and signals intent.
* @see https://discord.com/developers/docs/interactions/message-components#button-object-button-styles *
*/ * @see https://discord.com/developers/docs/interactions/message-components#button-object-button-styles
style?: "primary" | "secondary" | "success" | "danger" */
style?: "primary" | "secondary" | "success" | "danger"
/** /** Happens when a user clicks the button. */
* Happens when a user clicks the button. onClick: (event: ButtonClickEvent) => void
*/
onClick: (event: ButtonClickEvent) => void
} }
/** /** @category Button */
* @category Button
*/
export type ButtonClickEvent = ComponentEvent export type ButtonClickEvent = ComponentEvent
/** /** @category Button */
* @category Button
*/
export function Button(props: ButtonProps) { export function Button(props: ButtonProps) {
return ( return (
<ReacordElement props={props} createNode={() => new ButtonNode(props)}> <ReacordElement props={props} createNode={() => new ButtonNode(props)}>
<ReacordElement props={{}} createNode={() => new ButtonLabelNode({})}> <ReacordElement props={{}} createNode={() => new ButtonLabelNode({})}>
{props.label} {props.label}
</ReacordElement> </ReacordElement>
</ReacordElement> </ReacordElement>
) )
} }
class ButtonNode extends Node<ButtonProps> { class ButtonNode extends Node<ButtonProps> {
private customId = randomUUID() private customId = randomUUID()
// this has text children, but buttons themselves shouldn't yield text // this has text children, but buttons themselves shouldn't yield text
// eslint-disable-next-line class-methods-use-this // eslint-disable-next-line @typescript-eslint/class-literal-property-style
override get text() { override get text() {
return "" return ""
} }
override modifyMessageOptions(options: MessageOptions): void { override modifyMessageOptions(options: MessageOptions): void {
getNextActionRow(options).push({ getNextActionRow(options).push({
type: "button", type: "button",
customId: this.customId, customId: this.customId,
style: this.props.style ?? "secondary", style: this.props.style ?? "secondary",
disabled: this.props.disabled, disabled: this.props.disabled,
emoji: this.props.emoji, emoji: this.props.emoji,
label: this.children.findType(ButtonLabelNode)?.text, label: this.children.findType(ButtonLabelNode)?.text,
}) })
} }
override handleComponentInteraction(interaction: ComponentInteraction) { override handleComponentInteraction(interaction: ComponentInteraction) {
if ( if (
interaction.type === "button" && interaction.type === "button" &&
interaction.customId === this.customId interaction.customId === this.customId
) { ) {
this.props.onClick(interaction.event) this.props.onClick(interaction.event)
return true return true
} }
return false return false
} }
} }
class ButtonLabelNode extends Node<{}> {} class ButtonLabelNode extends Node<Record<string, never>> {}

49
packages/reacord/library/core/components/embed-author.tsx
View File

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

2
packages/reacord/library/core/components/embed-child.ts
View File

@@ -2,5 +2,5 @@ import { Node } from "../../internal/node.js"
import type { EmbedOptions } from "./embed-options" import type { EmbedOptions } from "./embed-options"
export abstract class EmbedChildNode<Props> extends Node<Props> { export abstract class EmbedChildNode<Props> extends Node<Props> {
abstract modifyEmbedOptions(options: EmbedOptions): void abstract modifyEmbedOptions(options: EmbedOptions): void
} }

59
packages/reacord/library/core/components/embed-field.tsx
View File

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

55
packages/reacord/library/core/components/embed-footer.tsx
View File

@@ -1,45 +1,40 @@
import type { ReactNode } from "react" import type { ReactNode } from "react"
import React from "react"
import { ReacordElement } from "../../internal/element.js" import { ReacordElement } from "../../internal/element.js"
import { Node } from "../../internal/node.js" import { Node } from "../../internal/node.js"
import { EmbedChildNode } from "./embed-child.js" import { EmbedChildNode } from "./embed-child.js"
import type { EmbedOptions } from "./embed-options" import type { EmbedOptions } from "./embed-options"
/** /** @category Embed */
* @category Embed export interface EmbedFooterProps {
*/ text?: ReactNode
export type EmbedFooterProps = { children?: ReactNode
text?: ReactNode iconUrl?: string
children?: ReactNode timestamp?: string | number | Date
iconUrl?: string
timestamp?: string | number | Date
} }
/** /** @category Embed */
* @category Embed
*/
export function EmbedFooter({ text, children, ...props }: EmbedFooterProps) { export function EmbedFooter({ text, children, ...props }: EmbedFooterProps) {
return ( return (
<ReacordElement props={props} createNode={() => new EmbedFooterNode(props)}> <ReacordElement props={props} createNode={() => new EmbedFooterNode(props)}>
<ReacordElement props={{}} createNode={() => new FooterTextNode({})}> <ReacordElement props={{}} createNode={() => new FooterTextNode({})}>
{text ?? children} {text ?? children}
</ReacordElement> </ReacordElement>
</ReacordElement> </ReacordElement>
) )
} }
class EmbedFooterNode extends EmbedChildNode< class EmbedFooterNode extends EmbedChildNode<
Omit<EmbedFooterProps, "text" | "children"> Omit<EmbedFooterProps, "text" | "children">
> { > {
override modifyEmbedOptions(options: EmbedOptions): void { override modifyEmbedOptions(options: EmbedOptions): void {
options.footer = { options.footer = {
text: this.children.findType(FooterTextNode)?.text ?? "", text: this.children.findType(FooterTextNode)?.text ?? "",
icon_url: this.props.iconUrl, icon_url: this.props.iconUrl,
} }
options.timestamp = this.props.timestamp options.timestamp = this.props.timestamp
? new Date(this.props.timestamp).toISOString() ? new Date(this.props.timestamp).toISOString()
: undefined : undefined
} }
} }
class FooterTextNode extends Node<{}> {} class FooterTextNode extends Node<Record<string, never>> {}

31
packages/reacord/library/core/components/embed-image.tsx
View File

@@ -1,29 +1,24 @@
import React from "react"
import { ReacordElement } from "../../internal/element.js" import { ReacordElement } from "../../internal/element.js"
import { EmbedChildNode } from "./embed-child.js" import { EmbedChildNode } from "./embed-child.js"
import type { EmbedOptions } from "./embed-options" import type { EmbedOptions } from "./embed-options"
/** /** @category Embed */
* @category Embed export interface EmbedImageProps {
*/ url: string
export type EmbedImageProps = {
url: string
} }
/** /** @category Embed */
* @category Embed
*/
export function EmbedImage(props: EmbedImageProps) { export function EmbedImage(props: EmbedImageProps) {
return ( return (
<ReacordElement <ReacordElement
props={props} props={props}
createNode={() => new EmbedImageNode(props)} createNode={() => new EmbedImageNode(props)}
/> />
) )
} }
class EmbedImageNode extends EmbedChildNode<EmbedImageProps> { class EmbedImageNode extends EmbedChildNode<EmbedImageProps> {
override modifyEmbedOptions(options: EmbedOptions): void { override modifyEmbedOptions(options: EmbedOptions): void {
options.image = { url: this.props.url } options.image = { url: this.props.url }
} }
} }

8
packages/reacord/library/core/components/embed-options.ts
View File

@@ -1,8 +1,8 @@
import type { Except, SnakeCasedPropertiesDeep } from "type-fest"
import type { EmbedProps } from "./embed" import type { EmbedProps } from "./embed"
import type { Except, SnakeCasedPropertiesDeep } from "type-fest"
export type EmbedOptions = SnakeCasedPropertiesDeep< export type EmbedOptions = SnakeCasedPropertiesDeep<
Except<EmbedProps, "timestamp" | "children"> & { Except<EmbedProps, "timestamp" | "children"> & {
timestamp?: string timestamp?: string
} }
> >

31
packages/reacord/library/core/components/embed-thumbnail.tsx
View File

@@ -1,29 +1,24 @@
import React from "react"
import { ReacordElement } from "../../internal/element.js" import { ReacordElement } from "../../internal/element.js"
import { EmbedChildNode } from "./embed-child.js" import { EmbedChildNode } from "./embed-child.js"
import type { EmbedOptions } from "./embed-options" import type { EmbedOptions } from "./embed-options"
/** /** @category Embed */
* @category Embed export interface EmbedThumbnailProps {
*/ url: string
export type EmbedThumbnailProps = {
url: string
} }
/** /** @category Embed */
* @category Embed
*/
export function EmbedThumbnail(props: EmbedThumbnailProps) { export function EmbedThumbnail(props: EmbedThumbnailProps) {
return ( return (
<ReacordElement <ReacordElement
props={props} props={props}
createNode={() => new EmbedThumbnailNode(props)} createNode={() => new EmbedThumbnailNode(props)}
/> />
) )
} }
class EmbedThumbnailNode extends EmbedChildNode<EmbedThumbnailProps> { class EmbedThumbnailNode extends EmbedChildNode<EmbedThumbnailProps> {
override modifyEmbedOptions(options: EmbedOptions): void { override modifyEmbedOptions(options: EmbedOptions): void {
options.thumbnail = { url: this.props.url } options.thumbnail = { url: this.props.url }
} }
} }

39
packages/reacord/library/core/components/embed-title.tsx
View File

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

70
packages/reacord/library/core/components/embed.tsx
View File

@@ -12,19 +12,19 @@ import type { EmbedOptions } from "./embed-options"
* @category Embed * @category Embed
* @see https://discord.com/developers/docs/resources/channel#embed-object * @see https://discord.com/developers/docs/resources/channel#embed-object
*/ */
export type EmbedProps = { export interface EmbedProps {
title?: string title?: string
description?: string description?: string
url?: string url?: string
color?: number color?: number
fields?: Array<{ name: string; value: string; inline?: boolean }> fields?: { name: string; value: string; inline?: boolean }[]
author?: { name: string; url?: string; iconUrl?: string } author?: { name: string; url?: string; iconUrl?: string }
thumbnail?: { url: string } thumbnail?: { url: string }
image?: { url: string } image?: { url: string }
video?: { url: string } video?: { url: string }
footer?: { text: string; iconUrl?: string } footer?: { text: string; iconUrl?: string }
timestamp?: string | number | Date timestamp?: string | number | Date
children?: React.ReactNode children?: React.ReactNode
} }
/** /**
@@ -32,31 +32,31 @@ export type EmbedProps = {
* @see https://discord.com/developers/docs/resources/channel#embed-object * @see https://discord.com/developers/docs/resources/channel#embed-object
*/ */
export function Embed(props: EmbedProps) { export function Embed(props: EmbedProps) {
return ( return (
<ReacordElement props={props} createNode={() => new EmbedNode(props)}> <ReacordElement props={props} createNode={() => new EmbedNode(props)}>
{props.children} {props.children}
</ReacordElement> </ReacordElement>
) )
} }
class EmbedNode extends Node<EmbedProps> { class EmbedNode extends Node<EmbedProps> {
override modifyMessageOptions(options: MessageOptions): void { override modifyMessageOptions(options: MessageOptions): void {
const embed: EmbedOptions = { const embed: EmbedOptions = {
...snakeCaseDeep(omit(this.props, ["children", "timestamp"])), ...snakeCaseDeep(omit(this.props, ["children", "timestamp"])),
timestamp: this.props.timestamp timestamp: this.props.timestamp
? new Date(this.props.timestamp).toISOString() ? new Date(this.props.timestamp).toISOString()
: undefined, : undefined,
} }
for (const child of this.children) { for (const child of this.children) {
if (child instanceof EmbedChildNode) { if (child instanceof EmbedChildNode) {
child.modifyEmbedOptions(embed) child.modifyEmbedOptions(embed)
} }
if (child instanceof TextNode) { if (child instanceof TextNode) {
embed.description = (embed.description || "") + child.props embed.description = (embed.description ?? "") + child.props
} }
} }
options.embeds.push(embed) options.embeds.push(embed)
} }
} }

51
packages/reacord/library/core/components/link.tsx
View File

@@ -1,43 +1,38 @@
import React from "react"
import { ReacordElement } from "../../internal/element.js" import { ReacordElement } from "../../internal/element.js"
import type { MessageOptions } from "../../internal/message" import type { MessageOptions } from "../../internal/message"
import { getNextActionRow } from "../../internal/message" import { getNextActionRow } from "../../internal/message"
import { Node } from "../../internal/node.js" import { Node } from "../../internal/node.js"
import type { ButtonSharedProps } from "./button-shared-props" import type { ButtonSharedProps } from "./button-shared-props"
/** /** @category Link */
* @category Link
*/
export type LinkProps = ButtonSharedProps & { export type LinkProps = ButtonSharedProps & {
/** The URL the link should lead to */ /** The URL the link should lead to */
url: string url: string
/** The link text */ /** The link text */
children?: string children?: string
} }
/** /** @category Link */
* @category Link
*/
export function Link({ label, children, ...props }: LinkProps) { export function Link({ label, children, ...props }: LinkProps) {
return ( return (
<ReacordElement props={props} createNode={() => new LinkNode(props)}> <ReacordElement props={props} createNode={() => new LinkNode(props)}>
<ReacordElement props={{}} createNode={() => new LinkTextNode({})}> <ReacordElement props={{}} createNode={() => new LinkTextNode({})}>
{label || children} {label ?? children}
</ReacordElement> </ReacordElement>
</ReacordElement> </ReacordElement>
) )
} }
class LinkNode extends Node<Omit<LinkProps, "label" | "children">> { class LinkNode extends Node<Omit<LinkProps, "label" | "children">> {
override modifyMessageOptions(options: MessageOptions): void { override modifyMessageOptions(options: MessageOptions): void {
getNextActionRow(options).push({ getNextActionRow(options).push({
type: "link", type: "link",
disabled: this.props.disabled, disabled: this.props.disabled,
emoji: this.props.emoji, emoji: this.props.emoji,
label: this.children.findType(LinkTextNode)?.text, label: this.children.findType(LinkTextNode)?.text,
url: this.props.url, url: this.props.url,
}) })
} }
} }
class LinkTextNode extends Node<{}> {} class LinkTextNode extends Node<Record<string, never>> {}

22
packages/reacord/library/core/components/option-node.ts
View File

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

96
packages/reacord/library/core/components/option.tsx
View File

@@ -1,62 +1,56 @@
import type { ReactNode } from "react" import type { ReactNode } from "react"
import React from "react"
import { ReacordElement } from "../../internal/element" import { ReacordElement } from "../../internal/element"
import { import {
OptionDescriptionNode, OptionDescriptionNode,
OptionLabelNode, OptionLabelNode,
OptionNode, OptionNode,
} from "./option-node" } from "./option-node"
/** /** @category Select */
* @category Select export interface OptionProps {
*/ /** The internal value of this option */
export type OptionProps = { value: string
/** The internal value of this option */ /** The text shown to the user. This takes priority over `children` */
value: string label?: ReactNode
/** The text shown to the user. This takes priority over `children` */ /** The text shown to the user */
label?: ReactNode children?: ReactNode
/** The text shown to the user */ /** Description for the option, shown to the user */
children?: ReactNode description?: ReactNode
/** Description for the option, shown to the user */
description?: ReactNode
/** /**
* Renders an emoji to the left of the text. * Renders an emoji to the left of the text.
* *
* Has to be a literal emoji character (e.g. 🍍), * Has to be a literal emoji character (e.g. 🍍), or an emoji code, like
* or an emoji code, like `<:plus_one:778531744860602388>`. * `<:plus_one:778531744860602388>`.
* *
* To get an emoji code, type your emoji in Discord chat * To get an emoji code, type your emoji in Discord chat with a backslash `\`
* with a backslash `\` in front. * in front. The bot has to be in the emoji's guild to use it.
* The bot has to be in the emoji's guild to use it. */
*/ emoji?: string
emoji?: string
} }
/** /** @category Select */
* @category Select
*/
export function Option({ export function Option({
label, label,
children, children,
description, description,
...props ...props
}: OptionProps) { }: OptionProps) {
return ( return (
<ReacordElement props={props} createNode={() => new OptionNode(props)}> <ReacordElement props={props} createNode={() => new OptionNode(props)}>
{(label !== undefined || children !== undefined) && ( {(label !== undefined || children !== undefined) && (
<ReacordElement props={{}} createNode={() => new OptionLabelNode({})}> <ReacordElement props={{}} createNode={() => new OptionLabelNode({})}>
{label || children} {label ?? children}
</ReacordElement> </ReacordElement>
)} )}
{description !== undefined && ( {description !== undefined && (
<ReacordElement <ReacordElement
props={{}} props={{}}
createNode={() => new OptionDescriptionNode({})} createNode={() => new OptionDescriptionNode({})}
> >
{description} {description}
</ReacordElement> </ReacordElement>
)} )}
</ReacordElement> </ReacordElement>
) )
} }

215
packages/reacord/library/core/components/select.tsx
View File

@@ -1,153 +1,150 @@
import { isInstanceOf } from "@reacord/helpers/is-instance-of" import { isInstanceOf } from "@reacord/helpers/is-instance-of"
import { randomUUID } from "node:crypto" import { randomUUID } from "node:crypto"
import type { ReactNode } from "react" import type { ReactNode } from "react"
import React from "react"
import { ReacordElement } from "../../internal/element.js" import { ReacordElement } from "../../internal/element.js"
import type { ComponentInteraction } from "../../internal/interaction" import type { ComponentInteraction } from "../../internal/interaction"
import type { import type {
ActionRow, ActionRow,
ActionRowItem, ActionRowItem,
MessageOptions, MessageOptions,
} from "../../internal/message" } from "../../internal/message"
import { Node } from "../../internal/node.js" import { Node } from "../../internal/node.js"
import type { ComponentEvent } from "../component-event" import type { ComponentEvent } from "../component-event"
import { OptionNode } from "./option-node" import { OptionNode } from "./option-node"
/** /** @category Select */
* @category Select export interface SelectProps {
*/ children?: ReactNode
export type SelectProps = { /** Sets the currently selected value */
children?: ReactNode value?: string
/** Sets the currently selected value */
value?: string
/** Sets the currently selected values, for use with `multiple` */ /** Sets the currently selected values, for use with `multiple` */
values?: string[] values?: string[]
/** The text shown when no value is selected */ /** The text shown when no value is selected */
placeholder?: string placeholder?: string
/** Set to true to allow multiple selected values */ /** Set to true to allow multiple selected values */
multiple?: boolean multiple?: boolean
/** /**
* With `multiple`, the minimum number of values that can be selected. * With `multiple`, the minimum number of values that can be selected. When
* When `multiple` is false or not defined, this is always 1. * `multiple` is false or not defined, this is always 1.
* *
* This only limits the number of values that can be received by the user. * 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. * This does not limit the number of values that can be displayed by you.
*/ */
minValues?: number minValues?: number
/** /**
* With `multiple`, the maximum number of values that can be selected. * With `multiple`, the maximum number of values that can be selected. When
* When `multiple` is false or not defined, this is always 1. * `multiple` is false or not defined, this is always 1.
* *
* This only limits the number of values that can be received by the user. * 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. * This does not limit the number of values that can be displayed by you.
*/ */
maxValues?: number maxValues?: number
/** When true, the select will be slightly faded, and cannot be interacted with. */ /**
disabled?: boolean * When true, the select will be slightly faded, and cannot be interacted
* with.
*/
disabled?: boolean
/** /**
* Called when the user inputs a selection. * Called when the user inputs a selection. Receives the entire select change
* Receives the entire select change event, * event, which can be used to create new replies, etc.
* which can be used to create new replies, etc. */
*/ onChange?: (event: SelectChangeEvent) => void
onChange?: (event: SelectChangeEvent) => void
/** /**
* Convenience shorthand for `onChange`, which receives the first selected value. * Convenience shorthand for `onChange`, which receives the first selected
*/ * value.
onChangeValue?: (value: string, event: SelectChangeEvent) => void */
onChangeValue?: (value: string, event: SelectChangeEvent) => void
/** /** Convenience shorthand for `onChange`, which receives all selected values. */
* Convenience shorthand for `onChange`, which receives all selected values. onChangeMultiple?: (values: string[], event: SelectChangeEvent) => void
*/
onChangeMultiple?: (values: string[], event: SelectChangeEvent) => void
} }
/** /** @category Select */
* @category Select
*/
export type SelectChangeEvent = ComponentEvent & { export type SelectChangeEvent = ComponentEvent & {
values: string[] values: string[]
} }
/** /**
* See [the select menu guide](/guides/select-menu) for a usage example. * See [the select menu guide](/guides/select-menu) for a usage example.
*
* @category Select * @category Select
*/ */
export function Select(props: SelectProps) { export function Select(props: SelectProps) {
return ( return (
<ReacordElement props={props} createNode={() => new SelectNode(props)}> <ReacordElement props={props} createNode={() => new SelectNode(props)}>
{props.children} {props.children}
</ReacordElement> </ReacordElement>
) )
} }
class SelectNode extends Node<SelectProps> { class SelectNode extends Node<SelectProps> {
readonly customId = randomUUID() readonly customId = randomUUID()
override modifyMessageOptions(message: MessageOptions): void { override modifyMessageOptions(message: MessageOptions): void {
const actionRow: ActionRow = [] const actionRow: ActionRow = []
message.actionRows.push(actionRow) message.actionRows.push(actionRow)
const options = [...this.children] const options = [...this.children]
.filter(isInstanceOf(OptionNode)) .filter(isInstanceOf(OptionNode))
.map((node) => node.options) .map((node) => node.options)
const { const {
multiple, multiple,
value, value,
values, values,
minValues = 0, minValues = 0,
maxValues = 25, maxValues = 25,
children, children,
onChange, onChange,
onChangeValue, onChangeValue,
onChangeMultiple, onChangeMultiple,
...props ...props
} = this.props } = this.props
const item: ActionRowItem = { const item: ActionRowItem = {
...props, ...props,
type: "select", type: "select",
customId: this.customId, customId: this.customId,
options, options,
values: [], values: [],
} }
if (multiple) { if (multiple) {
item.minValues = minValues item.minValues = minValues
item.maxValues = maxValues item.maxValues = maxValues
if (values) item.values = values if (values) item.values = values
} }
if (!multiple && value != undefined) { if (!multiple && value != undefined) {
item.values = [value] item.values = [value]
} }
actionRow.push(item) actionRow.push(item)
} }
override handleComponentInteraction( override handleComponentInteraction(
interaction: ComponentInteraction, interaction: ComponentInteraction,
): boolean { ): boolean {
const isSelectInteraction = const isSelectInteraction =
interaction.type === "select" && interaction.type === "select" &&
interaction.customId === this.customId && interaction.customId === this.customId &&
!this.props.disabled !this.props.disabled
if (!isSelectInteraction) return false if (!isSelectInteraction) return false
this.props.onChange?.(interaction.event) this.props.onChange?.(interaction.event)
this.props.onChangeMultiple?.(interaction.event.values, interaction.event) this.props.onChangeMultiple?.(interaction.event.values, interaction.event)
if (interaction.event.values[0]) { if (interaction.event.values[0]) {
this.props.onChangeValue?.(interaction.event.values[0], interaction.event) this.props.onChangeValue?.(interaction.event.values[0], interaction.event)
} }
return true return true
} }
} }

12
packages/reacord/library/core/instance-context.tsx
View File

@@ -1,6 +1,6 @@
import { raise } from "@reacord/helpers/raise" import type { ReacordInstance } from "./instance.js"
import { raise } from "@reacord/helpers/raise.js"
import * as React from "react" import * as React from "react"
import type { ReacordInstance } from "./instance"
const Context = React.createContext<ReacordInstance | undefined>(undefined) const Context = React.createContext<ReacordInstance | undefined>(undefined)
@@ -13,8 +13,8 @@ export const InstanceProvider = Context.Provider
* @see https://reacord.mapleleaf.dev/guides/use-instance * @see https://reacord.mapleleaf.dev/guides/use-instance
*/ */
export function useInstance(): ReacordInstance { export function useInstance(): ReacordInstance {
return ( return (
React.useContext(Context) ?? React.useContext(Context) ??
raise("Could not find instance, was this component rendered via Reacord?") raise("Could not find instance, was this component rendered via Reacord?")
) )
} }

21
packages/reacord/library/core/instance.ts
View File

@@ -2,18 +2,19 @@ import type { ReactNode } from "react"
/** /**
* Represents an interactive message, which can later be replaced or deleted. * Represents an interactive message, which can later be replaced or deleted.
*
* @category Core * @category Core
*/ */
export type ReacordInstance = { export interface ReacordInstance {
/** Render some JSX to this instance (edits the message) */ /** Render some JSX to this instance (edits the message) */
render: (content: ReactNode) => void render: (content: ReactNode) => void
/** Remove this message */ /** Remove this message */
destroy: () => void destroy: () => void
/** /**
* Same as destroy, but keeps the message and disables the components on it. * Same as destroy, but keeps the message and disables the components on it.
* This prevents it from listening to user interactions. * This prevents it from listening to user interactions.
*/ */
deactivate: () => void deactivate: () => void
} }

665
packages/reacord/library/core/reacord-discord-js.ts
View File

@@ -1,4 +1,4 @@
/* eslint-disable class-methods-use-this */ import { safeJsonStringify } from "@reacord/helpers/json"
import { pick } from "@reacord/helpers/pick" import { pick } from "@reacord/helpers/pick"
import { pruneNullishValues } from "@reacord/helpers/prune-nullish-values" import { pruneNullishValues } from "@reacord/helpers/prune-nullish-values"
import { raise } from "@reacord/helpers/raise" import { raise } from "@reacord/helpers/raise"
@@ -7,18 +7,18 @@ import type { ReactNode } from "react"
import type { Except } from "type-fest" import type { Except } from "type-fest"
import type { ComponentInteraction } from "../internal/interaction" import type { ComponentInteraction } from "../internal/interaction"
import type { import type {
Message, Message,
MessageButtonOptions, MessageButtonOptions,
MessageOptions, MessageOptions,
} from "../internal/message" } from "../internal/message"
import { ChannelMessageRenderer } from "../internal/renderers/channel-message-renderer" import { ChannelMessageRenderer } from "../internal/renderers/channel-message-renderer"
import { InteractionReplyRenderer } from "../internal/renderers/interaction-reply-renderer" import { InteractionReplyRenderer } from "../internal/renderers/interaction-reply-renderer"
import type { import type {
ChannelInfo, ChannelInfo,
GuildInfo, GuildInfo,
GuildMemberInfo, GuildMemberInfo,
MessageInfo, MessageInfo,
UserInfo, UserInfo,
} from "./component-event" } from "./component-event"
import type { ReacordInstance } from "./instance" import type { ReacordInstance } from "./instance"
import type { ReacordConfig } from "./reacord" import type { ReacordConfig } from "./reacord"
@@ -26,364 +26,377 @@ import { Reacord } from "./reacord"
/** /**
* The Reacord adapter for Discord.js. * The Reacord adapter for Discord.js.
*
* @category Core * @category Core
*/ */
export class ReacordDiscordJs extends Reacord { export class ReacordDiscordJs extends Reacord {
constructor(private client: Discord.Client, config: ReacordConfig = {}) { constructor(
super(config) private client: Discord.Client,
config: ReacordConfig = {},
) {
super(config)
client.on("interactionCreate", (interaction) => { client.on("interactionCreate", (interaction) => {
if (interaction.isButton() || interaction.isSelectMenu()) { if (interaction.isButton() || interaction.isSelectMenu()) {
this.handleComponentInteraction( this.handleComponentInteraction(
this.createReacordComponentInteraction(interaction), this.createReacordComponentInteraction(interaction),
) )
} }
}) })
} }
/** /**
* Sends a message to a channel. * Sends a message to a channel.
* @see https://reacord.mapleleaf.dev/guides/sending-messages *
*/ * @see https://reacord.mapleleaf.dev/guides/sending-messages
override send( */
channelId: string, override send(
initialContent?: React.ReactNode, channelId: string,
): ReacordInstance { initialContent?: React.ReactNode,
return this.createInstance( ): ReacordInstance {
this.createChannelRenderer(channelId), return this.createInstance(
initialContent, this.createChannelRenderer(channelId),
) initialContent,
} )
}
/** /**
* Sends a message as a reply to a command interaction. * Sends a message as a reply to a command interaction.
* @see https://reacord.mapleleaf.dev/guides/sending-messages *
*/ * @see https://reacord.mapleleaf.dev/guides/sending-messages
override reply( */
interaction: Discord.CommandInteraction, override reply(
initialContent?: React.ReactNode, interaction: Discord.CommandInteraction,
): ReacordInstance { initialContent?: React.ReactNode,
return this.createInstance( ): ReacordInstance {
this.createInteractionReplyRenderer(interaction), return this.createInstance(
initialContent, this.createInteractionReplyRenderer(interaction),
) initialContent,
} )
}
/** /**
* Sends an ephemeral message as a reply to a command interaction. * Sends an ephemeral message as a reply to a command interaction.
* @see https://reacord.mapleleaf.dev/guides/sending-messages *
*/ * @see https://reacord.mapleleaf.dev/guides/sending-messages
override ephemeralReply( */
interaction: Discord.CommandInteraction, override ephemeralReply(
initialContent?: React.ReactNode, interaction: Discord.CommandInteraction,
): ReacordInstance { initialContent?: React.ReactNode,
return this.createInstance( ): ReacordInstance {
this.createEphemeralInteractionReplyRenderer(interaction), return this.createInstance(
initialContent, this.createEphemeralInteractionReplyRenderer(interaction),
) initialContent,
} )
}
private createChannelRenderer(channelId: string) { private createChannelRenderer(channelId: string) {
return new ChannelMessageRenderer({ return new ChannelMessageRenderer({
send: async (options) => { send: async (options) => {
const channel = const channel =
this.client.channels.cache.get(channelId) ?? this.client.channels.cache.get(channelId) ??
(await this.client.channels.fetch(channelId)) ?? (await this.client.channels.fetch(channelId)) ??
raise(`Channel ${channelId} not found`) raise(`Channel ${channelId} not found`)
if (!channel.isTextBased()) { if (!channel.isTextBased()) {
raise(`Channel ${channelId} is not a text channel`) raise(`Channel ${channelId} is not a text channel`)
} }
const message = await channel.send(getDiscordMessageOptions(options)) const message = await channel.send(getDiscordMessageOptions(options))
return createReacordMessage(message) return createReacordMessage(message)
}, },
}) })
} }
private createInteractionReplyRenderer( private createInteractionReplyRenderer(
interaction: interaction:
| Discord.CommandInteraction | Discord.CommandInteraction
| Discord.MessageComponentInteraction, | Discord.MessageComponentInteraction,
) { ) {
return new InteractionReplyRenderer({ return new InteractionReplyRenderer({
type: "command", type: "command",
id: interaction.id, id: interaction.id,
reply: async (options) => { reply: async (options) => {
const message = await interaction.reply({ const message = await interaction.reply({
...getDiscordMessageOptions(options), ...getDiscordMessageOptions(options),
fetchReply: true, fetchReply: true,
}) })
return createReacordMessage(message as Discord.Message) return createReacordMessage(message)
}, },
followUp: async (options) => { followUp: async (options) => {
const message = await interaction.followUp({ const message = await interaction.followUp({
...getDiscordMessageOptions(options), ...getDiscordMessageOptions(options),
fetchReply: true, fetchReply: true,
}) })
return createReacordMessage(message as Discord.Message) return createReacordMessage(message)
}, },
}) })
} }
private createEphemeralInteractionReplyRenderer( private createEphemeralInteractionReplyRenderer(
interaction: interaction:
| Discord.CommandInteraction | Discord.CommandInteraction
| Discord.MessageComponentInteraction, | Discord.MessageComponentInteraction,
) { ) {
return new InteractionReplyRenderer({ return new InteractionReplyRenderer({
type: "command", type: "command",
id: interaction.id, id: interaction.id,
reply: async (options) => { reply: async (options) => {
await interaction.reply({ await interaction.reply({
...getDiscordMessageOptions(options), ...getDiscordMessageOptions(options),
ephemeral: true, ephemeral: true,
}) })
return createEphemeralReacordMessage() return createEphemeralReacordMessage()
}, },
followUp: async (options) => { followUp: async (options) => {
await interaction.followUp({ await interaction.followUp({
...getDiscordMessageOptions(options), ...getDiscordMessageOptions(options),
ephemeral: true, ephemeral: true,
}) })
return createEphemeralReacordMessage() return createEphemeralReacordMessage()
}, },
}) })
} }
private createReacordComponentInteraction( private createReacordComponentInteraction(
interaction: Discord.MessageComponentInteraction, interaction: Discord.MessageComponentInteraction,
): ComponentInteraction { ): ComponentInteraction {
// todo please dear god clean this up // todo please dear god clean this up
const channel: ChannelInfo = interaction.channel const channel: ChannelInfo = interaction.channel
? { ? {
...pruneNullishValues( ...pruneNullishValues(
pick(interaction.channel, [ pick(interaction.channel, [
"topic", "topic",
"nsfw", "nsfw",
"lastMessageId", "lastMessageId",
"ownerId", "ownerId",
"parentId", "parentId",
"rateLimitPerUser", "rateLimitPerUser",
]), ]),
), ),
id: interaction.channelId, id: interaction.channelId,
} }
: raise("Non-channel interactions are not supported") : raise("Non-channel interactions are not supported")
const message: MessageInfo = const message: MessageInfo =
interaction.message instanceof Discord.Message interaction.message instanceof Discord.Message
? { ? {
...pick(interaction.message, [ ...pick(interaction.message, [
"id", "id",
"channelId", "channelId",
"authorId", "authorId",
"content", "content",
"tts", "tts",
"mentionEveryone", "mentionEveryone",
]), ]),
timestamp: new Date( timestamp: new Date(
interaction.message.createdTimestamp, interaction.message.createdTimestamp,
).toISOString(), ).toISOString(),
editedTimestamp: interaction.message.editedTimestamp editedTimestamp: interaction.message.editedTimestamp
? new Date(interaction.message.editedTimestamp).toISOString() ? new Date(interaction.message.editedTimestamp).toISOString()
: undefined, : undefined,
mentions: interaction.message.mentions.users.map((u) => u.id), mentions: interaction.message.mentions.users.map((u) => u.id),
} authorId: interaction.message.author.id,
: raise("Message not found") mentionEveryone: interaction.message.mentions.everyone,
}
: raise("Message not found")
const member: GuildMemberInfo | undefined = const member: GuildMemberInfo | undefined =
interaction.member instanceof Discord.GuildMember interaction.member instanceof Discord.GuildMember
? { ? {
...pruneNullishValues( ...pruneNullishValues(
pick(interaction.member, [ pick(interaction.member, [
"id", "id",
"nick", "nick",
"displayName", "displayName",
"avatarUrl", "avatarUrl",
"displayAvatarUrl", "displayAvatarUrl",
"color", "color",
"pending", "pending",
]), ]),
), ),
displayName: interaction.member.displayName, displayName: interaction.member.displayName,
roles: interaction.member.roles.cache.map((role) => role.id), roles: interaction.member.roles.cache.map((role) => role.id),
joinedAt: interaction.member.joinedAt?.toISOString(), joinedAt: interaction.member.joinedAt?.toISOString(),
premiumSince: interaction.member.premiumSince?.toISOString(), premiumSince: interaction.member.premiumSince?.toISOString(),
communicationDisabledUntil: communicationDisabledUntil:
interaction.member.communicationDisabledUntil?.toISOString(), interaction.member.communicationDisabledUntil?.toISOString(),
} color: interaction.member.displayColor,
: undefined displayAvatarUrl: interaction.member.displayAvatarURL(),
}
: undefined
const guild: GuildInfo | undefined = interaction.guild const guild: GuildInfo | undefined = interaction.guild
? { ? {
...pruneNullishValues(pick(interaction.guild, ["id", "name"])), ...pruneNullishValues(pick(interaction.guild, ["id", "name"])),
member: member ?? raise("unexpected: member is undefined"), member: member ?? raise("unexpected: member is undefined"),
} }
: undefined : undefined
const user: UserInfo = { const user: UserInfo = {
...pruneNullishValues( ...pruneNullishValues(
pick(interaction.user, ["id", "username", "discriminator", "tag"]), pick(interaction.user, ["id", "username", "discriminator", "tag"]),
), ),
avatarUrl: interaction.user.avatarURL()!, avatarUrl: interaction.user.avatarURL()!,
accentColor: interaction.user.accentColor ?? undefined, accentColor: interaction.user.accentColor ?? undefined,
} }
const baseProps: Except<ComponentInteraction, "type"> = { const baseProps: Except<ComponentInteraction, "type"> = {
id: interaction.id, id: interaction.id,
customId: interaction.customId, customId: interaction.customId,
update: async (options: MessageOptions) => { update: async (options: MessageOptions) => {
await interaction.update(getDiscordMessageOptions(options)) await interaction.update(getDiscordMessageOptions(options))
}, },
deferUpdate: async () => { deferUpdate: async () => {
if (interaction.replied || interaction.deferred) return if (interaction.replied || interaction.deferred) return
await interaction.deferUpdate() await interaction.deferUpdate()
}, },
reply: async (options) => { reply: async (options) => {
const message = await interaction.reply({ const message = await interaction.reply({
...getDiscordMessageOptions(options), ...getDiscordMessageOptions(options),
fetchReply: true, fetchReply: true,
}) })
return createReacordMessage(message as Discord.Message) return createReacordMessage(message)
}, },
followUp: async (options) => { followUp: async (options) => {
const message = await interaction.followUp({ const message = await interaction.followUp({
...getDiscordMessageOptions(options), ...getDiscordMessageOptions(options),
fetchReply: true, fetchReply: true,
}) })
return createReacordMessage(message as Discord.Message) return createReacordMessage(message)
}, },
event: { event: {
channel, channel,
message, message,
user, user,
guild, guild,
reply: (content?: ReactNode) => reply: (content?: ReactNode) =>
this.createInstance( this.createInstance(
this.createInteractionReplyRenderer(interaction), this.createInteractionReplyRenderer(interaction),
content, content,
), ),
ephemeralReply: (content: ReactNode) => ephemeralReply: (content: ReactNode) =>
this.createInstance( this.createInstance(
this.createEphemeralInteractionReplyRenderer(interaction), this.createEphemeralInteractionReplyRenderer(interaction),
content, content,
), ),
}, },
} }
if (interaction.isButton()) { if (interaction.isButton()) {
return { return {
...baseProps, ...baseProps,
type: "button", type: "button",
} }
} }
if (interaction.isSelectMenu()) { if (interaction.isSelectMenu()) {
return { return {
...baseProps, ...baseProps,
type: "select", type: "select",
event: { event: {
...baseProps.event, ...baseProps.event,
values: interaction.values, values: interaction.values,
}, },
} }
} }
raise(`Unsupported component interaction type: ${interaction.type}`) raise(`Unsupported component interaction type: ${interaction.type}`)
} }
} }
function createReacordMessage(message: Discord.Message): Message { function createReacordMessage(message: Discord.Message): Message {
return { return {
edit: async (options) => { edit: async (options) => {
await message.edit(getDiscordMessageOptions(options)) await message.edit(getDiscordMessageOptions(options))
}, },
delete: async () => { delete: async () => {
await message.delete() await message.delete()
}, },
} }
} }
function createEphemeralReacordMessage(): Message { function createEphemeralReacordMessage(): Message {
return { return {
edit: () => { edit: () => {
console.warn("Ephemeral messages can't be edited") console.warn("Ephemeral messages can't be edited")
return Promise.resolve() return Promise.resolve()
}, },
delete: () => { delete: () => {
console.warn("Ephemeral messages can't be deleted") console.warn("Ephemeral messages can't be deleted")
return Promise.resolve() return Promise.resolve()
}, },
} }
} }
function convertButtonStyleToEnum(style: MessageButtonOptions["style"]) { function convertButtonStyleToEnum(style: MessageButtonOptions["style"]) {
const styleMap = { const styleMap = {
primary: Discord.ButtonStyle.Primary, primary: Discord.ButtonStyle.Primary,
secondary: Discord.ButtonStyle.Secondary, secondary: Discord.ButtonStyle.Secondary,
success: Discord.ButtonStyle.Success, success: Discord.ButtonStyle.Success,
danger: Discord.ButtonStyle.Danger, danger: Discord.ButtonStyle.Danger,
} as const } as const
return styleMap[style ?? "secondary"] return styleMap[style ?? "secondary"]
} }
// TODO: this could be a part of the core library, // TODO: this could be a part of the core library,
// and also handle some edge cases, e.g. empty messages // and also handle some edge cases, e.g. empty messages
function getDiscordMessageOptions(reacordOptions: MessageOptions) { function getDiscordMessageOptions(reacordOptions: MessageOptions) {
const options = { const options = {
// eslint-disable-next-line unicorn/no-null content: reacordOptions.content || undefined,
content: reacordOptions.content || null, embeds: reacordOptions.embeds,
embeds: reacordOptions.embeds, components: reacordOptions.actionRows.map((row) => ({
components: reacordOptions.actionRows.map((row) => ({ type: Discord.ComponentType.ActionRow,
type: Discord.ComponentType.ActionRow, components: row.map(
components: row.map( (component): Discord.MessageActionRowComponentData => {
(component): Discord.MessageActionRowComponentData => { if (component.type === "button") {
if (component.type === "button") { return {
return { type: Discord.ComponentType.Button,
type: Discord.ComponentType.Button, customId: component.customId,
customId: component.customId, label: component.label ?? "",
label: component.label ?? "", style: convertButtonStyleToEnum(component.style),
style: convertButtonStyleToEnum(component.style), disabled: component.disabled,
disabled: component.disabled, emoji: component.emoji,
emoji: component.emoji, }
} }
}
if (component.type === "link") { if (component.type === "link") {
return { return {
type: Discord.ComponentType.Button, type: Discord.ComponentType.Button,
url: component.url, url: component.url,
label: component.label ?? "", label: component.label ?? "",
style: Discord.ButtonStyle.Link, style: Discord.ButtonStyle.Link,
disabled: component.disabled, disabled: component.disabled,
emoji: component.emoji, emoji: component.emoji,
} }
} }
if (component.type === "select") { if (component.type === "select") {
return { return {
...component, ...component,
type: Discord.ComponentType.SelectMenu, type: Discord.ComponentType.SelectMenu,
options: component.options.map((option) => ({ options: component.options.map((option) => ({
...option, ...option,
default: component.values?.includes(option.value), default: component.values?.includes(option.value),
})), })),
} }
} }
raise(`Unsupported component type: ${(component as any).type}`) component satisfies never
}, throw new Error(
), `Invalid component type ${safeJsonStringify(component)}}`,
})), )
} },
),
})),
}
if (!options.content && !options.embeds?.length) { if (!options.content && !options.embeds?.length) {
options.content = "_ _" options.content = "_ _"
} }
return options return options
} }

136
packages/reacord/library/core/reacord.tsx
View File

@@ -1,91 +1,85 @@
import type { ReactNode } from "react" import type { ReactNode } from "react"
import React from "react" import type { ComponentInteraction } from "../internal/interaction.js"
import type { ComponentInteraction } from "../internal/interaction"
import { reconciler } from "../internal/reconciler.js" import { reconciler } from "../internal/reconciler.js"
import type { Renderer } from "../internal/renderers/renderer" import type { Renderer } from "../internal/renderers/renderer.js"
import type { ReacordInstance } from "./instance" import { InstanceProvider } from "./instance-context.js"
import { InstanceProvider } from "./instance-context" import type { ReacordInstance } from "./instance.js"
/** /** @category Core */
* @category Core export interface ReacordConfig {
*/ /**
export type ReacordConfig = { * The max number of active instances. When this limit is exceeded, the oldest
/** * instances will be disabled.
* The max number of active instances. */
* When this limit is exceeded, the oldest instances will be disabled. maxInstances?: number
*/
maxInstances?: number
} }
/** /**
* The main Reacord class that other Reacord adapters should extend. * The main Reacord class that other Reacord adapters should extend. Only use
* Only use this directly if you're making [a custom adapter](/guides/custom-adapters). * this directly if you're making [a custom adapter](/guides/custom-adapters).
*/ */
export abstract class Reacord { export abstract class Reacord {
private renderers: Renderer[] = [] private renderers: Renderer[] = []
constructor(private readonly config: ReacordConfig = {}) {} constructor(private readonly config: ReacordConfig = {}) {}
abstract send(...args: unknown[]): ReacordInstance abstract send(...args: unknown[]): ReacordInstance
abstract reply(...args: unknown[]): ReacordInstance abstract reply(...args: unknown[]): ReacordInstance
abstract ephemeralReply(...args: unknown[]): ReacordInstance abstract ephemeralReply(...args: unknown[]): ReacordInstance
protected handleComponentInteraction(interaction: ComponentInteraction) { protected handleComponentInteraction(interaction: ComponentInteraction) {
for (const renderer of this.renderers) { for (const renderer of this.renderers) {
if (renderer.handleComponentInteraction(interaction)) return if (renderer.handleComponentInteraction(interaction)) return
} }
} }
private get maxInstances() { private get maxInstances() {
return this.config.maxInstances ?? 50 return this.config.maxInstances ?? 50
} }
protected createInstance(renderer: Renderer, initialContent?: ReactNode) { protected createInstance(renderer: Renderer, initialContent?: ReactNode) {
if (this.renderers.length > this.maxInstances) { if (this.renderers.length > this.maxInstances) {
this.deactivate(this.renderers[0]!) this.deactivate(this.renderers[0]!)
} }
this.renderers.push(renderer) this.renderers.push(renderer)
const container = reconciler.createContainer( const container = reconciler.createContainer(
renderer, renderer,
0, 0,
// eslint-disable-next-line unicorn/no-null null,
null, false,
false, null,
// eslint-disable-next-line unicorn/no-null "reacord",
null, () => {},
"reacord", null,
() => {}, )
// eslint-disable-next-line unicorn/no-null
null,
)
const instance: ReacordInstance = { const instance: ReacordInstance = {
render: (content: ReactNode) => { render: (content: ReactNode) => {
reconciler.updateContainer( reconciler.updateContainer(
<InstanceProvider value={instance}>{content}</InstanceProvider>, <InstanceProvider value={instance}>{content}</InstanceProvider>,
container, container,
) )
}, },
deactivate: () => { deactivate: () => {
this.deactivate(renderer) this.deactivate(renderer)
}, },
destroy: () => { destroy: () => {
this.renderers = this.renderers.filter((it) => it !== renderer) this.renderers = this.renderers.filter((it) => it !== renderer)
renderer.destroy() renderer.destroy()
}, },
} }
if (initialContent !== undefined) { if (initialContent !== undefined) {
instance.render(initialContent) instance.render(initialContent)
} }
return instance return instance
} }
private deactivate(renderer: Renderer) { private deactivate(renderer: Renderer) {
this.renderers = this.renderers.filter((it) => it !== renderer) this.renderers = this.renderers.filter((it) => it !== renderer)
renderer.deactivate() renderer.deactivate()
} }
} }

4
packages/reacord/library/internal/channel.ts
View File

@@ -1,5 +1,5 @@
import type { Message, MessageOptions } from "./message" import type { Message, MessageOptions } from "./message"
export type Channel = { export interface Channel {
send(message: MessageOptions): Promise<Message> send(message: MessageOptions): Promise<Message>
} }

58
packages/reacord/library/internal/container.ts
View File

@@ -1,37 +1,39 @@
export class Container<T> { export class Container<T> {
private items: T[] = [] private items: T[] = []
add(...items: T[]) { add(...items: T[]) {
this.items.push(...items) this.items.push(...items)
} }
addBefore(item: T, before: T) { addBefore(item: T, before: T) {
let index = this.items.indexOf(before) let index = this.items.indexOf(before)
if (index === -1) { if (index === -1) {
index = this.items.length index = this.items.length
} }
this.items.splice(index, 0, item) this.items.splice(index, 0, item)
} }
remove(toRemove: T) { remove(toRemove: T) {
this.items = this.items.filter((item) => item !== toRemove) this.items = this.items.filter((item) => item !== toRemove)
} }
clear() { clear() {
this.items = [] this.items = []
} }
find(predicate: (item: T) => boolean): T | undefined { find(predicate: (item: T) => boolean): T | undefined {
return this.items.find(predicate) return this.items.find(predicate)
} }
findType<U extends T>(type: new (...args: any[]) => U): U | undefined { findType<U extends T>(
for (const item of this.items) { type: new (...args: NonNullable<unknown>[]) => U,
if (item instanceof type) return item ): U | undefined {
} for (const item of this.items) {
} if (item instanceof type) return item
}
}
[Symbol.iterator]() { [Symbol.iterator]() {
return this.items[Symbol.iterator]() return this.items[Symbol.iterator]()
} }
} }

10
packages/reacord/library/internal/element.ts
View File

@@ -1,11 +1,11 @@
import type { Node } from "./node"
import type { ReactNode } from "react" import type { ReactNode } from "react"
import React from "react" import React from "react"
import type { Node } from "./node"
export function ReacordElement<Props>(props: { export function ReacordElement<Props>(props: {
props: Props props: Props
createNode: () => Node<Props> createNode: () => Node<Props>
children?: ReactNode children?: ReactNode
}) { }) {
return React.createElement("reacord-element", props) return React.createElement("reacord-element", props)
} }

30
packages/reacord/library/internal/interaction.ts
View File

@@ -8,28 +8,28 @@ export type ComponentInteraction = ButtonInteraction | SelectInteraction
export type CommandInteraction = BaseInteraction<"command"> export type CommandInteraction = BaseInteraction<"command">
export type ButtonInteraction = BaseComponentInteraction< export type ButtonInteraction = BaseComponentInteraction<
"button", "button",
ButtonClickEvent ButtonClickEvent
> >
export type SelectInteraction = BaseComponentInteraction< export type SelectInteraction = BaseComponentInteraction<
"select", "select",
SelectChangeEvent SelectChangeEvent
> >
export type BaseInteraction<Type extends string> = { export interface BaseInteraction<Type extends string> {
type: Type type: Type
id: string id: string
reply(messageOptions: MessageOptions): Promise<Message> reply(messageOptions: MessageOptions): Promise<Message>
followUp(messageOptions: MessageOptions): Promise<Message> followUp(messageOptions: MessageOptions): Promise<Message>
} }
export type BaseComponentInteraction< export type BaseComponentInteraction<
Type extends string, Type extends string,
Event extends ComponentEvent, Event extends ComponentEvent,
> = BaseInteraction<Type> & { > = BaseInteraction<Type> & {
event: Event event: Event
customId: string customId: string
update(options: MessageOptions): Promise<void> update(options: MessageOptions): Promise<void>
deferUpdate(): Promise<void> deferUpdate(): Promise<void>
} }

34
packages/reacord/library/internal/limited-collection.ts
View File

@@ -1,24 +1,24 @@
export class LimitedCollection<T> { export class LimitedCollection<T> {
private items: T[] = [] private items: T[] = []
constructor(private readonly size: number) {} constructor(private readonly size: number) {}
add(item: T) { add(item: T) {
if (this.items.length >= this.size) { if (this.items.length >= this.size) {
this.items.shift() this.items.shift()
} }
this.items.push(item) this.items.push(item)
} }
has(item: T) { has(item: T) {
return this.items.includes(item) return this.items.includes(item)
} }
values(): readonly T[] { values(): readonly T[] {
return this.items return this.items
} }
[Symbol.iterator]() { [Symbol.iterator]() {
return this.items[Symbol.iterator]() return this.items[Symbol.iterator]()
} }
} }

86
packages/reacord/library/internal/message.ts
View File

@@ -1,65 +1,65 @@
import { last } from "@reacord/helpers/last"
import type { Except } from "type-fest"
import type { EmbedOptions } from "../core/components/embed-options" import type { EmbedOptions } from "../core/components/embed-options"
import type { SelectProps } from "../core/components/select" import type { SelectProps } from "../core/components/select"
import { last } from "@reacord/helpers/last"
import type { Except } from "type-fest"
export type MessageOptions = { export interface MessageOptions {
content: string content: string
embeds: EmbedOptions[] embeds: EmbedOptions[]
actionRows: ActionRow[] actionRows: ActionRow[]
} }
export type ActionRow = ActionRowItem[] export type ActionRow = ActionRowItem[]
export type ActionRowItem = export type ActionRowItem =
| MessageButtonOptions | MessageButtonOptions
| MessageLinkOptions | MessageLinkOptions
| MessageSelectOptions | MessageSelectOptions
export type MessageButtonOptions = { export interface MessageButtonOptions {
type: "button" type: "button"
customId: string customId: string
label?: string label?: string
style?: "primary" | "secondary" | "success" | "danger" style?: "primary" | "secondary" | "success" | "danger"
disabled?: boolean disabled?: boolean
emoji?: string emoji?: string
} }
export type MessageLinkOptions = { export interface MessageLinkOptions {
type: "link" type: "link"
url: string url: string
label?: string label?: string
emoji?: string emoji?: string
disabled?: boolean disabled?: boolean
} }
export type MessageSelectOptions = Except<SelectProps, "children" | "value"> & { export type MessageSelectOptions = Except<SelectProps, "children" | "value"> & {
type: "select" type: "select"
customId: string customId: string
options: MessageSelectOptionOptions[] options: MessageSelectOptionOptions[]
} }
export type MessageSelectOptionOptions = { export interface MessageSelectOptionOptions {
label: string label: string
value: string value: string
description?: string description?: string
emoji?: string emoji?: string
} }
export type Message = { export interface Message {
edit(options: MessageOptions): Promise<void> edit(options: MessageOptions): Promise<void>
delete(): Promise<void> delete(): Promise<void>
} }
export function getNextActionRow(options: MessageOptions): ActionRow { export function getNextActionRow(options: MessageOptions): ActionRow {
let actionRow = last(options.actionRows) let actionRow = last(options.actionRows)
if ( if (
actionRow == undefined || actionRow == undefined ||
actionRow.length >= 5 || actionRow.length >= 5 ||
actionRow[0]?.type === "select" actionRow[0]?.type === "select"
) { ) {
actionRow = [] actionRow = []
options.actionRows.push(actionRow) options.actionRows.push(actionRow)
} }
return actionRow return actionRow
} }

21
packages/reacord/library/internal/node.ts
View File

@@ -1,20 +1,21 @@
/* eslint-disable class-methods-use-this */
import { Container } from "./container.js" import { Container } from "./container.js"
import type { ComponentInteraction } from "./interaction" import type { ComponentInteraction } from "./interaction"
import type { MessageOptions } from "./message" import type { MessageOptions } from "./message"
export abstract class Node<Props> { export abstract class Node<Props> {
readonly children = new Container<Node<unknown>>() readonly children = new Container<Node<unknown>>()
constructor(public props: Props) {} constructor(public props: Props) {}
modifyMessageOptions(options: MessageOptions) {} modifyMessageOptions(_options: MessageOptions) {
// noop
}
handleComponentInteraction(interaction: ComponentInteraction): boolean { handleComponentInteraction(_interaction: ComponentInteraction): boolean {
return false return false
} }
get text(): string { get text(): string {
return [...this.children].map((child) => child.text).join("") return [...this.children].map((child) => child.text).join("")
} }
} }

168
packages/reacord/library/internal/reconciler.ts
View File

@@ -7,105 +7,101 @@ import type { Renderer } from "./renderers/renderer"
import { TextNode } from "./text-node.js" import { TextNode } from "./text-node.js"
const config: HostConfig< const config: HostConfig<
string, // Type, string, // Type,
Record<string, unknown>, // Props, Record<string, unknown>, // Props,
Renderer, // Container, Renderer, // Container,
Node<unknown>, // Instance, Node<unknown>, // Instance,
TextNode, // TextInstance, TextNode, // TextInstance,
never, // SuspenseInstance, never, // SuspenseInstance,
never, // HydratableInstance, never, // HydratableInstance,
never, // PublicInstance, never, // PublicInstance,
never, // HostContext, never, // HostContext,
true, // UpdatePayload, true, // UpdatePayload,
never, // ChildSet, never, // ChildSet,
number, // TimeoutHandle, number, // TimeoutHandle,
number // NoTimeout, number // NoTimeout,
> = { > = {
supportsMutation: true, supportsMutation: true,
supportsPersistence: false, supportsPersistence: false,
supportsHydration: false, supportsHydration: false,
isPrimaryRenderer: true, isPrimaryRenderer: true,
scheduleTimeout: global.setTimeout, scheduleTimeout: global.setTimeout,
cancelTimeout: global.clearTimeout, cancelTimeout: global.clearTimeout,
noTimeout: -1, noTimeout: -1,
// eslint-disable-next-line unicorn/no-null getRootHostContext: () => null,
getRootHostContext: () => null, getChildHostContext: (parentContext) => parentContext,
getChildHostContext: (parentContext) => parentContext,
createInstance: (type, props) => { createInstance: (type, props) => {
if (type !== "reacord-element") { if (type !== "reacord-element") {
raise(`Unknown element type: ${type}`) raise(`Unknown element type: ${type}`)
} }
if (typeof props.createNode !== "function") { if (typeof props.createNode !== "function") {
raise(`Missing createNode function`) raise(`Missing createNode function`)
} }
const node = props.createNode(props.props) const node = props.createNode(props.props)
if (!(node instanceof Node)) { if (!(node instanceof Node)) {
raise(`createNode function did not return a Node`) raise(`createNode function did not return a Node`)
} }
return node return node
}, },
createTextInstance: (text) => new TextNode(text), createTextInstance: (text) => new TextNode(text),
shouldSetTextContent: () => false, shouldSetTextContent: () => false,
detachDeletedInstance: (instance) => {}, detachDeletedInstance: (_instance) => {},
beforeActiveInstanceBlur: () => {}, beforeActiveInstanceBlur: () => {},
afterActiveInstanceBlur: () => {}, afterActiveInstanceBlur: () => {},
// eslint-disable-next-line unicorn/no-null getInstanceFromNode: (_node: unknown) => null,
getInstanceFromNode: (node: any) => null, getInstanceFromScope: (_scopeInstance: unknown) => null,
// eslint-disable-next-line unicorn/no-null
getInstanceFromScope: (scopeInstance: any) => null,
clearContainer: (renderer) => { clearContainer: (renderer) => {
renderer.nodes.clear() renderer.nodes.clear()
}, },
appendChildToContainer: (renderer, child) => { appendChildToContainer: (renderer, child) => {
renderer.nodes.add(child) renderer.nodes.add(child)
}, },
removeChildFromContainer: (renderer, child) => { removeChildFromContainer: (renderer, child) => {
renderer.nodes.remove(child) renderer.nodes.remove(child)
}, },
insertInContainerBefore: (renderer, child, before) => { insertInContainerBefore: (renderer, child, before) => {
renderer.nodes.addBefore(child, before) renderer.nodes.addBefore(child, before)
}, },
appendInitialChild: (parent, child) => { appendInitialChild: (parent, child) => {
parent.children.add(child) parent.children.add(child)
}, },
appendChild: (parent, child) => { appendChild: (parent, child) => {
parent.children.add(child) parent.children.add(child)
}, },
removeChild: (parent, child) => { removeChild: (parent, child) => {
parent.children.remove(child) parent.children.remove(child)
}, },
insertBefore: (parent, child, before) => { insertBefore: (parent, child, before) => {
parent.children.addBefore(child, before) parent.children.addBefore(child, before)
}, },
prepareUpdate: () => true, prepareUpdate: () => true,
commitUpdate: (node, payload, type, oldProps, newProps) => { commitUpdate: (node, payload, type, oldProps, newProps) => {
node.props = newProps.props node.props = newProps.props
}, },
commitTextUpdate: (node, oldText, newText) => { commitTextUpdate: (node, oldText, newText) => {
node.props = newText node.props = newText
}, },
// eslint-disable-next-line unicorn/no-null prepareForCommit: () => null,
prepareForCommit: () => null, resetAfterCommit: (renderer) => {
resetAfterCommit: (renderer) => { renderer.render()
renderer.render() },
}, prepareScopeUpdate: (_scopeInstance: unknown, _instance: unknown) => {},
prepareScopeUpdate: (scopeInstance: any, instance: any) => {},
preparePortalMount: () => raise("Portals are not supported"), preparePortalMount: () => raise("Portals are not supported"),
getPublicInstance: () => raise("Refs are currently not supported"), getPublicInstance: () => raise("Refs are currently not supported"),
finalizeInitialChildren: () => false, finalizeInitialChildren: () => false,
getCurrentEventPriority: () => DefaultEventPriority, getCurrentEventPriority: () => DefaultEventPriority,
} }
export const reconciler = ReactReconciler(config) export const reconciler = ReactReconciler(config)

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

@@ -3,11 +3,11 @@ import type { Message, MessageOptions } from "../message"
import { Renderer } from "./renderer" import { Renderer } from "./renderer"
export class ChannelMessageRenderer extends Renderer { export class ChannelMessageRenderer extends Renderer {
constructor(private channel: Channel) { constructor(private channel: Channel) {
super() super()
} }
protected createMessage(options: MessageOptions): Promise<Message> { protected createMessage(options: MessageOptions): Promise<Message> {
return this.channel.send(options) return this.channel.send(options)
} }
} }

20
packages/reacord/library/internal/renderers/interaction-reply-renderer.ts
View File

@@ -7,16 +7,16 @@ import { Renderer } from "./renderer"
const repliedInteractionIds = new Set<string>() const repliedInteractionIds = new Set<string>()
export class InteractionReplyRenderer extends Renderer { export class InteractionReplyRenderer extends Renderer {
constructor(private interaction: Interaction) { constructor(private interaction: Interaction) {
super() super()
} }
protected createMessage(options: MessageOptions): Promise<Message> { protected createMessage(options: MessageOptions): Promise<Message> {
if (repliedInteractionIds.has(this.interaction.id)) { if (repliedInteractionIds.has(this.interaction.id)) {
return this.interaction.followUp(options) return this.interaction.followUp(options)
} }
repliedInteractionIds.add(this.interaction.id) repliedInteractionIds.add(this.interaction.id)
return this.interaction.reply(options) return this.interaction.reply(options)
} }
} }

184
packages/reacord/library/internal/renderers/renderer.ts
View File

@@ -1,119 +1,119 @@
import { Subject } from "rxjs"
import { concatMap } from "rxjs/operators"
import { Container } from "../container.js" import { Container } from "../container.js"
import type { ComponentInteraction } from "../interaction" import type { ComponentInteraction } from "../interaction"
import type { Message, MessageOptions } from "../message" import type { Message, MessageOptions } from "../message"
import type { Node } from "../node.js" import type { Node } from "../node.js"
import { Subject } from "rxjs"
import { concatMap } from "rxjs/operators"
type UpdatePayload = type UpdatePayload =
| { action: "update" | "deactivate"; options: MessageOptions } | { action: "update" | "deactivate"; options: MessageOptions }
| { action: "deferUpdate"; interaction: ComponentInteraction } | { action: "deferUpdate"; interaction: ComponentInteraction }
| { action: "destroy" } | { action: "destroy" }
export abstract class Renderer { export abstract class Renderer {
readonly nodes = new Container<Node<unknown>>() readonly nodes = new Container<Node<unknown>>()
private componentInteraction?: ComponentInteraction private componentInteraction?: ComponentInteraction
private message?: Message private message?: Message
private active = true private active = true
private updates = new Subject<UpdatePayload>() private updates = new Subject<UpdatePayload>()
private updateSubscription = this.updates private updateSubscription = this.updates
.pipe(concatMap((payload) => this.updateMessage(payload))) .pipe(concatMap((payload) => this.updateMessage(payload)))
.subscribe({ error: console.error }) .subscribe({ error: console.error })
render() { render() {
if (!this.active) { if (!this.active) {
console.warn("Attempted to update a deactivated message") console.warn("Attempted to update a deactivated message")
return return
} }
this.updates.next({ this.updates.next({
options: this.getMessageOptions(), options: this.getMessageOptions(),
action: "update", action: "update",
}) })
} }
deactivate() { deactivate() {
this.active = false this.active = false
this.updates.next({ this.updates.next({
options: this.getMessageOptions(), options: this.getMessageOptions(),
action: "deactivate", action: "deactivate",
}) })
} }
destroy() { destroy() {
this.active = false this.active = false
this.updates.next({ action: "destroy" }) this.updates.next({ action: "destroy" })
} }
handleComponentInteraction(interaction: ComponentInteraction) { handleComponentInteraction(interaction: ComponentInteraction) {
this.componentInteraction = interaction this.componentInteraction = interaction
setTimeout(() => { setTimeout(() => {
this.updates.next({ action: "deferUpdate", interaction }) this.updates.next({ action: "deferUpdate", interaction })
}, 500) }, 500)
for (const node of this.nodes) { for (const node of this.nodes) {
if (node.handleComponentInteraction(interaction)) { if (node.handleComponentInteraction(interaction)) {
return true return true
} }
} }
} }
protected abstract createMessage(options: MessageOptions): Promise<Message> protected abstract createMessage(options: MessageOptions): Promise<Message>
private getMessageOptions(): MessageOptions { private getMessageOptions(): MessageOptions {
const options: MessageOptions = { const options: MessageOptions = {
content: "", content: "",
embeds: [], embeds: [],
actionRows: [], actionRows: [],
} }
for (const node of this.nodes) { for (const node of this.nodes) {
node.modifyMessageOptions(options) node.modifyMessageOptions(options)
} }
return options return options
} }
private async updateMessage(payload: UpdatePayload) { private async updateMessage(payload: UpdatePayload) {
if (payload.action === "destroy") { if (payload.action === "destroy") {
this.updateSubscription.unsubscribe() this.updateSubscription.unsubscribe()
await this.message?.delete() await this.message?.delete()
return return
} }
if (payload.action === "deactivate") { if (payload.action === "deactivate") {
this.updateSubscription.unsubscribe() this.updateSubscription.unsubscribe()
await this.message?.edit({ await this.message?.edit({
...payload.options, ...payload.options,
actionRows: payload.options.actionRows.map((row) => actionRows: payload.options.actionRows.map((row) =>
row.map((component) => ({ row.map((component) => ({
...component, ...component,
disabled: true, disabled: true,
})), })),
), ),
}) })
return return
} }
if (payload.action === "deferUpdate") { if (payload.action === "deferUpdate") {
await payload.interaction.deferUpdate() await payload.interaction.deferUpdate()
return return
} }
if (this.componentInteraction) { if (this.componentInteraction) {
const promise = this.componentInteraction.update(payload.options) const promise = this.componentInteraction.update(payload.options)
this.componentInteraction = undefined this.componentInteraction = undefined
await promise await promise
return return
} }
if (this.message) { if (this.message) {
await this.message.edit(payload.options) await this.message.edit(payload.options)
return return
} }
this.message = await this.createMessage(payload.options) this.message = await this.createMessage(payload.options)
} }
} }

12
packages/reacord/library/internal/text-node.ts
View File

@@ -2,11 +2,11 @@ import type { MessageOptions } from "./message"
import { Node } from "./node.js" import { Node } from "./node.js"
export class TextNode extends Node<string> { export class TextNode extends Node<string> {
override modifyMessageOptions(options: MessageOptions) { override modifyMessageOptions(options: MessageOptions) {
options.content = options.content + this.props options.content = options.content + this.props
} }
override get text() { override get text() {
return this.props return this.props
} }
} }

30
packages/reacord/library/internal/timeout.ts
View File

@@ -1,20 +1,20 @@
export class Timeout { export class Timeout {
private timeoutId?: NodeJS.Timeout private timeoutId?: NodeJS.Timeout
constructor( constructor(
private readonly time: number, private readonly time: number,
private readonly callback: () => void, private readonly callback: () => void,
) {} ) {}
run() { run() {
this.cancel() this.cancel()
this.timeoutId = setTimeout(this.callback, this.time) this.timeoutId = setTimeout(this.callback, this.time)
} }
cancel() { cancel() {
if (this.timeoutId) { if (this.timeoutId) {
clearTimeout(this.timeoutId) clearTimeout(this.timeoutId)
this.timeoutId = undefined this.timeoutId = undefined
} }
} }
} }

179
packages/reacord/package.json
View File

@@ -1,93 +1,90 @@
{ {
"name": "reacord", "name": "reacord",
"type": "module", "type": "module",
"description": "Create interactive Discord messages using React.", "description": "Create interactive Discord messages using React.",
"version": "0.5.2", "version": "0.5.2",
"types": "./dist/main.d.ts", "types": "./dist/main.d.ts",
"homepage": "https://reacord.mapleleaf.dev", "homepage": "https://reacord.mapleleaf.dev",
"repository": "https://github.com/itsMapleLeaf/reacord.git", "repository": "https://github.com/itsMapleLeaf/reacord.git",
"changelog": "https://github.com/itsMapleLeaf/reacord/releases", "changelog": "https://github.com/itsMapleLeaf/reacord/releases",
"license": "MIT", "license": "MIT",
"keywords": [ "keywords": [
"discord", "discord",
"discord-js", "discord-js",
"react", "react",
"react-js", "react-js",
"react-renderer", "react-renderer",
"interaction", "interaction",
"message", "message",
"embed", "embed",
"reacord" "reacord"
], ],
"files": [ "files": [
"dist", "library",
"README.md", "dist",
"LICENSE" "README.md",
], "LICENSE"
"exports": { ],
".": { "exports": {
"import": "./dist/main.js", ".": {
"require": "./dist/main.cjs", "import": "./dist/main.js",
"types": "./dist/main.d.ts" "require": "./dist/main.cjs",
}, "types": "./library/main.ts"
"./package.json": { },
"import": "./package.json", "./package.json": {
"require": "./package.json" "import": "./package.json",
} "require": "./package.json"
}, }
"scripts": { },
"build": "cp ../../README.md . && cp ../../LICENSE . && tsup library/main.ts --target node16 --format cjs,esm --dts --sourcemap", "scripts": {
"build-watch": "pnpm build -- --watch", "build": "cpy ../../README.md ../../LICENSE . && tsup library/main.ts --target node16 --format cjs,esm --sourcemap",
"test": "vitest --coverage --no-watch", "build-watch": "pnpm build -- --watch",
"test-dev": "vitest", "test": "vitest --coverage --no-watch",
"test-manual": "nodemon --exec tsx --ext ts,tsx ./scripts/discordjs-manual-test.tsx" "test-dev": "vitest",
}, "test-manual": "nodemon --exec tsx --ext ts,tsx ./scripts/discordjs-manual-test.tsx"
"dependencies": { },
"@types/node": "*", "dependencies": {
"@types/react": "*", "@types/node": "^20.5.0",
"@types/react-reconciler": "^0.28.0", "@types/react": "^18.2.20",
"react-reconciler": "^0.29.0", "@types/react-reconciler": "^0.28.2",
"rxjs": "^7.5.6" "react-reconciler": "^0.29.0",
}, "rxjs": "^7.8.1"
"peerDependencies": { },
"discord.js": "^14", "peerDependencies": {
"react": ">=17" "discord.js": "^14",
}, "react": ">=17"
"peerDependenciesMeta": { },
"discord.js": { "peerDependenciesMeta": {
"optional": true "discord.js": {
} "optional": true
}, }
"devDependencies": { },
"@reacord/helpers": "workspace:*", "devDependencies": {
"@types/lodash-es": "^4.17.6", "@reacord/helpers": "workspace:*",
"c8": "^7.12.0", "@types/lodash-es": "^4.17.8",
"discord.js": "^14.0.3", "c8": "^8.0.1",
"dotenv": "^16.0.1", "cpy-cli": "^5.0.0",
"lodash-es": "^4.17.21", "discord.js": "^14.12.1",
"nodemon": "^2.0.19", "dotenv": "^16.3.1",
"prettier": "^2.7.1", "lodash-es": "^4.17.21",
"pretty-ms": "^8.0.0", "nodemon": "^3.0.1",
"react": "^18.2.0", "prettier": "^3.0.2",
"tsup": "^6.1.3", "pretty-ms": "^8.0.0",
"tsx": "^3.8.0", "react": "^18.2.0",
"type-fest": "^2.17.0", "tsup": "^7.2.0",
"typescript": "^4.7.4", "tsx": "^3.12.7",
"vitest": "^0.18.1" "type-fest": "^4.2.0"
}, },
"resolutions": { "release-it": {
"esbuild": "latest" "git": {
}, "commitMessage": "release v${version}"
"release-it": { },
"git": { "github": {
"commitMessage": "release v${version}" "release": true,
}, "web": true
"github": { }
"release": true, },
"web": true "publishConfig": {
} "access": "public"
}, }
"publishConfig": {
"access": "public"
}
} }

188
packages/reacord/scripts/discordjs-manual-test.tsx
View File

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

65
packages/reacord/test/action-row.test.tsx
View File

@@ -1,4 +1,3 @@
import React from "react"
import { test } from "vitest" import { test } from "vitest"
import { ActionRow, Button, Select } from "../library/main" import { ActionRow, Button, Select } from "../library/main"
import { ReacordTester } from "./test-adapter" import { ReacordTester } from "./test-adapter"
@@ -6,36 +5,36 @@ import { ReacordTester } from "./test-adapter"
const testing = new ReacordTester() const testing = new ReacordTester()
test("action row", async () => { test("action row", async () => {
await testing.assertRender( await testing.assertRender(
<> <>
<Button label="outside button" onClick={() => {}} /> <Button label="outside button" onClick={() => {}} />
<ActionRow> <ActionRow>
<Button label="button inside action row" onClick={() => {}} /> <Button label="button inside action row" onClick={() => {}} />
</ActionRow> </ActionRow>
<Select /> <Select />
<Button label="last row 1" onClick={() => {}} /> <Button label="last row 1" onClick={() => {}} />
<Button label="last row 2" onClick={() => {}} /> <Button label="last row 2" onClick={() => {}} />
</>, </>,
[ [
{ {
content: "", content: "",
embeds: [], embeds: [],
actionRows: [ actionRows: [
[{ type: "button", style: "secondary", label: "outside button" }], [{ type: "button", style: "secondary", label: "outside button" }],
[ [
{ {
type: "button", type: "button",
style: "secondary", style: "secondary",
label: "button inside action row", label: "button inside action row",
}, },
], ],
[{ type: "select", options: [], values: [] }], [{ type: "select", options: [], values: [] }],
[ [
{ type: "button", style: "secondary", label: "last row 1" }, { type: "button", style: "secondary", label: "last row 1" },
{ type: "button", style: "secondary", label: "last row 2" }, { type: "button", style: "secondary", label: "last row 2" },
], ],
], ],
}, },
], ],
) )
}) })

6
packages/reacord/test/commonjs-require.test.ts
View File

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

501
packages/reacord/test/embed.test.tsx
View File

@@ -1,275 +1,274 @@
import React from "react"
import { test } from "vitest" import { test } from "vitest"
import { import {
Embed, Embed,
EmbedAuthor, EmbedAuthor,
EmbedField, EmbedField,
EmbedFooter, EmbedFooter,
EmbedImage, EmbedImage,
EmbedThumbnail, EmbedThumbnail,
EmbedTitle, EmbedTitle,
} from "../library/main" } from "../library/main"
import { ReacordTester } from "./test-adapter" import { ReacordTester } from "./test-adapter"
const testing = new ReacordTester() const testing = new ReacordTester()
test("kitchen sink", async () => { test("kitchen sink", async () => {
const now = new Date() const now = new Date()
await testing.assertRender( await testing.assertRender(
<> <>
<Embed color={0xfe_ee_ef}> <Embed color={0xfe_ee_ef}>
<EmbedAuthor name="author" iconUrl="https://example.com/author.png" /> <EmbedAuthor name="author" iconUrl="https://example.com/author.png" />
<EmbedTitle>title text</EmbedTitle> <EmbedTitle>title text</EmbedTitle>
description text description text
<EmbedThumbnail url="https://example.com/thumbnail.png" /> <EmbedThumbnail url="https://example.com/thumbnail.png" />
<EmbedImage url="https://example.com/image.png" /> <EmbedImage url="https://example.com/image.png" />
<EmbedField name="field name" value="field value" inline /> <EmbedField name="field name" value="field value" inline />
<EmbedField name="block field" value="block field value" /> <EmbedField name="block field" value="block field value" />
<EmbedFooter <EmbedFooter
text="footer text" text="footer text"
iconUrl="https://example.com/footer.png" iconUrl="https://example.com/footer.png"
timestamp={now} timestamp={now}
/> />
</Embed> </Embed>
</>, </>,
[ [
{ {
actionRows: [], actionRows: [],
content: "", content: "",
embeds: [ embeds: [
{ {
description: "description text", description: "description text",
author: { author: {
icon_url: "https://example.com/author.png", icon_url: "https://example.com/author.png",
name: "author", name: "author",
}, },
color: 0xfe_ee_ef, color: 0xfe_ee_ef,
fields: [ fields: [
{ {
inline: true, inline: true,
name: "field name", name: "field name",
value: "field value", value: "field value",
}, },
{ {
name: "block field", name: "block field",
value: "block field value", value: "block field value",
}, },
], ],
footer: { footer: {
icon_url: "https://example.com/footer.png", icon_url: "https://example.com/footer.png",
text: "footer text", text: "footer text",
}, },
image: { image: {
url: "https://example.com/image.png", url: "https://example.com/image.png",
}, },
thumbnail: { thumbnail: {
url: "https://example.com/thumbnail.png", url: "https://example.com/thumbnail.png",
}, },
timestamp: now.toISOString(), timestamp: now.toISOString(),
title: "title text", title: "title text",
}, },
], ],
}, },
], ],
) )
}) })
test("author variants", async () => { test("author variants", async () => {
await testing.assertRender( await testing.assertRender(
<> <>
<Embed> <Embed>
<EmbedAuthor iconUrl="https://example.com/author.png"> <EmbedAuthor iconUrl="https://example.com/author.png">
author name author name
</EmbedAuthor> </EmbedAuthor>
</Embed> </Embed>
<Embed> <Embed>
<EmbedAuthor iconUrl="https://example.com/author.png" /> <EmbedAuthor iconUrl="https://example.com/author.png" />
</Embed> </Embed>
</>, </>,
[ [
{ {
content: "", content: "",
actionRows: [], actionRows: [],
embeds: [ embeds: [
{ {
author: { author: {
icon_url: "https://example.com/author.png", icon_url: "https://example.com/author.png",
name: "author name", name: "author name",
}, },
}, },
{ {
author: { author: {
icon_url: "https://example.com/author.png", icon_url: "https://example.com/author.png",
name: "", name: "",
}, },
}, },
], ],
}, },
], ],
) )
}) })
test("field variants", async () => { test("field variants", async () => {
await testing.assertRender( await testing.assertRender(
<> <>
<Embed> <Embed>
<EmbedField name="field name" value="field value" /> <EmbedField name="field name" value="field value" />
<EmbedField name="field name" value="field value" inline /> <EmbedField name="field name" value="field value" inline />
<EmbedField name="field name" inline> <EmbedField name="field name" inline>
field value field value
</EmbedField> </EmbedField>
<EmbedField name="field name" /> <EmbedField name="field name" />
</Embed> </Embed>
</>, </>,
[ [
{ {
content: "", content: "",
actionRows: [], actionRows: [],
embeds: [ embeds: [
{ {
fields: [ fields: [
{ {
name: "field name", name: "field name",
value: "field value", value: "field value",
}, },
{ {
inline: true, inline: true,
name: "field name", name: "field name",
value: "field value", value: "field value",
}, },
{ {
inline: true, inline: true,
name: "field name", name: "field name",
value: "field value", value: "field value",
}, },
{ {
name: "field name", name: "field name",
value: "", value: "",
}, },
], ],
}, },
], ],
}, },
], ],
) )
}) })
test("footer variants", async () => { test("footer variants", async () => {
const now = new Date() const now = new Date()
await testing.assertRender( await testing.assertRender(
<> <>
<Embed> <Embed>
<EmbedFooter text="footer text" /> <EmbedFooter text="footer text" />
</Embed> </Embed>
<Embed> <Embed>
<EmbedFooter <EmbedFooter
text="footer text" text="footer text"
iconUrl="https://example.com/footer.png" iconUrl="https://example.com/footer.png"
/> />
</Embed> </Embed>
<Embed> <Embed>
<EmbedFooter timestamp={now}>footer text</EmbedFooter> <EmbedFooter timestamp={now}>footer text</EmbedFooter>
</Embed> </Embed>
<Embed> <Embed>
<EmbedFooter iconUrl="https://example.com/footer.png" timestamp={now} /> <EmbedFooter iconUrl="https://example.com/footer.png" timestamp={now} />
</Embed> </Embed>
</>, </>,
[ [
{ {
content: "", content: "",
actionRows: [], actionRows: [],
embeds: [ embeds: [
{ {
footer: { footer: {
text: "footer text", text: "footer text",
}, },
}, },
{ {
footer: { footer: {
icon_url: "https://example.com/footer.png", icon_url: "https://example.com/footer.png",
text: "footer text", text: "footer text",
}, },
}, },
{ {
footer: { footer: {
text: "footer text", text: "footer text",
}, },
timestamp: now.toISOString(), timestamp: now.toISOString(),
}, },
{ {
footer: { footer: {
icon_url: "https://example.com/footer.png", icon_url: "https://example.com/footer.png",
text: "", text: "",
}, },
timestamp: now.toISOString(), timestamp: now.toISOString(),
}, },
], ],
}, },
], ],
) )
}) })
test("embed props", async () => { test("embed props", async () => {
const now = new Date() const now = new Date()
await testing.assertRender( await testing.assertRender(
<Embed <Embed
title="title text" title="title text"
description="description text" description="description text"
url="https://example.com/" url="https://example.com/"
color={0xfe_ee_ef} color={0xfe_ee_ef}
timestamp={now} timestamp={now}
author={{ author={{
name: "author name", name: "author name",
url: "https://example.com/author", url: "https://example.com/author",
iconUrl: "https://example.com/author.png", iconUrl: "https://example.com/author.png",
}} }}
thumbnail={{ thumbnail={{
url: "https://example.com/thumbnail.png", url: "https://example.com/thumbnail.png",
}} }}
image={{ image={{
url: "https://example.com/image.png", url: "https://example.com/image.png",
}} }}
footer={{ footer={{
text: "footer text", text: "footer text",
iconUrl: "https://example.com/footer.png", iconUrl: "https://example.com/footer.png",
}} }}
fields={[ fields={[
{ name: "field name", value: "field value", inline: true }, { name: "field name", value: "field value", inline: true },
{ name: "block field", value: "block field value" }, { name: "block field", value: "block field value" },
]} ]}
/>, />,
[ [
{ {
content: "", content: "",
actionRows: [], actionRows: [],
embeds: [ embeds: [
{ {
title: "title text", title: "title text",
description: "description text", description: "description text",
url: "https://example.com/", url: "https://example.com/",
color: 0xfe_ee_ef, color: 0xfe_ee_ef,
timestamp: now.toISOString(), timestamp: now.toISOString(),
author: { author: {
name: "author name", name: "author name",
url: "https://example.com/author", url: "https://example.com/author",
icon_url: "https://example.com/author.png", icon_url: "https://example.com/author.png",
}, },
thumbnail: { url: "https://example.com/thumbnail.png" }, thumbnail: { url: "https://example.com/thumbnail.png" },
image: { url: "https://example.com/image.png" }, image: { url: "https://example.com/image.png" },
footer: { footer: {
text: "footer text", text: "footer text",
icon_url: "https://example.com/footer.png", icon_url: "https://example.com/footer.png",
}, },
fields: [ fields: [
{ name: "field name", value: "field value", inline: true }, { name: "field name", value: "field value", inline: true },
{ name: "block field", value: "block field value" }, { name: "block field", value: "block field value" },
], ],
}, },
], ],
}, },
], ],
) )
}) })

1
packages/reacord/test/ephemeral-reply.test.ts
View File

@@ -1,2 +1,3 @@
import { test } from "vitest" import { test } from "vitest"
test.todo("ephemeral reply") test.todo("ephemeral reply")

67
packages/reacord/test/link.test.tsx
View File

@@ -1,4 +1,3 @@
import React from "react"
import { test } from "vitest" import { test } from "vitest"
import { Link } from "../library/main" import { Link } from "../library/main"
import { ReacordTester } from "./test-adapter" import { ReacordTester } from "./test-adapter"
@@ -6,37 +5,37 @@ import { ReacordTester } from "./test-adapter"
const tester = new ReacordTester() const tester = new ReacordTester()
test("link", async () => { test("link", async () => {
await tester.assertRender( await tester.assertRender(
<> <>
<Link url="https://example.com/">link text</Link> <Link url="https://example.com/">link text</Link>
<Link label="link text" url="https://example.com/" /> <Link label="link text" url="https://example.com/" />
<Link label="link text" url="https://example.com/" disabled /> <Link label="link text" url="https://example.com/" disabled />
</>, </>,
[ [
{ {
content: "", content: "",
embeds: [], embeds: [],
actionRows: [ actionRows: [
[ [
{ {
type: "link", type: "link",
url: "https://example.com/", url: "https://example.com/",
label: "link text", label: "link text",
}, },
{ {
type: "link", type: "link",
url: "https://example.com/", url: "https://example.com/",
label: "link text", label: "link text",
}, },
{ {
type: "link", type: "link",
url: "https://example.com/", url: "https://example.com/",
label: "link text", label: "link text",
disabled: true, disabled: true,
}, },
], ],
], ],
}, },
], ],
) )
}) })

554
packages/reacord/test/reacord.test.tsx
View File

@@ -1,270 +1,270 @@
import * as React from "react"
import { test } from "vitest"
import { Button, Embed, EmbedField, EmbedTitle } from "../library/main" import { Button, Embed, EmbedField, EmbedTitle } from "../library/main"
import { ReacordTester } from "./test-adapter" import { ReacordTester } from "./test-adapter"
import * as React from "react"
import { test } from "vitest"
test("rendering behavior", async () => { test("rendering behavior", async () => {
const tester = new ReacordTester() const tester = new ReacordTester()
const reply = tester.reply() const reply = tester.reply()
reply.render(<KitchenSinkCounter onDeactivate={() => reply.deactivate()} />) reply.render(<KitchenSinkCounter onDeactivate={() => reply.deactivate()} />)
await tester.assertMessages([ await tester.assertMessages([
{ {
content: "count: 0", content: "count: 0",
embeds: [], embeds: [],
actionRows: [ actionRows: [
[ [
{ {
type: "button", type: "button",
style: "primary", style: "primary",
label: "clicc", label: "clicc",
}, },
{ {
type: "button", type: "button",
style: "secondary", style: "secondary",
label: "show embed", label: "show embed",
}, },
{ {
type: "button", type: "button",
style: "danger", style: "danger",
label: "deactivate", label: "deactivate",
}, },
], ],
], ],
}, },
]) ])
await tester.findButtonByLabel("show embed").click() await tester.findButtonByLabel("show embed").click()
await tester.assertMessages([ await tester.assertMessages([
{ {
content: "count: 0", content: "count: 0",
embeds: [{ title: "the counter" }], embeds: [{ title: "the counter" }],
actionRows: [ actionRows: [
[ [
{ {
type: "button", type: "button",
style: "secondary", style: "secondary",
label: "hide embed", label: "hide embed",
}, },
{ {
type: "button", type: "button",
style: "primary", style: "primary",
label: "clicc", label: "clicc",
}, },
{ {
type: "button", type: "button",
style: "danger", style: "danger",
label: "deactivate", label: "deactivate",
}, },
], ],
], ],
}, },
]) ])
await tester.findButtonByLabel("clicc").click() await tester.findButtonByLabel("clicc").click()
await tester.assertMessages([ await tester.assertMessages([
{ {
content: "count: 1", content: "count: 1",
embeds: [ embeds: [
{ {
title: "the counter", title: "the counter",
fields: [{ name: "is it even?", value: "no" }], fields: [{ name: "is it even?", value: "no" }],
}, },
], ],
actionRows: [ actionRows: [
[ [
{ {
type: "button", type: "button",
style: "secondary", style: "secondary",
label: "hide embed", label: "hide embed",
}, },
{ {
type: "button", type: "button",
style: "primary", style: "primary",
label: "clicc", label: "clicc",
}, },
{ {
type: "button", type: "button",
style: "danger", style: "danger",
label: "deactivate", label: "deactivate",
}, },
], ],
], ],
}, },
]) ])
await tester.findButtonByLabel("clicc").click() await tester.findButtonByLabel("clicc").click()
await tester.assertMessages([ await tester.assertMessages([
{ {
content: "count: 2", content: "count: 2",
embeds: [ embeds: [
{ {
title: "the counter", title: "the counter",
fields: [{ name: "is it even?", value: "yes" }], fields: [{ name: "is it even?", value: "yes" }],
}, },
], ],
actionRows: [ actionRows: [
[ [
{ {
type: "button", type: "button",
style: "secondary", style: "secondary",
label: "hide embed", label: "hide embed",
}, },
{ {
type: "button", type: "button",
style: "primary", style: "primary",
label: "clicc", label: "clicc",
}, },
{ {
type: "button", type: "button",
style: "danger", style: "danger",
label: "deactivate", label: "deactivate",
}, },
], ],
], ],
}, },
]) ])
await tester.findButtonByLabel("hide embed").click() await tester.findButtonByLabel("hide embed").click()
await tester.assertMessages([ await tester.assertMessages([
{ {
content: "count: 2", content: "count: 2",
embeds: [], embeds: [],
actionRows: [ actionRows: [
[ [
{ {
type: "button", type: "button",
style: "primary", style: "primary",
label: "clicc", label: "clicc",
}, },
{ {
type: "button", type: "button",
style: "secondary", style: "secondary",
label: "show embed", label: "show embed",
}, },
{ {
type: "button", type: "button",
style: "danger", style: "danger",
label: "deactivate", label: "deactivate",
}, },
], ],
], ],
}, },
]) ])
await tester.findButtonByLabel("clicc").click() await tester.findButtonByLabel("clicc").click()
await tester.assertMessages([ await tester.assertMessages([
{ {
content: "count: 3", content: "count: 3",
embeds: [], embeds: [],
actionRows: [ actionRows: [
[ [
{ {
type: "button", type: "button",
style: "primary", style: "primary",
label: "clicc", label: "clicc",
}, },
{ {
type: "button", type: "button",
style: "secondary", style: "secondary",
label: "show embed", label: "show embed",
}, },
{ {
type: "button", type: "button",
style: "danger", style: "danger",
label: "deactivate", label: "deactivate",
}, },
], ],
], ],
}, },
]) ])
await tester.findButtonByLabel("deactivate").click() await tester.findButtonByLabel("deactivate").click()
await tester.assertMessages([ await tester.assertMessages([
{ {
content: "count: 3", content: "count: 3",
embeds: [], embeds: [],
actionRows: [ actionRows: [
[ [
{ {
type: "button", type: "button",
style: "primary", style: "primary",
label: "clicc", label: "clicc",
disabled: true, disabled: true,
}, },
{ {
type: "button", type: "button",
style: "secondary", style: "secondary",
label: "show embed", label: "show embed",
disabled: true, disabled: true,
}, },
{ {
type: "button", type: "button",
style: "danger", style: "danger",
label: "deactivate", label: "deactivate",
disabled: true, disabled: true,
}, },
], ],
], ],
}, },
]) ])
await tester.findButtonByLabel("clicc").click() await tester.findButtonByLabel("clicc").click()
await tester.assertMessages([ await tester.assertMessages([
{ {
content: "count: 3", content: "count: 3",
embeds: [], embeds: [],
actionRows: [ actionRows: [
[ [
{ {
type: "button", type: "button",
style: "primary", style: "primary",
label: "clicc", label: "clicc",
disabled: true, disabled: true,
}, },
{ {
type: "button", type: "button",
style: "secondary", style: "secondary",
label: "show embed", label: "show embed",
disabled: true, disabled: true,
}, },
{ {
type: "button", type: "button",
style: "danger", style: "danger",
label: "deactivate", label: "deactivate",
disabled: true, disabled: true,
}, },
], ],
], ],
}, },
]) ])
}) })
test("delete", async () => { test("delete", async () => {
const tester = new ReacordTester() const tester = new ReacordTester()
const reply = tester.reply() const reply = tester.reply()
reply.render( reply.render(
<> <>
some text some text
<Embed>some embed</Embed> <Embed>some embed</Embed>
<Button label="some button" onClick={() => {}} /> <Button label="some button" onClick={() => {}} />
</>, </>,
) )
await tester.assertMessages([ await tester.assertMessages([
{ {
content: "some text", content: "some text",
embeds: [{ description: "some embed" }], embeds: [{ description: "some embed" }],
actionRows: [ actionRows: [
[{ type: "button", style: "secondary", label: "some button" }], [{ type: "button", style: "secondary", label: "some button" }],
], ],
}, },
]) ])
reply.destroy() reply.destroy()
await tester.assertMessages([]) await tester.assertMessages([])
}) })
// test multiple instances that can be updated independently, // test multiple instances that can be updated independently,
@@ -272,34 +272,34 @@ test("delete", async () => {
test.todo("multiple instances") test.todo("multiple instances")
function KitchenSinkCounter(props: { onDeactivate: () => void }) { function KitchenSinkCounter(props: { onDeactivate: () => void }) {
const [count, setCount] = React.useState(0) const [count, setCount] = React.useState(0)
const [embedVisible, setEmbedVisible] = React.useState(false) const [embedVisible, setEmbedVisible] = React.useState(false)
return ( return (
<> <>
count: {count} count: {count}
{embedVisible && ( {embedVisible && (
<Embed> <Embed>
<EmbedTitle>the counter</EmbedTitle> <EmbedTitle>the counter</EmbedTitle>
{count > 0 && ( {count > 0 && (
<EmbedField name="is it even?"> <EmbedField name="is it even?">
{count % 2 === 0 ? "yes" : "no"} {count % 2 === 0 ? "yes" : "no"}
</EmbedField> </EmbedField>
)} )}
</Embed> </Embed>
)} )}
{embedVisible && ( {embedVisible && (
<Button label="hide embed" onClick={() => setEmbedVisible(false)} /> <Button label="hide embed" onClick={() => setEmbedVisible(false)} />
)} )}
<Button <Button
style="primary" style="primary"
label="clicc" label="clicc"
onClick={() => setCount(count + 1)} onClick={() => setCount(count + 1)}
/> />
{!embedVisible && ( {!embedVisible && (
<Button label="show embed" onClick={() => setEmbedVisible(true)} /> <Button label="show embed" onClick={() => setEmbedVisible(true)} />
)} )}
<Button style="danger" label="deactivate" onClick={props.onDeactivate} /> <Button style="danger" label="deactivate" onClick={props.onDeactivate} />
</> </>
) )
} }

264
packages/reacord/test/select.test.tsx
View File

@@ -1,160 +1,160 @@
import React, { useState } from "react" import { useState } from "react"
import { expect, test, vi } from "vitest" import { expect, test, vi } from "vitest"
import { Button, Option, Select } from "../library/main" import { Button, Option, Select } from "../library/main"
import { ReacordTester } from "./test-adapter" import { ReacordTester } from "./test-adapter"
test("single select", async () => { test("single select", async () => {
const tester = new ReacordTester() const tester = new ReacordTester()
const onSelect = vi.fn() const onSelect = vi.fn()
function TestSelect() { function TestSelect() {
const [value, setValue] = useState<string>() const [value, setValue] = useState<string>()
const [disabled, setDisabled] = useState(false) const [disabled, setDisabled] = useState(false)
return ( return (
<> <>
<Select <Select
placeholder="choose one" placeholder="choose one"
value={value} value={value}
onChange={onSelect} onChange={onSelect}
onChangeValue={setValue} onChangeValue={setValue}
disabled={disabled} disabled={disabled}
> >
<Option value="1" /> <Option value="1" />
<Option value="2" label="two" /> <Option value="2" label="two" />
<Option value="3">three</Option> <Option value="3">three</Option>
</Select> </Select>
<Button label="disable" onClick={() => setDisabled(true)} /> <Button label="disable" onClick={() => setDisabled(true)} />
</> </>
) )
} }
async function assertSelect(values: string[], disabled = false) { async function assertSelect(values: string[], disabled = false) {
await tester.assertMessages([ await tester.assertMessages([
{ {
content: "", content: "",
embeds: [], embeds: [],
actionRows: [ actionRows: [
[ [
{ {
type: "select", type: "select",
placeholder: "choose one", placeholder: "choose one",
values, values,
disabled, disabled,
options: [ options: [
{ label: "1", value: "1" }, { label: "1", value: "1" },
{ label: "two", value: "2" }, { label: "two", value: "2" },
{ label: "three", value: "3" }, { label: "three", value: "3" },
], ],
}, },
], ],
[{ type: "button", style: "secondary", label: "disable" }], [{ type: "button", style: "secondary", label: "disable" }],
], ],
}, },
]) ])
} }
const reply = tester.reply() const reply = tester.reply()
reply.render(<TestSelect />) reply.render(<TestSelect />)
await assertSelect([]) await assertSelect([])
expect(onSelect).toHaveBeenCalledTimes(0) expect(onSelect).toHaveBeenCalledTimes(0)
await tester.findSelectByPlaceholder("choose one").select("2") await tester.findSelectByPlaceholder("choose one").select("2")
await assertSelect(["2"]) await assertSelect(["2"])
expect(onSelect).toHaveBeenCalledWith( expect(onSelect).toHaveBeenCalledWith(
expect.objectContaining({ values: ["2"] }), expect.objectContaining({ values: ["2"] }),
) )
await tester.findButtonByLabel("disable").click() await tester.findButtonByLabel("disable").click()
await assertSelect(["2"], true) await assertSelect(["2"], true)
await tester.findSelectByPlaceholder("choose one").select("1") await tester.findSelectByPlaceholder("choose one").select("1")
await assertSelect(["2"], true) await assertSelect(["2"], true)
expect(onSelect).toHaveBeenCalledTimes(1) expect(onSelect).toHaveBeenCalledTimes(1)
}) })
test("multiple select", async () => { test("multiple select", async () => {
const tester = new ReacordTester() const tester = new ReacordTester()
const onSelect = vi.fn() const onSelect = vi.fn()
function TestSelect() { function TestSelect() {
const [values, setValues] = useState<string[]>([]) const [values, setValues] = useState<string[]>([])
return ( return (
<Select <Select
placeholder="select" placeholder="select"
multiple multiple
values={values} values={values}
onChange={onSelect} onChange={onSelect}
onChangeMultiple={setValues} onChangeMultiple={setValues}
> >
<Option value="1">one</Option> <Option value="1">one</Option>
<Option value="2">two</Option> <Option value="2">two</Option>
<Option value="3">three</Option> <Option value="3">three</Option>
</Select> </Select>
) )
} }
async function assertSelect(values: string[]) { async function assertSelect(values: string[]) {
await tester.assertMessages([ await tester.assertMessages([
{ {
content: "", content: "",
embeds: [], embeds: [],
actionRows: [ actionRows: [
[ [
{ {
type: "select", type: "select",
placeholder: "select", placeholder: "select",
values, values,
minValues: 0, minValues: 0,
maxValues: 25, maxValues: 25,
options: [ options: [
{ label: "one", value: "1" }, { label: "one", value: "1" },
{ label: "two", value: "2" }, { label: "two", value: "2" },
{ label: "three", value: "3" }, { label: "three", value: "3" },
], ],
}, },
], ],
], ],
}, },
]) ])
} }
const reply = tester.reply() const reply = tester.reply()
reply.render(<TestSelect />) reply.render(<TestSelect />)
await assertSelect([]) await assertSelect([])
expect(onSelect).toHaveBeenCalledTimes(0) expect(onSelect).toHaveBeenCalledTimes(0)
await tester.findSelectByPlaceholder("select").select("1", "3") await tester.findSelectByPlaceholder("select").select("1", "3")
await assertSelect(expect.arrayContaining(["1", "3"]) as unknown as string[]) await assertSelect(expect.arrayContaining(["1", "3"]) as unknown as string[])
expect(onSelect).toHaveBeenCalledWith( expect(onSelect).toHaveBeenCalledWith(
expect.objectContaining({ values: expect.arrayContaining(["1", "3"]) }), expect.objectContaining({ values: expect.arrayContaining(["1", "3"]) }),
) )
await tester.findSelectByPlaceholder("select").select("2") await tester.findSelectByPlaceholder("select").select("2")
await assertSelect(expect.arrayContaining(["2"]) as unknown as string[]) await assertSelect(expect.arrayContaining(["2"]) as unknown as string[])
expect(onSelect).toHaveBeenCalledWith( expect(onSelect).toHaveBeenCalledWith(
expect.objectContaining({ values: expect.arrayContaining(["2"]) }), expect.objectContaining({ values: expect.arrayContaining(["2"]) }),
) )
await tester.findSelectByPlaceholder("select").select() await tester.findSelectByPlaceholder("select").select()
await assertSelect([]) await assertSelect([])
expect(onSelect).toHaveBeenCalledWith(expect.objectContaining({ values: [] })) expect(onSelect).toHaveBeenCalledWith(expect.objectContaining({ values: [] }))
}) })
test("optional onSelect + unknown value", async () => { test("optional onSelect + unknown value", async () => {
const tester = new ReacordTester() const tester = new ReacordTester()
tester.reply().render(<Select placeholder="select" />) tester.reply().render(<Select placeholder="select" />)
await tester.findSelectByPlaceholder("select").select("something") await tester.findSelectByPlaceholder("select").select("something")
await tester.assertMessages([ await tester.assertMessages([
{ {
content: "", content: "",
embeds: [], embeds: [],
actionRows: [ actionRows: [
[{ type: "select", placeholder: "select", options: [], values: [] }], [{ type: "select", placeholder: "select", options: [], values: [] }],
], ],
}, },
]) ])
}) })
test.todo("select minValues and maxValues") test.todo("select minValues and maxValues")

405
packages/reacord/test/test-adapter.ts
View File

@@ -1,5 +1,3 @@
/* eslint-disable class-methods-use-this */
/* eslint-disable require-await */
import { logPretty } from "@reacord/helpers/log-pretty" import { logPretty } from "@reacord/helpers/log-pretty"
import { omit } from "@reacord/helpers/omit" import { omit } from "@reacord/helpers/omit"
import { pruneNullishValues } from "@reacord/helpers/prune-nullish-values" import { pruneNullishValues } from "@reacord/helpers/prune-nullish-values"
@@ -10,10 +8,10 @@ import { setTimeout } from "node:timers/promises"
import type { ReactNode } from "react" import type { ReactNode } from "react"
import { expect } from "vitest" import { expect } from "vitest"
import type { import type {
ChannelInfo, ChannelInfo,
GuildInfo, GuildInfo,
MessageInfo, MessageInfo,
UserInfo, UserInfo,
} from "../library/core/component-event" } from "../library/core/component-event"
import type { ButtonClickEvent } from "../library/core/components/button" import type { ButtonClickEvent } from "../library/core/components/button"
import type { SelectChangeEvent } from "../library/core/components/select" import type { SelectChangeEvent } from "../library/core/components/select"
@@ -22,9 +20,9 @@ import { Reacord } from "../library/core/reacord"
import type { Channel } from "../library/internal/channel" import type { Channel } from "../library/internal/channel"
import { Container } from "../library/internal/container" import { Container } from "../library/internal/container"
import type { import type {
ButtonInteraction, ButtonInteraction,
CommandInteraction, CommandInteraction,
SelectInteraction, SelectInteraction,
} from "../library/internal/interaction" } from "../library/internal/interaction"
import type { Message, MessageOptions } from "../library/internal/message" import type { Message, MessageOptions } from "../library/internal/message"
import { ChannelMessageRenderer } from "../library/internal/renderers/channel-message-renderer" import { ChannelMessageRenderer } from "../library/internal/renderers/channel-message-renderer"
@@ -32,257 +30,258 @@ import { InteractionReplyRenderer } from "../library/internal/renderers/interact
export type MessageSample = ReturnType<ReacordTester["sampleMessages"]>[0] export type MessageSample = ReturnType<ReacordTester["sampleMessages"]>[0]
/** /** A Record adapter for automated tests. WIP */
* A Record adapter for automated tests. WIP
*/
export class ReacordTester extends Reacord { export class ReacordTester extends Reacord {
private messageContainer = new Container<TestMessage>() private messageContainer = new Container<TestMessage>()
constructor() { constructor() {
super({ maxInstances: 2 }) super({ maxInstances: 2 })
} }
get messages(): readonly TestMessage[] { get messages(): readonly TestMessage[] {
return [...this.messageContainer] return [...this.messageContainer]
} }
override send(initialContent?: ReactNode): ReacordInstance { override send(initialContent?: ReactNode): ReacordInstance {
return this.createInstance( return this.createInstance(
new ChannelMessageRenderer(new TestChannel(this.messageContainer)), new ChannelMessageRenderer(new TestChannel(this.messageContainer)),
initialContent, initialContent,
) )
} }
override reply(initialContent?: ReactNode): ReacordInstance { override reply(initialContent?: ReactNode): ReacordInstance {
return this.createInstance( return this.createInstance(
new InteractionReplyRenderer( new InteractionReplyRenderer(
new TestCommandInteraction(this.messageContainer), new TestCommandInteraction(this.messageContainer),
), ),
initialContent, initialContent,
) )
} }
override ephemeralReply(initialContent?: ReactNode): ReacordInstance { override ephemeralReply(initialContent?: ReactNode): ReacordInstance {
return this.reply(initialContent) return this.reply(initialContent)
} }
assertMessages(expected: MessageSample[]) { assertMessages(expected: MessageSample[]) {
return waitFor(() => { return waitFor(() => {
expect(this.sampleMessages()).toEqual(expected) expect(this.sampleMessages()).toEqual(expected)
}) })
} }
async assertRender(content: ReactNode, expected: MessageSample[]) { async assertRender(content: ReactNode, expected: MessageSample[]) {
const instance = this.reply() const instance = this.reply()
instance.render(content) instance.render(content)
await this.assertMessages(expected) await this.assertMessages(expected)
instance.destroy() instance.destroy()
} }
logMessages() { logMessages() {
logPretty(this.sampleMessages()) logPretty(this.sampleMessages())
} }
sampleMessages() { sampleMessages() {
return pruneNullishValues( return pruneNullishValues(
this.messages.map((message) => ({ this.messages.map((message) => ({
...message.options, ...message.options,
actionRows: message.options.actionRows.map((row) => actionRows: message.options.actionRows.map((row) =>
row.map((component) => row.map((component) =>
omit(component, [ omit(component, [
"customId", "customId",
"onClick", "onClick",
"onSelect", "onSelect",
"onSelectValue", "onSelectValue",
]), ]),
), ),
), ),
})), })),
) )
} }
findButtonByLabel(label: string) { findButtonByLabel(label: string) {
return { return {
click: () => { click: () => {
return waitFor(() => { return waitFor(() => {
for (const [component, message] of this.eachComponent()) { for (const [component, message] of this.eachComponent()) {
if (component.type === "button" && component.label === label) { if (component.type === "button" && component.label === label) {
this.handleComponentInteraction( this.handleComponentInteraction(
new TestButtonInteraction(component.customId, message, this), new TestButtonInteraction(component.customId, message, this),
) )
return return
} }
} }
raise(`Couldn't find button with label "${label}"`) raise(`Couldn't find button with label "${label}"`)
}) })
}, },
} }
} }
findSelectByPlaceholder(placeholder: string) { findSelectByPlaceholder(placeholder: string) {
return { return {
select: (...values: string[]) => { select: (...values: string[]) => {
return waitFor(() => { return waitFor(() => {
for (const [component, message] of this.eachComponent()) { for (const [component, message] of this.eachComponent()) {
if ( if (
component.type === "select" && component.type === "select" &&
component.placeholder === placeholder component.placeholder === placeholder
) { ) {
this.handleComponentInteraction( this.handleComponentInteraction(
new TestSelectInteraction( new TestSelectInteraction(
component.customId, component.customId,
message, message,
values, values,
this, this,
), ),
) )
return return
} }
} }
raise(`Couldn't find select with placeholder "${placeholder}"`) raise(`Couldn't find select with placeholder "${placeholder}"`)
}) })
}, },
} }
} }
createMessage(options: MessageOptions) { createMessage(options: MessageOptions) {
return new TestMessage(options, this.messageContainer) return new TestMessage(options, this.messageContainer)
} }
private *eachComponent() { private *eachComponent() {
for (const message of this.messageContainer) { for (const message of this.messageContainer) {
for (const component of message.options.actionRows.flat()) { for (const component of message.options.actionRows.flat()) {
yield [component, message] as const yield [component, message] as const
} }
} }
} }
} }
class TestMessage implements Message { class TestMessage implements Message {
constructor( constructor(
public options: MessageOptions, public options: MessageOptions,
private container: Container<TestMessage>, private container: Container<TestMessage>,
) { ) {
container.add(this) container.add(this)
} }
async edit(options: MessageOptions): Promise<void> { async edit(options: MessageOptions): Promise<void> {
this.options = options this.options = options
} }
async delete(): Promise<void> { async delete(): Promise<void> {
this.container.remove(this) this.container.remove(this)
} }
} }
class TestCommandInteraction implements CommandInteraction { class TestCommandInteraction implements CommandInteraction {
readonly type = "command" readonly type = "command"
readonly id = "test-command-interaction" readonly id = "test-command-interaction"
readonly channelId = "test-channel-id" readonly channelId = "test-channel-id"
constructor(private messageContainer: Container<TestMessage>) {} constructor(private messageContainer: Container<TestMessage>) {}
async reply(messageOptions: MessageOptions): Promise<Message> { async reply(messageOptions: MessageOptions): Promise<Message> {
await setTimeout() await setTimeout()
return new TestMessage(messageOptions, this.messageContainer) return new TestMessage(messageOptions, this.messageContainer)
} }
async followUp(messageOptions: MessageOptions): Promise<Message> { async followUp(messageOptions: MessageOptions): Promise<Message> {
await setTimeout() await setTimeout()
return new TestMessage(messageOptions, this.messageContainer) return new TestMessage(messageOptions, this.messageContainer)
} }
} }
class TestInteraction { class TestInteraction {
readonly id = randomUUID() readonly id = randomUUID()
readonly channelId = "test-channel-id" readonly channelId = "test-channel-id"
constructor( constructor(
readonly customId: string, readonly customId: string,
readonly message: TestMessage, readonly message: TestMessage,
private tester: ReacordTester, private tester: ReacordTester,
) {} ) {}
async update(options: MessageOptions): Promise<void> { async update(options: MessageOptions): Promise<void> {
this.message.options = options this.message.options = options
} }
async deferUpdate(): Promise<void> {} async deferUpdate(): Promise<void> {}
async reply(messageOptions: MessageOptions): Promise<Message> { async reply(messageOptions: MessageOptions): Promise<Message> {
return this.tester.createMessage(messageOptions) return this.tester.createMessage(messageOptions)
} }
async followUp(messageOptions: MessageOptions): Promise<Message> { async followUp(messageOptions: MessageOptions): Promise<Message> {
return this.tester.createMessage(messageOptions) return this.tester.createMessage(messageOptions)
} }
} }
class TestButtonInteraction class TestButtonInteraction
extends TestInteraction extends TestInteraction
implements ButtonInteraction implements ButtonInteraction
{ {
readonly type = "button" readonly type = "button"
readonly event: ButtonClickEvent readonly event: ButtonClickEvent
constructor(customId: string, message: TestMessage, tester: ReacordTester) { constructor(customId: string, message: TestMessage, tester: ReacordTester) {
super(customId, message, tester) super(customId, message, tester)
this.event = new TestButtonClickEvent(tester) this.event = new TestButtonClickEvent(tester)
} }
} }
class TestSelectInteraction class TestSelectInteraction
extends TestInteraction extends TestInteraction
implements SelectInteraction implements SelectInteraction
{ {
readonly type = "select" readonly type = "select"
readonly event: SelectChangeEvent readonly event: SelectChangeEvent
constructor( constructor(
customId: string, customId: string,
message: TestMessage, message: TestMessage,
readonly values: string[], readonly values: string[],
tester: ReacordTester, tester: ReacordTester,
) { ) {
super(customId, message, tester) super(customId, message, tester)
this.event = new TestSelectChangeEvent(values, tester) this.event = new TestSelectChangeEvent(values, tester)
} }
} }
class TestComponentEvent { class TestComponentEvent {
constructor(private tester: ReacordTester) {} constructor(private tester: ReacordTester) {}
message: MessageInfo = {} as any // todo message: MessageInfo = {} as MessageInfo // todo
channel: ChannelInfo = {} as any // todo channel: ChannelInfo = {} as ChannelInfo // todo
user: UserInfo = {} as any // todo user: UserInfo = {} as UserInfo // todo
guild: GuildInfo = {} as any // todo guild: GuildInfo = {} as GuildInfo // todo
reply(content?: ReactNode): ReacordInstance { reply(content?: ReactNode): ReacordInstance {
return this.tester.reply(content) return this.tester.reply(content)
} }
ephemeralReply(content?: ReactNode): ReacordInstance { ephemeralReply(content?: ReactNode): ReacordInstance {
return this.tester.ephemeralReply(content) return this.tester.ephemeralReply(content)
} }
} }
class TestButtonClickEvent class TestButtonClickEvent
extends TestComponentEvent extends TestComponentEvent
implements ButtonClickEvent {} implements ButtonClickEvent {}
class TestSelectChangeEvent class TestSelectChangeEvent
extends TestComponentEvent extends TestComponentEvent
implements SelectChangeEvent implements SelectChangeEvent
{ {
constructor(readonly values: string[], tester: ReacordTester) { constructor(
super(tester) readonly values: string[],
} tester: ReacordTester,
) {
super(tester)
}
} }
class TestChannel implements Channel { class TestChannel implements Channel {
constructor(private messageContainer: Container<TestMessage>) {} constructor(private messageContainer: Container<TestMessage>) {}
async send(messageOptions: MessageOptions): Promise<Message> { async send(messageOptions: MessageOptions): Promise<Message> {
return new TestMessage(messageOptions, this.messageContainer) return new TestMessage(messageOptions, this.messageContainer)
} }
} }

159
packages/reacord/test/text-children.test.tsx
View File

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

115
packages/reacord/test/use-instance.test.tsx
View File

@@ -1,72 +1,71 @@
import React from "react"
import { describe, expect, it } from "vitest"
import type { ReacordInstance } from "../library/main" import type { ReacordInstance } from "../library/main"
import { Button, useInstance } from "../library/main" import { Button, useInstance } from "../library/main"
import type { MessageSample } from "./test-adapter" import type { MessageSample } from "./test-adapter"
import { ReacordTester } from "./test-adapter" import { ReacordTester } from "./test-adapter"
import { describe, expect, it } from "vitest"
describe("useInstance", () => { describe("useInstance", () => {
it("returns the instance of itself", async () => { it("returns the instance of itself", async () => {
let instanceFromHook: ReacordInstance | undefined let instanceFromHook: ReacordInstance | undefined
function TestComponent({ name }: { name: string }) { function TestComponent({ name }: { name: string }) {
const instance = useInstance() const instance = useInstance()
instanceFromHook ??= instance instanceFromHook ??= instance
return ( return (
<> <>
<Button <Button
label={`create ${name}`} label={`create ${name}`}
onClick={(event) => { onClick={(event) => {
event.reply(<TestComponent name="child" />) event.reply(<TestComponent name="child" />)
}} }}
/> />
<Button <Button
label={`destroy ${name}`} label={`destroy ${name}`}
onClick={() => instance.destroy()} onClick={() => instance.destroy()}
/> />
</> </>
) )
} }
function messageOutput(name: string): MessageSample { function messageOutput(name: string): MessageSample {
return { return {
content: "", content: "",
embeds: [], embeds: [],
actionRows: [ actionRows: [
[ [
{ {
type: "button", type: "button",
label: `create ${name}`, label: `create ${name}`,
style: "secondary", style: "secondary",
}, },
{ {
type: "button", type: "button",
label: `destroy ${name}`, label: `destroy ${name}`,
style: "secondary", style: "secondary",
}, },
], ],
], ],
} }
} }
const tester = new ReacordTester() const tester = new ReacordTester()
const instance = tester.send(<TestComponent name="parent" />) const instance = tester.send(<TestComponent name="parent" />)
await tester.assertMessages([messageOutput("parent")]) await tester.assertMessages([messageOutput("parent")])
expect(instanceFromHook).toBe(instance) expect(instanceFromHook).toBe(instance)
await tester.findButtonByLabel("create parent").click() await tester.findButtonByLabel("create parent").click()
await tester.assertMessages([ await tester.assertMessages([
messageOutput("parent"), messageOutput("parent"),
messageOutput("child"), messageOutput("child"),
]) ])
// this test ensures that the only the child instance is destroyed, // this test ensures that the only the child instance is destroyed,
// and not the parent instance // and not the parent instance
await tester.findButtonByLabel("destroy child").click() await tester.findButtonByLabel("destroy child").click()
await tester.assertMessages([messageOutput("parent")]) await tester.assertMessages([messageOutput("parent")])
await tester.findButtonByLabel("destroy parent").click() await tester.findButtonByLabel("destroy parent").click()
await tester.assertMessages([]) await tester.assertMessages([])
}) })
}) })

7
packages/reacord/tsconfig.json
View File

@@ -1,4 +1,7 @@
{ {
"extends": "@itsmapleleaf/configs/tsconfig.base", "extends": "../../tsconfig.base.json",
"exclude": ["node_modules", "dist"] "compilerOptions": {
"jsx": "react-jsx"
},
"exclude": ["node_modules", "dist"]
} }

16
packages/website/astro.config.mjs
View File

@@ -5,13 +5,11 @@ import { defineConfig } from "astro/config"
// https://astro.build/config // https://astro.build/config
export default defineConfig({ export default defineConfig({
integrations: [ integrations: [
tailwind({ tailwind({
config: { applyBaseStyles: false,
applyBaseStyles: false, }),
}, react(),
}), prefetch(),
react(), ],
prefetch(),
],
}) })

72
packages/website/package.json
View File

@@ -1,38 +1,38 @@
{ {
"type": "module", "type": "module",
"name": "website", "name": "website",
"version": "0.4.3", "version": "0.4.3",
"private": true, "private": true,
"sideEffects": false, "sideEffects": false,
"scripts": { "scripts": {
"dev": "run-p --race --print-label dev:*", "dev": "run-p --race --print-label dev:*",
"dev:typedoc": "typedoc --watch", "dev:typedoc": "typedoc --watch",
"dev:astro": "astro dev", "dev:astro": "astro dev",
"start": "astro preview", "start": "astro preview",
"build": "typedoc && astro build" "build": "typedoc && astro build"
}, },
"dependencies": { "dependencies": {
"@astrojs/prefetch": "^0.2.0", "@astrojs/prefetch": "^0.3.0",
"@astrojs/react": "^2.1.0", "@astrojs/react": "^2.2.2",
"@fontsource/jetbrains-mono": "^4.5.12", "@fontsource/jetbrains-mono": "^4.5.12",
"@fontsource/rubik": "^4.5.14", "@fontsource/rubik": "^4.5.14",
"@heroicons/react": "^2.0.16", "@heroicons/react": "^2.0.18",
"@tailwindcss/typography": "^0.5.9", "@tailwindcss/typography": "^0.5.9",
"astro": "^2.1.2", "astro": "^2.10.9",
"clsx": "^1.2.1", "clsx": "^2.0.0",
"reacord": "workspace:*", "reacord": "workspace:*",
"react": "^18.2.0", "react": "^18.2.0",
"react-dom": "^18.2.0" "react-dom": "^18.2.0"
}, },
"devDependencies": { "devDependencies": {
"@astrojs/tailwind": "^3.1.0", "@astrojs/tailwind": "^4.0.0",
"@types/node": "*", "@total-typescript/ts-reset": "^0.4.2",
"@types/react": "^18.0.28", "@types/node": "^20.5.0",
"@types/react-dom": "^18.0.11", "@types/react": "^18.2.20",
"npm-run-all": "^4.1.5", "@types/react-dom": "^18.2.7",
"tailwindcss": "^3.2.7", "npm-run-all": "^4.1.5",
"typedoc": "^0.23.26", "tailwindcss": "^3.3.3",
"typescript": "^4.9.5", "typedoc": "^0.24.8",
"wait-on": "^7.0.1" "wait-on": "^7.0.1"
} }
} }

318
packages/website/src/components/landing-animation.tsx
View File

@@ -5,191 +5,191 @@ import cursorIbeamUrl from "~/assets/cursor-ibeam.png"
import cursorUrl from "~/assets/cursor.png" import cursorUrl from "~/assets/cursor.png"
const defaultState = { const defaultState = {
chatInputText: "", chatInputText: "",
chatInputCursorVisible: true, chatInputCursorVisible: true,
messageVisible: false, messageVisible: false,
count: 0, count: 0,
cursorLeft: "25%", cursorLeft: "25%",
cursorBottom: "-15px", cursorBottom: "-15px",
} }
const delay = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms)) const delay = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms))
const animationFrame = () => const animationFrame = () =>
new Promise((resolve) => requestAnimationFrame(resolve)) new Promise((resolve) => requestAnimationFrame(resolve))
export function LandingAnimation() { export function LandingAnimation() {
const [state, setState] = useState(defaultState) const [state, setState] = useState(defaultState)
const chatInputRef = useRef<HTMLDivElement>(null) const chatInputRef = useRef<HTMLDivElement>(null)
const addRef = useRef<HTMLDivElement>(null) const addRef = useRef<HTMLDivElement>(null)
const deleteRef = useRef<HTMLDivElement>(null) const deleteRef = useRef<HTMLDivElement>(null)
const cursorRef = useRef<HTMLImageElement>(null) const cursorRef = useRef<HTMLImageElement>(null)
useEffect(() => { useEffect(() => {
const animateClick = (element: HTMLElement) => const animateClick = (element: HTMLElement) =>
element.animate( element.animate(
[{ transform: `translateY(2px)` }, { transform: `translateY(0px)` }], [{ transform: `translateY(2px)` }, { transform: `translateY(0px)` }],
300, 300,
) )
let running = true let running = true
void (async () => { void (async () => {
while (running) { while (running) {
setState(defaultState) setState(defaultState)
await delay(700) await delay(700)
for (const letter of "/counter") { for (const letter of "/counter") {
setState((state) => ({ setState((state) => ({
...state, ...state,
chatInputText: state.chatInputText + letter, chatInputText: state.chatInputText + letter,
})) }))
await delay(100) await delay(100)
} }
await delay(1000) await delay(1000)
setState((state) => ({ setState((state) => ({
...state, ...state,
messageVisible: true, messageVisible: true,
chatInputText: "", chatInputText: "",
})) }))
await delay(1000) await delay(1000)
setState((state) => ({ setState((state) => ({
...state, ...state,
cursorLeft: "70px", cursorLeft: "70px",
cursorBottom: "40px", cursorBottom: "40px",
})) }))
await delay(1500) await delay(1500)
for (let i = 0; i < 3; i++) { for (let i = 0; i < 3; i++) {
setState((state) => ({ setState((state) => ({
...state, ...state,
count: state.count + 1, count: state.count + 1,
chatInputCursorVisible: false, chatInputCursorVisible: false,
})) }))
animateClick(addRef.current!) animateClick(addRef.current!)
await delay(700) await delay(700)
} }
await delay(500) await delay(500)
setState((state) => ({ setState((state) => ({
...state, ...state,
cursorLeft: "140px", cursorLeft: "140px",
})) }))
await delay(1000) await delay(1000)
animateClick(deleteRef.current!) animateClick(deleteRef.current!)
setState((state) => ({ ...state, messageVisible: false })) setState((state) => ({ ...state, messageVisible: false }))
await delay(1000) await delay(1000)
setState(() => ({ setState(() => ({
...defaultState, ...defaultState,
chatInputCursorVisible: false, chatInputCursorVisible: false,
})) }))
await delay(500) await delay(500)
} }
})() })()
return () => { return () => {
running = false running = false
} }
}, []) }, [])
useEffect(() => { useEffect(() => {
let running = true let running = true
void (async () => { void (async () => {
while (running) { while (running) {
// check if the cursor is in the input // check if the cursor is in the input
const cursorRect = cursorRef.current!.getBoundingClientRect() const cursorRect = cursorRef.current!.getBoundingClientRect()
const chatInputRect = chatInputRef.current!.getBoundingClientRect() const chatInputRect = chatInputRef.current!.getBoundingClientRect()
const isOverInput = const isOverInput =
cursorRef.current && cursorRef.current &&
chatInputRef.current && chatInputRef.current &&
cursorRect.top + cursorRect.height / 2 > chatInputRect.top cursorRect.top + cursorRect.height / 2 > chatInputRect.top
cursorRef.current!.src = isOverInput ? cursorIbeamUrl : cursorUrl cursorRef.current!.src = isOverInput ? cursorIbeamUrl : cursorUrl
await animationFrame() await animationFrame()
} }
})() })()
return () => { return () => {
running = false running = false
} }
}) })
return ( return (
<div <div
className="grid gap-2 relative pointer-events-none select-none" className="pointer-events-none relative grid select-none gap-2"
role="presentation" role="presentation"
> >
<div <div
className={clsx( className={clsx(
"bg-slate-800 p-4 rounded-lg shadow transition", "rounded-lg bg-slate-800 p-4 shadow transition",
state.messageVisible ? "opacity-100" : "opacity-0 -translate-y-2", state.messageVisible ? "opacity-100" : "-translate-y-2 opacity-0",
)} )}
> >
<div className="flex items-start gap-4"> <div className="flex items-start gap-4">
<div className="w-12 h-12 p-2 rounded-full bg-no-repeat bg-contain bg-black/25"> <div className="h-12 w-12 rounded-full bg-black/25 bg-contain bg-no-repeat p-2">
<img <img
src={blobComfyUrl} src={blobComfyUrl}
alt="" alt=""
className="object-contain scale-90 w-full h-full" className="h-full w-full scale-90 object-contain"
/> />
</div> </div>
<div> <div>
<p className="font-bold">comfybot</p> <p className="font-bold">comfybot</p>
<p>this button was clicked {state.count} times</p> <p>this button was clicked {state.count} times</p>
<div className="mt-2 flex flex-row gap-3"> <div className="mt-2 flex flex-row gap-3">
<div <div
ref={addRef} ref={addRef}
className="bg-emerald-700 text-white py-1.5 px-3 text-sm rounded" className="rounded bg-emerald-700 px-3 py-1.5 text-sm text-white"
> >
+1 +1
</div> </div>
<div <div
ref={deleteRef} ref={deleteRef}
className="bg-red-700 text-white py-1.5 px-3 text-sm rounded" className="rounded bg-red-700 px-3 py-1.5 text-sm text-white"
> >
🗑 delete 🗑 delete
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div <div
className="bg-slate-700 pb-2 pt-1.5 px-4 rounded-lg shadow" className="rounded-lg bg-slate-700 px-4 pb-2 pt-1.5 shadow"
ref={chatInputRef} ref={chatInputRef}
> >
<span <span
className={clsx( className={clsx(
"text-sm after:content-[attr(data-after)] after:relative after:-top-px after:-left-[2px]", "text-sm after:relative after:-left-[2px] after:-top-px after:content-[attr(data-after)]",
state.chatInputCursorVisible state.chatInputCursorVisible
? "after:opacity-100" ? "after:opacity-100"
: "after:opacity-0", : "after:opacity-0",
)} )}
data-after="|" data-after="|"
> >
{state.chatInputText || ( {state.chatInputText || (
<span className="opacity-50 block absolute translate-y-1"> <span className="absolute block translate-y-1 opacity-50">
Message #showing-off-reacord Message #showing-off-reacord
</span> </span>
)} )}
</span> </span>
</div> </div>
<img <img
src={cursorUrl} src={cursorUrl}
alt="" alt=""
className="transition-all duration-500 absolute scale-75 bg-transparent" className="absolute scale-75 bg-transparent transition-all duration-500"
style={{ left: state.cursorLeft, bottom: state.cursorBottom }} style={{ left: state.cursorLeft, bottom: state.cursorBottom }}
ref={cursorRef} ref={cursorRef}
/> />
</div> </div>
) )
} }

12
packages/website/src/components/menu-item.astro
View File

@@ -1,13 +1,13 @@
--- ---
export type Props = { export interface Props {
icon: (props: { class?: string; className?: string }) => any icon: (props: { class?: string; className?: string }) => unknown
label: string label: string
} }
--- ---
<div <div
class="px-3 py-2 transition text-left font-medium block w-full opacity-50 inline-flex gap-1 items-center hover:opacity-100 hover:text-emerald-500" class="flex w-full items-center gap-1 px-3 py-2 text-left font-medium opacity-50 transition hover:text-emerald-500 hover:opacity-100"
> >
<Astro.props.icon class="inline-icon" className="inline-icon" /> <Astro.props.icon class="inline-icon" className="inline-icon" />
<span class="flex-1">{Astro.props.label}</span> <span class="flex-1">{Astro.props.label}</span>
</div> </div>

8
packages/website/src/components/nav-link.astro
View File

@@ -1,6 +1,6 @@
--- ---
export type Props = astroHTML.JSX.AnchorHTMLAttributes & { export type Props = astroHTML.JSX.AnchorHTMLAttributes & {
href: string href: string
} }
const removeTrailingSlash = (str: string) => str.replace(/\/$/, "") const removeTrailingSlash = (str: string) => str.replace(/\/$/, "")
@@ -8,10 +8,10 @@ const removeTrailingSlash = (str: string) => str.replace(/\/$/, "")
const linkUrl = new URL(Astro.props.href, Astro.url) const linkUrl = new URL(Astro.props.href, Astro.url)
const isActive = const isActive =
removeTrailingSlash(Astro.url.pathname) === removeTrailingSlash(Astro.url.pathname) ===
removeTrailingSlash(linkUrl.pathname) removeTrailingSlash(linkUrl.pathname)
--- ---
<a {...Astro.props} data-active={isActive || undefined}> <a {...Astro.props} data-active={isActive || undefined}>
<slot /> <slot />
</a> </a>

12
packages/website/src/content/config.ts
View File

@@ -1,10 +1,10 @@
import { defineCollection, z } from "astro:content" import { defineCollection, z } from "astro:content"
export const collections = { export const collections = {
guides: defineCollection({ guides: defineCollection({
schema: z.object({ schema: z.object({
title: z.string(), title: z.string(),
description: z.string(), description: z.string(),
}), }),
}), }),
} }

2
packages/website/src/content/guides/0-getting-started.md
View File

@@ -38,7 +38,7 @@ const client = new Client()
const reacord = new ReacordDiscordJs(client) const reacord = new ReacordDiscordJs(client)
client.on("ready", () => { client.on("ready", () => {
console.log("Ready!") console.log("Ready!")
}) })
await client.login(process.env.BOT_TOKEN) await client.login(process.env.BOT_TOKEN)

122
packages/website/src/content/guides/1-sending-messages.md
View File

@@ -12,7 +12,7 @@ You can send messages via Reacord to a channel like so.
const channelId = "abc123deadbeef" const channelId = "abc123deadbeef"
client.on("ready", () => { client.on("ready", () => {
reacord.send(channelId, "Hello, world!") reacord.send(channelId, "Hello, world!")
}) })
``` ```
@@ -22,21 +22,21 @@ Components rendered through this instance can include state and effects, and the
```jsx ```jsx
function Uptime() { function Uptime() {
const [startTime] = useState(Date.now()) const [startTime] = useState(Date.now())
const [currentTime, setCurrentTime] = useState(Date.now()) const [currentTime, setCurrentTime] = useState(Date.now())
useEffect(() => { useEffect(() => {
const interval = setInterval(() => { const interval = setInterval(() => {
setCurrentTime(Date.now()) setCurrentTime(Date.now())
}, 3000) }, 3000)
return () => clearInterval(interval) return () => clearInterval(interval)
}, []) }, [])
return <>this message has been shown for {currentTime - startTime}ms</> return <>this message has been shown for {currentTime - startTime}ms</>
} }
client.on("ready", () => { client.on("ready", () => {
reacord.send(channelId, <Uptime />) reacord.send(channelId, <Uptime />)
}) })
``` ```
@@ -46,9 +46,9 @@ The instance can be rendered to multiple times, which will update the message ea
const Hello = ({ subject }) => <>Hello, {subject}!</> const Hello = ({ subject }) => <>Hello, {subject}!</>
client.on("ready", () => { client.on("ready", () => {
const instance = reacord.send(channel) const instance = reacord.send(channel)
instance.render(<Hello subject="World" />) instance.render(<Hello subject="World" />)
instance.render(<Hello subject="Moon" />) instance.render(<Hello subject="Moon" />)
}) })
``` ```
@@ -63,9 +63,9 @@ By default, Reacord has a max limit on the number of active instances, and deact
```js ```js
const reacord = new ReacordDiscordJs(client, { const reacord = new ReacordDiscordJs(client, {
// after sending four messages, // after sending four messages,
// the first one will be deactivated // the first one will be deactivated
maxInstances: 3, maxInstances: 3,
}) })
``` ```
@@ -79,24 +79,24 @@ To reply to a command interaction, use the `.reply()` function. This function re
```jsx ```jsx
import { Client } from "discord.js" import { Client } from "discord.js"
import * as React from "react"
import { Button, ReacordDiscordJs } from "reacord" import { Button, ReacordDiscordJs } from "reacord"
import * as React from "react"
const client = new Client({ intents: [] }) const client = new Client({ intents: [] })
const reacord = new ReacordDiscordJs(client) const reacord = new ReacordDiscordJs(client)
client.on("ready", () => { client.on("ready", () => {
client.application?.commands.create({ client.application?.commands.create({
name: "ping", name: "ping",
description: "pong!", description: "pong!",
}) })
}) })
client.on("interactionCreate", (interaction) => { client.on("interactionCreate", (interaction) => {
if (interaction.isCommand() && interaction.commandName === "ping") { if (interaction.isCommand() && interaction.commandName === "ping") {
// Use the reply() function instead of send // Use the reply() function instead of send
reacord.reply(interaction, <>pong!</>) reacord.reply(interaction, <>pong!</>)
} }
}) })
client.login(process.env.DISCORD_TOKEN) client.login(process.env.DISCORD_TOKEN)
@@ -110,40 +110,40 @@ However, the process of creating commands can get really repetitive and error-pr
```jsx ```jsx
function handleCommands(client, commands) { function handleCommands(client, commands) {
client.on("ready", () => { client.on("ready", () => {
for (const { name, description } of commands) { for (const { name, description } of commands) {
client.application?.commands.create({ name, description }) client.application?.commands.create({ name, description })
} }
}) })
client.on("interactionCreate", (interaction) => { client.on("interactionCreate", (interaction) => {
if (interaction.isCommand()) { if (interaction.isCommand()) {
for (const command of commands) { for (const command of commands) {
if (interaction.commandName === command.name) { if (interaction.commandName === command.name) {
command.run(interaction) command.run(interaction)
} }
} }
} }
}) })
} }
``` ```
```jsx ```jsx
handleCommands(client, [ handleCommands(client, [
{ {
name: "ping", name: "ping",
description: "pong!", description: "pong!",
run: (interaction) => { run: (interaction) => {
reacord.reply(interaction, <>pong!</>) reacord.reply(interaction, <>pong!</>)
}, },
}, },
{ {
name: "hi", name: "hi",
description: "say hi", description: "say hi",
run: (interaction) => { run: (interaction) => {
reacord.reply(interaction, <>hi</>) reacord.reply(interaction, <>hi</>)
}, },
}, },
]) ])
``` ```
@@ -153,13 +153,13 @@ Ephemeral replies are replies that only appear for one user. To create them, use
```tsx ```tsx
handleCommands(client, [ handleCommands(client, [
{ {
name: "pong", name: "pong",
description: "pong, but in secret", description: "pong, but in secret",
run: (interaction) => { run: (interaction) => {
reacord.ephemeralReply(interaction, <>(pong)</>) reacord.ephemeralReply(interaction, <>(pong)</>)
}, },
}, },
]) ])
``` ```

48
packages/website/src/content/guides/2-embeds.md
View File

@@ -12,14 +12,14 @@ Reacord comes with an `<Embed />` component for sending rich embeds.
import { Embed } from "reacord" import { Embed } from "reacord"
function FancyMessage({ title, description }) { function FancyMessage({ title, description }) {
return ( return (
<Embed <Embed
title={title} title={title}
description={description} description={description}
color={0x00ff00} color={0x00ff00}
timestamp={Date.now()} timestamp={Date.now()}
/> />
) )
} }
``` ```
@@ -33,30 +33,30 @@ Reacord also comes with multiple embed components, for defining embeds on a piec
import { Embed, EmbedTitle } from "reacord" import { Embed, EmbedTitle } from "reacord"
function FancyDetails({ title, description }) { function FancyDetails({ title, description }) {
return ( return (
<> <>
<EmbedTitle>{title}</EmbedTitle> <EmbedTitle>{title}</EmbedTitle>
{/* embed descriptions are just text */} {/* embed descriptions are just text */}
{description} {description}
</> </>
) )
} }
function FancyMessage({ children }) { function FancyMessage({ children }) {
return ( return (
<Embed color={0x00ff00} timestamp={Date.now()}> <Embed color={0x00ff00} timestamp={Date.now()}>
{children} {children}
</Embed> </Embed>
) )
} }
``` ```
```jsx ```jsx
reacord.send( reacord.send(
channelId, channelId,
<FancyMessage> <FancyMessage>
<FancyDetails title="Hello" description="World" /> <FancyDetails title="Hello" description="World" />
</FancyMessage>, </FancyMessage>,
) )
``` ```

30
packages/website/src/content/guides/3-buttons.md
View File

@@ -12,14 +12,14 @@ Use the `<Button />` component to create a message with a button, and use the `o
import { Button } from "reacord" import { Button } from "reacord"
function Counter() { function Counter() {
const [count, setCount] = useState(0) const [count, setCount] = useState(0)
return ( return (
<> <>
You've clicked the button {count} times. You've clicked the button {count} times.
<Button label="+1" onClick={() => setCount(count + 1)} /> <Button label="+1" onClick={() => setCount(count + 1)} />
</> </>
) )
} }
``` ```
@@ -29,17 +29,17 @@ The `onClick` callback receives an `event` object. It includes some information,
import { Button } from "reacord" import { Button } from "reacord"
function TheButton() { function TheButton() {
function handleClick(event) { function handleClick(event) {
const name = event.guild.member.displayName || event.user.username const name = event.guild.member.displayName || event.user.username
const publicReply = event.reply(`${name} clicked the button. wow`) const publicReply = event.reply(`${name} clicked the button. wow`)
setTimeout(() => publicReply.destroy(), 3000) setTimeout(() => publicReply.destroy(), 3000)
const privateReply = event.ephemeralReply("good job, you clicked it") const privateReply = event.ephemeralReply("good job, you clicked it")
privateReply.deactivate() // we don't need to listen to updates on this privateReply.deactivate() // we don't need to listen to updates on this
} }
return <Button label="click me i dare you" onClick={handleClick} /> return <Button label="click me i dare you" onClick={handleClick} />
} }
``` ```

12
packages/website/src/content/guides/4-links.md
View File

@@ -12,12 +12,12 @@ In Discord, links are a type of button, and they work similarly. Clicking on it
import { Link } from "reacord" import { Link } from "reacord"
function AwesomeLinks() { function AwesomeLinks() {
return ( return (
<> <>
<Link label="look at this" url="https://google.com" /> <Link label="look at this" url="https://google.com" />
<Link label="wow" url="https://youtube.com/watch?v=dQw4w9WgXcQ" /> <Link label="wow" url="https://youtube.com/watch?v=dQw4w9WgXcQ" />
</> </>
) )
} }
``` ```

80
packages/website/src/content/guides/5-select-menu.md
View File

@@ -10,40 +10,40 @@ To create a select menu, use the `Select` component, and pass a list of `Option`
```jsx ```jsx
export function FruitSelect({ onConfirm }) { export function FruitSelect({ onConfirm }) {
const [value, setValue] = useState() const [value, setValue] = useState()
return ( return (
<> <>
<Select <Select
placeholder="choose a fruit" placeholder="choose a fruit"
value={value} value={value}
onChangeValue={setValue} onChangeValue={setValue}
> >
<Option value="🍎" /> <Option value="🍎" />
<Option value="🍌" /> <Option value="🍌" />
<Option value="🍒" /> <Option value="🍒" />
</Select> </Select>
<Button <Button
label="confirm" label="confirm"
disabled={value == undefined} disabled={value == undefined}
onClick={() => { onClick={() => {
if (value) onConfirm(value) if (value) onConfirm(value)
}} }}
/> />
</> </>
) )
} }
``` ```
```jsx ```jsx
const instance = reacord.send( const instance = reacord.send(
channelId, channelId,
<FruitSelect <FruitSelect
onConfirm={(value) => { onConfirm={(value) => {
instance.render(`you chose ${value}`) instance.render(`you chose ${value}`)
instance.deactivate() instance.deactivate()
}} }}
/>, />,
) )
``` ```
@@ -51,19 +51,19 @@ For a multi-select, use the `multiple` prop, then you can use `values` and `onCh
```tsx ```tsx
export function FruitSelect({ onConfirm }) { export function FruitSelect({ onConfirm }) {
const [values, setValues] = useState([]) const [values, setValues] = useState([])
return ( return (
<Select <Select
placeholder="choose a fruit" placeholder="choose a fruit"
values={values} values={values}
onChangeMultiple={setValues} onChangeMultiple={setValues}
> >
<Option value="🍎" /> <Option value="🍎" />
<Option value="🍌" /> <Option value="🍌" />
<Option value="🍒" /> <Option value="🍒" />
</Select> </Select>
) )
} }
``` ```

16
packages/website/src/content/guides/6-use-instance.md
View File

@@ -12,14 +12,14 @@ You can use `useInstance` to get the current [instance](/guides/sending-messages
import { Button, useInstance } from "reacord" import { Button, useInstance } from "reacord"
function SelfDestruct() { function SelfDestruct() {
const instance = useInstance() const instance = useInstance()
return ( return (
<Button <Button
style="danger" style="danger"
label="delete this" label="delete this"
onClick={() => instance.destroy()} onClick={() => instance.destroy()}
/> />
) )
} }
reacord.send(channelId, <SelfDestruct />) reacord.send(channelId, <SelfDestruct />)

1
packages/website/src/env.d.ts vendored
View File

@@ -1,2 +1,3 @@
// eslint-disable-next-line @typescript-eslint/triple-slash-reference
/// <reference path="../.astro/types.d.ts" /> /// <reference path="../.astro/types.d.ts" />
/// <reference types="astro/client" /> /// <reference types="astro/client" />

2
packages/website/src/pages/guides/[slug].astro
View File

@@ -6,7 +6,7 @@ import Layout from "~/components/layout.astro"
import MainNavigation from "~/components/main-navigation.astro" import MainNavigation from "~/components/main-navigation.astro"
import NavLink from "~/components/nav-link.astro" import NavLink from "~/components/nav-link.astro"
export type Props = { export interface Props {
guide: CollectionEntry<"guides"> guide: CollectionEntry<"guides">
} }

Some files were not shown because too many files have changed in this diff Show More