@neuronet.io/vido - npm Package Compare versions

Comparing version 3.2.1 to 3.2.2

dist/ActionsCollector.js

@@ -6,2 +6,3 @@ import { Directive } from 'lit-html-optimised';
             super();
+            this.actions = [];
             this.instance = instance;
@@ -36,3 +37,3 @@ }
                             update() { },
-                            destroy() { }
+                            destroy() { },
                         };
@@ -39,0 +40,0 @@ const action = { instance: this.instance, componentAction, element, props: this.props };

dist/helpers.js

@@ -28,3 +28,3 @@ /**
 function isObject(item) {
-    return item && typeof item === 'object' && item.constructor && item.constructor.name === 'Object';
+    return item && typeof item === 'object' && item !== null && item.constructor && item.constructor.name === 'Object';
 }
@@ -88,3 +88,5 @@ /**
 export function clone(source) {
+    // @ts-ignore
     if (typeof source.actions !== 'undefined') {
+        // @ts-ignore
         const actns = source.actions.map((action) => {
@@ -99,2 +101,3 @@ const result = Object.assign({}, action);
         });
+        // @ts-ignore
         source.actions = actns;
@@ -101,0 +104,0 @@ }

dist/InternalComponentMethods.js

 export default function getInternalComponentMethods(components, actionsByInstance, clone) {
     return class InternalComponentMethods {
-        constructor(instance, vidoInstance, renderFunction, content) {
+        constructor(instance, vidoInstance, renderFunction) {
             this.destroyed = false;
@@ -8,3 +8,2 @@ this.instance = instance;
             this.renderFunction = renderFunction;
-            this.content = content;
             this.destroy = this.destroy.bind(this);
@@ -11,0 +10,0 @@ this.update = this.update.bind(this);

dist/PointerAction.js

@@ -6,6 +6,6 @@ import Action from './Action';
     threshold: 10,
-    onDown(data) { },
-    onMove(data) { },
-    onUp(data) { },
-    onWheel(data) { }
+    onDown() { },
+    onMove() { },
+    onUp() { },
+    onWheel() { },
 };
@@ -162,3 +162,3 @@ const pointerEventsExists = typeof PointerEvent !== 'undefined';
                 lastY: this.lastY,
-                event
+                event,
             });
@@ -183,3 +183,3 @@ }
                 lastY: this.lastY,
-                event
+                event,
             });
@@ -191,2 +191,3 @@ }
                 this.moving = 'x';
+                // @ts-ignore
                 this.options.onMove({
@@ -199,3 +200,3 @@ movementX: this.handleX(normalized),
                     lastY: this.lastY,
-                    event
+                    event,
                 });
@@ -220,3 +221,3 @@ }
                 lastY: this.lastY,
-                event
+                event,
             });
@@ -237,3 +238,3 @@ }
             lastY: this.lastY,
-            event
+            event,
         });
@@ -240,0 +241,0 @@ this.lastY = 0;

dist/PublicComponentMethods.js

@@ -45,3 +45,3 @@ export default function getPublicComponentMethods(components, actionsByInstance, clone) {
          */
