migrate to cv2 jsx

components-jsx/ActionRow.tsx

@@ -2,12 +2,12 @@ import { ComponentTypes, MessageActionRow, MessageActionRowComponent } from "oce
 
 import { childrenToArray } from "./utils";
 
-export type ActionRowProps = Omit<MessageActionRow, "type" | "components"> & { children?: MessageActionRowComponent | MessageActionRowComponent[] };
+export type ActionRowProps = Omit<MessageActionRow, "type" | "components"> & { children: MessageActionRowComponent | MessageActionRowComponent[]; };
 
-export function ActionRow(props: ActionRowProps): MessageActionRow {
+export function ActionRow({ children, ...props }: ActionRowProps): MessageActionRow {
     return {
         type: ComponentTypes.ACTION_ROW,
-        components: childrenToArray(props.children),
+        components: childrenToArray(children),
         ...props
     };
 }

components-jsx/Button.tsx

@@ -5,7 +5,7 @@ import { childrenToString } from "./utils";
 export { ButtonStyles } from "oceanic.js";
 
 type Button = Omit<TextButton, "type" | "label"> | Omit<URLButton, "type" | "label">;
-export type ButtonProps = Button & { children?: any; };
+export type ButtonProps = Button & { children?: string; };
 
 export function Button({ children, ...props }: ButtonProps): ButtonComponent {
     return {

components-jsx/ComponentMessage.tsx

@@ -3,7 +3,7 @@ import { CreateMessageOptions, EditMessageOptions, MessageComponent, MessageFlag
 import { childrenToArray } from "./utils";
 
 type MessageOptions = CreateMessageOptions | EditMessageOptions;
-export type ComponentMessageProps = MessageOptions & { children?: MessageComponent[]; };
+export type ComponentMessageProps = MessageOptions & { children: MessageComponent[]; };
 
 export function ComponentMessage({ children, flags, ...props }: ComponentMessageProps): MessageOptions {
     return {

components-jsx/Container.tsx

@@ -2,7 +2,7 @@ import { ComponentTypes, ContainerComponent } from "oceanic.js";
 
 import { childrenToArray } from "./utils";
 
-export type ContainerProps = Omit<ContainerComponent, "type" | "components"> & { children?: ContainerComponent["components"] };
+export type ContainerProps = Omit<ContainerComponent, "type" | "components"> & { children: ContainerComponent["components"]; };
 
 export function Container({ children, ...props }: ContainerProps): ContainerComponent {
     return {

components-jsx/Divider.tsx

@@ -0,0 +1,5 @@
+import { Separator } from "./Separator";
+
+export function Divider() {
+	return <Separator divider={true} />;
+}

components-jsx/JSX.d.ts

@@ -0,0 +1,5 @@
+declare namespace JSX {
+    interface ElementChildrenAttribute {
+        children: {};
+    }
+}

components-jsx/MediaGallery.tsx

@@ -2,12 +2,12 @@ import { ComponentTypes, MediaGalleryComponent } from "oceanic.js";
 
 import { childrenToArray } from "./utils";
 
-export type MediaGalleryProps = Omit<MediaGalleryComponent, "type" | "items"> & { children: MediaGalleryComponent["items"] };
+export type MediaGalleryProps = Omit<MediaGalleryComponent, "type" | "items"> & { children: MediaGalleryComponent["items"]; };
 
-export function MediaGallery(props: MediaGalleryProps): MediaGalleryComponent {
+export function MediaGallery({ children, ...props }: MediaGalleryProps): MediaGalleryComponent {
     return {
         type: ComponentTypes.MEDIA_GALLERY,
-        items: childrenToArray(props.children),
+        items: childrenToArray(children),
         ...props
     };
 }

components-jsx/Section.tsx

@@ -3,14 +3,14 @@ import { ButtonComponent, ComponentTypes, SectionComponent, TextDisplayComponent
 import { childrenToArray } from "./utils";
 
 export interface SectionProps {
-    children: TextDisplayComponent[]
+    children: TextDisplayComponent[];
     accessory: ThumbnailComponent | ButtonComponent;
 }
 
-export function Section(props: SectionProps): SectionComponent {
+export function Section({ children, ...props }: SectionProps): SectionComponent {
     return {
         type: ComponentTypes.SECTION,
-        components: childrenToArray(props.children),
+        components: childrenToArray(children),
         ...props
     };
 }

components-jsx/StringSelect.tsx

@@ -2,12 +2,12 @@ import { ComponentTypes, StringSelectMenu } from "oceanic.js";
 
 import { childrenToArray } from "./utils";
 
-export type StringSelectProps = Omit<StringSelectMenu, "type" | "options"> & { children: StringSelectMenu["options"] };
+export type StringSelectProps = Omit<StringSelectMenu, "type" | "options"> & { children: StringSelectMenu["options"]; };
 
-export function StringSelect(props: StringSelectProps): StringSelectMenu {
+export function StringSelect({ children, ...props }: StringSelectProps): StringSelectMenu {
     return {
         type: ComponentTypes.STRING_SELECT,
-        options: childrenToArray(props.children),
+        options: childrenToArray(children),
         ...props
     };
 }

components-jsx/TextDisplay.tsx

@@ -3,12 +3,12 @@ import { ComponentTypes, TextDisplayComponent } from "oceanic.js";
 import { childrenToString } from "./utils";
 
 export interface TextDisplayProps {
-    children?: any;
+    children: any;
     id?: number;
 }
 
 export function TextDisplay({ children, id }: TextDisplayProps): TextDisplayComponent {
-    children = childrenToString("TextDisplay", children);
+    children = childrenToString("TextDisplay", children)!;
     if (!children) {
         throw new Error("TextDisplay requires at least one child");
     }

components-jsx/Thumbnail.tsx

@@ -1,11 +1,11 @@
 import { ComponentTypes, ThumbnailComponent } from "oceanic.js";
 
-export type ThumbnailProps = Omit<ThumbnailComponent, "type" | "media"> & { children: ThumbnailComponent["media"] };
+export type ThumbnailProps = Omit<ThumbnailComponent, "type" | "media"> & { children: ThumbnailComponent["media"]; };
 
-export function Thumbnail(props: ThumbnailProps): ThumbnailComponent {
+export function Thumbnail({ children, ...props }: ThumbnailProps): ThumbnailComponent {
     return {
         type: ComponentTypes.THUMBNAIL,
-        media: props.children,
+        media: children,
         ...props
     };
 }

components-jsx/br.tsx

@@ -0,0 +1,9 @@
+import { TextDisplay } from "./TextDisplay";
+
+export function br() {
+	return (
+		<>
+			<TextDisplay>{"\n"}</TextDisplay>
+		</>
+	);
+}

components-jsx/index.ts

@@ -1,7 +1,9 @@
 export * from "./ActionRow";
+export * from "./br";
 export * from "./Button";
 export * from "./ComponentMessage";
 export * from "./Container";
+export * from "./Divider";
 export * from "./File";
 export * from "./MediaGallery";
 export * from "./MediaGalleryItem";

components-jsx/runtime.ts

@@ -1,6 +1,8 @@
 export const Fragment = Symbol("ComponentsJsx.Fragment");
 
-export function createElement(type: typeof Fragment | ((props: any) => any), props: any, ...children: any[]) {
+type FunctionComponent = (props: any) => any;
+
+export function createElement(type: typeof Fragment | FunctionComponent, props: any, ...children: any[]) {
     if (type === Fragment) {
         return children;
     }

components-jsx/utils.ts

@@ -7,7 +7,7 @@ export function filterChildren(children: any[]) {
 
 export function childrenToString(name: string, children: any) {
     if (Array.isArray(children)) {
-        return filterChildren(children).join("\n");
+        return filterChildren(children).join("");
     }
     if (typeof children === "string") {
         return children;

src/components/User.tsx

@@ -0,0 +1,24 @@
+import { Section } from "components-jsx/Section";
+import { client } from "..";
+import { Thumbnail } from "components-jsx/Thumbnail";
+import { TextDisplay } from "components-jsx/TextDisplay";
+import { br } from "components-jsx/br";
+
+export async function User(props: { id: string }) {
+	const user = await client.rest.users.get(props.id);
+
+	return (
+		<Section
+			accessory={
+				<Thumbnail children={{ url: user.avatarURL("png", 128) }} />
+			}
+		>
+			<TextDisplay>### User</TextDisplay>
+			<TextDisplay>
+				{user.globalName || user.username}
+				<br />
+				-# @{user.username}
+			</TextDisplay>
+		</Section>
+	);
+}

src/cv2.ts

@@ -1,68 +0,0 @@
-import {
-	AnyMessageComponent,
-	Component,
-	ComponentTypes,
-	FileComponent,
-	MediaGalleryComponent,
-	MessageActionRow,
-	SectionComponent,
-	SeparatorComponent,
-	TextDisplayComponent
-} from "oceanic.js";
-import { client } from ".";
-
-export const Divider: SeparatorComponent = {
-	type: ComponentTypes.SEPARATOR,
-	divider: true
-};
-export const Header = (
-	title: string,
-	level: 1 | 2 | 3
-): TextDisplayComponent => {
-	return {
-		type: ComponentTypes.TEXT_DISPLAY,
-		content: `${"#".repeat(level)} ${title}`
-	};
-};
-
-export async function generateUserComponent(
-	id: string
-): Promise<SectionComponent> {
-	const user = await client.rest.users.get(id);
-	return {
-		type: ComponentTypes.SECTION,
-		components: [
-			Header("User", 3),
-			{
-				type: ComponentTypes.TEXT_DISPLAY,
-				content: `${user.globalName || user.username}\n-# @${
-					user.username
-				}`
-			}
-		],
-		accessory: {
-			type: ComponentTypes.THUMBNAIL,
-			media: {
-				url: user.avatarURL("png", 128)
-			}
-		}
-	};
-}
-export function generateList(
-	elements: {
-		[key: string]: string;
-	},
-	title?: string
-): TextDisplayComponent[] {
-	let working: TextDisplayComponent[] = [];
-
-	if (title) working.push(Header(title, 3));
-	for (const key of Object.keys(elements)) {
-		working.push({
-			type: ComponentTypes.TEXT_DISPLAY,
-			content: `**${key}**\n-# ${elements[key].replaceAll("\n", "\n-# ")}`
-		});
-	}
-
-	return working;
-}

src/joinRequestHandler.tsx

@@ -1,9 +1,19 @@
 import { ComponentTypes, MessageFlags, Shard } from "oceanic.js";
 import { client } from ".";
 import { Constants } from "./Constants";
-import { Header, Divider, generateUserComponent } from "./cv2";
 import { db } from "./database";
+import {
+	ActionRow,
+	Button,
+	ComponentMessage,
+	Container,
+	Divider,
+	Section,
+	Separator,
+	TextDisplay
+} from "~/components";
 import { selfappReq } from "./selfappReq";
+import { User } from "./components/User";
 
 export async function setupJoinRequestHandler(shard: Shard) {
 	shard.ws?.on("message", async (d) => {
@@ -18,9 +28,9 @@ export async function setupJoinRequestHandler(shard: Shard) {
 							const pendingMsg =
 								await client.rest.channels.createMessage(
 									Constants.PENDING_CHANNEL_ID,
-									{
+									<ComponentMessage>
-										content: "Placeholder"
+										<TextDisplay>Placeholder</TextDisplay>
-									}
+									</ComponentMessage>
 								);
 							await db.run(
 								"INSERT INTO applications (id, user_id, status, message_id, channel_id) VALUES (?, ?, 0, ?, ?)",
@@ -52,34 +62,24 @@ export async function setupJoinRequestHandler(shard: Shard) {
 					}
 					await client.rest.channels.createMessage(
 						Constants.REJECTION_CHANNEL_ID,
-						{
+						<ComponentMessage>
-							flags: MessageFlags.IS_COMPONENTS_V2,
+							<Container accentColor={0xffaaaa}>
-							components: [
+								<TextDisplay>
-								{
+									## Join request withdrawn
-									type: ComponentTypes.CONTAINER,
+								</TextDisplay>
-									accentColor: 0xffaaaa,
+								<Divider />
-									components: [
+								<User id={applicationData.user_id} />
-										Header("Join request withdrawn", 2),
+								<Divider />
-										Divider,
+								<TextDisplay>### Application</TextDisplay>
-										await generateUserComponent(
+								{application ? (
-											applicationData.user_id
+									<TextDisplay>User has applied</TextDisplay>
-										),
+								) : (
-										Divider,
+									<TextDisplay>
-										Header("Application", 3),
+										User hasn't applied
-										application
+									</TextDisplay>
-											? {
+								)}
-													type: ComponentTypes.TEXT_DISPLAY,
+							</Container>
-													content: "User has applied"
+						</ComponentMessage>
-											  }
-											: {
-													type: ComponentTypes.TEXT_DISPLAY,
-													content:
-														"User has never applied"
-											  }
-									]
-								}
-							]
-						}
 					);
 					break;
 				}