Attribute Parser

Current Implementation

Web Components can have observed attributes, that trigger the attributeChangedCallback:

static observedAttributes = ['value']

UIElement parses these attributes according to a declarative static property called attributeMap:

static attributeMap = {
    value: asInteger
}

The UIElement base class will assign them to signals in the component with the same name as key:

this.get('value') // will return the current value of the `value` signal as an integer `number` or `undefined` if not a number

API Design Considerations

• Developers should not have to implement attributeChangedCallback in their components
• The API should feel natural to use in the context of other conventions for Web Components
• Attribute parser functions should be composable pure functions
• Developers should not have to worry whether the value is defined or not in attribute parser functions
• Developers should be able to pass the attribute parser function as value in attributeMap
• For simple attribute parser functions, that just transform the value to a certain type, no argument should be required
• Complex attribute parser functions, that use the component context or the old value, should be possible

Name of Property

Decision: attributeMap - since v0.6.0 Reason: shorter than attributeMapping

Possible alternatives:

• attributeMapping - before v0.6.0
• parseAttributes - sounds more active
• signalTypes - focus on outcome rather than input
• types – short

Static or Not?

Decision: static - since v0.7.3 Reason: align it with static observedAttributes; in most cases there is no need for per-instance differentiation

Possible alternative:

• instance property - before v0.7.3; no need to pass this context to parser function

Object or Map?

Decision: object - since v0.1.0 Reason: easier to write

Possible alternative:

• Map - easier for iteration

Key Format

Decision: string, same as attribute name - since v0.1.0

No alternatives.

Value Format

Decision: pure function - since v0.7.3 Reason: aligns with strive for more functional programming approach; array notation was confusing

Possible alternative:

• pure function or array of signal key + pure function - before v0.7.3

Parser Function Input Arguments

Decision:

• Maybe<string> - since 0.8.0; array of 0 or 1 current values
• typeof UIElement - this context of component
• string|undefined - previous value

Reason: array for current value allows to .map() over and .filter() out invalid values, without checking whether the value is undefined

Possible alternative:

• string|undefined for first argument - before v0.8.0