mildred/test-citojs.html

## test-citojs.html
<html>
  <head>
    <meta charset="utf-8"/>
    <script src="citojs/dist/cito.js"></script>
    <script>
window.addEventListener('load', function(){

  var items = [
    {tag: 'li', children: 'text'}
  ];

  function doubleList() {
    items = items.concat(items);
    cito.vdom.update(rootNode, root);
  }

  function button() {
    return {
      tag: 'button',
      attrs: {title: 'double the list'},
      events: {click: doubleList},
      children: 'double'
    }
  }

  function clock(){
    function render(oldDOM){
      console.log(oldDOM)
      return {
        tag: 'strong',
        children: (new Date()).toString(),
        events: {
          $destroyed: clear
        }
      }
    }

    var i = setInterval(tick, 1000)
    function tick(){
      cito.vdom.update(dom, render)
    }

    function clear(){
      console.log("clear")
      clearInterval(i)
    }

    var dom = render()
    return dom
  }

  function root() {
    return {
      tag: 'div', children: [
        {tag: 'p', children: clock()},
        button,
        {tag: 'ul', children: items},
        "FIXME: clicking on the button does not clear interval"
      ]
    };
  }

  var rootNode = cito.vdom.append(document.body, root);
  console.log(rootNode)
})
    </script>
  </head>
  <body>
  </body>
</html>
	<html>
	<head>
	<meta charset="utf-8"/>
	<script src="citojs/dist/cito.js"></script>
	<script>
	window.addEventListener('load', function(){

	var items = [
	{tag: 'li', children: 'text'}
	];

	function doubleList() {
	items = items.concat(items);
	cito.vdom.update(rootNode, root);
	}

	function button() {
	return {
	tag: 'button',
	attrs: {title: 'double the list'},
	events: {click: doubleList},
	children: 'double'
	}
	}

	function clock(){
	function render(oldDOM){
	console.log(oldDOM)
	return {
	tag: 'strong',
	children: (new Date()).toString(),
	events: {
	$destroyed: clear
	}
	}
	}

	var i = setInterval(tick, 1000)
	function tick(){
	cito.vdom.update(dom, render)
	}

	function clear(){
	console.log("clear")
	clearInterval(i)
	}

	var dom = render()
	return dom
	}

	function root() {
	return {
	tag: 'div', children: [
	{tag: 'p', children: clock()},
	button,
	{tag: 'ul', children: items},
	"FIXME: clicking on the button does not clear interval"
	]
	};
	}

	var rootNode = cito.vdom.append(document.body, root);
	console.log(rootNode)
	})
	</script>
	</head>
	<body>
	</body>
	</html>