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 bel and nanomorph which both also power the choo framework.
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);Examples
Other Modules
This whole thing is powered by bel and nanomorph - two tiny but really awesome 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.
Xou does not force you to use any specific module for styles or state management so you can use whatever modules you want or no other modules at all.
License
MIT © Tobias Herber