@holz/console-backend 0.0.0

package/CHANGELOG.md

@@ -0,0 +1,7 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## Unreleased

package/dist/holz-console-backend.js

@@ -0,0 +1,60 @@
+var n = /* @__PURE__ */ ((o) => (o.Error = "error", o.Warn = "warn", o.Info = "info", o.Debug = "debug", o))(n || {});
+class i {
+  constructor(e = {}) {
+    this.console = e.console ?? console;
+  }
+  processLog(e) {
+    const r = [
+      {
+        include: !0,
+        command: "%c%s",
+        content: u[e.level],
+        style: `font-weight: bold; color: ${l[e.level]}`
+      },
+      {
+        include: !0,
+        command: "%c%s",
+        content: e.message,
+        style: `font-weight: normal; color: ${e.level === n.Debug ? "darkgray" : "unset"}`
+      },
+      {
+        include: Object.keys(e.context).length > 0,
+        command: "%c%o",
+        // Chrome hides object content with `%O`.
+        content: e.context,
+        style: ""
+      },
+      {
+        include: e.origin.length > 0,
+        command: "%c%s",
+        content: e.origin.join(":"),
+        style: "color: gray"
+      }
+    ].filter((t) => t.include), c = r.map((t) => t.command).join(" "), s = r.flatMap((t) => [
+      t.style,
+      t.content
+    ]), a = d[e.level];
+    this.console[a](c, ...s);
+  }
+}
+const l = {
+  [n.Debug]: "darkgray",
+  [n.Info]: "darkturquoise",
+  [n.Warn]: "unset",
+  [n.Error]: "unset"
+}, u = {
+  [n.Debug]: "DEBUG",
+  [n.Info]: "INFO ",
+  [n.Warn]: "WARN ",
+  [n.Error]: "ERROR"
+}, d = {
+  [n.Debug]: "log",
+  [n.Info]: "log",
+  [n.Warn]: "warn",
+  [n.Error]: "error"
+};
+export {
+  i as ConsoleBackend,
+  i as default
+};
+//# sourceMappingURL=holz-console-backend.js.map

