Hyperscript compatible DSL for creating virtual hast trees
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.editorconfig Refactor code-style to use `xo` Aug 30, 2016
.gitignore Add `yarn.lock` to `.gitignore` Jun 20, 2018
.npmrc
.prettierignore Refactor code-style Jun 20, 2018
.travis.yml
factory.js Add support for passing children as arguments Oct 4, 2018
html.js Add support for SVG Jul 17, 2018
index.js Add support for SVG Jul 17, 2018
license Move `LICENSE` > `license` Nov 7, 2018
package.json
readme.md Add missing space Nov 7, 2018
svg.js Add support for SVG Jul 17, 2018
test.js

readme.md

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