@holz/console-backend 0.1.0 → 0.3.0

package/dist/holz-console-backend.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=1e3,r=60*c,i=60*r,u=24*i,f=(a,t=a)=>{const e=a.getTime()-t.getTime(),o=Math.abs(e),s=e<0?"":"+";return o>=u?`${s}${Math.round(e/u)}d`:o>=i?`${s}${Math.round(e/i)}h`:o>=r?`${s}${Math.round(e/r)}m`:o>=c?`${s}${Math.round(e/c)}s`:`${s}${e}ms`};class l{constructor(t={}){this.console=t.console??console}processLog(t){const e=this.stamp,o=new Date;this.stamp=o;const s=[{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(o,e)]},{include:t.origin.length>0,format:"%c%s",values:["color: rgba(128, 128, 128, 0.6); font-style: italic",t.origin.join(":")]}].filter(n=>n.include),m=s.map(n=>n.format).join(" "),d=s.flatMap(n=>n.values);this.console[t.level](m,...d)}}exports.ConsoleBackend=l;exports.default=l;

package/dist/holz-console-backend.js

@@ -1,43 +1,44 @@
-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;
+const i = (c, t = c) => {
+  const e = c.getTime() - t.getTime(), n = Math.abs(e), s = e < 0 ? "" : "+";
+  return n >= 864e5 ? `${s}${Math.round(e / 864e5)}d` : n >= 36e5 ? `${s}${Math.round(e / 36e5)}h` : n >= 6e4 ? `${s}${Math.round(e / 6e4)}m` : n >= 1e3 ? `${s}${Math.round(e / 1e3)}s` : `${s}${e}ms`;
+};
+class u {
+  constructor(t = {}) {
+    this.console = t.console ?? console;
   }
-  processLog(n) {
-    const t = [
+  processLog(t) {
+    const e = this.stamp, n = new Date();
+    this.stamp = n;
+    const s = [
       {
         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 = s.map((o) => o.format).join(" "), r = s.flatMap((o) => o.values);
+    this.console[t.level](a, ...r);
   }
 }
-const l = {
-  [c.Debug]: "debug",
-  [c.Info]: "info",
-  [c.Warn]: "warn",
-  [c.Error]: "error"
-};
 export {
-  i as ConsoleBackend,
-  i as default
+  u as ConsoleBackend,
+  u as default
 };

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@holz/console-backend",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "description": "A console backend for Holz",
   "type": "module",
-  "main": "./dist/holz-console-backend.umd.cjs",
+  "main": "./dist/holz-console-backend.cjs",
   "module": "./dist/holz-console-backend.js",
   "types": "./src/index.ts",
   "repository": {
@@ -13,7 +13,7 @@
   },
   "exports": {
     ".": {
-      "require": "./dist/holz-console-backend.umd.cjs",
+      "require": "./dist/holz-console-backend.cjs",
       "import": "./dist/holz-console-backend.js"
     }
   },
@@ -34,12 +34,12 @@
     "debugger"
   ],
   "scripts": {
-    "prepare": "vite build",
+    "prepack": "vite build",
     "test:unit": "vitest --color --passWithNoTests",
     "test:types": "tsc"
   },
   "devDependencies": {
-    "@holz/core": "0.1.0",
+    "@holz/core": "0.2.0",
     "@types/node": "^18.14.0",
     "@vitest/coverage-c8": "0.28.5",
     "typescript": "4.9.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

@@ -18,6 +18,16 @@ 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 });
@@ -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 = new ConsoleBackend({ 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([

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,5 +1,5 @@
 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
@@ -7,54 +7,53 @@ import { LogLevel } from '@holz/core';
  */
 export default class ConsoleBackend implements LogProcessor {
   private console: MinimalConsole;
+  private stamp?: Date;
 
   constructor(options: Options = {}) {
     this.console = options.console ?? console;
   }
 
   processLog(log: Log) {
+    const lastTimestamp = this.stamp;
+    const now = new Date();
+
+    // Track the time spent between logs.
+    this.stamp = now;
+
     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,
-    ]);
-
-    // Errors should always use stderr.
-    const channel = LOG_METHOD[log.level];
+    const format = segments.map((segment) => segment.format).join(' ');
+    const values = segments.flatMap<unknown>((segment) => segment.values);
 
-    this.console[channel](command, ...values);
+    // Browsers have UIs for filtering by log level. Leverage that.
+    this.console[log.level](format, ...values);
   }
 }
 
-// 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/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`;
+};

package/dist/holz-console-backend.umd.cjs

@@ -1 +0,0 @@
-(function(o,e){typeof exports=="object"&&typeof module<"u"?e(exports):typeof define=="function"&&define.amd?define(["exports"],e):(o=typeof globalThis<"u"?globalThis:o||self,e(o["holz-console-backend"]={}))})(this,function(o){"use strict";var e=(t=>(t.Error="error",t.Warn="warn",t.Info="info",t.Debug="debug",t))(e||{});class s{constructor(n={}){this.console=n.console??console}processLog(n){const l=[{include:!0,command:"%c%s",content:n.message,style:`color: ${n.level===e.Debug?"gray":"unset"}`},{include:Object.keys(n.context).length>0,command:"%c%o",content:n.context,style:""},{include:n.origin.length>0,command:"%c%s",content:n.origin.join(":"),style:"color: rgba(128, 128, 128, 0.6); font-style: italic"}].filter(c=>c.include),r=l.map(c=>c.command).join(" "),d=l.flatMap(c=>[c.style,c.content]),a=i[n.level];this.console[a](r,...d)}}const i={[e.Debug]:"debug",[e.Info]:"info",[e.Warn]:"warn",[e.Error]:"error"};o.ConsoleBackend=s,o.default=s,Object.defineProperties(o,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});