{"id":20513781,"url":"https://github.com/webreflection/ube","last_synced_at":"2025-04-14T00:01:28.390Z","repository":{"id":57384363,"uuid":"366320076","full_name":"WebReflection/ube","owner":"WebReflection","description":"A builtin-elements based µce alternative.","archived":false,"fork":false,"pushed_at":"2021-06-29T08:30:48.000Z","size":205,"stargazers_count":30,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-27T14:11:08.623Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"isc","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/WebReflection.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-05-11T09:04:06.000Z","updated_at":"2024-07-06T01:03:20.000Z","dependencies_parsed_at":"2022-09-01T04:02:03.901Z","dependency_job_id":null,"html_url":"https://github.com/WebReflection/ube","commit_stats":null,"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WebReflection%2Fube","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WebReflection%2Fube/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WebReflection%2Fube/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WebReflection%2Fube/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/WebReflection","download_url":"https://codeload.github.com/WebReflection/ube/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248799931,"owners_count":21163403,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-15T21:13:07.849Z","updated_at":"2025-04-14T00:01:28.282Z","avatar_url":"https://github.com/WebReflection.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# µbe\n\n![lego board with µbe logo](./ube.jpg)\n\n\u003csup\u003e**Original Social Media Photo by [JOSE LARRAZOLO](https://unsplash.com/@joseadd) on [Unsplash](https://unsplash.com/)**\u003c/sup\u003e\n\nA [builtin-elements](https://github.com/WebReflection/builtin-elements#readme) based [µce](https://github.com/WebReflection/uce#readme) alternative:\n\n  * based on [µhtml](https://github.com/WebReflection/uhtml#readme) engine\n  * requires zero polyfills and it doesn't need a registry\n  * works **[SSR](https://github.com/WebReflection/ube-ssr)** too (*islands out of the box*)\n  * roughly *4KB* once minified and gzipped\n\n```js\n// Some Builtin definition example\nimport {HTML, render, html} from 'ube';\n\nexport default class Div extends HTML.Div {\n  upgradedCallback() {\n    const {hello} = this.dataset;\n    render(this, html`Hello \u003cstrong\u003e${hello}\u003c/strong\u003e 👋`);\n    // this.textContent and this.innerHTML work too\n  }\n}\n\n\n// Some rendering\nimport {render, html} from 'ube';\nimport Div from './div-component.js';\n\nrender(document.body, html`\u003c${Div} data-hello=\"µbe\" /\u003e`);\n```\n\n## Companions\n\n  * [µhtml-intents](https://github.com/WebReflection/uhtml-intents#readme)\n  * [µhooks](https://github.com/WebReflection/uhooks#readme)\n\n**[Live Demo](https://codepen.io/WebReflection/pen/gOmaXrZ?editors=0010)**\n\n```js\nimport {HTML, render, html} from 'ube';\nimport {hooked, useState} from 'uhooks';\n\nclass Div extends HTML.Div {\n  upgradedCallback() {\n    this.render = hooked(this.render);\n    this.render();\n  }\n  render() {\n    const [count, update] = useState(0);\n    render(this, html`\n      \u003cbutton @click=${() =\u003e update(count + 1)}\u003e\n        Clicked ${count} times\n      \u003c/button\u003e\n    `);\n  }\n}\n\nrender(document.body, html`Click test \u003c${Div} /\u003e`);\n```\n\n## Previous Work / Similar Libraries\n\n  * [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\n  * [µland](https://github.com/WebReflection/uland#readme), at the core of *kaboobie*, is the one that inspired me the most\n  * [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\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebreflection%2Fube","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwebreflection%2Fube","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebreflection%2Fube/lists"}