ElementBuilder

The builder handles the definition and the registration of a Custom Element.

By default, the builder relies on the constructor to infer the tag name of the Custom Element, c.f. ElementBuilder.name.

If the Custom Element is a specialization of an existing HTMLElement, then the tag name of the extended element can be provided with ElementBuilder.extends.

The core system of <ceb/> is a builder of builders and in fact, ElementBuilder is the builder of builders. Therefore, additional builders can be provided to it in order to enhance the built Custom Element, c.f. ElementBuilder.builder.

Finally, the registration of the Custom Element can be done with a regular way using the method ElementBuilder.register. However, the registration can also be done with the decorative style using the decorator ElementBuilder.decorate.

Type parameters

E: HTMLElement = HTMLElement

the type of the Custom Element

Hierarchy

ElementBuilder

Index

Constructors

constructor

Methods

Constructors

Private constructor

new ElementBuilder<E>(_name?: string, _constructor?: CustomElementConstructor<E>, _extends?: string, _builders?: Builder<E>[], _hooks?: HookRegistry): ElementBuilder<E>

- Defined in packages/ceb-elements-core/src/element.ts:39
Type parameters
- E: HTMLElement = HTMLElement
Parameters
- Optional _name: string
- Optional _constructor: CustomElementConstructor<E>
- Optional _extends: string
- _builders: Builder<E>[] = []
- _hooks: HookRegistry = {}
Returns ElementBuilder<E>

Methods

Protected after

after<K>(name: K, callback: HookCallbacks<HTMLElement>[K]): ElementBuilder<E>

- Defined in packages/ceb-elements-core/src/element.ts:334
Register a hook which will be invoked after the execution of regular hooks.

This API is dedicated for developer of Builders.

Type parameters
- K: keyof HookCallbacks<HTMLElement>
Parameters
- name: K
  
  the name
- callback: HookCallbacks<HTMLElement>[K]
  
  the callback
Returns ElementBuilder<E>

Protected before

before<K>(name: K, callback: HookCallbacks<HTMLElement>[K]): ElementBuilder<E>

- Defined in packages/ceb-elements-core/src/element.ts:294
Register a hook which will be invoked before the execution of regular hooks.

This API is dedicated for developer of Builders.

Type parameters
- K: keyof HookCallbacks<HTMLElement>
Parameters
- name: K
  
  the name
- callback: HookCallbacks<HTMLElement>[K]
  
  the callback
Returns ElementBuilder<E>

builder

builder(...builders: Builder<E>[]): ElementBuilder<E>

A list of builder used to enhance the CustomElement.

example

import {ElementBuilder} from "@tmorin/ceb-elements-core"
import {ContentBuilder} from "@tmorin/ceb-elements-builders"
class HelloWorld extends HTMLElement {
}
ElementBuilder.get(HelloWorld)
  .builder(ContentBuilder.get(`<p>Hello, World!</p>`))
  .register()

Parameters

Rest ...builders: Builder<E>[]

a list of builders

Returns ElementBuilder<E>

decorate

decorate(): ClassDecorator

Decorate the Custom Element class.

example

import {ElementBuilder} from "@tmorin/ceb-elements-core"
@ElementBuilder.get<HelloWorld>().decorate()
class HelloWorld extends HTMLElement {
    connectedCallback() {
        this.textContent = `Hello, World!`
    }
}

Returns ClassDecorator

extends

extends(tagName: string): ElementBuilder<E>

The tag name of the extended HTML element.

example

import {ElementBuilder} from "@tmorin/ceb-elements-core"
class AltInput extends HTMLInputElement {
    constructor() {
        super()
    }
    connectedCallback() {
        this.placeholder = "Type your name!"
    }
}
ElementBuilder.get(AltInput)
    .extends("input")
    .register()

Parameters

tagName: string

the tag name

Returns ElementBuilder<E>

Protected invoke

invoke(type: "before" | "between" | "after", name: string, cb: (callback: Function) => void): void

- Defined in packages/ceb-elements-core/src/element.ts:355
Invokes the registered hooks.

This API is dedicated for developer of Builders.

Parameters
- type: "before" | "between" | "after"
  
  the type
- name: string
  
  the name
- cb: (callback: Function) => void
  
  the callback
  - - (callback: Function): void
    - Parameters
      - callback: Function
      Returns void