-        change(newProps, options) {
+        change(newProps, options = {}) {
             if (this.vidoInstance.debug) {
@@ -48,0 +48,0 @@ console.groupCollapsed(`changing component ${this.instance}`);

dist/Slots.js

@@ -57,3 +57,3 @@ export class Slots {
         if (this.destroyed)
-            return;
+            return [];
         if (placement === undefined)
@@ -60,0 +60,0 @@ return this.slotInstances;

dist/StyleMap.js

@@ -29,2 +29,3 @@ import { Directive } from 'lit-html-optimised';
         if (element.attributes.getNamedItem('style')) {
+            // @ts-ignore
             const currentElementStyles = element.attributes
@@ -36,2 +37,3 @@ .getNamedItem('style')
             for (const name of currentElementStyles) {
+                // @ts-ignore
                 if (this.style[name] === undefined) {
@@ -46,2 +48,3 @@ if (!this.toRemove.includes(name))
                 continue;
+            // @ts-ignore
             if (this.style[name] === undefined) {
@@ -55,3 +58,5 @@ if (!this.toRemove.includes(name))
                 continue;
+            // @ts-ignore
             const value = this.style[name];
+            // @ts-ignore
             const prev = previous[name];
@@ -78,2 +83,3 @@ if (prev !== undefined && prev === value) {
                 elementStyle.removeProperty(name);
+                // @ts-ignore
                 if (elementStyle[name])
@@ -83,4 +89,6 @@ delete elementStyle[name];
             for (const name of this.toUpdate) {
+                // @ts-ignore
                 const value = this.style[name];
                 if (!name.includes('-')) {
+                    // @ts-ignore
                     elementStyle[name] = value;
@@ -93,2 +101,3 @@ }
             if (this.detach && parent) {
+                // @ts-ignore
                 parent.insertBefore(element, nextSibling);
@@ -95,0 +104,0 @@ }

dist/vido.esm.min.js

@@ -173,3 +173,3 @@ /**
  */
-class Z{constructor(t){this.classes=new Set,this.changed=!1,this.element=t;const e=(t.getAttribute("class")||"").split(/\s+/);for(const t of e)this.classes.add(t)}add(t){this.classes.add(t),this.changed=!0}remove(t){this.classes.delete(t),this.changed=!0}commit(){if(this.changed){let t="";this.classes.forEach(e=>t+=e+" "),this.element.setAttribute("class",t)}}}const J=new WeakMap,K=t(t=>e=>{if(!(e instanceof A)||e instanceof Y||"class"!==e.committer.name||e.committer.parts.length>1)throw new Error("The `classMap` directive must be used in the `class` attribute and must be the only part in the attribute.");const{committer:n}=e,{element:s}=n;let o=J.get(e);void 0===o&&(s.setAttribute("class",n.strings.join(" ")),J.set(e,o=new Set));const i=s.classList||new Z(s);o.forEach(e=>{e in t||(i.remove(e),o.delete(e))});for(const e in t){const n=t[e];n!=o.has(e)&&(n?(i.add(e),o.add(e)):(i.remove(e),o.delete(e)))}"function"==typeof i.commit&&i.commit()}),Q=new WeakMap,tt=t((t,e)=>n=>{const s=Q.get(n);if(Array.isArray(t)){if(Array.isArray(s)&&s.length===t.length&&t.every((t,e)=>t===s[e]))return}else if(s===t&&(void 0!==t||Q.has(n)))return;n.setValue(e()),Q.set(n,Array.isArray(t)?Array.from(t):t)}),et=new WeakMap,nt=t(t=>e=>{const n=et.get(e);if(void 0===t&&e instanceof A){if(void 0!==n||!et.has(e)){const t=e.committer.name;e.committer.element.removeAttribute(t)}}else t!==n&&e.setValue(t);et.set(e,t)}),st=(t,e)=>{const n=t.startNode.parentNode,s=void 0===e?t.endNode:e.startNode,o=n.insertBefore(v(),s);n.insertBefore(v(),s);const i=new M(t.options);return i.insertAfterNode(o),i},ot=(t,e)=>(t.setValue(e),t.commit(),t),it=(t,e,n)=>{const s=t.startNode.parentNode,i=n?n.startNode:t.endNode,r=e.endNode.nextSibling;r!==i&&o(s,e.startNode,r,i)},rt=t=>{i(t.startNode.parentNode,t.startNode,t.endNode.nextSibling)},at=(t,e,n)=>{const s=new Map;for(let o=e;o<=n;o++)s.set(t[o],o);return s},lt=new WeakMap,ct=new WeakMap,ht=t((t,e,n)=>{let s;return void 0===n?n=e:void 0!==e&&(s=e),e=>{if(!(e instanceof M))throw new Error("repeat can only be used in text bindings");const o=lt.get(e)||[],i=ct.get(e)||[],r=[],a=[],l=[];let c,h,d=0;for(const e of t)l[d]=s?s(e,d):d,a[d]=n(e,d),d++;let p=0,u=o.length-1,m=0,v=a.length-1;for(;p<=u&&m<=v;)if(null===o[p])p++;else if(null===o[u])u--;else if(i[p]===l[m])r[m]=ot(o[p],a[m]),p++,m++;else if(i[u]===l[v])r[v]=ot(o[u],a[v]),u--,v--;else if(i[p]===l[v])r[v]=ot(o[p],a[v]),it(e,o[p],r[v+1]),p++,v--;else if(i[u]===l[m])r[m]=ot(o[u],a[m]),it(e,o[u],o[p]),u--,m++;else if(void 0===c&&(c=at(l,m,v),h=at(i,p,u)),c.has(i[p]))if(c.has(i[u])){const t=h.get(l[m]),n=void 0!==t?o[t]:null;if(null===n){const t=st(e,o[p]);ot(t,a[m]),r[m]=t}else r[m]=ot(n,a[m]),it(e,n,o[p]),o[t]=null;m++}else rt(o[u]),u--;else rt(o[p]),p++;for(;m<=v;){const t=st(e,r[v+1]);ot(t,a[m]),r[m++]=t}for(;p<=u;){const t=o[p++];null!==t&&rt(t)}lt.set(e,r),ct.set(e,l)}}),dt=new WeakMap,pt=document.createElement("template"),ut=t(t=>e=>{if(!(e instanceof M))throw new Error("unsafeHTML can only be used in text bindings");const n=dt.get(e);if(void 0!==n&&N(t)&&t===n.value&&e.value===n.fragment)return;const s=pt.cloneNode();s.innerHTML=t;const o=document.importNode(s.content,!0);e.setValue(o),dt.set(e,{value:t,fragment:o})}),mt=new WeakMap,vt=t((...t)=>e=>{let n=mt.get(e);void 0===n&&(n={lastRenderedIndex:2147483647,values:[]},mt.set(e,n));const s=n.values;let o=s.length;n.values=t;for(let i=0;i<t.length&&!(i>n.lastRenderedIndex);i++){const r=t[i];if(N(r)||"function"!=typeof r.then){e.setValue(r),n.lastRenderedIndex=i;break}i<o&&r===s[i]||(n.lastRenderedIndex=2147483647,o=0,Promise.resolve(r).then(t=>{const s=n.values.indexOf(r);s>-1&&s<n.lastRenderedIndex&&(n.lastRenderedIndex=s,e.setValue(t),e.commit())}))}}),ft=t(t=>e=>{let n;if(e instanceof S||e instanceof M)throw new Error("The `live` directive is not allowed on text or event bindings");if(e instanceof C)gt(e.strings),n=e.element.hasAttribute(e.name),e.value=n;else{const{element:s,name:o,strings:i}=e.committer;if(gt(i),e instanceof Y){if(n=s[o],n===t)return}else e instanceof A&&(n=s.getAttribute(o));if(n===String(t))return}e.setValue(t)}),gt=t=>{if(2!==t.length||""!==t[0]||""!==t[1])throw new Error("`live` bindings can only contain a single expression")},yt=new WeakMap;class bt extends e{constructor(t){super(),this.ifFn=t}body(t){const e=this.ifFn(),n=t.committer.element;if(e)yt.has(t)||yt.set(t,{element:n,nextSibling:n.nextSibling,previousSibling:n.previousSibling,parent:n.parentNode}),n.remove();else{const e=yt.get(t);e&&(e.nextSibling&&e.nextSibling.parentNode?e.nextSibling.parentNode.insertBefore(e.element,e.nextSibling):e.previousSibling&&e.previousSibling.parentNode?e.previousSibling.parentNode.appendChild(e.element):e.parent&&e.parent.appendChild(e.element),yt.delete(t))}}}class xt extends e{constructor(t,e=!1){super(),this.toRemove=[],this.toUpdate=[],this.debug=!1,this.previous={},this.style=t,this.detach=e}setStyle(t){this.style=t}setDebug(t=!0){this.debug=t}setDetach(t){this.detach=t}body(t){this.toRemove.length=0,this.toUpdate.length=0;const e=t.committer.element,n=e.style;let s=this.previous;if(e.attributes.getNamedItem("style")){const t=e.attributes.getNamedItem("style").value.split(";").map(t=>t.substr(0,t.indexOf(":")).trim()).filter(t=>!!t);for(const e of t)void 0===this.style[e]&&(this.toRemove.includes(e)||this.toRemove.push(e))}for(const t in s)this.style.hasOwnProperty(t)&&void 0===this.style[t]&&(this.toRemove.includes(t)||this.toRemove.push(t));for(const t in this.style){if(!this.style.hasOwnProperty(t))continue;const e=this.style[t],n=s[t];void 0!==n&&n===e||this.toUpdate.push(t)}if(this.debug&&(console.log("[StyleMap] to remove",[...this.toRemove]),console.log("[StyleMap] to update",[...this.toUpdate])),this.toRemove.length||this.toUpdate.length){let t,s;this.detach&&(t=e.parentNode,t&&(s=e.nextSibling,e.remove()));for(const t of this.toRemove)n.removeProperty(t),n[t]&&delete n[t];for(const t of this.toUpdate){const e=this.style[t];t.includes("-")?n.setProperty(t,e):n[t]=e}this.detach&&t&&t.insertBefore(e,s),this.previous=Object.assign({},this.style)}}}class _t{constructor(){this.isAction=!0}}_t.prototype.isAction=!0;const wt={element:document.createTextNode(""),axis:"xy",threshold:10,onDown(t){},onMove(t){},onUp(t){},onWheel(t){}},Nt="undefined"!=typeof PointerEvent;let Et=0;class It extends _t{constructor(t,e){super(),this.moving="",this.initialX=0,this.initialY=0,this.lastY=0,this.lastX=0,this.onPointerDown=this.onPointerDown.bind(this),this.onPointerMove=this.onPointerMove.bind(this),this.onPointerUp=this.onPointerUp.bind(this),this.onWheel=this.onWheel.bind(this),this.element=t,this.id=++Et,this.options=Object.assign(Object.assign({},wt),e.pointerOptions),Nt?(t.addEventListener("pointerdown",this.onPointerDown),document.addEventListener("pointermove",this.onPointerMove),document.addEventListener("pointerup",this.onPointerUp)):(t.addEventListener("touchstart",this.onPointerDown),document.addEventListener("touchmove",this.onPointerMove,{passive:!1}),document.addEventListener("touchend",this.onPointerUp),document.addEventListener("touchcancel",this.onPointerUp),t.addEventListener("mousedown",this.onPointerDown),document.addEventListener("mousemove",this.onPointerMove,{passive:!1}),document.addEventListener("mouseup",this.onPointerUp))}normalizeMouseWheelEvent(t){let e=t.deltaX||0,n=t.deltaY||0,s=t.deltaZ||0;const o=t.deltaMode,i=parseInt(getComputedStyle(t.target).getPropertyValue("line-height"));let r=1;switch(o){case 1:r=i;break;case 2:r=window.height}return e*=r,n*=r,s*=r,{x:e,y:n,z:s,event:t}}onWheel(t){const e=this.normalizeMouseWheelEvent(t);this.options.onWheel(e)}normalizePointerEvent(t){let e={x:0,y:0,pageX:0,pageY:0,clientX:0,clientY:0,screenX:0,screenY:0,event:t};switch(t.type){case"wheel":const n=this.normalizeMouseWheelEvent(t);e.x=n.x,e.y=n.y,e.pageX=e.x,e.pageY=e.y,e.screenX=e.x,e.screenY=e.y,e.clientX=e.x,e.clientY=e.y;break;case"touchstart":case"touchmove":case"touchend":case"touchcancel":e.x=t.changedTouches[0].screenX,e.y=t.changedTouches[0].screenY,e.pageX=t.changedTouches[0].pageX,e.pageY=t.changedTouches[0].pageY,e.screenX=t.changedTouches[0].screenX,e.screenY=t.changedTouches[0].screenY,e.clientX=t.changedTouches[0].clientX,e.clientY=t.changedTouches[0].clientY;break;default:e.x=t.x,e.y=t.y,e.pageX=t.pageX,e.pageY=t.pageY,e.screenX=t.screenX,e.screenY=t.screenY,e.clientX=t.clientX,e.clientY=t.clientY}return e}onPointerDown(t){if("mousedown"===t.type&&0!==t.button)return;this.moving="xy";const e=this.normalizePointerEvent(t);this.lastX=e.x,this.lastY=e.y,this.initialX=e.x,this.initialY=e.y,this.options.onDown(e)}handleX(t){let e=t.x-this.lastX;return this.lastY=t.y,this.lastX=t.x,e}handleY(t){let e=t.y-this.lastY;return this.lastY=t.y,this.lastX=t.x,e}onPointerMove(t){if(""===this.moving||"mousemove"===t.type&&0!==t.button)return;const e=this.normalizePointerEvent(t);if("x|y"===this.options.axis){let n=0,s=0;("x"===this.moving||"xy"===this.moving&&Math.abs(e.x-this.initialX)>this.options.threshold)&&(this.moving="x",n=this.handleX(e)),("y"===this.moving||"xy"===this.moving&&Math.abs(e.y-this.initialY)>this.options.threshold)&&(this.moving="y",s=this.handleY(e)),this.options.onMove({movementX:n,movementY:s,x:e.x,y:e.y,initialX:this.initialX,initialY:this.initialY,lastX:this.lastX,lastY:this.lastY,event:t})}else if("xy"===this.options.axis){let n=0,s=0;Math.abs(e.x-this.initialX)>this.options.threshold&&(n=this.handleX(e)),Math.abs(e.y-this.initialY)>this.options.threshold&&(s=this.handleY(e)),this.options.onMove({movementX:n,movementY:s,x:e.x,y:e.y,initialX:this.initialX,initialY:this.initialY,lastX:this.lastX,lastY:this.lastY,event:t})}else if("x"===this.options.axis)("x"===this.moving||"xy"===this.moving&&Math.abs(e.x-this.initialX)>this.options.threshold)&&(this.moving="x",this.options.onMove({movementX:this.handleX(e),movementY:0,initialX:this.initialX,initialY:this.initialY,lastX:this.lastX,lastY:this.lastY,event:t}));else if("y"===this.options.axis){let n=0;("y"===this.moving||"xy"===this.moving&&Math.abs(e.y-this.initialY)>this.options.threshold)&&(this.moving="y",n=this.handleY(e)),this.options.onMove({movementX:0,movementY:n,x:e.x,y:e.y,initialX:this.initialX,initialY:this.initialY,lastX:this.lastX,lastY:this.lastY,event:t})}}onPointerUp(t){this.moving="";const e=this.normalizePointerEvent(t);this.options.onUp({movementX:0,movementY:0,x:e.x,y:e.y,initialX:this.initialX,initialY:this.initialY,lastX:this.lastX,lastY:this.lastY,event:t}),this.lastY=0,this.lastX=0}destroy(t){Nt?(t.removeEventListener("pointerdown",this.onPointerDown),document.removeEventListener("pointermove",this.onPointerMove),document.removeEventListener("pointerup",this.onPointerUp)):(t.removeEventListener("mousedown",this.onPointerDown),document.removeEventListener("mousemove",this.onPointerMove),document.removeEventListener("mouseup",this.onPointerUp),t.removeEventListener("touchstart",this.onPointerDown),document.removeEventListener("touchmove",this.onPointerMove),document.removeEventListener("touchend",this.onPointerUp),document.removeEventListener("touchcancel",this.onPointerUp))}}function Pt(t){let e=0;return function(n){e||(e=requestAnimationFrame((function(){e=0,t.apply(void 0,[n])})))}}function At(t){return t&&"object"==typeof t&&t.constructor&&"Object"===t.constructor.name}function Mt(t){if(void 0!==t.actions){const e=t.actions.map(t=>{const e=Object.assign({},t),n=Object.assign({},e.props);return delete n.state,delete n.api,delete e.element,e.props=n,e});t.actions=e}return function t(e,...n){const s=n.shift();if(At(e)&&At(s))for(const n in s)if(At(s[n]))"function"==typeof s[n].clone?e[n]=s[n].clone():(void 0===e[n]&&(e[n]={}),e[n]=t(e[n],s[n]));else if(Array.isArray(s[n])){e[n]=new Array(s[n].length);let o=0;for(let i of s[n])At(i)?"function"==typeof i.clone?e[n][o]=i.clone():e[n][o]=t({},i):e[n][o]=i,o++}else e[n]=s[n];return n.length?t(e,...n):e}({},t)}class Ct{constructor(t,e){this.slotInstances={},this.destroyed=!1,this.vido=t,this.props=e,this.destroy=this.destroy.bind(this),this.change=this.change.bind(this),this.html=this.html.bind(this),this.getInstances=this.getInstances.bind(this),this.setComponents=this.setComponents.bind(this),this.vido.onDestroy(()=>{this.destroy()})}setComponents(t){if(t&&!this.destroyed){for(const e in t){const n=t[e];void 0===this.slotInstances[e]&&(this.slotInstances[e]=[]);for(const t of this.slotInstances[e])t.destroy();this.slotInstances[e].length=0;for(const t of n)this.slotInstances[e].push(this.vido.createComponent(t,this.props))}this.vido.update()}}destroy(){if(!this.destroyed){for(const t in this.slotInstances){for(const e of this.slotInstances[t])e.destroy();this.slotInstances[t].length=0}this.destroyed=!0}}change(t,e){if(!this.destroyed)for(const n in this.slotInstances){const s=this.slotInstances[n];for(const n of s)n.change(t,e)}}getInstances(t){if(!this.destroyed)return void 0===t?this.slotInstances:this.slotInstances[t]}html(t,e){if(this.destroyed)return;if(!this.slotInstances[t]||0===this.slotInstances[t].length)return e;let n=e;for(const e of this.slotInstances[t])n=e.html(n);return n}getProps(){return this.props}isDestroyed(){return this.destroyed}}function Xt(n,s){let o=0;const i=new Map;let r,a,l=new Map,c=0;const h=[],d=Promise.resolve(),p={},u=function(t){return class extends e{constructor(t){super(),this.instance=t}set(t,e){return this.actions=t,this.props=e,this}body(e){const n=e.committer.element;for(const e of this.actions)if(void 0!==e){let s;if(t.has(this.instance))for(const o of t.get(this.instance))if(o.componentAction.create===e&&o.element===n){s=o;break}if(s)s.props=this.props;else{void 0!==n.vido&&delete n.vido;const s={create:e,update(){},destroy(){}},o={instance:this.instance,componentAction:s,element:n,props:this.props};let i=[];t.has(this.instance)&&(i=t.get(this.instance)),i.push(o),t.set(this.instance,i)}}}}}(l);class m{constructor(t){this.instance=t}create(t,e){const n=new u(this.instance);return n.set(t,e),n}}const v=function(t,e,n){return class{constructor(t,e,n={}){this.destroyed=!1,this.instance=t,this.name=e.name,this.vidoInstance=e,this.props=n,this.destroy=this.destroy.bind(this),this.update=this.update.bind(this),this.change=this.change.bind(this),this.html=this.html.bind(this)}destroy(){this.destroyed||(this.vidoInstance.debug&&(console.groupCollapsed(`destroying component ${this.instance}`),console.log(n({components:t.keys(),actionsByInstance:e})),console.trace(),console.groupEnd()),this.vidoInstance.destroyComponent(this.instance,this.vidoInstance),this.destroyed=!0)}update(s){return this.vidoInstance.debug&&(console.groupCollapsed(`updating component ${this.instance}`),console.log(n({components:t.keys(),actionsByInstance:e})),console.trace(),console.groupEnd()),this.vidoInstance.updateTemplate(s)}change(s,o){this.vidoInstance.debug&&(console.groupCollapsed(`changing component ${this.instance}`),console.log(n({props:this.props,newProps:s,components:t.keys(),actionsByInstance:e})),console.trace(),console.groupEnd());const i=t.get(this.instance);i&&i.change(s,o)}html(e={}){const n=t.get(this.instance);if(n&&!n.destroyed)return n.update(e,this.vidoInstance)}_getComponents(){return t}_getActions(){return e}}}(i,l,Mt),f=function(t,e,n){return class{constructor(t,e,n,s){this.destroyed=!1,this.instance=t,this.vidoInstance=e,this.renderFunction=n,this.content=s,this.destroy=this.destroy.bind(this),this.update=this.update.bind(this),this.change=this.change.bind(this)}destroy(){if(!this.destroyed){this.vidoInstance.debug&&(console.groupCollapsed(`component destroy method fired ${this.instance}`),console.log(n({props:this.vidoInstance.props,components:t.keys(),destroyable:this.vidoInstance.destroyable,actionsByInstance:e})),console.trace(),console.groupEnd()),this.content&&"function"==typeof this.content.destroy&&this.content.destroy();for(const t of this.vidoInstance.destroyable)t();this.vidoInstance.onChangeFunctions.length=0,this.vidoInstance.destroyable.length=0,this.vidoInstance.destroyed=!0,this.destroyed=!0,this.vidoInstance.update()}}update(s={}){return this.vidoInstance.debug&&(console.groupCollapsed(`component update method fired ${this.instance}`),console.log(n({components:t.keys(),actionsByInstance:e})),console.trace(),console.groupEnd()),this.renderFunction(s)}change(s,o={leave:!1}){const i=s;this.vidoInstance.debug&&(console.groupCollapsed(`component change method fired ${this.instance}`),console.log(n({props:i,components:t.keys(),onChangeFunctions:this.vidoInstance.onChangeFunctions,changedProps:s,actionsByInstance:e})),console.trace(),console.groupEnd());for(const t of this.vidoInstance.onChangeFunctions)t(s,o)}}}(i,l,Mt);class g{constructor(){this.destroyable=[],this.destroyed=!1,this.onChangeFunctions=[],this.debug=!1,this.state=n,this.api=s,this.lastProps={},this.html=B,this.svg=F,this.directive=t,this.asyncAppend=H,this.asyncReplace=z,this.cache=G,this.classMap=K,this.guard=tt,this.live=ft,this.ifDefined=nt,this.repeat=ht,this.unsafeHTML=ut,this.until=vt,this.schedule=Pt,this.getElement=function(t){return function(e){return t(()=>t=>{e(t.committer.element)})()}}(t),this.actionsByInstance=(t,e)=>{},this.StyleMap=xt,this.Detach=bt,this.PointerAction=It,this.Action=_t,this.Slots=Ct,this._components=i,this._actions=l,this.reuseComponents=this.reuseComponents.bind(this),this.onDestroy=this.onDestroy.bind(this),this.onChange=this.onChange.bind(this),this.update=this.update.bind(this),this.destroyComponent=this.destroyComponent.bind(this);for(const t in p)this[t]=p[t].bind(this)}static addMethod(t,e){p[t]=e}onDestroy(t){this.destroyable.push(t)}onChange(t){this.onChangeFunctions.push(t)}update(t){return this.updateTemplate(t)}reuseComponents(t,e,n,s,o=!0,i=!1){const r=[],a=t.length,l=e.length;let c=!1;!o||void 0!==e&&0!==e.length||(c=!0);let h=0;if(a<l){let o=l-a;for(;o;){const i=e[l-o],a=this.createComponent(s,n(i));t.push(a),r.push(a),o--}}else if(a>l){let e=a-l;for(o&&(c=!0,h=a-e);e;){const n=a-e;o||(r.push(t[n]),t[n].destroy()),e--}o||(t.length=l)}let d=0;i&&console.log("modified components",r),i&&console.log("current components",t),i&&console.log("data array",e);for(const s of t){const t=e[d];i&&console.log(`reuse components data at '${d}'`,t),s&&!r.includes(s)&&(i&&console.log("getProps fn result",n(t)),s.change(n(t),{leave:c&&d>=h})),d++}}createComponent(t,e={},n=null){const s=t.name+":"+o++;let r;r=new g,r.instance=s,r.destroyed=!1,r.name=t.name,r.Actions=new m(s);const a=new v(s,r,e),c=new f(s,r,t(r,e,n),n);return i.set(s,c),i.get(s).change(e),r.debug&&(console.groupCollapsed(`component created ${s}`),console.log(Mt({props:e,components:i.keys(),actionsByInstance:l})),console.trace(),console.groupEnd()),a}destroyComponent(t,e){if(e.debug&&(console.groupCollapsed(`destroying component ${t}...`),console.log(Mt({components:i.keys(),actionsByInstance:l})),console.trace(),console.groupEnd()),l.has(t))for(const e of l.get(t))"function"==typeof e.componentAction.destroy&&e.componentAction.destroy(e.element,e.props);l.delete(t);const n=i.get(t);n?(n.destroy(),i.delete(t),e.debug&&(console.groupCollapsed(`component destroyed ${t}`),console.log(Mt({components:i.keys(),actionsByInstance:l})),console.trace(),console.groupEnd())):console.warn(`No component to destroy! [${t}]`)}executeActions(){for(const t of l.values()){for(const e of t)if(void 0===e.element.vido){const t=i.get(e.instance);e.isActive=function(){return t&&!1===t.destroyed};const n=e.componentAction,s=n.create;if(void 0!==s){let t;t=s.prototype&&(s.prototype.isAction||s.prototype.update||s.prototype.destroy)||s.isAction?new s(e.element,e.props):s(e.element,e.props),void 0!==t&&("function"==typeof t?n.destroy=t:("function"==typeof t.update&&(n.update=t.update.bind(t)),"function"==typeof t.destroy&&(n.destroy=t.destroy.bind(t))))}}else e.element.vido=e.props,"function"==typeof e.componentAction.update&&e.isActive()&&e.componentAction.update(e.element,e.props);for(const e of t)e.element.vido=e.props}}updateTemplate(t){return t&&h.push(t),new Promise(t=>{const e=++c,n=this;d.then((function(){if(e===c){c=0,n.render();for(const t of h)t();h.length=0,t()}}))})}createApp(t){a=t.element;const e=this.createComponent(t.component,t.props);return r=e.instance,this.render(),e}render(){const t=i.get(r);t?(W(t.update(),a),this.executeActions()):a&&a.remove()}}return new g}Xt.prototype.lithtml=U,Xt.prototype.Action=_t,Xt.prototype.Directive=e,Xt.prototype.schedule=Pt,Xt.prototype.Detach=bt,Xt.prototype.StyleMap=xt,Xt.prototype.PointerAction=It,Xt.prototype.asyncAppend=H,Xt.prototype.asyncReplace=z,Xt.prototype.cache=G,Xt.prototype.classMap=K,Xt.prototype.guard=tt,Xt.prototype.live=ft,Xt.prototype.ifDefined=nt,Xt.prototype.repeat=ht,Xt.prototype.unsafeHTML=ut,Xt.prototype.until=vt,Xt.prototype.Slots=Ct;export default Xt;export{_t as Action,bt as Detach,e as Directive,It as PointerAction,Ct as Slots,xt as StyleMap,H as asyncAppend,z as asyncReplace,G as cache,K as classMap,tt as guard,nt as ifDefined,U as lithtml,ht as repeat,Pt as schedule,ut as unsafeHTML,vt as until};
+class Z{constructor(t){this.classes=new Set,this.changed=!1,this.element=t;const e=(t.getAttribute("class")||"").split(/\s+/);for(const t of e)this.classes.add(t)}add(t){this.classes.add(t),this.changed=!0}remove(t){this.classes.delete(t),this.changed=!0}commit(){if(this.changed){let t="";this.classes.forEach(e=>t+=e+" "),this.element.setAttribute("class",t)}}}const J=new WeakMap,K=t(t=>e=>{if(!(e instanceof A)||e instanceof Y||"class"!==e.committer.name||e.committer.parts.length>1)throw new Error("The `classMap` directive must be used in the `class` attribute and must be the only part in the attribute.");const{committer:n}=e,{element:s}=n;let o=J.get(e);void 0===o&&(s.setAttribute("class",n.strings.join(" ")),J.set(e,o=new Set));const i=s.classList||new Z(s);o.forEach(e=>{e in t||(i.remove(e),o.delete(e))});for(const e in t){const n=t[e];n!=o.has(e)&&(n?(i.add(e),o.add(e)):(i.remove(e),o.delete(e)))}"function"==typeof i.commit&&i.commit()}),Q=new WeakMap,tt=t((t,e)=>n=>{const s=Q.get(n);if(Array.isArray(t)){if(Array.isArray(s)&&s.length===t.length&&t.every((t,e)=>t===s[e]))return}else if(s===t&&(void 0!==t||Q.has(n)))return;n.setValue(e()),Q.set(n,Array.isArray(t)?Array.from(t):t)}),et=new WeakMap,nt=t(t=>e=>{const n=et.get(e);if(void 0===t&&e instanceof A){if(void 0!==n||!et.has(e)){const t=e.committer.name;e.committer.element.removeAttribute(t)}}else t!==n&&e.setValue(t);et.set(e,t)}),st=(t,e)=>{const n=t.startNode.parentNode,s=void 0===e?t.endNode:e.startNode,o=n.insertBefore(v(),s);n.insertBefore(v(),s);const i=new M(t.options);return i.insertAfterNode(o),i},ot=(t,e)=>(t.setValue(e),t.commit(),t),it=(t,e,n)=>{const s=t.startNode.parentNode,i=n?n.startNode:t.endNode,r=e.endNode.nextSibling;r!==i&&o(s,e.startNode,r,i)},rt=t=>{i(t.startNode.parentNode,t.startNode,t.endNode.nextSibling)},at=(t,e,n)=>{const s=new Map;for(let o=e;o<=n;o++)s.set(t[o],o);return s},lt=new WeakMap,ct=new WeakMap,ht=t((t,e,n)=>{let s;return void 0===n?n=e:void 0!==e&&(s=e),e=>{if(!(e instanceof M))throw new Error("repeat can only be used in text bindings");const o=lt.get(e)||[],i=ct.get(e)||[],r=[],a=[],l=[];let c,h,d=0;for(const e of t)l[d]=s?s(e,d):d,a[d]=n(e,d),d++;let p=0,u=o.length-1,m=0,v=a.length-1;for(;p<=u&&m<=v;)if(null===o[p])p++;else if(null===o[u])u--;else if(i[p]===l[m])r[m]=ot(o[p],a[m]),p++,m++;else if(i[u]===l[v])r[v]=ot(o[u],a[v]),u--,v--;else if(i[p]===l[v])r[v]=ot(o[p],a[v]),it(e,o[p],r[v+1]),p++,v--;else if(i[u]===l[m])r[m]=ot(o[u],a[m]),it(e,o[u],o[p]),u--,m++;else if(void 0===c&&(c=at(l,m,v),h=at(i,p,u)),c.has(i[p]))if(c.has(i[u])){const t=h.get(l[m]),n=void 0!==t?o[t]:null;if(null===n){const t=st(e,o[p]);ot(t,a[m]),r[m]=t}else r[m]=ot(n,a[m]),it(e,n,o[p]),o[t]=null;m++}else rt(o[u]),u--;else rt(o[p]),p++;for(;m<=v;){const t=st(e,r[v+1]);ot(t,a[m]),r[m++]=t}for(;p<=u;){const t=o[p++];null!==t&&rt(t)}lt.set(e,r),ct.set(e,l)}}),dt=new WeakMap,pt=document.createElement("template"),ut=t(t=>e=>{if(!(e instanceof M))throw new Error("unsafeHTML can only be used in text bindings");const n=dt.get(e);if(void 0!==n&&N(t)&&t===n.value&&e.value===n.fragment)return;const s=pt.cloneNode();s.innerHTML=t;const o=document.importNode(s.content,!0);e.setValue(o),dt.set(e,{value:t,fragment:o})}),mt=new WeakMap,vt=t((...t)=>e=>{let n=mt.get(e);void 0===n&&(n={lastRenderedIndex:2147483647,values:[]},mt.set(e,n));const s=n.values;let o=s.length;n.values=t;for(let i=0;i<t.length&&!(i>n.lastRenderedIndex);i++){const r=t[i];if(N(r)||"function"!=typeof r.then){e.setValue(r),n.lastRenderedIndex=i;break}i<o&&r===s[i]||(n.lastRenderedIndex=2147483647,o=0,Promise.resolve(r).then(t=>{const s=n.values.indexOf(r);s>-1&&s<n.lastRenderedIndex&&(n.lastRenderedIndex=s,e.setValue(t),e.commit())}))}}),ft=t(t=>e=>{let n;if(e instanceof S||e instanceof M)throw new Error("The `live` directive is not allowed on text or event bindings");if(e instanceof C)gt(e.strings),n=e.element.hasAttribute(e.name),e.value=n;else{const{element:s,name:o,strings:i}=e.committer;if(gt(i),e instanceof Y){if(n=s[o],n===t)return}else e instanceof A&&(n=s.getAttribute(o));if(n===String(t))return}e.setValue(t)}),gt=t=>{if(2!==t.length||""!==t[0]||""!==t[1])throw new Error("`live` bindings can only contain a single expression")},yt=new WeakMap;class bt extends e{constructor(t){super(),this.ifFn=t}body(t){const e=this.ifFn(),n=t.committer.element;if(e)yt.has(t)||yt.set(t,{element:n,nextSibling:n.nextSibling,previousSibling:n.previousSibling,parent:n.parentNode}),n.remove();else{const e=yt.get(t);e&&(e.nextSibling&&e.nextSibling.parentNode?e.nextSibling.parentNode.insertBefore(e.element,e.nextSibling):e.previousSibling&&e.previousSibling.parentNode?e.previousSibling.parentNode.appendChild(e.element):e.parent&&e.parent.appendChild(e.element),yt.delete(t))}}}class xt extends e{constructor(t,e=!1){super(),this.toRemove=[],this.toUpdate=[],this.debug=!1,this.previous={},this.style=t,this.detach=e}setStyle(t){this.style=t}setDebug(t=!0){this.debug=t}setDetach(t){this.detach=t}body(t){this.toRemove.length=0,this.toUpdate.length=0;const e=t.committer.element,n=e.style;let s=this.previous;if(e.attributes.getNamedItem("style")){const t=e.attributes.getNamedItem("style").value.split(";").map(t=>t.substr(0,t.indexOf(":")).trim()).filter(t=>!!t);for(const e of t)void 0===this.style[e]&&(this.toRemove.includes(e)||this.toRemove.push(e))}for(const t in s)this.style.hasOwnProperty(t)&&void 0===this.style[t]&&(this.toRemove.includes(t)||this.toRemove.push(t));for(const t in this.style){if(!this.style.hasOwnProperty(t))continue;const e=this.style[t],n=s[t];void 0!==n&&n===e||this.toUpdate.push(t)}if(this.debug&&(console.log("[StyleMap] to remove",[...this.toRemove]),console.log("[StyleMap] to update",[...this.toUpdate])),this.toRemove.length||this.toUpdate.length){let t,s;this.detach&&(t=e.parentNode,t&&(s=e.nextSibling,e.remove()));for(const t of this.toRemove)n.removeProperty(t),n[t]&&delete n[t];for(const t of this.toUpdate){const e=this.style[t];t.includes("-")?n.setProperty(t,e):n[t]=e}this.detach&&t&&t.insertBefore(e,s),this.previous=Object.assign({},this.style)}}}class _t{constructor(){this.isAction=!0}}_t.prototype.isAction=!0;const wt={element:document.createTextNode(""),axis:"xy",threshold:10,onDown(){},onMove(){},onUp(){},onWheel(){}},Nt="undefined"!=typeof PointerEvent;let Et=0;class It extends _t{constructor(t,e){super(),this.moving="",this.initialX=0,this.initialY=0,this.lastY=0,this.lastX=0,this.onPointerDown=this.onPointerDown.bind(this),this.onPointerMove=this.onPointerMove.bind(this),this.onPointerUp=this.onPointerUp.bind(this),this.onWheel=this.onWheel.bind(this),this.element=t,this.id=++Et,this.options=Object.assign(Object.assign({},wt),e.pointerOptions),Nt?(t.addEventListener("pointerdown",this.onPointerDown),document.addEventListener("pointermove",this.onPointerMove),document.addEventListener("pointerup",this.onPointerUp)):(t.addEventListener("touchstart",this.onPointerDown),document.addEventListener("touchmove",this.onPointerMove,{passive:!1}),document.addEventListener("touchend",this.onPointerUp),document.addEventListener("touchcancel",this.onPointerUp),t.addEventListener("mousedown",this.onPointerDown),document.addEventListener("mousemove",this.onPointerMove,{passive:!1}),document.addEventListener("mouseup",this.onPointerUp))}normalizeMouseWheelEvent(t){let e=t.deltaX||0,n=t.deltaY||0,s=t.deltaZ||0;const o=t.deltaMode,i=parseInt(getComputedStyle(t.target).getPropertyValue("line-height"));let r=1;switch(o){case 1:r=i;break;case 2:r=window.height}return e*=r,n*=r,s*=r,{x:e,y:n,z:s,event:t}}onWheel(t){const e=this.normalizeMouseWheelEvent(t);this.options.onWheel(e)}normalizePointerEvent(t){let e={x:0,y:0,pageX:0,pageY:0,clientX:0,clientY:0,screenX:0,screenY:0,event:t};switch(t.type){case"wheel":const n=this.normalizeMouseWheelEvent(t);e.x=n.x,e.y=n.y,e.pageX=e.x,e.pageY=e.y,e.screenX=e.x,e.screenY=e.y,e.clientX=e.x,e.clientY=e.y;break;case"touchstart":case"touchmove":case"touchend":case"touchcancel":e.x=t.changedTouches[0].screenX,e.y=t.changedTouches[0].screenY,e.pageX=t.changedTouches[0].pageX,e.pageY=t.changedTouches[0].pageY,e.screenX=t.changedTouches[0].screenX,e.screenY=t.changedTouches[0].screenY,e.clientX=t.changedTouches[0].clientX,e.clientY=t.changedTouches[0].clientY;break;default:e.x=t.x,e.y=t.y,e.pageX=t.pageX,e.pageY=t.pageY,e.screenX=t.screenX,e.screenY=t.screenY,e.clientX=t.clientX,e.clientY=t.clientY}return e}onPointerDown(t){if("mousedown"===t.type&&0!==t.button)return;this.moving="xy";const e=this.normalizePointerEvent(t);this.lastX=e.x,this.lastY=e.y,this.initialX=e.x,this.initialY=e.y,this.options.onDown(e)}handleX(t){let e=t.x-this.lastX;return this.lastY=t.y,this.lastX=t.x,e}handleY(t){let e=t.y-this.lastY;return this.lastY=t.y,this.lastX=t.x,e}onPointerMove(t){if(""===this.moving||"mousemove"===t.type&&0!==t.button)return;const e=this.normalizePointerEvent(t);if("x|y"===this.options.axis){let n=0,s=0;("x"===this.moving||"xy"===this.moving&&Math.abs(e.x-this.initialX)>this.options.threshold)&&(this.moving="x",n=this.handleX(e)),("y"===this.moving||"xy"===this.moving&&Math.abs(e.y-this.initialY)>this.options.threshold)&&(this.moving="y",s=this.handleY(e)),this.options.onMove({movementX:n,movementY:s,x:e.x,y:e.y,initialX:this.initialX,initialY:this.initialY,lastX:this.lastX,lastY:this.lastY,event:t})}else if("xy"===this.options.axis){let n=0,s=0;Math.abs(e.x-this.initialX)>this.options.threshold&&(n=this.handleX(e)),Math.abs(e.y-this.initialY)>this.options.threshold&&(s=this.handleY(e)),this.options.onMove({movementX:n,movementY:s,x:e.x,y:e.y,initialX:this.initialX,initialY:this.initialY,lastX:this.lastX,lastY:this.lastY,event:t})}else if("x"===this.options.axis)("x"===this.moving||"xy"===this.moving&&Math.abs(e.x-this.initialX)>this.options.threshold)&&(this.moving="x",this.options.onMove({movementX:this.handleX(e),movementY:0,initialX:this.initialX,initialY:this.initialY,lastX:this.lastX,lastY:this.lastY,event:t}));else if("y"===this.options.axis){let n=0;("y"===this.moving||"xy"===this.moving&&Math.abs(e.y-this.initialY)>this.options.threshold)&&(this.moving="y",n=this.handleY(e)),this.options.onMove({movementX:0,movementY:n,x:e.x,y:e.y,initialX:this.initialX,initialY:this.initialY,lastX:this.lastX,lastY:this.lastY,event:t})}}onPointerUp(t){this.moving="";const e=this.normalizePointerEvent(t);this.options.onUp({movementX:0,movementY:0,x:e.x,y:e.y,initialX:this.initialX,initialY:this.initialY,lastX:this.lastX,lastY:this.lastY,event:t}),this.lastY=0,this.lastX=0}destroy(t){Nt?(t.removeEventListener("pointerdown",this.onPointerDown),document.removeEventListener("pointermove",this.onPointerMove),document.removeEventListener("pointerup",this.onPointerUp)):(t.removeEventListener("mousedown",this.onPointerDown),document.removeEventListener("mousemove",this.onPointerMove),document.removeEventListener("mouseup",this.onPointerUp),t.removeEventListener("touchstart",this.onPointerDown),document.removeEventListener("touchmove",this.onPointerMove),document.removeEventListener("touchend",this.onPointerUp),document.removeEventListener("touchcancel",this.onPointerUp))}}function Pt(t){let e=0;return function(n){e||(e=requestAnimationFrame((function(){e=0,t.apply(void 0,[n])})))}}function At(t){return t&&"object"==typeof t&&null!==t&&t.constructor&&"Object"===t.constructor.name}function Mt(t){if(void 0!==t.actions){const e=t.actions.map(t=>{const e=Object.assign({},t),n=Object.assign({},e.props);return delete n.state,delete n.api,delete e.element,e.props=n,e});t.actions=e}return function t(e,...n){const s=n.shift();if(At(e)&&At(s))for(const n in s)if(At(s[n]))"function"==typeof s[n].clone?e[n]=s[n].clone():(void 0===e[n]&&(e[n]={}),e[n]=t(e[n],s[n]));else if(Array.isArray(s[n])){e[n]=new Array(s[n].length);let o=0;for(let i of s[n])At(i)?"function"==typeof i.clone?e[n][o]=i.clone():e[n][o]=t({},i):e[n][o]=i,o++}else e[n]=s[n];return n.length?t(e,...n):e}({},t)}class Ct{constructor(t,e){this.slotInstances={},this.destroyed=!1,this.vido=t,this.props=e,this.destroy=this.destroy.bind(this),this.change=this.change.bind(this),this.html=this.html.bind(this),this.getInstances=this.getInstances.bind(this),this.setComponents=this.setComponents.bind(this),this.vido.onDestroy(()=>{this.destroy()})}setComponents(t){if(t&&!this.destroyed){for(const e in t){const n=t[e];void 0===this.slotInstances[e]&&(this.slotInstances[e]=[]);for(const t of this.slotInstances[e])t.destroy();this.slotInstances[e].length=0;for(const t of n)this.slotInstances[e].push(this.vido.createComponent(t,this.props))}this.vido.update()}}destroy(){if(!this.destroyed){for(const t in this.slotInstances){for(const e of this.slotInstances[t])e.destroy();this.slotInstances[t].length=0}this.destroyed=!0}}change(t,e){if(!this.destroyed)for(const n in this.slotInstances){const s=this.slotInstances[n];for(const n of s)n.change(t,e)}}getInstances(t){return this.destroyed?[]:void 0===t?this.slotInstances:this.slotInstances[t]}html(t,e){if(this.destroyed)return;if(!this.slotInstances[t]||0===this.slotInstances[t].length)return e;let n=e;for(const e of this.slotInstances[t])n=e.html(n);return n}getProps(){return this.props}isDestroyed(){return this.destroyed}}function Xt(n,s){let o=0;const i=new Map;let r,a,l=new Map,c=0;const h=[],d=Promise.resolve(),p={},u=function(t){return class extends e{constructor(t){super(),this.actions=[],this.instance=t}set(t,e){return this.actions=t,this.props=e,this}body(e){const n=e.committer.element;for(const e of this.actions)if(void 0!==e){let s;if(t.has(this.instance))for(const o of t.get(this.instance))if(o.componentAction.create===e&&o.element===n){s=o;break}if(s)s.props=this.props;else{void 0!==n.vido&&delete n.vido;const s={create:e,update(){},destroy(){}},o={instance:this.instance,componentAction:s,element:n,props:this.props};let i=[];t.has(this.instance)&&(i=t.get(this.instance)),i.push(o),t.set(this.instance,i)}}}}}(l);class m{constructor(t){this.instance=t}create(t,e){const n=new u(this.instance);return n.set(t,e),n}}const v=function(t,e,n){return class{constructor(t,e,n={}){this.destroyed=!1,this.instance=t,this.name=e.name,this.vidoInstance=e,this.props=n,this.destroy=this.destroy.bind(this),this.update=this.update.bind(this),this.change=this.change.bind(this),this.html=this.html.bind(this)}destroy(){this.destroyed||(this.vidoInstance.debug&&(console.groupCollapsed(`destroying component ${this.instance}`),console.log(n({components:t.keys(),actionsByInstance:e})),console.trace(),console.groupEnd()),this.vidoInstance.destroyComponent(this.instance,this.vidoInstance),this.destroyed=!0)}update(s){return this.vidoInstance.debug&&(console.groupCollapsed(`updating component ${this.instance}`),console.log(n({components:t.keys(),actionsByInstance:e})),console.trace(),console.groupEnd()),this.vidoInstance.updateTemplate(s)}change(s,o={}){this.vidoInstance.debug&&(console.groupCollapsed(`changing component ${this.instance}`),console.log(n({props:this.props,newProps:s,components:t.keys(),actionsByInstance:e})),console.trace(),console.groupEnd());const i=t.get(this.instance);i&&i.change(s,o)}html(e={}){const n=t.get(this.instance);if(n&&!n.destroyed)return n.update(e,this.vidoInstance)}_getComponents(){return t}_getActions(){return e}}}(i,l,Mt),f=function(t,e,n){return class{constructor(t,e,n){this.destroyed=!1,this.instance=t,this.vidoInstance=e,this.renderFunction=n,this.destroy=this.destroy.bind(this),this.update=this.update.bind(this),this.change=this.change.bind(this)}destroy(){if(!this.destroyed){this.vidoInstance.debug&&(console.groupCollapsed(`component destroy method fired ${this.instance}`),console.log(n({props:this.vidoInstance.props,components:t.keys(),destroyable:this.vidoInstance.destroyable,actionsByInstance:e})),console.trace(),console.groupEnd()),this.content&&"function"==typeof this.content.destroy&&this.content.destroy();for(const t of this.vidoInstance.destroyable)t();this.vidoInstance.onChangeFunctions.length=0,this.vidoInstance.destroyable.length=0,this.vidoInstance.destroyed=!0,this.destroyed=!0,this.vidoInstance.update()}}update(s={}){return this.vidoInstance.debug&&(console.groupCollapsed(`component update method fired ${this.instance}`),console.log(n({components:t.keys(),actionsByInstance:e})),console.trace(),console.groupEnd()),this.renderFunction(s)}change(s,o={leave:!1}){const i=s;this.vidoInstance.debug&&(console.groupCollapsed(`component change method fired ${this.instance}`),console.log(n({props:i,components:t.keys(),onChangeFunctions:this.vidoInstance.onChangeFunctions,changedProps:s,actionsByInstance:e})),console.trace(),console.groupEnd());for(const t of this.vidoInstance.onChangeFunctions)t(s,o)}}}(i,l,Mt);class g{constructor(e="",o=""){this.instance="",this.name="",this.destroyable=[],this.destroyed=!1,this.onChangeFunctions=[],this.debug=!1,this.state=n,this.api=s,this.lastProps={},this.html=B,this.svg=F,this.directive=t,this.asyncAppend=H,this.asyncReplace=z,this.cache=G,this.classMap=K,this.guard=tt,this.live=ft,this.ifDefined=nt,this.repeat=ht,this.unsafeHTML=ut,this.until=vt,this.schedule=Pt,this.getElement=function(t){return function(e){return t(()=>t=>{e(t.committer.element)})()}}(t),this.actionsByInstance=()=>{},this.StyleMap=xt,this.Detach=bt,this.PointerAction=It,this.Action=_t,this.Slots=Ct,this._components=i,this._actions=l,this.instance=e,this.reuseComponents=this.reuseComponents.bind(this),this.onDestroy=this.onDestroy.bind(this),this.onChange=this.onChange.bind(this),this.update=this.update.bind(this),this.destroyComponent=this.destroyComponent.bind(this);for(const t in p)this[t]=p[t].bind(this);this.name=o,this.Actions=new m(e)}static addMethod(t,e){p[t]=e}onDestroy(t){this.destroyable.push(t)}onChange(t){this.onChangeFunctions.push(t)}update(t){return this.updateTemplate(t)}reuseComponents(t,e,n,s,o=!0,i=!1){const r=[],a=t.length,l=e.length;let c=!1;!o||void 0!==e&&0!==e.length||(c=!0);let h=0;if(a<l){let o=l-a;for(;o;){const i=e[l-o],a=this.createComponent(s,n(i));t.push(a),r.push(a),o--}}else if(a>l){let e=a-l;for(o&&(c=!0,h=a-e);e;){const n=a-e;o||(r.push(t[n]),t[n].destroy()),e--}o||(t.length=l)}let d=0;i&&console.log("modified components",r),i&&console.log("current components",t),i&&console.log("data array",e);for(const s of t){const t=e[d];i&&console.log(`reuse components data at '${d}'`,t),s&&!r.includes(s)&&(i&&console.log("getProps fn result",n(t)),s.change(n(t),{leave:c&&d>=h})),d++}}createComponent(t,e={}){const n=t.name+":"+o++;let s;s=new g(n,name);const r=new v(n,s,e),a=new f(n,s,t(s,e));return i.set(n,a),i.get(n).change(e),s.debug&&(console.groupCollapsed(`component created ${n}`),console.log(Mt({props:e,components:i.keys(),actionsByInstance:l})),console.trace(),console.groupEnd()),r}destroyComponent(t,e){if(e.debug&&(console.groupCollapsed(`destroying component ${t}...`),console.log(Mt({components:i.keys(),actionsByInstance:l})),console.trace(),console.groupEnd()),l.has(t))for(const e of l.get(t))"function"==typeof e.componentAction.destroy&&e.componentAction.destroy(e.element,e.props);l.delete(t);const n=i.get(t);n?(n.destroy(),i.delete(t),e.debug&&(console.groupCollapsed(`component destroyed ${t}`),console.log(Mt({components:i.keys(),actionsByInstance:l})),console.trace(),console.groupEnd())):console.warn(`No component to destroy! [${t}]`)}executeActions(){for(const t of l.values()){for(const e of t)if(void 0===e.element.vido){const t=i.get(e.instance);e.isActive=function(){return t&&!1===t.destroyed};const n=e.componentAction,s=n.create;if(void 0!==s){let t;t=s.prototype&&(s.prototype.isAction||s.prototype.update||s.prototype.destroy)||s.isAction?new s(e.element,e.props):s(e.element,e.props),void 0!==t&&("function"==typeof t?n.destroy=t:("function"==typeof t.update&&(n.update=t.update.bind(t)),"function"==typeof t.destroy&&(n.destroy=t.destroy.bind(t))))}}else e.element.vido=e.props,"function"==typeof e.componentAction.update&&e.isActive()&&e.componentAction.update(e.element,e.props);for(const e of t)e.element.vido=e.props}}updateTemplate(t){return t&&h.push(t),new Promise(t=>{const e=++c,n=this;d.then((function(){if(e===c){c=0,n.render();for(const t of h)t();h.length=0,t()}}))})}createApp(t){a=t.element;const e=this.createComponent(t.component,t.props);return r=e.instance,this.render(),e}render(){const t=i.get(r);t?(W(t.update(),a),this.executeActions()):a&&a.remove()}}return new g}Xt.prototype.lithtml=U,Xt.prototype.Action=_t,Xt.prototype.Directive=e,Xt.prototype.schedule=Pt,Xt.prototype.Detach=bt,Xt.prototype.StyleMap=xt,Xt.prototype.PointerAction=It,Xt.prototype.asyncAppend=H,Xt.prototype.asyncReplace=z,Xt.prototype.cache=G,Xt.prototype.classMap=K,Xt.prototype.guard=tt,Xt.prototype.live=ft,Xt.prototype.ifDefined=nt,Xt.prototype.repeat=ht,Xt.prototype.unsafeHTML=ut,Xt.prototype.until=vt,Xt.prototype.Slots=Ct;export default Xt;export{_t as Action,bt as Detach,e as Directive,It as PointerAction,Ct as Slots,xt as StyleMap,H as asyncAppend,z as asyncReplace,G as cache,K as classMap,tt as guard,nt as ifDefined,U as lithtml,ht as repeat,Pt as schedule,ut as unsafeHTML,vt as until};
 //# sourceMappingURL=vido.esm.min.js.map

dist/vido.js

@@ -46,3 +46,5 @@ import { render, html, directive, svg, Directive } from 'lit-html-optimised';
     class VidoInstance {
-        constructor() {
+        constructor(instance = '', name = '') {
+            this.instance = '';
+            this.name = '';
             this.destroyable = [];
@@ -70,3 +72,3 @@ this.destroyed = false;
             this.getElement = prepareGetElement(directive);
-            this.actionsByInstance = (componentActions, props) => { };
+            this.actionsByInstance = ( /* componentActions, props */) => { };
             this.StyleMap = StyleMap;
@@ -79,2 +81,3 @@ this.Detach = Detach;
             this._actions = actionsByInstance;
+            this.instance = instance;
             this.reuseComponents = this.reuseComponents.bind(this);
@@ -86,6 +89,10 @@ this.onDestroy = this.onDestroy.bind(this);
             for (const name in additionalMethods) {
+                // @ts-ignore
                 this[name] = additionalMethods[name].bind(this);
             }
+            this.name = name;
+            this.Actions = new InstanceActionsCollector(instance);
         }
         static addMethod(name, body) {
+            // @ts-ignore
             additionalMethods[name] = body;
@@ -169,12 +176,8 @@ }
         }
-        createComponent(component, props = {}, content = null) {
+        createComponent(component, props = {}) {
             const instance = component.name + ':' + componentId++;
             let vidoInstance;
-            vidoInstance = new VidoInstance();
-            vidoInstance.instance = instance;
-            vidoInstance.destroyed = false;
-            vidoInstance.name = component.name;
-            vidoInstance.Actions = new InstanceActionsCollector(instance);
+            vidoInstance = new VidoInstance(instance, name);
             const publicMethods = new PublicComponentMethods(instance, vidoInstance, props);
-            const internalMethods = new InternalComponentMethods(instance, vidoInstance, component(vidoInstance, props, content), content);
+            const internalMethods = new InternalComponentMethods(instance, vidoInstance, component(vidoInstance, props));
             components.set(instance, internalMethods);
@@ -181,0 +184,0 @@ components.get(instance).change(props);

dist/vido.umd.min.js

@@ -173,3 +173,3 @@ !function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).Vido=e()}(this,(function(){"use strict";
      */
-class Z{constructor(t){this.classes=new Set,this.changed=!1,this.element=t;const e=(t.getAttribute("class")||"").split(/\s+/);for(const t of e)this.classes.add(t)}add(t){this.classes.add(t),this.changed=!0}remove(t){this.classes.delete(t),this.changed=!0}commit(){if(this.changed){let t="";this.classes.forEach(e=>t+=e+" "),this.element.setAttribute("class",t)}}}const J=new WeakMap,K=t(t=>e=>{if(!(e instanceof A)||e instanceof Y||"class"!==e.committer.name||e.committer.parts.length>1)throw new Error("The `classMap` directive must be used in the `class` attribute and must be the only part in the attribute.");const{committer:n}=e,{element:s}=n;let o=J.get(e);void 0===o&&(s.setAttribute("class",n.strings.join(" ")),J.set(e,o=new Set));const i=s.classList||new Z(s);o.forEach(e=>{e in t||(i.remove(e),o.delete(e))});for(const e in t){const n=t[e];n!=o.has(e)&&(n?(i.add(e),o.add(e)):(i.remove(e),o.delete(e)))}"function"==typeof i.commit&&i.commit()}),Q=new WeakMap,tt=t((t,e)=>n=>{const s=Q.get(n);if(Array.isArray(t)){if(Array.isArray(s)&&s.length===t.length&&t.every((t,e)=>t===s[e]))return}else if(s===t&&(void 0!==t||Q.has(n)))return;n.setValue(e()),Q.set(n,Array.isArray(t)?Array.from(t):t)}),et=new WeakMap,nt=t(t=>e=>{const n=et.get(e);if(void 0===t&&e instanceof A){if(void 0!==n||!et.has(e)){const t=e.committer.name;e.committer.element.removeAttribute(t)}}else t!==n&&e.setValue(t);et.set(e,t)}),st=(t,e)=>{const n=t.startNode.parentNode,s=void 0===e?t.endNode:e.startNode,o=n.insertBefore(f(),s);n.insertBefore(f(),s);const i=new M(t.options);return i.insertAfterNode(o),i},ot=(t,e)=>(t.setValue(e),t.commit(),t),it=(t,e,n)=>{const s=t.startNode.parentNode,i=n?n.startNode:t.endNode,r=e.endNode.nextSibling;r!==i&&o(s,e.startNode,r,i)},rt=t=>{i(t.startNode.parentNode,t.startNode,t.endNode.nextSibling)},at=(t,e,n)=>{const s=new Map;for(let o=e;o<=n;o++)s.set(t[o],o);return s},lt=new WeakMap,ct=new WeakMap,ht=t((t,e,n)=>{let s;return void 0===n?n=e:void 0!==e&&(s=e),e=>{if(!(e instanceof M))throw new Error("repeat can only be used in text bindings");const o=lt.get(e)||[],i=ct.get(e)||[],r=[],a=[],l=[];let c,h,d=0;for(const e of t)l[d]=s?s(e,d):d,a[d]=n(e,d),d++;let p=0,u=o.length-1,m=0,f=a.length-1;for(;p<=u&&m<=f;)if(null===o[p])p++;else if(null===o[u])u--;else if(i[p]===l[m])r[m]=ot(o[p],a[m]),p++,m++;else if(i[u]===l[f])r[f]=ot(o[u],a[f]),u--,f--;else if(i[p]===l[f])r[f]=ot(o[p],a[f]),it(e,o[p],r[f+1]),p++,f--;else if(i[u]===l[m])r[m]=ot(o[u],a[m]),it(e,o[u],o[p]),u--,m++;else if(void 0===c&&(c=at(l,m,f),h=at(i,p,u)),c.has(i[p]))if(c.has(i[u])){const t=h.get(l[m]),n=void 0!==t?o[t]:null;if(null===n){const t=st(e,o[p]);ot(t,a[m]),r[m]=t}else r[m]=ot(n,a[m]),it(e,n,o[p]),o[t]=null;m++}else rt(o[u]),u--;else rt(o[p]),p++;for(;m<=f;){const t=st(e,r[f+1]);ot(t,a[m]),r[m++]=t}for(;p<=u;){const t=o[p++];null!==t&&rt(t)}lt.set(e,r),ct.set(e,l)}}),dt=new WeakMap,pt=document.createElement("template"),ut=t(t=>e=>{if(!(e instanceof M))throw new Error("unsafeHTML can only be used in text bindings");const n=dt.get(e);if(void 0!==n&&N(t)&&t===n.value&&e.value===n.fragment)return;const s=pt.cloneNode();s.innerHTML=t;const o=document.importNode(s.content,!0);e.setValue(o),dt.set(e,{value:t,fragment:o})}),mt=new WeakMap,ft=t((...t)=>e=>{let n=mt.get(e);void 0===n&&(n={lastRenderedIndex:2147483647,values:[]},mt.set(e,n));const s=n.values;let o=s.length;n.values=t;for(let i=0;i<t.length&&!(i>n.lastRenderedIndex);i++){const r=t[i];if(N(r)||"function"!=typeof r.then){e.setValue(r),n.lastRenderedIndex=i;break}i<o&&r===s[i]||(n.lastRenderedIndex=2147483647,o=0,Promise.resolve(r).then(t=>{const s=n.values.indexOf(r);s>-1&&s<n.lastRenderedIndex&&(n.lastRenderedIndex=s,e.setValue(t),e.commit())}))}}),vt=t(t=>e=>{let n;if(e instanceof S||e instanceof M)throw new Error("The `live` directive is not allowed on text or event bindings");if(e instanceof C)gt(e.strings),n=e.element.hasAttribute(e.name),e.value=n;else{const{element:s,name:o,strings:i}=e.committer;if(gt(i),e instanceof Y){if(n=s[o],n===t)return}else e instanceof A&&(n=s.getAttribute(o));if(n===String(t))return}e.setValue(t)}),gt=t=>{if(2!==t.length||""!==t[0]||""!==t[1])throw new Error("`live` bindings can only contain a single expression")},yt=new WeakMap;class bt extends e{constructor(t){super(),this.ifFn=t}body(t){const e=this.ifFn(),n=t.committer.element;if(e)yt.has(t)||yt.set(t,{element:n,nextSibling:n.nextSibling,previousSibling:n.previousSibling,parent:n.parentNode}),n.remove();else{const e=yt.get(t);e&&(e.nextSibling&&e.nextSibling.parentNode?e.nextSibling.parentNode.insertBefore(e.element,e.nextSibling):e.previousSibling&&e.previousSibling.parentNode?e.previousSibling.parentNode.appendChild(e.element):e.parent&&e.parent.appendChild(e.element),yt.delete(t))}}}class xt extends e{constructor(t,e=!1){super(),this.toRemove=[],this.toUpdate=[],this.debug=!1,this.previous={},this.style=t,this.detach=e}setStyle(t){this.style=t}setDebug(t=!0){this.debug=t}setDetach(t){this.detach=t}body(t){this.toRemove.length=0,this.toUpdate.length=0;const e=t.committer.element,n=e.style;let s=this.previous;if(e.attributes.getNamedItem("style")){const t=e.attributes.getNamedItem("style").value.split(";").map(t=>t.substr(0,t.indexOf(":")).trim()).filter(t=>!!t);for(const e of t)void 0===this.style[e]&&(this.toRemove.includes(e)||this.toRemove.push(e))}for(const t in s)this.style.hasOwnProperty(t)&&void 0===this.style[t]&&(this.toRemove.includes(t)||this.toRemove.push(t));for(const t in this.style){if(!this.style.hasOwnProperty(t))continue;const e=this.style[t],n=s[t];void 0!==n&&n===e||this.toUpdate.push(t)}if(this.debug&&(console.log("[StyleMap] to remove",[...this.toRemove]),console.log("[StyleMap] to update",[...this.toUpdate])),this.toRemove.length||this.toUpdate.length){let t,s;this.detach&&(t=e.parentNode,t&&(s=e.nextSibling,e.remove()));for(const t of this.toRemove)n.removeProperty(t),n[t]&&delete n[t];for(const t of this.toUpdate){const e=this.style[t];t.includes("-")?n.setProperty(t,e):n[t]=e}this.detach&&t&&t.insertBefore(e,s),this.previous=Object.assign({},this.style)}}}class _t{constructor(){this.isAction=!0}}_t.prototype.isAction=!0;const wt={element:document.createTextNode(""),axis:"xy",threshold:10,onDown(t){},onMove(t){},onUp(t){},onWheel(t){}},Nt="undefined"!=typeof PointerEvent;let Et=0;class It extends _t{constructor(t,e){super(),this.moving="",this.initialX=0,this.initialY=0,this.lastY=0,this.lastX=0,this.onPointerDown=this.onPointerDown.bind(this),this.onPointerMove=this.onPointerMove.bind(this),this.onPointerUp=this.onPointerUp.bind(this),this.onWheel=this.onWheel.bind(this),this.element=t,this.id=++Et,this.options=Object.assign(Object.assign({},wt),e.pointerOptions),Nt?(t.addEventListener("pointerdown",this.onPointerDown),document.addEventListener("pointermove",this.onPointerMove),document.addEventListener("pointerup",this.onPointerUp)):(t.addEventListener("touchstart",this.onPointerDown),document.addEventListener("touchmove",this.onPointerMove,{passive:!1}),document.addEventListener("touchend",this.onPointerUp),document.addEventListener("touchcancel",this.onPointerUp),t.addEventListener("mousedown",this.onPointerDown),document.addEventListener("mousemove",this.onPointerMove,{passive:!1}),document.addEventListener("mouseup",this.onPointerUp))}normalizeMouseWheelEvent(t){let e=t.deltaX||0,n=t.deltaY||0,s=t.deltaZ||0;const o=t.deltaMode,i=parseInt(getComputedStyle(t.target).getPropertyValue("line-height"));let r=1;switch(o){case 1:r=i;break;case 2:r=window.height}return e*=r,n*=r,s*=r,{x:e,y:n,z:s,event:t}}onWheel(t){const e=this.normalizeMouseWheelEvent(t);this.options.onWheel(e)}normalizePointerEvent(t){let e={x:0,y:0,pageX:0,pageY:0,clientX:0,clientY:0,screenX:0,screenY:0,event:t};switch(t.type){case"wheel":const n=this.normalizeMouseWheelEvent(t);e.x=n.x,e.y=n.y,e.pageX=e.x,e.pageY=e.y,e.screenX=e.x,e.screenY=e.y,e.clientX=e.x,e.clientY=e.y;break;case"touchstart":case"touchmove":case"touchend":case"touchcancel":e.x=t.changedTouches[0].screenX,e.y=t.changedTouches[0].screenY,e.pageX=t.changedTouches[0].pageX,e.pageY=t.changedTouches[0].pageY,e.screenX=t.changedTouches[0].screenX,e.screenY=t.changedTouches[0].screenY,e.clientX=t.changedTouches[0].clientX,e.clientY=t.changedTouches[0].clientY;break;default:e.x=t.x,e.y=t.y,e.pageX=t.pageX,e.pageY=t.pageY,e.screenX=t.screenX,e.screenY=t.screenY,e.clientX=t.clientX,e.clientY=t.clientY}return e}onPointerDown(t){if("mousedown"===t.type&&0!==t.button)return;this.moving="xy";const e=this.normalizePointerEvent(t);this.lastX=e.x,this.lastY=e.y,this.initialX=e.x,this.initialY=e.y,this.options.onDown(e)}handleX(t){let e=t.x-this.lastX;return this.lastY=t.y,this.lastX=t.x,e}handleY(t){let e=t.y-this.lastY;return this.lastY=t.y,this.lastX=t.x,e}onPointerMove(t){if(""===this.moving||"mousemove"===t.type&&0!==t.button)return;const e=this.normalizePointerEvent(t);if("x|y"===this.options.axis){let n=0,s=0;("x"===this.moving||"xy"===this.moving&&Math.abs(e.x-this.initialX)>this.options.threshold)&&(this.moving="x",n=this.handleX(e)),("y"===this.moving||"xy"===this.moving&&Math.abs(e.y-this.initialY)>this.options.threshold)&&(this.moving="y",s=this.handleY(e)),this.options.onMove({movementX:n,movementY:s,x:e.x,y:e.y,initialX:this.initialX,initialY:this.initialY,lastX:this.lastX,lastY:this.lastY,event:t})}else if("xy"===this.options.axis){let n=0,s=0;Math.abs(e.x-this.initialX)>this.options.threshold&&(n=this.handleX(e)),Math.abs(e.y-this.initialY)>this.options.threshold&&(s=this.handleY(e)),this.options.onMove({movementX:n,movementY:s,x:e.x,y:e.y,initialX:this.initialX,initialY:this.initialY,lastX:this.lastX,lastY:this.lastY,event:t})}else if("x"===this.options.axis)("x"===this.moving||"xy"===this.moving&&Math.abs(e.x-this.initialX)>this.options.threshold)&&(this.moving="x",this.options.onMove({movementX:this.handleX(e),movementY:0,initialX:this.initialX,initialY:this.initialY,lastX:this.lastX,lastY:this.lastY,event:t}));else if("y"===this.options.axis){let n=0;("y"===this.moving||"xy"===this.moving&&Math.abs(e.y-this.initialY)>this.options.threshold)&&(this.moving="y",n=this.handleY(e)),this.options.onMove({movementX:0,movementY:n,x:e.x,y:e.y,initialX:this.initialX,initialY:this.initialY,lastX:this.lastX,lastY:this.lastY,event:t})}}onPointerUp(t){this.moving="";const e=this.normalizePointerEvent(t);this.options.onUp({movementX:0,movementY:0,x:e.x,y:e.y,initialX:this.initialX,initialY:this.initialY,lastX:this.lastX,lastY:this.lastY,event:t}),this.lastY=0,this.lastX=0}destroy(t){Nt?(t.removeEventListener("pointerdown",this.onPointerDown),document.removeEventListener("pointermove",this.onPointerMove),document.removeEventListener("pointerup",this.onPointerUp)):(t.removeEventListener("mousedown",this.onPointerDown),document.removeEventListener("mousemove",this.onPointerMove),document.removeEventListener("mouseup",this.onPointerUp),t.removeEventListener("touchstart",this.onPointerDown),document.removeEventListener("touchmove",this.onPointerMove),document.removeEventListener("touchend",this.onPointerUp),document.removeEventListener("touchcancel",this.onPointerUp))}}function Pt(t){let e=0;return function(n){e||(e=requestAnimationFrame((function(){e=0,t.apply(void 0,[n])})))}}function At(t){return t&&"object"==typeof t&&t.constructor&&"Object"===t.constructor.name}function Mt(t){if(void 0!==t.actions){const e=t.actions.map(t=>{const e=Object.assign({},t),n=Object.assign({},e.props);return delete n.state,delete n.api,delete e.element,e.props=n,e});t.actions=e}return function t(e,...n){const s=n.shift();if(At(e)&&At(s))for(const n in s)if(At(s[n]))"function"==typeof s[n].clone?e[n]=s[n].clone():(void 0===e[n]&&(e[n]={}),e[n]=t(e[n],s[n]));else if(Array.isArray(s[n])){e[n]=new Array(s[n].length);let o=0;for(let i of s[n])At(i)?"function"==typeof i.clone?e[n][o]=i.clone():e[n][o]=t({},i):e[n][o]=i,o++}else e[n]=s[n];return n.length?t(e,...n):e}({},t)}class Ct{constructor(t,e){this.slotInstances={},this.destroyed=!1,this.vido=t,this.props=e,this.destroy=this.destroy.bind(this),this.change=this.change.bind(this),this.html=this.html.bind(this),this.getInstances=this.getInstances.bind(this),this.setComponents=this.setComponents.bind(this),this.vido.onDestroy(()=>{this.destroy()})}setComponents(t){if(t&&!this.destroyed){for(const e in t){const n=t[e];void 0===this.slotInstances[e]&&(this.slotInstances[e]=[]);for(const t of this.slotInstances[e])t.destroy();this.slotInstances[e].length=0;for(const t of n)this.slotInstances[e].push(this.vido.createComponent(t,this.props))}this.vido.update()}}destroy(){if(!this.destroyed){for(const t in this.slotInstances){for(const e of this.slotInstances[t])e.destroy();this.slotInstances[t].length=0}this.destroyed=!0}}change(t,e){if(!this.destroyed)for(const n in this.slotInstances){const s=this.slotInstances[n];for(const n of s)n.change(t,e)}}getInstances(t){if(!this.destroyed)return void 0===t?this.slotInstances:this.slotInstances[t]}html(t,e){if(this.destroyed)return;if(!this.slotInstances[t]||0===this.slotInstances[t].length)return e;let n=e;for(const e of this.slotInstances[t])n=e.html(n);return n}getProps(){return this.props}isDestroyed(){return this.destroyed}}function Xt(n,s){let o=0;const i=new Map;let r,a,l=new Map,c=0;const h=[],d=Promise.resolve(),p={},u=function(t){return class extends e{constructor(t){super(),this.instance=t}set(t,e){return this.actions=t,this.props=e,this}body(e){const n=e.committer.element;for(const e of this.actions)if(void 0!==e){let s;if(t.has(this.instance))for(const o of t.get(this.instance))if(o.componentAction.create===e&&o.element===n){s=o;break}if(s)s.props=this.props;else{void 0!==n.vido&&delete n.vido;const s={create:e,update(){},destroy(){}},o={instance:this.instance,componentAction:s,element:n,props:this.props};let i=[];t.has(this.instance)&&(i=t.get(this.instance)),i.push(o),t.set(this.instance,i)}}}}}(l);class m{constructor(t){this.instance=t}create(t,e){const n=new u(this.instance);return n.set(t,e),n}}const f=function(t,e,n){return class{constructor(t,e,n={}){this.destroyed=!1,this.instance=t,this.name=e.name,this.vidoInstance=e,this.props=n,this.destroy=this.destroy.bind(this),this.update=this.update.bind(this),this.change=this.change.bind(this),this.html=this.html.bind(this)}destroy(){this.destroyed||(this.vidoInstance.debug&&(console.groupCollapsed(`destroying component ${this.instance}`),console.log(n({components:t.keys(),actionsByInstance:e})),console.trace(),console.groupEnd()),this.vidoInstance.destroyComponent(this.instance,this.vidoInstance),this.destroyed=!0)}update(s){return this.vidoInstance.debug&&(console.groupCollapsed(`updating component ${this.instance}`),console.log(n({components:t.keys(),actionsByInstance:e})),console.trace(),console.groupEnd()),this.vidoInstance.updateTemplate(s)}change(s,o){this.vidoInstance.debug&&(console.groupCollapsed(`changing component ${this.instance}`),console.log(n({props:this.props,newProps:s,components:t.keys(),actionsByInstance:e})),console.trace(),console.groupEnd());const i=t.get(this.instance);i&&i.change(s,o)}html(e={}){const n=t.get(this.instance);if(n&&!n.destroyed)return n.update(e,this.vidoInstance)}_getComponents(){return t}_getActions(){return e}}}(i,l,Mt),v=function(t,e,n){return class{constructor(t,e,n,s){this.destroyed=!1,this.instance=t,this.vidoInstance=e,this.renderFunction=n,this.content=s,this.destroy=this.destroy.bind(this),this.update=this.update.bind(this),this.change=this.change.bind(this)}destroy(){if(!this.destroyed){this.vidoInstance.debug&&(console.groupCollapsed(`component destroy method fired ${this.instance}`),console.log(n({props:this.vidoInstance.props,components:t.keys(),destroyable:this.vidoInstance.destroyable,actionsByInstance:e})),console.trace(),console.groupEnd()),this.content&&"function"==typeof this.content.destroy&&this.content.destroy();for(const t of this.vidoInstance.destroyable)t();this.vidoInstance.onChangeFunctions.length=0,this.vidoInstance.destroyable.length=0,this.vidoInstance.destroyed=!0,this.destroyed=!0,this.vidoInstance.update()}}update(s={}){return this.vidoInstance.debug&&(console.groupCollapsed(`component update method fired ${this.instance}`),console.log(n({components:t.keys(),actionsByInstance:e})),console.trace(),console.groupEnd()),this.renderFunction(s)}change(s,o={leave:!1}){const i=s;this.vidoInstance.debug&&(console.groupCollapsed(`component change method fired ${this.instance}`),console.log(n({props:i,components:t.keys(),onChangeFunctions:this.vidoInstance.onChangeFunctions,changedProps:s,actionsByInstance:e})),console.trace(),console.groupEnd());for(const t of this.vidoInstance.onChangeFunctions)t(s,o)}}}(i,l,Mt);class g{constructor(){this.destroyable=[],this.destroyed=!1,this.onChangeFunctions=[],this.debug=!1,this.state=n,this.api=s,this.lastProps={},this.html=B,this.svg=F,this.directive=t,this.asyncAppend=H,this.asyncReplace=z,this.cache=G,this.classMap=K,this.guard=tt,this.live=vt,this.ifDefined=nt,this.repeat=ht,this.unsafeHTML=ut,this.until=ft,this.schedule=Pt,this.getElement=function(t){return function(e){return t(()=>t=>{e(t.committer.element)})()}}(t),this.actionsByInstance=(t,e)=>{},this.StyleMap=xt,this.Detach=bt,this.PointerAction=It,this.Action=_t,this.Slots=Ct,this._components=i,this._actions=l,this.reuseComponents=this.reuseComponents.bind(this),this.onDestroy=this.onDestroy.bind(this),this.onChange=this.onChange.bind(this),this.update=this.update.bind(this),this.destroyComponent=this.destroyComponent.bind(this);for(const t in p)this[t]=p[t].bind(this)}static addMethod(t,e){p[t]=e}onDestroy(t){this.destroyable.push(t)}onChange(t){this.onChangeFunctions.push(t)}update(t){return this.updateTemplate(t)}reuseComponents(t,e,n,s,o=!0,i=!1){const r=[],a=t.length,l=e.length;let c=!1;!o||void 0!==e&&0!==e.length||(c=!0);let h=0;if(a<l){let o=l-a;for(;o;){const i=e[l-o],a=this.createComponent(s,n(i));t.push(a),r.push(a),o--}}else if(a>l){let e=a-l;for(o&&(c=!0,h=a-e);e;){const n=a-e;o||(r.push(t[n]),t[n].destroy()),e--}o||(t.length=l)}let d=0;i&&console.log("modified components",r),i&&console.log("current components",t),i&&console.log("data array",e);for(const s of t){const t=e[d];i&&console.log(`reuse components data at '${d}'`,t),s&&!r.includes(s)&&(i&&console.log("getProps fn result",n(t)),s.change(n(t),{leave:c&&d>=h})),d++}}createComponent(t,e={},n=null){const s=t.name+":"+o++;let r;r=new g,r.instance=s,r.destroyed=!1,r.name=t.name,r.Actions=new m(s);const a=new f(s,r,e),c=new v(s,r,t(r,e,n),n);return i.set(s,c),i.get(s).change(e),r.debug&&(console.groupCollapsed(`component created ${s}`),console.log(Mt({props:e,components:i.keys(),actionsByInstance:l})),console.trace(),console.groupEnd()),a}destroyComponent(t,e){if(e.debug&&(console.groupCollapsed(`destroying component ${t}...`),console.log(Mt({components:i.keys(),actionsByInstance:l})),console.trace(),console.groupEnd()),l.has(t))for(const e of l.get(t))"function"==typeof e.componentAction.destroy&&e.componentAction.destroy(e.element,e.props);l.delete(t);const n=i.get(t);n?(n.destroy(),i.delete(t),e.debug&&(console.groupCollapsed(`component destroyed ${t}`),console.log(Mt({components:i.keys(),actionsByInstance:l})),console.trace(),console.groupEnd())):console.warn(`No component to destroy! [${t}]`)}executeActions(){for(const t of l.values()){for(const e of t)if(void 0===e.element.vido){const t=i.get(e.instance);e.isActive=function(){return t&&!1===t.destroyed};const n=e.componentAction,s=n.create;if(void 0!==s){let t;t=s.prototype&&(s.prototype.isAction||s.prototype.update||s.prototype.destroy)||s.isAction?new s(e.element,e.props):s(e.element,e.props),void 0!==t&&("function"==typeof t?n.destroy=t:("function"==typeof t.update&&(n.update=t.update.bind(t)),"function"==typeof t.destroy&&(n.destroy=t.destroy.bind(t))))}}else e.element.vido=e.props,"function"==typeof e.componentAction.update&&e.isActive()&&e.componentAction.update(e.element,e.props);for(const e of t)e.element.vido=e.props}}updateTemplate(t){return t&&h.push(t),new Promise(t=>{const e=++c,n=this;d.then((function(){if(e===c){c=0,n.render();for(const t of h)t();h.length=0,t()}}))})}createApp(t){a=t.element;const e=this.createComponent(t.component,t.props);return r=e.instance,this.render(),e}render(){const t=i.get(r);t?(W(t.update(),a),this.executeActions()):a&&a.remove()}}return new g}return Xt.prototype.lithtml=U,Xt.prototype.Action=_t,Xt.prototype.Directive=e,Xt.prototype.schedule=Pt,Xt.prototype.Detach=bt,Xt.prototype.StyleMap=xt,Xt.prototype.PointerAction=It,Xt.prototype.asyncAppend=H,Xt.prototype.asyncReplace=z,Xt.prototype.cache=G,Xt.prototype.classMap=K,Xt.prototype.guard=tt,Xt.prototype.live=vt,Xt.prototype.ifDefined=nt,Xt.prototype.repeat=ht,Xt.prototype.unsafeHTML=ut,Xt.prototype.until=ft,Xt.prototype.Slots=Ct,Xt}));
+class Z{constructor(t){this.classes=new Set,this.changed=!1,this.element=t;const e=(t.getAttribute("class")||"").split(/\s+/);for(const t of e)this.classes.add(t)}add(t){this.classes.add(t),this.changed=!0}remove(t){this.classes.delete(t),this.changed=!0}commit(){if(this.changed){let t="";this.classes.forEach(e=>t+=e+" "),this.element.setAttribute("class",t)}}}const J=new WeakMap,K=t(t=>e=>{if(!(e instanceof A)||e instanceof Y||"class"!==e.committer.name||e.committer.parts.length>1)throw new Error("The `classMap` directive must be used in the `class` attribute and must be the only part in the attribute.");const{committer:n}=e,{element:s}=n;let o=J.get(e);void 0===o&&(s.setAttribute("class",n.strings.join(" ")),J.set(e,o=new Set));const i=s.classList||new Z(s);o.forEach(e=>{e in t||(i.remove(e),o.delete(e))});for(const e in t){const n=t[e];n!=o.has(e)&&(n?(i.add(e),o.add(e)):(i.remove(e),o.delete(e)))}"function"==typeof i.commit&&i.commit()}),Q=new WeakMap,tt=t((t,e)=>n=>{const s=Q.get(n);if(Array.isArray(t)){if(Array.isArray(s)&&s.length===t.length&&t.every((t,e)=>t===s[e]))return}else if(s===t&&(void 0!==t||Q.has(n)))return;n.setValue(e()),Q.set(n,Array.isArray(t)?Array.from(t):t)}),et=new WeakMap,nt=t(t=>e=>{const n=et.get(e);if(void 0===t&&e instanceof A){if(void 0!==n||!et.has(e)){const t=e.committer.name;e.committer.element.removeAttribute(t)}}else t!==n&&e.setValue(t);et.set(e,t)}),st=(t,e)=>{const n=t.startNode.parentNode,s=void 0===e?t.endNode:e.startNode,o=n.insertBefore(f(),s);n.insertBefore(f(),s);const i=new M(t.options);return i.insertAfterNode(o),i},ot=(t,e)=>(t.setValue(e),t.commit(),t),it=(t,e,n)=>{const s=t.startNode.parentNode,i=n?n.startNode:t.endNode,r=e.endNode.nextSibling;r!==i&&o(s,e.startNode,r,i)},rt=t=>{i(t.startNode.parentNode,t.startNode,t.endNode.nextSibling)},at=(t,e,n)=>{const s=new Map;for(let o=e;o<=n;o++)s.set(t[o],o);return s},lt=new WeakMap,ct=new WeakMap,ht=t((t,e,n)=>{let s;return void 0===n?n=e:void 0!==e&&(s=e),e=>{if(!(e instanceof M))throw new Error("repeat can only be used in text bindings");const o=lt.get(e)||[],i=ct.get(e)||[],r=[],a=[],l=[];let c,h,d=0;for(const e of t)l[d]=s?s(e,d):d,a[d]=n(e,d),d++;let p=0,u=o.length-1,m=0,f=a.length-1;for(;p<=u&&m<=f;)if(null===o[p])p++;else if(null===o[u])u--;else if(i[p]===l[m])r[m]=ot(o[p],a[m]),p++,m++;else if(i[u]===l[f])r[f]=ot(o[u],a[f]),u--,f--;else if(i[p]===l[f])r[f]=ot(o[p],a[f]),it(e,o[p],r[f+1]),p++,f--;else if(i[u]===l[m])r[m]=ot(o[u],a[m]),it(e,o[u],o[p]),u--,m++;else if(void 0===c&&(c=at(l,m,f),h=at(i,p,u)),c.has(i[p]))if(c.has(i[u])){const t=h.get(l[m]),n=void 0!==t?o[t]:null;if(null===n){const t=st(e,o[p]);ot(t,a[m]),r[m]=t}else r[m]=ot(n,a[m]),it(e,n,o[p]),o[t]=null;m++}else rt(o[u]),u--;else rt(o[p]),p++;for(;m<=f;){const t=st(e,r[f+1]);ot(t,a[m]),r[m++]=t}for(;p<=u;){const t=o[p++];null!==t&&rt(t)}lt.set(e,r),ct.set(e,l)}}),dt=new WeakMap,pt=document.createElement("template"),ut=t(t=>e=>{if(!(e instanceof M))throw new Error("unsafeHTML can only be used in text bindings");const n=dt.get(e);if(void 0!==n&&N(t)&&t===n.value&&e.value===n.fragment)return;const s=pt.cloneNode();s.innerHTML=t;const o=document.importNode(s.content,!0);e.setValue(o),dt.set(e,{value:t,fragment:o})}),mt=new WeakMap,ft=t((...t)=>e=>{let n=mt.get(e);void 0===n&&(n={lastRenderedIndex:2147483647,values:[]},mt.set(e,n));const s=n.values;let o=s.length;n.values=t;for(let i=0;i<t.length&&!(i>n.lastRenderedIndex);i++){const r=t[i];if(N(r)||"function"!=typeof r.then){e.setValue(r),n.lastRenderedIndex=i;break}i<o&&r===s[i]||(n.lastRenderedIndex=2147483647,o=0,Promise.resolve(r).then(t=>{const s=n.values.indexOf(r);s>-1&&s<n.lastRenderedIndex&&(n.lastRenderedIndex=s,e.setValue(t),e.commit())}))}}),vt=t(t=>e=>{let n;if(e instanceof S||e instanceof M)throw new Error("The `live` directive is not allowed on text or event bindings");if(e instanceof C)gt(e.strings),n=e.element.hasAttribute(e.name),e.value=n;else{const{element:s,name:o,strings:i}=e.committer;if(gt(i),e instanceof Y){if(n=s[o],n===t)return}else e instanceof A&&(n=s.getAttribute(o));if(n===String(t))return}e.setValue(t)}),gt=t=>{if(2!==t.length||""!==t[0]||""!==t[1])throw new Error("`live` bindings can only contain a single expression")},yt=new WeakMap;class bt extends e{constructor(t){super(),this.ifFn=t}body(t){const e=this.ifFn(),n=t.committer.element;if(e)yt.has(t)||yt.set(t,{element:n,nextSibling:n.nextSibling,previousSibling:n.previousSibling,parent:n.parentNode}),n.remove();else{const e=yt.get(t);e&&(e.nextSibling&&e.nextSibling.parentNode?e.nextSibling.parentNode.insertBefore(e.element,e.nextSibling):e.previousSibling&&e.previousSibling.parentNode?e.previousSibling.parentNode.appendChild(e.element):e.parent&&e.parent.appendChild(e.element),yt.delete(t))}}}class xt extends e{constructor(t,e=!1){super(),this.toRemove=[],this.toUpdate=[],this.debug=!1,this.previous={},this.style=t,this.detach=e}setStyle(t){this.style=t}setDebug(t=!0){this.debug=t}setDetach(t){this.detach=t}body(t){this.toRemove.length=0,this.toUpdate.length=0;const e=t.committer.element,n=e.style;let s=this.previous;if(e.attributes.getNamedItem("style")){const t=e.attributes.getNamedItem("style").value.split(";").map(t=>t.substr(0,t.indexOf(":")).trim()).filter(t=>!!t);for(const e of t)void 0===this.style[e]&&(this.toRemove.includes(e)||this.toRemove.push(e))}for(const t in s)this.style.hasOwnProperty(t)&&void 0===this.style[t]&&(this.toRemove.includes(t)||this.toRemove.push(t));for(const t in this.style){if(!this.style.hasOwnProperty(t))continue;const e=this.style[t],n=s[t];void 0!==n&&n===e||this.toUpdate.push(t)}if(this.debug&&(console.log("[StyleMap] to remove",[...this.toRemove]),console.log("[StyleMap] to update",[...this.toUpdate])),this.toRemove.length||this.toUpdate.length){let t,s;this.detach&&(t=e.parentNode,t&&(s=e.nextSibling,e.remove()));for(const t of this.toRemove)n.removeProperty(t),n[t]&&delete n[t];for(const t of this.toUpdate){const e=this.style[t];t.includes("-")?n.setProperty(t,e):n[t]=e}this.detach&&t&&t.insertBefore(e,s),this.previous=Object.assign({},this.style)}}}class _t{constructor(){this.isAction=!0}}_t.prototype.isAction=!0;const wt={element:document.createTextNode(""),axis:"xy",threshold:10,onDown(){},onMove(){},onUp(){},onWheel(){}},Nt="undefined"!=typeof PointerEvent;let Et=0;class It extends _t{constructor(t,e){super(),this.moving="",this.initialX=0,this.initialY=0,this.lastY=0,this.lastX=0,this.onPointerDown=this.onPointerDown.bind(this),this.onPointerMove=this.onPointerMove.bind(this),this.onPointerUp=this.onPointerUp.bind(this),this.onWheel=this.onWheel.bind(this),this.element=t,this.id=++Et,this.options=Object.assign(Object.assign({},wt),e.pointerOptions),Nt?(t.addEventListener("pointerdown",this.onPointerDown),document.addEventListener("pointermove",this.onPointerMove),document.addEventListener("pointerup",this.onPointerUp)):(t.addEventListener("touchstart",this.onPointerDown),document.addEventListener("touchmove",this.onPointerMove,{passive:!1}),document.addEventListener("touchend",this.onPointerUp),document.addEventListener("touchcancel",this.onPointerUp),t.addEventListener("mousedown",this.onPointerDown),document.addEventListener("mousemove",this.onPointerMove,{passive:!1}),document.addEventListener("mouseup",this.onPointerUp))}normalizeMouseWheelEvent(t){let e=t.deltaX||0,n=t.deltaY||0,s=t.deltaZ||0;const o=t.deltaMode,i=parseInt(getComputedStyle(t.target).getPropertyValue("line-height"));let r=1;switch(o){case 1:r=i;break;case 2:r=window.height}return e*=r,n*=r,s*=r,{x:e,y:n,z:s,event:t}}onWheel(t){const e=this.normalizeMouseWheelEvent(t);this.options.onWheel(e)}normalizePointerEvent(t){let e={x:0,y:0,pageX:0,pageY:0,clientX:0,clientY:0,screenX:0,screenY:0,event:t};switch(t.type){case"wheel":const n=this.normalizeMouseWheelEvent(t);e.x=n.x,e.y=n.y,e.pageX=e.x,e.pageY=e.y,e.screenX=e.x,e.screenY=e.y,e.clientX=e.x,e.clientY=e.y;break;case"touchstart":case"touchmove":case"touchend":case"touchcancel":e.x=t.changedTouches[0].screenX,e.y=t.changedTouches[0].screenY,e.pageX=t.changedTouches[0].pageX,e.pageY=t.changedTouches[0].pageY,e.screenX=t.changedTouches[0].screenX,e.screenY=t.changedTouches[0].screenY,e.clientX=t.changedTouches[0].clientX,e.clientY=t.changedTouches[0].clientY;break;default:e.x=t.x,e.y=t.y,e.pageX=t.pageX,e.pageY=t.pageY,e.screenX=t.screenX,e.screenY=t.screenY,e.clientX=t.clientX,e.clientY=t.clientY}return e}onPointerDown(t){if("mousedown"===t.type&&0!==t.button)return;this.moving="xy";const e=this.normalizePointerEvent(t);this.lastX=e.x,this.lastY=e.y,this.initialX=e.x,this.initialY=e.y,this.options.onDown(e)}handleX(t){let e=t.x-this.lastX;return this.lastY=t.y,this.lastX=t.x,e}handleY(t){let e=t.y-this.lastY;return this.lastY=t.y,this.lastX=t.x,e}onPointerMove(t){if(""===this.moving||"mousemove"===t.type&&0!==t.button)return;const e=this.normalizePointerEvent(t);if("x|y"===this.options.axis){let n=0,s=0;("x"===this.moving||"xy"===this.moving&&Math.abs(e.x-this.initialX)>this.options.threshold)&&(this.moving="x",n=this.handleX(e)),("y"===this.moving||"xy"===this.moving&&Math.abs(e.y-this.initialY)>this.options.threshold)&&(this.moving="y",s=this.handleY(e)),this.options.onMove({movementX:n,movementY:s,x:e.x,y:e.y,initialX:this.initialX,initialY:this.initialY,lastX:this.lastX,lastY:this.lastY,event:t})}else if("xy"===this.options.axis){let n=0,s=0;Math.abs(e.x-this.initialX)>this.options.threshold&&(n=this.handleX(e)),Math.abs(e.y-this.initialY)>this.options.threshold&&(s=this.handleY(e)),this.options.onMove({movementX:n,movementY:s,x:e.x,y:e.y,initialX:this.initialX,initialY:this.initialY,lastX:this.lastX,lastY:this.lastY,event:t})}else if("x"===this.options.axis)("x"===this.moving||"xy"===this.moving&&Math.abs(e.x-this.initialX)>this.options.threshold)&&(this.moving="x",this.options.onMove({movementX:this.handleX(e),movementY:0,initialX:this.initialX,initialY:this.initialY,lastX:this.lastX,lastY:this.lastY,event:t}));else if("y"===this.options.axis){let n=0;("y"===this.moving||"xy"===this.moving&&Math.abs(e.y-this.initialY)>this.options.threshold)&&(this.moving="y",n=this.handleY(e)),this.options.onMove({movementX:0,movementY:n,x:e.x,y:e.y,initialX:this.initialX,initialY:this.initialY,lastX:this.lastX,lastY:this.lastY,event:t})}}onPointerUp(t){this.moving="";const e=this.normalizePointerEvent(t);this.options.onUp({movementX:0,movementY:0,x:e.x,y:e.y,initialX:this.initialX,initialY:this.initialY,lastX:this.lastX,lastY:this.lastY,event:t}),this.lastY=0,this.lastX=0}destroy(t){Nt?(t.removeEventListener("pointerdown",this.onPointerDown),document.removeEventListener("pointermove",this.onPointerMove),document.removeEventListener("pointerup",this.onPointerUp)):(t.removeEventListener("mousedown",this.onPointerDown),document.removeEventListener("mousemove",this.onPointerMove),document.removeEventListener("mouseup",this.onPointerUp),t.removeEventListener("touchstart",this.onPointerDown),document.removeEventListener("touchmove",this.onPointerMove),document.removeEventListener("touchend",this.onPointerUp),document.removeEventListener("touchcancel",this.onPointerUp))}}function Pt(t){let e=0;return function(n){e||(e=requestAnimationFrame((function(){e=0,t.apply(void 0,[n])})))}}function At(t){return t&&"object"==typeof t&&null!==t&&t.constructor&&"Object"===t.constructor.name}function Mt(t){if(void 0!==t.actions){const e=t.actions.map(t=>{const e=Object.assign({},t),n=Object.assign({},e.props);return delete n.state,delete n.api,delete e.element,e.props=n,e});t.actions=e}return function t(e,...n){const s=n.shift();if(At(e)&&At(s))for(const n in s)if(At(s[n]))"function"==typeof s[n].clone?e[n]=s[n].clone():(void 0===e[n]&&(e[n]={}),e[n]=t(e[n],s[n]));else if(Array.isArray(s[n])){e[n]=new Array(s[n].length);let o=0;for(let i of s[n])At(i)?"function"==typeof i.clone?e[n][o]=i.clone():e[n][o]=t({},i):e[n][o]=i,o++}else e[n]=s[n];return n.length?t(e,...n):e}({},t)}class Ct{constructor(t,e){this.slotInstances={},this.destroyed=!1,this.vido=t,this.props=e,this.destroy=this.destroy.bind(this),this.change=this.change.bind(this),this.html=this.html.bind(this),this.getInstances=this.getInstances.bind(this),this.setComponents=this.setComponents.bind(this),this.vido.onDestroy(()=>{this.destroy()})}setComponents(t){if(t&&!this.destroyed){for(const e in t){const n=t[e];void 0===this.slotInstances[e]&&(this.slotInstances[e]=[]);for(const t of this.slotInstances[e])t.destroy();this.slotInstances[e].length=0;for(const t of n)this.slotInstances[e].push(this.vido.createComponent(t,this.props))}this.vido.update()}}destroy(){if(!this.destroyed){for(const t in this.slotInstances){for(const e of this.slotInstances[t])e.destroy();this.slotInstances[t].length=0}this.destroyed=!0}}change(t,e){if(!this.destroyed)for(const n in this.slotInstances){const s=this.slotInstances[n];for(const n of s)n.change(t,e)}}getInstances(t){return this.destroyed?[]:void 0===t?this.slotInstances:this.slotInstances[t]}html(t,e){if(this.destroyed)return;if(!this.slotInstances[t]||0===this.slotInstances[t].length)return e;let n=e;for(const e of this.slotInstances[t])n=e.html(n);return n}getProps(){return this.props}isDestroyed(){return this.destroyed}}function Xt(n,s){let o=0;const i=new Map;let r,a,l=new Map,c=0;const h=[],d=Promise.resolve(),p={},u=function(t){return class extends e{constructor(t){super(),this.actions=[],this.instance=t}set(t,e){return this.actions=t,this.props=e,this}body(e){const n=e.committer.element;for(const e of this.actions)if(void 0!==e){let s;if(t.has(this.instance))for(const o of t.get(this.instance))if(o.componentAction.create===e&&o.element===n){s=o;break}if(s)s.props=this.props;else{void 0!==n.vido&&delete n.vido;const s={create:e,update(){},destroy(){}},o={instance:this.instance,componentAction:s,element:n,props:this.props};let i=[];t.has(this.instance)&&(i=t.get(this.instance)),i.push(o),t.set(this.instance,i)}}}}}(l);class m{constructor(t){this.instance=t}create(t,e){const n=new u(this.instance);return n.set(t,e),n}}const f=function(t,e,n){return class{constructor(t,e,n={}){this.destroyed=!1,this.instance=t,this.name=e.name,this.vidoInstance=e,this.props=n,this.destroy=this.destroy.bind(this),this.update=this.update.bind(this),this.change=this.change.bind(this),this.html=this.html.bind(this)}destroy(){this.destroyed||(this.vidoInstance.debug&&(console.groupCollapsed(`destroying component ${this.instance}`),console.log(n({components:t.keys(),actionsByInstance:e})),console.trace(),console.groupEnd()),this.vidoInstance.destroyComponent(this.instance,this.vidoInstance),this.destroyed=!0)}update(s){return this.vidoInstance.debug&&(console.groupCollapsed(`updating component ${this.instance}`),console.log(n({components:t.keys(),actionsByInstance:e})),console.trace(),console.groupEnd()),this.vidoInstance.updateTemplate(s)}change(s,o={}){this.vidoInstance.debug&&(console.groupCollapsed(`changing component ${this.instance}`),console.log(n({props:this.props,newProps:s,components:t.keys(),actionsByInstance:e})),console.trace(),console.groupEnd());const i=t.get(this.instance);i&&i.change(s,o)}html(e={}){const n=t.get(this.instance);if(n&&!n.destroyed)return n.update(e,this.vidoInstance)}_getComponents(){return t}_getActions(){return e}}}(i,l,Mt),v=function(t,e,n){return class{constructor(t,e,n){this.destroyed=!1,this.instance=t,this.vidoInstance=e,this.renderFunction=n,this.destroy=this.destroy.bind(this),this.update=this.update.bind(this),this.change=this.change.bind(this)}destroy(){if(!this.destroyed){this.vidoInstance.debug&&(console.groupCollapsed(`component destroy method fired ${this.instance}`),console.log(n({props:this.vidoInstance.props,components:t.keys(),destroyable:this.vidoInstance.destroyable,actionsByInstance:e})),console.trace(),console.groupEnd()),this.content&&"function"==typeof this.content.destroy&&this.content.destroy();for(const t of this.vidoInstance.destroyable)t();this.vidoInstance.onChangeFunctions.length=0,this.vidoInstance.destroyable.length=0,this.vidoInstance.destroyed=!0,this.destroyed=!0,this.vidoInstance.update()}}update(s={}){return this.vidoInstance.debug&&(console.groupCollapsed(`component update method fired ${this.instance}`),console.log(n({components:t.keys(),actionsByInstance:e})),console.trace(),console.groupEnd()),this.renderFunction(s)}change(s,o={leave:!1}){const i=s;this.vidoInstance.debug&&(console.groupCollapsed(`component change method fired ${this.instance}`),console.log(n({props:i,components:t.keys(),onChangeFunctions:this.vidoInstance.onChangeFunctions,changedProps:s,actionsByInstance:e})),console.trace(),console.groupEnd());for(const t of this.vidoInstance.onChangeFunctions)t(s,o)}}}(i,l,Mt);class g{constructor(e="",o=""){this.instance="",this.name="",this.destroyable=[],this.destroyed=!1,this.onChangeFunctions=[],this.debug=!1,this.state=n,this.api=s,this.lastProps={},this.html=B,this.svg=F,this.directive=t,this.asyncAppend=H,this.asyncReplace=z,this.cache=G,this.classMap=K,this.guard=tt,this.live=vt,this.ifDefined=nt,this.repeat=ht,this.unsafeHTML=ut,this.until=ft,this.schedule=Pt,this.getElement=function(t){return function(e){return t(()=>t=>{e(t.committer.element)})()}}(t),this.actionsByInstance=()=>{},this.StyleMap=xt,this.Detach=bt,this.PointerAction=It,this.Action=_t,this.Slots=Ct,this._components=i,this._actions=l,this.instance=e,this.reuseComponents=this.reuseComponents.bind(this),this.onDestroy=this.onDestroy.bind(this),this.onChange=this.onChange.bind(this),this.update=this.update.bind(this),this.destroyComponent=this.destroyComponent.bind(this);for(const t in p)this[t]=p[t].bind(this);this.name=o,this.Actions=new m(e)}static addMethod(t,e){p[t]=e}onDestroy(t){this.destroyable.push(t)}onChange(t){this.onChangeFunctions.push(t)}update(t){return this.updateTemplate(t)}reuseComponents(t,e,n,s,o=!0,i=!1){const r=[],a=t.length,l=e.length;let c=!1;!o||void 0!==e&&0!==e.length||(c=!0);let h=0;if(a<l){let o=l-a;for(;o;){const i=e[l-o],a=this.createComponent(s,n(i));t.push(a),r.push(a),o--}}else if(a>l){let e=a-l;for(o&&(c=!0,h=a-e);e;){const n=a-e;o||(r.push(t[n]),t[n].destroy()),e--}o||(t.length=l)}let d=0;i&&console.log("modified components",r),i&&console.log("current components",t),i&&console.log("data array",e);for(const s of t){const t=e[d];i&&console.log(`reuse components data at '${d}'`,t),s&&!r.includes(s)&&(i&&console.log("getProps fn result",n(t)),s.change(n(t),{leave:c&&d>=h})),d++}}createComponent(t,e={}){const n=t.name+":"+o++;let s;s=new g(n,name);const r=new f(n,s,e),a=new v(n,s,t(s,e));return i.set(n,a),i.get(n).change(e),s.debug&&(console.groupCollapsed(`component created ${n}`),console.log(Mt({props:e,components:i.keys(),actionsByInstance:l})),console.trace(),console.groupEnd()),r}destroyComponent(t,e){if(e.debug&&(console.groupCollapsed(`destroying component ${t}...`),console.log(Mt({components:i.keys(),actionsByInstance:l})),console.trace(),console.groupEnd()),l.has(t))for(const e of l.get(t))"function"==typeof e.componentAction.destroy&&e.componentAction.destroy(e.element,e.props);l.delete(t);const n=i.get(t);n?(n.destroy(),i.delete(t),e.debug&&(console.groupCollapsed(`component destroyed ${t}`),console.log(Mt({components:i.keys(),actionsByInstance:l})),console.trace(),console.groupEnd())):console.warn(`No component to destroy! [${t}]`)}executeActions(){for(const t of l.values()){for(const e of t)if(void 0===e.element.vido){const t=i.get(e.instance);e.isActive=function(){return t&&!1===t.destroyed};const n=e.componentAction,s=n.create;if(void 0!==s){let t;t=s.prototype&&(s.prototype.isAction||s.prototype.update||s.prototype.destroy)||s.isAction?new s(e.element,e.props):s(e.element,e.props),void 0!==t&&("function"==typeof t?n.destroy=t:("function"==typeof t.update&&(n.update=t.update.bind(t)),"function"==typeof t.destroy&&(n.destroy=t.destroy.bind(t))))}}else e.element.vido=e.props,"function"==typeof e.componentAction.update&&e.isActive()&&e.componentAction.update(e.element,e.props);for(const e of t)e.element.vido=e.props}}updateTemplate(t){return t&&h.push(t),new Promise(t=>{const e=++c,n=this;d.then((function(){if(e===c){c=0,n.render();for(const t of h)t();h.length=0,t()}}))})}createApp(t){a=t.element;const e=this.createComponent(t.component,t.props);return r=e.instance,this.render(),e}render(){const t=i.get(r);t?(W(t.update(),a),this.executeActions()):a&&a.remove()}}return new g}return Xt.prototype.lithtml=U,Xt.prototype.Action=_t,Xt.prototype.Directive=e,Xt.prototype.schedule=Pt,Xt.prototype.Detach=bt,Xt.prototype.StyleMap=xt,Xt.prototype.PointerAction=It,Xt.prototype.asyncAppend=H,Xt.prototype.asyncReplace=z,Xt.prototype.cache=G,Xt.prototype.classMap=K,Xt.prototype.guard=tt,Xt.prototype.live=vt,Xt.prototype.ifDefined=nt,Xt.prototype.repeat=ht,Xt.prototype.unsafeHTML=ut,Xt.prototype.until=ft,Xt.prototype.Slots=Ct,Xt}));
 //# sourceMappingURL=vido.umd.min.js.map

package.json

 {
   "name": "@neuronet.io/vido",
-  "version": "3.2.1",
+  "version": "3.2.2",
   "description": "Compilation-less and eval free frontend framework for fast scalable apps.",
   "main": "dist/vido.umd.min.js",
   "module": "dist/vido.esm.min.js",
+  "types": "types/vido.d.ts",
   "scripts": {
@@ -13,3 +14,2 @@ "build": "tsc -p ./tsconfig.global.json && tsc -p ./tsconfig.types.json && tsc -p ./tsconfig.json && rollup -c",
   },
-  "types": "types/vido.d.ts",
   "repository": {
@@ -16,0 +16,0 @@ "type": "git",

src/ActionsCollector.ts

 import { Directive, AttributePart } from 'lit-html-optimised';
 
-export default function getActionsCollector(actionsByInstance) {
+export default function getActionsCollector(actionsByInstance: Map<string, any>) {
   return class ActionsCollector extends Directive {
     instance: string;
-    actions: unknown[];
+    actions: unknown[] = [];
     props: unknown;
 
-    constructor(instance) {
+    constructor(instance: string) {
       super();
@@ -41,3 +41,3 @@ this.instance = instance;
               update() {},
-              destroy() {}
+              destroy() {},
             };
@@ -44,0 +44,0 @@ const action = { instance: this.instance, componentAction, element, props: this.props };

src/Detach.ts

@@ -7,5 +7,5 @@ import { AttributePart, Directive } from 'lit-html-optimised';
   element: Element;
-  nextSibling: Node;
-  previousSibling: Node;
-  parent: Node;
+  nextSibling: ChildNode | null;
+  previousSibling: ChildNode | null;
+  parent: (Node & ParentNode) | null;
 }
@@ -12,0 +12,0 @@

src/GetElement.ts

@@ -1,4 +0,7 @@
-export default function prepareGetElement(directive) {
+import { AttributePart } from 'lit-html-optimised';
+import { DirectiveFactory } from 'lit-html-optimised/lib/directive';
+
+export default function prepareGetElement(directive: <F extends DirectiveFactory>(f: F) => F) {
   return function getElement(callback: (element: Element) => void) {
-    return directive(() => (part) => {
+    return directive(() => (part: AttributePart) => {
       callback(part.committer.element);
@@ -5,0 +8,0 @@ })();

src/helpers.ts

@@ -7,5 +7,5 @@ /**
  */
-export function schedule(fn: (argument) => void | any) {
+export function schedule(fn: (argument: unknown) => void | any) {
   let frameId = 0;
-  function wrapperFn(argument) {
+  function wrapperFn(argument: unknown) {
     if (frameId) {
@@ -29,4 +29,4 @@ return;
  */
-function isObject(item) {
-  return item && typeof item === 'object' && item.constructor && item.constructor.name === 'Object';
+function isObject(item: unknown) {
+  return item && typeof item === 'object' && item !== null && item.constructor && item.constructor.name === 'Object';
 }
@@ -41,3 +41,3 @@
  */
-export function mergeDeep(target, ...sources) {
+export function mergeDeep(target: any, ...sources: any[]): object {
   const source = sources.shift();
@@ -87,4 +87,6 @@ if (isObject(target) && isObject(source)) {
  */
-export function clone(source) {
+export function clone(source: object) {
+  // @ts-ignore
   if (typeof source.actions !== 'undefined') {
+    // @ts-ignore
     const actns = source.actions.map((action) => {
@@ -99,2 +101,3 @@ const result = { ...action };
     });
+    // @ts-ignore
     source.actions = actns;
@@ -101,0 +104,0 @@ }

src/InternalComponentMethods.ts

@@ -1,2 +0,8 @@
-export default function getInternalComponentMethods(components, actionsByInstance, clone) {
+import { AnyVido, htmlResult } from './vido';
+
+export default function getInternalComponentMethods(
+  components: Map<string, any>,
+  actionsByInstance: Map<string, any>,
+  clone: (obj: object) => object
+) {
   return class InternalComponentMethods {
@@ -9,7 +15,6 @@ public instance: string;
 
-    constructor(instance: string, vidoInstance, renderFunction, content) {
+    constructor(instance: string, vidoInstance: AnyVido, renderFunction: (arg: any) => htmlResult) {
       this.instance = instance;
       this.vidoInstance = vidoInstance;
       this.renderFunction = renderFunction;
-      this.content = content;
       this.destroy = this.destroy.bind(this);
@@ -58,3 +63,3 @@ this.update = this.update.bind(this);
 
-    public change(changedProps, options = { leave: false }) {
+    public change(changedProps: unknown, options = { leave: false }) {
       const props = changedProps;
@@ -61,0 +66,0 @@ if (this.vidoInstance.debug) {

src/PointerAction.ts

 import Action from './Action';
+
+export type EventToNormalize = PointerEvent | TouchEvent | WheelEvent | Event;
+
 export interface Options {
@@ -6,8 +9,42 @@ element?: HTMLElement;
   threshold?: number;
-  onDown?: (data) => void;
-  onMove?: (data) => void;
-  onUp?: (data) => void;
-  onWheel?: (data) => void;
+  onDown?: (data: NormalizedEvent) => void;
+  onMove?: (data: NormalizedEvent) => void;
+  onUp?: (data: NormalizedEvent) => void;
+  onWheel?: (data: NormalizedEvent) => void;
 }
 
+export interface InternalOptions extends Options {
+  element: HTMLElement;
+  axis: string;
+  threshold: number;
+  onDown: (data: NormalizedEvent) => void;
+  onMove: (data: NormalizedEvent) => void;
+  onUp: (data: NormalizedEvent) => void;
+  onWheel: (data: NormalizedEvent) => void;
+}
+
+export interface Props {
+  pointerOptions: InternalOptions;
+  [key: string]: unknown;
+}
+
+export interface NormalizedEvent {
+  x: number;
+  y: number;
+  z?: number;
+  pageX?: number;
+  pageY?: number;
+  clientX?: number;
+  clientY?: number;
+  screenX?: number;
+  screenY?: number;
+  movementX?: number;
+  movementY?: number;
+  initialX?: number;
+  initialY?: number;
+  lastX?: number;
+  lastY?: number;
+  event: Event;
+}
+
 const defaultOptions = {
@@ -17,6 +54,6 @@ element: document.createTextNode(''),
   threshold: 10,
-  onDown(data) {},
-  onMove(data) {},
-  onUp(data) {},
-  onWheel(data) {}
+  onDown() {},
+  onMove() {},
+  onUp() {},
+  onWheel() {},
 };
@@ -34,6 +71,6 @@
   private lastX: number = 0;
-  private element: HTMLElement;
-  private options: Options;
+  private element: Element;
+  private options: InternalOptions;
 
-  constructor(element, data) {
+  constructor(element: Element, data: Props) {
     super();
@@ -46,3 +83,3 @@ this.onPointerDown = this.onPointerDown.bind(this);
     this.id = ++id;
-    this.options = { ...defaultOptions, ...data.pointerOptions } as Options;
+    this.options = { ...defaultOptions, ...data.pointerOptions } as InternalOptions;
     if (pointerEventsExists) {
@@ -63,3 +100,3 @@ element.addEventListener('pointerdown', this.onPointerDown);
 
-  private normalizeMouseWheelEvent(event) {
+  private normalizeMouseWheelEvent(event: EventToNormalize): NormalizedEvent {
     // @ts-ignore
@@ -91,3 +128,3 @@ let x = event.deltaX || 0;
 
-  public onWheel(event) {
+  public onWheel(event: WheelEvent) {
     const normalized = this.normalizeMouseWheelEvent(event);
@@ -97,3 +134,3 @@ this.options.onWheel(normalized);
 
-  private normalizePointerEvent(event) {
+  private normalizePointerEvent(event: EventToNormalize): NormalizedEvent {
     let result = { x: 0, y: 0, pageX: 0, pageY: 0, clientX: 0, clientY: 0, screenX: 0, screenY: 0, event };
@@ -116,20 +153,20 @@ switch (event.type) {
       case 'touchcancel':
-        result.x = event.changedTouches[0].screenX;
-        result.y = event.changedTouches[0].screenY;
-        result.pageX = event.changedTouches[0].pageX;
-        result.pageY = event.changedTouches[0].pageY;
-        result.screenX = event.changedTouches[0].screenX;
-        result.screenY = event.changedTouches[0].screenY;
-        result.clientX = event.changedTouches[0].clientX;
-        result.clientY = event.changedTouches[0].clientY;
+        result.x = (event as TouchEvent).changedTouches[0].screenX;
+        result.y = (event as TouchEvent).changedTouches[0].screenY;
+        result.pageX = (event as TouchEvent).changedTouches[0].pageX;
+        result.pageY = (event as TouchEvent).changedTouches[0].pageY;
+        result.screenX = (event as TouchEvent).changedTouches[0].screenX;
+        result.screenY = (event as TouchEvent).changedTouches[0].screenY;
+        result.clientX = (event as TouchEvent).changedTouches[0].clientX;
+        result.clientY = (event as TouchEvent).changedTouches[0].clientY;
         break;
       default:
-        result.x = event.x;
-        result.y = event.y;
-        result.pageX = event.pageX;
-        result.pageY = event.pageY;
-        result.screenX = event.screenX;
-        result.screenY = event.screenY;
-        result.clientX = event.clientX;
-        result.clientY = event.clientY;
+        result.x = (event as PointerEvent).x;
+        result.y = (event as PointerEvent).y;
+        result.pageX = (event as PointerEvent).pageX;
+        result.pageY = (event as PointerEvent).pageY;
+        result.screenX = (event as PointerEvent).screenX;
+        result.screenY = (event as PointerEvent).screenY;
+        result.clientX = (event as PointerEvent).clientX;
+        result.clientY = (event as PointerEvent).clientY;
         break;
@@ -140,4 +177,4 @@ }
 
-  private onPointerDown(event) {
-    if (event.type === 'mousedown' && event.button !== 0) return;
+  private onPointerDown(event: EventToNormalize) {
+    if (event.type === 'mousedown' && (event as MouseEvent).button !== 0) return;
     this.moving = 'xy';
@@ -152,3 +189,3 @@ const normalized = this.normalizePointerEvent(event);
 
-  private handleX(normalized) {
+  private handleX(normalized: NormalizedEvent) {
     let movementX = normalized.x - this.lastX;
@@ -160,3 +197,3 @@ this.lastY = normalized.y;
 
-  private handleY(normalized) {
+  private handleY(normalized: NormalizedEvent) {
     let movementY = normalized.y - this.lastY;
@@ -168,4 +205,4 @@ this.lastY = normalized.y;
 
-  private onPointerMove(event) {
-    if (this.moving === '' || (event.type === 'mousemove' && event.button !== 0)) return;
+  private onPointerMove(event: EventToNormalize) {
+    if (this.moving === '' || (event.type === 'mousemove' && (event as MouseEvent).button !== 0)) return;
     const normalized = this.normalizePointerEvent(event);
@@ -198,3 +235,3 @@ if (this.options.axis === 'x|y') {
         lastY: this.lastY,
-        event
+        event,
       });
@@ -219,3 +256,3 @@ } else if (this.options.axis === 'xy') {
         lastY: this.lastY,
-        event
+        event,
       });
@@ -228,2 +265,3 @@ } else if (this.options.axis === 'x') {
         this.moving = 'x';
+        // @ts-ignore
         this.options.onMove({
@@ -236,3 +274,3 @@ movementX: this.handleX(normalized),
           lastY: this.lastY,
-          event
+          event,
         });
@@ -258,3 +296,3 @@ }
         lastY: this.lastY,
-        event
+        event,
       });
@@ -264,3 +302,3 @@ }
 
-  private onPointerUp(event) {
+  private onPointerUp(event: EventToNormalize) {
     this.moving = '';
@@ -277,3 +315,3 @@ const normalized = this.normalizePointerEvent(event);
       lastY: this.lastY,
-      event
+      event,
     });
@@ -284,3 +322,3 @@ this.lastY = 0;
 
-  public destroy(element) {
+  public destroy(element: Element) {
     if (pointerEventsExists) {
@@ -287,0 +325,0 @@ element.removeEventListener('pointerdown', this.onPointerDown);

src/PublicComponentMethods.ts

@@ -1,2 +0,8 @@
-export default function getPublicComponentMethods(components, actionsByInstance, clone) {
+import { AnyVido } from './vido';
+
+export default function getPublicComponentMethods(
+  components: Map<string, any>,
+  actionsByInstance: Map<string, any>,
+  clone: (obj: object) => object
+) {
   return class PublicComponentMethods {
@@ -9,3 +15,3 @@ public instance: string;
 
-    constructor(instance, vidoInstance, props = {}) {
+    constructor(instance: string, vidoInstance: AnyVido, props: unknown = {}) {
       this.instance = instance;
@@ -39,3 +45,3 @@ this.name = vidoInstance.name;
      */
-    public update(callback: () => void = undefined) {
+    public update(callback: (() => void) | undefined = undefined) {
       if (this.vidoInstance.debug) {
@@ -54,3 +60,3 @@ console.groupCollapsed(`updating component ${this.instance}`);
      */
-    public change(newProps, options) {
+    public change(newProps: unknown, options: unknown = {}) {
       if (this.vidoInstance.debug) {
@@ -70,3 +76,3 @@ console.groupCollapsed(`changing component ${this.instance}`);
      */
-    public html(templateProps = {}) {
+    public html(templateProps: unknown = {}) {
       const component = components.get(this.instance);
@@ -73,0 +79,0 @@ if (component && !component.destroyed) {

src/Slots.ts

@@ -1,2 +0,2 @@
-import { ComponentInstance, lithtml, Component, AnyVido } from './vido';
+import { ComponentInstance, Component, AnyVido } from './vido';
 
@@ -71,3 +71,3 @@ export type SlotInstances = {
   public getInstances(placement: string | undefined): ComponentInstance[] | SlotInstances {
-    if (this.destroyed) return;
+    if (this.destroyed) return [];
     if (placement === undefined) return this.slotInstances;
@@ -74,0 +74,0 @@ return this.slotInstances[placement];

src/StyleMap.ts

@@ -8,4 +8,4 @@ import { Directive, Part } from 'lit-html-optimised';
   private detach: boolean;
-  private toRemove = [];
-  private toUpdate = [];
+  private toRemove: string[] = [];
+  private toUpdate: string[] = [];
   private debug = false;
@@ -28,3 +28,3 @@
 
-  public setDetach(detach) {
+  public setDetach(detach: boolean) {
     this.detach = detach;
@@ -42,2 +42,3 @@ }
     if (element.attributes.getNamedItem('style')) {
+      // @ts-ignore
       const currentElementStyles = element.attributes
@@ -49,2 +50,3 @@ .getNamedItem('style')
       for (const name of currentElementStyles) {
+        // @ts-ignore
         if (this.style[name] === undefined) {
@@ -58,2 +60,3 @@ if (!this.toRemove.includes(name)) this.toRemove.push(name);
       if (!this.style.hasOwnProperty(name)) continue;
+      // @ts-ignore
       if (this.style[name] === undefined) {
@@ -65,3 +68,5 @@ if (!this.toRemove.includes(name)) this.toRemove.push(name);
       if (!this.style.hasOwnProperty(name)) continue;
+      // @ts-ignore
       const value = this.style[name];
+      // @ts-ignore
       const prev = previous[name];
@@ -90,7 +95,10 @@ if (prev !== undefined && prev === value) {
         elementStyle.removeProperty(name);
+        // @ts-ignore
         if (elementStyle[name]) delete elementStyle[name];
       }
       for (const name of this.toUpdate) {
+        // @ts-ignore
         const value = this.style[name];
         if (!name.includes('-')) {
+          // @ts-ignore
           elementStyle[name] = value;
@@ -102,2 +110,3 @@ } else {
       if (this.detach && parent) {
+        // @ts-ignore
         parent.insertBefore(element, nextSibling);
@@ -104,0 +113,0 @@ }

src/vido.ts

@@ -39,4 +39,12 @@ import { render, html, directive, svg, Directive } from 'lit-html-optimised';
 
-export type UpdateTemplate = (props: unknown) => lithtml.TemplateResult;
+export type htmlResult =
+  | lithtml.TemplateResult
+  | lithtml.TemplateResult[]
+  | lithtml.SVGTemplateResult
+  | lithtml.SVGTemplateResult[]
+  | undefined
+  | null;
 
+export type UpdateTemplate = (props: unknown) => htmlResult;
+
 export type Component = (vido: AnyVido, props: unknown) => UpdateTemplate;
@@ -59,3 +67,9 @@
 
+export type Callback = () => void;
+export type OnChangeCallback = (props: any, options: any) => void;
+export type GetPropsFn = (arg: unknown) => unknown | any;
+
 export interface vido<State, Api> {
+  instance: string;
+  name: string;
   state: State;
@@ -65,4 +79,4 @@ api: Api;
   svg: (strings: TemplateStringsArray, ...values: unknown[]) => lithtml.SVGTemplateResult;
-  onDestroy: (callback) => void;
-  onChange: (callback) => void;
+  onDestroy: (callback: Callback) => void;
+  onChange: (callback: OnChangeCallback) => void;
   update: (callback?: any) => Promise<unknown>;
@@ -74,3 +88,3 @@ createComponent: (component: Component, props?: unknown, content?: unknown) => ComponentInstance;
     dataArray: unknown[],
-    getProps,
+    getProps: GetPropsFn,
     component: Component,
@@ -107,3 +121,3 @@ leaveTail?: boolean,
   let actionsByInstance = new Map();
-  let app, element;
+  let app: string, element: HTMLElement;
   let shouldUpdateCount = 0;
@@ -134,5 +148,8 @@ const afterUpdateCallbacks: (() => void)[] = [];
   class VidoInstance {
-    destroyable = [];
+    instance: string = '';
+    name: string = '';
+    Actions: InstanceActionsCollector;
+    destroyable: Callback[] = [];
     destroyed = false;
-    onChangeFunctions = [];
+    onChangeFunctions: OnChangeCallback[] = [];
     debug = false;
@@ -157,3 +174,3 @@ state = state as State;
     getElement = prepareGetElement(directive);
-    actionsByInstance = (componentActions, props) => {};
+    actionsByInstance = (/* componentActions, props */) => {};
     StyleMap = StyleMap;
@@ -167,3 +184,4 @@ Detach = Detach;
 
-    constructor() {
+    constructor(instance: string = '', name: string = '') {
+      this.instance = instance;
       this.reuseComponents = this.reuseComponents.bind(this);
@@ -175,19 +193,23 @@ this.onDestroy = this.onDestroy.bind(this);
       for (const name in additionalMethods) {
+        // @ts-ignore
         this[name] = additionalMethods[name].bind(this);
       }
+      this.name = name;
+      this.Actions = new InstanceActionsCollector(instance);
     }
 
     public static addMethod(name: string, body: (...args: unknown[]) => unknown) {
+      // @ts-ignore
       additionalMethods[name] = body;
     }
 
-    public onDestroy(fn) {
+    public onDestroy(fn: Callback) {
       this.destroyable.push(fn);
     }
 
-    public onChange(fn) {
+    public onChange(fn: OnChangeCallback) {
       this.onChangeFunctions.push(fn);
     }
 
-    public update(callback) {
+    public update(callback: Callback) {
       return this.updateTemplate(callback);
@@ -210,3 +232,3 @@ }
       dataArray: unknown[],
-      getProps,
+      getProps: GetPropsFn,
       component: Component,
@@ -266,10 +288,6 @@ leaveTail = true,
 
-    public createComponent(component, props = {}, content = null): ComponentInstance {
+    public createComponent(component: Component, props: unknown = {}): ComponentInstance {
       const instance = component.name + ':' + componentId++;
       let vidoInstance;
-      vidoInstance = new VidoInstance();
-      vidoInstance.instance = instance;
-      vidoInstance.destroyed = false;
-      vidoInstance.name = component.name;
-      vidoInstance.Actions = new InstanceActionsCollector(instance);
+      vidoInstance = new VidoInstance(instance, name);
       const publicMethods = new PublicComponentMethods(instance, vidoInstance, props);
@@ -279,4 +297,3 @@ const internalMethods = new InternalComponentMethods(
         vidoInstance,
-        component(vidoInstance, props, content),
-        content
+        component(vidoInstance as AnyVido, props)
       );
@@ -294,3 +311,3 @@ components.set(instance, internalMethods);
 
-    public destroyComponent(instance, vidoInstance) {
+    public destroyComponent(instance: string, vidoInstance: VidoInstance) {
       if (vidoInstance.debug) {
@@ -372,3 +389,3 @@ console.groupCollapsed(`destroying component ${instance}...`);
 
-    private updateTemplate(callback: () => void = undefined) {
+    private updateTemplate(callback: (() => void) | undefined = undefined) {
       if (callback) afterUpdateCallbacks.push(callback);
@@ -375,0 +392,0 @@ return new Promise((resolve) => {

tsconfig.json

@@ -7,3 +7,3 @@ {
     "esModuleInterop": true,
-    "strict": false,
+    "strict": true,
     "module": "ESNext",
@@ -17,4 +17,5 @@ "downlevelIteration": true,
     "outDir": "dist",
-    "declaration": false
+    "declaration": false,
+    "noImplicitAny": true
   }
 }

types/ActionsCollector.d.ts

 import { AttributePart } from 'lit-html-optimised';
-export default function getActionsCollector(actionsByInstance: any): {
-    new (instance: any): {
+export default function getActionsCollector(actionsByInstance: Map<string, any>): {
+    new (instance: string): {
         instance: string;
@@ -5,0 +5,0 @@ actions: unknown[];

types/Detach.d.ts

 import { AttributePart, Directive } from 'lit-html-optimised';
 export interface ElementData {
     element: Element;
-    nextSibling: Node;
-    previousSibling: Node;
-    parent: Node;
+    nextSibling: ChildNode | null;
+    previousSibling: ChildNode | null;
+    parent: (Node & ParentNode) | null;
 }
@@ -8,0 +8,0 @@ export default class Detach extends Directive {

types/GetElement.d.ts

@@ -1,1 +0,3 @@
-export default function prepareGetElement(directive: any): (callback: (element: Element) => void) => any;
+import { AttributePart } from 'lit-html-optimised';
+import { DirectiveFactory } from 'lit-html-optimised/lib/directive';
+export default function prepareGetElement(directive: <F extends DirectiveFactory>(f: F) => F): (callback: (element: Element) => void) => (part: AttributePart) => void;

types/global.d.ts

@@ -9,4 +9,4 @@ declare module "Action" {
     import { AttributePart } from 'lit-html-optimised';
-    export default function getActionsCollector(actionsByInstance: any): {
-        new (instance: any): {
+    export default function getActionsCollector(actionsByInstance: Map<string, any>): {
+        new (instance: string): {
             instance: string;
@@ -26,5 +26,5 @@ actions: unknown[];
         element: Element;
-        nextSibling: Node;
-        previousSibling: Node;
-        parent: Node;
+        nextSibling: ChildNode | null;
+        previousSibling: ChildNode | null;
+        parent: (Node & ParentNode) | null;
     }
@@ -38,22 +38,26 @@ export default class Detach extends Directive {
 declare module "GetElement" {
-    export default function prepareGetElement(directive: any): (callback: (element: Element) => void) => any;
+    import { AttributePart } from 'lit-html-optimised';
+    import { DirectiveFactory } from 'lit-html-optimised/lib/directive';
+    export default function prepareGetElement(directive: <F extends DirectiveFactory>(f: F) => F): (callback: (element: Element) => void) => (part: AttributePart) => void;
 }
-declare module "InternalComponentMethods" {
-    export default function getInternalComponentMethods(components: any, actionsByInstance: any, clone: any): {
-        new (instance: string, vidoInstance: any, renderFunction: any, content: any): {
-            instance: string;
-            vidoInstance: any;
-            renderFunction: (changedProps: any) => void;
-            content: any;
-            destroyed: boolean;
-            destroy(): void;
-            update(props?: {}): void;
-            change(changedProps: any, options?: {
-                leave: boolean;
-            }): void;
-        };
-    };
+declare module "StyleMap" {
+    import { Directive, Part } from 'lit-html-optimised';
+    import { PropertiesHyphenFallback as CSSProp } from 'csstype';
+    export default class StyleMap extends Directive {
+        style: CSSProp;
+        private previous;
+        private detach;
+        private toRemove;
+        private toUpdate;
+        private debug;
+        constructor(styleInfo: CSSProp, detach?: boolean);
+        setStyle(styleInfo: CSSProp): void;
+        setDebug(debug?: boolean): void;
+        setDetach(detach: boolean): void;
+        body(part: Part): void;
+    }
 }
 declare module "PointerAction" {
     import Action from "Action";
+    export type EventToNormalize = PointerEvent | TouchEvent | WheelEvent | Event;
     export interface Options {
@@ -63,7 +67,38 @@ element?: HTMLElement;
         threshold?: number;
-        onDown?: (data: any) => void;
-        onMove?: (data: any) => void;
-        onUp?: (data: any) => void;
-        onWheel?: (data: any) => void;
+        onDown?: (data: NormalizedEvent) => void;
+        onMove?: (data: NormalizedEvent) => void;
+        onUp?: (data: NormalizedEvent) => void;
+        onWheel?: (data: NormalizedEvent) => void;
     }
+    export interface InternalOptions extends Options {
+        element: HTMLElement;
+        axis: string;
+        threshold: number;
+        onDown: (data: NormalizedEvent) => void;
+        onMove: (data: NormalizedEvent) => void;
+        onUp: (data: NormalizedEvent) => void;
+        onWheel: (data: NormalizedEvent) => void;
+    }
+    export interface Props {
+        pointerOptions: InternalOptions;
+        [key: string]: unknown;
+    }
+    export interface NormalizedEvent {
+        x: number;
+        y: number;
+        z?: number;
+        pageX?: number;
+        pageY?: number;
+        clientX?: number;
+        clientY?: number;
+        screenX?: number;
+        screenY?: number;
+        movementX?: number;
+        movementY?: number;
+        initialX?: number;
+        initialY?: number;
+        lastX?: number;
+        lastY?: number;
+        event: Event;
+    }
     export default class PointerAction extends Action {
@@ -78,5 +113,5 @@ private id;
         private options;
-        constructor(element: any, data: any);
+        constructor(element: Element, data: Props);
         private normalizeMouseWheelEvent;
-        onWheel(event: any): void;
+        onWheel(event: WheelEvent): void;
         private normalizePointerEvent;
@@ -88,8 +123,9 @@ private onPointerDown;
         private onPointerUp;
-        destroy(element: any): void;
+        destroy(element: Element): void;
     }
 }
 declare module "PublicComponentMethods" {
-    export default function getPublicComponentMethods(components: any, actionsByInstance: any, clone: any): {
-        new (instance: any, vidoInstance: any, props?: {}): {
+    import { AnyVido } from "vido";
+    export default function getPublicComponentMethods(components: Map<string, any>, actionsByInstance: Map<string, any>, clone: (obj: object) => object): {
+        new (instance: string, vidoInstance: AnyVido, props?: unknown): {
             instance: string;
@@ -112,3 +148,3 @@ name: string;
              */
-            change(newProps: any, options: any): void;
+            change(newProps: unknown, options?: unknown): void;
             /**
@@ -118,25 +154,8 @@ * Get component lit-html template
              */
-            html(templateProps?: {}): any;
-            _getComponents(): any;
-            _getActions(): any;
+            html(templateProps?: unknown): any;
+            _getComponents(): Map<string, any>;
+            _getActions(): Map<string, any>;
         };
     };
 }
-declare module "StyleMap" {
-    import { Directive, Part } from 'lit-html-optimised';
-    import { PropertiesHyphenFallback as CSSProp } from 'csstype';
-    export default class StyleMap extends Directive {
-        style: CSSProp;
-        private previous;
-        private detach;
-        private toRemove;
-        private toUpdate;
-        private debug;
-        constructor(styleInfo: CSSProp, detach?: boolean);
-        setStyle(styleInfo: CSSProp): void;
-        setDebug(debug?: boolean): void;
-        setDetach(detach: any): void;
-        body(part: Part): void;
-    }
-}
 declare module "helpers" {
@@ -149,3 +168,3 @@ /**
      */
-    export function schedule(fn: (argument: any) => void | any): (argument: any) => void;
+    export function schedule(fn: (argument: unknown) => void | any): (argument: unknown) => void;
     /**
@@ -158,3 +177,3 @@ * Merge deep - helper function which will merge objects recursively - creating brand new one - like clone
      */
-    export function mergeDeep(target: any, ...sources: any[]): any;
+    export function mergeDeep(target: any, ...sources: any[]): object;
     /**
@@ -166,3 +185,3 @@ * Clone helper function
      */
-    export function clone(source: any): any;
+    export function clone(source: object): object;
     const _default: {
@@ -175,2 +194,25 @@ mergeDeep: typeof mergeDeep;
 }
+declare module "Slots" {
+    import { ComponentInstance, Component, AnyVido } from "vido";
+    export type SlotInstances = {
+        [key: string]: ComponentInstance[];
+    };
+    export interface SlotStorage {
+        [key: string]: Component[];
+    }
+    export class Slots {
+        private slotInstances;
+        private vido;
+        private destroyed;
+        private props;
+        constructor(vido: AnyVido, props: unknown);
+        setComponents(slots: SlotStorage): void;
+        destroy(): void;
+        change(changedProps: unknown, options?: any): void;
+        getInstances(placement: string | undefined): ComponentInstance[] | SlotInstances;
+        html(placement: string, templateProps?: any): any;
+        getProps(): unknown;
+        isDestroyed(): boolean;
+    }
+}
 declare module "vido" {
@@ -195,3 +237,4 @@ import { directive, Directive } from 'lit-html-optimised';
     import * as lithtml from 'lit-html-optimised';
-    export type UpdateTemplate = (props: unknown) => lithtml.TemplateResult;
+    export type htmlResult = lithtml.TemplateResult | lithtml.TemplateResult[] | lithtml.SVGTemplateResult | lithtml.SVGTemplateResult[] | undefined | null;
+    export type UpdateTemplate = (props: unknown) => htmlResult;
     export type Component = (vido: AnyVido, props: unknown) => UpdateTemplate;
@@ -211,3 +254,8 @@ export interface ComponentInstance {
     }
+    export type Callback = () => void;
+    export type OnChangeCallback = (props: any, options: any) => void;
+    export type GetPropsFn = (arg: unknown) => unknown | any;
     export interface vido<State, Api> {
+        instance: string;
+        name: string;
         state: State;
@@ -217,8 +265,8 @@ api: Api;
         svg: (strings: TemplateStringsArray, ...values: unknown[]) => lithtml.SVGTemplateResult;
-        onDestroy: (callback: any) => void;
-        onChange: (callback: any) => void;
+        onDestroy: (callback: Callback) => void;
+        onChange: (callback: OnChangeCallback) => void;
         update: (callback?: any) => Promise<unknown>;
         createComponent: (component: Component, props?: unknown, content?: unknown) => ComponentInstance;
         createApp: (config: CreateAppConfig) => ComponentInstance;
-        reuseComponents: (currentComponents: ComponentInstance[], dataArray: unknown[], getProps: any, component: Component, leaveTail?: boolean, debug?: boolean) => void;
+        reuseComponents: (currentComponents: ComponentInstance[], dataArray: unknown[], getProps: GetPropsFn, component: Component, leaveTail?: boolean, debug?: boolean) => void;
         getElement: (callback: (element: Element) => void) => void;
@@ -248,24 +296,18 @@ directive: typeof directive;
 }
-declare module "Slots" {
-    import { ComponentInstance, Component, AnyVido } from "vido";
-    export type SlotInstances = {
-        [key: string]: ComponentInstance[];
+declare module "InternalComponentMethods" {
+    import { AnyVido, htmlResult } from "vido";
+    export default function getInternalComponentMethods(components: Map<string, any>, actionsByInstance: Map<string, any>, clone: (obj: object) => object): {
+        new (instance: string, vidoInstance: AnyVido, renderFunction: (arg: any) => htmlResult): {
+            instance: string;
+            vidoInstance: any;
+            renderFunction: (changedProps: any) => void;
+            content: any;
+            destroyed: boolean;
+            destroy(): void;
+            update(props?: {}): void;
+            change(changedProps: unknown, options?: {
+                leave: boolean;
+            }): void;
+        };
     };
-    export interface SlotStorage {
-        [key: string]: Component[];
-    }
-    export class Slots {
-        private slotInstances;
-        private vido;
-        private destroyed;
-        private props;
-        constructor(vido: AnyVido, props: unknown);
-        setComponents(slots: SlotStorage): void;
-        destroy(): void;
-        change(changedProps: unknown, options?: any): void;
-        getInstances(placement: string | undefined): ComponentInstance[] | SlotInstances;
-        html(placement: string, templateProps?: any): any;
-        getProps(): unknown;
-        isDestroyed(): boolean;
-    }
 }
@@ -272,0 +314,0 @@ declare module "vido.umd" {

types/helpers.d.ts

@@ -7,3 +7,3 @@ /**
  */
-export declare function schedule(fn: (argument: any) => void | any): (argument: any) => void;
+export declare function schedule(fn: (argument: unknown) => void | any): (argument: unknown) => void;
 /**
@@ -16,3 +16,3 @@ * Merge deep - helper function which will merge objects recursively - creating brand new one - like clone
  */
-export declare function mergeDeep(target: any, ...sources: any[]): any;
+export declare function mergeDeep(target: any, ...sources: any[]): object;
 /**
@@ -24,3 +24,3 @@ * Clone helper function
  */
-export declare function clone(source: any): any;
+export declare function clone(source: object): object;
 declare const _default: {
@@ -27,0 +27,0 @@ mergeDeep: typeof mergeDeep;

types/InternalComponentMethods.d.ts

@@ -1,3 +0,4 @@
-export default function getInternalComponentMethods(components: any, actionsByInstance: any, clone: any): {
-    new (instance: string, vidoInstance: any, renderFunction: any, content: any): {
+import { AnyVido, htmlResult } from './vido';
+export default function getInternalComponentMethods(components: Map<string, any>, actionsByInstance: Map<string, any>, clone: (obj: object) => object): {
+    new (instance: string, vidoInstance: AnyVido, renderFunction: (arg: any) => htmlResult): {
         instance: string;
@@ -10,3 +11,3 @@ vidoInstance: any;
         update(props?: {}): void;
-        change(changedProps: any, options?: {
+        change(changedProps: unknown, options?: {
             leave: boolean;
@@ -13,0 +14,0 @@ }): void;

types/PointerAction.d.ts

 import Action from './Action';
+export declare type EventToNormalize = PointerEvent | TouchEvent | WheelEvent | Event;
 export interface Options {
@@ -6,7 +7,38 @@ element?: HTMLElement;
     threshold?: number;
-    onDown?: (data: any) => void;
-    onMove?: (data: any) => void;
-    onUp?: (data: any) => void;
-    onWheel?: (data: any) => void;
+    onDown?: (data: NormalizedEvent) => void;
+    onMove?: (data: NormalizedEvent) => void;
+    onUp?: (data: NormalizedEvent) => void;
+    onWheel?: (data: NormalizedEvent) => void;
 }
+export interface InternalOptions extends Options {
+    element: HTMLElement;
+    axis: string;
+    threshold: number;
+    onDown: (data: NormalizedEvent) => void;
+    onMove: (data: NormalizedEvent) => void;
+    onUp: (data: NormalizedEvent) => void;
+    onWheel: (data: NormalizedEvent) => void;
+}
+export interface Props {
+    pointerOptions: InternalOptions;
+    [key: string]: unknown;
+}
+export interface NormalizedEvent {
+    x: number;
+    y: number;
+    z?: number;
+    pageX?: number;
+    pageY?: number;
+    clientX?: number;
+    clientY?: number;
+    screenX?: number;
+    screenY?: number;
+    movementX?: number;
+    movementY?: number;
+    initialX?: number;
+    initialY?: number;
+    lastX?: number;
+    lastY?: number;
+    event: Event;
+}
 export default class PointerAction extends Action {
@@ -21,5 +53,5 @@ private id;
     private options;
-    constructor(element: any, data: any);
+    constructor(element: Element, data: Props);
     private normalizeMouseWheelEvent;
-    onWheel(event: any): void;
+    onWheel(event: WheelEvent): void;
     private normalizePointerEvent;
@@ -31,3 +63,3 @@ private onPointerDown;
     private onPointerUp;
-    destroy(element: any): void;
+    destroy(element: Element): void;
 }

types/PublicComponentMethods.d.ts

@@ -1,3 +0,4 @@
-export default function getPublicComponentMethods(components: any, actionsByInstance: any, clone: any): {
-    new (instance: any, vidoInstance: any, props?: {}): {
+import { AnyVido } from './vido';
+export default function getPublicComponentMethods(components: Map<string, any>, actionsByInstance: Map<string, any>, clone: (obj: object) => object): {
+    new (instance: string, vidoInstance: AnyVido, props?: unknown): {
         instance: string;
@@ -20,3 +21,3 @@ name: string;
          */
-        change(newProps: any, options: any): void;
+        change(newProps: unknown, options?: unknown): void;
         /**
@@ -26,6 +27,6 @@ * Get component lit-html template
          */
-        html(templateProps?: {}): any;
-        _getComponents(): any;
-        _getActions(): any;
+        html(templateProps?: unknown): any;
+        _getComponents(): Map<string, any>;
+        _getActions(): Map<string, any>;
     };
 };

types/StyleMap.d.ts

@@ -13,4 +13,4 @@ import { Directive, Part } from 'lit-html-optimised';
     setDebug(debug?: boolean): void;
-    setDetach(detach: any): void;
+    setDetach(detach: boolean): void;
     body(part: Part): void;
 }

types/vido.d.ts

@@ -19,3 +19,4 @@ import { directive, Directive } from 'lit-html-optimised';
 import * as lithtml from 'lit-html-optimised';
-export declare type UpdateTemplate = (props: unknown) => lithtml.TemplateResult;
+export declare type htmlResult = lithtml.TemplateResult | lithtml.TemplateResult[] | lithtml.SVGTemplateResult | lithtml.SVGTemplateResult[] | undefined | null;
+export declare type UpdateTemplate = (props: unknown) => htmlResult;
 export declare type Component = (vido: AnyVido, props: unknown) => UpdateTemplate;
@@ -35,3 +36,8 @@ export interface ComponentInstance {
 }
+export declare type Callback = () => void;
+export declare type OnChangeCallback = (props: any, options: any) => void;
+export declare type GetPropsFn = (arg: unknown) => unknown | any;
 export interface vido<State, Api> {
+    instance: string;
+    name: string;
     state: State;
@@ -41,8 +47,8 @@ api: Api;
     svg: (strings: TemplateStringsArray, ...values: unknown[]) => lithtml.SVGTemplateResult;
-    onDestroy: (callback: any) => void;
-    onChange: (callback: any) => void;
+    onDestroy: (callback: Callback) => void;
+    onChange: (callback: OnChangeCallback) => void;
     update: (callback?: any) => Promise<unknown>;
     createComponent: (component: Component, props?: unknown, content?: unknown) => ComponentInstance;
     createApp: (config: CreateAppConfig) => ComponentInstance;
-    reuseComponents: (currentComponents: ComponentInstance[], dataArray: unknown[], getProps: any, component: Component, leaveTail?: boolean, debug?: boolean) => void;
+    reuseComponents: (currentComponents: ComponentInstance[], dataArray: unknown[], getProps: GetPropsFn, component: Component, leaveTail?: boolean, debug?: boolean) => void;
     getElement: (callback: (element: Element) => void) => void;
@@ -49,0 +55,0 @@ directive: typeof directive;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1387850

increased by1.46%

Lines of code

11106

increased by1.87%

No dependency changes