DEV Community

Kethan
Kethan

Posted on

UEle - Tiny UI Reactive library

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 />);
Enter fullscreen mode Exit fullscreen mode

Top comments (1)

Collapse
 
kacemm profile image
kassem

hey @kethan you should check enhance.dev/ and arrow-js.com/