unified

Project:syntax-tree/hast-to-hyperscript

Package:hast-to-hyperscript@8.0.0

  1. Dependencies:6·Dependents:17
  2. hast utility to transform to something else (react, vue, etc) through a hyperscript DSL
  1. util 105
  2. utility 105
  3. html 100
  4. unist 90
  5. rehype 68
  6. hast 51
  7. hast-util 40
  8. virtual 21
  9. dom 9
  10. transform 6
  11. vdom 5
  12. hyperscript 5
  13. dsl 5
  14. change 3

hast-to-hyperscript

Build Coverage Downloads Size Sponsors Backers Chat

hast utility to transform a tree to something else through a hyperscript DSL.

Install

npm:

npm install hast-to-hyperscript

Use

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, tree[, options|prefix])

Transform a hast tree to something else through a hyperscript DSL.

Parameters
Returns

* — Anything returned by invoking h().

function h(name, attrs, children)

Create an element from the given values.

Parameters
Returns

* — Anything.

Caveats
Nodes

Most hyperscript implementations only support elements and texts. hast supports doctype, comment, and root as well.

If unknown nodes (a node with a type not defined by hast) are found as descendants of the given tree, they are ignored: only text and element are transformed.

Support

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

Security

Use of hast-to-hyperscript can open you up to a cross-site scripting (XSS) attack if the hast tree is unsafe. Use hast-util-santize to make the hast tree safe.

Contribute

See contributing.md in syntax-tree/.github for ways to get started. See support.md for ways to get help.

This project has a code of conduct. By interacting with this repository, organization, or community you agree to abide by its terms.

License

MIT © Titus Wormer