feat(trace): added debug option for logging results

andrewcourtice · Sep 8, 2021 · d241bea · d241bea
1 parent 6ff7abd
commit d241bea
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 0 deletions.
diff --git a/extensions/trace/src/constants.ts b/extensions/trace/src/constants.ts
@@ -0,0 +1,25 @@
+import type {
+    TraceGate,
+} from './types';
+
+export const GATE_COLOUR = {
+    default: {
+        foreground: '#FFFFFF',
+        background: '#6B7280',
+    },
+    get: {
+        foreground: '#FFFFFF',
+        background: '#10B981',
+    },
+    set: {
+        foreground: '#FFFFFF',
+        background: '#3B82F6',
+    },
+    deleteProperty: {
+        foreground: '#FFFFFF',
+        background: '#EF4444',
+    },
+} as Record<TraceGate<any> | 'default', {
+    foreground: string;
+    background: string;
+}>;
diff --git a/extensions/trace/src/index.ts b/extensions/trace/src/index.ts
@@ -1,3 +1,7 @@
+import {
+    GATE_COLOUR,
+} from './constants';
+
 import {
     EVENTS,
     BaseState,
@@ -18,6 +22,7 @@ import type {
     TraceGate,
     TraceListener,
     TraceOptions,
+    TraceResult,
 } from './types';
 
 export * from './types';
@@ -107,11 +112,30 @@ function trace<TValue extends object>(value: TValue, gates: TraceGate<TValue> |
     });
 }
 
+function logResult<TValue extends object>({ gate, path }: TraceResult<TValue>) {
+    const {
+        foreground,
+        background,
+    } = (GATE_COLOUR[gate] || GATE_COLOUR.default);
+
+    const style = [
+        'padding: 3px',
+        'font-weight: bold',
+        'border-radius: 3px',
+        `color: ${foreground}`,
+        `background-color: ${background}`,
+    ].join(';');
+
+    console.log(`%c${gate}%c ${path}`, style, '');
+}
+
 export default function traceExtension<TState extends BaseState>(options?: Partial<Options>) {
     const {
         autoStart,
+        debug,
     } = {
         autoStart: false,
+        debug: false,
         ...options,
     } as Options;
 
@@ -120,6 +144,10 @@ export default function traceExtension<TState extends BaseState>(options?: Parti
 
         function startTrace(gates: TraceGate<TState> | TraceGate<TState>[] = 'set') {
             store.provider('write', state => trace(state, gates, result => {
+                if (debug) {
+                    logResult(result);
+                }
+
                 traceCallbacks.forEach(callback => callback(result));
             }));
         }

diff --git a/extensions/trace/src/types.ts b/extensions/trace/src/types.ts
@@ -26,4 +26,5 @@ export interface TraceListener {
 
 export interface Options {
     autoStart: boolean;
+    debug: boolean;
 }