Add logger to bdapi

renderer/src/modules/api/index.js

@@ -1,4 +1,4 @@
-import Logger from "@common/logger";
+import BDLogger from "@common/logger";
 
 import PluginManager from "@modules/pluginmanager";
 import ThemeManager from "@modules/thememanager";
@@ -15,6 +15,7 @@ import Webpack from "./webpack";
 import * as Legacy from "./legacy";
 import ContextMenu from "./contextmenu";
 import fetch from "./fetch";
+import Logger from "./logger";
 
 import ColorInput from "@ui/settings/components/color";
 import DropdownInput from "@ui/settings/components/dropdown";
@@ -36,6 +37,7 @@ const PatcherAPI = new Patcher();
 const DataAPI = new Data();
 const DOMAPI = new DOM();
 const ContextMenuAPI = new ContextMenu();
+const DefaultLogger = new Logger();
 
 /**
  * `BdApi` is a globally (`window.BdApi`) accessible object for use by plugins and developers to make their lives easier.
@@ -46,7 +48,7 @@ export default class BdApi {
         if (!pluginName) return BdApi;
         if (bounded.has(pluginName)) return bounded.get(pluginName);
         if (typeof(pluginName) !== "string") {
-            Logger.error("BdApi", "Plugin name not a string, returning generic API!");
+            BDLogger.error("BdApi", "Plugin name not a string, returning generic API!");
             return BdApi;
         }
 
@@ -57,6 +59,7 @@ export default class BdApi {
         this.Patcher = new Patcher(pluginName);
         this.Data = new Data(pluginName);
         this.DOM = new DOM(pluginName);
+        this.Logger = new Logger(pluginName);
 
         bounded.set(pluginName, this);
     }
@@ -176,6 +179,12 @@ BdApi.Components = {
  */
 BdApi.Net = {fetch};
 
+/**
+ * An instance of {@link Logger} for logging information.
+ * @type Logger
+ */
+BdApi.Logger = DefaultLogger;
+
 Object.freeze(BdApi);
 Object.freeze(BdApi.Net);
 Object.freeze(BdApi.prototype);

renderer/src/modules/api/logger.js

