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.
npm:
npm install hastscriptvar h = require('hastscript') var s = require('hastscript/svg') // 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: [] } ] }DSL to create virtual hast trees for HTML or SVG.
Simple CSS selector (string, optional). Can contain a tag name (foo), IDs (#bar), and classes (.baz). If there is no tag name in the selector, h defaults to a div element, and s to a g element. selector is parsed by hast-util-parse-selector.
Map of properties (Object.<*>, optional).
(Lists of) child nodes (string, Node, Array.<string|Node>, optional). When strings are encountered, they are mapped to text nodes.
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 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, organisation, or community you agree to abide by its terms.
