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