refactor(Webpack): Centralize and refactor Webpack patching

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

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,

src/components/VencordSettings/PatchHelperTab.tsx

@@ -56,7 +56,7 @@ function ReplacementComponent({ module, match, replacement, setReplacementError
     const [compileResult, setCompileResult] = React.useState<[boolean, string]>();
 
     const [patchedCode, matchResult, diff] = React.useMemo(() => {
-        const src: string = fact.toString().replaceAll("\n", "");
+        const src: string = String(fact).replaceAll("\n", "");
 
         try {
             new RegExp(match);

src/debug/loadLazyChunks.ts

@@ -8,6 +8,7 @@ import { Logger } from "@utils/Logger";
 import { canonicalizeMatch } from "@utils/patches";
 import * as Webpack from "@webpack";
 import { wreq } from "@webpack";
+import { AnyModuleFactory, ModuleFactory } from "webpack";
 
 const LazyChunkLoaderLogger = new Logger("LazyChunkLoader");
 
@@ -69,7 +70,7 @@ export async function loadLazyChunks() {
             await Promise.all(
                 Array.from(validChunkGroups)
                     .map(([chunkIds]) =>
-                        Promise.all(chunkIds.map(id => wreq.e(id as any).catch(() => { })))
+                        Promise.all(chunkIds.map(id => wreq.e(id)))
                     )
             );
 
@@ -81,7 +82,7 @@ export async function loadLazyChunks() {
                         continue;
                     }
 
-                    if (wreq.m[entryPoint]) wreq(entryPoint as any);
+                    if (wreq.m[entryPoint]) wreq(entryPoint);
                 } catch (err) {
                     console.error(err);
                 }
@@ -109,32 +110,33 @@ export async function loadLazyChunks() {
             }, 0);
         }
 
-        Webpack.factoryListeners.add(factory => {
+        function factoryListener(factory: AnyModuleFactory | ModuleFactory) {
             let isResolved = false;
-            searchAndLoadLazyChunks(factory.toString()).then(() => isResolved = true);
+            searchAndLoadLazyChunks(String(factory))
+                .then(() => isResolved = true)
+                .catch(() => isResolved = true);
 
             chunksSearchPromises.push(() => isResolved);
-        });
+        }
 
+        Webpack.factoryListeners.add(factoryListener);
         for (const factoryId in wreq.m) {
-            let isResolved = false;
-            searchAndLoadLazyChunks(wreq.m[factoryId].toString()).then(() => isResolved = true);
-
-            chunksSearchPromises.push(() => isResolved);
+            factoryListener(wreq.m[factoryId]);
         }
 
         await chunksSearchingDone;
+        Webpack.factoryListeners.delete(factoryListener);
 
         // Require deferred entry points
         for (const deferredRequire of deferredRequires) {
-            wreq!(deferredRequire as any);
+            wreq(deferredRequire);
         }
 
         // All chunks Discord has mapped to asset files, even if they are not used anymore
         const allChunks = [] as string[];
 
         // Matches "id" or id:
-        for (const currentMatch of wreq!.u.toString().matchAll(/(?:"(\d+?)")|(?:(\d+?):)/g)) {
+        for (const currentMatch of String(wreq.u).matchAll(/(?:"(\d+?)")|(?:(\d+?):)/g)) {
             const id = currentMatch[1] ?? currentMatch[2];
             if (id == null) continue;
 
@@ -155,10 +157,10 @@ export async function loadLazyChunks() {
 
             // Loads and requires a chunk
             if (!isWorkerAsset) {
-                await wreq.e(id as any);
+                await wreq.e(id);
                 // Technically, the id of the chunk does not match the entry point
                 // But, still try it because we have no way to get the actual entry point
-                if (wreq.m[id]) wreq(id as any);
+                if (wreq.m[id]) wreq(id);
             }
         }));
 

src/debug/runReporter.ts

@@ -6,7 +6,7 @@
 
 import { Logger } from "@utils/Logger";
 import * as Webpack from "@webpack";
-import { patches } from "plugins";
+import { addPatch, patches } from "plugins";
 
 import { loadLazyChunks } from "./loadLazyChunks";
 
@@ -19,7 +19,24 @@ async function runReporter() {
         let loadLazyChunksResolve: (value: void | PromiseLike<void>) => void;
         const loadLazyChunksDone = new Promise<void>(r => loadLazyChunksResolve = r);
 
-        Webpack.beforeInitListeners.add(() => loadLazyChunks().then((loadLazyChunksResolve)));
+        // The main patch for starting the reporter chunk loading
+        addPatch({
+            find: '"Could not find app-mount"',
+            replacement: {
+                match: /(?<="use strict";)/,
+                replace: "Vencord.Webpack._initReporter();"
+            }
+        }, "Vencord Reporter");
+
+        // @ts-ignore
+        Vencord.Webpack._initReporter = function () {
+            // initReporter is called in the patched entry point of Discord
+            // setImmediate to only start searching for lazy chunks after Discord initialized the app
+            setTimeout(async () => {
+                loadLazyChunks().then(loadLazyChunksResolve);
+            }, 0);
+        };
+
         await loadLazyChunksDone;
 
         for (const patch of patches) {
@@ -62,12 +79,12 @@ async function runReporter() {
                 if (result == null || (result.$$vencordInternal != null && result.$$vencordInternal() == null)) throw new Error("Webpack Find Fail");
             } catch (e) {
                 let logMessage = searchType;
-                if (method === "find" || method === "proxyLazyWebpack" || method === "LazyComponentWebpack") logMessage += `(${args[0].toString().slice(0, 147)}...)`;
-                else if (method === "extractAndLoadChunks") logMessage += `([${args[0].map(arg => `"${arg}"`).join(", ")}], ${args[1].toString()})`;
+                if (method === "find" || method === "proxyLazyWebpack" || method === "LazyComponentWebpack") logMessage += `(${String(args[0]).slice(0, 147)}...)`;
+                else if (method === "extractAndLoadChunks") logMessage += `([${args[0].map(arg => `"${arg}"`).join(", ")}], ${String(args[1])})`;
                 else if (method === "mapMangledModule") {
                     const failedMappings = Object.keys(args[1]).filter(key => result?.[key] == null);
 
-                    logMessage += `("${args[0]}", {\n${failedMappings.map(mapping => `\t${mapping}: ${args[1][mapping].toString().slice(0, 147)}...`).join(",\n")}\n})`;
+                    logMessage += `("${args[0]}", {\n${failedMappings.map(mapping => `\t${mapping}: ${String(args[1][mapping]).slice(0, 147)}...`).join(",\n")}\n})`;
                 }
                 else logMessage += `(${args.map(arg => `"${arg}"`).join(", ")})`;
 
@@ -81,4 +98,5 @@ async function runReporter() {
     }
 }
 
-runReporter();
+// Run after the Vencord object has been created
+setTimeout(runReporter, 0);

src/globals.d.ts

@@ -64,13 +64,8 @@ declare global {
     export var Vesktop: any;
     export var VesktopNative: any;
 
-    interface Window {
-        webpackChunkdiscord_app: {
-            push(chunk: any): any;
-            pop(): any;
-        };
+    interface Window extends Record<PropertyKey, any> {
         _: LoDashStatic;
-        [k: string]: any;
     }
 }
 

src/plugins/_core/noTrack.ts

@@ -20,6 +20,7 @@ import { definePluginSettings } from "@api/Settings";
 import { Devs } from "@utils/constants";
 import { Logger } from "@utils/Logger";
 import definePlugin, { OptionType, StartAt } from "@utils/types";
+import { WebpackRequire } from "webpack";
 
 const settings = definePluginSettings({
     disableAnalytics: {
@@ -81,9 +82,9 @@ export default definePlugin({
         Object.defineProperty(Function.prototype, "g", {
             configurable: true,
 
-            set(v: any) {
+            set(this: WebpackRequire, globalObj: WebpackRequire["g"]) {
                 Object.defineProperty(this, "g", {
-                    value: v,
+                    value: globalObj,
                     configurable: true,
                     enumerable: true,
                     writable: true

src/plugins/consoleShortcuts/index.ts

@@ -80,10 +80,12 @@ function makeShortcuts() {
         wp: Webpack,
         wpc: { getter: () => Webpack.cache },
         wreq: { getter: () => Webpack.wreq },
+        WebpackInstances: { getter: () => Vencord.WebpackPatcher.allWebpackInstances },
         wpsearch: search,
         wpex: extract,
         wpexs: (code: string) => extract(findModuleId(code)!),
         loadLazyChunks: IS_DEV ? loadLazyChunks : () => { throw new Error("loadLazyChunks is dev only."); },
+        filters,
         find,
         findAll: findAll,
         findByProps,

src/plugins/devCompanion.dev/index.tsx

@@ -160,7 +160,7 @@ function initWs(isManual = false) {
                     return reply("Expected exactly one 'find' matches, found " + keys.length);
 
                 const mod = candidates[keys[0]];
-                let src = String(mod.original ?? mod).replaceAll("\n", "");
+                let src = String(mod).replaceAll("\n", "");
 
                 if (src.startsWith("function(")) {
                     src = "0," + src;

src/utils/constants.ts

@@ -16,7 +16,6 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-export const WEBPACK_CHUNK = "webpackChunkdiscord_app";
 export const REACT_GLOBAL = "Vencord.Webpack.Common.React";
 export const SUPPORT_CHANNEL_ID = "1026515880080842772";
 

src/utils/lazy.ts

@@ -16,6 +16,8 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
+import { UNCONFIGURABLE_PROPERTIES } from "./misc";
+
 export function makeLazy<T>(factory: () => T, attempts = 5): () => T {
     let tries = 0;
     let cache: T;
@@ -29,10 +31,6 @@ export function makeLazy<T>(factory: () => T, attempts = 5): () => T {
     };
 }
 
-// Proxies demand that these properties be unmodified, so proxyLazy
-// will always return the function default for them.
-const unconfigurable = ["arguments", "caller", "prototype"];
-
 const handler: ProxyHandler<any> = {};
 
 export const SYM_LAZY_GET = Symbol.for("vencord.lazy.get");
@@ -59,14 +57,14 @@ for (const method of [
 handler.ownKeys = target => {
     const v = target[SYM_LAZY_GET]();
     const keys = Reflect.ownKeys(v);
-    for (const key of unconfigurable) {
+    for (const key of UNCONFIGURABLE_PROPERTIES) {
         if (!keys.includes(key)) keys.push(key);
     }
     return keys;
 };
 
 handler.getOwnPropertyDescriptor = (target, p) => {
-    if (typeof p === "string" && unconfigurable.includes(p))
+    if (typeof p === "string" && UNCONFIGURABLE_PROPERTIES.includes(p))
         return Reflect.getOwnPropertyDescriptor(target, p);
 
     const descriptor = Reflect.getOwnPropertyDescriptor(target[SYM_LAZY_GET](), p);

src/utils/misc.ts

@@ -100,6 +100,14 @@ export function pluralise(amount: number, singular: string, plural = singular +
     return amount === 1 ? `${amount} ${singular}` : `${amount} ${plural}`;
 }
 
+/** Proxies which have an internal target but use a function as the main target require these properties to be unconfigurable */
+export const UNCONFIGURABLE_PROPERTIES = ["arguments", "caller", "prototype"];
+
+export function interpolateIfDefined(strings: TemplateStringsArray, ...args: any[]) {
+    if (args.some(arg => arg == null)) return "";
+    return strings.reduce((acc, str, i) => `${acc}${str}${args[i] ?? ""}`, "");
+}
+
 export function tryOrElse<T>(func: () => T, fallback: T): T {
     try {
         const res = func();

src/webpack/index.ts

@@ -18,3 +18,4 @@
 
 export * as Common from "./common";
 export * from "./webpack";
+export * from "./wreq.d";