or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

built-in-plugins.mdcore-formatting.mdindex.mdplugin-system.md
tile.json

tessl/npm-pretty-format

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

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/pretty-format@30.0.x

To install, run

npx @tessl/cli install tessl/npm-pretty-format@30.0.0

index.mddocs/

Pretty Format

Pretty Format is a highly configurable JavaScript value stringification library that converts any JavaScript value into a human-readable string format. It handles all built-in JavaScript types including primitives, complex objects, and special values with extensive customization through options for indentation, depth control, escaping, and color highlighting for terminal output.

Package Information

  • Package Name: pretty-format
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install pretty-format

Core Imports

import { format } from "pretty-format";
// OR as default export
import format from "pretty-format";

For CommonJS:

const { format } = require("pretty-format");
// OR as default export
const format = require("pretty-format");

Import with plugins and options:

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

Basic Usage

import { format } from "pretty-format";

// Basic formatting
const obj = { 
  name: "John", 
  age: 30, 
  hobbies: ["reading", "coding"],
  address: { city: "New York", zip: 10001 }
};

console.log(format(obj));
/*
Object {
  "address": Object {
    "city": "New York",
    "zip": 10001,
  },
  "age": 30,
  "hobbies": Array [
    "reading",
    "coding",
  ],
  "name": "John",
}
*/

// With options
console.log(format(obj, { 
  indent: 4, 
  min: false,
  maxDepth: 2 
}));

Architecture

Pretty Format is built around several key components:

  • Core Formatter: Main format function that dispatches to appropriate handlers based on value type
  • Plugin System: Extensible architecture supporting both new and legacy plugin interfaces for custom data types
  • Built-in Plugins: Comprehensive set of plugins for React elements, DOM nodes, Immutable.js structures, and Jest matchers
  • Configuration System: Rich options system for controlling output format, depth, colors, and behavior
  • Type Safety: Full TypeScript support with complete type definitions for all APIs

Capabilities

Core Formatting

Main formatting functionality that converts any JavaScript value to a human-readable string with extensive customization options.

function format(val: unknown, options?: OptionsReceived): string;
export default format;

interface OptionsReceived {
  callToJSON?: boolean;
  compareKeys?: ((a: string, b: string) => number) | null;
  escapeRegex?: boolean;
  escapeString?: boolean;
  highlight?: boolean;
  indent?: number;
  maxDepth?: number;
  maxWidth?: number;
  min?: boolean;
  plugins?: Plugin[];
  printBasicPrototype?: boolean;
  printFunctionName?: boolean;
  theme?: Partial<Theme>;
}

Core Formatting

Plugin System

Extensible plugin architecture for handling custom data types with both modern and legacy interfaces.

interface NewPlugin {
  test: (val: any) => boolean;
  serialize: (
    val: any,
    config: Config,
    indentation: string,
    depth: number,
    refs: Refs,
    printer: Printer
  ) => string;
}

interface OldPlugin {
  test: (val: any) => boolean;
  print: (
    val: unknown,
    print: (val: unknown) => string,
    indent: (str: string) => string,
    options: { edgeSpacing: string; min: boolean; spacing: string },
    colors: Colors
  ) => string;
}

type Plugin = NewPlugin | OldPlugin;

Plugin System

Built-in Plugins

Comprehensive collection of plugins for common JavaScript frameworks and data structures.

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

Built-in Plugins

Default Configuration

const DEFAULT_OPTIONS: {
  callToJSON: true;
  compareKeys: undefined;
  escapeRegex: false;
  escapeString: true;
  highlight: false;
  indent: 2;
  maxDepth: number; // Number.POSITIVE_INFINITY
  maxWidth: number; // Number.POSITIVE_INFINITY
  min: false;
  plugins: [];
  printBasicPrototype: true;
  printFunctionName: true;
  theme: {
    comment: 'gray';
    content: 'reset';
    prop: 'yellow';
    tag: 'cyan';
    value: 'green';
  };
};

Error Handling

class PrettyFormatPluginError extends Error {
  constructor(message: string, stack: string);
}

Common Types

type CompareKeys = ((a: string, b: string) => number) | null | undefined;

interface Theme {
  comment: string;
  content: string;
  prop: string;
  tag: string;
  value: string;
}

interface Colors {
  comment: { close: string; open: string };
  content: { close: string; open: string };
  prop: { close: string; open: string };
  tag: { close: string; open: string };
  value: { close: string; open: string };
}

type Refs = Array<unknown>;

type Printer = (
  val: unknown,
  config: Config,
  indentation: string,
  depth: number,
  refs: Refs,
  hasCalledToJSON?: boolean
) => string;

interface Config {
  callToJSON: boolean;
  compareKeys: CompareKeys;
  colors: Colors;
  escapeRegex: boolean;
  escapeString: boolean;
  indent: string;
  maxDepth: number;
  maxWidth: number;
  min: boolean;
  plugins: Plugin[];
  printBasicPrototype: boolean;
  printFunctionName: boolean;
  spacingInner: string;
  spacingOuter: string;
}

type Plugin = NewPlugin | OldPlugin;
type Plugins = Array<Plugin>;

interface Options extends Omit<PrettyFormatOptions, 'compareKeys' | 'theme'> {
  compareKeys: CompareKeys;
  theme: Required<PrettyFormatOptions['theme']>;
}

interface PrettyFormatOptions {
  callToJSON?: boolean;
  compareKeys?: CompareKeys;
  escapeRegex?: boolean;
  escapeString?: boolean;
  highlight?: boolean;
  indent?: number;
  maxDepth?: number;
  maxWidth?: number;
  min?: boolean;
  plugins?: Plugins;
  printBasicPrototype?: boolean;
  printFunctionName?: boolean;
  theme?: Partial<Theme>;
}

type OptionsReceived = PrettyFormatOptions;