allow plugins to specify how soon their start() method is called

src/Vencord.ts

@@ -27,6 +27,8 @@ export { PlainSettings, Settings };
 import "./utils/quickCss";
 import "./webpack/patchWebpack";
 
+import { StartAt } from "@utils/types";
+
 import { get as dsGet } from "./api/DataStore";
 import { showNotification } from "./api/Notifications";
 import { PlainSettings, Settings } from "./api/Settings";
@@ -79,7 +81,7 @@ async function syncSettings() {
 
 async function init() {
     await onceReady;
-    startAllPlugins();
+    startAllPlugins(StartAt.WebpackReady);
 
     syncSettings();
 
@@ -130,13 +132,17 @@ async function init() {
     }
 }
 
+startAllPlugins(StartAt.Init);
 init();
 
-if (IS_DISCORD_DESKTOP && Settings.winNativeTitleBar && navigator.platform.toLowerCase().startsWith("win")) {
+document.addEventListener("DOMContentLoaded", () => {
-    document.addEventListener("DOMContentLoaded", () => {
+    startAllPlugins(StartAt.DOMContentLoaded);
+
+    if (IS_DISCORD_DESKTOP && Settings.winNativeTitleBar && navigator.platform.toLowerCase().startsWith("win")) {
         document.head.append(Object.assign(document.createElement("style"), {
             id: "vencord-native-titlebar-style",
             textContent: "[class*=titleBar]{display: none!important}"
         }));
-    }, { once: true });
+    }
-}
+}, { once: true });
+

src/plugins/clientTheme/index.tsx

@@ -12,7 +12,7 @@ import { getTheme, Theme } from "@utils/discord";
 import { Margins } from "@utils/margins";
 import { classes } from "@utils/misc";
 import { LazyComponent } from "@utils/react";
-import definePlugin, { OptionType } from "@utils/types";
+import definePlugin, { OptionType, StartAt } from "@utils/types";
 import { findByCode } from "@webpack";
 import { Button, Forms } from "@webpack/common";
 
@@ -87,25 +87,13 @@ export default definePlugin({
     description: "Recreation of the old client theme experiment. Add a color to your Discord client theme",
     settings,
 
-    patches: [
+    startAt: StartAt.DOMContentLoaded,
-        {
+    start() {
-            find: "Could not find app-mount",
+        updateColorVars(settings.store.color);
-            replacement: {
+        generateColorOffsets();
-                match: /(?<=Could not find app-mount"\))/,
-                replace: ",$self.addThemeInitializer()"
-            }
-        }
-    ],
-
-    addThemeInitializer() {
-        document.addEventListener("DOMContentLoaded", this.themeInitializer = () => {
-            updateColorVars(settings.store.color);
-            generateColorOffsets();
-        });
     },
 
     stop() {
-        document.removeEventListener("DOMContentLoaded", this.themeInitializer);
         document.getElementById("clientThemeVars")?.remove();
         document.getElementById("clientThemeOffsets")?.remove();
     }

src/plugins/index.ts

@@ -19,7 +19,7 @@
 import { registerCommand, unregisterCommand } from "@api/Commands";
 import { Settings } from "@api/Settings";
 import { Logger } from "@utils/Logger";
-import { Patch, Plugin } from "@utils/types";
+import { Patch, Plugin, StartAt } from "@utils/types";
 import { FluxDispatcher } from "@webpack/common";
 import { FluxEvents } from "@webpack/types";
 
@@ -85,9 +85,15 @@ for (const p of pluginsValues) {
     }
 }
 
-export const startAllPlugins = traceFunction("startAllPlugins", function startAllPlugins() {
+export const startAllPlugins = traceFunction("startAllPlugins", function startAllPlugins(target: StartAt) {
+    logger.info(`Starting plugins (stage ${target})`);
     for (const name in Plugins)
         if (isPluginEnabled(name)) {
+            const p = Plugins[name];
+
+            const startAt = p.startAt ?? StartAt.WebpackReady;
+            if (startAt !== target) continue;
+
             startPlugin(Plugins[name]);
         }
 });

src/utils/types.ts

@@ -80,6 +80,11 @@ export interface PluginDef {
      * Whether this plugin should be enabled by default, but can be disabled
      */
     enabledByDefault?: boolean;
+    /**
+     * When to call the start() method
+     * @default StartAt.WebpackReady
+     */
+    startAt?: StartAt,
     /**
      * Optionally provide settings that the user can configure in the Plugins tab of settings.
      * @deprecated Use `settings` instead
@@ -117,6 +122,15 @@ export interface PluginDef {
     tags?: string[];
 }
 
+export const enum StartAt {
+    /** Right away, as soon as Vencord initialised */
+    Init = "Init",
+    /** On the DOMContentLoaded event, so once the document is ready */
+    DOMContentLoaded = "DOMContentLoaded",
+    /** Once Discord's core webpack modules have finished loading, so as soon as things like react and flux are available */
+    WebpackReady = "WebpackReady"
+}
+
 export const enum OptionType {
     STRING,
     NUMBER,