frontend: improve logging

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;

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);
+    }
+};

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();

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);
         });