Class Component<TData, TProperty, TMethod>

A node that has a shadow tree attached to it

Type Parameters

  • TData extends DataList
  • TProperty extends PropertyList
  • TMethod extends MethodList

Hierarchy (view full)

Constructors

Properties

[COMPONENT_SYMBOL]: true
[ELEMENT_SYMBOL]: true
childNodes: Node[]

The child nodes (must not be modified directly!)

classList: null | ClassList

The ClassList of the element (will never change and must not be modified!)

containingSlot: undefined | null | glassEasel.Element

The parent slot element in composed tree (must not be modified directly!)

dataset: {
    [name: string]: unknown;
}

Type declaration

  • [name: string]: unknown
ownerShadowRoot: null | ShadowRoot

The shadow-root which owns the element (will never change and must not be modified!)

parentIndex: number

The index in parentNode.childNodes (-1 if no parentNode) (must not be modified directly!)

parentNode: null | glassEasel.Element

The parent element (must not be modified directly!)

slotIndex: undefined | number

The index in containingSlot.slotNodes (must not be modified directly!)

slotNodes: undefined | Node[]

The slot content nodes composed tree (must not be modified directly!)

tagName: string
isComponent: ((e) => e is glassEasel.GeneralComponent)

Type declaration

isElement: ((e) => e is glassEasel.Element)

Type declaration

Accessors

  • get attributes(): {
        name: string;
        value: unknown;
    }[]
  • Returns {
        name: string;
        value: unknown;
    }[]

  • get class(): string
  • Returns string

  • set class(classNames): void
  • Parameters

    • classNames: string

    Returns void

  • get data(): Merge<DataWithPropertyValues<TData, TProperty>>
  • Returns Merge<DataWithPropertyValues<TData, TProperty>>

  • set data(newData): void
  • Parameters

    Returns void

  • get id(): string
  • Returns string

  • set id(x): void
  • Parameters

    • x: unknown

    Returns void

  • get is(): string
  • Returns string

  • get properties(): Merge<DataWithPropertyValues<TData, TProperty>>
  • Returns Merge<DataWithPropertyValues<TData, TProperty>>

  • get slot(): string
  • Returns string

  • set slot(x): void
  • Parameters

    • x: string

    Returns void

  • get style(): string
  • Returns string

  • set style(styleText): void
  • Parameters

    • styleText: string

    Returns void

