npm

npm’s 2019 JavaScript ecosystem survey analysis is now available! Get your copy here »

hastscript

5.0.0 • Public • Published

hastscript Build Coverage Downloads Size Chat

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

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

install

npm i hastscript

Downloadsweekly downloads

876,556

version

5.0.0

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability