maquette 3.4.1 → 3.5.2

package/README.md

@@ -1,16 +1,16 @@
 ![NpmLicense](https://img.shields.io/npm/l/maquette.svg)
 ![npmBundleSize](https://img.shields.io/bundlephobia/minzip/maquette.svg)
-[![CircleCI branch](https://img.shields.io/circleci/project/github/AFASSoftware/maquette/master.svg)](https://circleci.com/gh/AFASSoftware/maquette)
+![build](https://github.com/AFASSoftware/maquette/actions/workflows/node.js.yml/badge.svg)
 
 Maquette
 =========
 
 Maquette is a Javascript utility which makes it easy to synchronize the DOM tree in the browser with your data.
 It uses a technique called 'Virtual DOM'.
-Compared to other virtual DOM implementations, maquette has 3 advantages:
+Compared to other virtual DOM implementations, maquette has the following advantages:
 
 * It is very lightweight (3.6Kb gzipped)
 * It allows changes to be animated
-* It is optimized for speed
+* It makes your frontend [easy to unit-test](https://maquettejs.org/docs/unit-testing.html)
 
 Visit the [website](https://maquettejs.org) for more information.

package/dist/cache.d.ts

@@ -1,4 +1,4 @@
-import { CalculationCache } from './interfaces';
+import { CalculationCache } from "./interfaces";
 /**
  * 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.

package/dist/cache.js

@@ -26,7 +26,7 @@ export var createCache = function () {
                 cachedInputs = inputs;
             }
             return cachedOutcome;
-        }
+        },
     };
 };
 //# sourceMappingURL=cache.js.map

package/dist/cache.js.map

@@ -1 +1 @@
-{"version":3,"file":"cache.js","sourceRoot":"","sources":["../src/cache.ts"],"names":[],"mappings":"AAEA;;;;;;GAMG;AACH,MAAM,CAAC,IAAI,WAAW,GAAG;IACvB,IAAI,YAAmC,CAAC;IACxC,IAAI,aAAiC,CAAC;IAEtC,OAAO;QACL,UAAU,EAAE;YACV,aAAa,GAAG,SAAS,CAAC;YAC1B,YAAY,GAAG,SAAS,CAAC;QAC3B,CAAC;QAED,MAAM,EAAE,UAAC,MAAiB,EAAE,WAAyB;YACnD,IAAI,YAAY,EAAE;gBAChB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;oBACtC,IAAI,YAAY,CAAC,CAAC,CAAC,KAAK,MAAM,CAAC,CAAC,CAAC,EAAE;wBACjC,aAAa,GAAG,SAAS,CAAC;qBAC3B;iBACF;aACF;YACD,IAAI,CAAC,aAAa,EAAE;gBAClB,aAAa,GAAG,WAAW,EAAE,CAAC;gBAC9B,YAAY,GAAG,MAAM,CAAC;aACvB;YACD,OAAO,aAAa,CAAC;QACvB,CAAC;KACF,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { CalculationCache } from './interfaces';\n\n/**\n * Creates a [[CalculationCache]] object, useful for caching [[VNode]] trees.\n * In practice, caching of [[VNode]] trees is not needed, because achieving 60 frames per second is almost never a problem.\n * For more information, see [[CalculationCache]].\n *\n * @param <Result> The type of the value that is cached.\n */\nexport let createCache = <Result>(): CalculationCache<Result> => {\n  let cachedInputs: unknown[] | undefined;\n  let cachedOutcome: Result | undefined;\n\n  return {\n    invalidate: () => {\n      cachedOutcome = undefined;\n      cachedInputs = undefined;\n    },\n\n    result: (inputs: unknown[], calculation: () => Result) => {\n      if (cachedInputs) {\n        for (let i = 0; i < inputs.length; i++) {\n          if (cachedInputs[i] !== inputs[i]) {\n            cachedOutcome = undefined;\n          }\n        }\n      }\n      if (!cachedOutcome) {\n        cachedOutcome = calculation();\n        cachedInputs = inputs;\n      }\n      return cachedOutcome;\n    }\n  };\n};\n"]}
+{"version":3,"file":"cache.js","sourceRoot":"","sources":["../src/cache.ts"],"names":[],"mappings":"AAEA;;;;;;GAMG;AACH,MAAM,CAAC,IAAI,WAAW,GAAG;IACvB,IAAI,YAAmC,CAAC;IACxC,IAAI,aAAiC,CAAC;IAEtC,OAAO;QACL,UAAU,EAAE;YACV,aAAa,GAAG,SAAS,CAAC;YAC1B,YAAY,GAAG,SAAS,CAAC;QAC3B,CAAC;QAED,MAAM,EAAE,UAAC,MAAiB,EAAE,WAAyB;YACnD,IAAI,YAAY,EAAE;gBAChB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;oBACtC,IAAI,YAAY,CAAC,CAAC,CAAC,KAAK,MAAM,CAAC,CAAC,CAAC,EAAE;wBACjC,aAAa,GAAG,SAAS,CAAC;qBAC3B;iBACF;aACF;YACD,IAAI,CAAC,aAAa,EAAE;gBAClB,aAAa,GAAG,WAAW,EAAE,CAAC;gBAC9B,YAAY,GAAG,MAAM,CAAC;aACvB;YACD,OAAO,aAAa,CAAC;QACvB,CAAC;KACF,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { CalculationCache } from \"./interfaces\";\n\n/**\n * Creates a [[CalculationCache]] object, useful for caching [[VNode]] trees.\n * In practice, caching of [[VNode]] trees is not needed, because achieving 60 frames per second is almost never a problem.\n * For more information, see [[CalculationCache]].\n *\n * @param <Result> The type of the value that is cached.\n */\nexport let createCache = <Result>(): CalculationCache<Result> => {\n  let cachedInputs: unknown[] | undefined;\n  let cachedOutcome: Result | undefined;\n\n  return {\n    invalidate: () => {\n      cachedOutcome = undefined;\n      cachedInputs = undefined;\n    },\n\n    result: (inputs: unknown[], calculation: () => Result) => {\n      if (cachedInputs) {\n        for (let i = 0; i < inputs.length; i++) {\n          if (cachedInputs[i] !== inputs[i]) {\n            cachedOutcome = undefined;\n          }\n        }\n      }\n      if (!cachedOutcome) {\n        cachedOutcome = calculation();\n        cachedInputs = inputs;\n      }\n      return cachedOutcome;\n    },\n  };\n};\n"]}

package/dist/dom.d.ts

@@ -1,7 +1,7 @@
 /**
  * Contains simple low-level utility functions to manipulate the real DOM.
  */
-import { Projection, ProjectionOptions, VNode } from './interfaces';
+import { Projection, ProjectionOptions, VNode } from "./interfaces";
 export declare let applyDefaultProjectionOptions: (projectorOptions?: ProjectionOptions | undefined) => ProjectionOptions;
 export declare let dom: {
     /**

package/dist/dom.js

@@ -1,10 +1,10 @@
-import { createDom, createProjection, extend, initPropertiesAndChildren } from './projection';
+import { createDom, createProjection, extend, initPropertiesAndChildren } from "./projection";
 var DEFAULT_PROJECTION_OPTIONS = {
     namespace: undefined,
     performanceLogger: function () { return undefined; },
     eventHandlerInterceptor: undefined,
     styleApplyer: function (domNode, styleName, value) {
-        if (styleName.charAt(0) === '-') {
+        if (styleName.charAt(0) === "-") {
             // CSS variables must be set using setProperty
             domNode.style.setProperty(styleName, value);
         }
@@ -12,7 +12,7 @@ var DEFAULT_PROJECTION_OPTIONS = {
             // properties like 'backgroundColor' must be set as a js-property
             domNode.style[styleName] = value;
         }
-    }
+    },
 };
 export var applyDefaultProjectionOptions = function (projectorOptions) {
     return extend(DEFAULT_PROJECTION_OPTIONS, projectorOptions);
@@ -29,7 +29,7 @@ export var dom = {
      */
     create: function (vnode, projectionOptions) {
         projectionOptions = applyDefaultProjectionOptions(projectionOptions);
-        createDom(vnode, document.createElement('div'), undefined, projectionOptions);
+        createDom(vnode, document.createElement("div"), undefined, projectionOptions);
         return createProjection(vnode, projectionOptions);
     },
     /**
@@ -91,6 +91,6 @@ export var dom = {
         createDom(vnode, element.parentNode, element, projectionOptions);
         element.parentNode.removeChild(element);
         return createProjection(vnode, projectionOptions);
-    }
+    },
 };
 //# sourceMappingURL=dom.js.map

package/dist/dom.js.map

@@ -1 +1 @@
-{"version":3,"file":"dom.js","sourceRoot":"","sources":["../src/dom.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE,MAAM,EAAE,yBAAyB,EAAE,MAAM,cAAc,CAAC;AAE9F,IAAM,0BAA0B,GAAsB;IACpD,SAAS,EAAE,SAAS;IACpB,iBAAiB,EAAE,cAAM,OAAA,SAAS,EAAT,CAAS;IAClC,uBAAuB,EAAE,SAAS;IAClC,YAAY,EAAE,UAAC,OAAoB,EAAE,SAAiB,EAAE,KAAa;QACnE,IAAI,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,GAAG,EAAE;YAC/B,8CAA8C;YAC9C,OAAO,CAAC,KAAK,CAAC,WAAW,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;SAC7C;aAAM;YACL,iEAAiE;YAChE,OAAO,CAAC,KAAa,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC;SAC3C;IACH,CAAC;CACF,CAAC;AAEF,MAAM,CAAC,IAAI,6BAA6B,GAAG,UAAC,gBAAoC;IAC9E,OAAO,MAAM,CAAC,0BAA0B,EAAE,gBAAgB,CAAC,CAAC;AAC9D,CAAC,CAAC;AAEF,MAAM,CAAC,IAAI,GAAG,GAAG;IACf;;;;;;;;OAQG;IACH,MAAM,EAAE,UAAC,KAAY,EAAE,iBAAqC;QAC1D,iBAAiB,GAAG,6BAA6B,CAAC,iBAAiB,CAAC,CAAC;QACrE,SAAS,CAAC,KAAK,EAAE,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,EAAE,SAAS,EAAE,iBAAiB,CAAC,CAAC;QAC9E,OAAO,gBAAgB,CAAC,KAAK,EAAE,iBAAiB,CAAC,CAAC;IACpD,CAAC;IAED;;;;;;;;OAQG;IACH,MAAM,EAAE,UAAC,UAAmB,EAAE,KAAY,EAAE,iBAAqC;QAC/E,iBAAiB,GAAG,6BAA6B,CAAC,iBAAiB,CAAC,CAAC;QACrE,SAAS,CAAC,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,iBAAiB,CAAC,CAAC;QAC3D,OAAO,gBAAgB,CAAC,KAAK,EAAE,iBAAiB,CAAC,CAAC;IACpD,CAAC;IAED;;;;;;;;OAQG;IACH,YAAY,EAAE,UAAC,UAAmB,EAAE,KAAY,EAAE,iBAAqC;QACrF,iBAAiB,GAAG,6BAA6B,CAAC,iBAAiB,CAAC,CAAC;QACrE,SAAS,CAAC,KAAK,EAAE,UAAU,CAAC,UAAW,EAAE,UAAU,EAAE,iBAAiB,CAAC,CAAC;QACxE,OAAO,gBAAgB,CAAC,KAAK,EAAE,iBAAiB,CAAC,CAAC;IACpD,CAAC;IAED;;;;;;;;;;OAUG;IACH,KAAK,EAAE,UAAC,OAAgB,EAAE,KAAY,EAAE,iBAAqC;QAC3E,iBAAiB,GAAG,6BAA6B,CAAC,iBAAiB,CAAC,CAAC;QACrE,KAAK,CAAC,OAAO,GAAG,OAAO,CAAC;QACxB,yBAAyB,CAAC,OAAO,EAAE,KAAK,EAAE,iBAAiB,CAAC,CAAC;QAC7D,OAAO,gBAAgB,CAAC,KAAK,EAAE,iBAAiB,CAAC,CAAC;IACpD,CAAC;IAED;;;;;;;;OAQG;IACH,OAAO,EAAE,UAAC,OAAgB,EAAE,KAAY,EAAE,iBAAqC;QAC7E,iBAAiB,GAAG,6BAA6B,CAAC,iBAAiB,CAAC,CAAC;QACrE,SAAS,CAAC,KAAK,EAAE,OAAO,CAAC,UAAW,EAAE,OAAO,EAAE,iBAAiB,CAAC,CAAC;QAClE,OAAO,CAAC,UAAW,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;QACzC,OAAO,gBAAgB,CAAC,KAAK,EAAE,iBAAiB,CAAC,CAAC;IACpD,CAAC;CACF,CAAC","sourcesContent":["/**\n * Contains simple low-level utility functions to manipulate the real DOM.\n */\nimport { Projection, ProjectionOptions, VNode } from './interfaces';\nimport { createDom, createProjection, extend, initPropertiesAndChildren } from './projection';\n\nconst DEFAULT_PROJECTION_OPTIONS: ProjectionOptions = {\n  namespace: undefined,\n  performanceLogger: () => undefined,\n  eventHandlerInterceptor: undefined,\n  styleApplyer: (domNode: HTMLElement, styleName: string, value: string) => {\n    if (styleName.charAt(0) === '-') {\n      // CSS variables must be set using setProperty\n      domNode.style.setProperty(styleName, value);\n    } else {\n      // properties like 'backgroundColor' must be set as a js-property\n      (domNode.style as any)[styleName] = value;\n    }\n  }\n};\n\nexport let applyDefaultProjectionOptions = (projectorOptions?: ProjectionOptions) => {\n  return extend(DEFAULT_PROJECTION_OPTIONS, projectorOptions);\n};\n\nexport let 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    projectionOptions = applyDefaultProjectionOptions(projectionOptions);\n    createDom(vnode, document.createElement('div'), undefined, projectionOptions);\n    return createProjection(vnode, projectionOptions);\n  },\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    projectionOptions = applyDefaultProjectionOptions(projectionOptions);\n    createDom(vnode, parentNode, undefined, projectionOptions);\n    return createProjection(vnode, projectionOptions);\n  },\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: (beforeNode: Element, vnode: VNode, projectionOptions?: ProjectionOptions): Projection => {\n    projectionOptions = applyDefaultProjectionOptions(projectionOptions);\n    createDom(vnode, beforeNode.parentNode!, beforeNode, projectionOptions);\n    return createProjection(vnode, projectionOptions);\n  },\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    projectionOptions = applyDefaultProjectionOptions(projectionOptions);\n    vnode.domNode = element;\n    initPropertiesAndChildren(element, vnode, projectionOptions);\n    return createProjection(vnode, projectionOptions);\n  },\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    projectionOptions = applyDefaultProjectionOptions(projectionOptions);\n    createDom(vnode, element.parentNode!, element, projectionOptions);\n    element.parentNode!.removeChild(element);\n    return createProjection(vnode, projectionOptions);\n  }\n};\n"]}
+{"version":3,"file":"dom.js","sourceRoot":"","sources":["../src/dom.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE,MAAM,EAAE,yBAAyB,EAAE,MAAM,cAAc,CAAC;AAE9F,IAAM,0BAA0B,GAAsB;IACpD,SAAS,EAAE,SAAS;IACpB,iBAAiB,EAAE,cAAM,OAAA,SAAS,EAAT,CAAS;IAClC,uBAAuB,EAAE,SAAS;IAClC,YAAY,EAAE,UAAC,OAAoB,EAAE,SAAiB,EAAE,KAAa;QACnE,IAAI,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,GAAG,EAAE;YAC/B,8CAA8C;YAC9C,OAAO,CAAC,KAAK,CAAC,WAAW,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;SAC7C;aAAM;YACL,iEAAiE;YAChE,OAAO,CAAC,KAAa,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC;SAC3C;IACH,CAAC;CACF,CAAC;AAEF,MAAM,CAAC,IAAI,6BAA6B,GAAG,UACzC,gBAAoC;IAEpC,OAAO,MAAM,CAAC,0BAA0B,EAAE,gBAAgB,CAAC,CAAC;AAC9D,CAAC,CAAC;AAEF,MAAM,CAAC,IAAI,GAAG,GAAG;IACf;;;;;;;;OAQG;IACH,MAAM,EAAE,UAAC,KAAY,EAAE,iBAAqC;QAC1D,iBAAiB,GAAG,6BAA6B,CAAC,iBAAiB,CAAC,CAAC;QACrE,SAAS,CAAC,KAAK,EAAE,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,EAAE,SAAS,EAAE,iBAAiB,CAAC,CAAC;QAC9E,OAAO,gBAAgB,CAAC,KAAK,EAAE,iBAAiB,CAAC,CAAC;IACpD,CAAC;IAED;;;;;;;;OAQG;IACH,MAAM,EAAE,UACN,UAAmB,EACnB,KAAY,EACZ,iBAAqC;QAErC,iBAAiB,GAAG,6BAA6B,CAAC,iBAAiB,CAAC,CAAC;QACrE,SAAS,CAAC,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,iBAAiB,CAAC,CAAC;QAC3D,OAAO,gBAAgB,CAAC,KAAK,EAAE,iBAAiB,CAAC,CAAC;IACpD,CAAC;IAED;;;;;;;;OAQG;IACH,YAAY,EAAE,UACZ,UAAmB,EACnB,KAAY,EACZ,iBAAqC;QAErC,iBAAiB,GAAG,6BAA6B,CAAC,iBAAiB,CAAC,CAAC;QACrE,SAAS,CAAC,KAAK,EAAE,UAAU,CAAC,UAAW,EAAE,UAAU,EAAE,iBAAiB,CAAC,CAAC;QACxE,OAAO,gBAAgB,CAAC,KAAK,EAAE,iBAAiB,CAAC,CAAC;IACpD,CAAC;IAED;;;;;;;;;;OAUG;IACH,KAAK,EAAE,UAAC,OAAgB,EAAE,KAAY,EAAE,iBAAqC;QAC3E,iBAAiB,GAAG,6BAA6B,CAAC,iBAAiB,CAAC,CAAC;QACrE,KAAK,CAAC,OAAO,GAAG,OAAO,CAAC;QACxB,yBAAyB,CAAC,OAAO,EAAE,KAAK,EAAE,iBAAiB,CAAC,CAAC;QAC7D,OAAO,gBAAgB,CAAC,KAAK,EAAE,iBAAiB,CAAC,CAAC;IACpD,CAAC;IAED;;;;;;;;OAQG;IACH,OAAO,EAAE,UAAC,OAAgB,EAAE,KAAY,EAAE,iBAAqC;QAC7E,iBAAiB,GAAG,6BAA6B,CAAC,iBAAiB,CAAC,CAAC;QACrE,SAAS,CAAC,KAAK,EAAE,OAAO,CAAC,UAAW,EAAE,OAAO,EAAE,iBAAiB,CAAC,CAAC;QAClE,OAAO,CAAC,UAAW,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;QACzC,OAAO,gBAAgB,CAAC,KAAK,EAAE,iBAAiB,CAAC,CAAC;IACpD,CAAC;CACF,CAAC","sourcesContent":["/**\n * Contains simple low-level utility functions to manipulate the real DOM.\n */\nimport { Projection, ProjectionOptions, VNode } from \"./interfaces\";\nimport { createDom, createProjection, extend, initPropertiesAndChildren } from \"./projection\";\n\nconst DEFAULT_PROJECTION_OPTIONS: ProjectionOptions = {\n  namespace: undefined,\n  performanceLogger: () => undefined,\n  eventHandlerInterceptor: undefined,\n  styleApplyer: (domNode: HTMLElement, styleName: string, value: string) => {\n    if (styleName.charAt(0) === \"-\") {\n      // CSS variables must be set using setProperty\n      domNode.style.setProperty(styleName, value);\n    } else {\n      // properties like 'backgroundColor' must be set as a js-property\n      (domNode.style as any)[styleName] = value;\n    }\n  },\n};\n\nexport let applyDefaultProjectionOptions = (\n  projectorOptions?: ProjectionOptions\n): ProjectionOptions => {\n  return extend(DEFAULT_PROJECTION_OPTIONS, projectorOptions);\n};\n\nexport let 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    projectionOptions = applyDefaultProjectionOptions(projectionOptions);\n    createDom(vnode, document.createElement(\"div\"), undefined, projectionOptions);\n    return createProjection(vnode, projectionOptions);\n  },\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: (\n    parentNode: Element,\n    vnode: VNode,\n    projectionOptions?: ProjectionOptions\n  ): Projection => {\n    projectionOptions = applyDefaultProjectionOptions(projectionOptions);\n    createDom(vnode, parentNode, undefined, projectionOptions);\n    return createProjection(vnode, projectionOptions);\n  },\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    projectionOptions = applyDefaultProjectionOptions(projectionOptions);\n    createDom(vnode, beforeNode.parentNode!, beforeNode, projectionOptions);\n    return createProjection(vnode, projectionOptions);\n  },\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    projectionOptions = applyDefaultProjectionOptions(projectionOptions);\n    vnode.domNode = element;\n    initPropertiesAndChildren(element, vnode, projectionOptions);\n    return createProjection(vnode, projectionOptions);\n  },\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    projectionOptions = applyDefaultProjectionOptions(projectionOptions);\n    createDom(vnode, element.parentNode!, element, projectionOptions);\n    element.parentNode!.removeChild(element);\n    return createProjection(vnode, projectionOptions);\n  },\n};\n"]}

package/dist/h.d.ts

@@ -1,4 +1,4 @@
-import { VNode, VNodeChild, VNodeProperties } from './interfaces';
+import { VNode, VNodeChild, VNodeProperties } from "./interfaces";
 /**
  * The `h` function is used to create a virtual DOM node.
  * This function is largely inspired by the mercuryjs and mithril frameworks.

package/dist/h.js

@@ -1,11 +1,10 @@
-/* tslint:disable function-name */
 var toTextVNode = function (data) {
     return {
-        vnodeSelector: '',
+        vnodeSelector: "",
         properties: undefined,
         children: undefined,
         text: data.toString(),
-        domNode: null
+        domNode: null,
     };
 };
 var appendChildren = function (parentSelector, insertions, main) {
@@ -16,7 +15,7 @@ var appendChildren = function (parentSelector, insertions, main) {
         }
         else {
             if (item !== null && item !== undefined && item !== false) {
-                if (typeof item === 'string') {
+                if (typeof item === "string") {
                     item = toTextVNode(item);
                 }
                 main.push(item);
@@ -29,14 +28,14 @@ export function h(selector, properties, children) {
         children = properties;
         properties = undefined;
     }
-    else if ((properties && (typeof properties === 'string' || properties.hasOwnProperty('vnodeSelector'))) ||
-        (children && (typeof children === 'string' || children.hasOwnProperty('vnodeSelector')))) {
-        throw new Error('h called with invalid arguments');
+    else if ((properties && (typeof properties === "string" || properties.vnodeSelector)) ||
+        (children && (typeof children === "string" || children.vnodeSelector))) {
+        throw new Error("h called with invalid arguments");
     }
     var text;
     var flattenedChildren;
     // Recognize a common special case where there is only a single text node
-    if (children && children.length === 1 && typeof children[0] === 'string') {
+    if (children && children.length === 1 && typeof children[0] === "string") {
         text = children[0];
     }
     else if (children) {
@@ -50,8 +49,8 @@ export function h(selector, properties, children) {
         vnodeSelector: selector,
         properties: properties,
         children: flattenedChildren,
-        text: (text === '') ? undefined : text,
-        domNode: null
+        text: text === "" ? undefined : text,
+        domNode: null,
     };
 }
 //# sourceMappingURL=h.js.map

package/dist/h.js.map

@@ -1 +1 @@
-{"version":3,"file":"h.js","sourceRoot":"","sources":["../src/h.ts"],"names":[],"mappings":"AAAA,kCAAkC;AAIlC,IAAI,WAAW,GAAG,UAAC,IAAY;IAC7B,OAAO;QACL,aAAa,EAAE,EAAE;QACjB,UAAU,EAAE,SAAS;QACrB,QAAQ,EAAE,SAAS;QACnB,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE;QACrB,OAAO,EAAE,IAAI;KACd,CAAC;AACJ,CAAC,CAAC;AAEF,IAAI,cAAc,GAAG,UAAC,cAAsB,EAAE,UAAwB,EAAE,IAAa;IACnF,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,QAAM,GAAG,UAAU,CAAC,MAAM,EAAE,CAAC,GAAG,QAAM,EAAE,CAAC,EAAE,EAAE;QAC3D,IAAI,IAAI,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC;QACzB,IAAI,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;YACvB,cAAc,CAAC,cAAc,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;SAC5C;aAAM;YACL,IAAI,IAAI,KAAK,IAAI,IAAI,IAAI,KAAK,SAAS,IAAI,IAAI,KAAK,KAAK,EAAE;gBACzD,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE;oBAC5B,IAAI,GAAG,WAAW,CAAC,IAAI,CAAC,CAAC;iBAC1B;gBACD,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;aACjB;SACF;KACF;AACH,CAAC,CAAC;AAoCF,MAAM,UAAU,CAAC,CAAC,QAAgB,EAAE,UAA4B,EAAE,QAA8B;IAC9F,IAAI,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC,EAAE;QAC7B,QAAQ,GAAG,UAAU,CAAC;QACtB,UAAU,GAAG,SAAS,CAAC;KACxB;SAAM,IACL,CAAC,UAAU,IAAI,CAAC,OAAO,UAAU,KAAK,QAAQ,IAAI,UAAU,CAAC,cAAc,CAAC,eAAe,CAAC,CAAC,CAAC;QAC9F,CAAC,QAAQ,IAAI,CAAC,OAAO,QAAQ,KAAK,QAAQ,IAAI,QAAQ,CAAC,cAAc,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE;QAC1F,MAAM,IAAI,KAAK,CAAC,iCAAiC,CAAC,CAAC;KACpD;IACD,IAAI,IAAwB,CAAC;IAC7B,IAAI,iBAAsC,CAAC;IAC3C,yEAAyE;IACzE,IAAI,QAAQ,IAAI,QAAQ,CAAC,MAAM,KAAK,CAAC,IAAI,OAAO,QAAQ,CAAC,CAAC,CAAC,KAAK,QAAQ,EAAE;QACxE,IAAI,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;KACpB;SAAM,IAAI,QAAQ,EAAE;QACnB,iBAAiB,GAAG,EAAE,CAAC;QACvB,cAAc,CAAC,QAAQ,EAAE,QAAQ,EAAE,iBAAiB,CAAC,CAAC;QACtD,IAAI,iBAAiB,CAAC,MAAM,KAAK,CAAC,EAAE;YAClC,iBAAiB,GAAG,SAAS,CAAC;SAC/B;KACF;IACD,OAAO;QACL,aAAa,EAAE,QAAQ;QACvB,UAAU,EAAE,UAAU;QACtB,QAAQ,EAAE,iBAAiB;QAC3B,IAAI,EAAE,CAAC,IAAI,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI;QACtC,OAAO,EAAE,IAAI;KACd,CAAC;AACJ,CAAC","sourcesContent":["/* tslint:disable function-name */\n\nimport { VNode, VNodeChild, VNodeProperties } from './interfaces';\n\nlet toTextVNode = (data: string): VNode => {\n  return {\n    vnodeSelector: '',\n    properties: undefined,\n    children: undefined,\n    text: data.toString(),\n    domNode: null\n  };\n};\n\nlet appendChildren = (parentSelector: string, insertions: VNodeChild[], main: VNode[]) => {\n  for (let i = 0, length = insertions.length; i < length; i++) {\n    let item = insertions[i];\n    if (Array.isArray(item)) {\n      appendChildren(parentSelector, item, main);\n    } else {\n      if (item !== null && item !== undefined && item !== false) {\n        if (typeof item === 'string') {\n          item = toTextVNode(item);\n        }\n        main.push(item);\n      }\n    }\n  }\n};\n\n/**\n * The `h` function is used to create a virtual DOM node.\n * This function is largely inspired by the mercuryjs and mithril frameworks.\n * The `h` stands for (virtual) hyperscript.\n *\n * @param selector    Contains the tagName, id and fixed css classnames in CSS selector format.\n *                    It is formatted as follows: `tagname.cssclass1.cssclass2#id`.\n * @param properties  An object literal containing properties that will be placed on the DOM node.\n * @param children    Virtual DOM nodes and strings to add as child nodes.\n *                    `children` may contain [[VNode]]s, `string`s, nested arrays, `null` and `undefined`.\n *                    Nested arrays are flattened, `null` and `undefined` are removed.\n *\n * @returns           A VNode object, used to render a real DOM later.\n *\n * NOTE: There are {@link http://maquettejs.org/docs/rules.html|two basic rules} you should be aware of when updating the virtual DOM.\n */\nexport function h(selector: string, properties?: VNodeProperties, children?: VNodeChild[] | null): VNode;\n/**\n * The `h` function is used to create a virtual DOM node.\n * This function is largely inspired by the mercuryjs and mithril frameworks.\n * The `h` stands for (virtual) hyperscript.\n *\n * @param selector    Contains the tagName, id and fixed css classnames in CSS selector format.\n *                    It is formatted as follows: `tagname.cssclass1.cssclass2#id`.\n * @param children    Virtual DOM nodes and strings to add as child nodes.\n *                    `children` may contain [[VNode]]s, `string`s, nested arrays, `null` and `undefined`.\n *                    Nested arrays are flattened, `null` and `undefined` are removed.\n *\n * @returns           A VNode object, used to render a real DOM later.\n *\n * NOTE: There are {@link http://maquettejs.org/docs/rules.html|two basic rules} you should be aware of when updating the virtual DOM.\n */\nexport function h(selector: string, children: VNodeChild[]): VNode;\n\nexport function h(selector: string, properties?: VNodeProperties, children?: VNodeChild[] | null): VNode {\n  if (Array.isArray(properties)) {\n    children = properties;\n    properties = undefined;\n  } else if (\n    (properties && (typeof properties === 'string' || properties.hasOwnProperty('vnodeSelector'))) ||\n    (children && (typeof children === 'string' || children.hasOwnProperty('vnodeSelector')))) {\n    throw new Error('h called with invalid arguments');\n  }\n  let text: string | undefined;\n  let flattenedChildren: VNode[] | undefined;\n  // Recognize a common special case where there is only a single text node\n  if (children && children.length === 1 && typeof children[0] === 'string') {\n    text = children[0];\n  } else if (children) {\n    flattenedChildren = [];\n    appendChildren(selector, children, flattenedChildren);\n    if (flattenedChildren.length === 0) {\n      flattenedChildren = undefined;\n    }\n  }\n  return {\n    vnodeSelector: selector,\n    properties: properties,\n    children: flattenedChildren,\n    text: (text === '') ? undefined : text,\n    domNode: null\n  };\n}\n"]}
+{"version":3,"file":"h.js","sourceRoot":"","sources":["../src/h.ts"],"names":[],"mappings":"AAEA,IAAI,WAAW,GAAG,UAAC,IAAY;IAC7B,OAAO;QACL,aAAa,EAAE,EAAE;QACjB,UAAU,EAAE,SAAS;QACrB,QAAQ,EAAE,SAAS;QACnB,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE;QACrB,OAAO,EAAE,IAAI;KACd,CAAC;AACJ,CAAC,CAAC;AAEF,IAAI,cAAc,GAAG,UAAC,cAAsB,EAAE,UAAwB,EAAE,IAAa;IACnF,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,QAAM,GAAG,UAAU,CAAC,MAAM,EAAE,CAAC,GAAG,QAAM,EAAE,CAAC,EAAE,EAAE;QAC3D,IAAI,IAAI,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC;QACzB,IAAI,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;YACvB,cAAc,CAAC,cAAc,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;SAC5C;aAAM;YACL,IAAI,IAAI,KAAK,IAAI,IAAI,IAAI,KAAK,SAAS,IAAI,IAAI,KAAK,KAAK,EAAE;gBACzD,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE;oBAC5B,IAAI,GAAG,WAAW,CAAC,IAAI,CAAC,CAAC;iBAC1B;gBACD,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;aACjB;SACF;KACF;AACH,CAAC,CAAC;AAwCF,MAAM,UAAU,CAAC,CACf,QAAgB,EAChB,UAA4B,EAC5B,QAA8B;IAE9B,IAAI,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC,EAAE;QAC7B,QAAQ,GAAG,UAAU,CAAC;QACtB,UAAU,GAAG,SAAS,CAAC;KACxB;SAAM,IACL,CAAC,UAAU,IAAI,CAAC,OAAQ,UAAkB,KAAK,QAAQ,IAAI,UAAU,CAAC,aAAa,CAAC,CAAC;QACrF,CAAC,QAAQ,IAAI,CAAC,OAAQ,QAAgB,KAAK,QAAQ,IAAK,QAAgB,CAAC,aAAa,CAAC,CAAC,EACxF;QACA,MAAM,IAAI,KAAK,CAAC,iCAAiC,CAAC,CAAC;KACpD;IACD,IAAI,IAAwB,CAAC;IAC7B,IAAI,iBAAsC,CAAC;IAC3C,yEAAyE;IACzE,IAAI,QAAQ,IAAI,QAAQ,CAAC,MAAM,KAAK,CAAC,IAAI,OAAO,QAAQ,CAAC,CAAC,CAAC,KAAK,QAAQ,EAAE;QACxE,IAAI,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;KACpB;SAAM,IAAI,QAAQ,EAAE;QACnB,iBAAiB,GAAG,EAAE,CAAC;QACvB,cAAc,CAAC,QAAQ,EAAE,QAAQ,EAAE,iBAAiB,CAAC,CAAC;QACtD,IAAI,iBAAiB,CAAC,MAAM,KAAK,CAAC,EAAE;YAClC,iBAAiB,GAAG,SAAS,CAAC;SAC/B;KACF;IACD,OAAO;QACL,aAAa,EAAE,QAAQ;QACvB,UAAU,EAAE,UAAU;QACtB,QAAQ,EAAE,iBAAiB;QAC3B,IAAI,EAAE,IAAI,KAAK,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI;QACpC,OAAO,EAAE,IAAI;KACd,CAAC;AACJ,CAAC","sourcesContent":["import { VNode, VNodeChild, VNodeProperties } from \"./interfaces\";\n\nlet toTextVNode = (data: string): VNode => {\n  return {\n    vnodeSelector: \"\",\n    properties: undefined,\n    children: undefined,\n    text: data.toString(),\n    domNode: null,\n  };\n};\n\nlet appendChildren = (parentSelector: string, insertions: VNodeChild[], main: VNode[]) => {\n  for (let i = 0, length = insertions.length; i < length; i++) {\n    let item = insertions[i];\n    if (Array.isArray(item)) {\n      appendChildren(parentSelector, item, main);\n    } else {\n      if (item !== null && item !== undefined && item !== false) {\n        if (typeof item === \"string\") {\n          item = toTextVNode(item);\n        }\n        main.push(item);\n      }\n    }\n  }\n};\n\n/**\n * The `h` function is used to create a virtual DOM node.\n * This function is largely inspired by the mercuryjs and mithril frameworks.\n * The `h` stands for (virtual) hyperscript.\n *\n * @param selector    Contains the tagName, id and fixed css classnames in CSS selector format.\n *                    It is formatted as follows: `tagname.cssclass1.cssclass2#id`.\n * @param properties  An object literal containing properties that will be placed on the DOM node.\n * @param children    Virtual DOM nodes and strings to add as child nodes.\n *                    `children` may contain [[VNode]]s, `string`s, nested arrays, `null` and `undefined`.\n *                    Nested arrays are flattened, `null` and `undefined` are removed.\n *\n * @returns           A VNode object, used to render a real DOM later.\n *\n * NOTE: There are {@link http://maquettejs.org/docs/rules.html|two basic rules} you should be aware of when updating the virtual DOM.\n */\nexport function h(\n  selector: string,\n  properties?: VNodeProperties,\n  children?: VNodeChild[] | null\n): VNode;\n/**\n * The `h` function is used to create a virtual DOM node.\n * This function is largely inspired by the mercuryjs and mithril frameworks.\n * The `h` stands for (virtual) hyperscript.\n *\n * @param selector    Contains the tagName, id and fixed css classnames in CSS selector format.\n *                    It is formatted as follows: `tagname.cssclass1.cssclass2#id`.\n * @param children    Virtual DOM nodes and strings to add as child nodes.\n *                    `children` may contain [[VNode]]s, `string`s, nested arrays, `null` and `undefined`.\n *                    Nested arrays are flattened, `null` and `undefined` are removed.\n *\n * @returns           A VNode object, used to render a real DOM later.\n *\n * NOTE: There are {@link http://maquettejs.org/docs/rules.html|two basic rules} you should be aware of when updating the virtual DOM.\n */\nexport function h(selector: string, children: VNodeChild[]): VNode;\n\nexport function h(\n  selector: string,\n  properties?: VNodeProperties,\n  children?: VNodeChild[] | null\n): VNode {\n  if (Array.isArray(properties)) {\n    children = properties;\n    properties = undefined;\n  } else if (\n    (properties && (typeof (properties as any) === \"string\" || properties.vnodeSelector)) ||\n    (children && (typeof (children as any) === \"string\" || (children as any).vnodeSelector))\n  ) {\n    throw new Error(\"h called with invalid arguments\");\n  }\n  let text: string | undefined;\n  let flattenedChildren: VNode[] | undefined;\n  // Recognize a common special case where there is only a single text node\n  if (children && children.length === 1 && typeof children[0] === \"string\") {\n    text = children[0];\n  } else if (children) {\n    flattenedChildren = [];\n    appendChildren(selector, children, flattenedChildren);\n    if (flattenedChildren.length === 0) {\n      flattenedChildren = undefined;\n    }\n  }\n  return {\n    vnodeSelector: selector,\n    properties: properties,\n    children: flattenedChildren,\n    text: text === \"\" ? undefined : text,\n    domNode: null,\n  };\n}\n"]}

package/dist/index.d.ts

@@ -3,9 +3,9 @@
  *
  * [[https://maquettejs.org/|To the maquette homepage]]
  */
-export * from './interfaces';
-export { dom } from './dom';
-export { h } from './h';
-export { createProjector } from './projector';
-export { createCache } from './cache';
-export { createMapping } from './mapping';
+export * from "./interfaces";
+export { dom } from "./dom";
+export { h } from "./h";
+export { createProjector } from "./projector";
+export { createCache } from "./cache";
+export { createMapping } from "./mapping";

package/dist/index.js

@@ -1,6 +1,13 @@
-export { dom } from './dom';
-export { h } from './h';
-export { createProjector } from './projector';
-export { createCache } from './cache';
-export { createMapping } from './mapping';
+// Comment that is displayed in the API documentation for the maquette module:
+/**
+ * Welcome to the API documentation of the **maquette** library.
+ *
+ * [[https://maquettejs.org/|To the maquette homepage]]
+ */
+export * from "./interfaces";
+export { dom } from "./dom";
+export { h } from "./h";
+export { createProjector } from "./projector";
+export { createCache } from "./cache";
+export { createMapping } from "./mapping";
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAC5B,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AACxB,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AACtC,OAAO,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC","sourcesContent":["// Comment that is displayed in the API documentation for the maquette module:\n/**\n * Welcome to the API documentation of the **maquette** library.\n *\n * [[https://maquettejs.org/|To the maquette homepage]]\n */\nexport * from './interfaces';\nexport { dom } from './dom';\nexport { h } from './h';\nexport { createProjector } from './projector';\nexport { createCache } from './cache';\nexport { createMapping } from './mapping';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,8EAA8E;AAC9E;;;;GAIG;AACH,cAAc,cAAc,CAAC;AAC7B,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAC5B,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AACxB,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AACtC,OAAO,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC","sourcesContent":["// Comment that is displayed in the API documentation for the maquette module:\n/**\n * Welcome to the API documentation of the **maquette** library.\n *\n * [[https://maquettejs.org/|To the maquette homepage]]\n */\nexport * from \"./interfaces\";\nexport { dom } from \"./dom\";\nexport { h } from \"./h\";\nexport { createProjector } from \"./projector\";\nexport { createCache } from \"./cache\";\nexport { createMapping } from \"./mapping\";\n"]}

package/dist/interfaces.d.ts

@@ -104,7 +104,7 @@ export interface VNodeProperties {
      * @param element - Element that was just added to the DOM.
      * @param properties - The properties object that was supplied to the [[h]] method
      */
-    enterAnimation?: ((element: Element, properties?: VNodeProperties) => void);
+    enterAnimation?: (element: Element, properties?: VNodeProperties) => void;
     /**
      * The animation to perform when this node is removed while its parent remains.
      * @param element - Element that ought to be removed from to the DOM.
@@ -156,13 +156,13 @@ export interface VNodeProperties {
      *
      * When no [[key]] is present, this object is also used to uniquely identify a DOM node.
      */
-    readonly bind?: object;
+    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.
      */
-    readonly key?: Object;
+    readonly key?: unknown;
     /**
      * An object literal like `{important:true}` which allows css classes, like `important` to be added and removed
      * dynamically.
@@ -212,7 +212,7 @@ export interface VNodeProperties {
     onmouseout?(ev: MouseEvent): boolean | void;
     onmouseover?(ev: MouseEvent): boolean | void;
     onmouseup?(ev: MouseEvent): boolean | void;
-    onmousewheel?(ev: WheelEvent | MouseWheelEvent): boolean | void;
+    onmousewheel?(ev: WheelEvent): boolean | void;
     onscroll?(ev: UIEvent): boolean | void;
     onsubmit?(ev: Event): boolean | void;
     readonly spellcheck?: boolean;
@@ -241,7 +241,7 @@ export interface VNodeProperties {
     /**
      * Do not use className, use class instead
      */
-    readonly className?: never | 'Hint: do not use `className`, use `class` instead';
+    readonly className?: never | "Hint: do not use `className`, use `class` instead";
     /**
      * Everything that is not explicitly listed (properties and attributes that are either uncommon or custom).
      */
@@ -249,13 +249,14 @@ export interface VNodeProperties {
 }
 /**
  * Only needed for the definition of [[VNodeChild]].
+ * @deprecated use VNodeChild
  */
 export interface VNodeChildren extends Array<VNodeChild> {
 }
 /**
  * These are valid values for the children parameter of the [[h]] function.
  */
-export declare type VNodeChild = string | VNode | VNodeChildren | false | null | undefined;
+export declare type VNodeChild = string | VNode | Array<VNodeChild> | false | null | undefined;
 /**
  * Represents a [[VNode]] tree that has been rendered to a real DOM tree.
  */
@@ -271,11 +272,12 @@ export interface Projection {
     update(updatedVnode: VNode): void;
     getLastRender(): VNode;
 }
+export declare type EventHandler = (this: Node, event: Event) => boolean | undefined | void;
 /**
  * Options that influence how the DOM is rendered and updated.
  */
-export declare type EventHandlerInterceptor = (propertyName: string, eventHandler: Function, domNode: Node, properties: VNodeProperties) => Function | undefined;
-export declare type PerformanceLoggerEvent = 'domEvent' | 'domEventProcessed' | 'renderStart' | 'rendered' | 'patched' | 'renderDone';
+export declare type EventHandlerInterceptor = (propertyName: string, eventHandler: EventHandler, domNode: Node, properties: VNodeProperties) => undefined | EventHandler;
+export declare type PerformanceLoggerEvent = "domEvent" | "domEventProcessed" | "renderStart" | "rendered" | "patched" | "renderDone";
 export declare type ProjectorPerformanceLogger = (eventType: PerformanceLoggerEvent, trigger: Event | undefined) => void;
 /**
  * Options that may be passed when creating the [[Projector]]

package/dist/interfaces.js

@@ -1 +1,2 @@
+export {};
 //# sourceMappingURL=interfaces.js.map

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 */\n/* tslint:disable member-ordering - we order by Element type here */\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?(element: Element, properties?: VNodeProperties, previousProperties?: VNodeProperties): 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   * 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?: object;\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?: Object;\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   * 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  // 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 | MouseWheelEvent): boolean | void;\n  onscroll?(ev: UIEvent): boolean | void;\n  onsubmit?(ev: Event): 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  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/* tslint:enable member-ordering */\n\n/**\n * Only needed for the definition of [[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 | VNodeChildren | 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\n/**\n * Options that influence how the DOM is rendered and updated.\n */\nexport type EventHandlerInterceptor = (propertyName: string, eventHandler: Function, domNode: Node, properties: VNodeProperties) => Function | undefined;\nexport type PerformanceLoggerEvent = 'domEvent' | 'domEventProcessed' | 'renderStart' | 'rendered' | 'patched' | 'renderDone';\nexport type ProjectorPerformanceLogger = (eventType: PerformanceLoggerEvent, trigger: Event | undefined) => 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 [[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 [[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(beforeNode: Element, vnode: VNode, projectionOptions?: ProjectionOptions): 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 [[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   * 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   * 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   * 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   * 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  // 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  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  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 [[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 [[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"]}

package/dist/mapping.d.ts

@@ -1,4 +1,4 @@
-import { Mapping } from './interfaces';
+import { Mapping } from "./interfaces";
 /**
  * Creates a {@link Mapping} instance that keeps an array of result objects synchronized with an array of source objects.
  * See {@link http://maquettejs.org/docs/arrays.html|Working with arrays}.

package/dist/mapping.js

@@ -45,7 +45,7 @@ export var createMapping = function (getSourceKey, createResult, updateResult) {
             }
             results.length = newSources.length;
             keys = newKeys;
-        }
+        },
     };
 };
 //# sourceMappingURL=mapping.js.map

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,YAAmD,EACnD,YAAuD,EACvD,YAAqE;IACrE,IAAI,IAAI,GAAG,EAAc,CAAC;IAC1B,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;gBAC1C,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;oBAChC,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;iBACZ;qBAAM;oBACL,IAAI,KAAK,GAAG,KAAK,CAAC;oBAClB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC,EAAE,EAAE;wBACxC,IAAI,WAAW,GAAG,CAAC,QAAQ,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC;wBAC/C,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK,SAAS,EAAE;4BACnC,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;yBACP;qBACF;oBACD,IAAI,CAAC,KAAK,EAAE;wBACV,OAAO,CAAC,CAAC,CAAC,GAAG,YAAY,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC;qBACtC;iBACF;aACF;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): Mapping<Source, Target> => {\n  let keys = [] as Object[];\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;gBAC1C,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;oBAChC,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;iBACZ;qBAAM;oBACL,IAAI,KAAK,GAAG,KAAK,CAAC;oBAClB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC,EAAE,EAAE;wBACxC,IAAI,WAAW,GAAG,CAAC,QAAQ,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC;wBAC/C,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK,SAAS,EAAE;4BACnC,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;yBACP;qBACF;oBACD,IAAI,CAAC,KAAK,EAAE;wBACV,OAAO,CAAC,CAAC,CAAC,GAAG,YAAY,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC;qBACtC;iBACF;aACF;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"]}