Options
All
  • Public
  • Public/Protected
  • All
Menu

Class AttributeBuilder<E>

The builder handles the initialization of an attribute as well as the registration of its listeners.

The default value of the attribute can be provided using AttributeBuilder.default.

The kind of the attribute can be String or Boolean. The default kind of attribute is String, the switch to Boolean can be done explicitly with AttributeBuilder.boolean or implicitly when a default value (true or false) is provided with AttributeBuilder.default.

According to the kind of the attribute, the creation of the attribute in the DOM differs. About the kind Boolean, when the value is true then the attribute DOM node is added and set with an empty string otherwise, nothing occurs. About the kind String, when the value is not undefined and not null then the attribute DOM node is added and set with the value otherwise, nothing occurs.

The listeners of the attribute values are simple callback functions, c.f. AttributeListener. They can be registered with AttributeBuilder.listener.

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 AttributeBuilder.decorate.

Type parameters

  • E: HTMLElement = HTMLElement

    the type of the Custom Element

Hierarchy

  • AttributeBuilder

Implements

Index

Constructors

Properties

Methods

Constructors

Private constructor

  • Type parameters

    • E: HTMLElement = HTMLElement

    Returns AttributeBuilder<E>

Properties

Private Optional _attrName

_attrName?: any

Private Optional _defaultValue

_defaultValue?: any

Private _isBoolean

_isBoolean: any

Private _listeners

_listeners: any

Methods

boolean

  • Override the kind of the attribute.

    example
    import {ElementBuilder} from "@tmorin/ceb-elements-core"
    import {AttributeBuilder} from "@tmorin/ceb-elements-builders"
    class HelloWorld extends HTMLElement {
        connectedCallback() {
            this.textContent = `Hello, World!`
            if (this.hasAttribute("br")) {
                this.appendChild(document.createElement("br"))
            }
        }
    }
    ElementBuilder.get(HelloWorld).builder(
        AttributeBuilder.get("br").boolean().default(true)
    ).register()

    Returns AttributeBuilder<E>

Protected build

decorate

  • decorate(prefix?: string): MethodDecorator

  • Decorates the listener method which is invoked each time the attribute value mutate.

    When the attribute name is not specified (i.e. @AttributeBuilder.get()), then it's discovered from the decorated method name. The pattern is <prefix><AttributeNameInCamelCase>, where <prefix> is by default on.

    example

    Discovery of the attribute name

    import {ElementBuilder} from "@tmorin/ceb-elements-core"
    import {AttributeBuilder} from "@tmorin/ceb-elements-builders"
    @ElementBuilder.get<HelloWorld>().decorate()
    class HelloWorld extends HTMLElement {
        @AttributeBuilder.get().decorate()
        onValue(data) {
            // ...
        }
    }
    example

    Discovery of the attribute name with a custom prefix

    import {ElementBuilder} from "@tmorin/ceb-elements-core"
    import {AttributeBuilder} from "@tmorin/ceb-elements-builders"
    @ElementBuilder.get<HelloWorld>().decorate()
    class HelloWorld extends HTMLElement {
        @AttributeBuilder.get().decorate("listen")
        listenDataValue(data) {
            // ...
        }
    }
    example

    Skip the attribute name discovery

    import {ElementBuilder} from "@tmorin/ceb-elements-core"
    import {AttributeBuilder} from "@tmorin/ceb-elements-builders"
    @ElementBuilder.get<HelloWorld>().decorate()
    class HelloWorld extends HTMLElement {
        @AttributeBuilder.get("foo-bar").decorate()
        listen(data) {
            // ...
        }
    }

    Parameters

    • Optional prefix: string

      the prefix used to discover the attribute name from the method name

    Returns MethodDecorator

default

  • Set the default value of the attribute.

    If the value is a boolean, then the kind of the attribute value is set to boolean too.

    example
    import {ElementBuilder} from "@tmorin/ceb-elements-core"
    import {AttributeBuilder} from "@tmorin/ceb-elements-builders"
    class HelloWorld extends HTMLElement {
        connectedCallback() {
            this.textContent = `Hello, ${this.getAttribute("name")}!`
        }
    }
    ElementBuilder.get(HelloWorld).builder(
        AttributeBuilder.get("name").default("World")
    ).register()

    Parameters

    • value: string | boolean

      the default value

    Returns AttributeBuilder<E>

listener

  • Register a listener which will be invoked when the attribute value mutate.

    A listener is callback function (AttributeListener) which have two arguments:

    1. the custom element
    2. the data describing the mutation c.f. AttributeListenerData
    example
    import {ElementBuilder} from "@tmorin/ceb-elements-core"
    import {AttributeBuilder} from "@tmorin/ceb-elements-builders"
    class HelloWorld extends HTMLElement {
    }
    ElementBuilder.get(HelloWorld).builder(
        AttributeBuilder.get("name")
            .default("World")
            .listener((el, data) =>
                el.textContent = `Hello, ${data.newVal}!`)
    ).register()

    Parameters

    Returns AttributeBuilder<E>

Static get

  • Provide a fresh builder.

    Type parameters

    • E: HTMLElement

      the type of the Custom Element

    Parameters

    • Optional attrName: string

      the attribute name, it's optional only when the decorator API (i.e. AttributeBuilder.decorate) is used

    Returns AttributeBuilder<E>

Generated using TypeDoc