UMAI, a refreshing inspired by MithrilJS and HyperApp, library

One little thing I have always found annoying in Mithril is returning view methods in components.

UmaiJS is heavily inspired by MithrilJS, no views, no hooks, no signals.
Components can easily be refrenced.

For side projects, it is very nice.

import { m, mount } from 'umai';

let count = 0;

const Counter = () => (
  <div>
    <div>Counter : {count}</div>
    <button  onclick={() => count++}>INC</button>
  </div>
);

mount(document.body, Counter);

You can play with it here : Demo

Here is demo of statefull components:

const Counter = () => {
  let count = 0;
  return () => 
      <div>
        <div>Counter : {count}</div>
        <button  onclick={() => count++}>
          INC
        </button>
      </div>
};

const App  = () => (
  <div>
    {[...Array(5)].map(() => <Counter />)}
  </div>

)
mount(document.body, App);

Demo

Reference elements in UMAI :

/** @jsx m */

import { m, mount, redraw } from 'umai';

let count = 0;
const MAX = 5 

const qs = (elt) => (selector) => elt.querySelector(selector);
const bindClickEvt = (elt, handler) => elt.addEventListener("click", handler);
const incBy = (value) => () => count += value;

const ref_counter = (counter_elt) => {

  const $ = qs(counter_elt);

  const [binc, bdec, title] = [".inc", ".dec", ".title"].map($);

  let setTitleColor = (color) => title.style.color = color;

  bindClickEvt(binc, incBy(1));
  bindClickEvt(bdec,  incBy(-1));
  bindClickEvt(counter_elt, () => {
    count > MAX ? setTitleColor("blue") : setTitleColor("red");
    redraw();
  })
};

const Counter = () => (
  <div dom={ref_counter}>
    <div class="title">Counter : {count}</div>
    <button class="inc">INC</button>
    <button class="dec">DEC</button>
  </div>
);

mount(document.body, Counter);

demo

Simulate fetching data :

articles.js

/** @jsx m */

import { m, mount, redraw } from "umai";

function sleep(ms) {
  return new Promise((res) => {
    setTimeout(res, ms);
  });
}

async function getArticles() {
  await sleep(State.delay);
  return  ([
    { id: 1, title: "Titre1" },
    { id: 2, title: "Titre2" },
    { id: 3, title: "Titre3" },
  ]);
}

let State = {
  articles: [],
  delay: 2000,
};

function saveArticles (articles) {
  State.articles = articles;
}

function clearArticles () {
  State.articles = [];
  redraw ();
}

async function fetchHN(node) {
  let loader = node.querySelector(".loader");
  loader.style.display = "block";
  clearArticles ();
  try {
    let articles = await getArticles();
    saveArticles(articles);
  } catch (error) {
    console.error("Failed to fetch articles:", error);
  } finally {
    loader.style.display = "none";
    redraw();
  }
}

const Articles = () => {
  return (
    <ul>
      {State.articles.map((a) => (
        <li>{a.title}</li>
      ))}
    </ul>    
  )
}

const Timer = () => {
  return (
    <div>
      <span>delay fetch for : </span>
      <input
        type="number"
        value={State.delay}
        oninput={(e) => {
          State.delay = +e.target.value;
        }}
      />  
      <span> ms</span>
    </div>
  )
}

const Loader = () => {
  return (
    <div class="loader" style="display:none">
      Loading...
    </div>    
  )
}

function setup(node) {
  let btnLoader = node.querySelector("button");
  btnLoader.style.display = 'block';
  btnLoader.addEventListener("click", () => fetchHN(node));
}

const App = () => (
  <div dom={setup}>
    <Timer />
    <button>Load Articles</button>
    <Loader />
    <Articles />
  </div>
);

export { App };

main.js

import { mount } from 'umai';
import { App } from './articles.js'

mount(document.body, App)

DEMO