Options
All
  • Public
  • Public/Protected
  • All
Menu

Class TemplateBuilder<E, P>

The builder handles the integration of a templating solution to update the content of the Custom Element.

Firstly, the integration of the templating solution has to be defined in a method, by default the method name is render. The implementation of the method (i.e. the method render) must return an instance of Template.

Secondly, the render method is wrapped by the builder in order to render the Template once returned. That means, each time the render method is invoked, the returned Template is rendered automatically. The wrapping is also responsible to select the right destination of the template: Light DOM vs Shadow DOM.

By default, the template is rendered into the Light DOM of the Custom Element. However, the builder can render the template into the Shadow DOM with TemplateBuilder.shadow. Another switch, TemplateBuilder.grey can be used to force the rendering into a scope.

If the scope is not required, the Custom Element content can be simply preserve from ancestral rendering process with TemplateBuilder.preserveContent.

Attributes can also be preserved from ancestral rendering process with TemplateBuilder.preserveAttributes.

By default, the name of the wrapped method is render. However, the name can be changed with TemplateBuilder.method.

When a Template is rendered, template parameters can be provided to the Template.render method. The template parameters can be set with TemplateBuilder.parameters.

The library provides a built-in template solution: html.

Finally, the builder can be registered using the method ElementBuilder.builder of the main builder (i.e. ElementBuilder). However, it can also be registered with the decorative style using the decorator TemplateBuilder.decorate.

Type parameters

  • E: HTMLElement

    the type of the Custom Element

  • P

    The type of the template parameters.

Hierarchy

  • TemplateBuilder

Implements

  • Builder<E>

Index

Constructors

Methods

Constructors

Private constructor

  • new TemplateBuilder<E, P>(_isGrey?: boolean, _preserveContent?: boolean, _preserveAttributes?: string[], _isShadow?: boolean, _isFocusDelegation?: boolean, _methName?: string, _parameters?: P): TemplateBuilder<E, P>

  • Type parameters

    • E: HTMLElement

    • P

    Parameters

    • _isGrey: boolean = false
    • _preserveContent: boolean = false
    • _preserveAttributes: string[] = []
    • _isShadow: boolean = false
    • Optional _isFocusDelegation: boolean
    • _methName: string = "render"
    • Optional _parameters: P

    Returns TemplateBuilder<E, P>

Methods

Protected build

  • build(Constructor: CustomElementConstructor<E>, hooks: HooksRegistration<E & { __ceb_engine_preserve_attributes?: string[]; __ceb_engine_preserve_children?: boolean }>): void

  • This API is dedicated for developer of Builders.

    Parameters

    • Constructor: CustomElementConstructor<E>
    • hooks: HooksRegistration<E & { __ceb_engine_preserve_attributes?: string[]; __ceb_engine_preserve_children?: boolean }>

    Returns void

decorate

  • decorate<E>(): MethodDecorator

  • Decorates the render method.

    example
    import {ElementBuilder} from "@tmorin/ceb-elements-core"
    import {html} from "@tmorin/ceb-templating-literal"
    import {TemplateBuilder} from "@tmorin/ceb-templating-builder"
    @ElementBuilder.get<HelloWorld>().decorate()
    class HelloWorld extends HTMLElement {
        value = "World"
        @TemplateBuilder.get().decorate()
        render() {
            return html`Hello, ${this.value}!`
        }
    }

    Type parameters

    • E: HTMLElement

    Returns MethodDecorator

grey

method

  • Overrides the default render method name.

    example
    import {ElementBuilder} from "@tmorin/ceb-elements-core"
    import {html} from "@tmorin/ceb-templating-literal"
    import {TemplateBuilder} from "@tmorin/ceb-templating-builder"
    class HelloWorld extends HTMLElement {
        value = "World"
        doRender() {
            return html`Hello, ${this.value}!`
        }
    }
    ElementBuilder.get().builder(
        TemplateBuilder.get().method("doRender")
    ).register()

    Parameters

    • methName: string

      the render method name

    Returns TemplateBuilder<E, P>

parameters

  • Set render parameters.

    example
    import {ElementBuilder} from "@tmorin/ceb-elements-core"
    import {html} from "@tmorin/ceb-templating-literal"
    import {TemplateBuilder} from "@tmorin/ceb-templating-builder"
    import {UpdateParameters} from "@tmorin/ceb-templating-engine"
    class HelloWorld extends HTMLElement {
        value = "World"
        doRender() {
            return html`Hello, ${this.value}!`
        }
    }
    ElementBuilder.get().builder(
        TemplateBuilder.get<UpdateParameters>()
            .parameters({ greyDom: true })
    ).register()

    Parameters

    • parameters: P

      the parameters

    Returns TemplateBuilder<E, P>

preserveAttributes

  • Preserve attributes of the Custom Element from rendering processes coming from ancestors.

    example
    import {ElementBuilder} from "@tmorin/ceb-elements-core"
    import {html} from "@tmorin/ceb-templating-literal"
    import {TemplateBuilder} from "@tmorin/ceb-templating-builder"
    class HelloWorld extends HTMLElement {
        value = "World"
        render() {
            return html`Hello, ${this.value}!`
        }
    }
    ElementBuilder.get().builder(
        TemplateBuilder.get().preserveAttributes("class", "id")
    ).register()

    Parameters

    • Rest ...names: string[]

      the names of the attribute

    Returns TemplateBuilder<E, P>

preserveContent

  • Prevent mutations on the Custom Element content from rendering processes coming from ancestors.

    example
    import {ElementBuilder} from "@tmorin/ceb-elements-core"
    import {html} from "@tmorin/ceb-templating-literal"
    import {TemplateBuilder} from "@tmorin/ceb-templating-builder"
    class HelloWorld extends HTMLElement {
        value = "World"
        render() {
            return html`Hello, ${this.value}!`
        }
    }
    ElementBuilder.get().builder(
        TemplateBuilder.get().preserveContent()
    ).register()

    Returns TemplateBuilder<E, P>

shadow

  • Forces the rendering into the Shadow DOM.

    example
    import {ElementBuilder} from "@tmorin/ceb-elements-core"
    import {html} from "@tmorin/ceb-templating-literal"
    import {TemplateBuilder} from "@tmorin/ceb-templating-builder"
    class HelloWorld extends HTMLElement {
        value = "World"
        render() {
            return html`Hello, ${this.value}!`
        }
    }
    ElementBuilder.get().builder(
        TemplateBuilder.get().shadow()
    ).register()

    Parameters

    • Optional focus: boolean

      when true the focus will be delegated to the shadow DOM

    Returns TemplateBuilder<E, P>

Static get

Generated using TypeDoc