lloydzhou / little-vdom

🍼 1.4k none dependency React like library with hooks - Use reactive JSX with minimal overhead

🍼 little-vdom

Forked from developit's little-vdom gist.

cdn: cdn.jsdelivr.net/gh/lloydzhou/little-vdom

---

• 1.4k none dependency React like library with hooks
• Components
• Hooks
  • useState
  • useReducer
  • useRef
  • useMemo
  • useEffect
  • useLayoutEffect
  • useCallback
  • createContext
  • useContext
• State
• Diffing
• Keys
• Fragments
• Refs
• Style maps

Use reactive JSX with minimal overhead.

Usage (Codepen)

/** @jsx h */
/** @jsxFrag Fragment */

// functional component using hooks
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'))

little-vdom's Issues

hook

1. change component like react function component
2. add useState hook

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

--> 
function Counter(props) {
  const [count, setCount] = useState(0)
  const increment = () => setCount(count + 1);
  return <button onclick={increment}>{count}</button>
}