uchcode
7/1/2018 - 8:30 PM

vdom().tag('h1', {}, 'hello vdom').toBody() ref: https://qiita.com/tom-u/items/6ab460cc9d9b12cbb4eb

vdom().tag('h1', {}, 'hello vdom').toBody() ref: https://qiita.com/tom-u/items/6ab460cc9d9b12cbb4eb

hello-vdom.html
content_copyfile_download
<!DOCTYPE html>
<html lang="en">
<head>
<title>Counter</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<style>

body {
  touch-action: manipulation;
}

</style>

<script type="module">

import * as superfine from 'https://unpkg.com/superfine?module'

export class Vdom {
  constructor() {
    this.domtree = []
  }
  t(name, attributes, children) {
    this.domtree.push(superfine.h(name, attributes, children instanceof Vdom ? children.domtree : children))
    return this
  }
  tag(name, attributes, children) {
    return this.t(name, attributes, children)
  }
  render(lastNode, container) {
    return nextNode => {
      lastNode = superfine.render(lastNode, nextNode, container)
    }
  }
  view() {
    return (()=>superfine.h('div',{},this.domtree))()
  }
  to(container) {
    this.render(null,container)(this.view())
  }
  toBody() {
    this.to(document.body)
  }
}

export const vdom = () => new Vdom()

vdom().tag('h1', {}, 'hello vdom').toBody()

vdom()
  .t('h2', {}, 'hello vdom.')
  .t('h3', {}, 'hello vdom.')
  .t('div', {}, 
    vdom()
      .t('h4', {}, 'hello vdom.')
      .t('h5', {}, 'hello vdom.')
      .t('div', {}, 'good bye.')
  )
  .to(document.getElementById('container'))

</script>

</head>
<body>
<div id="container"></div>
</body>
</html>