Returns void

name

name(tagName: string): ElementBuilder<E>

The tag name of the custom element.

By default it is the kebab case of the class name, i.e. HelloWorld => hello-world.

example

import {ElementBuilder} from "@tmorin/ceb-elements-core"

class HelloWorld extends HTMLElement {
    connectedCallback() {
        this.textContent = `Hello, World!`
    }
}
ElementBuilder.get(HelloWorld)
    .name("alt-hello-world")
    .register()

Parameters

tagName: string

the tag name

Returns ElementBuilder<E>

Protected on

on<K>(name: K, callback: HookCallbacks<HTMLElement>[K]): ElementBuilder<E>

- Defined in packages/ceb-elements-core/src/element.ts:314
Register a hook.

This API is dedicated for developer of Builders.

Type parameters
- K: keyof HookCallbacks<HTMLElement>
Parameters
- name: K
  
  the name
- callback: HookCallbacks<HTMLElement>[K]
  
  the callback
Returns ElementBuilder<E>

register

Build and register the CustomElement.

The output is a wrapper class which extends the CustomElement class.

example

import {ElementBuilder} from "@tmorin/ceb-elements-core"
class HelloWorld extends HTMLElement {
    connectedCallback() {
        this.textContent = `Hello, World!`
    }
}
ElementBuilder.get(HelloWorld).register()

Returns CustomElementConstructor<E>

Static get

get<E>(constructor?: CustomElementConstructor<E>): ElementBuilder<E>

- Defined in packages/ceb-elements-core/src/element.ts:77
Provide a fresh builder.

Type parameters
- E: HTMLElement
  
  the type of the Custom Element
Parameters
- Optional constructor: CustomElementConstructor<E>
  
  the constructor, it's optional only when the decorator API (i.e. ElementBuilder.decorate) is used
Returns ElementBuilder<E>

Static Protected getOrSet

getOrSet<B>(target: Object & { _ceb_builders?: {} }, builder: B, id?: string): B

- Defined in packages/ceb-elements-core/src/element.ts:58
Get or set builder to a target from the decorators of builders.

This API is dedicated for developer of Builders.

Type parameters
- B: Builder<HTMLElement, B>
  
  the type of the builder
Parameters
- target: Object & { _ceb_builders?: {} }
  
  the target
- builder: B
  
  the builder
- id: string = ...
  
  the id used to identify the builder
Returns B

Type parameters

E: HTMLElement = HTMLElement

Hierarchy

Index

Constructors

Methods

Constructors

Private constructor

Type parameters

E: HTMLElement = HTMLElement

Parameters

Optional _name: string

Optional _constructor: CustomElementConstructor<E>

Optional _extends: string

_builders: Builder<E>[] = []

_hooks: HookRegistry = {}

Returns ElementBuilder<E>

Methods

Protected after

Type parameters

K: keyof HookCallbacks<HTMLElement>

Parameters

name: K

callback: HookCallbacks<HTMLElement>[K]

Returns ElementBuilder<E>

Protected before

Type parameters

K: keyof HookCallbacks<HTMLElement>

Parameters

name: K

callback: HookCallbacks<HTMLElement>[K]

Returns ElementBuilder<E>

builder

Parameters

Rest ...builders: Builder<E>[]

Returns ElementBuilder<E>

decorate

Returns ClassDecorator

extends

Parameters

tagName: string

Returns ElementBuilder<E>

Protected invoke

Parameters

type: "before" | "between" | "after"

name: string

cb: (callback: Function) => void

Parameters

callback: Function

Returns void

Returns void

name

Parameters

tagName: string

Returns ElementBuilder<E>

Protected on

Type parameters

K: keyof HookCallbacks<HTMLElement>

Parameters

name: K

callback: HookCallbacks<HTMLElement>[K]

Returns ElementBuilder<E>

register

Returns CustomElementConstructor<E>

Static get

Type parameters

E: HTMLElement

Parameters

Optional constructor: CustomElementConstructor<E>

Returns ElementBuilder<E>

Static Protected getOrSet

Type parameters

B: Builder<HTMLElement, B>

Parameters

target: Object & { _ceb_builders?: {} }

builder: B

id: string = ...

Returns B