hook about little-vdom

[lloydzhou]

1. add writable like svelte/store
2. change render function
3. add hook

[lloydzhou]

<div id="root" />
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/jsx" data-type="module">
/** @jsx h */
/** @jsxFrag Fragment */

import { h, Fragment, render, useState, useEffect, useRef } from "./little-vdom.js";

function Since({ time }) {
  const [count, setCount] = useState()
  const r = useRef()
  useEffect(() => {
    console.log('update', r.current)
    const timer = setTimeout(() => {
      setCount(count + 1) // update every second
    }, 1000)
    return () => clearTimeout(timer)
  }, [count])
  useEffect(() => {
    console.log('mounted', r, r.current)
    return () => {
      console.log('unmounted')
    }
  }, [])
  const ago = (Date.now() - time) / 1000 | 0;
  return (
    <>
      <h1>Title</h1>
      <time ref={r}>{ago}s ago</time>
    </>
  )
}

function App() {
  const [visible, setVisible] = useState(true)
  useEffect(() => {
    setTimeout(() => setVisible(false), 3000)
  }, [])
  return <div>{visible ? <Since time={Date.now()} /> : <div>clear</div>}</div>
}

render(<App />, document.querySelector('#root'))
</script>