Hyperscript (and virtual-hyperscript) compatible DSL for creating virtual HAST trees in HTML and SVG.
npm:
npm install hastscriptvar h = require('hastscript') var s = require('hastscript/svg') // Child nodes 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' ]) ]) ) // Child nodes 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'}) ) ) 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.
Map of properties (Object.<*>, optional).
(Lists of) child nodes (string, Node, Array.<string|Node>, optional). When strings are encountered, they are normalised to text nodes.
See contributing.md in syntax-tree/hast for ways to get started.
This organisation has a Code of Conduct. By interacting with this repository, organisation, or community you agree to abide by its terms.
