npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@effect/printer

v0.38.12

Published

An easy to use, extensible pretty-printer for rendering documents

Downloads

83,239

Readme

Pretty Printer for Effect-TS

Installation

@effect/printer

npm install @effect/printer
pnpm install @effect/printer
yarn add @effect/printer

Overview

This module defines a pretty printer to format text in a flexible and convenient way. The idea is to combine a Document out of many small components, then using a layouter to convert it to an easily renderable DocStream, which can then be rendered to a variety of formats.

The document consists of several parts:

  1. Just below is some general information about the library
  2. The actual library with extensive documentation and examples

Simple Example

As a simple demonstration, let's use @effect/printer to pretty-print the following simple Haskell type definition.

example :: Int -> Bool -> Char -> IO ()

First, let's setup the imports we need:

import * as Doc from "@effect/printer/Doc"
import * as Render from "@effect/printer/Render"
import * as Array from "effect/Array"
import { pipe } from "effect/Function"

Next, we intersperse the "->" character between our types and add a leading "::" character:

const prettyTypes = (types: ReadonlyArray<string>): Doc.Doc<never> => {
  const symbolDocuments = pipe(
    Array.makeBy(types.length - 1, () => Doc.text("->")),
    Array.prepend(Doc.text("::"))
  )
  const typeDocuments = types.map(Doc.text)
  const documents = pipe(
    Array.zipWith(
      symbolDocuments,
      typeDocuments,
      (left, right) => Doc.catWithSpace(left, right)
    )
  )
  return Doc.align(Doc.seps(documents))
}

The seps function is one way of concatenating documents, but there are many others (e.g. vsep, cat and fillSep, etc.). In our example, seps is used to space-separate all documents if there is space remaining in the current line, and newlines if the remaining line is too short.

Next, we prepend the name to the type,

const prettyDeclaration = (
  name: string,
  types: ReadonlyArray<string>
): Doc.Doc<never> => Doc.catWithSpace(Doc.text(name), prettyTypes(types))

Now we can define a document that contains some type signature:

const name = "example"
const types = ["Int", "Bool", "Char", "IO ()"]
const doc: Doc.Doc<never> = prettyDeclaration(name, types)

This document can now be printed! And as a bonus, it automatically adapts to available space.

If the page is wide enough (80 characters in this case), the definitions are space-separated.

const rendered = Render.prettyDefault(doc)
console.log(rendered)
// example :: Int -> Bool -> Char -> IO ()

If we narrow the page width to only 20 characters, the same document renders vertically aligned:

const rendered = Render.pretty(doc, { lineWidth: 20 })
console.log(rendered)
// example :: Int
//         -> Bool
//         -> Char
//         -> IO ()

Speaking of alignment, had we not used the align combinators, the "->" would be at the beginning of each line, and not beneath the "::".

General Workflow

╔══════════╗
║          ║                         ╭────────────────────╮
║          ║                         │ vsep, pretty, <+>, │
║          ║                         │ nest, align, …     │
║          ║                         ╰─────────┬──────────╯
║          ║                                   │
║  Create  ║                                   │
║          ║                                   │
║          ║                                   ▽
║          ║                         ╭───────────────────╮
║          ║                         │        Doc        │
╠══════════╣                         │  (rich document)  │
║          ║                         ╰─────────┬─────────╯
║          ║                                   │
║          ║                                   │ Layout algorithms
║  Layout  ║                                   │ e.g. Layout.pretty
║          ║                                   ▽
║          ║                         ╭───────────────────╮
║          ║                         │     DocStream     │
╠══════════╣                         │ (simple document) │
║          ║                         ╰─────────┬─────────╯
║          ║                                   │
║          ║                                   ├─────────────────────────────╮
║          ║                                   │                             │ treeForm
║          ║                                   │                             ▽
║          ║                                   │                     ╭───────────────╮
║          ║                                   │                     │    DocTree    │
║  Render  ║                                   │                     ╰───────┬───────╯
║          ║                                   │                             │
║          ║               ╭───────────────────┼─────────────────╮  ╭────────┴────────╮
║          ║               │                   │                 │  │                 │
║          ║               ▽                   ▽                 ▽  ▽                 ▽
║          ║       ╭───────────────╮   ╭───────────────╮   ╭───────────────╮   ╭───────────────╮
║          ║       │ ANSI terminal │   │  Plain Text   │   │ other/custom  │   │     HTML      │
║          ║       ╰───────────────╯   ╰───────────────╯   ╰───────────────╯   ╰───────────────╯
║          ║
╚══════════╝

How the Layout Works

There are two key concepts to laying a document out: the available width, and grouping.

Available Width

The layout algorithm will try to avoid exceeding the maximum width of the Document by inserting line breaks where possible. The available layout combinators make it fairly straightforward to specify where, and under what circumstances, such a line break may be inserted by the layout algorithm (for example via the seps function).

There is also the concept of ribbon width. The ribbon is the part of a line that is printed (i.e. the line length without the leading indentation). The layout algorithms take a ribbon fraction argument, which specifies how much of a line should be filled before trying to break it up. A ribbon width of 0.5 in a document of width 80 will result in the layout algorithm trying to avoid exceeding 0.5 * 80 = 40 (ignoring current indentation depth).

Grouping

A document can be grouped, which tells the layout algorithm that it should attempt to collapse it to a single line. If the result does not fit within the constraints (given by page and ribbon widths), the document is rendered unaltered. This allows fallback renderings, so that we get nice results even when the original document would exceed the layout constraints.

Things the Pretty Printer Cannot Do

Due to how the Wadler/Leijen algorithm is designed, a couple of things are unsupported right now, with a high possibility of having no sensible implementation without significantly changing the layout algorithm. In particular, this includes:

  • Leading symbols instead of just spaces for indentation (as used by the Linux tree tool, for example)
  • Multi-column layouts, in particular tables with multiple cells of equal width adjacent to each other

Helpful Tips

Which kind of annotation should I use?

TL;DR - Use semantic annotations for Doc, and after laying out the `Doc, only then map to backend-specific annotations.

For example, suppose you want to pretty-print some programming language code. If you want keywords to be red, you should annotate the Doc with a type that has a Keyword field (without any notion of color), and then after laying out the document, convert the annotations to map Keyword to Red (using DocStream.reAnnotate). The alternative (which is not recommended) is directly annotating the Doc with Red.

While both versions would work equally well, and would create identical output, the recommended way has two significant advantages: modularity and extensibility.

Modularity: Changing the color of Keywords after laying out a Document means that there is only one modification needed (namely the call to DocStream.reAnnotate) should the color of Keywords need to be changed in the future. If you have directly annotated Documents with the color Red, a full text search/replacement would be required should the color need to be changed.

Extensibility: Adding a different rendering of a Keyword in the recommended version is as simple as adding a variant of DocStream.reAnnotate to convert the Doc annotation to something else. On the other hand, let's assume you have Red as an annotation in the Doc and the backend you would like to implement does not have the notion of color (think of plain text or a website where red doesn’t work well with the rest of the style). You now need to worry what to map redness to, which in this case has no canonical answer. Should it be omitted? What does red mean in the context of the new backend? Additionally, consider the case where keywords and variables have already been annotated as red, but you want to change only the color of variables.

Acknowledgements

This package is a port of https://github.com/quchen/prettyprinter