Options
All
  • Public
  • Public/Protected
  • All
Menu

Class FieldBuilder<E>

The builder binds a property to an attribute. So that, the value is available and mutable from both sides.

Because of the binding with an attribute, the type of the property has to be either a string or a boolean. That means, the kind of the field can be String or Boolean. The default kind of field is String, the switch to Boolean has to be done explicitly with FieldBuilder.boolean.

By default, the name of the attribute is the the kebab case (KebabCase_notation => kebab-case-notation) of the property name. However, the attribute name can be overridden with FieldBuilder.attribute.

The listeners of the field values are simple callback functions, c.f. FieldListener. They can be registered with FieldBuilder.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 FieldBuilder.decorate.

Type parameters

  • E: HTMLElement = HTMLElement

    the type of the Custom Element

Hierarchy

  • FieldBuilder

Implements

  • Builder<E>

Index

Constructors

Methods

Constructors

Private constructor

  • new FieldBuilder<E>(_propName?: string, _attrName?: string, _isBoolean?: boolean, _listeners?: FieldListener<E>[]): FieldBuilder<E>

Methods

attribute

  • Override the default attribute name.

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

    Parameters

    • attrName: string

      the attribute name

    Returns FieldBuilder<E>

boolean

  • Override the kind of the field.

    example
    import {ElementBuilder} from "@tmorin/ceb-elements-core"
    import {FieldBuilder} from "@tmorin/ceb-elements-builders"
    class HelloWorld extends HTMLElement {
        show = true
        connectedCallback() {
            this.textContent = `Hello, ${this.show ? "World" : "<i>hidden</i>"}!`
        }
    }
    ElementBuilder.get(HelloWorld).builder(
        FieldBuilder.get("show").boolean()
    ).register()

    Returns FieldBuilder<E>

Protected build

  • build(Constructor: CustomElementConstructor<E>, hooks: HooksRegistration<E & {}>): void

decorate

  • decorate(): PropertyDecorator
  • decorate(prefix?: string): MethodDecorator

  • Decorates the property of the field.

    example
    import {ElementBuilder} from "@tmorin/ceb-elements-core"
    import {FieldBuilder} from "@tmorin/ceb-elements-builders"
    @ElementBuilder.get<HelloWorld>().decorate()
    class HelloWorld extends HTMLElement {
        @FieldBuilder.get().boolean().decorate()
        show = true
        connectedCallback() {
            this.textContent = `Hello, ${this.show ? "World" : "<i>hidden</i>"}!`
        }
    }

    Returns PropertyDecorator

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

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

    example

    Discovery of the property name

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

    Discovery of the property name with a custom prefix

    import {ElementBuilder} from "@tmorin/ceb-elements-core"
    import {FieldBuilder} from "@tmorin/ceb-elements-builders"
    @ElementBuilder.get<HelloWorld>().decorate()
    class HelloWorld extends HTMLElement {
        @FieldBuilder.get().decorate()
        value = "World"
        @FieldBuilder.get().decorate("listen")
        listenValue(data) {
            this.textContent = `Hello, ${this.value}!`
        }
    }
    example

    Skip the property name discovery

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

    Parameters

    • Optional prefix: string

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

    Returns MethodDecorator

Private decorateMethod

  • decorateMethod(target: Object, methName: string, descriptor: PropertyDescriptor, prefix?: string): void

Private decorateProperty

  • decorateProperty(target: Object, propName: string): void

listener

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

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

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

    Parameters

    Returns FieldBuilder<E>

Private mergeBuilder

  • mergeBuilder(builder: FieldBuilder<E>, isMaster: boolean): void

Static get

Generated using TypeDoc