luwes / little-vdom Goto Github PK

// Adapted and fixed bugs from little-vdom.js
// https://gist.github.com/developit/2038b141b31287faa663f410b6649a87

import { h, Fragment, render } from 'https://unpkg.com/@luwes/[email protected]/dist/little-vdom.js';

/** @jsx h */

// Components get passed (props, state, setState)
function Counter(props, { count = 0 }, update) {
  const increment = () => update({ count: ++count });
  return <button onclick={increment}>{count}</button>
}

function Since({ time }, state, update) {
  setTimeout(update, 1000); // update every second
  const ago = (Date.now() - time) / 1000 | 0;
  return <Fragment><h1>Since: </h1><time>{ago}s ago</time></Fragment>
}

function App(props, {visible=true}, update) {
  setTimeout(() => update({visible: false}), 3000)
  return <div id="app">
    <h1>Hello</h1>
      {visible ? <Since time={Date.now()} /> : false}
    <Counter />
  </div>
}

render(
  <App />,
  document.body
);