<ceb/>
was initially a library dedicated for the authoring of Custom Elements (v0) then Custom Elements (v1). However, the library is now providing building blocks going beyond the topic of composable UI elements. It's about fundamental design principles, messaging, functional rendering and obviously composition of UI elements ;).
import {
ElementBuilder,
FieldBuilder,
html,
TemplateBuilder
} from "@tmorin/ceb-bundle-web";
// register the custom element
@(ElementBuilder.get().decorate())
export class SimpleGreeting extends HTMLElement {
// defines a field `name`
// which is available as an attribute or a property
@(FieldBuilder.get().decorate())
name: string = "World";
// reacts on the mutations of the field `name`
// so that new name will be rendered
@(FieldBuilder.get().decorate())
private onName() {
this.render();
}
// defines the content of the custom element
// each time the method is inovked, the template is rendered
@(TemplateBuilder.get().preserveContent().decorate())
private render() {
return html`<h1>Hello, ${this.name}!</h1>`;
}
}
<simple-greeting name="John Doe"/>
The library is composed of many packages.
The packages related to the definition of Custom Elements (v1):
A built-in implementation of a templating system:
A built-in implementation of the Inversion of Control principle:
- ceb-inversion-core
- ceb-inversion-builder
- ceb-inversion-testing-core
- ceb-inversion-testing-jest
- ceb-inversion-testing-mocha
A built-in implementation of the Event/Message architecture:
- ceb-messaging-core
- ceb-messaging-inversion
- ceb-messaging-moleculer
- ceb-messaging-moleculer-inversion
- ceb-messaging-simple
- ceb-messaging-simple-builder
- ceb-messaging-builder-core
- ceb-messaging-builder-inversion
- ceb-messaging-adapter-dom
- ceb-messaging-adapter-electron
- ceb-messaging-adapter-purify
- ceb-messaging-testing
Bundles:
- ceb-bundle-web : a bundle of
ceb-elements-core
,ceb-elements-builders
,ceb-templating-builder
andceb-templating-literal
The helper packages:
Released under the MIT license.