refactor(Webpack): Immediate finds using waitFor and complete rewrite of module patching

eslint.config.mjs

@@ -90,7 +90,13 @@ export default tseslint.config(
             "no-invalid-regexp": "error",
             "no-constant-condition": ["error", { "checkLoops": false }],
             "no-duplicate-imports": "error",
-            "dot-notation": "error",
+            "@typescript-eslint/dot-notation": [
+                "error",
+                {
+                    "allowPrivateClassPropertyAccess": true,
+                    "allowProtectedClassPropertyAccess": true
+                }
+            ],
             "no-useless-escape": [
                 "error",
                 {

scripts/build/common.mjs

@@ -312,7 +312,7 @@ export const commonOpts = {
     logLevel: "info",
     bundle: true,
     watch,
-    minify: !watch,
+    minify: !watch && !IS_REPORTER,
     sourcemap: watch ? "inline" : "",
     legalComments: "linked",
     banner,

scripts/generateReport.ts

@@ -26,7 +26,7 @@
 import { readFileSync } from "fs";
 import pup, { JSHandle } from "puppeteer-core";
 
-for (const variable of ["DISCORD_TOKEN", "CHROMIUM_BIN"]) {
+for (const variable of ["CHROMIUM_BIN"]) {
     if (!process.env[variable]) {
         console.error(`Missing environment variable ${variable}`);
         process.exit(1);
@@ -37,7 +37,8 @@ const CANARY = process.env.USE_CANARY === "true";
 
 const browser = await pup.launch({
     headless: true,
-    executablePath: process.env.CHROMIUM_BIN
+    executablePath: process.env.CHROMIUM_BIN,
+    args: ["--no-sandbox"]
 });
 
 const page = await browser.newPage();
@@ -214,7 +215,7 @@ page.on("console", async e => {
 
         switch (tag) {
             case "WebpackInterceptor:":
-                const patchFailMatch = message.match(/Patch by (.+?) (had no effect|errored|found no module) \(Module id is (.+?)\): (.+)/)!;
+                const patchFailMatch = message.match(/Patch by (.+?) (had no effect|errored|found no module|took [\d.]+?ms) \(Module id is (.+?)\): (.+)/)!;
                 if (!patchFailMatch) break;
 
                 console.error(await getText());
@@ -225,7 +226,7 @@ page.on("console", async e => {
                     plugin,
                     type,
                     id,
-                    match: regex.replace(/\[A-Za-z_\$\]\[\\w\$\]\*/g, "\\i"),
+                    match: regex,
                     error: await maybeGetError(e.args()[3])
                 });
 
@@ -291,28 +292,17 @@ page.on("error", e => console.error("[Error]", e.message));
 page.on("pageerror", e => {
     if (e.message.includes("Sentry successfully disabled")) return;
 
-    if (!e.message.startsWith("Object") && !e.message.includes("Cannot find module")) {
+    if (!e.message.startsWith("Object") && !e.message.includes("Cannot find module") && !/^.{1,2}$/.test(e.message)) {
         console.error("[Page Error]", e.message);
         report.otherErrors.push(e.message);
     } else {
         report.ignoredErrors.push(e.message);
     }
 });
 
-async function reporterRuntime(token: string) {
-    Vencord.Webpack.waitFor(
-        "loginToken",
-        m => {
-            console.log("[PUP_DEBUG]", "Logging in with token...");
-            m.loginToken(token);
-        }
-    );
-}
-
 await page.evaluateOnNewDocument(`
     if (location.host.endsWith("discord.com")) {
         ${readFileSync("./dist/browser.js", "utf-8")};
-        (${reporterRuntime.toString()})(${JSON.stringify(process.env.DISCORD_TOKEN)});
     }
 `);
 

src/Vencord.ts

@@ -23,10 +23,10 @@ export * as Util from "./utils";
 export * as QuickCss from "./utils/quickCss";
 export * as Updater from "./utils/updater";
 export * as Webpack from "./webpack";
+export * as WebpackPatcher from "./webpack/patchWebpack";
 export { PlainSettings, Settings };
 
 import "./utils/quickCss";
-import "./webpack/patchWebpack";
 
 import { openUpdaterModal } from "@components/VencordSettings/UpdaterTab";
 import { StartAt } from "@utils/types";
@@ -39,7 +39,7 @@ import { localStorage } from "./utils/localStorage";
 import { relaunch } from "./utils/native";
 import { getCloudSettings, putCloudSettings } from "./utils/settingsSync";
 import { checkForUpdates, update, UpdateLogger } from "./utils/updater";
-import { onceReady } from "./webpack";
+import { onceDiscordLoaded } from "./webpack";
 import { SettingsRouter } from "./webpack/common";
 
 if (IS_REPORTER) {
@@ -86,7 +86,7 @@ async function syncSettings() {
 }
 
 async function init() {
-    await onceReady;
+    await onceDiscordLoaded;
     startAllPlugins(StartAt.WebpackReady);
 
     syncSettings();
@@ -125,7 +125,7 @@ async function init() {
         const pendingPatches = patches.filter(p => !p.all && p.predicate?.() !== false);
         if (pendingPatches.length)
             PMLogger.warn(
-                "Webpack has finished initialising, but some patches haven't been applied yet.",
+                "Webpack has finished initializing, but some patches haven't been applied yet.",
                 "This might be expected since some Modules are lazy loaded, but please verify",
                 "that all plugins are working as intended.",
                 "You are seeing this warning because this is a Development build of Vencord.",

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/ChatButtons.tsx

@@ -8,13 +8,12 @@ import "./ChatButton.css";
 
 import ErrorBoundary from "@components/ErrorBoundary";
 import { Logger } from "@utils/Logger";
-import { waitFor } from "@webpack";
+import { findByProps } from "@webpack";
 import { Button, ButtonLooks, ButtonWrapperClasses, Tooltip } from "@webpack/common";
 import { Channel } from "discord-types/general";
 import { HTMLProps, MouseEventHandler, ReactNode } from "react";
 
-let ChannelTextAreaClasses: Record<"button" | "buttonContainer", string>;
-waitFor(["buttonContainer", "channelTextArea"], m => ChannelTextAreaClasses = m);
+const ChannelTextAreaClasses = findByProps<Record<"button" | "buttonContainer", string>>("buttonContainer", "channelTextArea");
 
 export interface ChatBarProps {
     channel: Channel;

src/api/Commands/commandHelpers.ts

@@ -17,14 +17,14 @@
 */
 
 import { mergeDefaults } from "@utils/mergeDefaults";
-import { findByCodeLazy } from "@webpack";
+import { findByCode } from "@webpack";
 import { MessageActions, SnowflakeUtils } from "@webpack/common";
 import { Message } from "discord-types/general";
 import type { PartialDeep } from "type-fest";
 
 import { Argument } from "./types";
 
-const createBotMessage = findByCodeLazy('username:"Clyde"');
+const createBotMessage = findByCode('username:"Clyde"');
 
 export function generateId() {
     return `-${SnowflakeUtils.fromTimestamp(Date.now())}`;

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/api/Notices.ts

@@ -16,23 +16,22 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-import { waitFor } from "@webpack";
+import { find } from "@webpack";
 
-let NoticesModule: any;
-waitFor(m => m.show && m.dismiss && !m.suppressAll, m => NoticesModule = m);
+const Notices = find(m => m.show && m.dismiss && !m.suppressAll);
 
 export const noticesQueue = [] as any[];
 export let currentNotice: any = null;
 
 export function popNotice() {
-    NoticesModule.dismiss();
+    Notices.dismiss();
 }
 
 export function nextNotice() {
     currentNotice = noticesQueue.shift();
 
     if (currentNotice) {
-        NoticesModule.show(...currentNotice, "VencordNotice");
+        Notices.show(...currentNotice, "VencordNotice");
     }
 }
 

src/api/Settings.ts

@@ -32,9 +32,10 @@ export interface Settings {
     autoUpdate: boolean;
     autoUpdateNotification: boolean,
     useQuickCss: boolean;
-    enableReactDevtools: boolean;
     themeLinks: string[];
+    eagerPatches: boolean;
     enabledThemes: string[];
+    enableReactDevtools: boolean;
     frameless: boolean;
     transparent: boolean;
     winCtrlQ: boolean;
@@ -81,6 +82,7 @@ const DefaultSettings: Settings = {
     autoUpdateNotification: true,
     useQuickCss: true,
     themeLinks: [],
+    eagerPatches: IS_REPORTER,
     enabledThemes: [],
     enableReactDevtools: false,
     frameless: false,
@@ -116,7 +118,6 @@ const saveSettingsOnFrequentAction = debounce(async () => {
     }
 }, 60_000);
 
-
 export const SettingsStore = new SettingsStoreClass(settings, {
     readOnly: true,
     getDefaultValue({

src/api/Styles.ts

@@ -89,8 +89,8 @@ export const isStyleEnabled = (name: string) => requireStyle(name).dom?.isConnec
  * // -- plugin.ts --
  * import pluginStyle from "./plugin.css?managed";
  * import { setStyleVars } from "@api/Styles";
- * import { findByPropsLazy } from "@webpack";
- * const classNames = findByPropsLazy("thin", "scrollerBase"); // { thin: "thin-31rlnD scrollerBase-_bVAAt", ... }
+ * import { findByProps } from "@webpack";
+ * const classNames = findByProps("thin", "scrollerBase"); // { thin: "thin-31rlnD scrollerBase-_bVAAt", ... }
  *
  * // Inside some plugin method like "start()"
  * setStyleClassNames(pluginStyle, classNames);

src/api/UserSettings.ts

@@ -17,8 +17,7 @@
 */
 
 import { proxyLazy } from "@utils/lazy";
-import { Logger } from "@utils/Logger";
-import { findModuleId, proxyLazyWebpack, wreq } from "@webpack";
+import { findByFactoryCode } from "@webpack";
 
 interface UserSettingDefinition<T> {
     /**
@@ -43,20 +42,15 @@ interface UserSettingDefinition<T> {
     userSettingsAPIName: string;
 }
 
-export const UserSettings: Record<PropertyKey, UserSettingDefinition<any>> | undefined = proxyLazyWebpack(() => {
-    const modId = findModuleId('"textAndImages","renderSpoilers"');
-    if (modId == null) return new Logger("UserSettingsAPI ").error("Didn't find settings module.");
-
-    return wreq(modId as any);
-});
+export const UserSettings = findByFactoryCode<Record<PropertyKey, UserSettingDefinition<any>>>('"textAndImages","renderSpoilers"');
 
 /**
  * Get the setting with the given setting group and name.
  *
  * @param group The setting group
  * @param name The name of the setting
  */
-export function getUserSetting<T = any>(group: string, name: string): UserSettingDefinition<T> | undefined {
+export function getUserSetting<T = any>(group: string, name: string): UserSettingDefinition<T> {
     if (!Vencord.Plugins.isPluginEnabled("UserSettingsAPI")) throw new Error("Cannot use UserSettingsAPI without setting as dependency.");
 
     for (const key in UserSettings) {
@@ -66,10 +60,12 @@ export function getUserSetting<T = any>(group: string, name: string): UserSettin
             return userSetting;
         }
     }
+
+    throw new Error(`UserSettingsAPI: Setting ${group}.${name} not found.`);
 }
 
 /**
- * {@link getUserSettingDefinition}, lazy.
+ * Lazy version of {@link getUserSetting}
  *
  * Get the setting with the given setting group and name.
  *

src/components/CodeBlock.tsx

@@ -4,10 +4,10 @@
  * SPDX-License-Identifier: GPL-3.0-or-later
  */
 
-import { findByPropsLazy } from "@webpack";
+import { findByProps } from "@webpack";
 import { Parser } from "@webpack/common";
 
-const CodeContainerClasses = findByPropsLazy("markup", "codeContainer");
+const CodeContainerClasses = findByProps("markup", "codeContainer");
 
 /**
  * Renders code in a Discord codeblock

src/components/ErrorBoundary.tsx

@@ -18,7 +18,7 @@
 
 import { Logger } from "@utils/Logger";
 import { Margins } from "@utils/margins";
-import { LazyComponent } from "@utils/react";
+import { LazyComponent, LazyComponentType } from "@utils/react";
 import { React } from "@webpack/common";
 
 import { ErrorCard } from "./ErrorCard";
@@ -104,8 +104,8 @@ const ErrorBoundary = LazyComponent(() => {
         }
     };
 }) as
-    React.ComponentType<React.PropsWithChildren<Props>> & {
-        wrap<T extends object = any>(Component: React.ComponentType<T>, errorBoundaryProps?: Omit<Props<T>, "wrappedProps">): React.FunctionComponent<T>;
+    LazyComponentType<React.PropsWithChildren<Props>> & {
+        wrap<T extends AnyRecord>(Component: React.ComponentType<T>, errorBoundaryProps?: Omit<Props<T>, "wrappedProps">): React.FunctionComponent<T>;
     };
 
 ErrorBoundary.wrap = (Component, errorBoundaryProps) => props => (

src/components/PluginSettings/PluginModal.tsx

@@ -24,13 +24,12 @@ import { classNameFactory } from "@api/Styles";
 import ErrorBoundary from "@components/ErrorBoundary";
 import { Flex } from "@components/Flex";
 import { gitRemote } from "@shared/vencordUserAgent";
-import { proxyLazy } from "@utils/lazy";
 import { Margins } from "@utils/margins";
 import { classes, isObjectEmpty } from "@utils/misc";
 import { ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalProps, ModalRoot, ModalSize, openModal } from "@utils/modal";
 import { OptionType, Plugin } from "@utils/types";
-import { findByPropsLazy, findComponentByCodeLazy } from "@webpack";
-import { Button, Clickable, FluxDispatcher, Forms, React, Text, Tooltip, UserStore, UserUtils } from "@webpack/common";
+import { find, findByProps, findComponentByCode } from "@webpack";
+import { Button, Clickable, FluxDispatcher, Forms, React, Text, Tooltip, UserUtils } from "@webpack/common";
 import { User } from "discord-types/general";
 import { Constructor } from "type-fest";
 
@@ -50,9 +49,9 @@ import { GithubButton, WebsiteButton } from "./LinkIconButton";
 
 const cl = classNameFactory("vc-plugin-modal-");
 
-const UserSummaryItem = findComponentByCodeLazy("defaultRenderUser", "showDefaultAvatarsForNullUsers");
-const AvatarStyles = findByPropsLazy("moreUsers", "emptyUser", "avatarContainer", "clickableAvatar");
-const UserRecord: Constructor<Partial<User>> = proxyLazy(() => UserStore.getCurrentUser().constructor) as any;
+const UserSummaryItem = findComponentByCode("defaultRenderUser", "showDefaultAvatarsForNullUsers");
+const AvatarStyles = findByProps("moreUsers", "emptyUser", "avatarContainer", "clickableAvatar");
+const UserRecord = find<Constructor<Partial<User>>>(m => m?.prototype?.getAvatarURL && m?.prototype?.hasHadPremium);
 
 interface PluginModalProps extends ModalProps {
     plugin: Plugin;