package/dist/holz-console-backend.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"holz-console-backend.js","sources":["../../holz-core/dist/holz-core.js","../src/console-backend.ts"],"sourcesContent":["var t = /* @__PURE__ */ ((s) => (s.Error = \"error\", s.Warn = \"warn\", s.Info = \"info\", s.Debug = \"debug\", s))(t || {});\nclass e {\n  constructor(r, o) {\n    this.processor = r, this.origin = o;\n  }\n  static create(r) {\n    return new e(r, []);\n  }\n  /** Extend the logger to attach a class or module name to logs. */\n  namespace(r) {\n    return new e(this.processor, this.origin.concat(r));\n  }\n  /** Log a frequent and verbose progress update. */\n  debug(r, o) {\n    this.forwardLog(t.Debug, r, o);\n  }\n  /** Log a high-level progress update. */\n  info(r, o) {\n    this.forwardLog(t.Info, r, o);\n  }\n  /** Log something concerning. */\n  warn(r, o) {\n    this.forwardLog(t.Warn, r, o);\n  }\n  /** Log a critical failure. */\n  error(r, o) {\n    this.forwardLog(t.Error, r, o);\n  }\n  forwardLog(r, o, c = {}) {\n    this.processor.processLog({\n      message: o,\n      level: r,\n      origin: this.origin,\n      context: c\n    });\n  }\n}\nconst a = e.create;\nclass i {\n  constructor(r) {\n    this.processors = r;\n  }\n  processLog(r) {\n    this.processors.forEach((o) => {\n      o.processLog(r);\n    });\n  }\n}\nfunction h(s) {\n  return new i(s);\n}\nclass n {\n  constructor(r, o) {\n    this.predicate = r, this.processor = o;\n  }\n  processLog(r) {\n    this.predicate(r) && this.processor.processLog(r);\n  }\n}\nfunction g(s, r) {\n  return new n(s, r);\n}\nexport {\n  t as LogLevel,\n  h as combine,\n  a as createLogger,\n  g as filter\n};\n//# sourceMappingURL=holz-core.js.map\n","import type { Log, LogProcessor } from '@holz/core';\nimport { LogLevel } from '@holz/core';\n\n/**\n * A backend that pretty-prints logs to a browser console, or any\n * remote-attached console.\n */\nexport default class ConsoleBackend implements LogProcessor {\n  private console: MinimalConsole;\n\n  constructor(options: Options = {}) {\n    this.console = options.console ?? console;\n  }\n\n  processLog(log: Log) {\n    const segments = [\n      {\n        include: true,\n        command: '%c%s',\n        content: LOG_LEVEL_TITLE[log.level],\n        style: `font-weight: bold; color: ${LOG_LEVEL_STYLE[log.level]}`,\n      },\n      {\n        include: true,\n        command: '%c%s',\n        content: log.message,\n        style: `font-weight: normal; color: ${\n          log.level === LogLevel.Debug ? 'darkgray' : 'unset'\n        }`,\n      },\n      {\n        include: Object.keys(log.context).length > 0,\n        command: '%c%o', // Chrome hides object content with `%O`.\n        content: log.context,\n        style: '',\n      },\n      {\n        include: log.origin.length > 0,\n        command: '%c%s',\n        content: log.origin.join(':'),\n        style: 'color: gray',\n      },\n    ].filter((segment) => segment.include);\n\n    const command = segments.map((segment) => segment.command).join(' ');\n    const values = segments.flatMap((segment) => [\n      segment.style,\n      segment.content,\n    ]);\n\n    // Errors should always use stderr.\n    const channel = LOG_METHOD[log.level];\n\n    this.console[channel](command, ...values);\n  }\n}\n\n// Before changing these, verify contrast on dark/light themes.\nconst LOG_LEVEL_STYLE: Record<LogLevel, string> = {\n  [LogLevel.Debug]: 'darkgray',\n  [LogLevel.Info]: 'darkturquoise',\n  [LogLevel.Warn]: 'unset',\n  [LogLevel.Error]: 'unset',\n};\n\nconst LOG_LEVEL_TITLE: Record<LogLevel, string> = {\n  [LogLevel.Debug]: 'DEBUG',\n  [LogLevel.Info]: 'INFO ',\n  [LogLevel.Warn]: 'WARN ',\n  [LogLevel.Error]: 'ERROR',\n};\n\nconst LOG_METHOD: Record<LogLevel, keyof MinimalConsole> = {\n  [LogLevel.Debug]: 'log',\n  [LogLevel.Info]: 'log',\n  [LogLevel.Warn]: 'warn',\n  [LogLevel.Error]: 'error',\n};\n\ninterface Options {\n  console?: MinimalConsole;\n}\n\n/**\n * A subset of the Console interface. Must support printf-style interpolation.\n * @see https://console.spec.whatwg.org/#formatting-specifiers\n */\nexport type MinimalConsole = Pick<Console, 'log' | 'warn' | 'error'>;\n"],"names":["t","s","ConsoleBackend","options","log","segments","LOG_LEVEL_TITLE","LOG_LEVEL_STYLE","LogLevel","segment","command","values","channel","LOG_METHOD"],"mappings":"AAAA,IAAIA,IAAqB,kBAACC,OAAOA,EAAE,QAAQ,SAASA,EAAE,OAAO,QAAQA,EAAE,OAAO,QAAQA,EAAE,QAAQ,SAASA,IAAID,KAAK,EAAE;ACOpH,MAAqBE,EAAuC;AAAA,EAG1D,YAAYC,IAAmB,IAAI;AAC5B,SAAA,UAAUA,EAAQ,WAAW;AAAA,EACpC;AAAA,EAEA,WAAWC,GAAU;AACnB,UAAMC,IAAW;AAAA,MACf;AAAA,QACE,SAAS;AAAA,QACT,SAAS;AAAA,QACT,SAASC,EAAgBF,EAAI,KAAK;AAAA,QAClC,OAAO,6BAA6BG,EAAgBH,EAAI,KAAK;AAAA,MAC/D;AAAA,MACA;AAAA,QACE,SAAS;AAAA,QACT,SAAS;AAAA,QACT,SAASA,EAAI;AAAA,QACb,OAAO,+BACLA,EAAI,UAAUI,EAAS,QAAQ,aAAa;AAAA,MAEhD;AAAA,MACA;AAAA,QACE,SAAS,OAAO,KAAKJ,EAAI,OAAO,EAAE,SAAS;AAAA,QAC3C,SAAS;AAAA;AAAA,QACT,SAASA,EAAI;AAAA,QACb,OAAO;AAAA,MACT;AAAA,MACA;AAAA,QACE,SAASA,EAAI,OAAO,SAAS;AAAA,QAC7B,SAAS;AAAA,QACT,SAASA,EAAI,OAAO,KAAK,GAAG;AAAA,QAC5B,OAAO;AAAA,MACT;AAAA,IACA,EAAA,OAAO,CAACK,MAAYA,EAAQ,OAAO,GAE/BC,IAAUL,EAAS,IAAI,CAACI,MAAYA,EAAQ,OAAO,EAAE,KAAK,GAAG,GAC7DE,IAASN,EAAS,QAAQ,CAACI,MAAY;AAAA,MAC3CA,EAAQ;AAAA,MACRA,EAAQ;AAAA,IAAA,CACT,GAGKG,IAAUC,EAAWT,EAAI,KAAK;AAEpC,SAAK,QAAQQ,CAAO,EAAEF,GAAS,GAAGC,CAAM;AAAA,EAC1C;AACF;AAGA,MAAMJ,IAA4C;AAAA,EAChD,CAACC,EAAS,KAAK,GAAG;AAAA,EAClB,CAACA,EAAS,IAAI,GAAG;AAAA,EACjB,CAACA,EAAS,IAAI,GAAG;AAAA,EACjB,CAACA,EAAS,KAAK,GAAG;AACpB,GAEMF,IAA4C;AAAA,EAChD,CAACE,EAAS,KAAK,GAAG;AAAA,EAClB,CAACA,EAAS,IAAI,GAAG;AAAA,EACjB,CAACA,EAAS,IAAI,GAAG;AAAA,EACjB,CAACA,EAAS,KAAK,GAAG;AACpB,GAEMK,IAAqD;AAAA,EACzD,CAACL,EAAS,KAAK,GAAG;AAAA,EAClB,CAACA,EAAS,IAAI,GAAG;AAAA,EACjB,CAACA,EAAS,IAAI,GAAG;AAAA,EACjB,CAACA,EAAS,KAAK,GAAG;AACpB;"}

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

