hast-to-hyperscript
hast utility to transform a tree to something else through a hyperscript interface.
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 serialize):
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 interface.
Parameters
h
(Function
) — Hyperscript functiontree
(Node
) — Tree to transformprefix
— Treated as{prefix: prefix}
options.prefix
(string
orboolean
, optional) — Prefix to use as a prefix for keys passed inattrs
toh()
, this behavior is turned off by passingfalse
, turned on by passing astring
. By default,h-
is used as a prefix if the givenh
is detected as beingvirtual-dom/h
orReact.createElement
options.space
(enum,'svg'
or'html'
, default:'html'
) — Whethernode
is in the'html'
or'svg'
space. If ansvg
element is found when inside the HTML space,toH
automatically switches to the SVG space when entering the element, and switches back when exiting
Returns
*
— Anything returned by invoking h()
.
function h(name, attrs, children)
Create an element from the given values.
Content
h
is called with the node that is currently compiled as the context object (this
).
Parameters
name
(string
) — Tag-name of element to createattrs
(Object.<string>
) — Attributes to setchildren
(Array.<* | string>
) — List of children (results of previously invokingh()
)
Returns
*
— Anything.
Caveats
Nodes
Most hyperscript implementations only support elements and texts. hast supports doctype, comment, and root as well.
- If anything other than an
element
orroot
node is given,toH
throws - If a root is given with no children, an empty
div
element is returned - If a root is given with one element child, that element is transformed
- Otherwise, the children are wrapped in a
div
element
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-sanitize
to make the hast tree safe.
Related
hastscript
— Hyperscript compatible interface for creating nodeshast-util-sanitize
— Sanitize nodeshast-util-from-dom
— Transform a DOM tree to hastunist-builder
— Create any unist treexastscript
— Create a xast tree
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.