https://github.com/0xc0Der/xuijs

A javascript runtime library for creating reactive user interfaces.
https://github.com/0xc0Der/xuijs

library reactive runtime ui

Last synced: 3 months ago
JSON representation

A javascript runtime library for creating reactive user interfaces.

• Host: GitHub
• URL: https://github.com/0xc0Der/xuijs
• Owner: 0xc0Der
• License: mit
• Created: 2021-10-10T12:27:25.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2022-03-01T17:12:42.000Z (almost 3 years ago)
• Last Synced: 2024-10-02T08:45:50.140Z (4 months ago)
• Topics: library, reactive, runtime, ui
• Language: JavaScript
• Homepage:
• Size: 43 KB
• Stars: 7
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

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

1. download the package using npm.

```bash

$ npm i xuijs

```

2. define the App.

```js

import { Xui } from 'xuijs';

const App = new Xui();

App.init(document.body);

```

3. define an element.

```js

// 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;

  }

}

```

4. use the element.

```html

  


    0

    


      

        start

      

      reset

    

  


```

5. bundle with your favourite bundeler.

# docs

see [docs/](https://github.com/0xc0Der/xuijs/tree/main/docs 'docs/') folder for more details.

# examples

see [examples/](https://github.com/0xc0Der/xuijs/tree/main/examples 'examples/') folder for example projects.