purescript-sigil

Typographic HTML rendering for PureScript type signatures

Readme Sigils Siglets Signets Data Types Classes Type Aliases Foreign

About

sigil renders PureScript type signatures as semantic HTML with a more "typeset" or "designed" styling. It parses type strings via language-cst-parser, assigns colors to type variables, and produces HTML that maps type concepts to semantic elements.

Records are shown as tables, nested-records are supported as are open rows (table with dotted-line border).

For functions it provides two flavors of rendering, an information-preserving one called "sigil" and an ultra-compact "siglet" which only shows the rough form (arity, type variables etc). This latter is inspired by Edward Tufte's "sparklines" idea.

For other definitions such as type-classes, data / ADT, type-aliases etc there are similarly styled, information-preserving, renderings too.

The additional tabs on this page show many examples of each form.

Progressive disclosure at different scales

Type-setting rather than syntax-highlighting

Visually distinct categories of declaration

Element mapping

<var>: Type variables (colored via --vc custom property)
<code>: Type constructors, applications
<dfn>: Declaration name
<ol>: Arrow chains (CSS-generated →)
<dl>: Records (3-column grid: name • :: • type)
<em>: Constraints
<small>: Punctuation (::, parens, operators)

Usage

import Sigil.Parse (parseToRenderType)
import Sigil.Html as Sigil

case parseToRenderType "forall a. Ord a => Array a -> Array a" of
  Just ast -> Sigil.renderSignatureInto "#container"
    { name: "sort", ast, typeParams: [], className: Nothing }
  Nothing -> log "parse failed"

#	Signature	Rendered

#	Signature	Rendered

#	Signature	Rendered

#	Declaration	Rendered

#	Declaration	Rendered

#	Declaration	Rendered

#	Declaration	Rendered