medfreeman / hast-to-hyperscript

Transform HAST to something else through a hyperscript DSL

hast-to-hyperscript

Transform HAST to something else through a hyperscript DSL.

Installation

npm:

npm install hast-to-hyperscript

Usage

var toH = require('hast-to-hyperscript')
var h = require('hyperscript')

var tree = {
  type: 'element',
  tagName: 'p',
  properties: {id: 'alpha', className: ['bravo']},
  children: [
    {type: 'text', value: 'charlie '},
    {
      type: 'element',
      tagName: 'strong',
      properties: {style: 'color: red;'},
      children: [{type: 'text', value: 'delta'}]
    },
    {type: 'text', value: ' echo.'}
  ]
}

// Transform (`hyperscript` needs `outerHTML` to stringify):
var doc = toH(h, tree).outerHTML

console.log(doc)

Yields:

<p class="bravo" id="alpha">charlie <strong>delta</strong> echo.</p>

API

toH(h, node[, options|prefix])

Transform HAST to something else through a hyperscript DSL.

Parameters

• h (Function)
• node (Element)
• prefix — Treated as {prefix: prefix}
• options.prefix (string or boolean, optional) — Prefix to use as a prefix for keys passed in attrs to h(), this behaviour is turned off by passing false, turned on by passing a string. By default, h- is used as a prefix if the given h is detected as being virtual-dom/h or React.createElement
• options.space (enum, 'svg' or 'html', default: 'html') — Whether node is in the 'html' or 'svg' space. If an svg element is found when inside the HTML space, toH automatically switches to the SVG space when entering the element, and switches back when leaving

Returns

* — Anything returned by invoking h().

function h(name, attrs, children)

Transform HAST to something else through a hyperscript DSL.

Parameters

• name (string) — Tag-name of element to create
• attrs (Object.<string>) — Attributes to set
• children (Array.<* | string>) — List of children and text, where children are the result of invoking h() previously

Returns

* — Anything.

Caveats

Nodes: Most hyperscript implementations only support elements and text (as leave nodes). HAST supports doctype, comment, and root as well.

• If anything other than an element or root node is given, hast-to-hyperscript throws
• If a root is given with one element child, that element is transformed
• If a root with no children, a non-element only child, or more than one children, the children are wrapped in a div element

If unknown nodes are found deeper in the tree, they are ignored: only text and element nodes are transformed.

Support: Although there are lots of libs mentioning support for this interface, there are significant differences between them. For example, hyperscript doesn’t support classes in attrs, virtual-dom/h needs an attributes object inside attrs most of the time. hast-to-hyperscript works around these differences for:

• React.createElement
• virtual-dom/h
• hyperscript

Related

• hastscript

Contribute

See contributing.md in syntax-tree/hast for ways to get started.

This organisation has a Code of Conduct. By interacting with this repository, organisation, or community you agree to abide by its terms.

License

MIT © Titus Wormer