🍼 little-vdom

Forked from developit's little-vdom gist.

npm: npm i @luwes/little-vdom
cdn: unpkg.com/@luwes/little-vdom

• 650B Virtual DOM
• Components
• State
• Diffing
• Keys
• Fragments
• Refs
• Style maps

Use reactive JSX with minimal overhead.

Usage (Codepen)

/** @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 <time>{ago}s ago</time>
}

render(
  <div id="app">
    <h1>Hello</h1>
    <Since time={Date.now()} />
    <Counter />
  </div>,
  document.body
);