hast utility to create trees in HTML or SVG.
Similar to hyperscript, virtual-dom/h, React.createElement, and Vue’s createElement, but for hast.
Use unist-builder to create any unist tree.
This package is ESM only: Node 12+ is needed to use it and it must be imported instead of required.
npm:
npm install hastscriptimport {h, s} from 'hastscript' // Children as an array: console.log( h('.foo#some-id', [ h('span', 'some text'), h('input', {type: 'text', value: 'foo'}), h('a.alpha', {class: 'bravo charlie', download: 'download'}, [ 'delta', 'echo' ]) ]) ) // Children as arguments: console.log( h( 'form', {method: 'POST'}, h('input', {type: 'text', name: 'foo'}), h('input', {type: 'text', name: 'bar'}), h('input', {type: 'submit', value: 'send'}) ) ) // SVG: console.log( s('svg', {xmlns: 'http://www.w3.org/2000/svg', viewbox: '0 0 500 500'}, [ s('title', 'SVG `<circle>` element'), s('circle', {cx: 120, cy: 120, r: 100}) ]) )Yields:
{ type: 'element', tagName: 'div', properties: {className: ['foo'], id: 'some-id'}, children: [ { type: 'element', tagName: 'span', properties: {}, children: [{type: 'text', value: 'some text'}] }, { type: 'element', tagName: 'input', properties: {type: 'text', value: 'foo'}, children: [] }, { type: 'element', tagName: 'a', properties: {className: ['alpha', 'bravo', 'charlie'], download: true}, children: [{type: 'text', value: 'delta'}, {type: 'text', value: 'echo'}] } ] } { type: 'element', tagName: 'form', properties: {method: 'POST'}, children: [ { type: 'element', tagName: 'input', properties: {type: 'text', name: 'foo'}, children: [] }, { type: 'element', tagName: 'input', properties: {type: 'text', name: 'bar'}, children: [] }, { type: 'element', tagName: 'input', properties: {type: 'submit', value: 'send'}, children: [] } ] } { type: 'element', tagName: 'svg', properties: {xmlns: 'http://www.w3.org/2000/svg', viewBox: '0 0 500 500'}, children: [ { type: 'element', tagName: 'title', properties: {}, children: [{type: 'text', value: 'SVG `<circle>` element'}] }, { type: 'element', tagName: 'circle', properties: {cx: 120, cy: 120, r: 100}, children: [] } ] }This package exports the following identifiers: h and s. There is no default export.
Create virtual hast trees for HTML or SVG.
h(): rooth(null[, …children]): rooth(name[, properties][, …children]): element
(and the same for s).
Simple CSS selector (string, optional). Can contain a tag name (foo), IDs (#bar), and classes (.baz). If the selector is a string but there is no tag name in it, h defaults to build a div element, and s to a g element. selector is parsed by hast-util-parse-selector. When string, builds an Element. When nullish, builds a Root instead.
Map of properties (Object.<*>, optional). Keys should match either the HTML attribute name, or the DOM property name, but are case-insensitive. Cannot be given when building a Root.
(Lists of) children (string, number, Node, Array.<children>, optional). When strings or numbers are encountered, they are mapped to Text nodes. If Root nodes are given, their children are used instead.
hastscript can be used as a pragma for JSX. The example above can then be written like so, using inline Babel pragmas, so that SVG can be used too:
example-html.jsx:
/** @jsx h */ /** @jsxFrag null */ import {h} from 'hastscript' console.log( <div class="foo" id="some-id"> <span>some text</span> <input type="text" value="foo" /> <a class="alpha bravo charlie" download> deltaecho </a> </div> ) console.log( <form method="POST"> <input type="text" name="foo" /> <input type="text" name="bar" /> <input type="submit" name="send" /> </form> )example-svg.jsx:
/** @jsx s */ /** @jsxFrag null */ import {s} from 'hastscript' console.log( <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 500 500"> <title>SVG `<circle>` element</title> <circle cx={120} cy={120} r={100} /> </svg> )Because JSX does not allow dots (.) or number signs (#) in tag names, you have to pass class names and IDs in as attributes.
Note that you must still import hastscript yourself and configure your JavaScript compiler to use the identifier you assign it to as a pragma (and pass null for fragments).
You can use estree-util-build-jsx to compile JSX away.
You could also use bublé, but it’s not ideal (jsxFragment is currently only available on the API, not the CLI, and it only allows a single pragma).
For Babel, use @babel/plugin-transform-react-jsx (in classic mode), and pass pragma: 'h' and pragmaFrag: 'null'. This is less ideal because it allows a single pragma.
Babel also lets you configure this in a script:
/** @jsx s */ /** @jsxFrag null */ import {s} from 'hastscript' console.log(<rect />)This is useful because it allows using both html and svg, although in different files.
Use of hastscript can open you up to a cross-site scripting (XSS) attack as values are injected into the syntax tree. The following example shows how a script is injected that runs when loaded in a browser.
var tree = {type: 'root', children: []} tree.children.push(h('script', 'alert(1)'))Yields:
<script>alert(1)</script>The following example shows how an image is injected that fails loading and therefore runs code in a browser.
var tree = {type: 'root', children: []} // Somehow someone injected these properties instead of an expected `src` and // `alt`: var otherProps = {src: 'x', onError: 'alert(2)'} tree.children.push(h('img', {src: 'default.png', ...otherProps}))Yields:
<img src="x" onerror="alert(2)">The following example shows how code can run in a browser because someone stored an object in a database instead of the expected string.
var tree = {type: 'root', children: []} // Somehow this isn’t the expected `'wooorm'`. var username = { type: 'element', tagName: 'script', children: [{type: 'text', value: 'alert(3)'}] } tree.children.push(h('span.handle', username))Yields:
<span class="handle"><script>alert(3)</script></span>Either do not use user input in hastscript or use hast-util-santize.
unist-builder— Create any unist treexastscript— Create a xast treehast-to-hyperscript— Convert a Node to React, Virtual DOM, Hyperscript, and morehast-util-from-dom— Transform a DOM tree to hasthast-util-select—querySelector,querySelectorAll, andmatcheshast-util-to-html— Stringify nodes to HTMLhast-util-to-dom— Transform to a DOM tree
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.
