UEle - Tiny UI Reactive library

Kethan — Mon, 07 Nov 2022 04:55:49 +0000

A tiny reactive frontend library.

It has the following features for less than 1K GZip.

Small.
Fast and Simple API
JSX
Fragment
Components
SVG
Refs
Style Maps
Lazy Components
Promise support out of box
AscynIterable
Rxjs Subscribe
Control Flow Components - If, For, Show
Extend with any reactive library - effect, memo, is, get

Simple Counter example to play with - https://stackblitz.com/edit/vitejs-vite-rs9chm?file=main.jsx&terminal=dev

import * as React from 'uele';
import { api } from 'uele';
import { o, effect, memo } from 'ulive';

// ulive settings
api.effect = effect;
api.memo = memo;
api.is = (v) => v.$o;
api.get = (v) => v();

const count = o(0);
const inc = () => count(count() + 1);
const dec = () => count(count() - 1);

const Counter = () => {
  let square = memo(() => count() * count());
  let cube = memo(() => square() * count());
  effect(() => console.log(count(), square(), cube()));
  return (
    <div>
      <div>
        Count: {count} {square} {cube}
      </div>
      <button onclick={inc}>+</button>
      <button onclick={dec}>-</button>
    </div>
  );
};

document.body.appendChild(<Counter />);

DEV Community: Kethan

UEle - Tiny UI Reactive library