DEV Community

artydev
artydev

Posted on • Edited on

1

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

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

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

Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

main.js

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

mount(document.body, App)
Enter fullscreen mode Exit fullscreen mode

DEMO

AWS GenAI LIVE image

How is generative AI increasing efficiency?

Join AWS GenAI LIVE! to find out how gen AI is reshaping productivity, streamlining processes, and driving innovation.

Learn more

Top comments (0)

Billboard image

Create up to 10 Postgres Databases on Neon's free plan.

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Try Neon for Free →

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay