From 15e57c2372261aa1d15fbfbc47d186844d68b377 Mon Sep 17 00:00:00 2001
From: hippoz <10706925-hippoz@users.noreply.gitlab.com>
Date: Sat, 23 Apr 2022 23:07:46 +0300
Subject: [PATCH] frontend: improve logging

---
 frontend/src/gateway.js | 13 +++++++------
 frontend/src/logging.js | 21 +++++++++++++++++++++
 frontend/src/main.js    |  6 ++++++
 frontend/src/stores.js  |  7 +++++--
 4 files changed, 39 insertions(+), 8 deletions(-)
 create mode 100644 frontend/src/logging.js

diff --git a/frontend/src/gateway.js b/frontend/src/gateway.js
index b547174..bdeb730 100644
--- a/frontend/src/gateway.js
+++ b/frontend/src/gateway.js
@@ -1,3 +1,4 @@
+import logging from "./logging";
 import { getAuthToken, getItem } from "./storage";
 
 export const GatewayPayloadType = {
@@ -22,6 +23,8 @@ export const GatewayEventType = {
     Close: -4
 }
 
+const log = logging.logger("Gateway");
+
 export default {
     ws: null,
     authenticated: false,
@@ -33,8 +36,6 @@ export default {
     reconnectTimeout: null,
     handlers: new Map(),
     init() {
-        window.__WAFFLE_GATEWAY = this;
-
         const token = getAuthToken();
         if (!token) {
             return false;
@@ -46,7 +47,7 @@ export default {
             }
             this.open = true;
             this.dispatch(GatewayEventType.Open, null);
-            console.log("[gateway] open");
+            log("open");
         };
         this.ws.onmessage = (event) => {
             const payload = JSON.parse(event.data);
@@ -65,7 +66,7 @@ export default {
                         });
                     }, payload.d.pingInterval);
 
-                    console.log("[gateway] hello");
+                    log("hello");
                     break;
                 }
                 case GatewayPayloadType.Ready: {
@@ -74,7 +75,7 @@ export default {
 
                     this.reconnectDelay = 400;
 
-                    console.log("[gateway] ready");
+                    log("ready");
                     break;
                 }
             }
@@ -98,7 +99,7 @@ export default {
 
             this.dispatch(GatewayEventType.Close, null);
 
-            console.log("[gateway] close");
+            log("close");
         };
 
         return true;
diff --git a/frontend/src/logging.js b/frontend/src/logging.js
new file mode 100644
index 0000000..a6305f3
--- /dev/null
+++ b/frontend/src/logging.js
@@ -0,0 +1,21 @@
+export default {
+    sinks: new Map(),
+    logger(sink, enabled=false) {
+        this.sinks.set(sink, enabled);
+        return (...args) => {
+            if (this.sinks.get(sink)) {
+                console.log(
+                    `%c[${sink}]`,
+                    "color: #8f3f71; font-weight: bold;",
+                    ...args
+                );
+            }
+        };
+    },
+    enableSink(sink) {
+        this.sinks.set(sink, true);
+    },
+    disableSink(sink) {
+        this.sinks.set(sink, false);
+    }
+};
diff --git a/frontend/src/main.js b/frontend/src/main.js
index 5f0c8a7..9a46f23 100644
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -1,6 +1,12 @@
 import App from './components/App.svelte';
 import gateway from './gateway';
 import { initStorageDefaults } from './storage';
+import logging from "./logging";
+
+window.__waffle = {
+	logging,
+	gateway
+};
 
 initStorageDefaults();
 gateway.init();
diff --git a/frontend/src/stores.js b/frontend/src/stores.js
index bf17a1f..b222ba4 100644
--- a/frontend/src/stores.js
+++ b/frontend/src/stores.js
@@ -1,8 +1,11 @@
 import { writable } from "svelte/store";
 import gateway, { GatewayEventType } from "./gateway";
+import logging from "./logging";
 import request from "./request";
 import { apiRoute } from "./storage";
 
+const storeLog = logging.logger("Store");
+
 class Store {
     constructor(value=null) {
         this._handlers = [];
@@ -13,14 +16,14 @@ class Store {
         const newLength = this._handlers.push(handler);
         const handlerIndex = newLength - 1;
         handler(this.value);
-        console.log(this.value);
+        storeLog("Subscription initialized with value", this.value);
         return () => {
             this._handlers.splice(handlerIndex, 1);
         };
     }
 
     updated() {
-        console.log(this.value);
+        storeLog(`updated(): calling ${this._handlers.length} handlers - value changed`, this.value);
         this._handlers.forEach(e => {
             e(this.value);
         });