uland

🦄 µland

^{Social Media Photo by Ben Klea on Unsplash}

micro land, or unicorn land, is a µhtml take at neverland.

Same API, except the exports are {Component, render, html, svg}, where Component is a function you can use either as new Component(...) or just Component(...) which is the equivalent of neverland default export.

API

The concept is exactly the same as the neverland one.

Live demo.

import {Component, render, html, useState} from 'uland';

const Counter = Component((initialState) => {
  const [count, setCount] = useState(initialState);
  return html`
  <button onclick=${() => setCount(count + 1)}>
    Count: ${count}
  </button>`;
});

// basic example, show two independent counters
render(document.body, html`
  <div>
    A bounce of counters.<hr>
    ${Counter(0)} ${Counter(1)}
  </div>
`);

Please check neverland to know more about this module usage.

Differences

In version 0.3, µland can return conditional templates.

const Rando = Component(url => {
  const {data, error} = useSWR(url, fetcher);
  if (error) return html`<div>failed to load</div>`;
  if (!data) return html`<div>loading...</div>`;
  return html`<div>${data.title}</div>`;
});

Once proven to be useful and robust, this feature will be ported to neverland too, otherwise these are basically the same.

Technically speaking, just the following one:

// neverland
import {neverland, render, html, useState} from 'neverland';

// uland
import {Component, render, html, useState} from 'uland';

The component is a function you can invoke ether via new Component or just Component, as it doesn't matter how you invoke it, it'll return a usable component.

Practically speaking, this module size is ~5K all inclusive, as opposite of ~7.5K.