UEle - Tiny UI Reactive library

#webdev #react #signals #javascript

A tiny reactive frontend library.

UEle - https://github.com/kethan/uele

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