https://github.com/webreflection/ube
A builtin-elements based µce alternative.
https://github.com/webreflection/ube
Last synced: over 1 year ago
JSON representation
A builtin-elements based µce alternative.
- Host: GitHub
- URL: https://github.com/webreflection/ube
- Owner: WebReflection
- License: isc
- Created: 2021-05-11T09:04:06.000Z (about 5 years ago)
- Default Branch: main
- Last Pushed: 2021-06-29T08:30:48.000Z (about 5 years ago)
- Last Synced: 2025-03-27T14:11:08.623Z (over 1 year ago)
- Language: JavaScript
- Size: 200 KB
- Stars: 30
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# µbe
**Original Social Media Photo by [JOSE LARRAZOLO](https://unsplash.com/@joseadd) on [Unsplash](https://unsplash.com/)**
A [builtin-elements](https://github.com/WebReflection/builtin-elements#readme) based [µce](https://github.com/WebReflection/uce#readme) alternative:
* based on [µhtml](https://github.com/WebReflection/uhtml#readme) engine
* requires zero polyfills and it doesn't need a registry
* works **[SSR](https://github.com/WebReflection/ube-ssr)** too (*islands out of the box*)
* roughly *4KB* once minified and gzipped
```js
// 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 ${hello} 👋`);
// 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](https://github.com/WebReflection/uhtml-intents#readme)
* [µhooks](https://github.com/WebReflection/uhooks#readme)
**[Live Demo](https://codepen.io/WebReflection/pen/gOmaXrZ?editors=0010)**
```js
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`
update(count + 1)}>
Clicked ${count} times
`);
}
}
render(document.body, html`Click test <${Div} />`);
```
## Previous Work / Similar Libraries
* [kaboobie](https://github.com/WebReflection/kaboobie/#readme) 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](https://github.com/WebReflection/uland#readme), at the core of *kaboobie*, is the one that inspired me the most
* [wicked-elements](https://github.com/WebReflection/wicked-elements#readme) and [hooked-elements](https://github.com/WebReflection/hooked-elements#readme) also work in a similar way, and each element can have multiple definitions, but it requires a registry