maquette 4.1.3 → 4.1.4

package/dist/interfaces.d.ts

@@ -1,7 +1,7 @@
 export interface ProjectorService {
     /**
      * Instructs the projector to re-render to the DOM at the next animation-frame using the registered `render` functions.
-     * This method is automatically called for you when event-handlers that are registered in the [[VNode]]s are invoked.
+     * This method is automatically called for you when event-handlers that are registered in the {@link VNode}s are invoked.
      *
      * You need to call this method when timeouts expire, when AJAX responses arrive or other asynchronous actions happen.
      */
@@ -19,55 +19,55 @@ export interface Projector extends ProjectorService {
      * Appends a new child node to the DOM using the result from the provided `renderFunction`.
      * The `renderFunction` will be invoked again to update the DOM when needed.
      * @param parentNode - The parent node for the new child node.
-     * @param renderFunction - Function with zero arguments that returns a [[VNode]] tree.
+     * @param renderFunction - Function with zero arguments that returns a {@link VNode} tree.
      */
     append(parentNode: Element, renderFunction: () => VNode): void;
     /**
      * Inserts a new DOM node using the result from the provided `renderFunction`.
      * The `renderFunction` will be invoked again to update the DOM when needed.
      * @param beforeNode - The node that the DOM Node is inserted before.
-     * @param renderFunction - Function with zero arguments that returns a [[VNode]] tree.
+     * @param renderFunction - Function with zero arguments that returns a {@link VNode} tree.
      */
     insertBefore(beforeNode: Element, renderFunction: () => VNode): void;
     /**
      * Merges a new DOM node using the result from the provided `renderFunction` with an existing DOM Node.
      * This means that the virtual DOM and real DOM 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
+     * Therefore the selector for the root {@link VNode} will be ignored, but its properties and children will be applied to the Element provided
      * The `renderFunction` will be invoked again to update the DOM when needed.
      * @param domNode - The existing element to adopt as the root of the new virtual DOM. Existing attributes and child nodes are preserved.
-     * @param renderFunction - Function with zero arguments that returns a [[VNode]] tree.
+     * @param renderFunction - Function with zero arguments that returns a {@link VNode} tree.
      */
     merge(domNode: Element, renderFunction: () => VNode): void;
     /**
      * Replaces an existing DOM node with the result from the provided `renderFunction`.
      * The `renderFunction` will be invoked again to update the DOM when needed.
      * @param domNode - The DOM node to replace.
-     * @param renderFunction - Function with zero arguments that returns a [[VNode]] tree.
+     * @param renderFunction - Function with zero arguments that returns a {@link VNode} tree.
      */
     replace(domNode: Element, renderFunction: () => VNode): void;
     /**
-     * Resumes the projector. Use this method to resume rendering after [[stop]] was called or an error occurred during rendering.
+     * Resumes the projector. Use this method to resume rendering after {@link stop} was called or an error occurred during rendering.
      */
     resume(): void;
     /**
      * Stops running the `renderFunction` to update the DOM. The `renderFunction` must have been
-     * registered using [[append]], [[merge]], [[insertBefore]] or [[replace]].
+     * registered using {@link append}, {@link merge}, {@link insertBefore} or {@link replace}.
      *
-     * @returns The [[Projection]] which was created using this `renderFunction`.
-     * The [[Projection]] contains a reference to the DOM Node that was rendered.
+     * @returns The {@link Projection} which was created using this `renderFunction`.
+     * The {@link Projection} contains a reference to the DOM Node that was rendered.
      */
     detach(renderFunction: () => VNode): Projection;
     /**
      * Stops the projector. This means that the registered `render` functions will not be called anymore.
      *
-     * Note that calling [[stop]] is not mandatory. A projector is a passive object that will get garbage collected
+     * Note that calling {@link stop} is not mandatory. A projector is a passive object that will get garbage collected
      * as usual if it is no longer in scope.
      */
     stop(): void;
 }
 /**
- * A virtual representation of a DOM Node. Maquette assumes that [[VNode]] objects are never modified externally.
- * Instances of [[VNode]] can be created using [[h]].
+ * A virtual representation of a DOM Node. Maquette assumes that {@link VNode} objects are never modified externally.
+ * Instances of {@link VNode} can be created using {@link h}.
  */
 export interface VNode {
     /**
@@ -75,19 +75,19 @@ export interface VNode {
      */
     readonly vnodeSelector: string;
     /**
-     * Object containing attributes, properties, event handlers and more, see [[h]].
+     * Object containing attributes, properties, event handlers and more, see {@link h}.
      */
     readonly properties: VNodeProperties | undefined;
     /**
-     * Array of [[VNode]]s to be used as children. This array is already flattened.
+     * Array of {@link VNode}s to be used as children. This array is already flattened.
      */
     readonly children: VNode[] | undefined;
     /**
-     * Used in a special case when a [[VNode]] only has one child node which is a text node. Only used in combination with children === undefined.
+     * Used in a special case when a {@link VNode} only has one child node which is a text node. Only used in combination with children === undefined.
      */
     readonly text: string | undefined;
     /**
-     * Used by maquette to store the domNode that was produced from this [[VNode]].
+     * Used by maquette to store the domNode that was produced from this {@link VNode}.
      */
     domNode: Node | null;
 }
@@ -102,7 +102,7 @@ export interface VNodeProperties {
      * The animation to perform when this node is added to an already existing parent.
      * {@link http://maquettejs.org/docs/animations.html More about animations}.
      * @param element - Element that was just added to the DOM.
-     * @param properties - The properties object that was supplied to the [[h]] method
+     * @param properties - The properties object that was supplied to the {@link h} method
      */
     enterAnimation?: (element: Element, properties?: VNodeProperties) => void;
     /**
@@ -111,7 +111,7 @@ export interface VNodeProperties {
      * @param removeElement - Function that removes the element from the DOM.
      * This argument is provided purely for convenience.
      * You may use this function to remove the element when the animation is done.
-     * @param properties - The properties object that was supplied to the [[h]] method that rendered this [[VNode]] the previous time.
+     * @param properties - The properties object that was supplied to the {@link h} method that rendered this {@link VNode} the previous time.
      */
     exitAnimation?(element: Element, removeElement: () => void, properties?: VNodeProperties): void;
     /**
@@ -119,17 +119,17 @@ export interface VNodeProperties {
      * This also includes attributes, styles, css classes. This callback is also invoked when node contains only text and that text changes.
      * {@link http://maquettejs.org/docs/animations.html More about animations}.
      * @param element - Element that was modified in the DOM.
-     * @param properties - The last properties object that was supplied to the [[h]] method
-     * @param previousProperties - The previous properties object that was supplied to the [[h]] method
+     * @param properties - The last properties object that was supplied to the {@link h} method
+     * @param previousProperties - The previous properties object that was supplied to the {@link h} method
      */
     updateAnimation?(element: Element, properties?: VNodeProperties, previousProperties?: VNodeProperties): void;
     /**
      * Callback that is executed after this node is added to the DOM. Child nodes and properties have
      * already been applied.
      * @param element - The element that was added to the DOM.
-     * @param projectionOptions - The projection options that were used, see [[createProjector]].
-     * @param vnodeSelector - The selector passed to the [[h]] function.
-     * @param properties - The properties passed to the [[h]] function.
+     * @param projectionOptions - The projection options that were used, see {@link createProjector}.
+     * @param vnodeSelector - The selector passed to the {@link h} function.
+     * @param properties - The properties passed to the {@link h} function.
      * @param children - The children that were created.
      */
     afterCreate?(element: Element, projectionOptions: ProjectionOptions, vnodeSelector: string, properties: VNodeProperties, children: VNode[] | undefined): void;
@@ -137,9 +137,9 @@ export interface VNodeProperties {
      * Callback that is executed every time this node may have been updated. Child nodes and properties
      * have already been updated.
      * @param element - The element that may have been updated in the DOM.
-     * @param projectionOptions - The projection options that were used, see [[createProjector]].
-     * @param vnodeSelector - The selector passed to the [[h]] function.
-     * @param properties - The properties passed to the [[h]] function.
+     * @param projectionOptions - The projection options that were used, see {@link createProjector}.
+     * @param vnodeSelector - The selector passed to the {@link h} function.
+     * @param properties - The properties passed to the {@link h} function.
      * @param children - The children for this node.
      */
     afterUpdate?(element: Element, projectionOptions: ProjectionOptions, vnodeSelector: string, properties: VNodeProperties, children: VNode[] | undefined): void;
@@ -154,13 +154,13 @@ export interface VNodeProperties {
      * When specified, the event handlers will be invoked with 'this' pointing to the value.
      * This is useful when using the prototype/class based implementation of MaquetteComponents.
      *
-     * When no [[key]] is present, this object is also used to uniquely identify a DOM node.
+     * When no {@link key} is present, this object is also used to uniquely identify a DOM node.
      */
     readonly bind?: unknown;
     /**
      * Used to uniquely identify a DOM node among siblings.
      * A key is required when there are more children with the same selector and these children are added or removed dynamically.
-     * NOTE: this does not have to be a string or number, a [[MaquetteComponent]] Object for instance is also common.
+     * NOTE: this does not have to be a string or number, a {@link MaquetteComponent} Object for instance is also common.
      */
     readonly key?: unknown;
     /**
@@ -281,26 +281,26 @@ export interface VNodeProperties {
     readonly [index: string]: any;
 }
 /**
- * Only needed for the definition of [[VNodeChild]].
+ * Only needed for the definition of {@link VNodeChild}.
  * @deprecated use VNodeChild
  */
 export interface VNodeChildren extends Array<VNodeChild> {
 }
 /**
- * These are valid values for the children parameter of the [[h]] function.
+ * These are valid values for the children parameter of the {@link h} function.
  */
 export type VNodeChild = string | VNode | Array<VNodeChild> | false | null | undefined;
 /**
- * Represents a [[VNode]] tree that has been rendered to a real DOM tree.
+ * Represents a {@link VNode} tree that has been rendered to a real DOM tree.
  */
 export interface Projection {
     /**
-     * The DOM node that is used as the root of this [[Projection]].
+     * The DOM node that is used as the root of this {@link Projection}.
      */
     readonly domNode: Element;
     /**
      * Updates the real DOM to match the new virtual DOM tree.
-     * @param updatedVnode The updated virtual DOM tree. Note: The selector for the root of the [[VNode]] tree may not change.
+     * @param updatedVnode The updated virtual DOM tree. Note: The selector for the root of the {@link VNode} tree may not change.
      */
     update(updatedVnode: VNode): void;
     getLastRender(): VNode;
@@ -313,7 +313,7 @@ export type EventHandlerInterceptor = (propertyName: string, eventHandler: Event
 export type PerformanceLoggerEvent = "domEvent" | "domEventProcessed" | "renderStart" | "rendered" | "patched" | "renderDone";
 export type ProjectorPerformanceLogger = (eventType: PerformanceLoggerEvent, trigger: Event | undefined) => void;
 /**
- * Options that may be passed when creating the [[Projector]]
+ * Options that may be passed when creating the {@link Projector}
  */
 export interface ProjectorOptions {
     /**
@@ -339,10 +339,10 @@ export interface ProjectionOptions extends ProjectorOptions {
     /**
      * May be used to intercept registration of event-handlers.
      *
-     * Used by the [[Projector]] to wrap eventHandler-calls to call {@link Projector#scheduleRender} as well.
+     * Used by the {@link Projector} to wrap eventHandler-calls to call {@link Projector#scheduleRender} as well.
      *
      * @param propertyName             The name of the property to be assigned, for example onclick
-     * @param eventHandler             The function that was registered on the [[VNode]]
+     * @param eventHandler             The function that was registered on the {@link VNode}
      * @param domNode                  The real DOM element
      * @param properties               The whole set of properties that was put on the VNode
      * @returns                        The function that is to be placed on the DOM node as the event handler, instead of `eventHandler`.
@@ -353,21 +353,21 @@ export interface ProjectionOptions extends ProjectorOptions {
  * Keeps an array of result objects synchronized with an array of source objects.
  * See {@link http://maquettejs.org/docs/arrays.html Working with arrays}.
  *
- * Mapping provides a [[map]] function that updates its [[results]].
- * The [[map]] function can be called multiple times and the results will get created, removed and updated accordingly.
+ * Mapping provides a {@link map} function that updates its {@link results}.
+ * The {@link map} function can be called multiple times and the results will get created, removed and updated accordingly.
  * A Mapping can be used to keep an array of components (objects with a `render` method) synchronized with an array of data.
- * Instances of Mapping can be created using [[createMapping]].
+ * Instances of Mapping can be created using {@link createMapping}.
  *
  * @param <Source>   The type of source elements. Usually the data type.
  * @param <Target>   The type of target elements. Usually the component type.
  */
 export interface Mapping<Source, Target> {
     /**
-     * The array of results. These results will be synchronized with the latest array of sources that were provided using [[map]].
+     * The array of results. These results will be synchronized with the latest array of sources that were provided using {@link map}.
      */
     results: Target[];
     /**
-     * Maps a new array of sources and updates [[results]].
+     * Maps a new array of sources and updates {@link results}.
      *
      * @param newSources   The new array of sources.
      */
@@ -377,7 +377,7 @@ export interface Mapping<Source, Target> {
  * A CalculationCache object remembers the previous outcome of a calculation along with the inputs.
  * On subsequent calls the previous outcome is returned if the inputs are identical.
  * This object can be used to bypass both rendering and diffing of a virtual DOM subtree.
- * Instances of CalculationCache can be created using [[createCache]].
+ * Instances of CalculationCache can be created using {@link createCache}.
  *
  * @param <Result> The type of the value that is cached.
  */
@@ -392,12 +392,12 @@ export interface CalculationCache<Result> {
      * Objects in the inputs array are compared using ===.
      * @param inputs - Array of objects that are to be compared using === with the inputs from the previous invocation.
      * These objects are assumed to be immutable primitive values.
-     * @param calculation - Function that takes zero arguments and returns an object (A [[VNode]] presumably) that can be cached.
+     * @param calculation - Function that takes zero arguments and returns an object (A {@link VNode} presumably) that can be cached.
      */
     result(inputs: unknown[], calculation: () => Result): Result;
 }
 /**
- * @deprecated Use [[MaquetteComponent]] instead.
+ * @deprecated Use {@link MaquetteComponent} instead.
  * @since 3.0
  */
 export interface Component {
@@ -407,8 +407,8 @@ export interface Component {
  * A component is a pattern with which you can split up your web application into self-contained parts.
  *
  * A component may contain other components.
- * This can be achieved by calling the subcomponents `render` functions during the [[render]] function and by using the
- * resulting [[VNode]]s in the return value.
+ * This can be achieved by calling the subcomponents `render` functions during the {@link render} function and by using the
+ * resulting {@link VNode}s in the return value.
  *
  * This interface is not used anywhere in the maquette sourcecode, but this is a widely used pattern.
  */
@@ -420,55 +420,55 @@ export interface MaquetteComponent {
 }
 export interface Dom {
     /**
-     * Creates a real DOM tree from `vnode`. The [[Projection]] object returned will contain the resulting DOM Node in
-     * its [[Projection.domNode|domNode]] property.
-     * This is a low-level method. Users will typically use a [[Projector]] instead.
-     * @param vnode - The root of the virtual DOM tree that was created using the [[h]] function. NOTE: [[VNode]]
+     * Creates a real DOM tree from `vnode`. The {@link Projection} object returned will contain the resulting DOM Node in
+     * its {@link Projection.domNode | domNode} property.
+     * This is a low-level method. Users will typically use a {@link Projector} instead.
+     * @param vnode - The root of the virtual DOM tree that was created using the {@link h} function. NOTE: {@link VNode}
      * objects may only be rendered once.
      * @param projectionOptions - Options to be used to create and update the projection.
-     * @returns The [[Projection]] which also contains the DOM Node that was created.
+     * @returns The {@link Projection} which also contains the DOM Node that was created.
      */
     create(vnode: VNode, projectionOptions?: ProjectionOptions): Projection;
     /**
-     * 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.
+     * Appends a new child node to the DOM which is generated from a {@link VNode}.
+     * This is a low-level method. Users will typically use a {@link Projector} instead.
      * @param parentNode - The parent node for the new child node.
-     * @param vnode - The root of the virtual DOM tree that was created using the [[h]] function. NOTE: [[VNode]]
+     * @param vnode - The root of the virtual DOM tree that was created using the {@link h} function. NOTE: {@link VNode}
      * objects may only be rendered once.
-     * @param projectionOptions - Options to be used to create and update the [[Projection]].
-     * @returns The [[Projection]] that was created.
+     * @param projectionOptions - Options to be used to create and update the {@link Projection}.
+     * @returns The {@link Projection} that was created.
      */
     append(parentNode: Element, vnode: VNode, projectionOptions?: ProjectionOptions): Projection;
     /**
-     * Inserts a new DOM node which is generated from a [[VNode]].
-     * This is a low-level method. Users wil typically use a [[Projector]] instead.
+     * Inserts a new DOM node which is generated from a {@link VNode}.
+     * This is a low-level method. Users wil typically use a {@link Projector} instead.
      * @param beforeNode - The node that the DOM Node is inserted before.
-     * @param vnode - The root of the virtual DOM tree that was created using the [[h]] function.
-     * NOTE: [[VNode]] objects may only be rendered once.
-     * @param projectionOptions - Options to be used to create and update the projection, see [[createProjector]].
-     * @returns The [[Projection]] that was created.
+     * @param vnode - The root of the virtual DOM tree that was created using the {@link h} function.
+     * NOTE: {@link VNode} objects may only be rendered once.
+     * @param projectionOptions - Options to be used to create and update the projection, see {@link createProjector}.
+     * @returns The {@link Projection} that was created.
      */
     insertBefore(beforeNode: Element, vnode: VNode, projectionOptions?: ProjectionOptions): Projection;
     /**
-     * Merges a new DOM node which is generated from a [[VNode]] with an existing DOM Node.
+     * Merges a new DOM node which is generated from a {@link 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.
+     * Therefore the selector for the root {@link 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 {@link Projector} instead.
      * @param element - The existing element to adopt as the root of the new virtual DOM. Existing attributes and child nodes are preserved.
-     * @param vnode - The root of the virtual DOM tree that was created using the [[h]] function. NOTE: [[VNode]] objects
+     * @param vnode - The root of the virtual DOM tree that was created using the {@link h} function. NOTE: {@link VNode} objects
      * may only be rendered once.
-     * @param projectionOptions - Options to be used to create and update the projection, see [[createProjector]].
-     * @returns The [[Projection]] that was created.
+     * @param projectionOptions - Options to be used to create and update the projection, see {@link createProjector}.
+     * @returns The {@link Projection} that was created.
      */
     merge(element: Element, vnode: VNode, projectionOptions?: ProjectionOptions): Projection;
     /**
-     * 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.
-     * @param element - The node for the [[VNode]] to replace.
-     * @param vnode - The root of the virtual DOM tree that was created using the [[h]] function. NOTE: [[VNode]]
+     * Replaces an existing DOM node with a node generated from a {@link VNode}.
+     * This is a low-level method. Users will typically use a {@link Projector} instead.
+     * @param element - The node for the {@link VNode} to replace.
+     * @param vnode - The root of the virtual DOM tree that was created using the {@link h} function. NOTE: {@link VNode}
      * objects may only be rendered once.
-     * @param projectionOptions - Options to be used to create and update the [[Projection]].
-     * @returns The [[Projection]] that was created.
+     * @param projectionOptions - Options to be used to create and update the {@link Projection}.
+     * @returns The {@link Projection} that was created.
      */
     replace(element: Element, vnode: VNode, projectionOptions?: ProjectionOptions): Projection;
 }

package/dist/interfaces.js.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../src/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["export interface ProjectorService {\n  /**\n   * Instructs the projector to re-render to the DOM at the next animation-frame using the registered `render` functions.\n   * This method is automatically called for you when event-handlers that are registered in the [[VNode]]s are invoked.\n   *\n   * You need to call this method when timeouts expire, when AJAX responses arrive or other asynchronous actions happen.\n   */\n  scheduleRender(): void;\n  /**\n   * Synchronously re-renders to the DOM. You should normally call the `scheduleRender()` function to keep the\n   * user interface more performant. There is however one good reason to call renderNow(),\n   * when you want to put the focus into a newly created element in iOS.\n   * This is only allowed when triggered by a user-event, not during requestAnimationFrame.\n   */\n  renderNow(): void;\n}\n\nexport interface Projector extends ProjectorService {\n  /**\n   * Appends a new child node to the DOM using the result from the provided `renderFunction`.\n   * The `renderFunction` will be invoked again to update the DOM when needed.\n   * @param parentNode - The parent node for the new child node.\n   * @param renderFunction - Function with zero arguments that returns a [[VNode]] tree.\n   */\n  append(parentNode: Element, renderFunction: () => VNode): void;\n  /**\n   * Inserts a new DOM node using the result from the provided `renderFunction`.\n   * The `renderFunction` will be invoked again to update the DOM when needed.\n   * @param beforeNode - The node that the DOM Node is inserted before.\n   * @param renderFunction - Function with zero arguments that returns a [[VNode]] tree.\n   */\n  insertBefore(beforeNode: Element, renderFunction: () => VNode): void;\n  /**\n   * Merges a new DOM node using the result from the provided `renderFunction` with an existing DOM Node.\n   * This means that the virtual DOM and real DOM have one overlapping element.\n   * Therefore the selector for the root [[VNode]] will be ignored, but its properties and children will be applied to the Element provided\n   * The `renderFunction` will be invoked again to update the DOM when needed.\n   * @param domNode - The existing element to adopt as the root of the new virtual DOM. Existing attributes and child nodes are preserved.\n   * @param renderFunction - Function with zero arguments that returns a [[VNode]] tree.\n   */\n  merge(domNode: Element, renderFunction: () => VNode): void;\n  /**\n   * Replaces an existing DOM node with the result from the provided `renderFunction`.\n   * The `renderFunction` will be invoked again to update the DOM when needed.\n   * @param domNode - The DOM node to replace.\n   * @param renderFunction - Function with zero arguments that returns a [[VNode]] tree.\n   */\n  replace(domNode: Element, renderFunction: () => VNode): void;\n  /**\n   * Resumes the projector. Use this method to resume rendering after [[stop]] was called or an error occurred during rendering.\n   */\n  resume(): void;\n  /**\n   * Stops running the `renderFunction` to update the DOM. The `renderFunction` must have been\n   * registered using [[append]], [[merge]], [[insertBefore]] or [[replace]].\n   *\n   * @returns The [[Projection]] which was created using this `renderFunction`.\n   * The [[Projection]] contains a reference to the DOM Node that was rendered.\n   */\n  detach(renderFunction: () => VNode): Projection;\n  /**\n   * Stops the projector. This means that the registered `render` functions will not be called anymore.\n   *\n   * Note that calling [[stop]] is not mandatory. A projector is a passive object that will get garbage collected\n   * as usual if it is no longer in scope.\n   */\n  stop(): void;\n}\n\n/**\n * A virtual representation of a DOM Node. Maquette assumes that [[VNode]] objects are never modified externally.\n * Instances of [[VNode]] can be created using [[h]].\n */\nexport interface VNode {\n  /**\n   * The CSS selector containing tagname, css classnames and id. An empty string is used to denote a text node.\n   */\n  readonly vnodeSelector: string;\n  /**\n   * Object containing attributes, properties, event handlers and more, see [[h]].\n   */\n  readonly properties: VNodeProperties | undefined;\n  /**\n   * Array of [[VNode]]s to be used as children. This array is already flattened.\n   */\n  readonly children: VNode[] | undefined;\n  /**\n   * Used in a special case when a [[VNode]] only has one child node which is a text node. Only used in combination with children === undefined.\n   */\n  readonly text: string | undefined;\n  /**\n   * Used by maquette to store the domNode that was produced from this [[VNode]].\n   */\n  domNode: Node | null;\n}\n\n/**\n * Object containing attributes, properties, event handlers and more that can be put on DOM nodes.\n *\n * For your convenience, all common attributes, properties and event handlers are listed here and are\n * type-checked when using Typescript.\n */\nexport interface VNodeProperties {\n  /**\n   * The animation to perform when this node is added to an already existing parent.\n   * {@link http://maquettejs.org/docs/animations.html More about animations}.\n   * @param element - Element that was just added to the DOM.\n   * @param properties - The properties object that was supplied to the [[h]] method\n   */\n  enterAnimation?: (element: Element, properties?: VNodeProperties) => void;\n  /**\n   * The animation to perform when this node is removed while its parent remains.\n   * @param element - Element that ought to be removed from to the DOM.\n   * @param removeElement - Function that removes the element from the DOM.\n   * This argument is provided purely for convenience.\n   * You may use this function to remove the element when the animation is done.\n   * @param properties - The properties object that was supplied to the [[h]] method that rendered this [[VNode]] the previous time.\n   */\n  exitAnimation?(element: Element, removeElement: () => void, properties?: VNodeProperties): void;\n  /**\n   * The animation to perform when the properties of this node change.\n   * This also includes attributes, styles, css classes. This callback is also invoked when node contains only text and that text changes.\n   * {@link http://maquettejs.org/docs/animations.html More about animations}.\n   * @param element - Element that was modified in the DOM.\n   * @param properties - The last properties object that was supplied to the [[h]] method\n   * @param previousProperties - The previous properties object that was supplied to the [[h]] method\n   */\n  updateAnimation?(\n    element: Element,\n    properties?: VNodeProperties,\n    previousProperties?: VNodeProperties\n  ): void;\n  /**\n   * Callback that is executed after this node is added to the DOM. Child nodes and properties have\n   * already been applied.\n   * @param element - The element that was added to the DOM.\n   * @param projectionOptions - The projection options that were used, see [[createProjector]].\n   * @param vnodeSelector - The selector passed to the [[h]] function.\n   * @param properties - The properties passed to the [[h]] function.\n   * @param children - The children that were created.\n   */\n  afterCreate?(\n    element: Element,\n    projectionOptions: ProjectionOptions,\n    vnodeSelector: string,\n    properties: VNodeProperties,\n    children: VNode[] | undefined\n  ): void;\n  /**\n   * Callback that is executed every time this node may have been updated. Child nodes and properties\n   * have already been updated.\n   * @param element - The element that may have been updated in the DOM.\n   * @param projectionOptions - The projection options that were used, see [[createProjector]].\n   * @param vnodeSelector - The selector passed to the [[h]] function.\n   * @param properties - The properties passed to the [[h]] function.\n   * @param children - The children for this node.\n   */\n  afterUpdate?(\n    element: Element,\n    projectionOptions: ProjectionOptions,\n    vnodeSelector: string,\n    properties: VNodeProperties,\n    children: VNode[] | undefined\n  ): void;\n\n  /**\n   * Callback that is called when a node has been removed from the tree.\n   * The callback is called during idle state or after a timeout (fallback).\n   * {@link https://maquettejs.org/docs/dom-node-removal.html More info}\n   * @param element - The element that has been removed from the DOM.\n   */\n  afterRemoved?(element: Element): void;\n\n  /**\n   * When specified, the event handlers will be invoked with 'this' pointing to the value.\n   * This is useful when using the prototype/class based implementation of MaquetteComponents.\n   *\n   * When no [[key]] is present, this object is also used to uniquely identify a DOM node.\n   */\n  readonly bind?: unknown;\n\n  /**\n   * Used to uniquely identify a DOM node among siblings.\n   * A key is required when there are more children with the same selector and these children are added or removed dynamically.\n   * NOTE: this does not have to be a string or number, a [[MaquetteComponent]] Object for instance is also common.\n   */\n  readonly key?: unknown;\n\n  /**\n   * An object containing event handlers to attach using addEventListener.\n   * Note that `projector.scheduleRender()` is called automatically when these event handlers are invoked.\n   */\n  readonly on?: {\n    [eventName: string]:\n      | EventHandler\n      | {\n          listener: EventHandler;\n          options: { capture?: boolean; passive?: boolean; once?: boolean };\n        };\n  };\n\n  /**\n   * An object containing event handlers to attach using addEventListener.\n   * Note that `projector.scheduleRender()` is called automatically when these event handlers are invoked.\n   */\n  readonly onCapture?: { [eventName: string]: EventHandler };\n\n  /**\n   * An object literal like `{important:true}` which allows css classes, like `important` to be added and removed\n   * dynamically.\n   */\n  readonly classes?: { [index: string]: boolean | null | undefined };\n\n  /**\n   * An object literal like `{height:'100px'}` which allows styles to be changed dynamically. All values must be strings.\n   */\n  readonly styles?: Partial<CSSStyleDeclaration> | { [cssVariable: string]: string };\n\n  /**\n   * For custom elements\n   */\n  readonly is?: string;\n\n  // From Element\n  ontouchcancel?(ev: TouchEvent): boolean | void;\n  ontouchend?(ev: TouchEvent): boolean | void;\n  ontouchmove?(ev: TouchEvent): boolean | void;\n  ontouchstart?(ev: TouchEvent): boolean | void;\n  // From HTMLFormElement\n  readonly action?: string;\n  readonly encoding?: string;\n  readonly enctype?: string;\n  readonly method?: string;\n  readonly name?: string;\n  readonly target?: string;\n  // From HTMLAnchorElement\n  readonly href?: string;\n  readonly rel?: string;\n  // From HTMLElement\n  onblur?(ev: FocusEvent): boolean | void;\n  onchange?(ev: Event): boolean | void;\n  onclick?(ev: MouseEvent): boolean | void;\n  ondblclick?(ev: MouseEvent): boolean | void;\n  ondrag?(ev: DragEvent): boolean | void;\n  ondragend?(ev: DragEvent): boolean | void;\n  ondragenter?(ev: DragEvent): boolean | void;\n  ondragleave?(ev: DragEvent): boolean | void;\n  ondragover?(ev: DragEvent): boolean | void;\n  ondragstart?(ev: DragEvent): boolean | void;\n  ondrop?(ev: DragEvent): boolean | void;\n  onfocus?(ev: FocusEvent): boolean | void;\n  oninput?(ev: Event): boolean | void;\n  onkeydown?(ev: KeyboardEvent): boolean | void;\n  onkeypress?(ev: KeyboardEvent): boolean | void;\n  onkeyup?(ev: KeyboardEvent): boolean | void;\n  onload?(ev: Event): boolean | void;\n  onmousedown?(ev: MouseEvent): boolean | void;\n  onmouseenter?(ev: MouseEvent): boolean | void;\n  onmouseleave?(ev: MouseEvent): boolean | void;\n  onmousemove?(ev: MouseEvent): boolean | void;\n  onmouseout?(ev: MouseEvent): boolean | void;\n  onmouseover?(ev: MouseEvent): boolean | void;\n  onmouseup?(ev: MouseEvent): boolean | void;\n  onmousewheel?(ev: WheelEvent): boolean | void;\n  onscroll?(ev: UIEvent): boolean | void;\n  onsubmit?(ev: Event): boolean | void;\n  onpointercancel?(ev: PointerEvent): boolean | void;\n  onpointerdown?(ev: PointerEvent): boolean | void;\n  onpointerenter?(ev: PointerEvent): boolean | void;\n  onpointerleave?(ev: PointerEvent): boolean | void;\n  onpointermove?(ev: PointerEvent): boolean | void;\n  onpointerout?(ev: PointerEvent): boolean | void;\n  onpointerover?(ev: PointerEvent): boolean | void;\n  onpointerup?(ev: PointerEvent): boolean | void;\n  readonly spellcheck?: boolean;\n  readonly tabIndex?: number;\n  readonly disabled?: boolean;\n  readonly title?: string;\n  readonly accessKey?: string;\n  readonly class?: string;\n  readonly id?: string;\n  readonly draggable?: boolean;\n  // From HTMLInputElement\n  readonly type?: string;\n  readonly autocomplete?: string;\n  readonly checked?: boolean;\n  readonly placeholder?: string;\n  readonly readOnly?: boolean;\n  readonly src?: string;\n  readonly value?: string;\n  // From HTMLImageElement\n  readonly alt?: string;\n  readonly srcset?: string;\n  /**\n   * Puts a non-interactive string of html inside the DOM node.\n   *\n   * Note: if you use innerHTML, maquette cannot protect you from XSS vulnerabilities and you must make sure that the innerHTML value is safe.\n   */\n  readonly innerHTML?: string;\n\n  /**\n   * Do not use className, use class instead\n   */\n  // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents\n  readonly className?: never | \"Hint: do not use `className`, use `class` instead\";\n\n  /**\n   * Everything that is not explicitly listed (properties and attributes that are either uncommon or custom).\n   */\n  readonly [index: string]: any;\n}\n\n/**\n * Only needed for the definition of [[VNodeChild]].\n * @deprecated use VNodeChild\n */\nexport interface VNodeChildren extends Array<VNodeChild> {}\n/**\n * These are valid values for the children parameter of the [[h]] function.\n */\nexport type VNodeChild = string | VNode | Array<VNodeChild> | false | null | undefined;\n\n/**\n * Represents a [[VNode]] tree that has been rendered to a real DOM tree.\n */\nexport interface Projection {\n  /**\n   * The DOM node that is used as the root of this [[Projection]].\n   */\n  readonly domNode: Element;\n  /**\n   * Updates the real DOM to match the new virtual DOM tree.\n   * @param updatedVnode The updated virtual DOM tree. Note: The selector for the root of the [[VNode]] tree may not change.\n   */\n  update(updatedVnode: VNode): void;\n  getLastRender(): VNode;\n}\n\nexport type EventHandler = (this: Node, event: Event) => boolean | undefined | void;\n\n/**\n * Options that influence how the DOM is rendered and updated.\n */\nexport type EventHandlerInterceptor = (\n  propertyName: string,\n  eventHandler: EventHandler,\n  domNode: Node,\n  properties: VNodeProperties\n) => undefined | EventHandler;\n\nexport type PerformanceLoggerEvent =\n  | \"domEvent\"\n  | \"domEventProcessed\"\n  | \"renderStart\"\n  | \"rendered\"\n  | \"patched\"\n  | \"renderDone\";\nexport type ProjectorPerformanceLogger = (\n  eventType: PerformanceLoggerEvent,\n  trigger: Event | undefined\n) => void;\n/**\n * Options that may be passed when creating the [[Projector]]\n */\nexport interface ProjectorOptions {\n  /**\n   * Can be used to log performance metrics\n   */\n  performanceLogger?: ProjectorPerformanceLogger;\n\n  /**\n   * May be used to add vendor prefixes when applying inline styles when needed.\n   * This function is called when {@link VNodeProperties#styles} is used.\n   * This function should execute `domNode.style[styleName] = value` or do something smarter.\n   *\n   * @param domNode   The DOM Node that needs to receive the style\n   * @param styleName The name of the style that should be applied, for example `transform`.\n   * @param value     The value of this style, for example `rotate(45deg)`.\n   */\n  styleApplyer?(domNode: HTMLElement, styleName: string, value: string): void;\n}\n\nexport interface ProjectionOptions extends ProjectorOptions {\n  /**\n   * Only for internal use. Used for rendering SVG Nodes.\n   */\n  readonly namespace?: string;\n  /**\n   * May be used to intercept registration of event-handlers.\n   *\n   * Used by the [[Projector]] to wrap eventHandler-calls to call {@link Projector#scheduleRender} as well.\n   *\n   * @param propertyName             The name of the property to be assigned, for example onclick\n   * @param eventHandler             The function that was registered on the [[VNode]]\n   * @param domNode                  The real DOM element\n   * @param properties               The whole set of properties that was put on the VNode\n   * @returns                        The function that is to be placed on the DOM node as the event handler, instead of `eventHandler`.\n   */\n  eventHandlerInterceptor?: EventHandlerInterceptor;\n}\n\n/**\n * Keeps an array of result objects synchronized with an array of source objects.\n * See {@link http://maquettejs.org/docs/arrays.html Working with arrays}.\n *\n * Mapping provides a [[map]] function that updates its [[results]].\n * The [[map]] function can be called multiple times and the results will get created, removed and updated accordingly.\n * A Mapping can be used to keep an array of components (objects with a `render` method) synchronized with an array of data.\n * Instances of Mapping can be created using [[createMapping]].\n *\n * @param <Source>   The type of source elements. Usually the data type.\n * @param <Target>   The type of target elements. Usually the component type.\n */\nexport interface Mapping<Source, Target> {\n  /**\n   * The array of results. These results will be synchronized with the latest array of sources that were provided using [[map]].\n   */\n  results: Target[];\n  /**\n   * Maps a new array of sources and updates [[results]].\n   *\n   * @param newSources   The new array of sources.\n   */\n  map(newSources: Source[]): void;\n}\n\n/**\n * A CalculationCache object remembers the previous outcome of a calculation along with the inputs.\n * On subsequent calls the previous outcome is returned if the inputs are identical.\n * This object can be used to bypass both rendering and diffing of a virtual DOM subtree.\n * Instances of CalculationCache can be created using [[createCache]].\n *\n * @param <Result> The type of the value that is cached.\n */\nexport interface CalculationCache<Result> {\n  /**\n   * Manually invalidates the cached outcome.\n   */\n  invalidate(): void;\n  /**\n   * If the inputs array matches the inputs array from the previous invocation, this method returns the result of the previous invocation.\n   * Otherwise, the calculation function is invoked and its result is cached and returned.\n   * Objects in the inputs array are compared using ===.\n   * @param inputs - Array of objects that are to be compared using === with the inputs from the previous invocation.\n   * These objects are assumed to be immutable primitive values.\n   * @param calculation - Function that takes zero arguments and returns an object (A [[VNode]] presumably) that can be cached.\n   */\n  result(inputs: unknown[], calculation: () => Result): Result;\n}\n\n/**\n * @deprecated Use [[MaquetteComponent]] instead.\n * @since 3.0\n */\nexport interface Component {\n  renderMaquette(): VNode | null | undefined;\n}\n\n/**\n * A component is a pattern with which you can split up your web application into self-contained parts.\n *\n * A component may contain other components.\n * This can be achieved by calling the subcomponents `render` functions during the [[render]] function and by using the\n * resulting [[VNode]]s in the return value.\n *\n * This interface is not used anywhere in the maquette sourcecode, but this is a widely used pattern.\n */\nexport interface MaquetteComponent {\n  /**\n   * A function that returns the DOM representation of the component.\n   */\n  render(): VNode | null | undefined;\n}\n\nexport interface Dom {\n  /**\n   * Creates a real DOM tree from `vnode`. The [[Projection]] object returned will contain the resulting DOM Node in\n   * its [[Projection.domNode|domNode]] property.\n   * This is a low-level method. Users will typically use a [[Projector]] instead.\n   * @param vnode - The root of the virtual DOM tree that was created using the [[h]] function. NOTE: [[VNode]]\n   * objects may only be rendered once.\n   * @param projectionOptions - Options to be used to create and update the projection.\n   * @returns The [[Projection]] which also contains the DOM Node that was created.\n   */\n  create(vnode: VNode, projectionOptions?: ProjectionOptions): Projection;\n\n  /**\n   * Appends a new child node to the DOM which is generated from a [[VNode]].\n   * This is a low-level method. Users will typically use a [[Projector]] instead.\n   * @param parentNode - The parent node for the new child node.\n   * @param vnode - The root of the virtual DOM tree that was created using the [[h]] function. NOTE: [[VNode]]\n   * objects may only be rendered once.\n   * @param projectionOptions - Options to be used to create and update the [[Projection]].\n   * @returns The [[Projection]] that was created.\n   */\n  append(parentNode: Element, vnode: VNode, projectionOptions?: ProjectionOptions): Projection;\n\n  /**\n   * Inserts a new DOM node which is generated from a [[VNode]].\n   * This is a low-level method. Users wil typically use a [[Projector]] instead.\n   * @param beforeNode - The node that the DOM Node is inserted before.\n   * @param vnode - The root of the virtual DOM tree that was created using the [[h]] function.\n   * NOTE: [[VNode]] objects may only be rendered once.\n   * @param projectionOptions - Options to be used to create and update the projection, see [[createProjector]].\n   * @returns The [[Projection]] that was created.\n   */\n  insertBefore(\n    beforeNode: Element,\n    vnode: VNode,\n    projectionOptions?: ProjectionOptions\n  ): Projection;\n\n  /**\n   * Merges a new DOM node which is generated from a [[VNode]] with an existing DOM Node.\n   * This means that the virtual DOM and the real DOM will have one overlapping element.\n   * Therefore the selector for the root [[VNode]] will be ignored, but its properties and children will be applied to the Element provided.\n   * This is a low-level method. Users wil typically use a [[Projector]] instead.\n   * @param element - The existing element to adopt as the root of the new virtual DOM. Existing attributes and child nodes are preserved.\n   * @param vnode - The root of the virtual DOM tree that was created using the [[h]] function. NOTE: [[VNode]] objects\n   * may only be rendered once.\n   * @param projectionOptions - Options to be used to create and update the projection, see [[createProjector]].\n   * @returns The [[Projection]] that was created.\n   */\n  merge(element: Element, vnode: VNode, projectionOptions?: ProjectionOptions): Projection;\n\n  /**\n   * Replaces an existing DOM node with a node generated from a [[VNode]].\n   * This is a low-level method. Users will typically use a [[Projector]] instead.\n   * @param element - The node for the [[VNode]] to replace.\n   * @param vnode - The root of the virtual DOM tree that was created using the [[h]] function. NOTE: [[VNode]]\n   * objects may only be rendered once.\n   * @param projectionOptions - Options to be used to create and update the [[Projection]].\n   * @returns The [[Projection]] that was created.\n   */\n  replace(element: Element, vnode: VNode, projectionOptions?: ProjectionOptions): Projection;\n}\n"]}
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../src/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["export interface ProjectorService {\n  /**\n   * Instructs the projector to re-render to the DOM at the next animation-frame using the registered `render` functions.\n   * This method is automatically called for you when event-handlers that are registered in the {@link VNode}s are invoked.\n   *\n   * You need to call this method when timeouts expire, when AJAX responses arrive or other asynchronous actions happen.\n   */\n  scheduleRender(): void;\n  /**\n   * Synchronously re-renders to the DOM. You should normally call the `scheduleRender()` function to keep the\n   * user interface more performant. There is however one good reason to call renderNow(),\n   * when you want to put the focus into a newly created element in iOS.\n   * This is only allowed when triggered by a user-event, not during requestAnimationFrame.\n   */\n  renderNow(): void;\n}\n\nexport interface Projector extends ProjectorService {\n  /**\n   * Appends a new child node to the DOM using the result from the provided `renderFunction`.\n   * The `renderFunction` will be invoked again to update the DOM when needed.\n   * @param parentNode - The parent node for the new child node.\n   * @param renderFunction - Function with zero arguments that returns a {@link VNode} tree.\n   */\n  append(parentNode: Element, renderFunction: () => VNode): void;\n  /**\n   * Inserts a new DOM node using the result from the provided `renderFunction`.\n   * The `renderFunction` will be invoked again to update the DOM when needed.\n   * @param beforeNode - The node that the DOM Node is inserted before.\n   * @param renderFunction - Function with zero arguments that returns a {@link VNode} tree.\n   */\n  insertBefore(beforeNode: Element, renderFunction: () => VNode): void;\n  /**\n   * Merges a new DOM node using the result from the provided `renderFunction` with an existing DOM Node.\n   * This means that the virtual DOM and real DOM have one overlapping element.\n   * Therefore the selector for the root {@link VNode} will be ignored, but its properties and children will be applied to the Element provided\n   * The `renderFunction` will be invoked again to update the DOM when needed.\n   * @param domNode - The existing element to adopt as the root of the new virtual DOM. Existing attributes and child nodes are preserved.\n   * @param renderFunction - Function with zero arguments that returns a {@link VNode} tree.\n   */\n  merge(domNode: Element, renderFunction: () => VNode): void;\n  /**\n   * Replaces an existing DOM node with the result from the provided `renderFunction`.\n   * The `renderFunction` will be invoked again to update the DOM when needed.\n   * @param domNode - The DOM node to replace.\n   * @param renderFunction - Function with zero arguments that returns a {@link VNode} tree.\n   */\n  replace(domNode: Element, renderFunction: () => VNode): void;\n  /**\n   * Resumes the projector. Use this method to resume rendering after {@link stop} was called or an error occurred during rendering.\n   */\n  resume(): void;\n  /**\n   * Stops running the `renderFunction` to update the DOM. The `renderFunction` must have been\n   * registered using {@link append}, {@link merge}, {@link insertBefore} or {@link replace}.\n   *\n   * @returns The {@link Projection} which was created using this `renderFunction`.\n   * The {@link Projection} contains a reference to the DOM Node that was rendered.\n   */\n  detach(renderFunction: () => VNode): Projection;\n  /**\n   * Stops the projector. This means that the registered `render` functions will not be called anymore.\n   *\n   * Note that calling {@link stop} is not mandatory. A projector is a passive object that will get garbage collected\n   * as usual if it is no longer in scope.\n   */\n  stop(): void;\n}\n\n/**\n * A virtual representation of a DOM Node. Maquette assumes that {@link VNode} objects are never modified externally.\n * Instances of {@link VNode} can be created using {@link h}.\n */\nexport interface VNode {\n  /**\n   * The CSS selector containing tagname, css classnames and id. An empty string is used to denote a text node.\n   */\n  readonly vnodeSelector: string;\n  /**\n   * Object containing attributes, properties, event handlers and more, see {@link h}.\n   */\n  readonly properties: VNodeProperties | undefined;\n  /**\n   * Array of {@link VNode}s to be used as children. This array is already flattened.\n   */\n  readonly children: VNode[] | undefined;\n  /**\n   * Used in a special case when a {@link VNode} only has one child node which is a text node. Only used in combination with children === undefined.\n   */\n  readonly text: string | undefined;\n  /**\n   * Used by maquette to store the domNode that was produced from this {@link VNode}.\n   */\n  domNode: Node | null;\n}\n\n/**\n * Object containing attributes, properties, event handlers and more that can be put on DOM nodes.\n *\n * For your convenience, all common attributes, properties and event handlers are listed here and are\n * type-checked when using Typescript.\n */\nexport interface VNodeProperties {\n  /**\n   * The animation to perform when this node is added to an already existing parent.\n   * {@link http://maquettejs.org/docs/animations.html More about animations}.\n   * @param element - Element that was just added to the DOM.\n   * @param properties - The properties object that was supplied to the {@link h} method\n   */\n  enterAnimation?: (element: Element, properties?: VNodeProperties) => void;\n  /**\n   * The animation to perform when this node is removed while its parent remains.\n   * @param element - Element that ought to be removed from to the DOM.\n   * @param removeElement - Function that removes the element from the DOM.\n   * This argument is provided purely for convenience.\n   * You may use this function to remove the element when the animation is done.\n   * @param properties - The properties object that was supplied to the {@link h} method that rendered this {@link VNode} the previous time.\n   */\n  exitAnimation?(element: Element, removeElement: () => void, properties?: VNodeProperties): void;\n  /**\n   * The animation to perform when the properties of this node change.\n   * This also includes attributes, styles, css classes. This callback is also invoked when node contains only text and that text changes.\n   * {@link http://maquettejs.org/docs/animations.html More about animations}.\n   * @param element - Element that was modified in the DOM.\n   * @param properties - The last properties object that was supplied to the {@link h} method\n   * @param previousProperties - The previous properties object that was supplied to the {@link h} method\n   */\n  updateAnimation?(\n    element: Element,\n    properties?: VNodeProperties,\n    previousProperties?: VNodeProperties\n  ): void;\n  /**\n   * Callback that is executed after this node is added to the DOM. Child nodes and properties have\n   * already been applied.\n   * @param element - The element that was added to the DOM.\n   * @param projectionOptions - The projection options that were used, see {@link createProjector}.\n   * @param vnodeSelector - The selector passed to the {@link h} function.\n   * @param properties - The properties passed to the {@link h} function.\n   * @param children - The children that were created.\n   */\n  afterCreate?(\n    element: Element,\n    projectionOptions: ProjectionOptions,\n    vnodeSelector: string,\n    properties: VNodeProperties,\n    children: VNode[] | undefined\n  ): void;\n  /**\n   * Callback that is executed every time this node may have been updated. Child nodes and properties\n   * have already been updated.\n   * @param element - The element that may have been updated in the DOM.\n   * @param projectionOptions - The projection options that were used, see {@link createProjector}.\n   * @param vnodeSelector - The selector passed to the {@link h} function.\n   * @param properties - The properties passed to the {@link h} function.\n   * @param children - The children for this node.\n   */\n  afterUpdate?(\n    element: Element,\n    projectionOptions: ProjectionOptions,\n    vnodeSelector: string,\n    properties: VNodeProperties,\n    children: VNode[] | undefined\n  ): void;\n\n  /**\n   * Callback that is called when a node has been removed from the tree.\n   * The callback is called during idle state or after a timeout (fallback).\n   * {@link https://maquettejs.org/docs/dom-node-removal.html More info}\n   * @param element - The element that has been removed from the DOM.\n   */\n  afterRemoved?(element: Element): void;\n\n  /**\n   * When specified, the event handlers will be invoked with 'this' pointing to the value.\n   * This is useful when using the prototype/class based implementation of MaquetteComponents.\n   *\n   * When no {@link key} is present, this object is also used to uniquely identify a DOM node.\n   */\n  readonly bind?: unknown;\n\n  /**\n   * Used to uniquely identify a DOM node among siblings.\n   * A key is required when there are more children with the same selector and these children are added or removed dynamically.\n   * NOTE: this does not have to be a string or number, a {@link MaquetteComponent} Object for instance is also common.\n   */\n  readonly key?: unknown;\n\n  /**\n   * An object containing event handlers to attach using addEventListener.\n   * Note that `projector.scheduleRender()` is called automatically when these event handlers are invoked.\n   */\n  readonly on?: {\n    [eventName: string]:\n      | EventHandler\n      | {\n          listener: EventHandler;\n          options: { capture?: boolean; passive?: boolean; once?: boolean };\n        };\n  };\n\n  /**\n   * An object containing event handlers to attach using addEventListener.\n   * Note that `projector.scheduleRender()` is called automatically when these event handlers are invoked.\n   */\n  readonly onCapture?: { [eventName: string]: EventHandler };\n\n  /**\n   * An object literal like `{important:true}` which allows css classes, like `important` to be added and removed\n   * dynamically.\n   */\n  readonly classes?: { [index: string]: boolean | null | undefined };\n\n  /**\n   * An object literal like `{height:'100px'}` which allows styles to be changed dynamically. All values must be strings.\n   */\n  readonly styles?: Partial<CSSStyleDeclaration> | { [cssVariable: string]: string };\n\n  /**\n   * For custom elements\n   */\n  readonly is?: string;\n\n  // From Element\n  ontouchcancel?(ev: TouchEvent): boolean | void;\n  ontouchend?(ev: TouchEvent): boolean | void;\n  ontouchmove?(ev: TouchEvent): boolean | void;\n  ontouchstart?(ev: TouchEvent): boolean | void;\n  // From HTMLFormElement\n  readonly action?: string;\n  readonly encoding?: string;\n  readonly enctype?: string;\n  readonly method?: string;\n  readonly name?: string;\n  readonly target?: string;\n  // From HTMLAnchorElement\n  readonly href?: string;\n  readonly rel?: string;\n  // From HTMLElement\n  onblur?(ev: FocusEvent): boolean | void;\n  onchange?(ev: Event): boolean | void;\n  onclick?(ev: MouseEvent): boolean | void;\n  ondblclick?(ev: MouseEvent): boolean | void;\n  ondrag?(ev: DragEvent): boolean | void;\n  ondragend?(ev: DragEvent): boolean | void;\n  ondragenter?(ev: DragEvent): boolean | void;\n  ondragleave?(ev: DragEvent): boolean | void;\n  ondragover?(ev: DragEvent): boolean | void;\n  ondragstart?(ev: DragEvent): boolean | void;\n  ondrop?(ev: DragEvent): boolean | void;\n  onfocus?(ev: FocusEvent): boolean | void;\n  oninput?(ev: Event): boolean | void;\n  onkeydown?(ev: KeyboardEvent): boolean | void;\n  onkeypress?(ev: KeyboardEvent): boolean | void;\n  onkeyup?(ev: KeyboardEvent): boolean | void;\n  onload?(ev: Event): boolean | void;\n  onmousedown?(ev: MouseEvent): boolean | void;\n  onmouseenter?(ev: MouseEvent): boolean | void;\n  onmouseleave?(ev: MouseEvent): boolean | void;\n  onmousemove?(ev: MouseEvent): boolean | void;\n  onmouseout?(ev: MouseEvent): boolean | void;\n  onmouseover?(ev: MouseEvent): boolean | void;\n  onmouseup?(ev: MouseEvent): boolean | void;\n  onmousewheel?(ev: WheelEvent): boolean | void;\n  onscroll?(ev: UIEvent): boolean | void;\n  onsubmit?(ev: Event): boolean | void;\n  onpointercancel?(ev: PointerEvent): boolean | void;\n  onpointerdown?(ev: PointerEvent): boolean | void;\n  onpointerenter?(ev: PointerEvent): boolean | void;\n  onpointerleave?(ev: PointerEvent): boolean | void;\n  onpointermove?(ev: PointerEvent): boolean | void;\n  onpointerout?(ev: PointerEvent): boolean | void;\n  onpointerover?(ev: PointerEvent): boolean | void;\n  onpointerup?(ev: PointerEvent): boolean | void;\n  readonly spellcheck?: boolean;\n  readonly tabIndex?: number;\n  readonly disabled?: boolean;\n  readonly title?: string;\n  readonly accessKey?: string;\n  readonly class?: string;\n  readonly id?: string;\n  readonly draggable?: boolean;\n  // From HTMLInputElement\n  readonly type?: string;\n  readonly autocomplete?: string;\n  readonly checked?: boolean;\n  readonly placeholder?: string;\n  readonly readOnly?: boolean;\n  readonly src?: string;\n  readonly value?: string;\n  // From HTMLImageElement\n  readonly alt?: string;\n  readonly srcset?: string;\n  /**\n   * Puts a non-interactive string of html inside the DOM node.\n   *\n   * Note: if you use innerHTML, maquette cannot protect you from XSS vulnerabilities and you must make sure that the innerHTML value is safe.\n   */\n  readonly innerHTML?: string;\n\n  /**\n   * Do not use className, use class instead\n   */\n  // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents\n  readonly className?: never | \"Hint: do not use `className`, use `class` instead\";\n\n  /**\n   * Everything that is not explicitly listed (properties and attributes that are either uncommon or custom).\n   */\n  readonly [index: string]: any;\n}\n\n/**\n * Only needed for the definition of {@link VNodeChild}.\n * @deprecated use VNodeChild\n */\n// eslint-disable-next-line @typescript-eslint/no-empty-object-type\nexport interface VNodeChildren extends Array<VNodeChild> {}\n/**\n * These are valid values for the children parameter of the {@link h} function.\n */\nexport type VNodeChild = string | VNode | Array<VNodeChild> | false | null | undefined;\n\n/**\n * Represents a {@link VNode} tree that has been rendered to a real DOM tree.\n */\nexport interface Projection {\n  /**\n   * The DOM node that is used as the root of this {@link Projection}.\n   */\n  readonly domNode: Element;\n  /**\n   * Updates the real DOM to match the new virtual DOM tree.\n   * @param updatedVnode The updated virtual DOM tree. Note: The selector for the root of the {@link VNode} tree may not change.\n   */\n  update(updatedVnode: VNode): void;\n  getLastRender(): VNode;\n}\n\nexport type EventHandler = (this: Node, event: Event) => boolean | undefined | void;\n\n/**\n * Options that influence how the DOM is rendered and updated.\n */\nexport type EventHandlerInterceptor = (\n  propertyName: string,\n  eventHandler: EventHandler,\n  domNode: Node,\n  properties: VNodeProperties\n) => undefined | EventHandler;\n\nexport type PerformanceLoggerEvent =\n  | \"domEvent\"\n  | \"domEventProcessed\"\n  | \"renderStart\"\n  | \"rendered\"\n  | \"patched\"\n  | \"renderDone\";\nexport type ProjectorPerformanceLogger = (\n  eventType: PerformanceLoggerEvent,\n  trigger: Event | undefined\n) => void;\n/**\n * Options that may be passed when creating the {@link Projector}\n */\nexport interface ProjectorOptions {\n  /**\n   * Can be used to log performance metrics\n   */\n  performanceLogger?: ProjectorPerformanceLogger;\n\n  /**\n   * May be used to add vendor prefixes when applying inline styles when needed.\n   * This function is called when {@link VNodeProperties#styles} is used.\n   * This function should execute `domNode.style[styleName] = value` or do something smarter.\n   *\n   * @param domNode   The DOM Node that needs to receive the style\n   * @param styleName The name of the style that should be applied, for example `transform`.\n   * @param value     The value of this style, for example `rotate(45deg)`.\n   */\n  styleApplyer?(domNode: HTMLElement, styleName: string, value: string): void;\n}\n\nexport interface ProjectionOptions extends ProjectorOptions {\n  /**\n   * Only for internal use. Used for rendering SVG Nodes.\n   */\n  readonly namespace?: string;\n  /**\n   * May be used to intercept registration of event-handlers.\n   *\n   * Used by the {@link Projector} to wrap eventHandler-calls to call {@link Projector#scheduleRender} as well.\n   *\n   * @param propertyName             The name of the property to be assigned, for example onclick\n   * @param eventHandler             The function that was registered on the {@link VNode}\n   * @param domNode                  The real DOM element\n   * @param properties               The whole set of properties that was put on the VNode\n   * @returns                        The function that is to be placed on the DOM node as the event handler, instead of `eventHandler`.\n   */\n  eventHandlerInterceptor?: EventHandlerInterceptor;\n}\n\n/**\n * Keeps an array of result objects synchronized with an array of source objects.\n * See {@link http://maquettejs.org/docs/arrays.html Working with arrays}.\n *\n * Mapping provides a {@link map} function that updates its {@link results}.\n * The {@link map} function can be called multiple times and the results will get created, removed and updated accordingly.\n * A Mapping can be used to keep an array of components (objects with a `render` method) synchronized with an array of data.\n * Instances of Mapping can be created using {@link createMapping}.\n *\n * @param <Source>   The type of source elements. Usually the data type.\n * @param <Target>   The type of target elements. Usually the component type.\n */\nexport interface Mapping<Source, Target> {\n  /**\n   * The array of results. These results will be synchronized with the latest array of sources that were provided using {@link map}.\n   */\n  results: Target[];\n  /**\n   * Maps a new array of sources and updates {@link results}.\n   *\n   * @param newSources   The new array of sources.\n   */\n  map(newSources: Source[]): void;\n}\n\n/**\n * A CalculationCache object remembers the previous outcome of a calculation along with the inputs.\n * On subsequent calls the previous outcome is returned if the inputs are identical.\n * This object can be used to bypass both rendering and diffing of a virtual DOM subtree.\n * Instances of CalculationCache can be created using {@link createCache}.\n *\n * @param <Result> The type of the value that is cached.\n */\nexport interface CalculationCache<Result> {\n  /**\n   * Manually invalidates the cached outcome.\n   */\n  invalidate(): void;\n  /**\n   * If the inputs array matches the inputs array from the previous invocation, this method returns the result of the previous invocation.\n   * Otherwise, the calculation function is invoked and its result is cached and returned.\n   * Objects in the inputs array are compared using ===.\n   * @param inputs - Array of objects that are to be compared using === with the inputs from the previous invocation.\n   * These objects are assumed to be immutable primitive values.\n   * @param calculation - Function that takes zero arguments and returns an object (A {@link VNode} presumably) that can be cached.\n   */\n  result(inputs: unknown[], calculation: () => Result): Result;\n}\n\n/**\n * @deprecated Use {@link MaquetteComponent} instead.\n * @since 3.0\n */\nexport interface Component {\n  renderMaquette(): VNode | null | undefined;\n}\n\n/**\n * A component is a pattern with which you can split up your web application into self-contained parts.\n *\n * A component may contain other components.\n * This can be achieved by calling the subcomponents `render` functions during the {@link render} function and by using the\n * resulting {@link VNode}s in the return value.\n *\n * This interface is not used anywhere in the maquette sourcecode, but this is a widely used pattern.\n */\nexport interface MaquetteComponent {\n  /**\n   * A function that returns the DOM representation of the component.\n   */\n  render(): VNode | null | undefined;\n}\n\nexport interface Dom {\n  /**\n   * Creates a real DOM tree from `vnode`. The {@link Projection} object returned will contain the resulting DOM Node in\n   * its {@link Projection.domNode | domNode} property.\n   * This is a low-level method. Users will typically use a {@link Projector} instead.\n   * @param vnode - The root of the virtual DOM tree that was created using the {@link h} function. NOTE: {@link VNode}\n   * objects may only be rendered once.\n   * @param projectionOptions - Options to be used to create and update the projection.\n   * @returns The {@link Projection} which also contains the DOM Node that was created.\n   */\n  create(vnode: VNode, projectionOptions?: ProjectionOptions): Projection;\n\n  /**\n   * Appends a new child node to the DOM which is generated from a {@link VNode}.\n   * This is a low-level method. Users will typically use a {@link Projector} instead.\n   * @param parentNode - The parent node for the new child node.\n   * @param vnode - The root of the virtual DOM tree that was created using the {@link h} function. NOTE: {@link VNode}\n   * objects may only be rendered once.\n   * @param projectionOptions - Options to be used to create and update the {@link Projection}.\n   * @returns The {@link Projection} that was created.\n   */\n  append(parentNode: Element, vnode: VNode, projectionOptions?: ProjectionOptions): Projection;\n\n  /**\n   * Inserts a new DOM node which is generated from a {@link VNode}.\n   * This is a low-level method. Users wil typically use a {@link Projector} instead.\n   * @param beforeNode - The node that the DOM Node is inserted before.\n   * @param vnode - The root of the virtual DOM tree that was created using the {@link h} function.\n   * NOTE: {@link VNode} objects may only be rendered once.\n   * @param projectionOptions - Options to be used to create and update the projection, see {@link createProjector}.\n   * @returns The {@link Projection} that was created.\n   */\n  insertBefore(\n    beforeNode: Element,\n    vnode: VNode,\n    projectionOptions?: ProjectionOptions\n  ): Projection;\n\n  /**\n   * Merges a new DOM node which is generated from a {@link VNode} with an existing DOM Node.\n   * This means that the virtual DOM and the real DOM will have one overlapping element.\n   * Therefore the selector for the root {@link VNode} will be ignored, but its properties and children will be applied to the Element provided.\n   * This is a low-level method. Users wil typically use a {@link Projector} instead.\n   * @param element - The existing element to adopt as the root of the new virtual DOM. Existing attributes and child nodes are preserved.\n   * @param vnode - The root of the virtual DOM tree that was created using the {@link h} function. NOTE: {@link VNode} objects\n   * may only be rendered once.\n   * @param projectionOptions - Options to be used to create and update the projection, see {@link createProjector}.\n   * @returns The {@link Projection} that was created.\n   */\n  merge(element: Element, vnode: VNode, projectionOptions?: ProjectionOptions): Projection;\n\n  /**\n   * Replaces an existing DOM node with a node generated from a {@link VNode}.\n   * This is a low-level method. Users will typically use a {@link Projector} instead.\n   * @param element - The node for the {@link VNode} to replace.\n   * @param vnode - The root of the virtual DOM tree that was created using the {@link h} function. NOTE: {@link VNode}\n   * objects may only be rendered once.\n   * @param projectionOptions - Options to be used to create and update the {@link Projection}.\n   * @returns The {@link Projection} that was created.\n   */\n  replace(element: Element, vnode: VNode, projectionOptions?: ProjectionOptions): Projection;\n}\n"]}

package/dist/mapping.d.ts

@@ -4,7 +4,7 @@ import { Mapping } from "./interfaces";
  * See {@link http://maquettejs.org/docs/arrays.html Working with arrays}.
  *
  * @param <Source>       The type of source items. A database-record for instance.
- * @param <Target>       The type of target items. A [[MaquetteComponent]] for instance.
+ * @param <Target>       The type of target items. A {@link MaquetteComponent} for instance.
  * @param getSourceKey   `function(source)` that must return a key to identify each source object. The result must either be a string or a number.
  * @param createResult   `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)`.

package/dist/mapping.js

@@ -3,7 +3,7 @@
  * See {@link http://maquettejs.org/docs/arrays.html Working with arrays}.
  *
  * @param <Source>       The type of source items. A database-record for instance.
- * @param <Target>       The type of target items. A [[MaquetteComponent]] for instance.
+ * @param <Target>       The type of target items. A {@link MaquetteComponent} for instance.
  * @param getSourceKey   `function(source)` that must return a key to identify each source object. The result must either be a string or a number.
  * @param createResult   `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)`.

package/dist/mapping.js.map

@@ -1 +1 @@
-{"version":3,"file":"mapping.js","sourceRoot":"","sources":["../src/mapping.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;GAUG;AACH,MAAM,CAAC,IAAI,aAAa,GAAG,UACzB,YAAiD,EACjD,YAAuD,EACvD,YAAqE;IAErE,IAAI,IAAI,GAAG,EAAe,CAAC;IAC3B,IAAI,OAAO,GAAG,EAAc,CAAC;IAE7B,OAAO;QACL,OAAO,EAAE,OAAO;QAChB,GAAG,EAAE,UAAC,UAAoB;YACxB,IAAI,OAAO,GAAG,UAAU,CAAC,GAAG,CAAC,YAAY,CAAC,CAAC;YAC3C,IAAI,UAAU,GAAG,OAAO,CAAC,KAAK,EAAE,CAAC;YACjC,IAAI,QAAQ,GAAG,CAAC,CAAC;YACjB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,UAAU,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;gBAC3C,IAAI,MAAM,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC;gBAC3B,IAAI,SAAS,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC;gBAC3B,IAAI,SAAS,KAAK,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC;oBACjC,OAAO,CAAC,CAAC,CAAC,GAAG,UAAU,CAAC,QAAQ,CAAC,CAAC;oBAClC,YAAY,CAAC,MAAM,EAAE,UAAU,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,CAAC;oBAC9C,QAAQ,EAAE,CAAC;gBACb,CAAC;qBAAM,CAAC;oBACN,IAAI,KAAK,GAAG,KAAK,CAAC;oBAClB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC;wBACzC,IAAI,WAAW,GAAG,CAAC,QAAQ,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC;wBAC/C,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK,SAAS,EAAE,CAAC;4BACpC,OAAO,CAAC,CAAC,CAAC,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC;4BACrC,YAAY,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,UAAU,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC,CAAC;4BACxD,QAAQ,GAAG,WAAW,GAAG,CAAC,CAAC;4BAC3B,KAAK,GAAG,IAAI,CAAC;4BACb,MAAM;wBACR,CAAC;oBACH,CAAC;oBACD,IAAI,CAAC,KAAK,EAAE,CAAC;wBACX,OAAO,CAAC,CAAC,CAAC,GAAG,YAAY,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC;oBACvC,CAAC;gBACH,CAAC;YACH,CAAC;YACD,OAAO,CAAC,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;YACnC,IAAI,GAAG,OAAO,CAAC;QACjB,CAAC;KACF,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { Mapping } from \"./interfaces\";\n\n/**\n * Creates a {@link Mapping} instance that keeps an array of result objects synchronized with an array of source objects.\n * See {@link http://maquettejs.org/docs/arrays.html Working with arrays}.\n *\n * @param <Source>       The type of source items. A database-record for instance.\n * @param <Target>       The type of target items. A [[MaquetteComponent]] for instance.\n * @param getSourceKey   `function(source)` that must return a key to identify each source object. The result must either be a string or a number.\n * @param createResult   `function(source, index)` that must create a new result object from a given source. This function is identical\n *                       to the `callback` argument in `Array.map(callback)`.\n * @param updateResult   `function(source, target, index)` that updates a result to an updated source.\n */\nexport let createMapping = <Source, Target>(\n  getSourceKey: (source: Source) => string | number,\n  createResult: (source: Source, index: number) => Target,\n  updateResult: (source: Source, target: Target, index: number) => void\n): Mapping<Source, Target> => {\n  let keys = [] as unknown[];\n  let results = [] as Target[];\n\n  return {\n    results: results,\n    map: (newSources: Source[]) => {\n      let newKeys = newSources.map(getSourceKey);\n      let oldTargets = results.slice();\n      let oldIndex = 0;\n      for (let i = 0; i < newSources.length; i++) {\n        let source = newSources[i];\n        let sourceKey = newKeys[i];\n        if (sourceKey === keys[oldIndex]) {\n          results[i] = oldTargets[oldIndex];\n          updateResult(source, oldTargets[oldIndex], i);\n          oldIndex++;\n        } else {\n          let found = false;\n          for (let j = 1; j < keys.length + 1; j++) {\n            let searchIndex = (oldIndex + j) % keys.length;\n            if (keys[searchIndex] === sourceKey) {\n              results[i] = oldTargets[searchIndex];\n              updateResult(newSources[i], oldTargets[searchIndex], i);\n              oldIndex = searchIndex + 1;\n              found = true;\n              break;\n            }\n          }\n          if (!found) {\n            results[i] = createResult(source, i);\n          }\n        }\n      }\n      results.length = newSources.length;\n      keys = newKeys;\n    },\n  };\n};\n"]}
+{"version":3,"file":"mapping.js","sourceRoot":"","sources":["../src/mapping.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;GAUG;AACH,MAAM,CAAC,IAAI,aAAa,GAAG,UACzB,YAAiD,EACjD,YAAuD,EACvD,YAAqE;IAErE,IAAI,IAAI,GAAG,EAAe,CAAC;IAC3B,IAAI,OAAO,GAAG,EAAc,CAAC;IAE7B,OAAO;QACL,OAAO,EAAE,OAAO;QAChB,GAAG,EAAE,UAAC,UAAoB;YACxB,IAAI,OAAO,GAAG,UAAU,CAAC,GAAG,CAAC,YAAY,CAAC,CAAC;YAC3C,IAAI,UAAU,GAAG,OAAO,CAAC,KAAK,EAAE,CAAC;YACjC,IAAI,QAAQ,GAAG,CAAC,CAAC;YACjB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,UAAU,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;gBAC3C,IAAI,MAAM,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC;gBAC3B,IAAI,SAAS,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC;gBAC3B,IAAI,SAAS,KAAK,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC;oBACjC,OAAO,CAAC,CAAC,CAAC,GAAG,UAAU,CAAC,QAAQ,CAAC,CAAC;oBAClC,YAAY,CAAC,MAAM,EAAE,UAAU,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,CAAC;oBAC9C,QAAQ,EAAE,CAAC;gBACb,CAAC;qBAAM,CAAC;oBACN,IAAI,KAAK,GAAG,KAAK,CAAC;oBAClB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC;wBACzC,IAAI,WAAW,GAAG,CAAC,QAAQ,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC;wBAC/C,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK,SAAS,EAAE,CAAC;4BACpC,OAAO,CAAC,CAAC,CAAC,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC;4BACrC,YAAY,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,UAAU,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC,CAAC;4BACxD,QAAQ,GAAG,WAAW,GAAG,CAAC,CAAC;4BAC3B,KAAK,GAAG,IAAI,CAAC;4BACb,MAAM;wBACR,CAAC;oBACH,CAAC;oBACD,IAAI,CAAC,KAAK,EAAE,CAAC;wBACX,OAAO,CAAC,CAAC,CAAC,GAAG,YAAY,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC;oBACvC,CAAC;gBACH,CAAC;YACH,CAAC;YACD,OAAO,CAAC,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;YACnC,IAAI,GAAG,OAAO,CAAC;QACjB,CAAC;KACF,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { Mapping } from \"./interfaces\";\n\n/**\n * Creates a {@link Mapping} instance that keeps an array of result objects synchronized with an array of source objects.\n * See {@link http://maquettejs.org/docs/arrays.html Working with arrays}.\n *\n * @param <Source>       The type of source items. A database-record for instance.\n * @param <Target>       The type of target items. A {@link MaquetteComponent} for instance.\n * @param getSourceKey   `function(source)` that must return a key to identify each source object. The result must either be a string or a number.\n * @param createResult   `function(source, index)` that must create a new result object from a given source. This function is identical\n *                       to the `callback` argument in `Array.map(callback)`.\n * @param updateResult   `function(source, target, index)` that updates a result to an updated source.\n */\nexport let createMapping = <Source, Target>(\n  getSourceKey: (source: Source) => string | number,\n  createResult: (source: Source, index: number) => Target,\n  updateResult: (source: Source, target: Target, index: number) => void\n): Mapping<Source, Target> => {\n  let keys = [] as unknown[];\n  let results = [] as Target[];\n\n  return {\n    results: results,\n    map: (newSources: Source[]) => {\n      let newKeys = newSources.map(getSourceKey);\n      let oldTargets = results.slice();\n      let oldIndex = 0;\n      for (let i = 0; i < newSources.length; i++) {\n        let source = newSources[i];\n        let sourceKey = newKeys[i];\n        if (sourceKey === keys[oldIndex]) {\n          results[i] = oldTargets[oldIndex];\n          updateResult(source, oldTargets[oldIndex], i);\n          oldIndex++;\n        } else {\n          let found = false;\n          for (let j = 1; j < keys.length + 1; j++) {\n            let searchIndex = (oldIndex + j) % keys.length;\n            if (keys[searchIndex] === sourceKey) {\n              results[i] = oldTargets[searchIndex];\n              updateResult(newSources[i], oldTargets[searchIndex], i);\n              oldIndex = searchIndex + 1;\n              found = true;\n              break;\n            }\n          }\n          if (!found) {\n            results[i] = createResult(source, i);\n          }\n        }\n      }\n      results.length = newSources.length;\n      keys = newKeys;\n    },\n  };\n};\n"]}