Merge pull request 'Improve logger code quality and add group' (#1) from sink/demoncord:PATCH_logger-cleanup into master

Reviewed-on: ruthenic/demoncord#1

.gitignore

@@ -2,3 +2,4 @@ node_modules
 .pnpm*
 pnpm*
 package-lock.json
+dist

.prettierrc

@@ -0,0 +1,14 @@
+{
+    "tabWidth": 4,
+    "singleQuote": false,
+    "semi": true,
+    "bracketSpacing": true,
+    "overrides": [
+        {
+            "files": "*.js",
+            "options": {
+                "parser": "babel-flow"
+            }
+        }
+    ]
+}

src/api/plugins.js

@@ -1,6 +1,6 @@
 // @flow
 import { get, set } from 'idb-keyval';
-import log          from './utils/logger.js'
+import logger          from './utils/logger.js'
 
 async function init(obj: Object): Promise<boolean> {
 	//TODO: check for enabled plugins in the idb, start them
@@ -42,7 +42,7 @@ async function addPlugin(iife: string, metadata: Object): Promise<boolean> {
 async function delPlugin(name: string): Promise<boolean> {
 	const globalSettings = await get("demoncord")
 	if (globalSettings["plugin"][name] === undefined) {
-		log("Cannot remove non-existant plugin!", "error", "Plugins")
+		logger.error("Cannot remove non-existant plugin!", ["Plugins"])
 		return false
 	} else {
 		globalSettings["plugin"][name] = undefined
@@ -55,16 +55,16 @@ async function delPlugin(name: string): Promise<boolean> {
 async function startPlugin(name: string): Promise<boolean> {
 	const globalSettings = await get("demoncord")
 	if (globalSettings["plugin"][name] === undefined) {
-		log("Cannot start non-existant plugin!", "error", "Plugins")
+		logger.error("Cannot start non-existant plugin!", ["Plugins"])
 		return false
 	} else {
-		log(`Starting ${name}...`, "log", "Plugins")
+		logger.log(`Starting ${name}...`, ["Plugins"])
 		const plug = globalSettings["plugin"][name]
 		const exports: Object = (0, eval)(plug.iife)
 		const onStart: (ctx: Object)=>void = exports.onStart
 		let ctx = {} // ctx is how you're going to store things that need to be accessed in both onStart and onStop. dumb, i know
 		onStart(ctx)
-		log(`Started ${name}!`, "log", "Plugins")
+		logger.log(`Started ${name}!`, ["Plugins"])
 		window.demon.__plugins[name] = {status: 1, ctx: ctx}
 		return true
 	}
@@ -73,15 +73,15 @@ async function startPlugin(name: string): Promise<boolean> {
 async function stopPlugin(name: string): Promise<boolean> {
 	const globalSettings = await get("demoncord")
 	if (globalSettings["plugin"][name] === undefined ) {
-		log("Cannot stop non-existant or non-running plugin!", "error", "Plugins")
+		logger.error("Cannot stop non-existant or non-running plugin!", ["Plugins"])
 		return false
 	} else {
-		log(`Stopping ${name}...`, "log", "Plugins")
+		logger.log(`Stopping ${name}...`, ["Plugins"])
 		const plug = globalSettings["plugin"][name]
 		const exports: Object = (0, eval)(plug.iife)
 		const onStop: (ctx: Object)=>void = exports.onStop
 		onStop(window.demon.__plugins[name].ctx)
-		log(`Stopped ${name}!`, "log", "Plugins")
+		logger.log(`Stopped ${name}!`, ["Plugins"])
 		return true
 	}
 }
@@ -89,7 +89,7 @@ async function stopPlugin(name: string): Promise<boolean> {
 async function togglePlugin(name: string): Promise<boolean> {
 	const globalSettings = await get("demoncord")
 	if (globalSettings["plugin"][name] === undefined) {
-		log("Cannot toggle non-existant plugin!", "error", "Plugins")
+		logger.error("Cannot toggle non-existant plugin!", ["Plugins"])
 		return false
 	} else {
 		globalSettings["plugin"][name].enabled = !globalSettings["plugin"][name].enabled

src/api/utils/logger.js

@@ -1,19 +1,83 @@
 //@flow
+
+// hopefully separating out styles like this is more readable -- sink
+const styleBase = `
+@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@700&display=swap');
+font-family: 'IBM Plex Mono', monospace;
+`;
+
+const styleBg = `
+${styleBase}
+color: #1d1131;
+background-color: #aa8dd8;
+font-weight: 600;
+font-size: 0.9em;
+padding: 0px 5px 1px 5px;
+border-radius: 5px;
+`;
+
+const styleTxt = `
+${styleBase}
+color: #E2EECE;
+font-weight: 500;
+font-size: 0.9em;
+`;
+
+type LogFuncs = "log" | "error" | "warn" | "trace" | "group";
+type LoggerFunction = (message: string, locs: string[]) => void;
+
 //TODO: make setting to save logs in idb, for debugging and troubleshooting purposes
-//bg: #aa8dd8
-//fg: #553986
-function log(message: string, type: string, ...locs: string[]): void {
-	let string = "%cDemoncord%c "
-	let style = []
-	for (let i = 0; i < locs.length; i++) {
-        const loc = locs[i]
-		style.push("@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@700&display=swap'); font-family: 'IBM Plex Mono', monospace; font-weight: 600; background-color: #aa8dd8; color: #1d1131; border-radius: 5px; padding: 0px 5px 1px 5px; font-size: 0.9em;", "")
-		string += `%c${loc}%c `
-	}
-	style.push("@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@700&display=swap'); font-family: 'IBM Plex Mono', monospace; font-weight: 600; background-color: #aa8dd8; color: #1d1131; border-radius: 5px; padding: 0px 5px 1px 5px; font-size: 0.9em;", "")
-	string += `%c${message}`
-    style.push("@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@700&display=swap'); font-family: 'IBM Plex Mono', monospace; font-weight: 500; font-size: 0.9em; color: #E2EECE;")
-	console[type](string, ...style)
+function getLogger(type: LogFuncs, noDemoncord = false): LoggerFunction {
+    return function (message, locs) {
+        let rawParts = ["Demoncord", ...locs, message];
+        let styleParts = [];
+        let content = "";
+
+        if (noDemoncord) rawParts.splice(0, 1);
+
+        for (let i = 0; i < rawParts.length; i++) {
+            if (i === rawParts.length - 1) {
+                // last item
+                content += "%c" + rawParts[i];
+                styleParts.push(styleTxt);
+            } else {
+                content += "%c" + rawParts[i] + "%c ";
+                styleParts.push(styleBg, "");
+            }
+        }
+
+        console[type](content, ...styleParts);
+    };
 }
 
-export default log;
+const log: LoggerFunction = getLogger("log");
+const warn: LoggerFunction = getLogger("warn");
+const error: LoggerFunction = getLogger("error");
+const trace: LoggerFunction = getLogger("trace");
+
+type GroupFuncLog = [string, string[]] | [string, string[], LogFuncs];
+type GroupFunc = (msg: string, loc: string[], sublogs: GroupFuncLog[]) => void;
+
+const group: GroupFunc = (msg, loc, sublogs) => {
+    // start group
+    getLogger("group")(msg, loc);
+
+    for (const sublog of sublogs) {
+        const logFunc = getLogger(
+            sublog.length === 3 ? sublog[2] : "log",
+            true
+        );
+
+        logFunc(sublog[0], sublog[1]);
+    }
+
+    console.groupEnd();
+};
+
+export default {
+    log,
+    warn,
+    error,
+    trace,
+    group,
+};