Options
All
  • Public
  • Public/Protected
  • All
Menu

Class ElementBuilder<E>

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

Properties

Methods

Constructors

Private constructor

  • Type parameters

    • E: HTMLElement = HTMLElement

    Returns ElementBuilder<E>

Properties

Private _builders

_builders: any

Private Optional _constructor

_constructor?: any

Private Optional _extends

_extends?: any

Private _hooks

_hooks: any

Private Optional _name

_name?: any

Methods

Protected after

  • Register a hook which will be invoked after the execution of regular hooks.

    This API is dedicated for developer of Builders.

    Type parameters

    Parameters

    • name: K

      the name

    • callback: HookCallbacks<HTMLElement>[K]

      the callback

    Returns ElementBuilder<E>

Protected before

  • Register a hook which will be invoked before the execution of regular hooks.

    This API is dedicated for developer of Builders.

    Type parameters

    Parameters

    • name: K

      the name

    • callback: HookCallbacks<HTMLElement>[K]

      the callback

    Returns ElementBuilder<E>

builder

  • 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

  • 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

  • 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

  • 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

  • Register a hook.

    This API is dedicated for developer of Builders.

    Type parameters

    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

  • Provide a fresh builder.

    Type parameters

    • E: HTMLElement

      the type of the Custom Element

    Parameters

    Returns ElementBuilder<E>

Static Protected getOrSet

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

  • 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

    • Optional id: string

      the id used to identify the builder

    Returns B

Generated using TypeDoc