@holz/console-backend 0.2.0 → 0.5.0

package/dist/holz-console-backend.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});var t=(n=>(n.Error="error",n.Warn="warn",n.Info="info",n.Debug="debug",n))(t||{});class r{constructor(e={}){this.console=e.console??console}processLog(e){const c=[{include:!0,command:"%c%s",content:e.message,style:`color: ${e.level===t.Debug?"gray":"unset"}`},{include:Object.keys(e.context).length>0,command:"%c%o",content:e.context,style:""},{include:e.origin.length>0,command:"%c%s",content:e.origin.join(":"),style:"color: rgba(128, 128, 128, 0.6); font-style: italic"}].filter(o=>o.include),s=c.map(o=>o.command).join(" "),l=c.flatMap(o=>[o.style,o.content]),a=i[e.level];this.console[a](s,...l)}}const i={[t.Debug]:"debug",[t.Info]:"info",[t.Warn]:"warn",[t.Error]:"error"};exports.ConsoleBackend=r;exports.default=r;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=1e3,c=60*a,u=60*c,l=24*u,f=(s,r=s)=>{const e=s.getTime()-r.getTime(),t=Math.abs(e),n=e<0?"":"+";return t>=l?`${n}${Math.round(e/l)}d`:t>=u?`${n}${Math.round(e/u)}h`:t>=c?`${n}${Math.round(e/c)}m`:t>=a?`${n}${Math.round(e/a)}s`:`${n}${e}ms`};function $(s={}){const r=s.console??console;let e;return t=>{const n=new Date,i=[{include:!0,format:"%s",values:[t.message]},{include:Object.keys(t.context).length>0,format:"%o",values:[t.context]},{include:!0,format:"%c%s",values:["color: gray",f(n,e)]},{include:t.origin.length>0,format:"%c%s",values:["color: rgba(128, 128, 128, 0.6); font-style: italic",t.origin.join(":")]}].filter(o=>o.include),m=i.map(o=>o.format).join(" "),d=i.flatMap(o=>o.values);r[t.level](m,...d),e=n}}exports.createConsoleBackend=$;

package/dist/holz-console-backend.js

