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" />`);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} />`);- 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