How to use

h

function

in

react-hyperscript

function main () {
 render(h(App, {
  model: model
 }), screen)
}

const App = props => {
 return h(List, {
  items: props.model.items,
  index: props.model.index
 })
}

fs.outputFile(
 path.resolve("output/index.html"),
 rds.renderToStaticMarkup(h(Page, {title: "Hello World!"})),
 () => console.log("Done!")
);

render () {
  let {index} = this.props
  let items = this.props.items.map((item, idx) => {
   return h('li', {
    style: {
     color: idx === index ? '#C12127' : '#444'
    }
   }, item)
  })

  return h('ul', items)
 }

const Page = props => (
 h("html", {lang: "en"}, [
  h("head", [
   h("title", props.title),
   h("meta", {charSet: "utf-8"}),
   h("style", "html {font-family: sans-serif}")
  ]),
  h("body", [
   h("h1", props.title),
   h("p", "React without toolchains is a breeze! 🍃"),
  ]),
 ])
)

render () {
  let {items} = this.props
  return h('list', {
   ref: 'list',
   top: 0,
   left: 0,
   width: 40,
   height: 20,
   border: {
    type: 'line'
   },
   style: {
    border: {
     fg: 'white'
    },
    item: {
     fg: 'auto',
     bg: 'black'
    },
    selected: {
     fg: 'auto',
     bg: 'grey'
    }
   },
   items: items
  })
 }

const App = props => {
 return h(List, {
  items: props.model.items,
  index: props.model.index
 })
}

function main () {
 render(h(App, {
  model: model
 }), body)
}