CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-tcompare

A comprehensive comparison library, for use in test frameworks

Pending
Overview
Eval results
Files

formatting.mddocs/

Formatting

tcompare provides powerful object formatting capabilities for converting any JavaScript value to readable string representations. The formatting system supports multiple output styles, circular reference handling, and extensive customization options.

Capabilities

format Function

Standalone formatting function for converting any value to a formatted string.

/**
 * Format a value and return the formatted string
 * @param obj - The value to format
 * @param options - Formatting options
 * @returns Formatted string representation
 */
function format(obj: any, options?: FormatOptions): string;

/**
 * Options to control the formatting of objects
 */
interface FormatOptions {
  /** Sort object keys alphabetically */
  sort?: boolean;
  /** Formatting style - 'pretty', 'js', or 'tight' */
  style?: StyleType;
  /** Override buffer chunk size for Buffer display */
  bufferChunkSize?: number;
  /** Include enumerable properties from prototype chain */
  includeEnumerable?: boolean;
  /** Include getter properties */
  includeGetters?: boolean;
  /** Represent React elements as JSX strings (pretty style only) */
  reactString?: boolean;
}

type StyleType = 'pretty' | 'js' | 'tight';

Usage Examples:

import { format } from "tcompare";

// Basic object formatting
const obj = { name: "Alice", age: 25, hobbies: ["reading", "coding"] };

// Pretty style (default) - human readable
console.log(format(obj));
/*
Object {
  "name": "Alice",
  "age": 25,
  "hobbies": Array [
    "reading",
    "coding",
  ],
}
*/

// JavaScript style - copy-paste friendly
console.log(format(obj, { style: "js" }));
/*
{
  "name": "Alice",
  "age": 25,
  "hobbies": [
    "reading",
    "coding",
  ],
}
*/

// Tight style - minimal whitespace
console.log(format(obj, { style: "tight" }));
// {"name":"Alice","age":25,"hobbies":["reading","coding",],}

Formatting Styles

Three distinct formatting styles for different use cases.

Pretty Style

Human-readable format with clear structure and type indicators.

// Object notation with constructor names
Object {
  "key": "value",
}

// Arrays with Array prefix
Array [
  "item1",
  "item2",
]

// Maps with entry structure
Map {
  "key1" => "value1",
  "key2" => "value2",
}

JavaScript Style

Valid JavaScript syntax suitable for copy-pasting.

// Standard object literal syntax
{
  "key": "value",
}

// Standard array syntax
[
  "item1",
  "item2",
]

// Map constructor syntax
new Map([
  ["key1", "value1"],
  ["key2", "value2"],
])

Tight Style

Minimal whitespace for compact representation.

{"key":"value",}
["item1","item2",]
new Map([["key1","value1"],["key2","value2"],])

Complex Data Types

tcompare handles all JavaScript data types with appropriate formatting.

Arrays and Iterables:

import { format } from "tcompare";

// Regular arrays
console.log(format([1, 2, 3]));
// Array [1, 2, 3]

// Typed arrays
console.log(format(new Uint8Array([1, 2, 3])));
// Uint8Array [1, 2, 3]

// Sets
console.log(format(new Set(["a", "b", "c"])));
/*
Set {
  "a",
  "b", 
  "c",
}
*/

Maps and Objects:

// Maps
const map = new Map([["key1", "value1"], ["key2", "value2"]]);
console.log(format(map));
/*
Map {
  "key1" => "value1",
  "key2" => "value2",
}
*/

// Plain objects
const obj = { a: 1, b: { nested: true } };
console.log(format(obj));
/*
Object {
  "a": 1,
  "b": Object {
    "nested": true,
  },
}
*/

Functions and Classes:

// Functions
function myFunc() { return "hello"; }
console.log(format(myFunc));
// Function myFunc()

// Classes
class MyClass {
  constructor(public value: number) {}
}
console.log(format(MyClass));
// Function MyClass(value)

// Instances
const instance = new MyClass(42);
console.log(format(instance));
/*
MyClass {
  "value": 42,
}
*/

Buffer Formatting

Special handling for Node.js Buffer objects with configurable chunk sizes.

/**
 * Buffer formatting options
 */
