import vdom   from 'virtual-dom'
import hyperx from 'hyperx'

const hx = hyperx(vdom.h)

const title = 'world'
const wow = [ 1, 2, 3 ]
const 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>${w}</b>\n`
  })}
</div>`

console.log(vdom.create(tree).toString())

import React              from 'react'
import { renderToString } from 'react-dom/server'
import hyperx             from 'hyperx'

const 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))
  }
})

const title = 'world'
const wow = [ 1, 2, 3 ]
const frag = hx`
  <tr> <td>row1</td> </tr>
  <tr> <td>row2</td> </tr>
`

const 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>${w}</b>\n`
  })}

  <table>${frag}</table>
</div>`

console.log(renderToString(tree))

import h      from 'hyperscript'
import hyperx from 'hyperx'

const hx = hyperx(h)

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

console.log(tree.outerHTML)

import vdom   from 'virtual-dom'
import hyperx from 'hyperx'
import main   from 'main-loop'

const hx = hyperx(vdom.h)

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

function render (state) {
  return hx`<div>
    <h1>clicked ${state.times} times</h1>
    <button onclick=${onclick}>click me!</button>
  </div>`

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

import React from 'react'
import { render } from 'react-dom'
import hyperx from 'hyperx'

const hx = hyperx(React.createElement)

const App = React.createClass({
  getInitialState: function () { return { n: 0 } },
  render: function () {
    return hx`<div>
      <h1>clicked ${this.state.n} times</h1>
      <button onClick=${this.handleClick}>click me!</button>
    </div>`
  },
  handleClick: function () {
    this.setState({ n: this.state.n + 1 })
  }
})

render(React.createElement(App), document.querySelector('#content'))

import hyperx from 'hyperx'

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

convertTaggedTemplateOutputToDomBuilder`<h1>hello world</h1>`

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

import hyperx from 'hyperx'