xuijs
v2.0.0
Published
A javascript runtime library for creating reactive user interfaces.
Downloads
6
Readme
Xuijs
A javascript runtime library for creating reactive user interfaces.
features
Xuijs is a set of tools that makes it so easy to add reactivity to your UIs.
- no vdom
- very lightweight.
- very fast.
- unopinionated.
- extendable to infinity.
usage
- download the package using npm.
$ npm i xuijs
- define the App.
import { Xui } from 'xuijs';
const App = new Xui();
App.init(document.body);- define an element.
// index.js
import { XuiElement, Variable } from 'xuijs';
export class Ticker extends XuiElement {
constructor(el) {
super(el);
this.ticks = new Variable(0);
this.state = new Variable(false);
}
getTicks(ticks) {
return `${ticks}`;
}
resetTicks() {
this.ticks.value = 0;
}
getState(state) {
return state ? 'stop' : 'start';
}
switchState() {
if (this.state.value) {
window.clearInterval(this.ticker);
} else {
this.ticker = window.setInterval(() => this.ticks.value++, 1000);
}
this.state.value = !this.state.value;
}
}- use the element.
<body>
<div $init mount=":Ticker">
<span $bind:.inner-text="ticks@getTicks">0</span>
<div $init>
<button $event:click="@switchState" $bind:.inner-text="state@getState">
start
</button>
<button $event:click="@resetTicks">reset</button>
</div>
</div>
</body>- bundle with your favourite bundeler.
docs
see docs/ folder for more details.
examples
see examples/ folder for example projects.