Package Exports

parse-hyperscript

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 (parse-hyperscript) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

parse-hyperscript

Parse hyperscript-like syntax for creating dom or virtual-dom elements.

This layer exists to build a hyperscript-like DSL for any kind of dom/virtual-dom creation library.

Installation

> npm install parse-hyperscript

Example

const parse = require('parse-hyperscript')

const node = ['p.some-class', {
  id: 'test',
  style: 'background-color: red;'
}, 'text node']

const ast = parse(node)
console.log(ast)

Returns:

{
  tag: 'p',
  attrs: {
    id: 'test',
   class: 'some-class',
   style: 'background-color: red;'
  },
  children: ['text-node']
}

Creating react nodes

The following is an example implementation with React to demonstrate how you might integrate it with your view library:

const { createElement } = require('react')

function h () {
  const { tag, attrs, children } = parse(arguments)
  return createElement(
    tag,
    renameKey('class', 'className', attrs),
    ...children
  )
}

const node = h('div.test', { id: 'some-id'}, 'Hello World!')
// -> ReactElement

Implementations

preact-hyperscript - For Preact
create-dom-tree - For the raw DOM

❤️ Built one of your own? Add it!

Tests

npm test

License

MIT