interface FormatOptions {
  /** Number of bytes to show per line when printing long Buffers */
  bufferChunkSize?: number; // default: 32
}

Usage Examples:

import { format } from "tcompare";

const buffer = Buffer.from("Hello, World! This is a longer buffer for demo");

// Default chunk size (32 bytes)
console.log(format(buffer));
/*
Buffer <
  48 65 6c 6c 6f 2c 20 57 6f 72 6c 64 21 20 54 68 |Hello, World! Th|
  69 73 20 69 73 20 61 20 6c 6f 6e 67 65 72 20 62 |is a longer b|
  75 66 66 65 72 20 66 6f 72 20 64 65 6d 6f       |uffer for demo|
>
*/

// Custom chunk size
console.log(format(buffer, { bufferChunkSize: 16 }));
/*
Buffer <
  48 65 6c 6c 6f 2c 20 57 |Hello, W|
  6f 72 6c 64 21 20 54 68 |orld! Th|
  69 73 20 69 73 20 61 20 |is a |
  // ... continues
>
*/

React Element Formatting

Special support for React JSX elements when reactString option is enabled.

/**
 * React element formatting options
 */
interface FormatOptions {
  /** Represent and compare React elements as JSX strings (pretty style only) */
  reactString?: boolean; // default: true
}

Usage Examples:

import { format } from "tcompare";
import React from "react";

const element = React.createElement("div", 
  { className: "container", id: "main" },
  "Hello, World!"
);

// With JSX formatting (default)
console.log(format(element));
// <div className="container" id="main">Hello, World!</div>

// Without JSX formatting
console.log(format(element, { reactString: false }));
/*
Object {
  "type": "div",
  "props": Object {
    "className": "container",
    "id": "main",
    "children": "Hello, World!",
  },
}
*/

Circular Reference Handling

Automatic detection and YAML-like reference notation for circular references.

Usage Examples:

import { format } from "tcompare";

// Create circular reference
const obj: any = { name: "parent", children: [] };
const child = { name: "child", parent: obj };
obj.children.push(child);

console.log(format(obj));
/*
&ref_1 Object {
  "name": "parent",
  "children": Array [
    Object {
      "name": "child", 
      "parent": <*ref_1>,
    },
  ],
}
*/

Advanced Formatting Options

Additional options for specialized formatting needs.

interface FormatOptions {
  /** Sort object keys alphabetically for deterministic output */
  sort?: boolean;
  /** Include enumerable properties from prototype chain */
  includeEnumerable?: boolean;
  /** Include getter properties (may trigger side effects) */
  includeGetters?: boolean;
}

Usage Examples:

import { format } from "tcompare";

// Sorted keys for deterministic output
const obj = { z: 1, a: 2, m: 3 };
console.log(format(obj, { sort: true }));
/*
Object {
  "a": 2,
  "m": 3,
  "z": 1,
}
*/

// Include prototype properties
class Parent {
  parentProp = "parent";
}
class Child extends Parent {
  childProp = "child";
}
const instance = new Child();

console.log(format(instance, { includeEnumerable: true }));
/*
Child {
  "childProp": "child",
  "parentProp": "parent",
}
*/

Format Class

Direct access to the Format class for advanced usage and extending functionality.

/**
 * Base formatting class for converting values to strings
 */
class Format {
  constructor(obj: any, options?: FormatOptions);
  
  /** Generate formatted string representation */
  print(): string;
  
  /** Check if object should be treated as array */
  isArray(): boolean;
  
  /** Get enumerable keys from plain objects */
  getPojoKeys(obj: any): string[];
  
  /** Get key-value pairs from plain objects */
  getPojoEntries(obj: any): Array<[string, any]>;
}

Usage Examples:

import { Format } from "tcompare";

// Direct class usage
const formatter = new Format({ a: 1, b: 2 }, { 
  style: "js", 
  sort: true 
});

const result = formatter.print();
console.log(result);
/*
{
  "a": 1,
  "b": 2,
}
*/

Install with Tessl CLI

npx tessl i tessl/npm-tcompare

docs

comparison-classes.md

comparison-functions.md

configuration.md

formatting.md

index.md

tile.json