From 5dbe81e459b7fd0f3501446111f5334ce2dac639 Mon Sep 17 00:00:00 2001 From: Nuckyz <61953774+Nuckyz@users.noreply.github.com> Date: Wed, 18 Sep 2024 14:43:27 -0300 Subject: [PATCH] help --- src/api/Badges.ts | 5 ++-- src/api/MessagePopover.tsx | 7 ++--- .../VencordSettings/quickActions.tsx | 7 ++--- src/components/VencordSettings/shared.tsx | 5 ++-- src/globals.d.ts | 4 +-- src/plugins/consoleShortcuts/index.ts | 3 +- src/plugins/decor/ui/components/index.ts | 5 ++-- src/plugins/validUser/index.tsx | 7 ++--- src/plugins/voiceMessages/index.tsx | 3 +- src/utils/lazyReact.tsx | 2 +- src/utils/modal.tsx | 28 +++++++++---------- 11 files changed, 33 insertions(+), 43 deletions(-) diff --git a/src/api/Badges.ts b/src/api/Badges.ts index 7a041f1ee..471d9c1d6 100644 --- a/src/api/Badges.ts +++ b/src/api/Badges.ts @@ -17,7 +17,6 @@ */ import ErrorBoundary from "@components/ErrorBoundary"; -import { ComponentType, HTMLProps } from "react"; import Plugins from "~plugins"; @@ -30,7 +29,7 @@ export interface ProfileBadge { /** The tooltip to show on hover. Required for image badges */ description?: string; /** Custom component for the badge (tooltip not included) */ - component?: ComponentType; + component?: React.ComponentType; /** The custom image to use */ image?: string; link?: string; @@ -39,7 +38,7 @@ export interface ProfileBadge { /** Should the user display this badge? */ shouldShow?(userInfo: BadgeUserArgs): boolean; /** Optional props (e.g. style) for the badge, ignored for component badges */ - props?: HTMLProps; + props?: React.ComponentPropsWithoutRef<"img">; /** Insert at start or end? */ position?: BadgePosition; /** The badge name to display, Discord uses this. Required for component badges */ diff --git a/src/api/MessagePopover.tsx b/src/api/MessagePopover.tsx index eb68ed2d6..decb4ffd1 100644 --- a/src/api/MessagePopover.tsx +++ b/src/api/MessagePopover.tsx @@ -19,18 +19,17 @@ import ErrorBoundary from "@components/ErrorBoundary"; import { Logger } from "@utils/Logger"; import { Channel, Message } from "discord-types/general"; -import type { ComponentType, MouseEventHandler } from "react"; const logger = new Logger("MessagePopover"); export interface ButtonItem { key?: string, label: string, - icon: ComponentType, + icon: React.ComponentType, message: Message, channel: Channel, - onClick?: MouseEventHandler, - onContextMenu?: MouseEventHandler; + onClick?: React.MouseEventHandler, + onContextMenu?: React.MouseEventHandler; } export type getButtonItem = (message: Message) => ButtonItem | null; diff --git a/src/components/VencordSettings/quickActions.tsx b/src/components/VencordSettings/quickActions.tsx index 6cc57180a..183c83254 100644 --- a/src/components/VencordSettings/quickActions.tsx +++ b/src/components/VencordSettings/quickActions.tsx @@ -8,13 +8,12 @@ import "./quickActions.css"; import { classNameFactory } from "@api/Styles"; import { Card } from "@webpack/common"; -import type { ComponentType, PropsWithChildren, ReactNode } from "react"; const cl = classNameFactory("vc-settings-quickActions-"); export interface QuickActionProps { - Icon: ComponentType<{ className?: string; }>; - text: ReactNode; + Icon: React.ComponentType<{ className?: string; }>; + text: React.ReactNode; action?: () => void; disabled?: boolean; } @@ -30,7 +29,7 @@ export function QuickAction(props: QuickActionProps) { ); } -export function QuickActionCard(props: PropsWithChildren) { +export function QuickActionCard(props: React.PropsWithChildren) { return ( {props.children} diff --git a/src/components/VencordSettings/shared.tsx b/src/components/VencordSettings/shared.tsx index 1c5f37d82..270fef29a 100644 --- a/src/components/VencordSettings/shared.tsx +++ b/src/components/VencordSettings/shared.tsx @@ -24,9 +24,8 @@ import { handleComponentFailed } from "@components/handleComponentFailed"; import { Margins } from "@utils/margins"; import { onlyOnce } from "@utils/onlyOnce"; import { Forms, Text } from "@webpack/common"; -import type { ComponentType, PropsWithChildren } from "react"; -export function SettingsTab({ title, children }: PropsWithChildren<{ title: string; }>) { +export function SettingsTab({ title, children }: React.PropsWithChildren<{ title: string; }>) { return ( , tab: string) { +export function wrapTab(component: React.ComponentType, tab: string) { return ErrorBoundary.wrap(component, { message: `Failed to render the ${tab} tab. If this issue persists, try using the installer to reinstall!`, onError: handleSettingsTabError, diff --git a/src/globals.d.ts b/src/globals.d.ts index 31c7ce38f..be9553bd3 100644 --- a/src/globals.d.ts +++ b/src/globals.d.ts @@ -20,8 +20,8 @@ import { LoDashStatic } from "lodash"; declare global { type AnyRecord = Record; - type AnyComponentType

= React.ComponentType

& AnyRecord; - type AnyComponentTypeWithChildren

= React.ComponentType & AnyRecord> & AnyRecord; + type AnyComponentType

= React.ComponentType

& AnyRecord; + type AnyComponentTypeWithChildren

= React.ComponentType & AnyRecord> & AnyRecord; /** * This exists only at build time, so references to it in patches should insert it diff --git a/src/plugins/consoleShortcuts/index.ts b/src/plugins/consoleShortcuts/index.ts index 711436636..2265dd171 100644 --- a/src/plugins/consoleShortcuts/index.ts +++ b/src/plugins/consoleShortcuts/index.ts @@ -28,7 +28,6 @@ import * as Webpack from "@webpack"; import { cacheFindAll, cacheFindModuleId, extract, filters, searchFactories } from "@webpack"; import * as Common from "@webpack/common"; import { loadLazyChunks } from "debug/loadLazyChunks"; -import type { ComponentType } from "react"; const DESKTOP_ONLY = (f: string) => () => { throw new Error(`'${f}' is Discord Desktop only.`); @@ -129,7 +128,7 @@ function makeShortcuts() { canonicalizeReplacement, preEnable: (plugin: string) => (Vencord.Settings.plugins[plugin] ??= { enabled: true }).enabled = true, - fakeRender: (component: ComponentType, props: any) => { + fakeRender: (component: React.ComponentType, props: any) => { const prevWin = fakeRenderWin?.deref(); const win = prevWin?.closed === false ? prevWin diff --git a/src/plugins/decor/ui/components/index.ts b/src/plugins/decor/ui/components/index.ts index a0c05cd69..9673343e7 100644 --- a/src/plugins/decor/ui/components/index.ts +++ b/src/plugins/decor/ui/components/index.ts @@ -7,11 +7,10 @@ import { NoopComponent } from "@utils/react"; import { findComponentByCode } from "@webpack"; import { React } from "@webpack/common"; -import type { ComponentType, HTMLProps, PropsWithChildren } from "react"; import { AvatarDecoration } from "../.."; -type DecorationGridItemComponent = ComponentType> & { +type DecorationGridItemComponent = AnyComponentTypeWithChildren & { onSelect: () => void, isSelected: boolean, }>; @@ -21,7 +20,7 @@ export const setDecorationGridItem = v => DecorationGridItem = v; export const AvatarDecorationModalPreview = findComponentByCode(".shopPreviewBanner", component => React.memo(component)); -type DecorationGridDecorationComponent = React.ComponentType & { +type DecorationGridDecorationComponent = AnyComponentType & { avatarDecoration: AvatarDecoration; onSelect: () => void, isSelected: boolean, diff --git a/src/plugins/validUser/index.tsx b/src/plugins/validUser/index.tsx index 4825cdaa3..ea3a35104 100644 --- a/src/plugins/validUser/index.tsx +++ b/src/plugins/validUser/index.tsx @@ -23,7 +23,6 @@ import { sleep } from "@utils/misc"; import { Queue } from "@utils/Queue"; import definePlugin from "@utils/types"; import { Constants, FluxDispatcher, RestAPI, UserProfileStore, UserStore, useState } from "@webpack/common"; -import { type ComponentType, type ReactNode } from "react"; // LYING to the type checker here const UserFlags = Constants.UserFlags as Record; @@ -60,14 +59,14 @@ interface MentionProps { channelId?: string; content: any; }; - parse: (content: any, props: MentionProps["props"]) => ReactNode; + parse: (content: any, props: MentionProps["props"]) => React.ReactNode; props: { key: string; formatInline: boolean; noStyleAndInteraction: boolean; }; - RoleMention: ComponentType; - UserMention: ComponentType; + RoleMention: AnyComponentType; + UserMention: AnyComponentType; } async function getUser(id: string) { diff --git a/src/plugins/voiceMessages/index.tsx b/src/plugins/voiceMessages/index.tsx index e9ed518c5..d7f9be3df 100644 --- a/src/plugins/voiceMessages/index.tsx +++ b/src/plugins/voiceMessages/index.tsx @@ -29,7 +29,6 @@ import definePlugin from "@utils/types"; import { chooseFile } from "@utils/web"; import { find, findByProps, findStore } from "@webpack"; import { Button, Card, Constants, FluxDispatcher, Forms, lodash, Menu, MessageActions, PermissionsBits, PermissionStore, RestAPI, SelectedChannelStore, showToast, SnowflakeUtils, Toasts, useEffect, useState } from "@webpack/common"; -import { ComponentType } from "react"; import { VoiceRecorderDesktop } from "./DesktopRecorder"; import { settings } from "./settings"; @@ -41,7 +40,7 @@ const CloudUpload = find(m => m.prototype?.trackUploadFinished); const PendingReplyStore = findStore("PendingReplyStore"); const OptionClasses = findByProps("optionName", "optionIcon", "optionLabel"); -export type VoiceRecorder = ComponentType<{ +export type VoiceRecorder = AnyComponentType<{ setAudioBlob(blob: Blob): void; onRecordingChange?(recording: boolean): void; }>; diff --git a/src/utils/lazyReact.tsx b/src/utils/lazyReact.tsx index 8c76b9d70..8f2715745 100644 --- a/src/utils/lazyReact.tsx +++ b/src/utils/lazyReact.tsx @@ -8,7 +8,7 @@ import { makeLazy } from "./lazy"; export const SYM_LAZY_COMPONENT_INNER = Symbol.for("vencord.lazyComponent.inner"); -export type LazyComponentType

= React.FunctionComponent

& AnyRecord & { +export type LazyComponentType

= React.FunctionComponent

& AnyRecord & { [SYM_LAZY_COMPONENT_INNER]: () => AnyComponentType

| null; }; diff --git a/src/utils/modal.tsx b/src/utils/modal.tsx index 380f08295..d542d9b72 100644 --- a/src/utils/modal.tsx +++ b/src/utils/modal.tsx @@ -17,7 +17,6 @@ */ import { findByProps, findComponentByCode } from "@webpack"; -import type { ComponentType, PropsWithChildren, ReactNode, Ref } from "react"; import { NoopComponent } from "./react"; @@ -47,10 +46,10 @@ export interface ModalOptions { onCloseCallback?: (() => void); } -type RenderFunction = (props: ModalProps) => ReactNode; +type RenderFunction = (props: ModalProps) => React.ReactNode; type Modals = { - ModalRoot: ComponentType>; - ModalHeader: ComponentType; + ModalHeader: AnyComponentTypeWithChildren<{ /** Flex.Justify.START */ justify?: string; /** Flex.Direction.HORIZONTAL */ @@ -72,14 +71,13 @@ type Modals = { separator?: boolean; className?: string; - }>>; + }>; /** This also accepts Scroller props but good luck with that */ - ModalContent: ComponentType; - [prop: string]: any; - }>>; - ModalFooter: ComponentType; + }>; + ModalFooter: AnyComponentTypeWithChildren<{ /** Flex.Justify.START */ justify?: string; /** Flex.Direction.HORIZONTAL_REVERSE */ @@ -91,8 +89,8 @@ type Modals = { separator?: boolean; className?: string; - }>>; - ModalCloseButton: ComponentType<{ + }>; + ModalCloseButton: AnyComponentType<{ focusProps?: any; onClick(): void; withCircleBackground?: boolean; @@ -123,8 +121,8 @@ export type ImageModalProps = { height?: number; animated?: boolean; responsive?: boolean; - renderLinkComponent(props: any): ReactNode; - renderForwardComponent(props: any): ReactNode; + renderLinkComponent(props: any): React.ReactNode; + renderForwardComponent(props: any): React.ReactNode; maxWidth?: number; maxHeight?: number; shouldAnimate?: boolean;