@@ -0,0 +1,2 @@
+(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 r{constructor(n={}){this.console=n.console??console}processLog(n){const s=[{include:!0,command:"%c%s",content:a[n.level],style:`font-weight: bold; color: ${l[n.level]}`},{include:!0,command:"%c%s",content:n.message,style:`font-weight: normal; color: ${n.level===e.Debug?"darkgray":"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: gray"}].filter(c=>c.include),u=s.map(c=>c.command).join(" "),d=s.flatMap(c=>[c.style,c.content]),f=i[n.level];this.console[f](u,...d)}}const l={[e.Debug]:"darkgray",[e.Info]:"darkturquoise",[e.Warn]:"unset",[e.Error]:"unset"},a={[e.Debug]:"DEBUG",[e.Info]:"INFO ",[e.Warn]:"WARN ",[e.Error]:"ERROR"},i={[e.Debug]:"log",[e.Info]:"log",[e.Warn]:"warn",[e.Error]:"error"};o.ConsoleBackend=r,o.default=r,Object.defineProperties(o,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+//# sourceMappingURL=holz-console-backend.umd.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"holz-console-backend.umd.cjs","sources":["../../holz-core/dist/holz-core.js","../src/console-backend.ts"],"sourcesContent":["var t = /* @__PURE__ */ ((s) => (s.Error = \"error\", s.Warn = \"warn\", s.Info = \"info\", s.Debug = \"debug\", s))(t || {});\nclass e {\n  constructor(r, o) {\n    this.processor = r, this.origin = o;\n  }\n  static create(r) {\n    return new e(r, []);\n  }\n  /** Extend the logger to attach a class or module name to logs. */\n  namespace(r) {\n    return new e(this.processor, this.origin.concat(r));\n  }\n  /** Log a frequent and verbose progress update. */\n  debug(r, o) {\n    this.forwardLog(t.Debug, r, o);\n  }\n  /** Log a high-level progress update. */\n  info(r, o) {\n    this.forwardLog(t.Info, r, o);\n  }\n  /** Log something concerning. */\n  warn(r, o) {\n    this.forwardLog(t.Warn, r, o);\n  }\n  /** Log a critical failure. */\n  error(r, o) {\n    this.forwardLog(t.Error, r, o);\n  }\n  forwardLog(r, o, c = {}) {\n    this.processor.processLog({\n      message: o,\n      level: r,\n      origin: this.origin,\n      context: c\n    });\n  }\n}\nconst a = e.create;\nclass i {\n  constructor(r) {\n    this.processors = r;\n  }\n  processLog(r) {\n    this.processors.forEach((o) => {\n      o.processLog(r);\n    });\n  }\n}\nfunction h(s) {\n  return new i(s);\n}\nclass n {\n  constructor(r, o) {\n    this.predicate = r, this.processor = o;\n  }\n  processLog(r) {\n    this.predicate(r) && this.processor.processLog(r);\n  }\n}\nfunction g(s, r) {\n  return new n(s, r);\n}\nexport {\n  t as LogLevel,\n  h as combine,\n  a as createLogger,\n  g as filter\n};\n//# sourceMappingURL=holz-core.js.map\n","import type { Log, LogProcessor } from '@holz/core';\nimport { LogLevel } from '@holz/core';\n\n/**\n * A backend that pretty-prints logs to a browser console, or any\n * remote-attached console.\n */\nexport default class ConsoleBackend implements LogProcessor {\n  private console: MinimalConsole;\n\n  constructor(options: Options = {}) {\n    this.console = options.console ?? console;\n  }\n\n  processLog(log: Log) {\n    const segments = [\n      {\n        include: true,\n        command: '%c%s',\n        content: LOG_LEVEL_TITLE[log.level],\n        style: `font-weight: bold; color: ${LOG_LEVEL_STYLE[log.level]}`,\n      },\n      {\n        include: true,\n        command: '%c%s',\n        content: log.message,\n        style: `font-weight: normal; color: ${\n          log.level === LogLevel.Debug ? 'darkgray' : 'unset'\n        }`,\n      },\n      {\n        include: Object.keys(log.context).length > 0,\n        command: '%c%o', // Chrome hides object content with `%O`.\n        content: log.context,\n        style: '',\n      },\n      {\n        include: log.origin.length > 0,\n        command: '%c%s',\n        content: log.origin.join(':'),\n        style: 'color: gray',\n      },\n    ].filter((segment) => segment.include);\n\n    const command = segments.map((segment) => segment.command).join(' ');\n    const values = segments.flatMap((segment) => [\n      segment.style,\n      segment.content,\n    ]);\n\n    // Errors should always use stderr.\n    const channel = LOG_METHOD[log.level];\n\n    this.console[channel](command, ...values);\n  }\n}\n\n// Before changing these, verify contrast on dark/light themes.\nconst LOG_LEVEL_STYLE: Record<LogLevel, string> = {\n  [LogLevel.Debug]: 'darkgray',\n  [LogLevel.Info]: 'darkturquoise',\n  [LogLevel.Warn]: 'unset',\n  [LogLevel.Error]: 'unset',\n};\n\nconst LOG_LEVEL_TITLE: Record<LogLevel, string> = {\n  [LogLevel.Debug]: 'DEBUG',\n  [LogLevel.Info]: 'INFO ',\n  [LogLevel.Warn]: 'WARN ',\n  [LogLevel.Error]: 'ERROR',\n};\n\nconst LOG_METHOD: Record<LogLevel, keyof MinimalConsole> = {\n  [LogLevel.Debug]: 'log',\n  [LogLevel.Info]: 'log',\n  [LogLevel.Warn]: 'warn',\n  [LogLevel.Error]: 'error',\n};\n\ninterface Options {\n  console?: MinimalConsole;\n}\n\n/**\n * A subset of the Console interface. Must support printf-style interpolation.\n * @see https://console.spec.whatwg.org/#formatting-specifiers\n */\nexport type MinimalConsole = Pick<Console, 'log' | 'warn' | 'error'>;\n"],"names":["t","s","ConsoleBackend","options","log","segments","LOG_LEVEL_TITLE","LOG_LEVEL_STYLE","LogLevel","segment","command","values","channel","LOG_METHOD"],"mappings":"+OAAA,IAAIA,GAAsBC,IAAOA,EAAE,MAAQ,QAASA,EAAE,KAAO,OAAQA,EAAE,KAAO,OAAQA,EAAE,MAAQ,QAASA,IAAID,GAAK,EAAE,ECOpH,MAAqBE,CAAuC,CAG1D,YAAYC,EAAmB,GAAI,CAC5B,KAAA,QAAUA,EAAQ,SAAW,OACpC,CAEA,WAAWC,EAAU,CACnB,MAAMC,EAAW,CACf,CACE,QAAS,GACT,QAAS,OACT,QAASC,EAAgBF,EAAI,KAAK,EAClC,MAAO,6BAA6BG,EAAgBH,EAAI,KAAK,GAC/D,EACA,CACE,QAAS,GACT,QAAS,OACT,QAASA,EAAI,QACb,MAAO,+BACLA,EAAI,QAAUI,EAAS,MAAQ,WAAa,SAEhD,EACA,CACE,QAAS,OAAO,KAAKJ,EAAI,OAAO,EAAE,OAAS,EAC3C,QAAS,OACT,QAASA,EAAI,QACb,MAAO,EACT,EACA,CACE,QAASA,EAAI,OAAO,OAAS,EAC7B,QAAS,OACT,QAASA,EAAI,OAAO,KAAK,GAAG,EAC5B,MAAO,aACT,CACA,EAAA,OAAQK,GAAYA,EAAQ,OAAO,EAE/BC,EAAUL,EAAS,IAAKI,GAAYA,EAAQ,OAAO,EAAE,KAAK,GAAG,EAC7DE,EAASN,EAAS,QAASI,GAAY,CAC3CA,EAAQ,MACRA,EAAQ,OAAA,CACT,EAGKG,EAAUC,EAAWT,EAAI,KAAK,EAEpC,KAAK,QAAQQ,CAAO,EAAEF,EAAS,GAAGC,CAAM,CAC1C,CACF,CAGA,MAAMJ,EAA4C,CAChD,CAACC,EAAS,KAAK,EAAG,WAClB,CAACA,EAAS,IAAI,EAAG,gBACjB,CAACA,EAAS,IAAI,EAAG,QACjB,CAACA,EAAS,KAAK,EAAG,OACpB,EAEMF,EAA4C,CAChD,CAACE,EAAS,KAAK,EAAG,QAClB,CAACA,EAAS,IAAI,EAAG,QACjB,CAACA,EAAS,IAAI,EAAG,QACjB,CAACA,EAAS,KAAK,EAAG,OACpB,EAEMK,EAAqD,CACzD,CAACL,EAAS,KAAK,EAAG,MAClB,CAACA,EAAS,IAAI,EAAG,MACjB,CAACA,EAAS,IAAI,EAAG,OACjB,CAACA,EAAS,KAAK,EAAG,OACpB"}

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@holz/console-backend",
+  "version": "0.0.0",
+  "description": "A console backend for Holz",
+  "type": "module",
+  "main": "./dist/holz-console-backend.umd.cjs",
+  "module": "./dist/holz-console-backend.js",
+  "types": "./src/index.ts",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/PsychoLlama/holz",
+    "directory": "packages/holz-console-backend"
+  },
+  "exports": {
+    ".": {
+      "require": "./dist/holz-console-backend.umd.cjs",
+      "import": "./dist/holz-console-backend.js"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "author": "Jesse Gibson",
+  "license": "MIT",
+  "sideEffects": false,
+  "files": [
+    "dist",
+    "src"
+  ],
+  "keywords": [
+    "holz-backend",
+    "console",
+    "browser",
+    "debugger"
+  ],
+  "scripts": {
+    "prepare": "vite build --sourcemap",
+    "test:unit": "vitest --color --passWithNoTests",
+    "test:coverage": "run test:unit --coverage"
+  },
+  "devDependencies": {
+    "@holz/core": "0.0.0",
+    "@types/node": "^18.14.0",
+    "@vitest/coverage-c8": "0.28.5",
+    "vite": "^4.0.0",
+    "vitest": "^0.28.5"
+  }
+}

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

@@ -0,0 +1,65 @@
+// Vitest Snapshot v1
+
+exports[`Console backend > avoids changing debug messages 1`] = `
+[
+  "%c%s %c%s %c%o %c%s",
+  "font-weight: bold; color: darkgray",
+  "DEBUG",
+  "font-weight: normal; color: darkgray",
+  "just spam",
+  "",
+  {
+    "id": 1234,
+  },
+  "color: gray",
+  "ns-1:ns-2",
+]
+`;
+
+exports[`Console backend > avoids changing error messages 1`] = `
+[
+  "%c%s %c%s %c%o %c%s",
+  "font-weight: bold; color: unset",
+  "ERROR",
+  "font-weight: normal; color: unset",
+  "some error message",
+  "",
+  {
+    "id": 1234,
+  },
+  "color: gray",
+  "ns-1:ns-2",
+]
+`;
+
+exports[`Console backend > avoids changing info messages 1`] = `
+[
+  "%c%s %c%s %c%o %c%s",
+  "font-weight: bold; color: darkturquoise",
+  "INFO ",
+  "font-weight: normal; color: unset",
+  "a little info",
+  "",
+  {
+    "id": 1234,
+  },
+  "color: gray",
+  "ns-1:ns-2",
+]
+`;
+
+exports[`Console backend > avoids changing warn messages 1`] = `
+[
+  "%c%s %c%s %c%o %c%s",
+  "font-weight: bold; color: unset",
+  "WARN ",
+  "font-weight: normal; color: unset",
+  "a warning",
+  "",
+  {
+    "id": 1234,
+  },
+  "color: gray",
+  "ns-1:ns-2",
+]
+`;

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

@@ -0,0 +1,127 @@
+import { format } from 'util';
+import { createLogger } from '@holz/core';
+import type { MinimalConsole } from '../console-backend';
+import ConsoleBackend from '../console-backend';
+
+class MockConsole implements MinimalConsole {
+  log = vi.fn((...strings: Array<unknown>) => {
+    this.stdout(format(...strings));
+  });
+
+  warn = vi.fn((...strings: Array<unknown>) => {
+    this.stdout(format(...strings));
+  });
+
+  error = vi.fn((...strings: Array<unknown>) => {
+    this.stderr(format(...strings));
+  });
+
+  stdout = vi.fn();
+  stderr = vi.fn();
+}
+
+describe('Console backend', () => {
+  it('prints messages to the console', () => {
+    const output = new MockConsole();
+    const backend = new ConsoleBackend({ console: output });
+
+    const logger = createLogger(backend);
+    logger.info('hello world');
+
+    expect(output.stdout).toHaveBeenCalledWith(
+      expect.stringContaining('hello world')
+    );
+  });
+
+  it('includes the log level', () => {
+    const output = new MockConsole();
+    const backend = new ConsoleBackend({ console: output });
+
+    const logger = createLogger(backend);
+    logger.debug('shout');
+    logger.info('normal');
+    logger.warn('hmmmm');
+    logger.error('oh no');
+
+    expect(output.stdout).toHaveBeenCalledWith(
+      expect.stringContaining('DEBUG')
+    );
+
+    expect(output.stdout).toHaveBeenCalledWith(expect.stringContaining('INFO'));
+    expect(output.stdout).toHaveBeenCalledWith(expect.stringContaining('WARN'));
+    expect(output.stderr).toHaveBeenCalledWith(
+      expect.stringContaining('ERROR')
+    );
+  });
+
+  it('includes the log namespace', () => {
+    const output = new MockConsole();
+    const backend = new ConsoleBackend({ console: output });
+    const logger = createLogger(backend)
+      .namespace('my-lib')
+      .namespace('MyClass');
+
+    logger.debug('initialized');
+
+    expect(output.stdout).toHaveBeenCalledWith(
+      expect.stringContaining('my-lib:MyClass')
+    );
+  });
+
+  it('includes the log context', () => {
+    const output = new MockConsole();
+    const backend = new ConsoleBackend({ console: output });
+    const logger = createLogger(backend);
+
+    logger.info('creating session', { sessionId: 3109 });
+
+    // Hard to test without replicating the implementation.
+    expect(output.stdout).toHaveBeenCalledWith(
+      expect.stringContaining('sessionId')
+    );
+
+    expect(output.stdout).toHaveBeenCalledWith(expect.stringContaining('3109'));
+  });
+
+  it('does not include the log context if it is empty', () => {
+    const output = new MockConsole();
+    const backend = new ConsoleBackend({ console: output });
+    const logger = createLogger(backend);
+
+    logger.warn('activating death ray', {});
+
+    // Hard to test without replicating the implementation.
+    expect(output.stdout).not.toHaveBeenCalledWith(
+      expect.stringContaining('{')
+    );
+
+    expect(output.stdout).not.toHaveBeenCalledWith(
+      expect.stringContaining('}')
+    );
+  });
+
+  // Snapshot the exact output of each log level. This mostly prevents
+  // regressions while doing innocent refactors.
+  it.each([
+    ['debug' as const, 'just spam', ['ns-1', 'ns-2'], 'log' as const],
+    ['info' as const, 'a little info', ['ns-1', 'ns-2'], 'log' as const],
+    ['warn' as const, 'a warning', ['ns-1', 'ns-2'], 'warn' as const],
+    [
+      'error' as const,
+      'some error message',
+      ['ns-1', 'ns-2'],
+      'error' as const,
+    ],
+  ])('avoids changing %s messages', (method, message, namespace, pipe) => {
+    const output = new MockConsole();
+    const backend = new ConsoleBackend({ console: output });
+    const logger = namespace.reduce(
+      (logger, ns) => logger.namespace(ns),
+      createLogger(backend)
+    );
+
+    logger[method](message, { id: 1234 });
+
+    expect(output[pipe].mock.calls[0]).toMatchSnapshot();
+  });
+});

package/src/console-backend.ts

@@ -0,0 +1,88 @@
+import type { Log, LogProcessor } from '@holz/core';
+import { LogLevel } from '@holz/core';
+
+/**
+ * A backend that pretty-prints logs to a browser console, or any
+ * remote-attached console.
+ */
+export default class ConsoleBackend implements LogProcessor {
+  private console: MinimalConsole;
+
+  constructor(options: Options = {}) {
+    this.console = options.console ?? console;
+  }
+
+  processLog(log: Log) {
+    const segments = [
+      {
+        include: true,
+        command: '%c%s',
+        content: LOG_LEVEL_TITLE[log.level],
+        style: `font-weight: bold; color: ${LOG_LEVEL_STYLE[log.level]}`,
+      },
+      {
+        include: true,
+        command: '%c%s',
+        content: log.message,
+        style: `font-weight: normal; color: ${
+          log.level === LogLevel.Debug ? 'darkgray' : 'unset'
+        }`,
+      },
+      {
+        include: Object.keys(log.context).length > 0,
+        command: '%c%o', // Chrome hides object content with `%O`.
+        content: log.context,
+        style: '',
+      },
+      {
+        include: log.origin.length > 0,
+        command: '%c%s',
+        content: log.origin.join(':'),
+        style: 'color: gray',
+      },
+    ].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];
+
+    this.console[channel](command, ...values);
+  }
+}
+
+// Before changing these, verify contrast on dark/light themes.
+const LOG_LEVEL_STYLE: Record<LogLevel, string> = {
+  [LogLevel.Debug]: 'darkgray',
+  [LogLevel.Info]: 'darkturquoise',
+  [LogLevel.Warn]: 'unset',
+  [LogLevel.Error]: 'unset',
+};
+
+const LOG_LEVEL_TITLE: Record<LogLevel, string> = {
+  [LogLevel.Debug]: 'DEBUG',
+  [LogLevel.Info]: 'INFO ',
+  [LogLevel.Warn]: 'WARN ',
+  [LogLevel.Error]: 'ERROR',
+};
+
+const LOG_METHOD: Record<LogLevel, keyof MinimalConsole> = {
+  [LogLevel.Debug]: 'log',
+  [LogLevel.Info]: 'log',
+  [LogLevel.Warn]: 'warn',
+  [LogLevel.Error]: 'error',
+};
+
+interface Options {
+  console?: MinimalConsole;
+}
+
+/**
+ * A subset of the Console interface. Must support printf-style interpolation.
+ * @see https://console.spec.whatwg.org/#formatting-specifiers
+ */
+export type MinimalConsole = Pick<Console, 'log' | 'warn' | 'error'>;

package/src/index.ts

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