16 Commits

Author SHA1 Message Date
itsMapleLeaf
672fcd5bc4 release v0.3.6 2022-04-27 22:39:35 -05:00
itsMapleLeaf
25f34b3715 alias release script 2022-04-27 22:36:32 -05:00
itsMapleLeaf
8a7557f0eb lint/typecheck fixes 2022-04-25 19:58:47 -05:00
itsMapleLeaf
fc3025baaf update configs 2022-04-25 14:52:04 -05:00
itsMapleLeaf
81f32794b4 fix import aliases 2022-04-24 19:52:21 -05:00
itsMapleLeaf
dbf9640b16 lockfile 2022-04-24 19:41:53 -05:00
itsMapleLeaf
a485ebaf74 improve pruneNullishValues + test 2022-04-24 16:05:00 -05:00
itsMapleLeaf
7ef5a7ac9d remove disableComponents function 2022-04-23 03:47:50 -05:00
itsMapleLeaf
6715756c2b fix deactivate overwriting edits 2022-04-23 03:44:50 -05:00
itsMapleLeaf
6851c5419a test improvements 2022-04-23 01:54:52 -05:00
itsMapleLeaf
1ba75492e5 reconciler fix 2022-04-23 00:44:31 -05:00
itsMapleLeaf
aced338d72 use require.resolve for eslint config 2022-04-23 00:37:11 -05:00
itsMapleLeaf
512c0649d8 ignore workspace files 2022-04-23 00:37:00 -05:00
itsMapleLeaf
91b82ca41f fix vitest fn usage 2022-04-22 23:58:05 -05:00
itsMapleLeaf
752ccc080d update remix imports + format 2022-04-22 23:50:01 -05:00
itsMapleLeaf
3c2d3b4683 upgrades 2022-04-22 23:45:30 -05:00
31 changed files with 2933 additions and 1795 deletions

25
.eslintrc.cjs Normal file
View File

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

View File

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

3
.gitignore vendored
View File

@@ -3,4 +3,7 @@ node_modules
.vscode
coverage
.env
*.code-workspace
build
.cache

1
.npmrc Normal file
View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@@ -1,4 +1,3 @@
/* eslint-disable import/no-unused-modules */
export type MaybePromise<T> = T | Promise<T>
export type ValueOf<Type> = Type extends ReadonlyArray<infer Value>

View File

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

View File

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

View File

@@ -298,17 +298,6 @@ function createReacordMessage(message: Discord.Message): Message {
edit: async (options) => {
await message.edit(getDiscordMessageOptions(options))
},
disableComponents: async () => {
for (const actionRow of message.components) {
for (const component of actionRow.components) {
component.setDisabled(true)
}
}
await message.edit({
components: message.components,
})
},
delete: async () => {
await message.delete()
},
@@ -321,10 +310,6 @@ function createEphemeralReacordMessage(): Message {
console.warn("Ephemeral messages can't be edited")
return Promise.resolve()
},
disableComponents: () => {
console.warn("Ephemeral messages can't be edited")
return Promise.resolve()
},
delete: () => {
console.warn("Ephemeral messages can't be deleted")
return Promise.resolve()

View File

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

View File

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

View File

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

View File

@@ -2,7 +2,7 @@
"name": "reacord",
"type": "module",
"description": "Create interactive Discord messages using React.",
"version": "0.3.5",
"version": "0.3.6",
"types": "./dist/main.d.ts",
"homepage": "https://reacord.mapleleaf.dev",
"repository": "https://github.com/itsMapleLeaf/reacord.git",
@@ -46,10 +46,10 @@
"dependencies": {
"@types/node": "*",
"@types/react": "*",
"@types/react-reconciler": "^0.26.4",
"nanoid": "^3.1.31",
"react-reconciler": "^0.26.2",
"rxjs": "^7.5.2"
"@types/react-reconciler": "^0.26.6",
"nanoid": "^3.3.3",
"react-reconciler": "^0.27.0",
"rxjs": "^7.5.5"
},
"peerDependencies": {
"discord.js": "^13.3",
@@ -61,24 +61,24 @@
}
},
"devDependencies": {
"@types/lodash-es": "^4.17.5",
"c8": "^7.11.0",
"discord.js": "^13.5.1",
"dotenv": "^11.0.0",
"@types/lodash-es": "^4.17.6",
"c8": "^7.11.2",
"discord.js": "^13.6.0",
"dotenv": "^16.0.0",
"esbuild": "latest",
"esbuild-jest": "^0.5.0",
"esmo": "^0.13.0",
"esmo": "^0.14.1",
"lodash-es": "^4.17.21",
"nodemon": "^2.0.15",
"prettier": "^2.5.1",
"prettier": "^2.6.2",
"pretty-ms": "^7.0.1",
"react": "^17.0.2",
"release-it": "^14.12.1",
"tsup": "^5.11.11",
"type-fest": "^2.9.0",
"typescript": "^4.5.4",
"vite": "^2.7.10",
"vitest": "^0.0.141"
"react": "^18.0.0",
"release-it": "^14.14.2",
"tsup": "^5.12.6",
"type-fest": "^2.12.2",
"typescript": "^4.6.3",
"vite": "^2.9.5",
"vitest": "^0.10.0"
},
"resolutions": {
"esbuild": "latest"

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@@ -1,5 +1,8 @@
import packageJson from "reacord/package.json"
import type { LinksFunction, LoaderFunction, MetaFunction } from "remix"
import type {
LinksFunction,
LoaderFunction,
MetaFunction,
} from "@remix-run/node"
import {
Links,
LiveReload,
@@ -8,7 +11,8 @@ import {
Scripts,
ScrollRestoration,
useLoaderData,
} from "remix"
} from "@remix-run/react"
import packageJson from "reacord/package.json"
import bannerUrl from "~/assets/banner.png"
import faviconUrl from "~/assets/favicon.png"
import { GuideLinksProvider } from "~/modules/navigation/guide-links-context"
@@ -73,6 +77,7 @@ export default function App() {
return (
<html lang="en" className="bg-slate-900 text-slate-100">
<head>
{/* eslint-disable-next-line unicorn/text-encoding-identifier-case */}
<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<Meta />

View File

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

View File

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

View File

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

View File

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

4260
pnpm-lock.yaml generated

File diff suppressed because it is too large Load Diff