← Back to archive

Repo of the Day

poppinss/dumper

Published: Oct 16, 2024

Open repository ↗

Pretty print JavaScript data-types in the terminal and the browser

Summary

@poppinss/dumper is a TypeScript library for pretty-printing JavaScript values with finer control than Node's built-in util.inspect. It ships two ready-to-use formatters (HTML and terminal) plus a low-level parser for building custom ones.

What it is useful for

The package helps when console.log output is too plain. Use cases include rendering collapsible HTML views of complex objects for debug dashboards, generating colorized ANSI output for CLI tools, and producing structured inspection data that other code can transform.

Dumper recognizes many built-in types: Object, Array, Map, Set, Function, Date, RegExp, Buffer, Error, FormData, URL, URLSearchParams, Promise, Generator, WeakRef, Observable, Blob, BigInt, symbol, and the standard TypedArrays. Anything outside that list is converted via String(). The HTML output ships a <pre> block paired with a <script> that powers collapse/expand behavior.

A point worth flagging from the README: "Dumper is a low-level utility. You may have to write a wrapper around it for the framework of your choice." It is not a zero-config drop-in replacement for console.log.

How engineers can use it

Install with npm i @poppinss/dumper. For terminal output:

import { dump } from '@poppinss/dumper/console'
console.log(dump({ a: 0, b: 'string', c: { nested: 'object' } }))

Themes are objects that map tokens (number, boolean, string, etc.) to functions returning a styled string; the README example uses styleText from node:util. Built-in themes include themes.default, and custom themes follow the same shape.

For HTML, import from @poppinss/dumper/html. The README's full example wires createStyleSheet() and createScript() into <head> and the dump() result into <body>. For CSP-enabled apps, pass a cspNonce for the inline <script>. Pre-built themes include themes.catppuccin and themes.cssVariables, the latter designed for dark/light mode via CSS variables. Use expand: true to expand the first level, or expand: 'all' to expand recursively.

For custom needs, import Parser and call parser.flush() for a flat array of typed tokens. The README states: "The parser.flush method returns a flat array of tokens, and they must be printed in the same order as they are defined." Shared parser options include depth (default 5), maxArrayLength (default 100), maxStringLength (default 1000), showHidden (default false), inspectObjectPrototype, inspectArrayPrototype, and inspectStaticMembers. The library is MIT-licensed.