@@ -1,43 +1,40 @@
-var c = /* @__PURE__ */ ((e) => (e.Error = "error", e.Warn = "warn", e.Info = "info", e.Debug = "debug", e))(c || {});
-class i {
-  constructor(n = {}) {
-    this.console = n.console ?? console;
-  }
-  processLog(n) {
-    const t = [
+const i = (s, r = s) => {
+  const e = s.getTime() - r.getTime(), t = Math.abs(e), n = e < 0 ? "" : "+";
+  return t >= 864e5 ? `${n}${Math.round(e / 864e5)}d` : t >= 36e5 ? `${n}${Math.round(e / 36e5)}h` : t >= 6e4 ? `${n}${Math.round(e / 6e4)}m` : t >= 1e3 ? `${n}${Math.round(e / 1e3)}s` : `${n}${e}ms`;
+};
+function l(s = {}) {
+  const r = s.console ?? console;
+  let e;
+  return (t) => {
+    const n = new Date(), c = [
       {
         include: !0,
-        command: "%c%s",
-        content: n.message,
-        style: `color: ${n.level === c.Debug ? "gray" : "unset"}`
+        format: "%s",
+        values: [t.message]
       },
       {
-        include: Object.keys(n.context).length > 0,
-        command: "%c%o",
+        include: Object.keys(t.context).length > 0,
+        format: "%o",
         // Chrome hides object content with `%O`.
-        content: n.context,
-        style: ""
+        values: [t.context]
       },
       {
-        include: n.origin.length > 0,
-        command: "%c%s",
-        content: n.origin.join(":"),
-        style: "color: rgba(128, 128, 128, 0.6); font-style: italic"
+        include: !0,
+        format: "%c%s",
+        values: ["color: gray", i(n, e)]
+      },
+      {
+        include: t.origin.length > 0,
+        format: "%c%s",
+        values: [
+          "color: rgba(128, 128, 128, 0.6); font-style: italic",
+          t.origin.join(":")
+        ]
       }
-    ].filter((o) => o.include), r = t.map((o) => o.command).join(" "), s = t.flatMap((o) => [
-      o.style,
-      o.content
-    ]), a = l[n.level];
-    this.console[a](r, ...s);
-  }
+    ].filter((o) => o.include), a = c.map((o) => o.format).join(" "), u = c.flatMap((o) => o.values);
+    r[t.level](a, ...u), e = n;
+  };
 }
-const l = {
-  [c.Debug]: "debug",
-  [c.Info]: "info",
-  [c.Warn]: "warn",
-  [c.Error]: "error"
-};
 export {
-  i as ConsoleBackend,
-  i as default
+  l as createConsoleBackend
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@holz/console-backend",
-  "version": "0.2.0",
+  "version": "0.5.0",
   "description": "A console backend for Holz",
   "type": "module",
   "main": "./dist/holz-console-backend.cjs",
@@ -39,10 +39,10 @@
     "test:types": "tsc"
   },
   "devDependencies": {
-    "@holz/core": "0.2.0",
+    "@holz/core": "^0.5.0",
     "@types/node": "^18.14.0",
-    "@vitest/coverage-c8": "0.28.5",
-    "typescript": "4.9.5",
+    "@vitest/coverage-c8": "^0.28.5",
+    "typescript": "^4.9.5",
     "vite": "^4.0.0",
     "vitest": "^0.28.5"
   }

package/src/__tests__/__snapshots__/console-backend.test.ts.snap

@@ -2,13 +2,13 @@
 
 exports[`Console backend > avoids changing debug messages 1`] = `
 [
-  "%c%s %c%o %c%s",
-  "color: gray",
+  "%s %o %c%s %c%s",
   "just spam",
-  "",
   {
     "id": 1234,
   },
+  "color: gray",
+  "+0ms",
   "color: rgba(128, 128, 128, 0.6); font-style: italic",
   "ns-1:ns-2",
 ]
@@ -16,13 +16,13 @@ exports[`Console backend > avoids changing debug messages 1`] = `
 
 exports[`Console backend > avoids changing error messages 1`] = `
 [
-  "%c%s %c%o %c%s",
-  "color: unset",
+  "%s %o %c%s %c%s",
   "some error message",
-  "",
   {
     "id": 1234,
   },
+  "color: gray",
+  "+0ms",
   "color: rgba(128, 128, 128, 0.6); font-style: italic",
   "ns-1:ns-2",
 ]
@@ -30,13 +30,13 @@ exports[`Console backend > avoids changing error messages 1`] = `
 
 exports[`Console backend > avoids changing info messages 1`] = `
 [
-  "%c%s %c%o %c%s",
-  "color: unset",
+  "%s %o %c%s %c%s",
   "a little info",
-  "",
   {
     "id": 1234,
   },
+  "color: gray",
+  "+0ms",
   "color: rgba(128, 128, 128, 0.6); font-style: italic",
   "ns-1:ns-2",
 ]
@@ -44,13 +44,13 @@ exports[`Console backend > avoids changing info messages 1`] = `
 
 exports[`Console backend > avoids changing warn messages 1`] = `
 [
-  "%c%s %c%o %c%s",
-  "color: unset",
+  "%s %o %c%s %c%s",
   "a warning",
-  "",
   {
     "id": 1234,
   },
+  "color: gray",
+  "+0ms",
   "color: rgba(128, 128, 128, 0.6); font-style: italic",
   "ns-1:ns-2",
 ]

package/src/__tests__/console-backend.test.ts

@@ -1,7 +1,7 @@
 import { format } from 'util';
 import { createLogger } from '@holz/core';
 import type { MinimalConsole } from '../console-backend';
-import ConsoleBackend from '../console-backend';
+import { createConsoleBackend } from '../console-backend';
 
 class MockConsole implements MinimalConsole {
   private fmt = (level: string, ...strings: Array<unknown>) => {
@@ -18,9 +18,19 @@ class MockConsole implements MinimalConsole {
 }
 
 describe('Console backend', () => {
+  beforeEach(() => {
+    vi.useFakeTimers({
+      now: new Date('2020-01-01T00:00:00.000Z'),
+    });
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
   it('prints messages to the console', () => {
     const output = new MockConsole();
-    const backend = new ConsoleBackend({ console: output });
+    const backend = createConsoleBackend({ console: output });
 
     const logger = createLogger(backend);
     logger.info('hello world');
@@ -32,7 +42,7 @@ describe('Console backend', () => {
 
   it('includes the log namespace', () => {
     const output = new MockConsole();
-    const backend = new ConsoleBackend({ console: output });
+    const backend = createConsoleBackend({ console: output });
     const logger = createLogger(backend)
       .namespace('my-lib')
       .namespace('MyClass');
@@ -46,7 +56,7 @@ describe('Console backend', () => {
 
   it('includes the log context', () => {
     const output = new MockConsole();
-    const backend = new ConsoleBackend({ console: output });
+    const backend = createConsoleBackend({ console: output });
     const logger = createLogger(backend);
 
     logger.info('creating session', { sessionId: 3109 });
@@ -61,7 +71,7 @@ describe('Console backend', () => {
 
   it('does not include the log context if it is empty', () => {
     const output = new MockConsole();
-    const backend = new ConsoleBackend({ console: output });
+    const backend = createConsoleBackend({ console: output });
     const logger = createLogger(backend);
 
     logger.warn('activating death ray', {});
@@ -72,6 +82,18 @@ describe('Console backend', () => {
     expect(output.print).not.toHaveBeenCalledWith(expect.stringContaining('}'));
   });
 
+  it('prints the time since the last log', () => {
+    const output = new MockConsole();
+    const backend = createConsoleBackend({ console: output });
+    const logger = createLogger(backend);
+
+    logger.info('first message');
+    vi.advanceTimersByTime(1000);
+    logger.info('second message');
+
+    expect(output.print).toHaveBeenCalledWith(expect.stringContaining('+1s'));
+  });
+
   // Snapshot the exact output of each log level. This mostly prevents
   // regressions while doing innocent refactors.
   it.each([
@@ -86,7 +108,7 @@ describe('Console backend', () => {
     ],
   ])('avoids changing %s messages', (method, message, namespace, pipe) => {
     const output = new MockConsole();
-    const backend = new ConsoleBackend({ console: output });
+    const backend = createConsoleBackend({ console: output });
     const logger = namespace.reduce(
       (logger, ns) => logger.namespace(ns),
       createLogger(backend)

package/src/__tests__/time-delta.test.ts

@@ -0,0 +1,29 @@
+import { timeDelta } from '../time-delta';
+
+describe('timeDelta', () => {
+  it('formats the difference in human-readable time', () => {
+    expect(timeDelta(new Date(0), new Date(0))).toBe('+0ms');
+    expect(timeDelta(new Date(1), new Date(0))).toBe('+1ms');
+    expect(timeDelta(new Date(999), new Date(0))).toBe('+999ms');
+    expect(timeDelta(new Date(1_000), new Date(0))).toBe('+1s');
+
+    expect(timeDelta(new Date(1_499), new Date(0))).toBe('+1s');
+    expect(timeDelta(new Date(1_500), new Date(0))).toBe('+2s');
+
+    // Not quite a full minute. Kinda weird, but only if you think about it.
+    expect(timeDelta(new Date(59_999), new Date(0))).toBe('+60s');
+
+    expect(timeDelta(new Date(60_000), new Date(0))).toBe('+1m');
+    expect(timeDelta(new Date(3_600_000), new Date(0))).toBe('+1h');
+    expect(timeDelta(new Date(86_400_000), new Date(0))).toBe('+1d');
+  });
+
+  it('uses the current time if the last point is unknown', () => {
+    expect(timeDelta(new Date(0))).toBe('+0ms');
+  });
+
+  it('handles negative time differences', () => {
+    expect(timeDelta(new Date(0), new Date(1))).toBe('-1ms');
+    expect(timeDelta(new Date(0), new Date(60_000))).toBe('-1m');
+  });
+});

package/src/console-backend.ts

@@ -1,60 +1,54 @@
 import type { Log, LogProcessor } from '@holz/core';
-import { LogLevel } from '@holz/core';
+import { timeDelta } from './time-delta';
 
 /**
  * A backend that pretty-prints logs to a browser console, or any
  * remote-attached console.
  */
-export default class ConsoleBackend implements LogProcessor {
-  private console: MinimalConsole;
+export function createConsoleBackend(options: Options = {}): LogProcessor {
+  const output = options.console ?? console;
+  let lastTimestamp: Date;
 
-  constructor(options: Options = {}) {
-    this.console = options.console ?? console;
-  }
+  return (log: Log) => {
+    const now = new Date();
 
-  processLog(log: Log) {
     const segments = [
       {
         include: true,
-        command: '%c%s',
-        content: log.message,
-        style: `color: ${log.level === LogLevel.Debug ? 'gray' : 'unset'}`,
+        format: '%s',
+        values: [log.message],
       },
       {
         include: Object.keys(log.context).length > 0,
-        command: '%c%o', // Chrome hides object content with `%O`.
-        content: log.context,
-        style: '',
+        format: '%o', // Chrome hides object content with `%O`.
+        values: [log.context],
+      },
+      {
+        include: true,
+        format: '%c%s',
+        values: ['color: gray', timeDelta(now, lastTimestamp)],
       },
       {
         include: log.origin.length > 0,
-        command: '%c%s',
-        content: log.origin.join(':'),
-        style: 'color: rgba(128, 128, 128, 0.6); font-style: italic',
+        format: '%c%s',
+        values: [
+          'color: rgba(128, 128, 128, 0.6); font-style: italic',
+          log.origin.join(':'),
+        ],
       },
     ].filter((segment) => segment.include);
 
-    const command = segments.map((segment) => segment.command).join(' ');
-    const values = segments.flatMap((segment) => [
-      segment.style,
-      segment.content,
-    ]);
+    const format = segments.map((segment) => segment.format).join(' ');
+    const values = segments.flatMap<unknown>((segment) => segment.values);
 
-    // Errors should always use stderr.
-    const channel = LOG_METHOD[log.level];
+    // Browsers have UIs for filtering by log level. Leverage that.
+    output[log.level](format, ...values);
 
-    this.console[channel](command, ...values);
-  }
+    // Track the time spent between logs.
+    lastTimestamp = now;
+  };
 }
 
-// Browsers have UIs for filtering by log level. Leverage that.
-const LOG_METHOD: Record<LogLevel, keyof MinimalConsole> = {
-  [LogLevel.Debug]: 'debug',
-  [LogLevel.Info]: 'info',
-  [LogLevel.Warn]: 'warn',
-  [LogLevel.Error]: 'error',
-};
-
 interface Options {
   console?: MinimalConsole;
 }

package/src/index.ts

@@ -1 +1 @@
-export { default, default as ConsoleBackend } from './console-backend';
+export { createConsoleBackend } from './console-backend';

package/src/time-delta.ts

@@ -0,0 +1,33 @@
+const second = 1_000;
+const minute = 60 * second;
+const hour = 60 * minute;
+const day = 24 * hour;
+
+/**
+ * Formats the difference between two dates in human-readable time.
+ *
+ * Inspired by the `ms` package. Thanks TJ.
+ */
+export const timeDelta = (now: Date, then: Date = now) => {
+  const offset = now.getTime() - then.getTime();
+  const distance = Math.abs(offset);
+  const sign = offset < 0 ? '' : '+';
+
+  if (distance >= day) {
+    return `${sign}${Math.round(offset / day)}d`;
+  }
+
+  if (distance >= hour) {
+    return `${sign}${Math.round(offset / hour)}h`;
+  }
+
+  if (distance >= minute) {
+    return `${sign}${Math.round(offset / minute)}m`;
+  }
+
+  if (distance >= second) {
+    return `${sign}${Math.round(offset / second)}s`;
+  }
+
+  return `${sign}${offset}ms`;
+};