var React = require('react')
var toString = require('react-dom/server').renderToString
var hyperx = require('../')

// hyperx always uses a children array, but react needs children as separate arguments,
// so spread them using this wrapper
function createElement (tag, props, children) {
  return React.createElement.apply(null, [tag, props].concat(children))
}

function createFragment (children) {
  return createElement(React.Fragment, {}, children)
}

var hx = hyperx(createElement, {
  createFragment: createFragment
})

var title = 'world'
var wow = [1,2,3]
var frag = hx`
  <tr> <td>row1</td> </tr>
  <tr> <td>row2</td> </tr>
`
var tree = hx`<div>
  <h1 y="ab${1+2}cd">hello ${title}!</h1>
  ${hx`<i>cool</i>`}
  wow
  ${wow.map(function (w, i) {
    return hx`<b key="${i}">${w}</b>\n`
  })}

  <table>${frag}</table>
</div>`
console.log(toString(tree))

@@ -520,16 +520,178 @@
 ent%0A%7D)%0A%0A
+// use custom components by doing %60%3C$%7BComponent%7D%3E%60%0Afunction FancyTable (props) %7B%0A  return hx%60%0A    %3Ctable class=fancy%3E%0A      $%7Bprops.children%7D%0A    %3C/table%3E%0A  %60%0A%7D%0A%0A
 var titl
@@ -964,28 +964,52 @@
 %0A  %3C
-table%3E$%7Bfrag%7D%3C/t
+$%7BFancyTable%7D%3E%0A    $%7Bfrag%7D%0A  %3C/$%7BFancyT
 able
+%7D
 %3E%0A%3C/

Add custom component example