tagged template string virtual dom builder
npm install hyperx-es6The only difference between hyperx-es6 and hyperx, it that hyperx-es6 exports as an ES6 module. This allows you to use hyperx with Rollup using standard ES6 module import syntax.
``
npm install hyperx-es6
javascript
import {hyperx} from 'hyperx-es6'
`After that, you can use it like you would normally use hyperx.
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:
.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
cool}${w}\n
console.log(vdom.create(tree).toString())
output:
$ node vdom.js
hello world!
cool
wow
123
React Node Example
js
var React = require('react')
var toString = require('react-dom/server').renderToString
var hyperx = require('hyperx')
var hx = hyperx(React.createElement)var title = 'world'
var wow = [1,2,3]
var tree = hx
cool}${w}\n
console.log(toString(tree))
Hyperscript Node Example
js
var h = require('hyperscript')
var hyperx = require('hyperx')
var hx = hyperx(h)var title = 'world'
var wow = [1,2,3]
var tree = hx
cool}${w}\n
console.log(tree.outerHTML)
Virtual-dom/main-loop Browser Example
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
},
handleClick: function () {
this.setState({ n: this.state.n + 1 })
}
})
render(React.createElement(App), document.querySelector('#content'))
console.log example
js
var hyperx = require('hyperx')var convertTaggedTemplateOutputToDomBuilder = hyperx(function (tagName, attrs, children) {
console.log(tagName, attrs, children)
})
convertTaggedTemplateOutputToDomBuilder
// Running this produces: h1 {} [ 'hello world' ]
API
var hyperx = require('hyperx')
var hx = hyperx(h, opts={})
Return a tagged template function
from a hyperscript-style factory function
h.Values to use for
h:* virtual-dom -
vdom.h
* react -
* hyperscript - hyperscriptOptionally provide:
*
- 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`* http://www.2ality.com/2014/07/jsx-template-strings.html?m=1
* http://facebook.github.io/jsx/#why-not-template-literals (respectfully disagree)
BSD