I spent 6 days building my VDOM library as I hated how React handles memo
Key takeaways
- A lightweight alternative to React in pure Java Script (ES6+) with its own virtual DOM and philosophy of minimalism.
- npm install tyaff Quick start import { h, Component, mount } from 'tyaff'; const Counter = Component({ count: 0, increment() { this.update({ count: this.count + 1 });
A lightweight alternative to React in pure Java Script (ES6+) with its own virtual DOM and philosophy of minimalism.
npm install tyaff Quick start import { h, Component, mount } from 'tyaff'; const Counter = Component({ count: 0, increment() { this.update({ count: this.count + 1 }); }, render() { return h('div', null, h('p', null, 'Counter: ' + this.count), h('button', { on Click: this.increment }, '+') ); } }); mount(Counter, document.get Element By Id('app')); Example: components with context const ThemeProvider = Component({ theme: 'light', context: { theme() { return this.theme; }, toggleTheme() { this.theme = this.theme === 'light' ? 'dark' : 'light'; this.update(); } }, render() { return h('div', null, this.props.children); } }); const ThemedButton = Component({ render() { const theme = this.context('theme'); return h('button', { className: 'btn-' + theme }, 'Button'); } }); mount( h(ThemeProvider, null, h(ThemedButton) ), document.body ); Example: global store // store.js export const store = { count: 0 }; // app.js import { store } from './store.js'; import { h, Component, mount, refresh } from 'tyaff'; const Counter = Component({ render() { return h('div', null, 'Count: ', store.count); } }); mount(Counter, document.getElementById('app')); // Update store.count = 55; await refresh(); // all components will re-read the store Resources Documentation — full API description, usage examples, lifecycle, context, portals, optimizations Live example — interactive demo in the browser Benchmark — performance comparison tyaff vs React (14 scenarios) Changelog — what’s new in the project Acknowledgments This project is a showcase of human-AI collaboration: