tmorin / ceb

<ceb/> is a library providing building blocks to develop Custom Elements (v1). Additionally, other building blocks are also provided to cover the implementation of web applications based on the Event/Message Architecture.

<ceb/> ~ custom-element-builder

<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 ;).

Quickly

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"/>

Packages

The library is composed of many packages.

The packages related to the definition of Custom Elements (v1):

• ceb-elements-core
• ceb-elements-builders
• ceb-elements-testing

A built-in implementation of a templating system:

• ceb-templating-builder
• ceb-templating-engine
• ceb-templating-literal
• ceb-templating-parser

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 and ceb-templating-literal

The helper packages:

• ceb-utilities

License

Released under the MIT license.