tessl/npm-pretty-format

Stringify any JavaScript value with customizable formatting, plugins, and terminal colors.

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview

Eval results

Files

Built-in Plugins

Name: tessl/npm-pretty-format
Author: tessl

Comprehensive collection of plugins for common JavaScript frameworks and data structures including React elements, DOM nodes, Immutable.js collections, and Jest testing utilities.

Capabilities

Plugins Export

All built-in plugins are available through the plugins named export.

const plugins: {
  AsymmetricMatcher: Plugin;
  DOMCollection: Plugin;
  DOMElement: Plugin;
  Immutable: Plugin;
  ReactElement: Plugin;
  ReactTestComponent: Plugin;
};

Usage Examples:

import { format, plugins } from "pretty-format";

// Use specific plugins
const { ReactElement, DOMElement } = plugins;

const formatted = format(reactComponent, {
  plugins: [ReactElement]
});

// Use multiple plugins
const formatted2 = format(domNode, {
  plugins: [DOMElement, ReactElement]
});

AsymmetricMatcher Plugin

Handles Jest asymmetric matchers like expect.any(), expect.objectContaining(), etc.

const AsymmetricMatcher: Plugin;

Supported Matchers:

expect.any(Constructor)
expect.anything()
expect.arrayContaining(array)
expect.objectContaining(object)
expect.stringContaining(string)
expect.stringMatching(pattern)

Usage Examples:

import { format, plugins } from "pretty-format";
const { AsymmetricMatcher } = plugins;

// Format asymmetric matchers
const matcher = expect.objectContaining({
  name: expect.any(String),
  age: expect.any(Number)
});

const formatted = format(matcher, {
  plugins: [AsymmetricMatcher]
});
// Result: ObjectContaining {
//   "name": Any<String>,
//   "age": Any<Number>,
// }

DOMCollection Plugin

Handles DOM collections like NodeList, HTMLCollection, and other array-like DOM objects.

const DOMCollection: Plugin;

Supported Collections:

NodeList
HTMLCollection
DOMTokenList
CSSStyleDeclaration
Other DOM array-like objects

Usage Examples:

import { format, plugins } from "pretty-format";
const { DOMCollection } = plugins;

// Format DOM collections
const nodeList = document.querySelectorAll('div');
const htmlCollection = document.getElementsByClassName('item');

const formatted = format(nodeList, {
  plugins: [DOMCollection]
});
// Result: NodeList [
//   <div />,
//   <div />,
// ]

DOMElement Plugin

Handles DOM elements and nodes with HTML-like formatting.

const DOMElement: Plugin;

Supported Node Types:

Element nodes (nodeType 1): <div>, <span>, etc.
Text nodes (nodeType 3): Text content
Comment nodes (nodeType 8): 
Document fragment (nodeType 11): Fragment containers
Custom elements: Elements with hyphens or is attribute

Usage Examples:

import { format, plugins } from "pretty-format";
const { DOMElement } = plugins;

// Format DOM elements
const element = document.createElement('div');
element.className = 'container';
element.setAttribute('data-id', '123');
element.textContent = 'Hello World';

const formatted = format(element, {
  plugins: [DOMElement]
});
// Result: <div
//   class="container"
//   data-id="123"
// >
//   Hello World
// </div>

// Self-closing elements
const input = document.createElement('input');
input.type = 'text';
input.value = 'test';

const inputFormatted = format(input, {
  plugins: [DOMElement]
});
// Result: <input
//   type="text"
//   value="test"
// />

Immutable Plugin

Handles Immutable.js data structures with native-like formatting.

const Immutable: Plugin;

Supported Immutable Types:

List: Immutable arrays
Map: Immutable objects
OrderedMap: Ordered key-value pairs
Set: Immutable sets
OrderedSet: Ordered unique values
Stack: LIFO collection
Seq: Lazy sequences

Usage Examples:

import { format, plugins } from "pretty-format";
import { List, Map, Set } from "immutable";
const { Immutable } = plugins;

