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;