Migrate proxied components to and fix LazyComponent

src/components/PluginSettings/PluginModal.tsx

@@ -21,10 +21,10 @@ import { Constructor } from "type-fest";
 
 import { generateId } from "../../api/Commands";
 import { useSettings } from "../../api/settings";
-import { lazyWebpack, proxyLazy } from "../../utils";
+import { LazyComponent, lazyWebpack, proxyLazy } from "../../utils";
 import { ModalContent, ModalFooter, ModalHeader, ModalProps, ModalRoot, ModalSize } from "../../utils/modal";
 import { OptionType, Plugin } from "../../utils/types";
-import { filters } from "../../webpack";
+import { filters, findByCode } from "../../webpack";
 import { Button, FluxDispatcher, Forms, React, Text, Tooltip, UserStore, UserUtils } from "../../webpack/common";
 import ErrorBoundary from "../ErrorBoundary";
 import { Flex } from "../Flex";
@@ -38,7 +38,7 @@ import {
     SettingTextComponent
 } from "./components";
 
-const UserSummaryItem = lazyWebpack(filters.byCode("defaultRenderUser", "showDefaultAvatarsForNullUsers"));
+const UserSummaryItem = LazyComponent(() => findByCode("defaultRenderUser", "showDefaultAvatarsForNullUsers"));
 const AvatarStyles = lazyWebpack(filters.byProps("moreUsers", "emptyUser", "avatarContainer", "clickableAvatar"));
 const UserRecord: Constructor<Partial<User>> = proxyLazy(() => UserStore.getCurrentUser().constructor) as any;
 

src/components/PluginSettings/index.tsx

@@ -23,10 +23,10 @@ import { Settings, useSettings } from "../../api/settings";
 import { startDependenciesRecursive, startPlugin, stopPlugin } from "../../plugins";
 import { Logger, Modals } from "../../utils";
 import { ChangeList } from "../../utils/ChangeList";
-import { classes, lazyWebpack } from "../../utils/misc";
+import { classes, LazyComponent, lazyWebpack } from "../../utils/misc";
 import { Plugin } from "../../utils/types";
-import { filters } from "../../webpack";
+import { filters, findByCode } from "../../webpack";
-import { Alerts, Button, Forms, Margins, Parser, React, Switch, Text, TextInput, Toasts, Tooltip } from "../../webpack/common";
+import { Alerts, Button, Forms, Margins, Parser, React, Select, Switch, Text, TextInput, Toasts, Tooltip } from "../../webpack/common";
 import ErrorBoundary from "../ErrorBoundary";
 import { ErrorCard } from "../ErrorCard";
 import { Flex } from "../Flex";
@@ -35,11 +35,10 @@ import * as styles from "./styles";
 
 const logger = new Logger("PluginSettings", "#a6d189");
 
-const Select = lazyWebpack(filters.byCode("optionClassName", "popoutPosition", "autoFocus", "maxVisibleItems"));
 const InputStyles = lazyWebpack(filters.byProps("inputDefault", "inputWrapper"));
 
-const CogWheel = lazyWebpack(filters.byCode("18.564C15.797 19.099 14.932 19.498 14 19.738V22H10V19.738C9.069"));
+const CogWheel = LazyComponent(() => findByCode("18.564C15.797 19.099 14.932 19.498 14 19.738V22H10V19.738C9.069"));
-const InfoIcon = lazyWebpack(filters.byCode("4.4408921e-16 C4.4771525,-1.77635684e-15 4.4408921e-16"));
+const InfoIcon = LazyComponent(() => findByCode("4.4408921e-16 C4.4771525,-1.77635684e-15 4.4408921e-16"));
 
 function showErrorToast(message: string) {
     Toasts.show({

src/plugins/viewIcons.tsx

@@ -17,14 +17,13 @@
 */
 
 import { Devs } from "../utils/constants";
-import { lazyWebpack, makeLazy } from "../utils/misc";
+import { LazyComponent } from "../utils/misc";
 import { ModalRoot, ModalSize, openModal } from "../utils/modal";
 import definePlugin from "../utils/types";
 import { find } from "../webpack";
-import { React } from "../webpack/common";
 
-const ImageModal = lazyWebpack(m => m.prototype?.render?.toString().includes("OPEN_ORIGINAL_IMAGE"));
+const ImageModal = LazyComponent(() => find(m => m.prototype?.render?.toString().includes("OPEN_ORIGINAL_IMAGE")));
-const getMaskedLink = makeLazy(() => find(m => m.type?.toString().includes("MASKED_LINK)")));
+const MaskedLink = LazyComponent(() => find(m => m.type?.toString().includes("MASKED_LINK)")));
 
 const OPEN_URL = "Vencord.Plugins.plugins.ViewIcons.openImage(";
 export default definePlugin({
@@ -39,7 +38,7 @@ export default definePlugin({
                     shouldAnimate={true}
                     original={url}
                     src={url}
-                    renderLinkComponent={props => React.createElement(getMaskedLink(), props)}
+                    renderLinkComponent={() => <MaskedLink />}
                 />
             </ModalRoot>
         ));

src/utils/misc.tsx

@@ -74,10 +74,11 @@ export function useAwaiter<T>(factory: () => Promise<T>, fallbackValue: T | null
  * @param factory Function returning a Component
  * @returns Result of factory function
  */
-export function LazyComponent<T = any>(factory: () => React.ComponentType<T>) {
+export function LazyComponent<T extends JSX.IntrinsicAttributes = any>(factory: () => React.ComponentType<T>) {
+    const get = makeLazy(factory);
     return (props: T) => {
-        const Component = React.useMemo(factory, []);
+        const Component = get();
-        return <Component {...props as any /* I hate react typings ??? */} />;
+        return <Component {...props} />;
     };
 }
 

src/webpack/common.tsx

@@ -21,8 +21,8 @@ import { User } from "discord-types/general";
 import type Other from "discord-types/other";
 import type Stores from "discord-types/stores";
 
-import { lazyWebpack } from "../utils/misc";
+import { LazyComponent, lazyWebpack } from "../utils/misc";
-import { _resolveReady, filters, mapMangledModuleLazy, waitFor } from "./webpack";
+import { _resolveReady, filters, findByCode, mapMangledModuleLazy, waitFor } from "./webpack";
 export const Margins = lazyWebpack(filters.byProps("marginTop20"));
 
 export let FluxDispatcher: Other.FluxDispatcher;
@@ -48,8 +48,8 @@ export let Router: any;
 export let TextInput: any;
 export let Text: (props: TextProps) => JSX.Element;
 
-export const Select = lazyWebpack(filters.byCode("optionClassName", "popoutPosition", "autoFocus", "maxVisibleItems"));
+export const Select = LazyComponent(() => findByCode("optionClassName", "popoutPosition", "autoFocus", "maxVisibleItems"));
-export const Slider = lazyWebpack(filters.byCode("closestMarkerIndex", "stickToMarkers"));
+export const Slider = LazyComponent(() => findByCode("closestMarkerIndex", "stickToMarkers"));
 
 export let Parser: any;
 export let Alerts: {

src/webpack/webpack.ts

@@ -290,6 +290,10 @@ export function findAllByProps(...props: string[]) {
     return findAll(filters.byProps(...props));
 }
 
+export function findByCode(...code: string[]) {
+    return find(filters.byCode(...code));
+}
+
 export function findByDisplayName(deezNuts: string) {
     return find(filters.byDisplayName(deezNuts));
 }