⏳🚀 A rocket fast library for building component based UIs.
MIT License
$ npm install xou
const xou = require('xou');
const time = xou`<span>Time: ${ (new Date()).toUTCString() }</span>`;
document.body.appendChild(time);
setInterval(() => {
const newTime = xou`<span>Time: ${ (new Date()).toUTCString() }</span>`;
xou.update(time, newTime);
}, 1000);
A tagged template literal returning dom nodes
const node = xou`<div>
<h1>Hello from xou</h1>
<p>Xou on <a href="https://github.com/herber/xou">github</a></p>
</div>`;
document.body.appendChild(node);
xou.update
diffs an old and a new dom node. The changes will be applied to oldNode
.
const hello = xou`<span>Hello!<button onclick=${ () => { update(); } }>Update</button></span>`;
const update = () => {
const hi = xou`<span>Hi!</span>`;
xou.update(hello, hi);
}
document.body.appendChild(hello);
This whole thing is powered by hyperx
and nanomorph
- two tiny but really great packages.
This module is heavily inspired by yo-yo
- xou
is basically a smaller alternative to yo-yo
.
Xou pairs really well with vxv
for styles and nation
for state management.
MIT © Tobias Herber