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