frontend: rework logging system

frontend/src/auth.js

@@ -2,7 +2,7 @@ import gateway, { GatewayEventType } from "./gateway";
 import { removeItem, setItem } from "./storage";
 import { overlayStore } from "./stores";
 
-function useAuthHandlers() {
+export function useAuthHandlers() {
     gateway.subscribe(GatewayEventType.Ready, () => {
         overlayStore.close("login");
         overlayStore.close("createAccount");
@@ -24,5 +24,3 @@ export function logOut() {
     gateway.close();
     gateway.dispatch(GatewayEventType.BadAuth, -1);
 }
-
-useAuthHandlers();

frontend/src/components/Sidebar.svelte

@@ -1,8 +1,7 @@
 <script>
     import { HashIcon, PlusIcon, MoreVerticalIcon, SettingsIcon } from "svelte-feather-icons";
     import { quadInOut } from "svelte/easing";
-    import { fly } from "svelte/transition";
-import { maybeFade } from "../animations";
+    import { maybeFly } from "../animations";
     import { channels, overlayStore, selectedChannel, showChannelView, showSidebar, smallViewport, userInfoStore } from "../stores";
     import UserTopBar from "./UserTopBar.svelte";
 
@@ -31,7 +30,7 @@ import { maybeFade } from "../animations";
     };
 </script>
 
-<div class="sidebar-container" transition:maybeFade="{{ duration: 200, easing: quadInOut, x: -10 }}" on:outroend="{ outroEnd }">
+<div class="sidebar-container" transition:maybeFly="{{ duration: 200, easing: quadInOut, x: -10 }}" on:outroend="{ outroEnd }">
     <UserTopBar />
     <div class="sidebar">
         {#each $channels as channel (channel.id)}

frontend/src/gateway.js

@@ -1,4 +1,4 @@
-import logging from "./logging";
+import logger from "./logging";
 import { getItem } from "./storage";
 
 export const GatewayErrors = {
@@ -35,7 +35,7 @@ export const GatewayEventType = {
     BadAuth: -3,
 }
 
-const log = logging.logger("Gateway", true);
+const log = logger("Gateway");
 
 export default {
     ws: null,

frontend/src/logging.js

@@ -1,9 +1,8 @@
-export default {
-    sinks: new Map(),
-    logger(sink, enabled=false) {
-        this.sinks.set(sink, enabled);
+import { getItem } from "./storage";
+
+export default function logger(sink) {
     return (...args) => {
-            if (this.sinks.get(sink)) {
+        if (getItem(`loggingSink:${sink}`)) {
             console.log(
                 `%c[${sink}]`,
                 "color: #8f3f71; font-weight: bold;",
@@ -11,11 +10,4 @@ export default {
             );
         }
     };
-    },
-    enableSink(sink) {
-        this.sinks.set(sink, true);
-    },
-    disableSink(sink) {
-        this.sinks.set(sink, false);
 }
-};

frontend/src/main.js

@@ -1,17 +1,16 @@
 import Main from './components/Main.svelte';
 import gateway from './gateway';
 import { getItem, init } from './storage';
-import logging from "./logging";
-import { authWithToken } from './auth';
+import { authWithToken, useAuthHandlers } from './auth';
 import { initResponsiveHandlers } from './responsive';
 
 window.__waffle = {
-	logging,
 	gateway
 };
 
 init();
 initResponsiveHandlers();
+useAuthHandlers();
 authWithToken(getItem("token"));
 
 // Remove loading screen

frontend/src/storage.js

@@ -2,7 +2,9 @@ const defaults = {
     apiBase: `${window.location.origin}/api/v1`,
     gatewayBase: `${location.protocol === "https:" ? "wss" : "ws"}://${location.host}/gateway`,
     doAnimations: true,
-    token: ""
+    token: "",
+    "loggingSink:Gateway": false,
+    "loggingSink:Store": false
 };
 const store = new Map(Object.entries(defaults));
 const persistentProvider = localStorage;

frontend/src/stores.js

@@ -1,9 +1,9 @@
 import gateway, { GatewayEventType } from "./gateway";
-import logging from "./logging";
+import logger from "./logging";
 import request from "./request";
 import { apiRoute } from "./storage";
 
-const storeLog = logging.logger("Store", true);
+const storeLog = logger("Store");
 
 class Store {
     constructor(value=null, name="[unnamed]") {