https://github.com/herber/xou

⏳🚀 A rocket fast library for building component based UIs.
https://github.com/herber/xou

dom dom-diffing tagged-template-literals ui ui-components

Last synced: 4 months ago
JSON representation

⏳🚀 A rocket fast library for building component based UIs.

• Host: GitHub
• URL: https://github.com/herber/xou
• Owner: herber
• License: mit
• Created: 2018-01-03T15:48:45.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2022-12-07T10:17:49.000Z (about 2 years ago)
• Last Synced: 2024-10-06T11:52:35.319Z (4 months ago)
• Topics: dom, dom-diffing, tagged-template-literals, ui, ui-components
• Language: JavaScript
• Homepage:
• Size: 903 KB
• Stars: 5
• Watchers: 2
• Forks: 0
• Open Issues: 25
• Metadata Files:
  • Readme: readme.md
  • License: license

Awesome Lists containing this project

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](https://bundlephobia.com/result?p=xou)

## Install

```

$ npm install xou

```

## Usage

```js

const xou = require('xou');

const time = xou`Time: ${ (new Date()).toUTCString() }`;

document.body.appendChild(time);

setInterval(() => {

  const newTime = xou`Time: ${ (new Date()).toUTCString() }`;

  xou.update(time, newTime);

}, 1000);

```

## API

### xou\`\`

A tagged template literal returning dom nodes

#### Example

```js

const node = xou`


  
Hello from xou

  
Xou on github

`;


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

```js

const hello = xou`Hello! { update(); } }>Update`;

const update = () => {

  const hi = xou`Hi!`;

  xou.update(hello, hi);

}

document.body.appendChild(hello);

```

## Other Modules

This whole thing is powered by [`hyperx`](https://github.com/choojs/hyperx) and [`nanomorph`](https://github.com/choojs/nanomorph) - two tiny but really great packages.

This module is heavily inspired by [`yo-yo`](https://github.com/maxogden/yo-yo) - `xou` is basically a smaller alternative to `yo-yo`.

Xou pairs really well with [`vxv`](https://github.com/herber/vxv) for styles and [`nation`](https://github.com/herber/nation) for state management.

## License

MIT © [Tobias Herber](http://tobihrbr.com)