xou

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 xou

Usage

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