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

non-interactive buttons

Browse Source
This commit is contained in:
MapleLeaf
2021-12-21 14:57:23 -06:00
parent 249a2a2457
commit f53c6dba22
8 changed files with 175 additions and 150 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
integration/rendering.test.tsx
View File

@@ -5,7 +5,7 @@ import React from "react"
import { omit } from "../src/helpers/omit.js"
import { raise } from "../src/helpers/raise.js"
import type { ReacordRoot } from "../src/main.js"
import { createRoot, Embed, EmbedField, Text } from "../src/main.js"
import { Button, createRoot, Embed, EmbedField, Text } from "../src/main.js"
import { testBotToken, testChannelId } from "./test-environment.js"
const client = new Client({
@@ -112,6 +112,15 @@ test("kitchen sink", async () => {
field content but inline
</EmbedField>
</Embed>
<Button style="primary">primary button</Button>
<Button style="danger">danger button</Button>
<Button style="success">success button</Button>
<Button style="secondary">secondary button</Button>
<Button>secondary by default</Button>
<Button>
complex <Text>button</Text> text
</Button>
<Button disabled>disabled button</Button>
</>,
)
await assertMessages([
@@ -150,6 +159,60 @@ test("kitchen sink", async () => {
],
},
],
components: [
{
type: "ACTION_ROW",
components: [
{
type: "BUTTON",
label: "primary button",
style: "PRIMARY",
disabled: false,
},
{
type: "BUTTON",
label: "danger button",
style: "DANGER",
disabled: false,
},
{
type: "BUTTON",
label: "success button",
style: "SUCCESS",
disabled: false,
},
{
type: "BUTTON",
label: "secondary button",
style: "SECONDARY",
disabled: false,
},
{
type: "BUTTON",
label: "secondary by default",
style: "SECONDARY",
disabled: false,
},
],
},
{
type: "ACTION_ROW",
components: [
{
type: "BUTTON",
label: "complex button text",
style: "SECONDARY",
disabled: false,
},
{
type: "BUTTON",
label: "disabled button",
style: "SECONDARY",
disabled: true,
},
],
},
],
},
])
})
@@ -171,7 +234,7 @@ function extractMessageData(message: Message): MessageOptions {
return {
content: nonEmptyOrUndefined(message.content),
embeds: nonEmptyOrUndefined(
pruneUndefinedKeys(
pruneUndefinedValues(
message.embeds.map((embed) => ({
title: embed.title ?? undefined,
description: embed.description ?? undefined,
@@ -191,10 +254,40 @@ function extractMessageData(message: Message): MessageOptions {
})),
),
),
components: nonEmptyOrUndefined(
message.components.map((row) => ({
type: "ACTION_ROW",
components: row.components.map((component) => {
if (component.type === "BUTTON") {
return pruneUndefinedValues({
type: "BUTTON",
style: component.style ?? "SECONDARY",
label: component.label ?? undefined,
emoji: component.emoji?.name,
url: component.url ?? undefined,
disabled: component.disabled ?? undefined,
})
}
if (component.type === "SELECT_MENU") {
return pruneUndefinedValues({
type: "SELECT_MENU",
disabled: component.disabled ?? undefined,
options: component.options.map((option) => ({
label: option.label ?? undefined,
value: option.value ?? undefined,
})),
})
}
raise(`unknown component type ${(component as any).type}`)
}),
})),
),
}
}
function pruneUndefinedKeys<T>(input: T) {
function pruneUndefinedValues<T>(input: T) {
return JSON.parse(JSON.stringify(input))
}

3
notes.md
View File

@@ -12,10 +12,11 @@
- [x] image - url
- [x] fields - name, value, inline
- message components
- [ ] buttons
- [x] buttons
- [ ] links
- [ ] select
- [ ] action row
- [ ] button onClick
# cool ideas / polish

5
package.json
View File

@@ -27,6 +27,7 @@
"@types/react": "*",
"@types/react-reconciler": "^0.26.4",
"immer": "^9.0.7",
"nanoid": "^3.1.30",
"react-reconciler": "^0.26.2"
},
"peerDependencies": {
@@ -38,8 +39,6 @@
"@types/jest": "^27.0.3",
"@typescript-eslint/eslint-plugin": "^5.8.0",
"@typescript-eslint/parser": "^5.8.0",
"c8": "^7.10.0",
"chai": "^4.3.4",
"discord.js": "^13.3.1",
"dotenv": "^10.0.0",
"esbuild": "^0.14.6",
@@ -53,10 +52,8 @@
"eslint-plugin-react-hooks": "^4.3.0",
"eslint-plugin-unicorn": "^39.0.0",
"jest": "^27.4.5",
"nanoid": "^3.1.30",
"prettier": "^2.5.1",
"react": "^17.0.2",
"should": "^13.2.3",
"tsup": "^5.11.6",
"typescript": "^4.5.4"
},

143
pnpm-lock.yaml generated
View File

@@ -11,8 +11,6 @@ importers:
'@types/react-reconciler': ^0.26.4
'@typescript-eslint/eslint-plugin': ^5.8.0
'@typescript-eslint/parser': ^5.8.0
c8: ^7.10.0
chai: ^4.3.4
discord.js: ^13.3.1
dotenv: ^10.0.0
esbuild: ^0.14.6
@@ -31,7 +29,6 @@ importers:
prettier: ^2.5.1
react: ^17.0.2
react-reconciler: ^0.26.2
should: ^13.2.3
tsup: ^5.11.6
typescript: ^4.5.4
dependencies:
@@ -39,14 +36,13 @@ importers:
'@types/react': 17.0.37
'@types/react-reconciler': 0.26.4
immer: 9.0.7
nanoid: 3.1.30
react-reconciler: 0.26.2_react@17.0.2
devDependencies:
'@itsmapleleaf/configs': 1.1.2
'@types/jest': 27.0.3
'@typescript-eslint/eslint-plugin': 5.8.0_836011a006f4f5d67178564baf2b6d34
'@typescript-eslint/parser': 5.8.0_eslint@8.5.0+typescript@4.5.4
c8: 7.10.0
chai: 4.3.4
discord.js: 13.3.1
dotenv: 10.0.0
esbuild: 0.14.6
@@ -60,10 +56,8 @@ importers:
eslint-plugin-react-hooks: 4.3.0_eslint@8.5.0
eslint-plugin-unicorn: 39.0.0_eslint@8.5.0
jest: 27.4.5
nanoid: 3.1.30
prettier: 2.5.1
react: 17.0.2
should: 13.2.3
tsup: 5.11.6_typescript@4.5.4
typescript: 4.5.4
@@ -1363,10 +1357,6 @@ packages:
engines: {node: '>=8'}
dev: true
/assertion-error/1.1.0:
resolution: {integrity: sha512-jgsaNduz+ndvGyFt3uSuWqvy4lCnIJiovtouQN5JZHOKCS2QuhEdbcQHFhVksz2N2U9hXJo8odG7ETyWlEeuDw==}
dev: true
/assign-symbols/1.0.0:
resolution: {integrity: sha1-WWZ/QfrdTyDMvCu5a41Pf3jsA2c=}
engines: {node: '>=0.10.0'}
@@ -1638,25 +1628,6 @@ packages:
esbuild: 0.14.6
dev: true
/c8/7.10.0:
resolution: {integrity: sha512-OAwfC5+emvA6R7pkYFVBTOtI5ruf9DahffGmIqUc9l6wEh0h7iAFP6dt/V9Ioqlr2zW5avX9U9/w1I4alTRHkA==}
engines: {node: '>=10.12.0'}
hasBin: true
dependencies:
'@bcoe/v8-coverage': 0.2.3
'@istanbuljs/schema': 0.1.3
find-up: 5.0.0
foreground-child: 2.0.0
istanbul-lib-coverage: 3.2.0
istanbul-lib-report: 3.0.0
istanbul-reports: 3.1.1
rimraf: 3.0.2
test-exclude: 6.0.0
v8-to-istanbul: 8.1.0
yargs: 16.2.0
yargs-parser: 20.2.9
dev: true
/cac/6.7.12:
resolution: {integrity: sha512-rM7E2ygtMkJqD9c7WnFU6fruFcN3xe4FM5yUmgxhZzIKJk4uHl9U/fhwdajGFQbQuv43FAUo1Fe8gX/oIKDeSA==}
engines: {node: '>=8'}
@@ -1713,18 +1684,6 @@ packages:
rsvp: 4.8.5
dev: true
/chai/4.3.4:
resolution: {integrity: sha512-yS5H68VYOCtN1cjfwumDSuzn/9c+yza4f3reKXlE5rUg7SFcCEy90gJvydNgOYtblyf4Zi6jIWRnXOgErta0KA==}
engines: {node: '>=4'}
dependencies:
assertion-error: 1.1.0
check-error: 1.0.2
deep-eql: 3.0.1
get-func-name: 2.0.0
pathval: 1.1.1
type-detect: 4.0.8
dev: true
/chalk/2.4.2:
resolution: {integrity: sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==}
engines: {node: '>=4'}
@@ -1756,10 +1715,6 @@ packages:
resolution: {integrity: sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==}
dev: true
/check-error/1.0.2:
resolution: {integrity: sha1-V00xLt2Iu13YkS6Sht1sCu1KrII=}
dev: true
/chokidar/3.5.2:
resolution: {integrity: sha512-ekGhOnNVPgT77r4K/U3GDhu+FQ2S8TnK/s2KbIGXi0SZWuwkZ2QNyfWdZW+TVfn84DpEP7rLeCt2UI6bJ8GwbQ==}
engines: {node: '>= 8.10.0'}
@@ -2033,13 +1988,6 @@ packages:
resolution: {integrity: sha1-JJXduvbrh0q7Dhvp3yLS5aVEMmw=}
dev: true
/deep-eql/3.0.1:
resolution: {integrity: sha512-+QeIQyN5ZuO+3Uk5DYh6/1eKO0m0YmJFGNmFHGACpf1ClL1nmlV/p4gNgbl2pJGxgXb4faqo6UE+M5ACEMyVcw==}
engines: {node: '>=0.12'}
dependencies:
type-detect: 4.0.8
dev: true
/deep-is/0.1.4:
resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
dev: true
@@ -2935,14 +2883,6 @@ packages:
path-exists: 4.0.0
dev: true
/find-up/5.0.0:
resolution: {integrity: sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==}
engines: {node: '>=10'}
dependencies:
locate-path: 6.0.0
path-exists: 4.0.0
dev: true
/flat-cache/3.0.4:
resolution: {integrity: sha512-dm9s5Pw7Jc0GvMYbshN6zchCA9RgQlzzEZX3vylR9IqFfS8XciblUXOKfW6SiuJ0e13eDYZoZV5wdrev7P3Nwg==}
engines: {node: ^10.12.0 || >=12.0.0}
@@ -2960,14 +2900,6 @@ packages:
engines: {node: '>=0.10.0'}
dev: true
/foreground-child/2.0.0:
resolution: {integrity: sha512-dCIq9FpEcyQyXKCkyzmlPTFNgrCzPudOe+mhvJU5zAtlBnGVy2yKxtfsxK2tQBThwq225jcvBjpw1Gr40uzZCA==}
engines: {node: '>=8.0.0'}
dependencies:
cross-spawn: 7.0.3
signal-exit: 3.0.6
dev: true
/form-data/3.0.1:
resolution: {integrity: sha512-RHkBKtLWUVwd7SqRIvCZMEvAMoGUp0XU+seQiZejj0COz3RI3hWP4sCv3gZWWLjJTd7rGwcsF5eKZGii0r/hbg==}
engines: {node: '>= 6'}
@@ -3013,10 +2945,6 @@ packages:
engines: {node: 6.* || 8.* || >= 10.*}
dev: true
/get-func-name/2.0.0:
resolution: {integrity: sha1-6td0q+5y4gQJQzoGY2YCPdaIekE=}
dev: true
/get-intrinsic/1.1.1:
resolution: {integrity: sha512-kWZrnVM42QCiEA2Ig1bG8zjoIMOgxWwYCEeNdwY6Tv/cOSeGpcoX4pXHfKUxNKVoArnrEr2e9srnAxxGIraS9Q==}
dependencies:
@@ -4430,13 +4358,6 @@ packages:
p-locate: 4.1.0
dev: true
/locate-path/6.0.0:
resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
engines: {node: '>=10'}
dependencies:
p-locate: 5.0.0
dev: true
/lodash-es/4.17.21:
resolution: {integrity: sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==}
dev: true
@@ -4617,7 +4538,6 @@ packages:
resolution: {integrity: sha512-zJpuPDwOv8D2zq2WRoMe1HsfZthVewpel9CAvTfc/2mBD1uUT/agc5f7GHGWXlYkFvi1mVxe4IjvP2HNrop7nQ==}
engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
hasBin: true
dev: true
/nanomatch/1.2.13:
resolution: {integrity: sha512-fpoe2T0RbHwBTBUOftAfBPaDEi06ufaUai0mE6Yn1kacc3SnTErfb/h+X94VXzI64rKFHYImXSvdwGGCmwOqCA==}
@@ -4918,13 +4838,6 @@ packages:
p-try: 2.2.0
dev: true
/p-limit/3.1.0:
resolution: {integrity: sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==}
engines: {node: '>=10'}
dependencies:
yocto-queue: 0.1.0
dev: true
/p-locate/2.0.0:
resolution: {integrity: sha1-IKAQOyIqcMj9OcwuWAaA893l7EM=}
engines: {node: '>=4'}
@@ -4939,13 +4852,6 @@ packages:
p-limit: 2.3.0
dev: true
/p-locate/5.0.0:
resolution: {integrity: sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==}
engines: {node: '>=10'}
dependencies:
p-limit: 3.1.0
dev: true
/p-map/2.1.0:
resolution: {integrity: sha512-y3b8Kpd8OAN444hxfBbFfj1FY/RjtTd8tzYwhUqNYXx0fXx2iX4maP4Qr6qhIKbQXI02wTLAda4fYUbDagTUFw==}
engines: {node: '>=6'}
@@ -5051,10 +4957,6 @@ packages:
engines: {node: '>=8'}
dev: true
/pathval/1.1.1:
resolution: {integrity: sha512-Dp6zGqpTdETdR63lehJYPeIOqpiNBNtc7BpWSLrOje7UaIsE5aY92r/AunQA7rsXvet3lrJ3JnZX29UPTKXyKQ==}
dev: true
/picocolors/1.0.0:
resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==}
dev: true
@@ -5520,44 +5422,6 @@ packages:
engines: {node: '>=8'}
dev: true
/should-equal/2.0.0:
resolution: {integrity: sha512-ZP36TMrK9euEuWQYBig9W55WPC7uo37qzAEmbjHz4gfyuXrEUgF8cUvQVO+w+d3OMfPvSRQJ22lSm8MQJ43LTA==}
dependencies:
should-type: 1.4.0
dev: true
/should-format/3.0.3:
resolution: {integrity: sha1-m/yPdPo5IFxT04w01xcwPidxJPE=}
dependencies:
should-type: 1.4.0
should-type-adaptors: 1.1.0
dev: true
/should-type-adaptors/1.1.0:
resolution: {integrity: sha512-JA4hdoLnN+kebEp2Vs8eBe9g7uy0zbRo+RMcU0EsNy+R+k049Ki+N5tT5Jagst2g7EAja+euFuoXFCa8vIklfA==}
dependencies:
should-type: 1.4.0
should-util: 1.0.1
dev: true
/should-type/1.4.0:
resolution: {integrity: sha1-B1bYzoRt/QmEOmlHcZ36DUz/XPM=}
dev: true
/should-util/1.0.1:
resolution: {integrity: sha512-oXF8tfxx5cDk8r2kYqlkUJzZpDBqVY/II2WhvU0n9Y3XYvAYRmeaf1PvvIvTgPnv4KJ+ES5M0PyDq5Jp+Ygy2g==}
dev: true
/should/13.2.3:
resolution: {integrity: sha512-ggLesLtu2xp+ZxI+ysJTmNjh2U0TsC+rQ/pfED9bUZZ4DKefP27D+7YJVVTvKsmjLpIi9jAa7itwDGkDDmt1GQ==}
dependencies:
should-equal: 2.0.0
should-format: 3.0.3
should-type: 1.4.0
should-type-adaptors: 1.1.0
should-util: 1.0.1
dev: true
/side-channel/1.0.4:
resolution: {integrity: sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==}
dependencies:
@@ -6340,8 +6204,3 @@ packages:
y18n: 5.0.8
yargs-parser: 20.2.9
dev: true
/yocto-queue/0.1.0:
resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
engines: {node: '>=10'}
dev: true

67
src/button.tsx Normal file
View File

@@ -0,0 +1,67 @@
import type {
BaseMessageComponentOptions,
EmojiResolvable,
MessageActionRowOptions,
MessageButtonStyle,
MessageOptions,
} from "discord.js"
import { nanoid } from "nanoid"
import React from "react"
import { ContainerInstance } from "./container-instance.js"
import { last } from "./helpers/last.js"
import { pick } from "./helpers/pick.js"
import { toUpper } from "./helpers/to-upper.js"
export type ButtonStyle = Exclude<Lowercase<MessageButtonStyle>, "link">
export type ButtonProps = {
style?: ButtonStyle
emoji?: EmojiResolvable
disabled?: boolean
children?: React.ReactNode
}
export function Button(props: ButtonProps) {
return (
<reacord-element createInstance={() => new ButtonInstance(props)}>
{props.children}
</reacord-element>
)
}
class ButtonInstance extends ContainerInstance {
readonly name = "Button"
constructor(private readonly props: ButtonProps) {
super({ warnOnNonTextChildren: true })
}
override renderToMessage(options: MessageOptions) {
options.components ??= []
// i hate this
let actionRow:
| (Required<BaseMessageComponentOptions> & MessageActionRowOptions)
| undefined = last(options.components)
if (
!actionRow ||
actionRow.components[0]?.type === "SELECT_MENU" ||
actionRow.components.length >= 5
) {
actionRow = {
type: "ACTION_ROW",
components: [],
}
options.components.push(actionRow)
}
actionRow.components.push({
...pick(this.props, "emoji", "disabled"),
type: "BUTTON",
style: this.props.style ? toUpper(this.props.style) : "SECONDARY",
label: this.getChildrenText(),
customId: nanoid(),
})
}
}

3
src/helpers/last.ts Normal file
View File

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

4
src/helpers/to-upper.ts Normal file
View File

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

1
src/main.ts
View File

@@ -1,3 +1,4 @@
export * from "./button"
export * from "./embed"
export * from "./embed-field"
export * from "./root"