Options
All
  • Public
  • Public/Protected
  • All
Menu

An engine manages the update of DOM elements.

The updates are managed by atomic operations:

  • open and close an element (i.e. an element with potentially some content like p)
  • add void element (i.e. an element without content like input)
  • write a text
  • write a comment

Once an element is opened, then all subsequent operations impact its direct descendants til it's closure.

example

Define a simple text node in an p element

Engine.updateElement(el, (engine) => {
engine.openElement("p")
engine.text("hello")
engine.closeElement()
})
example

Define a input handling only positive numbers

Engine.updateElement(el, (engine) => {
engine.voidElement("input", {
attributes: [
["type", "number"],
["min", "0"],
]
})
})

Hierarchy

  • Engine

Index

Constructors

Private constructor

  • new Engine(containerElement: ContextItem, contexts?: Contexts, document?: Document): Engine

Properties

Static Readonly PROP_NAME_PRESERVE_ATTRIBUTES

PROP_NAME_PRESERVE_ATTRIBUTES: "__ceb_engine_preserve_attributes" = "__ceb_engine_preserve_attributes"

The value refers to a property name which should be used by Custom Element only. The purpose of the property is to list attribute names which won't be mutated.

example

Preserve the type and min of an extended input

class OnlyPositiveNumberInput extends HTMLInputElement {
__ceb_engine_preserve_attributes = ["type", "min"]
constructor() {
super()
this.type = "number"
this.min = "0"
}
}

Static Readonly PROP_NAME_PRESERVE_CHILDREN

PROP_NAME_PRESERVE_CHILDREN: "__ceb_engine_preserve_children" = "__ceb_engine_preserve_children"

The value refers to a property name which should be used by Custom Element only. The purpose of the property is to prevent the mutation of the child nodes.

example

Preserve the child nodes of Custom Element

class SimpleCustomElement extends HTMLElement {
__ceb_engine_preserve_children = true
constructor() {
super()
}
connectedCallback() {
this.textContent = "an initial text content"
}
}

Methods

closeElement

  • closeElement(): void

comment

  • comment(text?: string): void

Private handleElement

Private handleNode

  • handleNode(value: string, nodeType: number, createNode: NodeFactory): void

openElement

  • openElement(name: string, parameters?: Parameters): void

slot

  • slot(): void

text

  • text(text?: string): void

voidElement

  • voidElement(name: string, parameters?: Parameters): void

Static update

  • Update the given HTML element and the underlying descendants. The operations orchestrating the updates are driven by a given function.

    Parameters

    • destination: Element | DocumentFragment

      the destination of the update

    • render: RenderFunction

      the function expressing the update operations

    • Optional parameter: UpdateParameters

      parameters of the Update Element process

    Returns void

Generated using TypeDoc