/hast-to-hyperscript

Transform HAST to something else through a hyperscript DSL

Primary LanguageJavaScriptMIT LicenseMIT

hast-to-hyperscript Build Status Coverage Status

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;

Yields:

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

API

toH(h, node[, prefix])

Transform HAST to something else through a hyperscript DSL.

Parameters
  • h (Function)
  • node (Element)
  • 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
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:

Related

Contribute

See contribute.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