hastscript

Hyperscript (and virtual-hyperscript) compatible DSL for creating virtual HAST trees in HTML and SVG.

Installation

npm:

npm install hastscript

Usage

var h = require('hastscript')
var s = require('hastscript/svg')

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'
    ])
  ])
)

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: '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

(List of) child nodes (string, Node, Array.<string|Node>, optional). When strings are encountered, they are normalised to text nodes.

Returns

Element.

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.

License

MIT © Titus Wormer