hast utility to turn hast into React, Preact, Vue, etc.

• What is this?
• When should I use this?
• Install
• Use
• API
  • toH(h, tree[, options|prefix])
  • function h(name, props, children)
• Examples
  • Example: React
  • Example: Preact
  • Example: Vue
• Types
• Compatibility
• Security
• Related
• Contribute
• License

This package is a utility that can be used to turn hast into something else through a “hyperscript” interface.

hyperscript is a rather old package that made HTML from JavaScript and its API was later modelled by createElement from react (and preact) and h from hyperscript, virtual-dom (and vue).

This package uses that API to translate between hast and anything else.

you can use this utility when you need to turn hast into something else, either through a “hyperscript” interface that already exists (createElement from react and preact or h from hyperscript, virtual-dom, vue), or through such a translation function that you make yourself.

This package is ESM only. In Node.js (version 12.20+, 14.14+, or 16.0+), install with npm:

npm install hast-to-hyperscript

In Deno with esm.sh:

import {toH} from 'https://esm.sh/hast-to-hyperscript@10'

In browsers with esm.sh:

<script type="module">
  import {toH} from 'https://esm.sh/hast-to-hyperscript@10?bundle'
</script>

import {toH} from 'hast-to-hyperscript'
import h from 'hyperscript'
const 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):
const doc = toH(h, tree).outerHTML
console.log(doc)

Yields:

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

This package exports the identifiers toH. There is no default export.

turn hast into React, Preact, Vue, etc.

• h (Function) — hyperscript function
• tree (Node) — tree to transform
• prefix — treated as {prefix: prefix}
• options.prefix (string or boolean, optional) — prefix to use as a prefix for keys passed in props to h(), this behavior is turned off by passing false and 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 exiting

* — Anything returned by calling h().

Create an element from the given values.

• this (Node) — node that is currently transformed
• name (string) — tag name of element to create
• props (Record<string, string>) — attributes to set
• children (Array<any>) — list of children (results of previously called h())

* — Anything.

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

• If anything other than an element or root 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.

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 props and virtual-dom/h needs an attributes object inside props most of the time. toH works around these differences for:

• createElement from react
• createElement from Vue 2 and h from vue 3+
• virtual-dom/h
• hyperscript

import {createElement} from 'react'
import {renderToStaticMarkup} from 'react-dom/server'
import {h} from 'hastscript'
import {toH} from 'hast-to-hyperscript'
const tree = h('h1', ['Hello, ', h('em', 'world'), '!'])
console.log(renderToStaticMarkup(toH(createElement, tree)));

Yields:

<h1>Hello, <em>world</em>!</h1>

import {createElement} from 'preact'
import render from 'preact-render-to-string'
import {h} from 'hastscript'
import {toH} from 'hast-to-hyperscript'
const tree = h('h1', ['Hello, ', h('em', 'world'), '!'])
console.log(render(toH(createElement, tree)));

Yields:

<h1>Hello, <em>world</em>!</h1>

import * as vue from 'vue'
import serverRenderer from '@vue/server-renderer'
import {h} from 'hastscript'
import {toH} from 'hast-to-hyperscript'
const tree = h('h1', ['Hello, ', h('em', 'world'), '!'])
console.log(await serverRenderer.renderToString(
  vue.createSSRApp(() => toH(vue.h, tree))
))

Yields:

<h1>Hello, <em>world</em>!</h1>

This package is fully typed with TypeScript. It exports the additional types CreateElementLike and Options.

Projects maintained by the unified collective are compatible with all maintained versions of Node.js. As of now, that is Node.js 12.20+, 14.14+, and 16.0+. Our projects sometimes work with older versions, but this is not guaranteed.

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.

• hastscript — hyperscript compatible interface for creating nodes
• hast-util-sanitize — sanitize nodes
• hast-util-from-dom — transform a DOM tree to hast
• unist-builder — create any unist tree
• xastscript — create a xast tree

See contributing.md in syntax-tree/.github for 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.

MIT © Titus Wormer