hyperx

!tests

tagged template string virtual dom builder

This module is similar to JSX, but provided as a standards-compliant ES6 tagged
template string function.

hyperx works with virtual-dom,
react,
hyperscript, or any DOM builder with a
hyperscript-style API: h(tagName, attrs, children).

You might also want to check out the [hyperxify][2] browserify transform to
statically compile hyperx into javascript expressions to save sending the hyperx
parser down the wire.

[2]: https://npmjs.com/package/hyperxify

compatibility

[Template strings][1] are available in:
node 4+, chrome 41, firefox 34, edge, opera 28, safari 9

If you're targeting these platforms, there's no need to use a transpiler!

[1]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/template_strings

examples

virtual-dom node example

`` js
var vdom = require('virtual-dom')
var hyperx = require('hyperx')
var hx = hyperx(vdom.h)

var title = 'world'
var wow = [1,2,3]
var tree = hx

`
$ node vdom.js


` js
var React = require('react')
var toString = require('react-dom/server').renderToString
var hyperx = require('hyperx')
var hx = hyperx(function createElement (component, properties, children) {
// Pass children as separate arguments to avoid key warnings
return React.createElement.apply(null, [component, properties].concat(children))
}, {
createFragment: function createFragment (children) {
return React.createElement.apply(null, [React.Fragment, {}].concat(children))
}
})

var title = 'world'
var wow = [1,2,3]
var frag = hx
row1
row2

var tree = hx

` js
var h = require('hyperscript')
var hyperx = require('hyperx')
var hx = hyperx(h)

var title = 'world'
var wow = [1,2,3]
var tree = hx

` js
var vdom = require('virtual-dom')
var hyperx = require('hyperx')
var hx = hyperx(vdom.h)

var main = require('main-loop')
var loop = main({ times: 0 }, render, vdom)
document.querySelector('#content').appendChild(loop.target)

function render (state) {
return hx

function onclick () {
loop.update({ times: state.times + 1 })
}
}
`

react browser example

` js
var React = require('react')
var render = require('react-dom').render
var hyperx = require('hyperx')
var hx = hyperx(React.createElement)

var App = React.createClass({
getInitialState: function () { return { n: 0 } },
render: function () {
return hx

` js
var hyperx = require('hyperx')

var convertTaggedTemplateOutputToDomBuilder = hyperx(function (tagName, attrs, children) {
console.log(tagName, attrs, children)
})

convertTaggedTemplateOutputToDomBuilder

hello world

// Running this produces: h1 {} [ 'hello world' ]
`

api

`
var hyperx = require('hyperx')
`

var hx = hyperx(h, opts={})

Return a tagged template function hx from a hyperscript-style factory function
h.

Values to use for h:

* virtual-dom - vdom.h
* react - React.createElement with parameter children spread
* hyperscript - hyperscript

Optionally provide:

* opts.concat(a, b) - custom concatenation function to combine quasiliteral
strings with expressions. The h factory function will receive the objects
returned by the concatenation function and can make specific use of them. This
is useful if you want to implement a pre-processor to generate javascript from
hyperx syntax.
* opts.attrToProp - turn off attribute to property conversions when false
* opts.createFragment - if your template string has multiple root elements, they
will be provided as an array to this function. the return value will then be returned
by the template literal

prior art

* http://www.2ality.com/2014/07/jsx-template-strings.html?m=1
* http://facebook.github.io/jsx/#why-not-template-literals (respectfully disagree)

license

BSD

install

`
npm install hyperx
``