https://github.com/luwes/little-vdom

🍼 650B Virtual DOM - Use reactive JSX with minimal overhead
https://github.com/luwes/little-vdom

jsx vdom

Last synced: 6 days ago
JSON representation

🍼 650B Virtual DOM - Use reactive JSX with minimal overhead

• Host: GitHub
• URL: https://github.com/luwes/little-vdom
• Owner: luwes
• Created: 2022-01-16T17:16:14.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2024-02-21T13:46:33.000Z (11 months ago)
• Last Synced: 2024-12-20T00:02:50.034Z (23 days ago)
• Topics: jsx, vdom
• Language: JavaScript
• Homepage:
• Size: 476 KB
• Stars: 100
• Watchers: 3
• Forks: 3
• Open Issues: 3
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 🍼 little-vdom

> Forked from developit's [little-vdom](https://gist.github.com/developit/2038b141b31287faa663f410b6649a87) gist.

**npm**: `npm i @luwes/little-vdom`  

**cdn**: [unpkg.com/@luwes/little-vdom](https://unpkg.com/@luwes/little-vdom)  

---

- 650B Virtual DOM

- Components

- State

- Diffing

- Keys

- Fragments

- Refs

- Style maps

Use reactive JSX with minimal overhead.

## Usage ([Codepen](https://codepen.io/luwes/pen/ZEXPbzE?editors=0011))

```jsx

/** @jsx h */

// Components get passed (props, state, setState)

function Counter(props, { count = 0 }, update) {

  const increment = () => update({ count: ++count });

  return {count}

}

function Since({ time }, state, update) {

  setTimeout(update, 1000); // update every second

  const ago = (Date.now() - time) / 1000 | 0;

  return {ago}s ago

}

render(

  


    
Hello

    

    

  
,

  document.body

);

```