JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 8015676
  • Score
    100M100P100Q213455F
  • License MIT

Hyperscript compatible DSL for creating virtual hast trees

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

Build Coverage Downloads Size Sponsors Backers Chat

hast utility to create trees in HTML or SVG.

Similar to hyperscript, virtual-dom/h, React.createElement, and Vue’s createElement, but for hast.

Use unist-builder to create any unist tree.

Install

npm:

npm install hastscript

Use

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

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

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

// SVG:
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. selector is parsed by hast-util-parse-selector.

properties

Map of properties (Object.<*>, optional).

children

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

Returns

Element.

Security

Use of hastscript can open you up to a cross-site scripting (XSS) attack as values are injected into the syntax tree. The following example shows how a script is injected that runs when loaded in a browser.

var tree = {type: 'root', children: []}

tree.children.push(h('script', 'alert(1)'))

Yields:

<script>alert(1)</script>

The following example shows how an image is injected that fails loading and therefore runs code in a browser.

var tree = {type: 'root', children: []}

// Somehow someone injected these properties instead of an expected `src` and
// `alt`:
var otherProps = {src: 'x', onError: 'alert(2)'}

tree.children.push(h('img', {src: 'default.png', ...otherProps}))

Yields:

<img src="x" onerror="alert(2)">

The following example shows how code can run in a browser because someone stored an object in a database instead of the expected string.

var tree = {type: 'root', children: []}

// Somehow this isn’t the expected `'wooorm'`.
var username = {
  type: 'element',
  tagName: 'script',
  children: [{type: 'text', value: 'alert(3)'}]
}

tree.children.push(h('span.handle', username))

Yields:

<span class="handle"><script>alert(3)</script></span>

Either do not use user input in hastscript or use hast-util-santize.

Contribute

See contributing.md in syntax-tree/.github for ways to get started. See support.md for ways to get help.

This project has a Code of Conduct. By interacting with this repository, organisation, or community you agree to abide by its terms.

License

MIT © Titus Wormer