hast-to-hyperscript

What is hast-to-hyperscript?

The hast-to-hyperscript npm package is a utility that allows you to transform HAST (Hypertext Abstract Syntax Tree) nodes into virtual DOM trees using a hyperscript-style function. This is particularly useful for integrating with virtual DOM libraries like React, Vue, or Hyperscript, enabling the rendering of HTML or markdown content as virtual DOM nodes.

What are hast-to-hyperscript's main functionalities?

Transform HAST to React elements

Converts a HAST node into a React element using React's createElement function. Useful for rendering markdown or HTML content within React applications.

const h = require('react').createElement;
const toH = require('hast-to-hyperscript');
const hast = {type: 'element', tagName: 'div', properties: {}, children: [{type: 'text', value: 'Hello, world!'}]};
const element = toH(h, hast);
console.log(element);

Transform HAST to Vue elements

Enables the conversion of HAST nodes into Vue virtual nodes using Vue's h function, facilitating the integration of HTML or markdown into Vue components.

const h = require('vue').h;
const toH = require('hast-to-hyperscript');
const hast = {type: 'element', tagName: 'div', properties: {}, children: [{type: 'text', value: 'Hello, Vue!'}]};
const element = toH(h, hast);
console.log(element);

Transform HAST to Hyperscript elements

Converts HAST nodes into Hyperscript virtual nodes, which can be used with any library that supports the Hyperscript syntax, such as Mithril or Cycle.js.

const h = require('hyperscript');
const toH = require('hast-to-hyperscript');
const hast = {type: 'element', tagName: 'div', properties: {}, children: [{type: 'text', value: 'Hello, Hyperscript!'}]};
const element = toH(h, hast);
console.log(element);

Other packages similar to hast-to-hyperscript

rehype-react

Similar to hast-to-hyperscript, rehype-react is designed to transform HAST into React components. However, it is specifically tailored for React and includes additional features for handling React-specific scenarios, making it more specialized compared to the more general-purpose hast-to-hyperscript.

rehype-vue

Rehype-vue is analogous to rehype-react but for Vue.js. It converts HAST directly into Vue components. Like rehype-react, it is more specialized for Vue compared to hast-to-hyperscript, which is more flexible and can work with various hyperscript implementations.

README

hast-to-hyperscript

Deprecated: use hast-util-to-jsx-runtime instead, which is much better :)

Git is still intact and previous versions can still be used without warnings.