Xuijs NPM | npm.io

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>