@protoqol/vivid-log 2.0.0

package/lib/ansi.ts

@@ -0,0 +1,47 @@
+export const ANSI = {
+    reset    : "\x1b[0m",
+    bold     : "\x1b[1m",
+    italic   : "\x1b[3m",
+    underline: "\x1b[4m",
+    inverse  : "\x1b[7m",
+    black    : "\x1b[30m",
+    red      : "\x1b[31m",
+    green    : "\x1b[32m",
+    yellow   : "\x1b[33m",
+    blue     : "\x1b[34m",
+    magenta  : "\x1b[35m",
+    cyan     : "\x1b[36m",
+    white    : "\x1b[37m",
+    bgBlack  : "\x1b[40m",
+    bgRed    : "\x1b[41m",
+    bgGreen  : "\x1b[42m",
+    bgYellow : "\x1b[43m",
+    bgBlue   : "\x1b[44m",
+    bgMagenta: "\x1b[45m",
+    bgCyan   : "\x1b[46m",
+    bgWhite  : "\x1b[47m",
+};
+
+export const hexToAnsi = (hex: string): string => {
+    hex = hex.replace(/^#/, "");
+    if (hex.length === 3) {
+        hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
+    }
+    const r = parseInt(hex.substring(0, 2), 16);
+    const g = parseInt(hex.substring(2, 4), 16);
+    const b = parseInt(hex.substring(4, 6), 16);
+
+    return `\x1b[38;2;${r};${g};${b}m`;
+};
+
+export const hexToAnsiBg = (hex: string): string => {
+    hex = hex.replace(/^#/, "");
+    if (hex.length === 3) {
+        hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
+    }
+    const r = parseInt(hex.substring(0, 2), 16);
+    const g = parseInt(hex.substring(2, 4), 16);
+    const b = parseInt(hex.substring(4, 6), 16);
+
+    return `\x1b[48;2;${r};${g};${b}m`;
+};

package/lib/config/config.ts

@@ -0,0 +1,68 @@
+export interface StatusConfig {
+    lightColor: string;
+
+    darkColor: string;
+
+    code: string;
+}
+
+export interface VividLogConfig {
+    autoGroup: boolean;
+
+    timeNotation: string;
+
+    iUseLightTheme: boolean;
+
+    customStyle: string;
+
+    fontSize: string;
+
+    newLine: boolean;
+
+    status: {
+        [key: string]: StatusConfig;
+    };
+}
+
+const config: VividLogConfig = {
+    autoGroup     : true,
+    timeNotation  : "h:m:s",
+    iUseLightTheme: false,
+    customStyle   : "",
+    fontSize      : "12px",
+    newLine       : typeof navigator !== "undefined" ? navigator.userAgent.includes("Firefox") : false,
+    status        : {
+        error  : {
+            lightColor: "#da3030",
+            darkColor : "#872323",
+            code      : "ERROR",
+        },
+        success: {
+            lightColor: "#00b808",
+            darkColor : "#21872a",
+            code      : "SUCCESS",
+        },
+        warning: {
+            lightColor: "#da993e",
+            darkColor : "#875a2a",
+            code      : "WARNING",
+        },
+        info   : {
+            lightColor: "#b0b52c",
+            darkColor : "#788738",
+            code      : "INFO",
+        },
+        debug  : {
+            lightColor: "#da43be",
+            darkColor : "#872773",
+            code      : "DEBUG",
+        },
+        log    : {
+            lightColor: "#65b0b9",
+            darkColor : "#4f7e87",
+            code      : "LOG",
+        },
+    },
+};
+
+export default config;

package/lib/enums.ts

@@ -0,0 +1,35 @@
+export enum LogSize {
+    SMALL_LOGGABLE = 0,
+    BIG_LOGGABLE   = 1,
+}
+
+export interface LogTypeInfo {
+    i: number;
+
+    val: string;
+}
+
+export const DEBUG: LogTypeInfo = {
+    i  : 2,
+    val: "debug",
+};
+
+export const ERROR: LogTypeInfo = {
+    i  : 3,
+    val: "error",
+};
+
+export const INFO: LogTypeInfo = {
+    i  : 4,
+    val: "info",
+};
+
+export const LOG: LogTypeInfo = {
+    i  : 5,
+    val: "log",
+};
+
+export const WARNING: LogTypeInfo = {
+    i  : 6,
+    val: "warning",
+};

package/lib/methods.ts

@@ -0,0 +1,32 @@
+export class Methods {
+    static takeOver(turnOn: boolean): boolean {
+        if (turnOn) {
+            if (typeof window !== "undefined") {
+                window.onerror = (_message, _source, _lineno, _colno, error) => {
+                    if (error) {
+                        window.vividLog?.err(error.stack);
+                        return true;
+                    }
+
+                    return false;
+                };
+            } else if (typeof process !== "undefined") {
+                process.on("uncaughtException", (error) => {
+                    const vividLog = (global as any).vividLog;
+                    if (vividLog) {
+                        vividLog.err(error.stack);
+                    } else {
+                        console.error(error);
+                    }
+                });
+            }
+            return true;
+        }
+
+        const vividLog = (typeof window !== "undefined") ? window.vividLog : (global as any).vividLog;
+
+        vividLog?.style("font-style: italic;").say("f v.takeOver() was called but was not turned on. Do so by using v.takeOver(true)", "VividLog", "#E3342F");
+
+        return false;
+    }
+}

package/lib/utils.ts

@@ -0,0 +1,271 @@
+import {LogSize} from "./enums";
+import config from "./config/config";
+import {ANSI, hexToAnsi, hexToAnsiBg} from "./ansi";
+
+declare global {
+    interface Window {
+        vividLog: any;
+    }
+
+    const vividLog: any;
+}
+
+const isBrowser = typeof window !== "undefined" && typeof window.document !== "undefined";
+
+export class Utils {
+    static evaluate(loggable: any, type: string): boolean {
+        if (this.checkTypeLog(loggable) === LogSize.SMALL_LOGGABLE) {
+            return this.fire(this.logBuilder(loggable, type), this.styleBuilder(type));
+        }
+
+        if (this.checkTypeLog(loggable) === LogSize.BIG_LOGGABLE) {
+            const style = this.styleBuilder(type);
+
+            if (isBrowser) {
+                console.log(
+                    this.logBuilder(loggable, type, true),
+                    style.status,
+                    style.time,
+                    style.type,
+                );
+                console.log(loggable);
+                console.log(
+                    "%c                         ",
+                    "padding: 0 5px;font-weight: bolder; border-top: 2px solid " + (window.vividLog?.config?.status[type]?.lightColor || "#000") + ";",
+                );
+            } else {
+                console.log(this.logBuilder(loggable, type, true));
+                console.log(loggable);
+                const color = (global as any).vividLog?.config?.status[type]?.lightColor || config.status[type]?.lightColor || "#000";
+                console.log(hexToAnsi(color) + "-------------------------" + ANSI.reset);
+            }
+        }
+
+        return false;
+    }
+
+    static getType(loggable: any): string | false {
+        let len: number;
+
+        if (loggable instanceof Error) {
+            return "error";
+        }
+
+        switch (typeof loggable) {
+            case "string":
+                len = loggable.length || 0;
+                return `string[${len}]`;
+            case "boolean":
+                return "boolean";
+            case "number":
+                len = String(loggable).length;
+                return `integer[${len}]`;
+            case "object":
+                if (loggable === null) {
+                    return "null";
+                }
+                if (Array.isArray(loggable)) {
+                    len = loggable.length;
+                    return `array[${len}]`;
+                }
+                len = Object.keys(loggable).length;
+                return `object[${len}]`;
+            case "bigint":
+                len = String(loggable).length;
+                return `big integer[${len}]`;
+            case "function":
+                return "function";
+            case "symbol":
+                return "symbol";
+            case "undefined":
+                return "undefined";
+            default:
+                return false;
+        }
+    }
+
+    static isTypeOfLoggable(variable: string): boolean {
+        return ["log", "debug", "error", "info", "success", "warning"].includes(variable);
+    }
+
+    static createTime(format: string): string | false {
+        const time = this.timeObj(format);
+        let returnTime = "";
+        const formats = time.format;
+
+        for (let iteration = 0; iteration < formats.length; iteration++) {
+            switch (formats[iteration]) {
+                case "h":
+                    returnTime += time.h;
+                    break;
+                case "m":
+                    returnTime += time.m;
+                    break;
+                case "s":
+                    returnTime += time.s;
+                    break;
+                case "ms":
+                    returnTime += time.ms;
+                    break;
+            }
+            if (iteration !== (formats.length - 1)) {
+                returnTime += ":";
+            }
+        }
+
+        return returnTime.length >= 1 ? returnTime : false;
+    }
+
+    static timeObj(format: string) {
+        const date = new Date();
+        const cfg = (isBrowser ? window.vividLog?.config : (global as any).vividLog?.config) || config;
+
+        return {
+            format: format.split(":") || cfg.timeNotation.split(":"),
+            h     : String(date.getHours()).padStart(2, "0"),
+            m     : String(date.getMinutes()).padStart(2, "0"),
+            s     : String(date.getSeconds()).padStart(2, "0"),
+            ms    : String(date.getMilliseconds()).padStart(2, "0"),
+        };
+    }
+
+    static checkTypeLog(loggable: any): LogSize {
+        return (typeof loggable === "string" || typeof loggable === "number" || typeof loggable === "undefined")
+               ? LogSize.SMALL_LOGGABLE
+               : LogSize.BIG_LOGGABLE;
+    }
+
+    static makeStyleCompatible(css: string): string {
+        return css;
+    }
+
+    static styleBuilder(type: string, color?: string) {
+        const cfg = (isBrowser ? window.vividLog?.config : (global as any).vividLog?.config) || config;
+        const lightTheme = cfg.iUseLightTheme ? "color: white;" : "";
+        const customStyle = cfg.customStyle;
+        const fontSize = `font-size: ${cfg.fontSize};`;
+
+        const typeOrColorLight = this.isTypeOfLoggable(type) ? cfg.status[type].lightColor : color;
+        const typeOrColorDark = this.isTypeOfLoggable(type) ? cfg.status[type].darkColor : color;
+
+        const style = {
+            default        : "color: #F1F5F8;" + fontSize,
+            labelDefault   : `border-radius: 5px; padding: 5px; background: ${typeOrColorLight};`,
+            timeDefault    : "",
+            logNameDefault : "font-weight: bold;",
+            typeNameDefault: `background: ${typeOrColorDark};`,
+            varDefault     : "margin-top: 10px; margin-bottom: 5px;" + lightTheme,
+            custom         : this.makeStyleCompatible(customStyle),
+        };
+
+        return {
+            status: style.default + style.labelDefault + style.logNameDefault,
+            time  : style.default + style.labelDefault + style.timeDefault,
+            type  : style.default + style.labelDefault + style.typeNameDefault,
+            var   : style.default + style.varDefault + style.custom,
+        };
+    }
+
+    static logBuilder(loggable: any, typeOrLabel: string, onlyHeader: boolean = false): string {
+        const cfg = (isBrowser ? window.vividLog?.config : (global as any).vividLog?.config) || config;
+        const label = this.isTypeOfLoggable(typeOrLabel) ? cfg.status[typeOrLabel].code : typeOrLabel;
+
+        if (!isBrowser) {
+            const time = this.createTime(cfg.timeNotation);
+            const type = this.getType(loggable);
+            const statusColor = this.isTypeOfLoggable(typeOrLabel) ? cfg.status[typeOrLabel].lightColor : (typeOrLabel === "LABEL" ? "#800080" : "#A52A2A");
+            const typeColor = this.isTypeOfLoggable(typeOrLabel) ? cfg.status[typeOrLabel].darkColor : (typeOrLabel === "LABEL" ? "#800080" : "#A52A2A");
+
+            const labelStyled = hexToAnsiBg(statusColor) + ANSI.white + ANSI.bold + ` ${label} ` + ANSI.reset;
+            const timeStyled = hexToAnsiBg("#444") + ANSI.white + ` ${time} ` + ANSI.reset;
+            const typeStyled = hexToAnsiBg(typeColor) + ANSI.white + ` ${type} ` + ANSI.reset;
+
+            if (!onlyHeader) {
+                return `${labelStyled}${timeStyled}${typeStyled}${cfg.newLine ? " " : "\n"} ${loggable}`;
+            }
+
+            return `${labelStyled}${timeStyled}${typeStyled}`;
+        }
+
+        if (!onlyHeader) {
+            return "%c" + label +
+                "%c" + this.createTime(cfg.timeNotation) +
+                "%c" + this.getType(loggable) + (cfg.newLine ? " " : "\n") +
+                "%c " + loggable;
+        }
+
+        const typeCode = cfg.status[typeOrLabel]?.code || typeOrLabel;
+
+        return "%c" + typeCode +
+            "%c" + this.createTime(cfg.timeNotation) +
+            "%c" + this.getType(loggable);
+    }
+
+    static resetConfs(): boolean {
+        const cfg = (isBrowser ? window.vividLog?.config : (global as any).vividLog?.config) || config;
+        cfg.customStyle = "";
+        cfg.autoGroup = false;
+        return cfg.customStyle === "" && cfg.autoGroup === false;
+    }
+
+    static fire(loggable: string, style: any): boolean {
+        if (this.resetConfs()) {
+            if (isBrowser) {
+                console.log(loggable, style.status, style.time, style.type, style.var);
+            } else {
+                console.log(loggable);
+            }
+
+            return true;
+        }
+
+        return false;
+    }
+
+    static fireLabel(label: string, type: string = "LABEL"): void {
+        const cfg = (isBrowser ? window.vividLog?.config : (global as any).vividLog?.config) || config;
+
+        if (isBrowser) {
+            const compiled = `%c${label}%c${this.createTime(cfg.timeNotation)}%c${type}`;
+            const style = this.styleBuilder("purple", "purple");
+            style.var = "";
+            this.fire(compiled, style);
+        } else {
+            const compiled = this.logBuilder(null, label, true);
+            this.fire(compiled, {});
+        }
+    }
+
+    static loggable(args: IArguments | any[], type: string): boolean {
+        if (args.length > 1) {
+            return this.iterateLoggables(args, type);
+        }
+
+        return this.evaluate(args[0], type);
+    }
+
+    static iterateLoggables(args: IArguments | any[], type: string): boolean {
+        const cfg = (isBrowser ? window.vividLog?.config : (global as any).vividLog?.config) || config;
+
+        if (cfg.autoGroup) {
+            this.fireLabel(type.toUpperCase(), `Group[${args.length}]`);
+            if (isBrowser && console.groupCollapsed) {
+                console.groupCollapsed(type.toUpperCase());
+            }
+        }
+
+        for (let i = 0; i < args.length; i++) {
+            this.evaluate(args[i], "log");
+        }
+
+        if (cfg.autoGroup) {
+            if (isBrowser && console.groupEnd) {
+                console.groupEnd();
+            }
+        }
+
+        cfg.autoGroup = false;
+
+        return true;
+    }
+}

package/lib/vividLog.ts

@@ -0,0 +1,134 @@
+import {Utils} from "./utils";
+import {Methods} from "./methods";
+import config, {VividLogConfig} from "./config/config";
+import {LogSize} from "./enums";
+
+export class VividLog {
+    public config: VividLogConfig = config;
+
+    constructor() {
+        if (typeof window !== "undefined") {
+            (window as any).vividLog = this;
+        } else if (typeof global !== "undefined") {
+            (global as any).vividLog = this;
+        }
+    }
+
+    /**
+     * Take over default error log
+     */
+    public takeOver(activate: boolean = false): void {
+        Methods.takeOver(activate);
+    }
+
+    /**
+     * Chain before log to group the all logs
+     */
+    public group(grouped: boolean = true): this {
+        this.config.autoGroup = grouped;
+        return this;
+    }
+
+    /**
+     * Chain before log to give message a custom style
+     */
+    public style(customStyle: string = ""): this {
+        this.config.customStyle = customStyle;
+        return this;
+    }
+
+    /**
+     * Only log a label
+     */
+    public fireLabel(label: string): this {
+        Utils.fireLabel(label);
+        return this;
+    }
+
+    /**
+     * Normal priority log
+     */
+    public log(...args: any[]): this {
+        Utils.loggable(args, "log");
+        return this;
+    }
+
+    /**
+     * Debug priority log
+     */
+    public debug(...args: any[]): this {
+        Utils.loggable(args, "debug");
+        return this;
+    }
+
+    /**
+     * Error priority log
+     */
+    public err(...args: any[]): this {
+        Utils.loggable(args, "error");
+        return this;
+    }
+
+    /**
+     * Warning priority log
+     */
+    public warn(...args: any[]): this {
+        Utils.loggable(args, "warning");
+        return this;
+    }
+
+    /**
+     * Success priority log
+     */
+    public done(...args: any[]): this {
+        Utils.loggable(args, "success");
+        return this;
+    }
+
+    /**
+     * Information priority log
+     */
+    public info(...args: any[]): this {
+        Utils.loggable(args, "info");
+        return this;
+    }
+
+    /**
+     * Custom logging utility
+     */
+    public say(loggable: any, label?: string, color?: string): boolean | void {
+        const type = Utils.checkTypeLog(loggable);
+
+        if (type === LogSize.SMALL_LOGGABLE) {
+            return Utils.fire(
+                Utils.logBuilder(loggable, label || (typeof document !== "undefined" ? document.title : (typeof process !== "undefined" ? "node" : "vividLog"))),
+                Utils.styleBuilder(color || "brown", color || "brown"),
+            );
+        }
+
+        if (type === LogSize.BIG_LOGGABLE) {
+            const style = Utils.styleBuilder("log"); // Default to log style if big
+            console.log(
+                Utils.logBuilder(loggable, "log", true),
+                style.status,
+                style.time,
+                style.type,
+            );
+            console.log(loggable);
+            console.log(
+                "%c                         ",
+                "padding: 0 5px;font-weight: bolder; border-top: 2px solid " + this.config.status["log"].lightColor + ";",
+            );
+            return true;
+        }
+    }
+}
+
+const vividLogInstance = new VividLog();
+export default vividLogInstance;
+
+if (typeof window !== "undefined") {
+    (window as any).vividLog = vividLogInstance;
+} else if (typeof global !== "undefined") {
+    (global as any).vividLog = vividLogInstance;
+}

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name"           : "@protoqol/vivid-log",
+  "version"        : "2.0.0",
+  "description"    : "Console Logs, reimagined for JavaScript & TypeScript",
+  "main"           : "dist/vividLog.js",
+  "author"         : {
+    "name" : "Protoqol",
+    "email": "open-source@protoqol.nl",
+    "url"  : "https://protoqol.nl"
+  },
+  "repository"     : {
+    "type": "git",
+    "url" : "https://github.com/Protoqol/vivid-log"
+  },
+  "scripts"        : {
+    "test" : "mocha -r ts-node/register test/**/*.ts",
+    "build": "tsc && webpack --mode production",
+    "watch": "tsc -w"
+  },
+  "keywords"       : [
+    "logging",
+    "debug",
+    "javascript",
+    "ecmascript",
+    "protoqol"
+  ],
+  "license"        : "MIT",
+  "bugs"           : {
+    "url": "https://github.com/Protoqol/vivid-log/issues"
+  },
+  "homepage"       : "https://github.com/Protoqol/vivid-log#readme",
+  "devDependencies": {
+    "@types/mocha": "^10.0.10",
+    "@types/node" : "^22.13.4",
+    "mocha"       : "^11.7.5",
+    "ts-loader"   : "^9.5.4",
+    "ts-node"     : "^10.9.2",
+    "typescript"  : "^5.9.3",
+    "webpack"     : "^5.0.0",
+    "webpack-cli" : "^4.0.0"
+  }
+}