Migrate proxied components to and fix LazyComponent

This commit is contained in:
Vendicated 2022-11-06 18:37:01 +01:00
parent 440baf6028
commit 963a7332b4
No known key found for this signature in database
GPG Key ID: EC781ADFB93EFFA3
6 changed files with 24 additions and 21 deletions

View File

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

View File

@ -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 { Alerts, Button, Forms, Margins, Parser, React, Switch, Text, TextInput, Toasts, Tooltip } from "../../webpack/common";
import { filters, findByCode } from "../../webpack";
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 InfoIcon = lazyWebpack(filters.byCode("4.4408921e-16 C4.4771525,-1.77635684e-15 4.4408921e-16"));
const CogWheel = LazyComponent(() => findByCode("18.564C15.797 19.099 14.932 19.498 14 19.738V22H10V19.738C9.069"));
const InfoIcon = LazyComponent(() => findByCode("4.4408921e-16 C4.4771525,-1.77635684e-15 4.4408921e-16"));
function showErrorToast(message: string) {
Toasts.show({

View File

@ -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 getMaskedLink = makeLazy(() => find(m => m.type?.toString().includes("MASKED_LINK)")));
const ImageModal = LazyComponent(() => find(m => m.prototype?.render?.toString().includes("OPEN_ORIGINAL_IMAGE")));
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>
));

View File

@ -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, []);
return <Component {...props as any /* I hate react typings ??? */} />;
const Component = get();
return <Component {...props} />;
};
}

View File

@ -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 { _resolveReady, filters, mapMangledModuleLazy, waitFor } from "./webpack";
import { LazyComponent, lazyWebpack } from "../utils/misc";
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 Slider = lazyWebpack(filters.byCode("closestMarkerIndex", "stickToMarkers"));
export const Select = LazyComponent(() => findByCode("optionClassName", "popoutPosition", "autoFocus", "maxVisibleItems"));
export const Slider = LazyComponent(() => findByCode("closestMarkerIndex", "stickToMarkers"));
export let Parser: any;
export let Alerts: {

View File

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