help

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<ProfileBadge & BadgeUserArgs>;
+    component?: React.ComponentType<ProfileBadge & BadgeUserArgs>;
     /** 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<HTMLImageElement>;
+    props?: React.ComponentPropsWithoutRef<"img">;
     /** Insert at start or end? */
     position?: BadgePosition;
     /** The badge name to display, Discord uses this. Required for component badges */

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<any>,
+    icon: React.ComponentType<AnyRecord>,
     message: Message,
     channel: Channel,
-    onClick?: MouseEventHandler<HTMLButtonElement>,
-    onContextMenu?: MouseEventHandler<HTMLButtonElement>;
+    onClick?: React.MouseEventHandler<HTMLButtonElement>,
+    onContextMenu?: React.MouseEventHandler<HTMLButtonElement>;
 }
 
 export type getButtonItem = (message: Message) => ButtonItem | null;

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 (
         <Card className={cl("card")}>
             {props.children}

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 (
         <Forms.FormSection>
             <Text
@@ -44,7 +43,7 @@ export function SettingsTab({ title, children }: PropsWithChildren<{ title: stri
 
 export const handleSettingsTabError = onlyOnce(handleComponentFailed);
 
-export function wrapTab(component: ComponentType<any>, tab: string) {
+export function wrapTab(component: React.ComponentType<AnyRecord>, 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,

src/globals.d.ts

@@ -20,8 +20,8 @@ import { LoDashStatic } from "lodash";
 
 declare global {
     type AnyRecord = Record<PropertyKey, any>;
-    type AnyComponentType<P extends AnyRecord> = React.ComponentType<P & AnyRecord> & AnyRecord;
-    type AnyComponentTypeWithChildren<P extends AnyRecord> = React.ComponentType<React.PropsWithChildren<P> & AnyRecord> & AnyRecord;
+    type AnyComponentType<P extends AnyRecord = AnyRecord> = React.ComponentType<P & AnyRecord> & AnyRecord;
+    type AnyComponentTypeWithChildren<P extends AnyRecord = AnyRecord> = React.ComponentType<React.PropsWithChildren<P> & AnyRecord> & AnyRecord;
 
     /**
      * This exists only at build time, so references to it in patches should insert it

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<AnyRecord>, props: any) => {
             const prevWin = fakeRenderWin?.deref();
             const win = prevWin?.closed === false
                 ? prevWin

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<PropsWithChildren<HTMLProps<HTMLDivElement>> & {
+type DecorationGridItemComponent = AnyComponentTypeWithChildren<React.ComponentPropsWithoutRef<"div"> & {
     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<HTMLProps<HTMLDivElement> & {
+type DecorationGridDecorationComponent = AnyComponentType<React.ComponentPropsWithoutRef<"div"> & {
     avatarDecoration: AvatarDecoration;
     onSelect: () => void,
     isSelected: boolean,

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<string, number>;
@@ -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<any>;
-    UserMention: ComponentType<any>;
+    RoleMention: AnyComponentType;
+    UserMention: AnyComponentType;
 }
 
 async function getUser(id: string) {

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;
 }>;

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<P extends AnyRecord> = React.FunctionComponent<P> & AnyRecord & {
+export type LazyComponentType<P extends AnyRecord = AnyRecord> = React.FunctionComponent<P> & AnyRecord & {
     [SYM_LAZY_COMPONENT_INNER]: () => AnyComponentType<P> | null;
 };
 

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<PropsWithChildren<{
+    ModalRoot: AnyComponentTypeWithChildren<{
         transitionState: ModalTransitionState;
         size?: ModalSize;
         role?: "alertdialog" | "dialog";
@@ -59,8 +58,8 @@ type Modals = {
         "aria-label"?: string;
         "aria-labelledby"?: string;
         onAnimationEnd?(): string;
-    }>>;
-    ModalHeader: ComponentType<PropsWithChildren<{
+    }>;
+    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<PropsWithChildren<{
+    ModalContent: AnyComponentTypeWithChildren<{
         className?: string;
-        scrollerRef?: Ref<HTMLElement>;
-        [prop: string]: any;
-    }>>;
-    ModalFooter: ComponentType<PropsWithChildren<{
+        scrollerRef?: React.Ref<HTMLElement>;
+    }>;
+    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;