Options
All
  • Public
  • Public/Protected
  • All
Menu

maquette

Index

Type aliases

EventHandlerInterceptor

EventHandlerInterceptor: function

Options that influence how the DOM is rendered and updated.

Type declaration

    • (propertyName: string, eventHandler: Function, domNode: Node, properties: VNodeProperties): Function | undefined
    • Parameters

      • propertyName: string
      • eventHandler: Function
      • domNode: Node
      • properties: VNodeProperties

      Returns Function | undefined

PerformanceLoggerEvent

PerformanceLoggerEvent: "domEvent" | "domEventProcessed" | "renderStart" | "rendered" | "patched" | "renderDone"

ProjectorPerformanceLogger

ProjectorPerformanceLogger: function

Type declaration

VNodeChild

VNodeChild: string | VNode | VNodeChildren | null | undefined

These are valid values for the children parameter of the h function.

Variables

windowPerformanceProjectorLogger

windowPerformanceProjectorLogger: ProjectorPerformanceLogger

A ProjectorPerformanceLogger that reports measurements to window.performance.measure

Can be passed to createProjector to get more insights into the virtual DOM performance.

Functions

applyDefaultProjectionOptions

createCache

  • Creates a CalculationCache object, useful for caching VNode trees. In practice, caching of VNode trees is not needed, because achieving 60 frames per second is almost never a problem. For more information, see CalculationCache.

    Type parameters

    • Result

      The type of the value that is cached.

    Returns CalculationCache<Result>

createMapping

  • createMapping<Source, Target>(getSourceKey: function, createResult: function, updateResult: function): Mapping<Source, Target>
  • Creates a Mapping instance that keeps an array of result objects synchronized with an array of source objects. See Working with arrays.

    Type parameters

    • Source

      The type of source items. A database-record for instance.

    • Target

      The type of target items. A MaquetteComponent for instance.

    Parameters

    • getSourceKey: function

      function(source) that must return a key to identify each source object. The result must either be a string or a number.

        • (source: Source): string | number
        • Parameters

          • source: Source

          Returns string | number

    • createResult: function

      function(source, index) that must create a new result object from a given source. This function is identical to the callback argument in Array.map(callback).

        • (source: Source, index: number): Target
        • Parameters

          • source: Source
          • index: number

          Returns Target

    • updateResult: function

      function(source, target, index) that updates a result to an updated source.

        • (source: Source, target: Target, index: number): void
        • Parameters

          • source: Source
          • target: Target
          • index: number

          Returns void

    Returns Mapping<Source, Target>

createProjector

h

  • The h function is used to create a virtual DOM node. This function is largely inspired by the mercuryjs and mithril frameworks. The h stands for (virtual) hyperscript.

    Parameters

    • selector: string

      Contains the tagName, id and fixed css classnames in CSS selector format. It is formatted as follows: tagname.cssclass1.cssclass2#id.

    • Optional properties: VNodeProperties

      An object literal containing properties that will be placed on the DOM node.

    • Optional children: VNodeChild[]

      Virtual DOM nodes and strings to add as child nodes. children may contain VNodes, strings, nested arrays, null and undefined. Nested arrays are flattened, null and undefined are removed.

    Returns VNode

    A VNode object, used to render a real DOM later.

    NOTE: There are two basic rules you should be aware of when updating the virtual DOM.

  • The h function is used to create a virtual DOM node. This function is largely inspired by the mercuryjs and mithril frameworks. The h stands for (virtual) hyperscript.

    Parameters

    • selector: string

      Contains the tagName, id and fixed css classnames in CSS selector format. It is formatted as follows: tagname.cssclass1.cssclass2#id.

    • children: VNodeChild[]

      Virtual DOM nodes and strings to add as child nodes. children may contain VNodes, strings, nested arrays, null and undefined. Nested arrays are flattened, null and undefined are removed.

    Returns VNode

    A VNode object, used to render a real DOM later.

    NOTE: There are two basic rules you should be aware of when updating the virtual DOM.

Object literals

dom

dom: object

append

  • Appends a new child node to the DOM which is generated from a VNode. This is a low-level method. Users will typically use a Projector instead.

    Parameters

    • parentNode: Element

      The parent node for the new child node.

    • vnode: VNode

      The root of the virtual DOM tree that was created using the h function. NOTE: VNode objects may only be rendered once.

    • Optional projectionOptions: ProjectionOptions

      Options to be used to create and update the Projection.

    Returns Projection

    The Projection that was created.

create

  • Creates a real DOM tree from vnode. The Projection object returned will contain the resulting DOM Node in its domNode property. This is a low-level method. Users will typically use a Projector instead.

    Parameters

    • vnode: VNode

      The root of the virtual DOM tree that was created using the h function. NOTE: VNode objects may only be rendered once.

    • Optional projectionOptions: ProjectionOptions

      Options to be used to create and update the projection.

    Returns Projection

    The Projection which also contains the DOM Node that was created.

insertBefore

  • Inserts a new DOM node which is generated from a VNode. This is a low-level method. Users wil typically use a Projector instead.

    Parameters

    • beforeNode: Element

      The node that the DOM Node is inserted before.

    • vnode: VNode

      The root of the virtual DOM tree that was created using the h function. NOTE: VNode objects may only be rendered once.

    • Optional projectionOptions: ProjectionOptions

      Options to be used to create and update the projection, see createProjector.

    Returns Projection

    The Projection that was created.

merge

  • Merges a new DOM node which is generated from a VNode with an existing DOM Node. This means that the virtual DOM and the real DOM will have one overlapping element. Therefore the selector for the root VNode will be ignored, but its properties and children will be applied to the Element provided. This is a low-level method. Users wil typically use a Projector instead.

    Parameters

    • element: Element

      The existing element to adopt as the root of the new virtual DOM. Existing attributes and child nodes are preserved.

    • vnode: VNode

      The root of the virtual DOM tree that was created using the h function. NOTE: VNode objects may only be rendered once.

    • Optional projectionOptions: ProjectionOptions

      Options to be used to create and update the projection, see createProjector.

    Returns Projection

    The Projection that was created.

replace

  • Replaces an existing DOM node with a node generated from a VNode. This is a low-level method. Users will typically use a Projector instead.

    Parameters

    • element: Element

      The node for the VNode to replace.

    • vnode: VNode

      The root of the virtual DOM tree that was created using the h function. NOTE: VNode objects may only be rendered once.

    • Optional projectionOptions: ProjectionOptions

      Options to be used to create and update the Projection.

    Returns Projection

    The Projection that was created.

Generated using TypeDoc