UMAI, a refreshing inspired by MithrilJS and HyperApp, library

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

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

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

/** @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 };

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

mount(document.body, App)