µbe

^{Original Social Media Photo by JOSE LARRAZOLO on Unsplash}

A builtin-elements based µce alternative:

• based on µhtml engine
• requires zero polyfills and it doesn't need a registry
• works SSR too (islands out of the box)
• roughly 4KB once minified and gzipped

// Some Builtin definition example
import {HTML, render, html} from 'ube';

export default class Div extends HTML.Div {
  upgradedCallback() {
    const {hello} = this.dataset;
    render(this, html`Hello <strong>${hello}</strong> 👋`);
    // this.textContent and this.innerHTML work too
  }
}


// Some rendering
import {render, html} from 'ube';
import Div from './div-component.js';

render(document.body, html`<${Div} data-hello="µbe" />`);

Companions

• µhtml-intents
• µhooks

Live Demo

import {HTML, render, html} from 'ube';
import {hooked, useState} from 'uhooks';

class Div extends HTML.Div {
  upgradedCallback() {
    this.render = hooked(this.render);
    this.render();
  }
  render() {
    const [count, update] = useState(0);
    render(this, html`
      <button @click=${() => update(count + 1)}>
        Clicked ${count} times
      </button>
    `);
  }
}

render(document.body, html`Click test <${Div} />`);

Previous Work / Similar Libraries

• kaboobie is the most similar project, but the elements lifecycle is different, as these are replaced once discovered, while builtin-elements are real builtin elements with Custom Elements super power, hence more portable, and SSR compatible
• µland, at the core of kaboobie, is the one that inspired me the most
• wicked-elements and hooked-elements also work in a similar way, and each element can have multiple definitions, but it requires a registry