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

Convert a HAST Node to another virtual node through a hyperscript compatible interface such as virtual dom, React.createElement, or hyperscript.

Installation

npm:

npm install hast-to-hyperscript

hast-to-hyperscript is also available as an AMD, CommonJS, and globals module, uncompressed and compressed.

Usage

Dependencies:

var toHyperscript = require('hast-to-hyperscript');
var React = require('react');
var h = require('hyperscript');
var v = require('virtual-dom/h');

HAST Tree:

var tree = {
    'type': 'element',
    'tagName': 'a',
    'properties': {
        'href': 'http://alpha.com',
        'id': 'bravo',
        'className': ['charlie', 'delta'],
        'download': true
    },
    'children': [{
        'type': 'text',
        'value': 'Echo'
    }]
};

Compiling with hyperscript:

var result = toHyperscript(tree, h).outerHTML;

Yields:

<a href="http://alpha.com" id="bravo" download="download" class="charlie delta">Echo</a>

Or with virtual-dom/h:

result = toHyperscript(tree, v);

Yields:

VirtualNode {
  tagName: 'A',
  properties: 
   { href: 'http://alpha.com',
     id: 'bravo',
     download: true,
     attributes: { class: 'charlie delta' } },
  children: [ VirtualText { text: 'Echo' } ],
  key: undefined,
  namespace: null,
  count: 1,
  hasWidgets: false,
  hasThunks: false,
  hooks: undefined,
  descendantHooks: false }

Or React.createElement:

result = toHyperscript(tree, React.createElement);

Yields:

{ '$$typeof': Symbol(react.element),
  type: 'a',
  key: null,
  ref: null,
  props: 
   { href: 'http://alpha.com',
     id: 'bravo',
     className: 'charlie delta',
     download: true,
     children: [ 'Echo' ] },
  _owner: null,
  _store: {} }

API

toHyperscript(node, h)

Convert a HAST Node to another virtual node through a hyperscript compatible interface such as virtual dom, React.createElement, or hyperscript.

Note that, although the signatures of the above mentioned “compatible” interfaces are the same, they differ in how they handle text or properties. Other “compatible” interfaces might not be “compatible”.

Parameters:

• node (HAST Node) — Node to convert;
• h (Function) — Hyperscript compatible interface.

Returns: Array|Object? — A node, created through invoking h(). undefined is returned if the given HAST node is neither element nor text (such as comments, character-data, or doctypes). Root nodes result in Array.<Object>.

License

MIT © Titus Wormer