Package Exports
- xou
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (xou) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
A tiny library for building simple component based UIs with template literals. It offers the same features as yo-yo but is a bit smaller.
Xou is powered by hyperx and nanomorph.
Features
- Tagged template literals
- Diffing on real dom nodes
- Tiny at just 4kb
Install
$ npm install xouUsage
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);API
xou``
A tagged template literal returning dom nodes
Example
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(oldNode, newNode)
xou.update diffs an old and a new dom node. The changes will be applied to oldNode.
Example
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);Other Modules
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.
License
MIT © Tobias Herber