Package Exports
- hastscript
- hastscript/html
- hastscript/svg
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (hastscript) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
hastscript 
Hyperscript (and virtual-hyperscript)
compatible DSL for creating virtual HAST trees in HTML and SVG.
Installation
npm:
npm install hastscriptUsage
var 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: [] } ] }API
h(selector?[, properties][, ...children])
s(selector?[, properties][, ...children])
DSL to create virtual HAST trees for HTML or SVG.
Parameters
selector
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.
properties
Map of properties (Object.<*>, optional).
children
(Lists of) child nodes (string, Node, Array.<string|Node>, optional).
When strings are encountered, they are normalised to text nodes.
Returns
Contribute
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.