Methods

  • Add a lifetime event listener on the component

    Type Parameters

    • N extends keyof Lifetimes

    Parameters

    • name: N
    • func: Lifetimes[N]

    Returns void

  • Add an event listener on the element

    Parameters

    Returns void

  • Add a page lifetime event listener on the component

    Parameters

    • name: string
    • func: ((...args) => void)
        • (...args): void
        • Parameters

          • Rest ...args: unknown[]

          Returns void

    Returns void

  • Parameters

    Returns void

  • Apply all scheduled updates immediately

    Inside observers, it is generally not .

    Returns void

  • Update multiple external class values

    Returns void

  • Apply the template updates to this component instance

    This method throws error if the template engine does not support template update.

    Returns void

  • Cast a node to an element (native node, virtual node, or component node)

    Returns null if the element is not a text node.

    Returns glassEasel.Element

  • Cast an element to a native node

    Returns null if the element is not a native node.

    Returns null | NativeNode

  • Cast an element to a shadow root

    Returns null if the element is not a shadow root.

    Returns null | ShadowRoot

  • Cast a node to a text node

    Returns null if the element is not a text node.

    Returns null

  • Cast an element to a virtual node

    Returns null if the element is not a virtual node.

    Returns null | VirtualNode

  • Call a method

    If useMethodCallerListeners option is set for this component, this method will use the corresponding fields in the methodCaller . Returns undefined if there is no such method.

    Type Parameters

    • T extends string

    Parameters

    • methodName: T
    • Rest ...args: any[]

    Returns any

  • Cancel the destroy scheduling of the backend element

    Returns void

    Deprecated

    Use cancelDestroyBackendElementOnRemoval instead.

  • Cancel the destroy scheduling of the backend element

    Returns void

  • Collect the marks on the element

    The marks includes the marks on ancestors (in shadow tree) of the element. If multiple marks on different elements shares the same name, the mark value on the child-most element is accepted.

    Returns {
        [name: string]: unknown;
    }

    • [name: string]: unknown
  • Create an intersection observer

    The relativeElement is the element to calculate intersection with ( null for the viewport). The relativeElementMargin is the margins of the relativeElement . The thresholds is a list of intersection ratios to trigger the listener . The listener always triggers once immediately after this call.

    Parameters

    • relativeElement: null | glassEasel.Element
    • relativeElementMargin: string
    • thresholds: number[]
    • listener: ((res) => void)
        • (res): void
        • Parameters

          • res: IntersectionStatus

          Returns void

    Returns null | Observer

  • Destroy the backend element

    It only destroy the backend element of the element itself.

    Returns void

  • Destroy the backend element when removed from any parent element

    Returns void

    Deprecated

    Use destroyBackendElementOnRemoval instead.

  • Destroy the backend element when removed from any parent element

    Returns void

  • Destroy backend element for the whole subtree.

    It will destroy backend elements for the whole subtree (shadow tree) recursively. If a backend element for a component is destroyed, any backend element in the shadow tree of the component will also be destroyed.

    Returns void

  • Trigger an event with specified event object on the element

    Parameters

    Returns void

  • Add an observer on the runtime

    Parameters

    Returns void

    Note

    This method is for debug or inspect use only, do not use it in production.

  • Iterate composed child nodes (including virtual nodes)

    if f returns false then the iteration is interrupted. Returns true if that happens.

    Parameters

    • f: ((node) => boolean | void)
        • (node): boolean | void
        • Parameters

          Returns boolean | void

    Returns boolean

  • Iterate non-virtual composed child nodes

    if f returns false then the iteration is interrupted. Returns true if that happens.

    Parameters

    • f: ((node) => boolean | void)
        • (node): boolean | void
        • Parameters

          Returns boolean | void

    Returns boolean

  • Get an attribute value ( null if not set or removed)

    Parameters

    • name: string

    Returns unknown

  • Get the bounding client rect

    Return zero values when the backend element is invalid or it does not have layout information.

    Parameters

    Returns void

  • Get the composed children

    This method always returns a new array. It is convenient but less performant. For better performance, consider using forEachComposedChild .

    Returns Node[]

  • Get an interactive context

    Parameters

    • cb: ((res) => void)
        • (res): void
        • Parameters

          • res: unknown

          Returns void

    Returns void

  • Get all external classes

    Returns {
        [name: string]: string[] | undefined;
    }

    • [name: string]: string[] | undefined
  • Get the current caller set by setMethodCaller

    Returns ComponentInstance<TData, TProperty, TMethod, Empty>

  • Returns the owner component space of this component

    Returns ComponentSpace

  • Get the bounding client rect

    Return zero values when the backend element is invalid or it does not have layout information.

    Parameters

    Returns void

  • Returns the shadow root element

    Returns null for external components.

    Returns null | ShadowRoot

  • Pending all data updates in the callback, and apply updates after callback returns

    This function helps grouping several replaceDataOnPath or spliceArrayDataOnPath calls, and then apply them at the end of the callback. setData and applyDataUpdates calls inside the callback still apply updates immediately.

    Type Parameters

    • T

    Parameters

    • callback: (() => T)
        • (): T
        • Returns T

    Returns T

  • Check whether the other behavior is a dependent behavior or a implemented trait behavior

    Parameters

    Returns boolean

  • Check the existence of an external class

    Parameters

    • name: string

    Returns boolean

  • Check whether there are pending changes or not

    Returns boolean

  • Parameters

    Returns void

  • Parameters

    • child: Node
    • index: number

    Returns void

  • Parameters

    • children: Node[]
    • index: number

    Returns void

  • Get whether the component is external or not

    Returns boolean

  • Get whether the slot-inherit mode is set or not

    Returns boolean

  • Check a field is excluded by pureDataPattern or not

    Parameters

    • fieldName: string

    Returns boolean

  • Get whether the node is virtual or not

    Returns boolean

  • Iterate composed child nodes (including virtual nodes)

    if f returns false then the iteration is interrupted. Returns true if that happens.

    Returns Generator<Node, void, void>

  • Test whether the target in this subtree matches the selector

    Parameters

    Returns boolean

  • Remove an attribute

    Parameters

    • name: string

    Returns void

  • Parameters

    Returns void

  • Parameters

    • index: number

    Returns void

  • Parameters

    • index: number
    • count: number

    Returns void

  • remove a lifetime event listener on the component

    Type Parameters

    • N extends keyof Lifetimes

    Parameters

    • name: N
    • func: Lifetimes[N]

    Returns void

  • remove a page lifetime event listener on the component

    Parameters

    • name: string
    • func: ((...args) => void)
        • (...args): void
        • Parameters

          • Rest ...args: unknown[]

          Returns void

    Returns void

  • Parameters

    Returns void

  • Parameters

    • child: Node
    • index: number

    Returns void

  • Schedule a data update on a single specified path

    The data update will not be applied until next setData or applyDataUpdates call. All data observers will not be triggered immediately before applied. Reads of the data will get the unchanged value before applied.

    Type Parameters

    • T extends DataPath

    Parameters

    • path: readonly [T]
    • data: GetFromDataPath<DataWithPropertyValues<TData, TProperty>, T>

    Returns void

  • Schedule an update for an external class value

    Parameters

    • name: string
    • target: string | string[]

    Returns void

  • Set an attribute value

    Parameters

    • name: string
    • value: unknown

    Returns void

  • Do a classic data updates

    This method apply updates immediately, so there is no async callback. When called inside observers, the data update will not be applied to templates. Inside observers, it is recommended to use updateData instead.

    Parameters

    • Optional newData: Partial<IsAny<DataWithPropertyValues<TData, TProperty>> extends true
          ? Record<`${any}`, DataWithPropertyValues<TData, TProperty>>
          : UnionToIntersection<DataWithPropertyValues<TData, TProperty> extends any[]
              ? {
                  [P in number]: (IsAny<(...)[(...)]> extends true
                      ? Record<SetDataStringPath<(...), (...)>, (...)[(...)]>
                      : UnionToIntersection<(...) extends (...)
                          ? (...)
                          : (...)>) & Record<`${P}`, ((...) & (...) & (...))[P]>
              }[(keyof any[] | keyof TProperty | keyof TData) & number]
              : DataWithPropertyValues<TData, TProperty> extends Record<string | number, any>
                  ? {
                      [P in string | number]: (IsAny<(...)> extends true
                          ? Record<(...), (...)>
                          : UnionToIntersection<(...)>) & Record<`${(...)}`, (...)[(...)]>
                  }[(keyof TProperty | keyof TData) & (string | number)]
                  : never>>

    Returns void

  • Set a dataset on the element

    Parameters

    • name: string
    • value: unknown

    Returns void

  • Update an external class value

    Parameters

    • name: string
    • target: string | string[]

    Returns void

  • Set a mark on the element

    Parameters

    • name: string
    • value: unknown

    Returns void

  • Set the caller (a.k.a. this ) of event callbacks and life-time callbacks

    By default, the caller is the component instance itself. Use this method to override this behavior.

    Parameters

    Returns void

  • Set the node class

    Parameters

    Returns void

  • Set the node style

    Parameters

    Returns void

  • Schedule an array update

    The behavior is like Array.prototype.slice . Break the array before the index-th item, delete del items, and insert some items here. If index is undefined, negative, or larger than the length of the array, no items will be deleted and new items will be appended to the end of the array. The data update will not be applied until next setData or applyDataUpdates call. All data observers will not be triggered immediately before applied. Reads of the data will get the unchanged value before applied.

    Type Parameters

    • T extends DataPath

    Parameters

    • path: readonly [T]
    • index: GetFromDataPath<DataWithPropertyValues<TData, TProperty>, T> extends any[]
          ? undefined | number
          : never
    • del: GetFromDataPath<DataWithPropertyValues<TData, TProperty>, T> extends any[]
          ? undefined | number
          : never
    • inserts: GetFromDataPath<DataWithPropertyValues<TData, TProperty>, T> extends I[]
          ? I[]
          : never

    Returns void

  • Toggle the node class

    Parameters

    Returns void

  • Get the trait behavior implementation of the component

    Returns undefined if the specified trait behavior is not implemented.

    Type Parameters

    • TOut extends {
          [x: string]: any;
      }

    Parameters

    Returns undefined | TOut

  • Trigger an event on the element

    Parameters

    • name: string
    • Optional detail: unknown
    • Optional options: EventOptions

    Returns void

  • Triggers a life-time callback on an element

    Normally external life-times should only be triggered by template engine. Most cases should take a common method instead.

    Parameters

    • name: string
    • args: any[]

    Returns void

  • Triggers a page-life-time callback on an element

    Parameters

    • name: string
    • args: any[]

    Returns void

  • Triggers a worklet change lifetime

    Parameters

    • name: string
    • value: unknown

    Returns void

  • Update an attribute value

    Parameters

    • name: string
    • value: unknown

    Returns void

  • Schedule a classic data updates

    The data update will not be applied until next setData or applyDataUpdates call. When called inside observers, the data update will be applied when observer ends. All data observers will not be triggered immediately before applied. Reads of the data will get the unchanged value before applied.

    Parameters

    • Optional newData: Partial<IsAny<DataWithPropertyValues<TData, TProperty>> extends true
          ? Record<`${any}`, DataWithPropertyValues<TData, TProperty>>
          : UnionToIntersection<DataWithPropertyValues<TData, TProperty> extends any[]
              ? {
                  [P in number]: (IsAny<(...)[(...)]> extends true
                      ? Record<SetDataStringPath<(...), (...)>, (...)[(...)]>
                      : UnionToIntersection<(...) extends (...)
                          ? (...)
                          : (...)>) & Record<`${P}`, ((...) & (...) & (...))[P]>
              }[(keyof any[] | keyof TProperty | keyof TData) & number]
              : DataWithPropertyValues<TData, TProperty> extends Record<string | number, any>
                  ? {
                      [P in string | number]: (IsAny<(...)> extends true
                          ? Record<(...), (...)>
                          : UnionToIntersection<(...)>) & Record<`${(...)}`, (...)[(...)]>
                  }[(keyof TProperty | keyof TData) & (string | number)]
                  : never>>

    Returns void

  • Parameters

    Returns void

  • Iterate elements with their slots (slots-inherited nodes included)

    Parameters

    • node: Node
    • f: ((node, slot) => boolean | void)
        • (node, slot): boolean | void
        • Parameters

          Returns boolean | void

    Returns boolean

  • Iterate elements in specified slot (slots-inherited nodes included)

    Parameters

    • node: Node
    • slot: undefined | null | glassEasel.Element
    • f: ((node) => boolean | void)
        • (node): boolean | void
        • Parameters

          Returns boolean | void

    Returns boolean

  • Iterate elements with their slots (slots-inherited nodes NOT included)

    Parameters

    • node: Node
    • f: ((node, slot) => boolean | void)
        • (node, slot): boolean | void
        • Parameters

          Returns boolean | void

    Returns boolean

  • Iterate elements in specified slot (slots-inherited nodes NOT included)

    Parameters

    • node: Node
    • slot: undefined | null | glassEasel.Element
    • f: ((node) => boolean | void)
        • (node): boolean | void
        • Parameters

          Returns boolean | void

    Returns boolean

  • Get whether the slot-inherit mode is set or not

    Parameters

    Returns boolean

  • Get a method

    If useMethodCallerListeners option is set for this component, this method will use the corresponding fields in the methodCaller .

    Type Parameters

    • TData extends DataList
    • TProperty extends PropertyList
    • TMethod extends MethodList

    Parameters

    Returns undefined | GeneralFuncType

  • Get the slot name of the element

    Parameters

    Returns undefined | string

  • Get whether a node has any subtree MutationObserver attached to it

    If there is, then tree update may have more performance impact.

    Parameters

    Returns boolean

  • Check the element is attached or not

    Parameters

    Returns boolean

  • Parameters

    • func: unknown

    Returns func is ComponentMethod & {
        [TaggedSymbol]: [typeof METHOD_TAG];
    }

  • Type Parameters

    • TData extends DataList
    • TProperty extends PropertyList
    • TMethod extends MethodList

    Parameters

    Returns string[]

  • Test whether the target matches the selector

    Parameters

    Returns boolean

  • Make the element looks like attached.

    If the element will never be attached to backend or it has no backend element at all, this can be used to trigger attached life-time.

    Parameters

    Returns void

  • Make the element looks like detached.

    This can be used to trigger detached life-time without remove the element in the backend.

    Parameters

    Returns void

  • Attach the element into the backend, swapping out a placeholder element in the backend.

    The element must not be a child node of another element, must not be attached before, and must not have a ownerShadowRoot . The element targetParent and targetNode must be in the same backend context. The element replaces the targetNode in the targetParent .

    Parameters

    Returns void

  • Set the virtual node to slot-inherit mode

    In slot-inherit mode of an element, the child nodes of the element will be treated as siblings and can have different target slot.

    Parameters

    Returns void

  • Set the binding slot of specific node

    Necessary if node belongs to a dynamic slot, which cannot be identified by slot name.

    Parameters

    Returns void

  • Set the slot name of the element

    Once this method is called for an element , it will be treated as a slot which can contain child nodes in composed tree. This method should not be used in components, otherwise the slot content will always be dangled.

    Parameters

    Returns void