From 803252290d1797de9485fda21e00f253ddecf576 Mon Sep 17 00:00:00 2001 From: MapleLeaf <19603573+itsMapleLeaf@users.noreply.github.com> Date: Thu, 16 Dec 2021 10:10:47 -0600 Subject: [PATCH] wip embeds --- integration/kitchen-sink.tsx | 11 +++++++ .../{text.test.tsx => rendering.test.tsx} | 18 +++++++++-- package.json | 6 ++-- src/components/embed.tsx | 19 ++++++++++++ src/container.ts | 3 +- src/element.ts | 15 +++++++++ src/reconciler.ts | 31 ++++++++++++------- tsconfig.json | 3 ++ 8 files changed, 88 insertions(+), 18 deletions(-) create mode 100644 integration/kitchen-sink.tsx rename integration/{text.test.tsx => rendering.test.tsx} (86%) create mode 100644 src/components/embed.tsx create mode 100644 src/element.ts diff --git a/integration/kitchen-sink.tsx b/integration/kitchen-sink.tsx new file mode 100644 index 0000000..3f5db6a --- /dev/null +++ b/integration/kitchen-sink.tsx @@ -0,0 +1,11 @@ +import React from "react" +import { Embed } from "../src/components.js" + +export function KitchenSink() { + return ( + <> + content + + + ) +} diff --git a/integration/text.test.tsx b/integration/rendering.test.tsx similarity index 86% rename from integration/text.test.tsx rename to integration/rendering.test.tsx index 1bb0c94..44bc649 100644 --- a/integration/text.test.tsx +++ b/integration/rendering.test.tsx @@ -3,6 +3,7 @@ import test from "ava" import { Client, TextChannel } from "discord.js" import { nanoid } from "nanoid" import React, { useState } from "react" +import { Embed } from "../src/components/embed.js" import { raise } from "../src/helpers/raise.js" import { createRoot } from "../src/root.js" import { testBotToken, testChannelId } from "./test-environment.js" @@ -32,7 +33,20 @@ test.after(() => { client.destroy() }) -test("rendering text", async (t) => { +test.only("test", async (t) => { + const root = createRoot(channel) + await root.render( + <> + + + + + , + ) + t.pass() +}) + +test("kitchen sink", async (t) => { const root = createRoot(channel) const content = nanoid() @@ -50,7 +64,7 @@ test("rendering text", async (t) => { await assertNoMessageHasContent(t, newContent) }) -test("rapid updates", async (t) => { +test("kitchen sink, rapid updates", async (t) => { const root = createRoot(channel) const content = nanoid() diff --git a/package.json b/package.json index aaec316..82a217b 100644 --- a/package.json +++ b/package.json @@ -33,7 +33,6 @@ }, "devDependencies": { "@itsmapleleaf/configs": "^1.1.0", - "@types/scheduler": "^0.16.2", "@typescript-eslint/eslint-plugin": "^5.6.0", "@typescript-eslint/parser": "^5.6.0", "ava": "^4.0.0-rc.1", @@ -54,7 +53,6 @@ "npm-run-all": "^4.1.5", "prettier": "^2.5.1", "react": "^17.0.2", - "scheduler": "^0.20.2", "tsup": "^5.10.3", "typescript": "^4.5.2" }, @@ -74,7 +72,9 @@ "--experimental-specifier-resolution=node", "--no-warnings" ], - "files": "{src,test,integration}/**/*.test.{ts,tsx}", + "files": [ + "{src,test,integration}/**/*.test.{ts,tsx}" + ], "serial": true } } diff --git a/src/components/embed.tsx b/src/components/embed.tsx new file mode 100644 index 0000000..095e9df --- /dev/null +++ b/src/components/embed.tsx @@ -0,0 +1,19 @@ +import type { ColorResolvable } from "discord.js" +import type { ReactNode } from "react" +import * as React from "react" + +export type EmbedProps = { + color?: ColorResolvable + children?: ReactNode +} + +export function Embed(props: EmbedProps) { + return ( + { + options.embeds ??= [] + options.embeds.push({ color: props.color }) + }} + /> + ) +} diff --git a/src/container.ts b/src/container.ts index 99959c2..8900a29 100644 --- a/src/container.ts +++ b/src/container.ts @@ -1,4 +1,5 @@ import type { Message, MessageOptions, TextBasedChannels } from "discord.js" +import type { ReacordElement } from "./element.js" type Action = | { type: "updateMessage"; options: MessageOptions } @@ -14,7 +15,7 @@ export class ReacordContainer { this.channel = channel } - render(instances: string[]) { + render(instances: ReacordElement[]) { const messageOptions: MessageOptions = { content: instances.join("") || undefined, // empty strings are not allowed } diff --git a/src/element.ts b/src/element.ts new file mode 100644 index 0000000..b7a53d6 --- /dev/null +++ b/src/element.ts @@ -0,0 +1,15 @@ +import type { MessageOptions } from "discord.js" + +export type ReacordElementJsxTag = "reacord-element" + +export type ReacordElement = { + modifyOptions: (options: MessageOptions) => void +} + +declare global { + namespace JSX { + // eslint-disable-next-line @typescript-eslint/consistent-type-definitions + interface IntrinsicElements + extends Record {} + } +} diff --git a/src/reconciler.ts b/src/reconciler.ts index 1cb8b50..921d1f2 100644 --- a/src/reconciler.ts +++ b/src/reconciler.ts @@ -1,15 +1,16 @@ /* eslint-disable unicorn/no-null */ import ReactReconciler from "react-reconciler" import type { ReacordContainer } from "./container.js" +import type { ReacordElement, ReacordElementJsxTag } from "./element.js" import { raise } from "./helpers/raise.js" export const reconciler = ReactReconciler< - unknown, - Record, + ReacordElementJsxTag, + ReacordElement, ReacordContainer, + ReacordElement, string, - string, - string, + unknown, unknown, unknown, unknown, @@ -33,12 +34,12 @@ export const reconciler = ReactReconciler< createInstance: ( type, - properties, + props, rootContainerInstance, hostContext, internalInstanceHandle, ) => { - throw new Error("Not implemented") + return props }, createTextInstance: ( @@ -54,24 +55,30 @@ export const reconciler = ReactReconciler< resetAfterCommit: () => null, appendInitialChild: (parent, child) => raise("Not implemented"), - finalizeInitialChildren: () => raise("Not implemented"), + finalizeInitialChildren: (...args) => { + console.log("finalizeInitialChildren", args) + return false + }, getPublicInstance: () => raise("Not implemented"), prepareUpdate: () => raise("Not implemented"), preparePortalMount: () => raise("Not implemented"), - createContainerChildSet: (container: ReacordContainer): string[] => { + createContainerChildSet: (): ReacordElement[] => { // console.log("createContainerChildSet", [container]) return [] }, - appendChildToContainerChildSet: (children: string[], child: string) => { + appendChildToContainerChildSet: ( + children: ReacordElement[], + child: ReacordElement, + ) => { // console.log("appendChildToContainerChildSet", [children, child]) children.push(child) }, finalizeContainerChildren: ( container: ReacordContainer, - children: string[], + children: ReacordElement[], ) => { // console.log("finalizeContainerChildren", [container, children]) return false @@ -79,9 +86,9 @@ export const reconciler = ReactReconciler< replaceContainerChildren: ( container: ReacordContainer, - children: string[], + children: ReacordElement[], ) => { - // console.log("replaceContainerChildren", [container, children]) + console.log("replaceContainerChildren", [container, children]) container.render(children) }, }) diff --git a/tsconfig.json b/tsconfig.json index 4338bb0..c3ee271 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,4 +1,7 @@ { "extends": "@itsmapleleaf/configs/tsconfig.base", + "compilerOptions": { + "skipLibCheck": false + }, "exclude": ["node_modules", ".vscode", "dist", "coverage"] }