// Format Immutable List
const list = List([1, 2, 3]);
const formatted = format(list, {
  plugins: [Immutable]
});
// Result: Immutable.List [
//   1,
//   2,
//   3,
// ]

// Format Immutable Map
const map = Map({ name: 'John', age: 30 });
const mapFormatted = format(map, {
  plugins: [Immutable]
});
// Result: Immutable.Map {
//   "name": "John",
//   "age": 30,
// }

// Format nested Immutable structures
const nested = Map({
  users: List([
    Map({ name: 'Alice', active: true }),
    Map({ name: 'Bob', active: false })
  ])
});

ReactElement Plugin

Handles React elements with JSX-like formatting.

const ReactElement: Plugin;

Supported React Types:

Class components: <MyComponent />
Function components: <MyFunction />
DOM elements: <div>, <span>, etc.
React.Fragment: <React.Fragment>
React.Suspense: <React.Suspense>
Context providers/consumers: <Context.Provider>, <Context.Consumer>
Nested elements: Components with children

Usage Examples:

import React from "react";
import { format, plugins } from "pretty-format";
const { ReactElement } = plugins;

// Format React elements
const element = React.createElement('div', 
  { className: 'container', id: 'main' },
  'Hello ',
  React.createElement('span', { style: { color: 'red' } }, 'World')
);

const formatted = format(element, {
  plugins: [ReactElement],
  printFunctionName: false
});
// Result: <div
//   className="container"
//   id="main"
// >
//   Hello 
//   <span
//     style={
//       Object {
//         "color": "red",
//       }
//     }
//   >
//     World
//   </span>
// </div>

// Function components
function MyComponent({ name }) {
  return React.createElement('h1', null, `Hello ${name}`);
}

const component = React.createElement(MyComponent, { name: 'Alice' });
const componentFormatted = format(component, {
  plugins: [ReactElement]
});
// Result: <MyComponent
//   name="Alice"
// />

ReactTestComponent Plugin

Handles React test renderer components for snapshot testing.

const ReactTestComponent: Plugin;

Supported Test Objects:

React test renderer instances
Rendered component trees
Test component snapshots

Usage Examples:

import React from "react";
import renderer from "react-test-renderer";
import { format, plugins } from "pretty-format";
const { ReactTestComponent } = plugins;

// Format test renderer output
const component = React.createElement('button', 
  { onClick: () => {} }, 
  'Click me'
);

const testInstance = renderer.create(component);
const formatted = format(testInstance.toJSON(), {
  plugins: [ReactTestComponent],
  printFunctionName: false
});
// Result: <button
//   onClick=[Function]
// >
//   Click me
// </button>

Plugin Combination

Multiple plugins can be used together, with the first matching plugin taking precedence.

Usage Examples:

import { format, plugins } from "pretty-format";
const { ReactElement, DOMElement, Immutable } = plugins;

// Use multiple plugins for comprehensive formatting
const formatted = format(complexValue, {
  plugins: [
    ReactElement,      // Handle React elements first
    DOMElement,        // Then DOM elements  
    Immutable,         // Then Immutable.js structures
  ],
  indent: 2,
  highlight: true
});

// Plugin order matters - more specific plugins should come first
const orderedPlugins = [
  ReactTestComponent,  // Most specific
  ReactElement,        // Less specific
  DOMElement,          // General DOM handling
];

Plugin Configuration

All built-in plugins respect the standard formatting options.

Common Options:

indent: Affects nested element formatting
maxDepth: Controls how deep to traverse component trees
maxWidth: Limits number of children/properties shown
min: Enables compact formatting
highlight: Enables terminal colors (where supported)
printFunctionName: Controls function name display in props

Usage Examples:

// Compact React element formatting
const compact = format(reactElement, {
  plugins: [ReactElement],
  min: true
});

// Limited depth DOM tree
const shallow = format(domElement, {
  plugins: [DOMElement],
  maxDepth: 2
});

// Highlighted output
const colored = format(immutableData, {
  plugins: [Immutable],
  highlight: true,
  theme: {
    tag: 'cyan',
    prop: 'yellow',
    value: 'green'
  }
});

Install with Tessl CLI