@@ -0,0 +1,125 @@
+/**
+ * Simple logger for the lib and plugins.
+ *
+ * @module Logger
+ * @version 0.1.0
+ */
+
+/* eslint-disable no-console */
+
+/**
+ * List of logging types.
+ */
+
+const LogTypes = {
+    error: "error",
+    debug: "debug",
+    log: "log",
+    warn: "warn",
+    info: "info"
+};
+
+const parseType = type => LogTypes[type] || "log";
+
+
+/**
+ * `Logger` is a helper class to log data in a nice and consistent way. An instance is available on {@link BdApi}.
+ * @type Logger
+ * @summary {@link Logger} is a simple utility for logging information.
+ * @name Logger
+ */
+class Logger {
+
+    #pluginName = "";
+    #nameStyle = "color: #3a71c1; font-weight: 700;";
+    #messageStyle = "";
+
+    /**
+     * @param {string} pluginName - Name of the plugin
+     * @param {string} nameStyle - CSS to style the plugin name
+     * @param {string} messageStyle - CSS to style the main message
+     * @returns 
+     */
+    constructor(pluginName, nameStyle, messageStyle) {
+        if (!pluginName) return;
+        this.#pluginName = pluginName;
+        if (nameStyle) this.#nameStyle = nameStyle;
+        if (messageStyle) this.#messageStyle = messageStyle;
+    }
+
+    /**
+     * Logs an error using a collapsed error group with stacktrace.
+     *
+     * @param {string} pluginName - Name of the calling module.
+     * @param {string} message - Message or error to have logged.
+     * @param {Error} error - Error object to log with the message.
+     */
+    stacktrace(pluginName, message, error) {
+        console.error(`%c[${pluginName}]%c ${message}\n\n%c`, this.#nameStyle, "color: red; font-weight: 700;", "color: red;", error);
+    }
+
+    /**
+     * Logs an error message.
+     * 
+     * @param {string} pluginName Name of the calling module
+     * @param  {...any} message Messages to have logged.
+     */
+    error(pluginName, ...message) {this.#_log(pluginName, message, "error");}
+
+    /**
+     * Logs a warning message.
+     *
+     * @param {string} module - Name of the calling module.
+     * @param {...any} message - Messages to have logged.
+     */
+    warn(pluginName, ...message) {this.#_log(pluginName, message, "warn");}
+
+    /**
+     * Logs an informational message.
+     *
+     * @param {string} module - Name of the calling module.
+     * @param {...any} message - Messages to have logged.
+     */
+    info(pluginName, ...message) {this.#_log(pluginName, message, "info");}
+
+    /**
+     * Logs used for debugging purposes.
+     *
+     * @param {string} module - Name of the calling module.
+     * @param {...any} message - Messages to have logged.
+     */
+    debug(pluginName, ...message) {this.#_log(pluginName, message, "debug");}
+
+    /**
+     * Logs used for basic loggin.
+     *
+     * @param {string} module - Name of the calling module.
+     * @param {...any} message - Messages to have logged.
+     */
+    log(pluginName, ...message) {this.#_log(pluginName, message);}
+
+    /**
+     * Logs strings using different console levels and a module label.
+     *
+     * @param {string} module - Name of the calling module.
+     * @param {any|Array<any>} message - Messages to have logged.
+     * @param {module:Logger.LogTypes} type - Type of log to use in console.
+     */
+    #_log(pluginName, message, type = "log") {
+        type = parseType(type);
+
+        // Normalize messages to be an array for later spreading
+        if (!Array.isArray(message)) message = message ? [message] : [];
+
+        // If a name was set via constructor move the "name" to be part of the message
+        if (pluginName && this.#pluginName) message = [pluginName, ...message];
+        
+        const displayName = this.#pluginName || pluginName;
+        console[type](`%c[${displayName}]%c`, this.#nameStyle, this.#messageStyle, ...message);
+    }
+}
+
+
+Object.freeze(Logger);
+Object.freeze(Logger.prototype);
+export default Logger;

renderer/src/modules/webpackmodules.js

@@ -398,7 +398,7 @@ export default class WebpackModules {
 
         return new Promise((resolve) => {
             const cancel = () => this.removeListener(listener);
-            const listener = function(exports) {
+            const listener = function(exports, module, id) {
                 if (!exports || exports === window || exports === document.documentElement || exports[Symbol.toStringTag] === "DOMTokenList") return;
 
                 let foundModule = null;
@@ -407,14 +407,14 @@ export default class WebpackModules {
                         foundModule = null;
                         const wrappedExport = exports[key];
                         if (!wrappedExport) continue;
-                        if (wrappedFilter(wrappedExport)) foundModule = wrappedExport;
+                        if (wrappedFilter(wrappedExport, module, id)) foundModule = wrappedExport;
                     }
                 }
                 else {
-                    if (exports.Z && wrappedFilter(exports.Z)) foundModule = defaultExport ? exports.Z : exports;
-                    if (exports.ZP && wrappedFilter(exports.ZP)) foundModule = defaultExport ? exports.ZP : exports;
-                    if (exports.__esModule && exports.default && wrappedFilter(exports.default)) foundModule = defaultExport ? exports.default : exports;
-                    if (wrappedFilter(exports)) foundModule = exports;
+                    if (exports.Z && wrappedFilter(exports.Z, module, id)) foundModule = defaultExport ? exports.Z : exports;
+                    if (exports.ZP && wrappedFilter(exports.ZP, module, id)) foundModule = defaultExport ? exports.ZP : exports;
+                    if (exports.__esModule && exports.default && wrappedFilter(exports.default, module, id)) foundModule = defaultExport ? exports.default : exports;
+                    if (wrappedFilter(exports, module, id)) foundModule = exports;
 
                 }
                 

renderer/src/styles/ui/slider.css

@@ -115,3 +115,7 @@
     left: calc(50% - 1px);
     z-index: -1;
 }
+
+.bd-setting-item.inline:first-child:has(.bd-slider-wrap) {
+    padding-top: 50px;
+}